}
}
+@indicator-size: unit( 12 / 16 / 0.8, em );
+
.mw-widget-dateInputWidget {
display: inline-block;
position: relative;
width: 100%;
display: inline-block;
cursor: pointer;
+ position: relative;
.oo-ui-unselectable();
.oo-ui-box-sizing(border-box);
+
+ > .oo-ui-indicatorElement-indicator {
+ display: none;
+ }
+ }
+
+ &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
}
&.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
border: 1px solid #ccc;
border-radius: 0.1em;
line-height: 1.275em;
- background-color: white;
+ background-color: #fff;
+ }
+
+ &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
+ width: @indicator-size;
+ margin: 0 0.775em;
}
> .oo-ui-textInputWidget input {
}
&-calendar {
- background-color: white;
+ background-color: #fff;
margin-top: -2px;
&:focus {
text-shadow: 0 1px 1px #fff;
border-color: #ddd;
background-color: #f3f3f3;
+
+ > .oo-ui-indicatorElement-indicator {
+ opacity: 0.2;
+ }
}
+
}
&.oo-ui-flaggedElement-invalid {
.mw-widget-dateInputWidget-handle {
- border-color: red;
- box-shadow: inset 0 0 0 0 red;
+ border-color: #f00;
+ box-shadow: inset 0 0 0 0 #f00;
}
}