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: black;
  55                 border: solid 1px #ccc;
  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: none;
  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: red;
 124                                 box-shadow: inset 0 0 0 0 red;
 125                         }
 126
 127                         .mw-widgets-datetime-dateTimeInputWidget-handle:focus {
 128                                 border-color: red;
 129                                 box-shadow: inset 0 0 0 0.1em red;
 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 red;
 140                 box-shadow: inset 0 0 0 0 red;
 141
 142                 &:focus {
 143                         border: 1px solid red;
 144                         box-shadow: inset 0 0 0 0.1em red;
 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 }