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         &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
  63                 padding-left: @padding-start-input-text-icon-label;
  64         }
  65
  66         &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
  67                 padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
  68         }
  69
  70         &-field {
  71                 background-color: transparent;
  72                 color: inherit;
  73                 .oo-ui-box-sizing( border-box );
  74                 border: 0;
  75                 border-radius: @border-radius-base;
  76                 padding-top: @padding-top-base;
  77                 padding-bottom: @padding-bottom-base;
  78                 box-shadow: none;
  79                 font-size: inherit;
  80                 font-family: inherit;
  81                 line-height: @line-height-widget-singleline;
  82                 text-align: center;
  83                 vertical-align: top;
  84
  85                 // Day field, f.e. “Sat”
  86                 &:first-child {
  87                         cursor: pointer;
  88                 }
  89
  90                 // Day field & time zome field, f.e. “Sat” & “Z”
  91                 &[ tabindex='-1' ] {
  92                         // Support: Firefox, Chrome
  93                         outline: 0;
  94                 }
  95         }
  96
  97         &-editField {
  98                 .mw-widgets-datetime-dateTimeInputWidget-invalid {
  99                         border: 1px solid @border-color-erroneous;
 100                         box-shadow: @box-shadow-widget;
 101
 102                         &:focus {
 103                                 border: 1px solid @border-color-erroneous;
 104                                 box-shadow: @box-shadow-erroneous--focus;
 105                         }
 106                 }
 107         }
 108
 109         &-clearButton {
 110                 // Override `&-field` from above
 111                 padding-top: 0;
 112                 padding-bottom: 0;
 113                 padding-left: @padding-start-button-clear;
 114
 115                 // `&.oo-ui-iconElement` needed for specificity
 116                 &.oo-ui-iconElement > .oo-ui-buttonElement-button {
 117                         padding-top: @padding-top-button-clear;
 118                 }
 119
 120                 .oo-ui-iconElement-icon {
 121                         background-size: @size-indicator @size-indicator;
 122                 }
 123         }
 124
 125         &-empty {
 126                 .mw-widgets-datetime-dateTimeInputWidget-handle {
 127                         color: @color-base--subtle;
 128                 }
 129
 130                 .mw-widgets-datetime-dateTimeInputWidget-clearButton {
 131                         display: none;
 132                 }
 133         }
 134
 135         &.oo-ui-widget-enabled {
 136                 .mw-widgets-datetime-dateTimeInputWidget-handle {
 137                         .oo-ui-transition( border-color @transition-ease-medium );
 138
 139                         &:hover {
 140                                 border-color: @border-color-input--hover;
 141                         }
 142                 }
 143
 144                 // Set on widget parent to also enable `:hover` on child elmeents
 145                 &:hover {
 146                         input,
 147                         textarea {
 148                                 border-color: @border-color-input--hover;
 149                         }
 150                 }
 151
 152                 .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
 153                         background-color: @background-color-base--hover;
 154                 }
 155
 156                 .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
 157                         outline: 0;
 158                         box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
 159                 }
 160
 161                 &.oo-ui-flaggedElement-invalid {
 162                         .mw-widgets-datetime-dateTimeInputWidget-handle {
 163                                 border-color: @border-color-erroneous;
 164                                 box-shadow: @box-shadow-widget;
 165
 166                                 &:focus {
 167                                         border-color: @border-color-erroneous;
 168                                         box-shadow: @box-shadow-erroneous--focus;
 169                                 }
 170                         }
 171                 }
 172         }
 173
 174         &.oo-ui-widget-disabled {
 175                 .mw-widgets-datetime-dateTimeInputWidget-handle {
 176                         background-color: @background-color-base--disabled;
 177                         // Support: Safari
 178                         -webkit-text-fill-color: @color-base--disabled;
 179                         color: @color-base--disabled;
 180                         border-color: @border-color-base--disabled;
 181                         text-shadow: @text-shadow-base--disabled;
 182                 }
 183
 184                 > .oo-ui-iconElement-icon,
 185                 > .oo-ui-indicatorElement-indicator {
 186                         opacity: @opacity-base--disabled;
 187                 }
 188         }
 189 }