72 lines
1.3 KiB
Plaintext
72 lines
1.3 KiB
Plaintext
// colors
|
|
@color-accent-dark: #a8c3b5;
|
|
@color-accent-light: #558b6e;
|
|
@color-danger: #d64933;
|
|
@color-dark: #2e282a;
|
|
@color-light: #fbfbfb;
|
|
|
|
// fonts
|
|
@fonts-sans: Rubik, Arial, sans-serif;
|
|
@font-s-lg: 2rem;
|
|
@font-s-md: 1.25rem;
|
|
@font-w-bold: 700;
|
|
@font-w-semibold: 600;
|
|
|
|
// layout
|
|
@border-r-xl: 0.75em;
|
|
@padding-md: @padding-md-y @padding-md-x;
|
|
@padding-md-x: 1em;
|
|
@padding-md-y: 0.5em;
|
|
@padding-lg: @padding-lg-y @padding-lg-x;
|
|
@padding-lg-x: 1.5em;
|
|
@padding-lg-y: 1em;
|
|
@padding-sm: @padding-sm-y @padding-sm-x;
|
|
@padding-sm-x: 0.875em;
|
|
@padding-sm-y: 0.375em;
|
|
@padding-xl: @padding-xl-y @padding-xl-x;
|
|
@padding-xl-x: 2em;
|
|
@padding-xl-y: 1.5em;
|
|
|
|
// sizes
|
|
@sizes: {
|
|
lg: 1280px;
|
|
};
|
|
|
|
// utils
|
|
.full-without-padding(@padding) {
|
|
@result: calc(100% - @padding * 2);
|
|
}
|
|
|
|
// shared sizing mixins
|
|
.container() {
|
|
box-sizing: border-box;
|
|
padding: @padding-lg;
|
|
|
|
@media screen and (min-width: @sizes[lg]) {
|
|
padding: @padding-xl;
|
|
}
|
|
}
|
|
|
|
.container-content() {
|
|
border: 1px solid @color-dark;
|
|
border-radius: @border-r-xl;
|
|
box-sizing: border-box;
|
|
font-size: @font-s-md;
|
|
height: 100%;
|
|
padding: @padding-lg;
|
|
width: 100%;
|
|
|
|
@media screen and (min-width: @sizes[lg]) {
|
|
font-size: unset;
|
|
}
|
|
}
|
|
|
|
// shared interactivity mixins
|
|
.selectable() {
|
|
font-weight: @font-w-semibold;
|
|
margin: 0;
|
|
padding: @padding-md;
|
|
text-align: center;
|
|
transition: background-color 0.2s;
|
|
}
|