resources/src/mediawiki.htmlform.ooui.styles.less

   1 @import 'mediawiki.mixins';
   2
   3 /* stylelint-disable selector-class-pattern */
   4
   5 // OOUIHTMLForm styles
   6 @ooui-font-size-browser: 16; // assumed browser default of `16px`
   7 @ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
   8
   9 @ooui-spacing-small: 8 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.57142857em`≈`8px`
  10 @ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.8571429em`≈`12px`
  11 @ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.1428571em`≈`16px`
  12 @ooui-padding-horizontal: 12 / @ooui-font-size-browser / @ooui-font-size-base;
  13 @ooui-padding-vertical: 4 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.285714em`≈`4px`
  14
  15 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
  16         // Reducing `padding-top`, as the heading's `line-height` provides similar distance.
  17         padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
  18
  19         .client-js & .oo-ui-fieldsetLayout.mw-collapsible .oo-ui-fieldsetLayout-header {
  20                 // Push legend up when JS is on, to increase clickable area.
  21                 margin-top: -@ooui-spacing-small;
  22                 margin-bottom: @ooui-spacing-small;
  23                 // Add `padding-top` to make up for negative `margin` above.
  24                 padding: @ooui-spacing-small;
  25                 // Make space for toggle icon defined below.
  26                 padding-left: 24 / @ooui-font-size-browser / @ooui-font-size-base;
  27
  28                 .oo-ui-labelElement-label {
  29                         margin-bottom: 0;
  30                 }
  31         }
  32
  33         // Trigger only when collapsible & JS is available via `.mw-collapsed`.
  34         .client-js & .oo-ui-fieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
  35                 min-height: 30px;
  36                 // Negative margin to match the reduced distance on the top caused by the previous rule.
  37                 margin-bottom: -@ooui-spacing-medium;
  38         }
  39 }
  40
  41 .mw-htmlform-ooui {
  42         line-height: 1.4; // Override MediaWiki's default of `1.6`
  43
  44         .oo-ui-fieldsetLayout-header {
  45                 font-size: 100%; // Override MediaWiki's generic `legend` styling
  46         }
  47
  48         .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  49                 line-height: 16 / @ooui-font-size-browser / @ooui-font-size-base;
  50         }
  51
  52         .mw-htmlform-field-HTMLCheckMatrix {
  53                 width: 100%;
  54         }
  55
  56         // Default OOUI styles produce a larger margin here
  57         .mw-htmlform-field-HTMLSizeFilterField {
  58                 margin-top: @ooui-spacing-medium;
  59         }
  60
  61         .mw-htmlform-matrix {
  62                 border-spacing: 0 2px;
  63
  64                 th {
  65                         font-weight: normal;
  66                 }
  67
  68                 td {
  69                         padding: @ooui-padding-vertical @ooui-padding-horizontal;
  70                         text-align: center;
  71                         .transition( background-color 250ms );
  72
  73                         &:first-child {
  74                                 text-align: left;
  75                         }
  76
  77                         &.first {
  78                                 margin-right: 5%;
  79                                 width: 39%;
  80                         }
  81                 }
  82
  83                 thead tr td {
  84                         padding-bottom: 0;
  85                 }
  86
  87                 tbody tr:nth-child( even ) td {
  88                         background-color: #f8f9fa;
  89                 }
  90
  91                 tbody tr:hover td {
  92                         background-color: #eaecf0;
  93                 }
  94
  95                 // Specificity needed because of necessary high OOUI specificity due to modularity
  96                 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
  97                         margin-top: 0;
  98                 }
  99
 100                 .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
 101                         padding-bottom: 0;
 102                 }
 103         }
 104 }
 105
 106 // Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
 107 // JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
 108 .mw-htmlform-flatlist {
 109         .oo-ui-fieldLayout-align-inline,
 110         .oo-ui-radioOptionWidget,
 111         .oo-ui-checkboxMultioptionWidget {
 112                 display: inline-block;
 113                 margin-right: @ooui-spacing-medium;
 114         }
 115
 116         // Reduce label distance in flatlist
 117         &.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
 118                 padding-bottom: 0;
 119         }
 120 }
 121
 122 // First selector is flatlist specific
 123 .mw-htmlform-field-HTMLMultiSelectField.oo-ui-fieldLayout,
 124 .mw-htmlform-ooui .htmlform-tip,
 125 .mw-htmlform-ooui .mw-htmlform-submit-buttons {
 126         margin-top: @ooui-spacing-medium;
 127 }
 128
 129 .oo-ui-fieldsetLayout.mw-collapsible {
 130         .oo-ui-fieldsetLayout-header {
 131                 max-width: none;
 132         }
 133
 134         .mw-collapsible-toggle .oo-ui-iconElement-icon {
 135                 position: absolute;
 136                 top: 0;
 137                 left: 0;
 138                 // Special case: Reduce to `16px` icon size here.
 139                 min-width: 16px;
 140                 width: 16 / @ooui-font-size-browser / @ooui-font-size-base;
 141                 margin-right: 0.5em;
 142         }
 143
 144         // When expanded: only 'collapse' icon visible
 145         .mw-collapsible-toggle .oo-ui-icon-expand {
 146                 display: none;
 147         }
 148
 149         // When collapsed: only 'expand' icon visible
 150         &.mw-collapsed {
 151                 .mw-collapsible-toggle .oo-ui-icon-expand {
 152                         display: inline-block;
 153                 }
 154
 155                 .mw-collapsible-toggle .oo-ui-icon-collapse {
 156                         display: none;
 157                 }
 158         }
 159 }