MediaWiki 1.30.2

[autoinstallsdev/mediawiki.git] / resources / src / mediawiki.widgets / mw.widgets.CalendarWidget.less

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
new file mode 100644 (file)
index 0000000..395f80b
--- /dev/null
+++ b/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;
+               }
+       }
+}