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         &:last-child {
  25                 margin-right: @cancelled-spacing;
  26         }
  27 }
  28
  29 @indicator-size: unit(12 / 16 / 0.8, em);
  30
  31 .mw-widget-dateInputWidget {
  32         display: inline-block;
  33         position: relative;
  34
  35         &-handle {
  36                 width: 100%;
  37                 display: inline-block;
  38                 cursor: pointer;
  39                 position: relative;
  40
  41                 .oo-ui-unselectable();
  42                 .oo-ui-box-sizing(border-box);
  43
  44                 > .oo-ui-indicatorElement-indicator {
  45                         display: none;
  46                 }
  47         }
  48
  49         &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
  50                 display: block;
  51                 position: absolute;
  52                 top: 0;
  53                 right: 0;
  54                 height: 100%;
  55         }
  56
  57         &.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
  58                 cursor: default;
  59         }
  60
  61         &-calendar {
  62                 position: absolute;
  63                 z-index: 1;
  64         }
  65
  66         // Theme-specific styles
  67         width: 21em;
  68         margin: 0.25em 0;
  69
  70         .oo-ui-inline-spacing(0.5em);
  71
  72         &-handle {
  73                 padding: 0.5em 1em;
  74                 border: 1px solid #ccc;
  75                 border-radius: 0.1em;
  76                 line-height: 1.275em;
  77                 background-color: white;
  78         }
  79
  80         &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
  81                 width: @indicator-size;
  82                 margin: 0 0.775em;
  83         }
  84
  85         > .oo-ui-textInputWidget input {
  86                 padding-left: 1em;
  87         }
  88
  89         > .oo-ui-textInputWidget {
  90                 z-index: 2;
  91         }
  92
  93         &-calendar {
  94                 background-color: white;
  95                 margin-top: -2px;
  96
  97                 &:focus {
  98                         z-index: 3;
  99                 }
 100         }
 101
 102         &.oo-ui-widget-enabled {
 103                 .mw-widget-dateInputWidget-handle:hover {
 104                         border-color: #347bff;
 105                 }
 106         }
 107
 108         &.oo-ui-widget-disabled {
 109                 .mw-widget-dateInputWidget-handle {
 110                         color: #ccc;
 111                         text-shadow: 0 1px 1px #fff;
 112                         border-color: #ddd;
 113                         background-color: #f3f3f3;
 114
 115                         > .oo-ui-indicatorElement-indicator {
 116                                 opacity: 0.2;
 117                         }
 118                 }
 119
 120         }
 121
 122         &.oo-ui-flaggedElement-invalid {
 123                 .mw-widget-dateInputWidget-handle {
 124                         border-color: red;
 125                         box-shadow: inset 0 0 0 0 red;
 126                 }
 127         }
 128
 129         &-empty {
 130                 .mw-widget-dateInputWidget-handle {
 131                         color: #ccc;
 132                 }
 133         }
 134 }