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                         min-width: @min-size-indicator;
  60                         width: @size-indicator;
  61                         min-height: @min-size-indicator;
  62                         height: @size-indicator;
  63                         max-height: @size-base;
  64                 }
  65         }
  66
  67         &-empty &-handle {
  68                 color: @color-base--subtle;
  69         }
  70
  71         &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
  72                 padding-left: @padding-start-input-text-icon-label;
  73         }
  74
  75         &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
  76                 padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
  77         }
  78
  79         &-field {
  80                 background-color: transparent;
  81                 color: inherit;
  82                 .oo-ui-box-sizing( border-box );
  83                 border: 0;
  84                 border-radius: @border-radius-base;
  85                 // Provide more top padding due to border not being part of the calculation
  86                 padding-top: 10 / @ooui-font-size-browser / @ooui-font-size-base;
  87                 padding-bottom: @padding-bottom-base;
  88                 box-shadow: none;
  89                 font-size: inherit;
  90                 font-family: inherit;
  91                 line-height: @line-height-widget-singleline;
  92                 text-align: center;
  93                 vertical-align: top;
  94         }
  95
  96         &-editField {
  97                 .mw-widgets-datetime-dateTimeInputWidget-invalid {
  98                         border: 1px solid @border-color-erroneous;
  99                         box-shadow: @box-shadow-widget;
 100
 101                         &:focus {
 102                                 border: 1px solid @border-color-erroneous;
 103                                 box-shadow: @box-shadow-erroneous--focus;
 104                         }
 105                 }
 106         }
 107
 108         &-clearButton {
 109                 padding-top: 0;
 110         }
 111
 112         &.oo-ui-widget-enabled {
 113                 .mw-widgets-datetime-dateTimeInputWidget-handle {
 114                         .oo-ui-transition( border-color @transition-ease-medium );
 115
 116                         &:hover {
 117                                 border-color: @border-color-input--hover;
 118                         }
 119                 }
 120
 121                 // Set on widget parent to also enable `:hover` on child elmeents
 122                 &:hover {
 123                         input,
 124                         textarea {
 125                                 border-color: @border-color-input--hover;
 126                         }
 127                 }
 128
 129                 .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
 130                         background-color: @background-color-base--hover;
 131                 }
 132
 133                 .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
 134                         outline: 0;
 135                         box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
 136                 }
 137
 138                 &.oo-ui-flaggedElement-invalid {
 139                         .mw-widgets-datetime-dateTimeInputWidget-handle {
 140                                 border-color: @border-color-erroneous;
 141                                 box-shadow: @box-shadow-widget;
 142
 143                                 &:focus {
 144                                         border-color: @border-color-erroneous;
 145                                         box-shadow: @box-shadow-erroneous--focus;
 146                                 }
 147                         }
 148                 }
 149         }
 150
 151         &.oo-ui-widget-disabled {
 152                 .mw-widgets-datetime-dateTimeInputWidget-handle {
 153                         background-color: @background-color-base--disabled;
 154                         // Support: Safari
 155                         -webkit-text-fill-color: @color-base--disabled;
 156                         color: @color-base--disabled;
 157                         border-color: @border-color-base--disabled;
 158                         text-shadow: @text-shadow-base--disabled;
 159                 }
 160
 161                 > .oo-ui-iconElement-icon,
 162                 > .oo-ui-indicatorElement-indicator {
 163                         opacity: @opacity-base--disabled;
 164                 }
 165         }
 166 }