2 * MediaWiki Widgets – DateInputWidget styles.
4 * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
8 .oo-ui-box-sizing( @type: border-box ) {
9 -webkit-box-sizing: @type;
10 -moz-box-sizing: @type;
14 .oo-ui-unselectable() {
15 -webkit-touch-callout: none;
16 -webkit-user-select: none;
17 -moz-user-select: none;
18 -ms-user-select: none;
22 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
23 margin-right: @spacing;
25 margin-right: @cancelled-spacing;
29 .mw-widget-dateInputWidget {
30 display: inline-block;
35 display: inline-block;
38 .oo-ui-unselectable();
39 .oo-ui-box-sizing(border-box);
42 &.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
46 > .mw-widget-calendarWidget {
51 // Theme-specific styles
55 .oo-ui-inline-spacing(0.5em);
59 border: 1px solid #ccc;
62 background-color: white;
65 > .oo-ui-textInputWidget input {
69 > .mw-widget-calendarWidget {
70 background-color: white;
73 &-active > .mw-widget-calendarWidget {
75 // Immitate focussed input styles
76 // First shadow generates bottom and right "border", second shadow generates bottom and left,
77 // resulting in no "border" at the top. Note that this generates a 2px-wide "border", not 1px.
78 // It makes sense when you think about it long enough and look up what each value means. Enjoy.
79 // (This is symmetrical anyway, and CSSJanus can't flip it correctly. T62805)
81 box-shadow: inset -1px -1px 0 1px #347bff, inset 1px -1px 0 1px #347bff;
82 border-top: 1px solid #ccc;
86 // Add border at the top on focus
88 border-top: 2px solid #347bff;
92 &.oo-ui-widget-enabled {
93 .mw-widget-dateInputWidget-handle:hover {
94 border-color: #347bff;
98 &.oo-ui-widget-disabled {
99 .mw-widget-dateInputWidget-handle {
101 text-shadow: 0 1px 1px #fff;
103 background-color: #f3f3f3;
107 &.oo-ui-flaggedElement-invalid {
108 .mw-widget-dateInputWidget-handle {
110 box-shadow: inset 0 0 0 0 red;
115 .mw-widget-dateInputWidget-handle {