Page MenuHomeWickedGov Phorge
Files F5990826

DateTimeInputWidget.less
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

DateTimeInputWidget.less
View Options

@import 'mediawiki.widgets.datetime.definitions';
.mw-widgets-datetime-dateTimeInputWidget {
display: inline-block;
position: relative;
width: 100%;
// Hack: Set maximum width equivalent to DateInputWidgets calendar popup
max-width: 24.275em;
.oo-ui-inline-spacing( 0.5em );
vertical-align: middle;
&-fields {
position: relative;
display: table;
z-index: 2;
.oo-ui-unselectable();
> .mw-widgets-datetime-dateTimeInputWidget-field {
display: table-cell;
white-space: pre;
}
}
&-handle {
background-color: @background-color-base;
color: @color-base;
display: inline-block;
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 @box-shadow-color-progressive--focus;
// Needed for proper behavior with `overflow: hidden`.
vertical-align: bottom;
overflow: hidden;
.oo-ui-unselectable();
transition: box-shadow @transition-duration-base;
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator {
background-position: center center;
background-repeat: no-repeat;
position: absolute;
top: 0;
z-index: 1;
}
> .oo-ui-iconElement-icon {
left: @padding-start-input-text-icon;
width: @size-icon;
height: @size-icon;
}
> .oo-ui-indicatorElement-indicator {
right: @padding-horizontal-base;
}
}
&.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: @min-size-indicator + 2 * @padding-horizontal-input-text;
}
&-field {
background-color: transparent;
color: inherit;
box-sizing: content-box;
border: 0;
border-radius: @border-radius-base;
padding-top: @padding-vertical-base;
padding-bottom: @padding-vertical-base;
box-shadow: none;
font-size: inherit;
font-family: inherit;
line-height: @line-height-widget-base;
text-align: center;
vertical-align: top;
// Day field, f.e. “Sat”
&:first-child {
cursor: pointer;
}
// Day field & time zome field, f.e. “Sat” & “Z”
&[ tabindex='-1' ] {
// Support: Firefox, Chrome
outline: 0;
}
}
&-editField {
.mw-widgets-datetime-dateTimeInputWidget-invalid {
border: @border-width-base @border-style-base @border-color-error;
box-shadow: @box-shadow-inset-small @box-shadow-color-transparent;
&:focus {
border: @border-width-base @border-style-base @border-color-error;
box-shadow: @box-shadow-inset-small @color-error;
}
}
}
&-clearButton {
// Override `&-field` from above
padding-top: 0;
padding-bottom: 0;
padding-left: @padding-start-button-clear;
// `&.oo-ui-iconElement` needed for specificity
&.oo-ui-iconElement > .oo-ui-buttonElement-button {
padding-top: @padding-top-button-clear;
}
.oo-ui-iconElement-icon {
background-size: @size-indicator @size-indicator;
}
}
&-empty {
.mw-widgets-datetime-dateTimeInputWidget-handle {
color: @color-subtle;
}
.mw-widgets-datetime-dateTimeInputWidget-clearButton {
display: none;
}
}
&.oo-ui-widget-enabled {
.mw-widgets-datetime-dateTimeInputWidget-handle {
transition-property: border-color;
transition-duration: @transition-duration-medium;
&:hover {
border-color: @border-color-input--hover;
}
}
// Set on widget parent to also enable `:hover` on child elements
&:hover {
input,
textarea {
border-color: @border-color-input--hover;
}
}
.mw-widgets-datetime-dateTimeInputWidget-editField:hover {
background-color: @background-color-interactive;
}
.mw-widgets-datetime-dateTimeInputWidget-editField:focus {
outline: @outline-base--focus;
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus, @box-shadow-outset-small @box-shadow-color-progressive--focus;
}
&.oo-ui-flaggedElement-invalid {
.mw-widgets-datetime-dateTimeInputWidget-handle {
border-color: @border-color-error;
box-shadow: @box-shadow-inset-small @box-shadow-color-transparent;
&:focus {
border-color: @border-color-error;
box-shadow: @box-shadow-inset-small @color-error;
}
}
}
}
&.oo-ui-widget-disabled {
.mw-widgets-datetime-dateTimeInputWidget-handle {
background-color: @background-color-disabled-subtle;
// Support: Safari
-webkit-text-fill-color: @color-disabled;
color: @color-disabled;
border-color: @border-color-disabled;
text-shadow: @text-shadow-base--disabled;
}
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator {
opacity: @opacity-icon-base--disabled;
}
}
}

File Metadata

Mime Type
text/plain
Expires
Sun, Oct 4, 01:40 (3 w, 6 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
96/c6/6c6baa2e1d25d826b4239affd843
Default Alt Text
DateTimeInputWidget.less (4 KB)

Event Timeline