2 * MediaWiki Widgets – CalendarWidget styles.
4 * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
8 /* stylelint-disable no-duplicate-selectors */
9 @import 'mediawiki.mixins';
12 @calendarHeight: 14em;
14 .mw-widget-calendarWidget {
15 width: @calendarWidth;
18 .mw-widget-calendarWidget-header {
23 // Overwrite OOUI's `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
24 .mw-widget-calendarWidget-header .oo-ui-buttonWidget.oo-ui-iconElement {
29 .mw-widget-calendarWidget-header .mw-widget-calendarWidget-labelButton {
32 width: @calendarWidth - 2 * 3em;
34 .oo-ui-buttonElement-button {
35 width: @calendarWidth - 2 * 3em;
40 .mw-widget-calendarWidget-upButton {
45 .mw-widget-calendarWidget-prevButton {
49 .mw-widget-calendarWidget-nextButton {
53 .mw-widget-calendarWidget-body-outer-wrapper {
57 // Fit 7 days, 3em each
58 width: @calendarWidth;
59 // Fit 6 weeks + heading line, 2em each
60 height: @calendarHeight;
63 .mw-widget-calendarWidget-body-wrapper {
64 .mw-widget-calendarWidget-body {
65 display: inline-block;
66 // Fit 7 days, 3em each
67 width: @calendarWidth;
68 // Fit 6 weeks + heading line, 2em each
69 height: @calendarHeight;
72 .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child {
73 margin-top: -@calendarHeight; /* stylelint-disable-line value-keyword-case */
74 margin-left: -@calendarWidth; /* stylelint-disable-line value-keyword-case */
77 .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child {
83 .mw-widget-calendarWidget-body-wrapper-fade-previous {
84 width: @calendarWidth * 2;
85 height: @calendarHeight;
87 .mw-widget-calendarWidget-body:first-child {
88 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
89 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
90 .transition( margin-left 500ms );
94 .mw-widget-calendarWidget-body-wrapper-fade-next {
95 width: @calendarWidth * 2;
96 height: @calendarHeight;
98 .mw-widget-calendarWidget-body:first-child {
99 margin-left: -@calendarWidth !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
100 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
101 .transition( margin-left 500ms );
105 .mw-widget-calendarWidget-body-wrapper-fade-up {
106 width: @calendarWidth;
107 height: @calendarHeight * 2;
109 .mw-widget-calendarWidget-body {
113 .mw-widget-calendarWidget-body:first-child {
114 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
115 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
116 .transition( margin-top 500ms );
120 .mw-widget-calendarWidget-body-wrapper-fade-down {
121 width: @calendarWidth;
122 height: @calendarHeight * 2;
124 .mw-widget-calendarWidget-body {
128 .mw-widget-calendarWidget-body:first-child {
129 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
130 margin-top: -@calendarHeight !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
131 .transition( margin-top 500ms );
135 .mw-widget-calendarWidget-day,
136 .mw-widget-calendarWidget-day-heading,
137 .mw-widget-calendarWidget-month,
138 .mw-widget-calendarWidget-year {
139 display: inline-block;
140 vertical-align: middle;
143 text-overflow: ellipsis;
147 .mw-widget-calendarWidget-day,
148 .mw-widget-calendarWidget-day-heading {
150 width: @calendarWidth / 7;
151 line-height: @calendarHeight / 7;
152 // Don't overlap the hacked-up fake box-shadow border we get when focussed
154 width: @calendarWidth / 7 - 0.2em;
157 &:nth-child( 7n+1 ) {
158 width: @calendarWidth / 7 - 0.2em;
161 &:nth-child( 42 ) ~ & {
162 line-height: @calendarHeight / 7 - 0.2em;
163 margin-bottom: 0.2em;
167 .mw-widget-calendarWidget-month {
169 width: @calendarWidth / 2;
170 line-height: @calendarHeight / 6;
171 // Don't overlap the hacked-up fake box-shadow border we get when focussed
173 width: @calendarWidth / 2 - 0.2em;
176 &:nth-child( 2n+1 ) {
177 width: @calendarWidth / 2 - 0.2em;
180 &:nth-child( 10 ) ~ & {
181 line-height: @calendarHeight / 6 - 0.2em;
182 margin-bottom: 0.2em;
186 .mw-widget-calendarWidget-year {
188 width: @calendarWidth / 5;
189 line-height: @calendarHeight / 4;
190 // Don't overlap the hacked-up fake box-shadow border we get when focussed
192 width: @calendarWidth / 5 - 0.2em;
195 &:nth-child( 5n+1 ) {
196 width: @calendarWidth / 5 - 0.2em;
199 &:nth-child( 15 ) ~ & {
200 line-height: @calendarHeight / 4 - 0.2em;
201 margin-bottom: 0.2em;
205 .mw-widget-calendarWidget-item {
210 .mw-widget-calendarWidget {
211 .box-sizing( border-box );
212 border: 1px solid #a2a9b1;
213 .transition( ~'border-color 100ms, box-shadow 100ms' );
217 box-shadow: inset 0 0 0 1px #36c;
240 box-shadow: inset 0 0 0 1px #36c;
244 .transition( ~'background-color 250ms, color 250ms' );
247 background-color: #36c;
252 background-color: #2a4b8d;