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         width: 100%;
   8         max-width: @max-width-input;
   9         .oo-ui-inline-spacing( 0.5em );
  10         vertical-align: middle;
  11
  12         &-fields {
  13                 position: relative;
  14                 display: table;
  15                 z-index: 2;
  16                 .oo-ui-unselectable();
  17
  18                 > .mw-widgets-datetime-dateTimeInputWidget-field {
  19                         .oo-ui-box-sizing( border-box );
  20                         display: table-cell;
  21                         white-space: pre;
  22                 }
  23         }
  24
  25         &-handle {
  26                 background-color: @background-color-base;
  27                 color: @color-base;
  28                 display: inline-block;
  29                 .oo-ui-box-sizing( border-box );
  30                 width: 100%;
  31                 height: @size-base;
  32                 border: @border-base;
  33                 border-radius: @border-radius-base;
  34                 padding: 0 @padding-horizontal-input-text;
  35                 box-shadow: inset 0 0 0 0 @color-progressive;
  36                 // Needed for proper behavior with `overflow: hidden`.
  37                 vertical-align: bottom;
  38                 overflow: hidden;
  39                 .oo-ui-unselectable();
  40                 .oo-ui-transition( box-shadow @transition-base );
  41
  42                 > .oo-ui-iconElement-icon,
  43                 > .oo-ui-indicatorElement-indicator {
  44                         background-position: center center;
  45                         background-repeat: no-repeat;
  46                         position: absolute;
  47                         top: 0;
  48                         z-index: 1;
  49                 }
  50
  51                 > .oo-ui-iconElement-icon {
  52                         left: @padding-start-input-text-icon;
  53                         width: @size-icon;
  54                         height: @size-icon;
  55                 }
  56
  57                 > .oo-ui-indicatorElement-indicator {
  58                         right: @padding-horizontal-base;
  59                 }
  60         }
  61
  62         &-empty &-handle {
  63                 color: @color-base--subtle;
  64         }
  65
  66         &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
  67                 padding-left: @padding-start-input-text-icon-label;
  68         }
  69
  70         &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
  71                 padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
  72         }
  73
  74         &-field {
  75                 background-color: transparent;
  76                 color: inherit;
  77                 .oo-ui-box-sizing( border-box );
  78                 border: 0;
  79                 border-radius: @border-radius-base;
  80                 // Provide more top padding due to border not being part of the calculation
  81                 padding-top: 10 / @ooui-font-size-browser / @ooui-font-size-base;
  82                 padding-bottom: @padding-bottom-base;
  83                 box-shadow: none;
  84                 font-size: inherit;
  85                 font-family: inherit;
  86                 line-height: @line-height-widget-singleline;
  87                 text-align: center;
  88                 vertical-align: top;
  89         }
  90
  91         &-editField {
  92                 .mw-widgets-datetime-dateTimeInputWidget-invalid {
  93                         border: 1px solid @border-color-erroneous;
  94                         box-shadow: @box-shadow-widget;
  95
  96                         &:focus {
  97                                 border: 1px solid @border-color-erroneous;
  98                                 box-shadow: @box-shadow-erroneous--focus;
  99                         }
 100                 }
 101         }
 102
 103         &-clearButton {
 104                 padding-top: 0;
 105
 106                 .oo-ui-iconElement-icon {
 107                         background-size: @size-indicator @size-indicator;
 108                 }
 109         }
 110
 111         &.oo-ui-widget-enabled {
 112                 .mw-widgets-datetime-dateTimeInputWidget-handle {
 113                         .oo-ui-transition( border-color @transition-ease-medium );
 114
 115                         &:hover {
 116                                 border-color: @border-color-input--hover;
 117                         }
 118                 }
 119
 120                 // Set on widget parent to also enable `:hover` on child elmeents
 121                 &:hover {
 122                         input,
 123                         textarea {
 124                                 border-color: @border-color-input--hover;
 125                         }
 126                 }
 127
 128                 .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
 129                         background-color: @background-color-base--hover;
 130                 }
 131
 132                 .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
 133                         outline: 0;
 134                         box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
 135                 }
 136
 137                 &.oo-ui-flaggedElement-invalid {
 138                         .mw-widgets-datetime-dateTimeInputWidget-handle {
 139                                 border-color: @border-color-erroneous;
 140                                 box-shadow: @box-shadow-widget;
 141
 142                                 &:focus {
 143                                         border-color: @border-color-erroneous;
 144                                         box-shadow: @box-shadow-erroneous--focus;
 145                                 }
 146                         }
 147                 }
 148         }
 149
 150         &.oo-ui-widget-disabled {
 151                 .mw-widgets-datetime-dateTimeInputWidget-handle {
 152                         background-color: @background-color-base--disabled;
 153                         // Support: Safari
 154                         -webkit-text-fill-color: @color-base--disabled;
 155                         color: @color-base--disabled;
 156                         border-color: @border-color-base--disabled;
 157                         text-shadow: @text-shadow-base--disabled;
 158                 }
 159
 160                 > .oo-ui-iconElement-icon,
 161                 > .oo-ui-indicatorElement-indicator {
 162                         opacity: @opacity-base--disabled;
 163                 }
 164         }
 165 }