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 @indicator-size: unit( 12 / 16 / 0.8, em );
  17
  18 .mw-widget-dateInputWidget {
  19         &-handle {
  20                 .oo-ui-unselectable();
  21
  22                 > .oo-ui-labelElement-label {
  23                         padding: 0;
  24                 }
  25
  26                 > .oo-ui-indicatorElement-indicator {
  27                         display: none;
  28                 }
  29         }
  30
  31         &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
  32                 display: block;
  33                 position: absolute;
  34                 top: 0;
  35                 right: 0;
  36                 width: @indicator-size;
  37                 height: 100%;
  38                 margin: 0 0.775em;
  39         }
  40
  41         > .oo-ui-textInputWidget {
  42                 z-index: 2;
  43
  44                 & input {
  45                         padding-left: 1em;
  46                 }
  47         }
  48
  49         &-calendar {
  50                 background-color: #fff;
  51                 position: absolute;
  52                 margin-top: -2px;
  53                 box-shadow: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
  54                 z-index: 1;
  55
  56                 &:focus {
  57                         box-shadow: inset 0 0 0 1px #36c, 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
  58                         z-index: 3;
  59                 }
  60         }
  61
  62         &-empty {
  63                 .mw-widget-dateInputWidget-handle {
  64                         color: #54595d;
  65                         outline: 0;
  66                 }
  67         }
  68
  69         &.oo-ui-flaggedElement-invalid {
  70                 .mw-widget-dateInputWidget-handle {
  71                         border-color: #f00;
  72                         box-shadow: inset 0 0 0 0 #f00;
  73                 }
  74         }
  75
  76         &.oo-ui-widget-enabled {
  77                 .mw-widget-dateInputWidget-handle:hover {
  78                         border-color: #72777d;
  79                 }
  80         }
  81
  82         &.oo-ui-widget-disabled {
  83                 .mw-widget-dateInputWidget-handle {
  84                         background-color: #eaecf0;
  85                         color: #72777d;
  86                         border-color: #c8ccd1;
  87                         text-shadow: 0 1px 1px #fff;
  88                         cursor: default;
  89
  90                         > .oo-ui-indicatorElement-indicator {
  91                                 opacity: 0.51;
  92                         }
  93                 }
  94         }
  95 }