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 {
47 .mw-widget-calendarWidget-prevButton {
51 .mw-widget-calendarWidget-nextButton {
55 .mw-widget-calendarWidget-body-outer-wrapper {
59 // Fit 7 days, 3em each
60 width: @calendarWidth;
61 // Fit 6 weeks + heading line, 2em each
62 height: @calendarHeight;
65 .mw-widget-calendarWidget-body-wrapper {
66 .mw-widget-calendarWidget-body {
67 display: inline-block;
69 // Fit 7 days, 3em each
70 width: @calendarWidth;
71 // Fit 6 weeks + heading line, 2em each
72 height: @calendarHeight;
75 .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child {
76 margin-top: -@calendarHeight; /* stylelint-disable-line value-keyword-case */
77 margin-left: -@calendarWidth; /* stylelint-disable-line value-keyword-case */
80 .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child {
86 .mw-widget-calendarWidget-body-wrapper-fade-previous {
87 width: @calendarWidth * 2;
88 height: @calendarHeight;
90 .mw-widget-calendarWidget-body:first-child {
91 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
92 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
93 .transition( margin-left 500ms );
97 .mw-widget-calendarWidget-body-wrapper-fade-next {
98 width: @calendarWidth * 2;
99 height: @calendarHeight;
101 .mw-widget-calendarWidget-body:first-child {
102 margin-left: -@calendarWidth !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
103 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
104 .transition( margin-left 500ms );
108 .mw-widget-calendarWidget-body-wrapper-fade-up {
109 width: @calendarWidth;
110 height: @calendarHeight * 2;
112 .mw-widget-calendarWidget-body {
117 .mw-widget-calendarWidget-body:first-child {
118 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
119 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
120 .transition( margin-top 500ms );
124 .mw-widget-calendarWidget-body-wrapper-fade-down {
125 width: @calendarWidth;
126 height: @calendarHeight * 2;
128 .mw-widget-calendarWidget-body {
133 .mw-widget-calendarWidget-body:first-child {
134 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
135 margin-top: -@calendarHeight !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
136 .transition( margin-top 500ms );
140 // Support: Browsers that render CSS Grid. All others ignore unknown `grid-*` properties.
141 // This avoids any calculation issues pushing items to next line.
142 .mw-widget-calendarWidget-body-month {
143 grid-template-columns: auto auto auto auto auto auto auto;
146 .mw-widget-calendarWidget-body-year {
147 grid-template-columns: auto auto;
150 .mw-widget-calendarWidget-body-duodecade {
151 grid-template-columns: auto auto auto auto auto;
154 .mw-widget-calendarWidget-day,
155 .mw-widget-calendarWidget-day-heading,
156 .mw-widget-calendarWidget-month,
157 .mw-widget-calendarWidget-year {
158 display: inline-block;
159 vertical-align: middle;
162 text-overflow: ellipsis;
166 .mw-widget-calendarWidget-day,
167 .mw-widget-calendarWidget-day-heading {
169 width: @calendarWidth / 7;
170 line-height: @calendarHeight / 7;
172 // Don't overlap the hacked-up fake box-shadow border we get when focussed
174 width: @calendarWidth / 7 - 0.2em;
178 &:nth-child( 7n+1 ) {
179 width: @calendarWidth / 7 - 0.2em;
183 &:nth-child( 42 ) ~ & {
184 line-height: @calendarHeight / 7 - 0.2em;
185 margin-bottom: 0.2em;
189 .mw-widget-calendarWidget-month {
191 width: @calendarWidth / 2;
192 line-height: @calendarHeight / 6;
194 // Don't overlap the hacked-up fake box-shadow border we get when focussed
196 width: @calendarWidth / 2 - 0.2em;
200 &:nth-child( 2n+1 ) {
201 width: @calendarWidth / 2 - 0.2em;
205 &:nth-child( 10 ) ~ & {
206 line-height: @calendarHeight / 6 - 0.2em;
207 margin-bottom: 0.2em;
211 .mw-widget-calendarWidget-year {
213 width: @calendarWidth / 5;
214 line-height: @calendarHeight / 4;
216 // Don't overlap the hacked-up fake box-shadow border we get when focussed
218 width: @calendarWidth / 5 - 0.2em;
222 &:nth-child( 5n+1 ) {
223 width: @calendarWidth / 5 - 0.2em;
227 &:nth-child( 15 ) ~ & {
228 line-height: @calendarHeight / 4 - 0.2em;
229 margin-bottom: 0.2em;
233 .mw-widget-calendarWidget-item {
238 .mw-widget-calendarWidget {
239 .box-sizing( border-box );
240 border: 1px solid #a2a9b1;
241 .transition( ~'border-color 100ms, box-shadow 100ms' );
245 box-shadow: inset 0 0 0 1px #36c;
268 box-shadow: inset 0 0 0 1px #36c;
272 .transition( ~'background-color 250ms, color 250ms' );
275 background-color: #36c;
280 background-color: #2a4b8d;