resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less

   1 /* stylelint-disable no-duplicate-selectors */
   2 @import 'mediawiki.widgets.datetime.definitions';
   3
   4 .mw-widgets-datetime-dateTimeInputWidget {
   5         display: inline-block;
   6         position: relative;
   7         vertical-align: middle;
   8
   9         &-fields {
  10                 position: relative;
  11                 display: table;
  12                 z-index: 2;
  13                 .oo-ui-unselectable();
  14
  15                 > .mw-widgets-datetime-dateTimeInputWidget-field {
  16                         .oo-ui-box-sizing(border-box);
  17
  18                         display: table-cell;
  19                         white-space: pre;
  20                 }
  21         }
  22
  23         &-handle {
  24                 width: 100%;
  25                 display: inline-block;
  26                 overflow: hidden;
  27
  28                 // Needed for proper behavior with overflow: hidden.
  29                 vertical-align: bottom;
  30
  31                 .oo-ui-unselectable();
  32                 .oo-ui-box-sizing(border-box);
  33
  34                 > .oo-ui-indicatorElement-indicator,
  35                 > .oo-ui-iconElement-icon {
  36                         position: absolute;
  37                         background-position: center center;
  38                         background-repeat: no-repeat;
  39                         z-index: 1;
  40                 }
  41         }
  42
  43         margin: 0.25em 0;
  44         width: 100%;
  45         max-width: 50em;
  46
  47         .oo-ui-inline-spacing(0.5em);
  48
  49         &-handle {
  50                 height: 2.5em;
  51                 border: 1px solid #ccc;
  52                 padding: 0 1em;
  53                 margin: 0;
  54                 background-color: #fff;
  55                 color: #000;
  56                 box-shadow: inset 0 0 0 0 @progressive;
  57                 border-radius: 0.1em;
  58                 .oo-ui-transition(box-shadow @quick-ease);
  59                 .oo-ui-box-sizing(border-box);
  60
  61                 > .oo-ui-indicatorElement-indicator {
  62                         right: 0;
  63                 }
  64
  65                 > .oo-ui-iconElement-icon {
  66                         left: 0.25em;
  67                 }
  68
  69                 > .oo-ui-indicatorElement-indicator {
  70                         top: 0;
  71                         width: @indicator-size;
  72                         height: @indicator-size;
  73                         margin: 0.775em;
  74                 }
  75
  76                 > .oo-ui-iconElement-icon {
  77                         top: 0;
  78                         width: @icon-size;
  79                         height: @icon-size;
  80                         margin: 0.3em;
  81                 }
  82         }
  83
  84         &-empty &-handle {
  85                 color: #777;
  86         }
  87
  88         &-field {
  89                 padding: 0;
  90                 margin: 0;
  91                 font-size: inherit;
  92                 font-family: inherit;
  93                 background-color: transparent;
  94                 color: inherit;
  95                 border: 0;
  96                 box-shadow: none;
  97                 text-align: center;
  98                 vertical-align: middle;
  99                 .oo-ui-box-sizing(border-box);
 100         }
 101
 102         &.oo-ui-widget-disabled {
 103                 .mw-widgets-datetime-dateTimeInputWidget-handle {
 104                         color: #ccc;
 105                         text-shadow: 0 1px 1px #fff;
 106                         border-color: #ddd;
 107                         background-color: #f3f3f3;
 108
 109                         > .oo-ui-iconElement-icon,
 110                         > .oo-ui-indicatorElement-indicator {
 111                                 opacity: 0.2;
 112                         }
 113                 }
 114         }
 115
 116         &.oo-ui-widget-enabled {
 117                 .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
 118                         background-color: #eee;
 119                 }
 120
 121                 &.oo-ui-flaggedElement-invalid {
 122                         .mw-widgets-datetime-dateTimeInputWidget-handle {
 123                                 border-color: #f00;
 124                                 box-shadow: inset 0 0 0 0 #f00;
 125                         }
 126
 127                         .mw-widgets-datetime-dateTimeInputWidget-handle:focus {
 128                                 border-color: #f00;
 129                                 box-shadow: inset 0 0 0 0.1em #f00;
 130                         }
 131                 }
 132         }
 133
 134         input.mw-widgets-datetime-dateTimeInputWidget-field {
 135                 padding: 0.5em 0;
 136         }
 137
 138         &-editField.mw-widgets-datetime-dateTimeInputWidget-invalid {
 139                 border: 1px solid #f00;
 140                 box-shadow: inset 0 0 0 0 #f00;
 141
 142                 &:focus {
 143                         border: 1px solid #f00;
 144                         box-shadow: inset 0 0 0 0.1em #f00;
 145                 }
 146         }
 147
 148         &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
 149                 padding-left: 3em;
 150         }
 151
 152         &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
 153                 padding-right: 2em;
 154         }
 155 }