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