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

   1 @import 'mediawiki.skin.variables.less';
   2 @import 'mediawiki.mixins.less';
   3
   4 /*!
   5  * OOUI definitions used by the existing CSS (will make it easier to put this
   6  * widget in OOUI once OOUI is capable of handling it)
   7  */
   8
   9 .oo-ui-unselectable() {
  10         -webkit-touch-callout: none;
  11         .user-select( none );
  12 }
  13
  14 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
  15         margin-right: @spacing;
  16
  17         &:last-child {
  18                 margin-right: @cancelled-spacing;
  19         }
  20 }
  21
  22 // Variables taken from OOUI's WikimediaUI theme, see its common.less for further explanations
  23 @ooui-font-size-browser: 16; // assumed browser default of `16px`
  24 @ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
  25 @ooui-unit: em;
  26
  27 @min-size-indicator: 12px;
  28 @size-base: (32 / @ooui-font-size-browser / @ooui-font-size-base);
  29 @size-icon: (24 / @ooui-font-size-browser / @ooui-font-size-base);
  30 @size-indicator: (12 / @ooui-font-size-browser / @ooui-font-size-base);
  31 @max-width-base: 50em;
  32 @max-width-input: @max-width-base;
  33
  34 @padding-input-text: @padding-vertical-base @padding-horizontal-input-text;
  35 @padding-horizontal-base: 12px;
  36 @padding-horizontal-input-text: 8px;
  37 @padding-vertical-base: 6px;
  38 // All paddings holding icons need `em`s due to font-size derived icon scaling.
  39 @padding-top-button-clear: (28 / @ooui-font-size-browser / @ooui-font-size-base); // As it's inside an input, we need to reduce from borders surrounding.
  40 @padding-start-input-text-icon: (6 / @ooui-font-size-browser / @ooui-font-size-base);
  41 @padding-start-input-text-icon-label: (32 / @ooui-font-size-browser / @ooui-font-size-base);
  42 @padding-start-button-clear: (4 / @ooui-font-size-browser / @ooui-font-size-base);
  43
  44 // `line-height` has to be relative/in `em` to enable user override in browser settings.
  45 @line-height-widget-base: unit( 18 / @ooui-font-size-browser / @ooui-font-size-base, @ooui-unit ); // equals `18px` at base `font-size: 14px;
  46
  47 @text-shadow-base: 0 1px 1px @color-inverted; // 'coined' effect
  48 @text-shadow-base--disabled: @text-shadow-base;