mediawiki-skins-Citizen/resources/mixins.less

155 lines
3.3 KiB
Plaintext
Raw Normal View History

2019-08-15 17:40:13 +00:00
/*
* Citizen - Mixins
* https://starcitizen.tools
*/
// 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: @page-width;
margin-left: auto;
margin-right: auto;
}
// Prepare for RL icons
.resource-loader-icon-link() {
width: @icon-box-size;
height: @icon-box-size;
display: block;
}
.resource-loader-icon-link-small() {
width: @icon-size;
height: @icon-size;
display: block;
}
.resource-loader-icon() {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-repeat: no-repeat;
background-position: center;
}
.resource-loader-menu-icon() {
content: "";
position: absolute;
width: @icon-box-size;
height: @icon-box-size;
background-repeat: no-repeat;
background-position: center;
}
.resource-loader-list-icon() {
content: "";
position: relative;
flex-shrink: 0;
align-self: center;
width: @icon-size;
height: @icon-size;
background-repeat: no-repeat;
background-position: center;
}
// Material-like menu
.menu-container() {
padding: 8px 0;
background-color: @menu-background;
display: block;
}
.menu-item-link() {
display: flex;
color: @color-item-text!important;
transition: @transition-background-quick, @transition-color-quick;
}
.menu-item-link-hover() {
color: @color-item-text-hover!important;
background-color: @menu-item-link-hover;
}
.menu-item-link-active() {
color: @color-item-text-hover!important;
background-color: @menu-item-link-active;
}
.menu-item-link-focus() {
color: @color-item-text-hover!important;
background-color: @menu-item-link-hover;
}
// Button Styles
.button-blue() {
background-color: @accent-50;
color: @base-80!important;
transition: @transition-background-quick, @transition-color-quick;
}
.button-blue-active() {
background-color: @accent-10;
color: @base-100!important;
}
.button-red() {
background-color: @red-50;
color: @base-80!important;
transition: @transition-background-quick, @transition-color-quick;
}
.button-red-active() {
background-color: @red-30;
color: @base-100!important;
}
// Link styles
.link-content-text(@color) {
background-image: linear-gradient(to right, @color 0, @color 100%);
background-repeat: no-repeat;
background-size: 0 100%;
transition: @transition-background-quick, @transition-color-quick;
&:hover {
outline: none;
color: white!important;
background-size: 100% 100%!important;
}
}
// Gradient overflow
.gradient-overflow(@position) {
content: "";
position: fixed;
z-index: 3;
width: 100%;
height: @margin-side * 2;
background: @position;
}
// 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
}
}