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: #fff;
  78
  79                 > .oo-ui-labelElement-label {
  80                         padding: 0;
  81                 }
  82         }
  83
  84         &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
  85                 width: @indicator-size;
  86                 margin: 0 0.775em;
  87         }
  88
  89         > .oo-ui-textInputWidget input {
  90                 padding-left: 1em;
  91         }
  92
  93         > .oo-ui-textInputWidget {
  94                 z-index: 2;
  95         }
  96
  97         &-calendar {
  98                 background-color: #fff;
  99                 margin-top: -2px;
 100
 101                 &:focus {
 102                         z-index: 3;
 103                 }
 104         }
 105
 106         &.oo-ui-widget-enabled {
 107                 .mw-widget-dateInputWidget-handle:hover {
 108                         border-color: #347bff;
 109                 }
 110         }
 111
 112         &.oo-ui-widget-disabled {
 113                 .mw-widget-dateInputWidget-handle {
 114                         color: #ccc;
 115                         text-shadow: 0 1px 1px #fff;
 116                         border-color: #ddd;
 117                         background-color: #f3f3f3;
 118
 119                         > .oo-ui-indicatorElement-indicator {
 120                                 opacity: 0.2;
 121                         }
 122                 }
 123
 124         }
 125
 126         &.oo-ui-flaggedElement-invalid {
 127                 .mw-widget-dateInputWidget-handle {
 128                         border-color: #f00;
 129                         box-shadow: inset 0 0 0 0 #f00;
 130                 }
 131         }
 132
 133         &-empty {
 134                 .mw-widget-dateInputWidget-handle {
 135                         color: #ccc;
 136                 }
 137         }
 138 }