resources/src/mediawiki.widgets/mw.widgets.ExpiryInputWidget.less

   1 // TODO: Redefined here to avoid importing variables.less;
   2 @width-breakpoint-desktop: 1000px;
   3
   4 @wm-expirywidget-text-width: 43.3em;
   5
   6 .mw-widget-ExpiryWidget.mw-widget-ExpiryWidget-hasDatePicker {
   7         .oo-ui-buttonSelectWidget {
   8                 display: inline-block;
   9                 vertical-align: top;
  10         }
  11
  12         .oo-ui-textInputWidget.mw-widget-ExpiryWidget-relative {
  13                 display: inline-block;
  14                 max-width: @wm-expirywidget-text-width;
  15         }
  16
  17         .mw-widget-selectWithInputWidget {
  18                 display: inline;
  19         }
  20
  21         .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-dropdownInputWidget {
  22                 display: inline-block;
  23         }
  24
  25         .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-textInputWidget {
  26                 display: inline-block;
  27                 max-width: 22.8em;
  28         }
  29
  30         .mw-widgets-datetime-dateTimeInputWidget {
  31                 margin-top: 0;
  32                 margin-bottom: 0;
  33                 max-width: @wm-expirywidget-text-width;
  34
  35                 .mw-widgets-datetime-dateTimeInputWidget-handle {
  36                         max-height: 2.286em;
  37                 }
  38         }
  39
  40         @media ( max-width: ( @width-breakpoint-desktop - 1px ) ) {
  41                 .mw-widget-selectWithInputWidget {
  42                         display: block;
  43                 }
  44
  45                 .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-dropdownInputWidget,
  46                 .mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-textInputWidget,
  47                 .mw-widgets-datetime-dateTimeInputWidget {
  48                         display: block;
  49                         max-width: 50em;
  50                         margin-top: 0.5em;
  51                 }
  52         }
  53 }