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 .oo-ui-unselectable() {
   9         -webkit-touch-callout: none;
  10         -webkit-user-select: none;
  11         -moz-user-select: none;
  12         -ms-user-select: 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: #fff;
  43                 position: absolute;
  44                 margin-top: -2px;
  45                 border-radius: 2px;
  46                 box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
  47                 z-index: 1;
  48
  49                 &:focus {
  50                         box-shadow: inset 0 0 0 1px #36c, 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
  51                         z-index: 3;
  52                 }
  53         }
  54
  55         &-empty {
  56                 .mw-widget-dateInputWidget-handle {
  57                         color: #54595d;
  58                         outline: 0;
  59                 }
  60         }
  61
  62         &.oo-ui-flaggedElement-invalid {
  63                 .mw-widget-dateInputWidget-handle {
  64                         border-color: #d33;
  65                         box-shadow: none;
  66                 }
  67         }
  68
  69         &.oo-ui-widget-enabled {
  70                 .mw-widget-dateInputWidget-handle:hover {
  71                         border-color: #72777d;
  72                 }
  73         }
  74
  75         &.oo-ui-widget-disabled {
  76                 .mw-widget-dateInputWidget-handle {
  77                         background-color: #eaecf0;
  78                         color: #72777d;
  79                         border-color: #c8ccd1;
  80                         text-shadow: 0 1px 1px #fff;
  81                         cursor: default;
  82
  83                         > .oo-ui-indicatorElement-indicator {
  84                                 opacity: 0.51;
  85                         }
  86                 }
  87         }
  88 }