resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.styles.less

   1 /*!
   2  * MediaWiki Widgets – PHP DateInputWidget styles.
   3  *
   4  * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7
   8 // Variables taken from OOUI's WikimediaUI theme
   9 @ooui-font-size-browser: 16; // assumed browser default of `16px`
  10 @ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
  11
  12 @background-color-base: #fff;
  13
  14 @color-base--emphasized: #000;
  15
  16 @border-base: 1px solid #a2a9b1;
  17 @border-color-base--focus: #36c;
  18 @border-color-input--hover: #72777d;
  19 @border-radius-base: 2px;
  20
  21 @padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base;
  22 @padding-horizontal-input-text: 8 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.57142857em`≈`7px`
  23 @padding-top-base: 8 / @ooui-font-size-browser / @ooui-font-size-base;
  24 @padding-bottom-base: 7 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.5em`≈`7px`
  25
  26 @box-shadow-widget: inset 0 0 0 1px transparent;
  27 @box-shadow-widget--focus: inset 0 0 0 1px #36c;
  28
  29 @line-height-widget-singleline: 15 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.07142857em`≈`15px`; Firefox needs a value, Chrome the unit;
  30
  31 @transition-ease-medium: @transition-duration-medium; // `ease` is the initial value
  32 @transition-duration-medium: 250ms;
  33
  34 // Mixins taken from OOUI
  35 .oo-ui-box-sizing( @type: border-box ) {
  36         -webkit-box-sizing: @type;
  37         -moz-box-sizing: @type;
  38         box-sizing: @type;
  39 }
  40
  41 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
  42         margin-right: @spacing;
  43
  44         &:last-child {
  45                 margin-right: @cancelled-spacing;
  46         }
  47 }
  48
  49 .oo-ui-transition( @value1, @value2: X, ... ) {
  50         @value: ~`"@{arguments}".replace( /[\[\]]|\,\sX/g, '' )`; // stylelint-disable-line function-comma-space-after, function-whitespace-after, string-quotes, value-keyword-case
  51         -webkit-transition: @value;
  52         -moz-transition: @value;
  53         transition: @value;
  54 }
  55
  56 // DateInputWidget rules
  57 .mw-widget-dateInputWidget {
  58         &.oo-ui-textInputWidget {
  59                 display: inline-block;
  60                 position: relative;
  61                 width: 21em;
  62                 margin-top: 0.25em;
  63                 // .oo-ui-inline-spacing( 0.5em ); already inherited from `.oo-ui-inputWidget`
  64                 margin-bottom: 0.25em;
  65                 margin-left: 0;
  66         }
  67
  68         // Note that this block applies to both the PHP widget and the JS widget
  69         &-handle,
  70         &.oo-ui-textInputWidget input {
  71                 display: inline-block;
  72                 position: relative;
  73                 cursor: pointer;
  74                 /**
  75                  * Ensures non-infused and infused widget have the same height.
  76                  * Equal to line height + top padding + bottom padding
  77                  */
  78                 max-height: 2.458em;
  79         }
  80
  81         // Ensure `.mw-widget-dateInputWidget-handle` similar appearance to OOUI's `.oo-ui-textInputWidget`
  82         &-handle {
  83                 background-color: @background-color-base;
  84                 color: @color-base--emphasized;
  85                 .oo-ui-box-sizing( border-box );
  86                 width: 100%;
  87                 border: @border-base;
  88                 border-radius: @border-radius-base;
  89                 padding: @padding-input-text;
  90                 line-height: @line-height-widget-singleline;
  91         }
  92
  93         &.oo-ui-widget-enabled {
  94                 .mw-widget-dateInputWidget-handle {
  95                         box-shadow: @box-shadow-widget; // necessary for smooth transition
  96                         .oo-ui-transition(
  97                                 border-color @transition-ease-medium,
  98                                 box-shadow @transition-ease-medium
  99                         );
 100
 101                         &:hover {
 102                                 border-color: @border-color-input--hover;
 103                         }
 104
 105                         &:focus {
 106                                 outline: 0;
 107                                 border-color: @border-color-base--focus;
 108                                 box-shadow: @box-shadow-widget--focus;
 109                         }
 110
 111                         & > .oo-ui-labelElement-label {
 112                                 cursor: pointer;
 113                         }
 114                 }
 115         }
 116
 117         &-active {
 118                 &.oo-ui-textInputWidget input {
 119                         cursor: text;
 120                 }
 121         }
 122 }