resources/src/mediawiki.less/mediawiki.mixins.less

   1 // Common LESS mixin library for MediaWiki
   2 //
   3 // By default the folder containing this file is included in the LESS import paths,
   4 // which makes this file importable by all less files via `@import 'mediawiki.mixins.less';`.
   5 //
   6 // The mixins included below are considered a public interface for MediaWiki extensions.
   7 // The signatures of parameterized mixins should be kept as stable as possible.
   8 //
   9 // See <http://lesscss.org/#-mixins> for more information about how to write mixins.
  10
  11 /* stylelint-disable selector-class-pattern */
  12
  13 // Deprecated in MW v1.43, use linear-gradient directly
  14 .horizontal-gradient( @startColor: #808080, @endColor: #fff, @startPos: 0, @endPos: 100% ) {
  15         background-color: average( @startColor, @endColor );
  16         background-image: linear-gradient( to right, @startColor @startPos, @endColor @endPos );
  17 }
  18
  19 // Deprecated in MW v1.43, use linear-gradient directly
  20 .vertical-gradient( @startColor: #808080, @endColor: #fff, @startPos: 0, @endPos: 100% ) {
  21         background-color: average( @startColor, @endColor );
  22         background-image: linear-gradient( to bottom, @startColor @startPos, @endColor @endPos );
  23 }
  24
  25 .hyphens( @value: auto ) {
  26         & when ( @value = auto ) {
  27                 // Legacy `word-wrap`; Edge 12+, Firefox 3.5+, Chrome 4+, Safari 3.1+,
  28                 //   Opera 11.5+, iOS 3.2+, Android 2.1+
  29                 // `overflow-wrap` is W3 standard, but it doesn't seem as if browser vendors
  30                 //   will abandon `word-wrap` (it has wider support), therefore no duplication.
  31                 word-wrap: break-word;
  32         }
  33         & when ( @value = none ) {
  34                 word-wrap: normal;
  35         }
  36
  37         // CSS3 hyphenation
  38         // Chrome < 55 support "-webkit-hyphens: none",
  39         // but not the "auto" property. It is advisable to set the @lang attribute
  40         // on the HTML element to enable hyphenation support and improve accessibility.
  41         // Chrome 55-87 only supports `auto` exclusively on Mac platform.
  42         /* stylelint-disable plugin/no-unsupported-browser-features */
  43         -webkit-hyphens: @value; // Safari 5.1+, iOS 4.2+
  44         hyphens: @value;         // Firefox 43+, Chrome 55+, Safari 17+, iOS 17+, Android 62+, UC Browser 11.8+, Samsung 6.2+
  45         /* stylelint-enable plugin/no-unsupported-browser-features */
  46 }
  47
  48 // Use to truncate overflow text with value of `ellipsis` (mixin default)
  49 // a custom string (Firefox 9+ only).
  50 // Recommended usage: `text-overflow( @visible: false )` for best readability.
  51 .text-overflow( @visible: false, @value: ellipsis ) {
  52         & when ( @visible = true ) {
  53                 overflow: visible;
  54                 text-overflow: clip;
  55                 white-space: normal;
  56         }
  57         & when ( @visible = false ) {
  58                 overflow: hidden;
  59                 text-overflow: @value;
  60                 white-space: nowrap;
  61         }
  62 }
  63
  64 // Enable (`text` or `element`) or prevent (`none`) text/element selection.
  65 // Since MW 1.38
  66 .user-select( @value ) {
  67         -webkit-user-select: @value; // Chrome 4-53, Safari 3.1-, Opera 15-40
  68         -moz-user-select: @value; // Firefox 2-68
  69         user-select: @value;
  70 }
  71
  72 // In the future this can be simply migrated to `margin-block: @start @end;`
  73 // Since MW 1.44
  74 .margin-block( @start, @end ) {
  75         margin-top: @start;
  76         margin-bottom: @end;
  77         -webkit-margin-before: @start; // Archaic WebKit/Chrome versions
  78         -webkit-margin-after: @end;
  79         /* stylelint-disable declaration-block-no-redundant-longhand-properties */
  80         margin-block-start: @start; // Firefox 41, Safari 12.1, Chrome 69, Opera 56
  81         margin-block-end: @end;
  82         /* stylelint-enable declaration-block-no-redundant-longhand-properties */
  83 }
  84
  85 // In the future this can be simply migrated to `margin-inline: @start @end;`
  86 // Since MW 1.43
  87 .margin-inline( @start, @end ) {
  88         margin-left: @start;
  89         margin-right: @end;
  90         -webkit-margin-start: @start; // Archaic WebKit/Chrome versions
  91         -webkit-margin-end: @end;
  92         /* stylelint-disable declaration-block-no-redundant-longhand-properties */
  93         margin-inline-start: @start; // Firefox 41, Safari 12.1, Chrome 69, Opera 56
  94         margin-inline-end: @end;
  95         /* stylelint-enable declaration-block-no-redundant-longhand-properties */
  96 }
  97
  98 // In the future this can be simply migrated to `padding-block: @start @end;`
  99 // Since MW 1.44
 100 .padding-block( @start, @end ) {
 101         padding-top: @start;
 102         padding-bottom: @end;
 103         -webkit-padding-before: @start; // Archaic WebKit/Chrome versions
 104         -webkit-padding-after: @end;
 105         /* stylelint-disable declaration-block-no-redundant-longhand-properties */
 106         padding-block-start: @start; // Firefox 41, Safari 12.1, Chrome 69, Opera 56
 107         padding-block-end: @end;
 108         /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 109 }
 110
 111 // In the future this can be simply migrated to `padding-inline: @start @end;`
 112 // Since MW 1.43
 113 .padding-inline( @start, @end ) {
 114         padding-left: @start;
 115         padding-right: @end;
 116         -webkit-padding-start: @start; // Archaic WebKit/Chrome versions
 117         -webkit-padding-end: @end;
 118         /* stylelint-disable declaration-block-no-redundant-longhand-properties */
 119         padding-inline-start: @start; // Firefox 41, Safari 12.1, Chrome 69, Opera 56
 120         padding-inline-end: @end;
 121         /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 122 }
 123
 124 // Not supported in Chrome <= 55, Firefox <= 31, Opera <= 41
 125 .position-sticky() {
 126         -webkit-position: sticky; // Support: Safari < 13
 127         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 128         position: sticky;
 129 }
 130
 131 .column-count( @value ) {
 132         -moz-column-count: @value; // Firefox 2-51
 133         column-count: @value; // Chrome 50+, Firefox 52+, Edge, Opera 11.5+, Android 90+
 134 }
 135
 136 .column-width( @value ) {
 137         -moz-column-width: @value; // Firefox 1.5-49
 138         column-width: @value; // Chrome 50+, Firefox 50+, Edge, Opera 11.5+, Safari 9+
 139 }
 140
 141 .column-break-inside-avoid() {
 142         page-break-inside: avoid; // Firefox 1.5-91
 143         break-inside: avoid-column; // Chrome 80+, Firefox 92+, Edge 80+, Safari 13.1+, Opera 67+
 144 }
 145
 146 .flex-display( @display: flex ) {
 147         display: @display;
 148 }
 149
 150 .flex-wrap( @wrap: wrap ) {
 151         flex-wrap: @wrap;
 152 }
 153
 154 .flex( @grow: 1, @shrink: 1, @width: auto, @order: 1 ) {
 155         // Current spec
 156         justify-content: space-between;
 157         width: @width; // Fallback for flex-basis
 158         flex: @grow @shrink @width;
 159         order: @order;
 160 }
 161
 162 // “Clearfix Reloaded” Mixin
 163 // The mixin is used on a container with floating children.
 164 // Margin collapsing is a feature, not a bug, hence relying on `display: block` as default.
 165 // With `.mixin-clearfix( @collapse: false; );` you call it to let `margin`s not collapse.
 166 // See https://www.cssmojo.com/the-very-latest-clearfix-reloaded/
 167 // In future we might replace the `&:after` pseudo-element with
 168 // `display: flow-root;` altogether.
 169 // Support: Firefox 3.5+, Safari 4+, Chrome, Opera 15+
 170 .mixin-clearfix( @collapse: true ) {
 171         &::after {
 172                 clear: both;
 173
 174                 // Margin collapsing as feature. Apply it.
 175                 & when ( @collapse ) {
 176                         content: '';
 177                         display: block;
 178                 }
 179         }
 180         // Margin collapsing as bug. Prevent it.
 181         & when not ( @collapse ) {
 182                 &::before,
 183                 &::after {
 184                         content: '';
 185                         display: table;
 186                 }
 187         }
 188 }
 189
 190 /* stylelint-disable selector-no-vendor-prefix */
 191 .mixin-placeholder( @rules ) {
 192         // Chrome 4-56, WebKit, Blink, Edge 12-18
 193         &::-webkit-input-placeholder {
 194                 @rules();
 195         }
 196         // W3C Standard Selectors Level 4
 197         &::placeholder {
 198                 @rules();
 199         }
 200 }
 201 /* stylelint-enable selector-no-vendor-prefix */
 202
 203 // Screen Reader Helper Mixin
 204 .mixin-screen-reader-text() {
 205         display: block;
 206         position: absolute !important; /* stylelint-disable-line declaration-no-important */
 207         clip: rect( 1px, 1px, 1px, 1px );
 208         width: 1px;
 209         height: 1px;
 210         margin: -1px;
 211         border: 0;
 212         padding: 0;
 213         overflow: hidden;
 214 }