diff options
Diffstat (limited to 'www/wiki/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less')
-rw-r--r-- | www/wiki/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less | 254 |
1 files changed, 254 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/www/wiki/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less new file mode 100644 index 00000000..395f80bc --- /dev/null +++ b/www/wiki/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less @@ -0,0 +1,254 @@ +/*! + * MediaWiki Widgets – CalendarWidget styles. + * + * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/* stylelint-disable no-duplicate-selectors */ +@import 'mediawiki.mixins'; + +@calendarWidth: 21em; +@calendarHeight: 14em; + +.mw-widget-calendarWidget { + width: @calendarWidth; +} + +.mw-widget-calendarWidget-header { + position: relative; + line-height: 2.5; +} + +.mw-widget-calendarWidget-header .oo-ui-buttonWidget { + margin-right: 0; +} + +.mw-widget-calendarWidget-header .mw-widget-calendarWidget-labelButton { + margin: 0 auto; + display: block; + width: @calendarWidth - 2 * 3em; + + .oo-ui-buttonElement-button { + width: @calendarWidth - 2 * 3em; + text-align: center; + } +} + +.mw-widget-calendarWidget-upButton { + position: absolute; + right: 3em; +} + +.mw-widget-calendarWidget-prevButton { + float: left; +} + +.mw-widget-calendarWidget-nextButton { + float: right; +} + +.mw-widget-calendarWidget-body-outer-wrapper { + clear: both; + position: relative; + overflow: hidden; + // Fit 7 days, 3em each + width: @calendarWidth; + // Fit 6 weeks + heading line, 2em each + height: @calendarHeight; +} + +.mw-widget-calendarWidget-body-wrapper { + .mw-widget-calendarWidget-body { + display: inline-block; + // Fit 7 days, 3em each + width: @calendarWidth; + // Fit 6 weeks + heading line, 2em each + height: @calendarHeight; + } + + .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child { + margin-top: -@calendarHeight; /* stylelint-disable-line value-keyword-case */ + margin-left: -@calendarWidth; /* stylelint-disable-line value-keyword-case */ + } + + .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child { + margin-top: 0; + margin-left: 0; + } +} + +.mw-widget-calendarWidget-body-wrapper-fade-previous { + width: @calendarWidth * 2; + height: @calendarHeight; + + .mw-widget-calendarWidget-body:first-child { + margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */ + margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */ + .transition( margin-left 500ms ); + } +} + +.mw-widget-calendarWidget-body-wrapper-fade-next { + width: @calendarWidth * 2; + height: @calendarHeight; + + .mw-widget-calendarWidget-body:first-child { + margin-left: -@calendarWidth !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */ + margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */ + .transition( margin-left 500ms ); + } +} + +.mw-widget-calendarWidget-body-wrapper-fade-up { + width: @calendarWidth; + height: @calendarHeight * 2; + + .mw-widget-calendarWidget-body { + display: block; + } + + .mw-widget-calendarWidget-body:first-child { + margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */ + margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */ + .transition( margin-top 500ms ); + } +} + +.mw-widget-calendarWidget-body-wrapper-fade-down { + width: @calendarWidth; + height: @calendarHeight * 2; + + .mw-widget-calendarWidget-body { + display: block; + } + + .mw-widget-calendarWidget-body:first-child { + margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */ + margin-top: -@calendarHeight !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */ + .transition( margin-top 500ms ); + } +} + +.mw-widget-calendarWidget-day, +.mw-widget-calendarWidget-day-heading, +.mw-widget-calendarWidget-month, +.mw-widget-calendarWidget-year { + display: inline-block; + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; +} + +.mw-widget-calendarWidget-day, +.mw-widget-calendarWidget-day-heading { + // 7x7 grid + width: @calendarWidth / 7; + line-height: @calendarHeight / 7; + // Don't overlap the hacked-up fake box-shadow border we get when focussed + &:nth-child( 7n ) { + width: @calendarWidth / 7 - 0.2em; + margin-right: 0.2em; + } + &:nth-child( 7n+1 ) { + width: @calendarWidth / 7 - 0.2em; + margin-left: 0.2em; + } + &:nth-child( 42 ) ~ & { + line-height: @calendarHeight / 7 - 0.2em; + margin-bottom: 0.2em; + } +} + +.mw-widget-calendarWidget-month { + // 2x6 grid + width: @calendarWidth / 2; + line-height: @calendarHeight / 6; + // Don't overlap the hacked-up fake box-shadow border we get when focussed + &:nth-child( 2n ) { + width: @calendarWidth / 2 - 0.2em; + margin-right: 0.2em; + } + &:nth-child( 2n+1 ) { + width: @calendarWidth / 2 - 0.2em; + margin-left: 0.2em; + } + &:nth-child( 10 ) ~ & { + line-height: @calendarHeight / 6 - 0.2em; + margin-bottom: 0.2em; + } +} + +.mw-widget-calendarWidget-year { + // 5x4 grid + width: @calendarWidth / 5; + line-height: @calendarHeight / 4; + // Don't overlap the hacked-up fake box-shadow border we get when focussed + &:nth-child( 5n ) { + width: @calendarWidth / 5 - 0.2em; + margin-right: 0.2em; + } + &:nth-child( 5n+1 ) { + width: @calendarWidth / 5 - 0.2em; + margin-left: 0.2em; + } + &:nth-child( 15 ) ~ & { + line-height: @calendarHeight / 4 - 0.2em; + margin-bottom: 0.2em; + } +} + +.mw-widget-calendarWidget-item { + cursor: pointer; +} + +/* Theme-specific */ +.mw-widget-calendarWidget { + .box-sizing( border-box ); + border: 1px solid #a2a9b1; + .transition( ~'border-color 100ms, box-shadow 100ms' ); + + &:focus { + border-color: #36c; + box-shadow: inset 0 0 0 1px #36c; + outline: 0; + } + + &-day { + color: #222; + border-radius: 2px; + } + + &-day-heading { + color: #54595d; + font-weight: bold; + } + + &-day-additional { + color: #a2a9b1; + + &:hover { + color: #222; + } + } + + &-day-today { + box-shadow: inset 0 0 0 1px #36c; + } + + &-item { + .transition( ~'background-color 250ms, color 250ms' ); + + &:hover { + background-color: #36c; + color: #fff; + } + + &-selected { + background-color: #2a4b8d; + color: #fff; + } + } +} |