2 * MediaWiki Widgets – PHP DateInputWidget styles.
4 * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
8 // Variables taken from OOUI's WikimediaUI theme
9 @oo-ui-font-size-browser: 16; // assumed browser default of `16px`
10 @oo-ui-font-size-base: 0.8em; // equals `12.8px` at browser default of `16px`
12 @background-color-base: #fff;
14 @color-base--emphasized: #000;
16 @border-base: 1px solid #a2a9b1;
17 @border-color-base--focus: #36c;
18 @border-color-input--hover: #72777d;
19 @border-radius-base: 2px;
21 @padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base;
22 @padding-horizontal-input-text: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
23 @padding-top-base: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.625em`≈`8px`
24 @padding-bottom-base: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.547em`≈`7px`
26 @box-shadow-widget: inset 0 0 0 1px transparent;
27 @box-shadow-widget--focus: inset 0 0 0 1px #36c;
29 @line-height-widget-singleline: 1.172em; // Firefox needs a value, Chrome the unit; equals `15px` at base `font-size: 12.8px`
31 @transition-ease-out-sine-medium: 200ms cubic-bezier( 0.39, 0.575, 0.565, 1 );
33 // Mixins taken from OOUI
34 .oo-ui-box-sizing( @type: border-box ) {
35 -webkit-box-sizing: @type;
36 -moz-box-sizing: @type;
40 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
41 margin-right: @spacing;
44 margin-right: @cancelled-spacing;
48 .oo-ui-transition( @value1, @value2: X, ... ) {
49 @value: ~`"@{arguments}".replace( /[\[\]]|\,\sX/g, '' )`; // stylelint-disable-line function-comma-space-after, function-whitespace-after, string-quotes, value-keyword-case
50 -webkit-transition: @value;
51 -moz-transition: @value;
55 // DateInputWidget rules
56 .mw-widget-dateInputWidget {
57 &.oo-ui-textInputWidget {
58 display: inline-block;
62 // .oo-ui-inline-spacing( 0.5em ); already inherited from `.oo-ui-inputWidget`
63 margin-bottom: 0.25em;
67 // Note that this block applies to both the PHP widget and the JS widget
69 &.oo-ui-textInputWidget input {
70 display: inline-block;
74 * Ensures non-infused and infused widget have the same height.
75 * Equal to line height + top padding + bottom padding
80 // Ensure `.mw-widget-dateInputWidget-handle` similar appearance to OOUI's `.oo-ui-textInputWidget`
82 background-color: @background-color-base;
83 color: @color-base--emphasized;
84 .oo-ui-box-sizing( border-box );
87 border-radius: @border-radius-base;
88 padding: @padding-input-text;
89 line-height: @line-height-widget-singleline;
92 &.oo-ui-widget-enabled {
93 .mw-widget-dateInputWidget-handle {
94 box-shadow: @box-shadow-widget; // necessary for smooth transition
96 border-color @transition-ease-out-sine-medium,
97 box-shadow @transition-ease-out-sine-medium
101 border-color: @border-color-input--hover;
106 border-color: @border-color-base--focus;
107 box-shadow: @box-shadow-widget--focus;
110 & > .oo-ui-labelElement-label {
117 &.oo-ui-textInputWidget input {