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

   1 /*!
   2  * MediaWiki Widgets – JS 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 @import 'mediawiki.skin.variables.less';
   9 @import 'mediawiki.mixins.less';
  10
  11 .oo-ui-unselectable() {
  12         -webkit-touch-callout: none;
  13         .user-select( none );
  14 }
  15
  16 @size-indicator: unit( 12 / 16 / 0.8, em );
  17
  18 .mw-widget-dateInputWidget {
  19         &-handle {
  20                 .oo-ui-unselectable();
  21
  22                 > .oo-ui-indicatorElement-indicator {
  23                         display: none;
  24                 }
  25         }
  26
  27         &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
  28                 display: block;
  29                 position: absolute;
  30                 top: 0;
  31                 right: 0;
  32                 width: @size-indicator;
  33                 height: 100%;
  34                 margin: 0 0.775em;
  35         }
  36
  37         > .oo-ui-textInputWidget {
  38                 z-index: 2;
  39         }
  40
  41         &-calendar {
  42                 background-color: @background-color-base;
  43                 position: absolute;
  44                 margin-top: -2px;
  45                 border-radius: @border-radius-base;
  46                 box-shadow: @box-shadow-drop-medium;
  47                 z-index: 1;
  48
  49                 &:focus {
  50                         box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus, @box-shadow-drop-medium;
  51                         z-index: 3;
  52                 }
  53         }
  54
  55         &-empty {
  56                 .mw-widget-dateInputWidget-handle {
  57                         color: @color-subtle;
  58                         outline: 0;
  59                 }
  60         }
  61
  62         &.oo-ui-flaggedElement-invalid {
  63                 .mw-widget-dateInputWidget-handle {
  64                         border-color: @border-color-error;
  65                         box-shadow: none;
  66                 }
  67         }
  68
  69         &.oo-ui-widget-enabled {
  70                 .mw-widget-dateInputWidget-handle:hover {
  71                         border-color: @border-color-interactive;
  72                 }
  73
  74                 .oo-ui-inputWidget-input[ readonly ]:not( .oo-ui-pendingElement-pending ) ~ .mw-widget-dateInputWidget-handle {
  75                         background-color: @background-color-interactive-subtle;
  76                 }
  77         }
  78
  79         &.oo-ui-widget-disabled {
  80                 .mw-widget-dateInputWidget-handle {
  81                         background-color: @background-color-disabled-subtle;
  82                         color: @color-disabled;
  83                         border-color: @border-color-disabled;
  84                         text-shadow: 0 1px 1px #fff;
  85                         cursor: @cursor-base--disabled;
  86
  87                         > .oo-ui-indicatorElement-indicator {
  88                                 opacity: @opacity-icon-base--disabled;
  89                         }
  90                 }
  91         }
  92 }