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 @import 'mediawiki.skin.variables.less';
   8
   9 // Variables taken from OOUI's WikimediaUI theme
  10 @ooui-font-size-browser: 16; // assumed browser default of `16px`
  11 @ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
  12 @ooui-unit: em;
  13
  14 @padding-input-text: @padding-vertical-base @padding-horizontal-input-text;
  15 @padding-horizontal-input-text: 8px;
  16 @padding-vertical-base: 6px;
  17
  18 // `line-height` has to be relative/in `em` to enable user override in browser settings.
  19 @line-height-widget-base: unit( 18 / @ooui-font-size-browser / @ooui-font-size-base, @ooui-unit ); // equals `18px` at base `font-size: 14px;
  20
  21 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
  22         margin-right: @spacing;
  23
  24         &:last-child {
  25                 margin-right: @cancelled-spacing;
  26         }
  27 }
  28
  29 // DateInputWidget rules
  30 .mw-widget-dateInputWidget {
  31         &.oo-ui-textInputWidget {
  32                 display: inline-block;
  33                 max-width: 21em;
  34                 // .oo-ui-inline-spacing( 0.5em ); already inherited from `.oo-ui-inputWidget`
  35
  36                 .oo-ui-labelElement-label {
  37                         line-height: @line-height-widget-base;
  38                 }
  39         }
  40
  41         // Note that this block applies to both the PHP widget and the JS widget
  42         &-handle,
  43         &.oo-ui-textInputWidget input {
  44                 display: inline-block;
  45                 position: relative;
  46                 cursor: pointer;
  47                 /**
  48                  * Ensures non-infused and infused widget have the same height.
  49                  * Equal to line height + top padding + bottom padding
  50                  */
  51                 max-height: 2.458em;
  52         }
  53
  54         // Ensure `.mw-widget-dateInputWidget-handle` similar appearance to OOUI's `.oo-ui-textInputWidget`
  55         &-handle {
  56                 background-color: @background-color-base;
  57                 color: @color-emphasized;
  58                 box-sizing: border-box;
  59                 width: 100%;
  60                 border: @border-base;
  61                 border-radius: @border-radius-base;
  62                 padding: @padding-input-text;
  63                 line-height: @line-height-widget-base;
  64         }
  65
  66         &.oo-ui-widget-enabled {
  67                 .mw-widget-dateInputWidget-handle {
  68                         // `transparent` necessary for smooth transition
  69                         box-shadow: @box-shadow-inset-small @box-shadow-color-transparent;
  70                         transition-property: border-color, box-shadow;
  71                         transition-duration: @transition-duration-medium;
  72
  73                         &:hover {
  74                                 border-color: @border-color-input--hover;
  75                         }
  76
  77                         &:focus {
  78                                 outline: @outline-base--focus;
  79                                 border-color: @border-color-progressive--focus;
  80                                 box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
  81                         }
  82
  83                         & > .oo-ui-labelElement-label {
  84                                 cursor: pointer;
  85                         }
  86                 }
  87         }
  88
  89         &-active {
  90                 &.oo-ui-textInputWidget input {
  91                         cursor: text;
  92                 }
  93         }
  94 }
  95
  96 // Pending state (T382186)
  97 .client-nojs .mw-widget-dateInputWidget .mw-widgets-pendingTextInputWidget,
  98 .client-js .mw-widget-dateInputWidget input[ type='date' ] {
  99         display: none;
 100 }