mediawiki-skins-Citizen/resources/mixins.less

/*
 * Citizen - Mixins
 * https://starcitizen.tools
*/

.citizen-card( @border-radius: true ) {
	border: 1px solid var( --border-color-base );
	background-color: var( --color-surface-1 );
	box-shadow: 0 14px 28px rgba( 0, 0, 0, 0.0625 ), 0 10px 10px rgba( 0, 0, 0, 0.055 );

	& when ( @border-radius ) {
		border-radius: var( --border-radius--medium );
	}
}

// To hide objects, but keep them accessible for screen-readers
.hidden() {
	position: absolute;
	top: -9999px;
}

// Set content to be at the center
.content-center() {
	max-width: var( --width-layout );
	margin-right: auto;
	margin-left: auto;
}

// Prepare for RL icons
.resource-loader-icon-link() {
	display: block;
	width: @icon-box-size;
	height: @icon-box-size;
}

.resource-loader-icon-link-small() {
	display: block;
	width: @icon-size;
	height: @icon-size;
}

.resource-loader-icon() {
	position: absolute;
	width: inherit;
	height: inherit;
	background-position: center;
	background-repeat: no-repeat;
	content: '';
}

.resource-loader-menu-icon() {
	position: absolute;
	width: @icon-box-size;
	height: @icon-box-size;
	background-position: center;
	background-repeat: no-repeat;
	content: '';
}

.resource-loader-list-icon() {
	position: relative;
	width: @icon-size;
	height: @icon-size;
	flex-shrink: 0;
	align-self: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
}

.menu-item-link() {
	display: flex;
	color: var( --color-base ) !important;
	font-weight: 450;
}

.menu-item-link-hover() {
	background-color: var( --background-color-primary--hover );
}

.menu-item-link-active() {
	background-color: var( --background-color-primary--active );
}

// Button Styles
.button-blue() {
	background-color: var( --color-primary );
	color: #fff !important;
	transition: @transition-background-quick, @transition-color-quick;
}

.button-blue-hover() {
	background-color: var( --color-primary--hover );
}

.button-blue-active() {
	background-color: var( --color-primary--active );
}

.button-red() {
	background-color: var( --color-destructive );
	color: #fff !important;
	transition: @transition-background-quick, @transition-color-quick;
}

.button-red-hover() {
	background-color: var( --color-destructive--hover );
}

.button-red-active() {
	background-color: var( --color-destructive--active );
}

// Gradient overflow
.gradient-overflow(@position) {
	position: fixed;
	z-index: 3;
	width: 100%;
	height: @margin-side * 2;
	background: @position;
	content: '';
}

// Box-shadow
// https://codepen.io/sdthornton/pen/wBZdXq
.boxshadow(@level: 1) {
	& when (@level = 1) {
		box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 ); // Cards
	}
	& when (@level = 2) {
		box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
	}
	& when (@level = 3) {
		box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.0475 ), 0 6px 6px rgba( 0, 0, 0, 0.0575 ); // Drawer
	}
	& when (@level = 4) {
		box-shadow: 0 14px 28px rgba( 0, 0, 0, 0.0625 ), 0 10px 10px rgba( 0, 0, 0, 0.055 ); // FAB, floating elements
	}
	& when (@level = 5) {
		box-shadow: 0 19px 38px rgba( 0, 0, 0, 0.075 ), 0 15px 12px rgba( 0, 0, 0, 0.055 ); // Dialogs
	}
}

// Borrowed from Mediawiki core 1.35
// “Clearfix Reloaded” Mixin
// The mixin is used on a container with floating children.
// Margin collapsing is a feature, not a bug, hence relying on `display: block` as default.
// With `.mixin-clearfix( @collapse: false; );` you call it to let `margin`s not collapse.
// See https://www.cssmojo.com/the-very-latest-clearfix-reloaded/
// In future we might replace the `&:after` pseudo-element with
// `display: flow-root;` altogether.
// Support: Firefox 3.5+, Safari 4+, Chrome, Opera 15+, IE 8+
.mixin-clearfix( @collapse: true ) {
	&:after {
		clear: both;
		// Margin collapsing as feature. Apply it.
		& when ( @collapse ) {
			display: block;
			content: '';
		}
	}
	// Margin collapsing as bug. Prevent it.
	& when not ( @collapse ) {
		&:before,
		&:after {
			display: table;
			content: '';
		}
	}
}