resources/src/mediawiki.ui.icon/icons-2.less

   1 /**
   2 * MediaWiki UI icons specification 2.0
   3 *
   4 * Applies the MinervaNeue icon styles, adding more mobile-friendly
   5 * features like increased touch-area sizes and highlights.
   6 *
   7 * - mw-ui-icon = base class. 20px square with icon.
   8 * - mw-ui-icon + mw-ui-icon-element = icon with padding & pseudo-states.
   9 * - mw-ui-icon + mw-ui-icon-before = *deprecated*, icon with text.
  10 *   Labels should be placed in a separate element beside the icon.
  11 *
  12 */
  13
  14 @import 'mediawiki.skin.variables.less';
  15 @import 'mediawiki.mixins.less';
  16
  17 // == Icons ==
  18 @icon-touch-area-sm: 32; // This is also used for touch areas at DESKTOP resolutions.
  19 @icon-touch-area-md: 44;
  20 @font-size-browser: 16; // Assumed browser default of `16px`.
  21 // Medium icon
  22 @icon-glyph-size-md: 20;
  23 @icon-size-md: unit( @icon-glyph-size-md / @font-size-browser, em );
  24 @icon-padding-md: unit( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser, em );
  25
  26 // Includes 2px mw-ui-button border
  27 @icon-padding-md-button: unit( ( @icon-touch-area-md - @icon-glyph-size-md - 2 ) / 2 / @font-size-browser, em );
  28 // At desktop resolution the icon touch area will shrink from @icon-touch-area-md to @icon-touch-area-sm
  29 @icon-padding-md-button--desktop: unit( ( @icon-touch-area-sm - @icon-glyph-size-md - 2 ) / 2 / @font-size-browser, em );
  30
  31 // Colors
  32 @icon-color: @color-subtle;
  33 @margin-icon-md-labelled: 6px;
  34
  35 /**
  36 * Mixin for a pseudo-element with a background image.
  37 */
  38 .mixin-background-square( @size ) {
  39         // Sizing properties
  40         content: '';
  41         display: block;
  42         width: 100%;
  43         height: 100%;
  44         // In case display: block is overridden and display gets set to `flex`
  45         // because of inheritance T233521.
  46         min-width: @size;
  47         min-height: @size;
  48
  49         // Background properties.
  50         background-repeat: no-repeat;
  51         // Using static value instead of `background-size: contain` because of T233521#5545513.
  52         background-size: @size @size;
  53         background-position: center;
  54 }
  55
  56 /**
  57 * A standalone 20px square with screen-reader text. Contains a :before element
  58 * to house the icon as a background image. Total size is increased with padding via
  59 * `box-sizing: content-box`. This separates control over size of icon vs the size of
  60 * the touch-area.
  61 */
  62 .mw-ui-icon {
  63         // reset font-size so the "em" value is relative to the more
  64         // predictable rem font size ...and no rems because we can't have nice things.
  65         font-size: initial;
  66
  67         // sizing
  68         position: relative;
  69         display: inline-block;
  70
  71         // this is important for increasing the size via padding. Overrides `.view-border-box *`.
  72         /* stylelint-disable declaration-no-important */
  73         box-sizing: content-box !important;
  74         width: @icon-size-md;
  75         height: @icon-size-md;
  76
  77         // Guarding against flex-box variability.
  78         min-width: @icon-size-md;
  79         min-height: @icon-size-md;
  80         flex-basis: @icon-size-md;
  81         /* stylelint-enable declaration-no-important */
  82
  83         // alignment
  84         vertical-align: middle;
  85         line-height: 0;
  86
  87         // Overflow ellipsis.
  88         .text-overflow( @visible: false );
  89
  90         // resetting styles for <button> elements
  91         -moz-appearance: none;
  92         -webkit-appearance: none;
  93         background-color: transparent;
  94         margin: 0;
  95         padding: 0;
  96
  97         &:not( .mw-ui-button ) {
  98                 border: 0;
  99         }
 100
 101         &::before {
 102                 .mixin-background-square( @icon-size-md );
 103         }
 104
 105         // Use `not` selector to ensure we don't add space for machine readable markup. More info: T307233
 106         & + span:not( :empty ) {
 107                 // Margin is added to separate accompanying text.
 108                 margin-left: @margin-icon-md-labelled;
 109         }
 110 }
 111
 112 .mw-ui-icon-element {
 113         border-radius: @border-radius-base;
 114         padding: @icon-padding-md;
 115         // Override line-height applied by `.mw-ui-button`.
 116         line-height: 0;
 117         transition: background-color @transition-duration-base;
 118
 119         &.mw-ui-button {
 120                 padding: @icon-padding-md-button;
 121         }
 122         // Combined with nowrap & ellipsis from .mw-ui-icon, forms safe "screen-reader" text.
 123         color: transparent;
 124
 125         &:focus,
 126         &:active,
 127         &:visited {
 128                 color: transparent;
 129         }
 130
 131         // In desktop these icons shrink in size as touch area no longer important.
 132         @media ( min-width: @min-width-breakpoint-desktop ) {
 133                 &.mw-ui-button {
 134                         padding: @icon-padding-md-button--desktop;
 135                 }
 136         }
 137 }
 138
 139 .mw-ui-icon-before {
 140         width: auto;
 141         max-width: 100%;
 142
 143         &::before {
 144                 // sizing
 145                 display: inline-block;
 146                 font-size: initial;
 147                 width: auto;
 148                 min-width: @icon-size-md;
 149                 min-height: @icon-size-md;
 150
 151                 // alignment. Margin is added to separate accompanying text.
 152                 margin-right: @margin-icon-md-labelled;
 153                 vertical-align: middle;
 154         }
 155
 156         span {
 157                 vertical-align: middle;
 158         }
 159 }
 160
 161 @media all and ( min-width: @min-width-breakpoint-desktop ) {
 162         .mw-ui-icon-with-label-desktop {
 163                 // stylelint-disable-next-line declaration-no-important
 164                 color: @icon-color !important;
 165                 width: auto;
 166                 line-height: inherit;
 167                 flex-basis: auto;
 168                 // Special case outside of standard buttons styling due to surrounding
 169                 // interface elements, see T237019.
 170                 // stylelint-disable-next-line declaration-no-important
 171                 font-weight: 500 !important;
 172
 173                 &:hover,
 174                 &:focus,
 175                 &:active,
 176                 &:visited {
 177                         color: @icon-color;
 178                         text-decoration: none;
 179                 }
 180
 181                 &::before {
 182                         width: auto;
 183                         display: inline-block;
 184                         // Don't use `@icon-padding-md` as we are adjacent to text.
 185                         margin-right: @margin-icon-md-labelled;
 186                         // Seems to be more visually centered than `middle`.
 187                         vertical-align: text-bottom;
 188                 }
 189         }
 190 }