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

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