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                 .oo-ui-unselectable();
  51                 cursor: pointer;
  52                 padding: 0.5em 1em;
  53                 border: 1px solid #a2a9b1;
  54                 border-radius: 2px;
  55                 outline: 0;
  56                 line-height: 1.275;
  57                 /**
  58                  * Ensures non-infused and infused widget have the same height.
  59                  * Equal to line height + top padding + bottom padding
  60                  */
  61                 height: 2.275em;
  62
  63                 > .oo-ui-labelElement-label {
  64                         padding: 0;
  65                 }
  66
  67                 > .oo-ui-indicatorElement-indicator {
  68                         display: none;
  69                 }
  70         }
  71
  72         &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
  73                 display: block;
  74                 position: absolute;
  75                 top: 0;
  76                 right: 0;
  77                 width: @indicator-size;
  78                 height: 100%;
  79                 margin: 0 0.775em;
  80         }
  81
  82         > .oo-ui-textInputWidget {
  83                 z-index: 2;
  84
  85                 & input {
  86                         padding-left: 1em;
  87                 }
  88         }
  89
  90         &-calendar {
  91                 background-color: #fff;
  92                 position: absolute;
  93                 margin-top: -2px;
  94                 box-shadow: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
  95                 z-index: 1;
  96
  97                 &:focus {
  98                         box-shadow: inset 0 0 0 1px #36c, 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
  99                         z-index: 3;
 100                 }
 101         }
 102
 103         &-empty {
 104                 .mw-widget-dateInputWidget-handle {
 105                         color: #54595d;
 106                         outline: 0;
 107                 }
 108         }
 109
 110         &.oo-ui-flaggedElement-invalid {
 111                 .mw-widget-dateInputWidget-handle {
 112                         border-color: #f00;
 113                         box-shadow: inset 0 0 0 0 #f00;
 114                 }
 115         }
 116
 117         &.oo-ui-widget-enabled {
 118                 .mw-widget-dateInputWidget-handle:hover {
 119                         border-color: #72777d;
 120                 }
 121         }
 122
 123         &.oo-ui-widget-disabled {
 124                 .mw-widget-dateInputWidget-handle {
 125                         background-color: #eaecf0;
 126                         color: #72777d;
 127                         border-color: #c8ccd1;
 128                         text-shadow: 0 1px 1px #fff;
 129                         cursor: default;
 130
 131                         > .oo-ui-indicatorElement-indicator {
 132                                 opacity: 0.51;
 133                         }
 134                 }
 135         }
 136 }