Page MenuHomeWickedGov Phorge
Files F6010708

mw.widgets.DateInputWidget.styles.less
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

mw.widgets.DateInputWidget.styles.less
View Options

/*!
* MediaWiki Widgets – PHP DateInputWidget styles.
*
* @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
@import 'mediawiki.skin.variables.less';
// Variables taken from OOUI's WikimediaUI theme
@ooui-font-size-browser: 16; // assumed browser default of `16px`
@ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
@ooui-unit: em;
@padding-input-text: @padding-vertical-base @padding-horizontal-input-text;
@padding-horizontal-input-text: 8px;
@padding-vertical-base: 6px;
// `line-height` has to be relative/in `em` to enable user override in browser settings.
@line-height-widget-base: unit( ( 18 / @ooui-font-size-browser / @ooui-font-size-base ), @ooui-unit ); // equals `18px` at base `font-size: 14px;
.oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
margin-right: @spacing;
&:last-child {
margin-right: @cancelled-spacing;
}
}
// DateInputWidget rules
.mw-widget-dateInputWidget {
&.oo-ui-textInputWidget {
display: inline-block;
max-width: 21em;
// .oo-ui-inline-spacing( @spacing-50 ); already inherited from `.oo-ui-inputWidget`
.oo-ui-labelElement-label {
line-height: @line-height-widget-base;
}
}
// Note that this block applies to both the PHP widget and the JS widget
&-handle,
&.oo-ui-textInputWidget input {
display: inline-block;
position: relative;
cursor: pointer;
/**
* Ensures non-infused and infused widget have the same height.
* Equal to line height + top padding + bottom padding
*/
max-height: 2.458em;
}
// Ensure `.mw-widget-dateInputWidget-handle` similar appearance to OOUI's `.oo-ui-textInputWidget`
&-handle {
background-color: @background-color-base;
color: @color-emphasized;
box-sizing: border-box;
width: @size-full;
border: @border-base;
border-radius: @border-radius-base;
padding: @padding-input-text;
line-height: @line-height-widget-base;
}
&.oo-ui-widget-enabled {
.mw-widget-dateInputWidget-handle {
// `transparent` necessary for smooth transition
box-shadow: @box-shadow-inset-small @box-shadow-color-transparent;
transition-property: border-color, box-shadow;
transition-duration: @transition-duration-medium;
&:hover {
border-color: @border-color-input--hover;
}
&:focus {
outline: @outline-base--focus;
border-color: @border-color-progressive--focus;
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
}
& > .oo-ui-labelElement-label {
cursor: pointer;
}
}
}
&-active {
&.oo-ui-textInputWidget input {
cursor: text;
}
}
}
// Pending state (T382186)
.client-nojs .mw-widget-dateInputWidget .mw-widgets-pendingTextInputWidget,
.client-js .mw-widget-dateInputWidget input[ type='date' ] {
display: none;
}

File Metadata

Mime Type
text/plain
Expires
Oct 4 2026, 09:46 (5 w, 2 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
74/9c/9690563316b636ee38d7e4efca62
Default Alt Text
mw.widgets.DateInputWidget.styles.less (2 KB)

Event Timeline