Page MenuHomeWickedGov Phorge
Files F4109546

mixins.buttons.less
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

mixins.buttons.less
View Options

// MediaWiki.ui button mixins for MediaWiki (deprecated)
//
// Helper mixins used to create button styles. This file is importable
// by all LESS files via `@import 'mediawiki.ui/mixins.buttons.less';`.
@import 'mediawiki.skin.variables.less';
/* stylelint-disable selector-class-pattern */
// Default button mixin.
.mw-ui-button() {
// Container layout
display: inline-block;
box-sizing: border-box;
margin: 0;
border-width: @border-width-base;
border-style: @border-style-base;
border-radius: @border-radius-base;
// Ensure that buttons and inputs are nicely aligned when they have differing heights
vertical-align: middle;
// Inherit the font rather than apply user agent stylesheet (T72072)
font-family: inherit;
font-size: 1em;
font-weight: bold;
line-height: 1.28571429em;
text-align: center;
// Disable weird iOS styling
-webkit-appearance: none;
&:not( .mw-ui-icon-element ) {
min-height: 32px;
min-width: 4em;
max-width: 28.75em; // equivalent to 460px, @see T95367
padding: 5px 12px;
}
}
// Mixin for button interaction states.
.mw-ui-button-states() {
&:not( :disabled ) {
border-color: @border-color-base;
// Add `transition`s exclusively on enabled buttons.
transition-property: @transition-property-base;
transition-duration: @transition-duration-base;
// Make sure that `color` isn't inheriting from user-agent styles
&:visited {
color: @color-base;
}
&:hover {
background-color: @background-color-base;
color: @color-base--hover;
cursor: @cursor-base--hover;
}
&:focus {
// Make sure that `color` isn't inheriting from user-agent styles
color: @color-base;
border-color: @border-color-progressive--focus;
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
// Set the standard focus `outline` transparent. A `border` and `box-shadow` visual
// focus is added above for common rendering.
// In Windows high contrast mode the transparent outline becomes visible.
// As vendor stylesheets set the outline on `:focus`, we need to follow here too and
// can't rely on the next selector to override it.
outline: @outline-base--focus;
// Remove the inner border and padding in Firefox.
&::-moz-focus-inner {
// As this is a reset, we're not using skin variables here.
border-color: transparent;
padding: 0;
}
}
&:active,
&.is-on {
background-color: @background-color-interactive;
color: @color-emphasized;
border-color: @border-color-interactive;
box-shadow: none;
}
}
&:disabled {
background-color: @background-color-disabled;
color: @color-inverted;
border-color: @border-color-disabled;
cursor: @cursor-base--disabled;
}
}
// Primary buttons mixin.
.mw-ui-button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
&:not( :disabled ) {
background-color: @bgColor;
color: @color-inverted;
// border of the same color as background so that light background and
// dark background buttons are the same height and width
border-color: @bgColor;
&:hover {
background-color: @highlightColor;
border-color: @highlightColor;
}
&:focus {
box-shadow: @box-shadow-inset-small @bgColor, @box-shadow-inset-medium @box-shadow-color-inverted;
}
&:active,
&.is-on {
background-color: @activeColor;
border-color: @activeColor;
box-shadow: none;
}
}
&:disabled {
background-color: @background-color-disabled;
color: @color-inverted;
border-color: @border-color-disabled;
}
}

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 21:07 (1 w, 1 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
13/b9/4b0a49f1060bb741d91b2aee749a
Default Alt Text
mixins.buttons.less (3 KB)

Event Timeline