* @license The MIT License (MIT); see LICENSE.txt
*/
+@import 'mediawiki.mixins';
+
@calendarWidth: 21em;
@calendarHeight: 14em;
.mw-widget-calendarWidget-header {
position: relative;
- line-height: 2.5em;
+ line-height: 2.5;
}
.mw-widget-calendarWidget-header .oo-ui-buttonWidget {
height: @calendarHeight;
}
- .mw-widget-calendarWidget-old-body {
- // background: #fdd;
- }
-
- .mw-widget-calendarWidget-body:not(.mw-widget-calendarWidget-old-body):first-child {
+ .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child {
margin-top: -@calendarHeight;
margin-left: -@calendarWidth;
}
- .mw-widget-calendarWidget-body:not(.mw-widget-calendarWidget-old-body):last-child {
+ .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child {
margin-top: 0;
margin-left: 0;
}
.mw-widget-calendarWidget-body:first-child {
margin-top: 0 !important;
margin-left: 0 !important;
- transition: 0.5s margin-left;
+ .transition( margin-left 500ms );
}
}
.mw-widget-calendarWidget-body:first-child {
margin-left: -@calendarWidth !important;
margin-top: 0 !important;
- transition: 0.5s margin-left;
+ .transition( margin-left 500ms );
}
}
.mw-widget-calendarWidget-body:first-child {
margin-left: 0 !important;
margin-top: 0 !important;
- transition: 0.5s margin-top;
+ .transition( margin-top 500ms );
}
}
.mw-widget-calendarWidget-body:first-child {
margin-left: 0 !important;
margin-top: -@calendarHeight !important;
- transition: 0.5s margin-top;
+ .transition( margin-top 500ms );
}
}
width: @calendarWidth / 7;
line-height: @calendarHeight / 7;
// Don't overlap the hacked-up fake box-shadow border we get when focussed
- &:nth-child(7n) {
+ &:nth-child( 7n ) {
width: @calendarWidth / 7 - 0.2em;
margin-right: 0.2em;
}
- &:nth-child(7n+1) {
+ &:nth-child( 7n+1 ) {
width: @calendarWidth / 7 - 0.2em;
margin-left: 0.2em;
}
- &:nth-child(42) ~ & {
+ &:nth-child( 42 ) ~ & {
line-height: @calendarHeight / 7 - 0.2em;
margin-bottom: 0.2em;
}
width: @calendarWidth / 2;
line-height: @calendarHeight / 6;
// Don't overlap the hacked-up fake box-shadow border we get when focussed
- &:nth-child(2n) {
+ &:nth-child( 2n ) {
width: @calendarWidth / 2 - 0.2em;
margin-right: 0.2em;
}
- &:nth-child(2n+1) {
+ &:nth-child( 2n+1 ) {
width: @calendarWidth / 2 - 0.2em;
margin-left: 0.2em;
}
- &:nth-child(10) ~ & {
+ &:nth-child( 10 ) ~ & {
line-height: @calendarHeight / 6 - 0.2em;
margin-bottom: 0.2em;
}
width: @calendarWidth / 5;
line-height: @calendarHeight / 4;
// Don't overlap the hacked-up fake box-shadow border we get when focussed
- &:nth-child(5n) {
+ &:nth-child( 5n ) {
width: @calendarWidth / 5 - 0.2em;
margin-right: 0.2em;
}
- &:nth-child(5n+1) {
+ &:nth-child( 5n+1 ) {
width: @calendarWidth / 5 - 0.2em;
margin-left: 0.2em;
}
- &:nth-child(15) ~ & {
+ &:nth-child( 15 ) ~ & {
line-height: @calendarHeight / 4 - 0.2em;
margin-bottom: 0.2em;
}
/* Theme-specific */
.mw-widget-calendarWidget {
- box-shadow: inset 0 0 0 1px #ccc;
-}
+ .box-sizing( border-box );
+ border: 1px solid #a2a9b1;
+ .transition( ~'border-color 100ms, box-shadow 100ms' );
-.mw-widget-calendarWidget:focus {
- outline: none;
- box-shadow: inset 0 0 0 2px #36c;
-}
+ &:focus {
+ border-color: #36c;
+ box-shadow: inset 0 0 0 1px #36c;
+ outline: 0;
+ }
-.mw-widget-calendarWidget-day {
- color: #444;
- border-radius: 0.1em;
-}
+ &-day {
+ color: #222;
+ border-radius: 2px;
+ }
-.mw-widget-calendarWidget-day-heading {
- font-weight: bold;
- color: #555;
-}
+ &-day-heading {
+ color: #54595d;
+ font-weight: bold;
+ }
-.mw-widget-calendarWidget-day-additional {
- color: #aaa;
-}
+ &-day-additional {
+ color: #a2a9b1;
-.mw-widget-calendarWidget-day-today {
- box-shadow: inset 0 0 0 1px #3787fb;
-}
+ &:hover {
+ color: #222;
+ }
+ }
-.mw-widget-calendarWidget-item-selected {
- background-color: #d8e6fe;
- color: #3787fb;
-}
+ &-day-today {
+ box-shadow: inset 0 0 0 1px #36c;
+ }
+
+ &-item {
+ .transition( ~'background-color 250ms, color 250ms' );
-.mw-widget-calendarWidget-item:hover {
- background-color: #eee;
+ &:hover {
+ background-color: #36c;
+ color: #fff;
+ }
+
+ &-selected {
+ background-color: #2a4b8d;
+ color: #fff;
+ }
+ }
}
.oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
margin-right: @spacing;
+
&:last-child {
margin-right: @cancelled-spacing;
}
.mw-widget-dateInputWidget {
display: inline-block;
position: relative;
+ width: 21em;
+ margin-top: 0.25em;
+ .oo-ui-inline-spacing( 0.5em );
+ margin-bottom: 0.25em;
+ margin-left: 0;
&-handle {
- width: 100%;
+ background-color: #fff;
display: inline-block;
- cursor: pointer;
position: relative;
-
+ .oo-ui-box-sizing( border-box );
+ width: 100%;
.oo-ui-unselectable();
- .oo-ui-box-sizing(border-box);
+ cursor: pointer;
+ padding: 0.5em 1em;
+ border: 1px solid #a2a9b1;
+ border-radius: 2px;
+ outline: 0;
+ line-height: 1.275;
+
+ > .oo-ui-labelElement-label {
+ padding: 0;
+ }
> .oo-ui-indicatorElement-indicator {
display: none;
position: absolute;
top: 0;
right: 0;
- height: 100%;
- }
-
- &.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
- cursor: default;
- }
-
- &-calendar {
- position: absolute;
- z-index: 1;
- }
-
- // Theme-specific styles
- width: 21em;
- margin: 0.25em 0;
-
- .oo-ui-inline-spacing(0.5em);
-
- &-handle {
- padding: 0.5em 1em;
- border: 1px solid #ccc;
- border-radius: 0.1em;
- line-height: 1.275em;
- background-color: #fff;
-
- > .oo-ui-labelElement-label {
- padding: 0;
- }
- }
-
- &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
width: @indicator-size;
+ height: 100%;
margin: 0 0.775em;
}
- > .oo-ui-textInputWidget input {
- padding-left: 1em;
- }
-
> .oo-ui-textInputWidget {
z-index: 2;
+
+ & input {
+ padding-left: 1em;
+ }
}
&-calendar {
background-color: #fff;
+ position: absolute;
margin-top: -2px;
+ box-shadow: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
+ z-index: 1;
&:focus {
+ box-shadow: inset 0 0 0 1px #36c, 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
z-index: 3;
}
}
- &.oo-ui-widget-enabled {
- .mw-widget-dateInputWidget-handle:hover {
- border-color: #36c;
- }
- }
-
- &.oo-ui-widget-disabled {
+ &-empty {
.mw-widget-dateInputWidget-handle {
- color: #ccc;
- text-shadow: 0 1px 1px #fff;
- border-color: #ddd;
- background-color: #f3f3f3;
-
- > .oo-ui-indicatorElement-indicator {
- opacity: 0.2;
- }
+ color: #54595d;
+ outline: 0;
}
-
}
&.oo-ui-flaggedElement-invalid {
}
}
- &-empty {
+ &.oo-ui-widget-enabled {
+ .mw-widget-dateInputWidget-handle:hover {
+ border-color: #72777d;
+ }
+ }
+
+ &.oo-ui-widget-disabled {
.mw-widget-dateInputWidget-handle {
- color: #ccc;
+ background-color: #eaecf0;
+ color: #72777d;
+ border-color: #c8ccd1;
+ text-shadow: 0 1px 1px #fff;
+ cursor: default;
+
+ > .oo-ui-indicatorElement-indicator {
+ opacity: 0.51;
+ }
}
}
}