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;
153 // Don't overlap the hacked-up fake box-shadow border we get when focussed
155 width: @calendarWidth / 7 - 0.2em;
159 &:nth-child( 7n+1 ) {
160 width: @calendarWidth / 7 - 0.2em;
164 &:nth-child( 42 ) ~ & {
165 line-height: @calendarHeight / 7 - 0.2em;
166 margin-bottom: 0.2em;
170 .mw-widget-calendarWidget-month {
172 width: @calendarWidth / 2;
173 line-height: @calendarHeight / 6;
175 // Don't overlap the hacked-up fake box-shadow border we get when focussed
177 width: @calendarWidth / 2 - 0.2em;
181 &:nth-child( 2n+1 ) {
182 width: @calendarWidth / 2 - 0.2em;
186 &:nth-child( 10 ) ~ & {
187 line-height: @calendarHeight / 6 - 0.2em;
188 margin-bottom: 0.2em;
192 .mw-widget-calendarWidget-year {
194 width: @calendarWidth / 5;
195 line-height: @calendarHeight / 4;
197 // Don't overlap the hacked-up fake box-shadow border we get when focussed
199 width: @calendarWidth / 5 - 0.2em;
203 &:nth-child( 5n+1 ) {
204 width: @calendarWidth / 5 - 0.2em;
208 &:nth-child( 15 ) ~ & {
209 line-height: @calendarHeight / 4 - 0.2em;
210 margin-bottom: 0.2em;
214 .mw-widget-calendarWidget-item {
219 .mw-widget-calendarWidget {
220 .box-sizing( border-box );
221 border: 1px solid #a2a9b1;
222 .transition( ~'border-color 100ms, box-shadow 100ms' );
226 box-shadow: inset 0 0 0 1px #36c;
249 box-shadow: inset 0 0 0 1px #36c;
253 .transition( ~'background-color 250ms, color 250ms' );
256 background-color: #36c;
261 background-color: #2a4b8d;