.mw-widgets-datetime-dateTimeInputWidget {
display: inline-block;
position: relative;
+ width: 100%;
+ max-width: @max-width-input;
+ .oo-ui-inline-spacing( 0.5em );
vertical-align: middle;
&-fields {
.oo-ui-unselectable();
> .mw-widgets-datetime-dateTimeInputWidget-field {
- .oo-ui-box-sizing(border-box);
-
+ .oo-ui-box-sizing( border-box );
display: table-cell;
white-space: pre;
}
}
&-handle {
- width: 100%;
+ background-color: @background-color-base;
+ color: @color-base;
display: inline-block;
- overflow: hidden;
-
- // Needed for proper behavior with overflow: hidden.
+ .oo-ui-box-sizing( border-box );
+ width: 100%;
+ height: @size-base;
+ border: @border-base;
+ border-radius: @border-radius-base;
+ padding: 0 @padding-horizontal-input-text;
+ box-shadow: inset 0 0 0 0 @color-progressive;
+ // Needed for proper behavior with `overflow: hidden`.
vertical-align: bottom;
-
+ overflow: hidden;
.oo-ui-unselectable();
- .oo-ui-box-sizing(border-box);
+ .oo-ui-transition( box-shadow @transition-base );
- > .oo-ui-indicatorElement-indicator,
- > .oo-ui-iconElement-icon {
- position: absolute;
+ > .oo-ui-iconElement-icon,
+ > .oo-ui-indicatorElement-indicator {
background-position: center center;
background-repeat: no-repeat;
+ position: absolute;
+ top: 0;
z-index: 1;
}
- }
-
- margin: 0.25em 0;
- width: 100%;
- max-width: 50em;
-
- .oo-ui-inline-spacing(0.5em);
-
- &-handle {
- height: 2.5em;
- border: 1px solid #ccc;
- padding: 0 1em;
- margin: 0;
- background-color: #fff;
- color: #000;
- box-shadow: inset 0 0 0 0 @progressive;
- border-radius: 0.1em;
- .oo-ui-transition(box-shadow @quick-ease);
- .oo-ui-box-sizing(border-box);
-
- > .oo-ui-indicatorElement-indicator {
- right: 0;
- }
> .oo-ui-iconElement-icon {
- left: 0.25em;
+ left: @padding-start-input-text-icon;
+ width: @size-icon;
+ height: @size-icon;
}
> .oo-ui-indicatorElement-indicator {
- top: 0;
- width: @indicator-size;
- height: @indicator-size;
- margin: 0.775em;
- }
-
- > .oo-ui-iconElement-icon {
- top: 0;
- width: @icon-size;
- height: @icon-size;
- margin: 0.3em;
+ right: @padding-horizontal-base;
+ min-width: @min-size-indicator;
+ width: @size-indicator;
+ min-height: @min-size-indicator;
+ height: @size-indicator;
+ max-height: @size-base;
}
}
&-empty &-handle {
- color: #777;
+ color: @color-base--subtle;
+ }
+
+ &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
+ padding-left: @padding-start-input-text-icon-label;
+ }
+
+ &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
+ padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
}
&-field {
- padding: 0;
- margin: 0;
- font-size: inherit;
- font-family: inherit;
background-color: transparent;
color: inherit;
+ .oo-ui-box-sizing( border-box );
border: 0;
+ border-radius: @border-radius-base;
+ // Provide more top padding due to border not being part of the calculation
+ padding-top: 10 / @ooui-font-size-browser / @ooui-font-size-base;
+ padding-bottom: @padding-bottom-base;
box-shadow: none;
+ font-size: inherit;
+ font-family: inherit;
+ line-height: @line-height-widget-singleline;
text-align: center;
- vertical-align: middle;
- .oo-ui-box-sizing(border-box);
+ vertical-align: top;
}
- &.oo-ui-widget-disabled {
- .mw-widgets-datetime-dateTimeInputWidget-handle {
- color: #ccc;
- text-shadow: 0 1px 1px #fff;
- border-color: #ddd;
- background-color: #f3f3f3;
-
- > .oo-ui-iconElement-icon,
- > .oo-ui-indicatorElement-indicator {
- opacity: 0.2;
+ &-editField {
+ .mw-widgets-datetime-dateTimeInputWidget-invalid {
+ border: 1px solid @border-color-erroneous;
+ box-shadow: @box-shadow-widget;
+
+ &:focus {
+ border: 1px solid @border-color-erroneous;
+ box-shadow: @box-shadow-erroneous--focus;
}
}
}
+ &-clearButton {
+ padding-top: 0;
+ }
+
&.oo-ui-widget-enabled {
- .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
- background-color: #eee;
- }
+ .mw-widgets-datetime-dateTimeInputWidget-handle {
+ .oo-ui-transition( border-color @transition-ease-medium );
- &.oo-ui-flaggedElement-invalid {
- .mw-widgets-datetime-dateTimeInputWidget-handle {
- border-color: #f00;
- box-shadow: inset 0 0 0 0 #f00;
+ &:hover {
+ border-color: @border-color-input--hover;
}
+ }
- .mw-widgets-datetime-dateTimeInputWidget-handle:focus {
- border-color: #f00;
- box-shadow: inset 0 0 0 0.1em #f00;
+ // Set on widget parent to also enable `:hover` on child elmeents
+ &:hover {
+ input,
+ textarea {
+ border-color: @border-color-input--hover;
}
}
- }
- input.mw-widgets-datetime-dateTimeInputWidget-field {
- padding: 0.5em 0;
- }
+ .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
+ background-color: @background-color-base--hover;
+ }
+
+ .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
+ outline: 0;
+ box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
+ }
- &-editField.mw-widgets-datetime-dateTimeInputWidget-invalid {
- border: 1px solid #f00;
- box-shadow: inset 0 0 0 0 #f00;
+ &.oo-ui-flaggedElement-invalid {
+ .mw-widgets-datetime-dateTimeInputWidget-handle {
+ border-color: @border-color-erroneous;
+ box-shadow: @box-shadow-widget;
- &:focus {
- border: 1px solid #f00;
- box-shadow: inset 0 0 0 0.1em #f00;
+ &:focus {
+ border-color: @border-color-erroneous;
+ box-shadow: @box-shadow-erroneous--focus;
+ }
+ }
}
}
- &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
- padding-left: 3em;
- }
+ &.oo-ui-widget-disabled {
+ .mw-widgets-datetime-dateTimeInputWidget-handle {
+ background-color: @background-color-base--disabled;
+ // Support: Safari
+ -webkit-text-fill-color: @color-base--disabled;
+ color: @color-base--disabled;
+ border-color: @border-color-base--disabled;
+ text-shadow: @text-shadow-base--disabled;
+ }
- &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
- padding-right: 2em;
+ > .oo-ui-iconElement-icon,
+ > .oo-ui-indicatorElement-indicator {
+ opacity: @opacity-base--disabled;
+ }
}
}
dépôts / lhc / web / wiklou.git / blobdiff