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