resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less

   1 /*!
   2  * OOUI definitions used by the existing CSS (will make it easier to put this
   3  * widget in OOUI once OOUI is capable of handling it)
   4  */
   5
   6 .oo-ui-box-sizing( @type: border-box ) {
   7         -webkit-box-sizing: @type;
   8         -moz-box-sizing: @type;
   9         box-sizing: @type;
  10 }
  11
  12 .oo-ui-unselectable() {
  13         -webkit-touch-callout: none;
  14         -webkit-user-select: none;
  15         -moz-user-select: none;
  16         -ms-user-select: none;
  17         user-select: none;
  18 }
  19
  20 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
  21         margin-right: @spacing;
  22
  23         &:last-child {
  24                 margin-right: @cancelled-spacing;
  25         }
  26 }
  27
  28 .oo-ui-transition( @value1, @value2: X, ... ) {
  29         @value: ~`'@{arguments}'.replace(/[\[\]]|\,\sX/g, '')`; // stylelint-disable-line function-comma-space-after, function-parentheses-space-inside, function-whitespace-after, value-keyword-case
  30         -webkit-transition: @value;
  31         -moz-transition: @value;
  32         transition: @value;
  33 }
  34
  35 // Variables taken from OOUI's WikimediaUI theme, see its common.less for further explanations
  36 @ooui-font-size-browser: 16; // assumed browser default of `16px`
  37 @ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
  38
  39 @background-color-base: #fff;
  40 @background-color-base--hover: #eaecf0;
  41 @background-color-base--disabled: #eaecf0;
  42
  43 @color-base: #222;
  44 @color-base--inverted: #fff;
  45 @color-base--subtle: #72777d;
  46 @color-base--disabled: #72777d;
  47 @color-progressive: #36c;
  48 @color-erroneous: #d33;
  49
  50 @min-size-indicator: 12px;
  51 @size-base: 32 / @ooui-font-size-browser / @ooui-font-size-base;
  52 @size-icon: 24 / @ooui-font-size-browser / @ooui-font-size-base;
  53 @size-indicator: 12 / @ooui-font-size-browser / @ooui-font-size-base;
  54 @max-width-base: 50em;
  55 @max-width-input: @max-width-base;
  56
  57 @padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base;
  58 @padding-horizontal-base: 12 / @ooui-font-size-browser / @ooui-font-size-base;
  59 @padding-horizontal-input-text: 8 / @ooui-font-size-browser / @ooui-font-size-base;
  60 @padding-top-base: 8 / @ooui-font-size-browser / @ooui-font-size-base;
  61 @padding-bottom-base: 7 / @ooui-font-size-browser / @ooui-font-size-base;
  62 @padding-start-input-text-icon: 6 / @ooui-font-size-browser / @ooui-font-size-base;
  63 @padding-start-input-text-icon-label: 32 / @ooui-font-size-browser / @ooui-font-size-base;
  64
  65 @border-base: 1px solid #a2a9b1;
  66 @border-color-base--disabled: #c8ccd1;
  67 @border-color-base--active: #72777d;
  68 @border-color-input--hover: @border-color-base--active;
  69 @border-color-erroneous: @color-erroneous;
  70
  71 @border-radius-base: 2px;
  72
  73 @box-shadow-base--focus: inset 0 0 0 1px @color-progressive;
  74 @box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
  75 @box-shadow-widget: inset 0 0 0 1px transparent;
  76 @box-shadow-erroneous--focus: inset 0 0 0 1px @color-erroneous;
  77
  78 @line-height-widget-singleline: 15 / @ooui-font-size-browser / @ooui-font-size-base;
  79
  80 @text-shadow-base: 0 1px 1px @color-base--inverted; // 'coined' effect
  81 @text-shadow-base--disabled: @text-shadow-base;
  82
  83 @opacity-base--disabled: 0.51;
  84
  85 @transition-base:             @transition-duration-base;
  86 @transition-ease-medium:      @transition-duration-medium;
  87 // Transitions > Durations
  88 @transition-duration-base:    100ms;
  89 @transition-duration-medium:  250ms;