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

   1 /*!
   2  * MediaWiki Widgets – 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-box-sizing( @type: border-box ) {
   9         -webkit-box-sizing: @type;
  10         -moz-box-sizing: @type;
  11         box-sizing: @type;
  12 }
  13
  14 .oo-ui-unselectable() {
  15         -webkit-touch-callout: none;
  16         -webkit-user-select: none;
  17         -moz-user-select: none;
  18         -ms-user-select: none;
  19         user-select: none;
  20 }
  21
  22 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
  23         margin-right: @spacing;
  24
  25         &:last-child {
  26                 margin-right: @cancelled-spacing;
  27         }
  28 }
  29
  30 @indicator-size: unit( 12 / 16 / 0.8, em );
  31
  32 .mw-widget-dateInputWidget {
  33         &.oo-ui-textInputWidget {
  34                 display: inline-block;
  35                 position: relative;
  36                 width: 21em;
  37                 margin-top: 0.25em;
  38                 .oo-ui-inline-spacing( 0.5em );
  39                 margin-bottom: 0.25em;
  40                 margin-left: 0;
  41         }
  42
  43         &-handle,
  44         &.oo-ui-textInputWidget input {
  45                 background-color: #fff;
  46                 display: inline-block;
  47                 position: relative;
  48                 .oo-ui-box-sizing( border-box );
  49                 width: 100%;
  50                 cursor: pointer;
  51                 padding: 0.5em 1em;
  52                 border: 1px solid #a2a9b1;
  53                 border-radius: 2px;
  54                 outline: 0;
  55                 line-height: 1.275;
  56                 /**
  57                  * Ensures non-infused and infused widget have the same height.
  58                  * Equal to line height + top padding + bottom padding
  59                  */
  60                 height: 2.275em;
  61         }
  62
  63         &-handle {
  64                 .oo-ui-unselectable();
  65
  66                 > .oo-ui-labelElement-label {
  67                         padding: 0;
  68                 }
  69
  70                 > .oo-ui-indicatorElement-indicator {
  71                         display: none;
  72                 }
  73         }
  74
  75         &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
  76                 display: block;
  77                 position: absolute;
  78                 top: 0;
  79                 right: 0;
  80                 width: @indicator-size;
  81                 height: 100%;
  82                 margin: 0 0.775em;
  83         }
  84
  85         > .oo-ui-textInputWidget {
  86                 z-index: 2;
  87
  88                 & input {
  89                         padding-left: 1em;
  90                 }
  91         }
  92
  93         &-calendar {
  94                 background-color: #fff;
  95                 position: absolute;
  96                 margin-top: -2px;
  97                 box-shadow: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
  98                 z-index: 1;
  99
 100                 &:focus {
 101                         box-shadow: inset 0 0 0 1px #36c, 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
 102                         z-index: 3;
 103                 }
 104         }
 105
 106         &-empty {
 107                 .mw-widget-dateInputWidget-handle {
 108                         color: #54595d;
 109                         outline: 0;
 110                 }
 111         }
 112
 113         &.oo-ui-flaggedElement-invalid {
 114                 .mw-widget-dateInputWidget-handle {
 115                         border-color: #f00;
 116                         box-shadow: inset 0 0 0 0 #f00;
 117                 }
 118         }
 119
 120         &.oo-ui-widget-enabled {
 121                 .mw-widget-dateInputWidget-handle:hover {
 122                         border-color: #72777d;
 123                 }
 124         }
 125
 126         &.oo-ui-widget-disabled {
 127                 .mw-widget-dateInputWidget-handle {
 128                         background-color: #eaecf0;
 129                         color: #72777d;
 130                         border-color: #c8ccd1;
 131                         text-shadow: 0 1px 1px #fff;
 132                         cursor: default;
 133
 134                         > .oo-ui-indicatorElement-indicator {
 135                                 opacity: 0.51;
 136                         }
 137                 }
 138         }
 139 }