158 lines
3.9 KiB
SCSS
158 lines
3.9 KiB
SCSS
@use "./vars" as v;
|
|
|
|
// ---- text
|
|
.text-light { font-weight: 400; color: var(--text-color-light); }
|
|
|
|
.bigger { font-size: v.$text-size-bigger !important; }
|
|
.big { font-size: v.$text-size-big !important; }
|
|
.smaller { font-size: v.$text-size-smaller !important; }
|
|
.small { font-size: v.$text-size-small !important; }
|
|
|
|
// ---- layout
|
|
.align-left {
|
|
text-align: left;
|
|
justify-content: left;
|
|
|
|
&.x { padding-left: 0px !important; }
|
|
}
|
|
.align-right {
|
|
text-align: right;
|
|
justify-content: right;
|
|
|
|
&.x { padding-right: 0px !important; }
|
|
}
|
|
.align-center {
|
|
text-align: center !important;
|
|
justify-content: center;
|
|
}
|
|
|
|
.clear-left { clear: left !important }
|
|
.clear-right { clear: right !important }
|
|
.clear-both { clear: both !important }
|
|
.clear-unset { clear: unset !important }
|
|
|
|
.d-inline { display: inline !important; }
|
|
.d-block { display: block !important; }
|
|
.d-inline-block { display: inline-block !important; }
|
|
|
|
.p-relative { position: relative !important }
|
|
.p-absolute { position: absolute !important }
|
|
.p-fixed { position: fixed !important }
|
|
.p-sticky { position: sticky !important }
|
|
.p-static { position: static !important }
|
|
|
|
.ws-nowrap { white-space: nowrap; }
|
|
|
|
|
|
.height-1 { height: 1em; }
|
|
.height-2 { height: 2em; }
|
|
.height-3 { height: 3em; }
|
|
.height-4 { height: 4em; }
|
|
.height-5 { height: 5em; }
|
|
.height-6 { height: 6em; }
|
|
.height-7 { height: 7em; }
|
|
.height-8 { height: 8em; }
|
|
.height-9 { height: 9em; }
|
|
.height-10 { height: 10em; }
|
|
.height-15 { height: 15em; }
|
|
.height-20 { height: 20em; }
|
|
.height-25 { height: 25em; }
|
|
|
|
// ---- grid / flex
|
|
|
|
.gap-1 { gap: v.$mp-1 !important; }
|
|
.gap-2 { gap: v.$mp-2 !important; }
|
|
.gap-3 { gap: v.$mp-3 !important; }
|
|
.gap-4 { gap: v.$mp-4 !important; }
|
|
.gap-5 { gap: v.$mp-5 !important; }
|
|
|
|
|
|
// ---- ---- grid
|
|
@mixin grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-auto-flow: dense;
|
|
gap: v.$mp-4;
|
|
}
|
|
@mixin grid-1 { grid-template-columns: 1fr; }
|
|
@mixin grid-2 { grid-template-columns: 1fr 1fr; }
|
|
@mixin grid-3 { grid-template-columns: 1fr 1fr 1fr; }
|
|
|
|
.grid { @include grid; }
|
|
.grid-1 { @include grid; @include grid-1; }
|
|
.grid-2 { @include grid; @include grid-2; }
|
|
.grid-3 { @include grid; @include grid-3; }
|
|
|
|
// ---- ---- flex
|
|
.flex-row { display: flex; flex-direction: row }
|
|
.flex-column { display: flex; flex-direction: column }
|
|
.flex-grow-0 { flex-grow: 0 !important; }
|
|
.flex-grow-1 { flex-grow: 1 !important; }
|
|
|
|
.float-right { float: right }
|
|
.float-left { float: left }
|
|
|
|
// ---- boxing
|
|
.is-fullwidth { width: 100%; }
|
|
.is-fullheight { height: 100%; }
|
|
.is-fixed-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
margin-bottom: 0px;
|
|
border-radius: 0;
|
|
}
|
|
.no-border { border: 0px !important; }
|
|
|
|
.overflow-hidden { overflow: hidden }
|
|
.overflow-hidden.is-fullwidth { max-width: 100%; }
|
|
|
|
.height-full { height: 100%; }
|
|
|
|
*[draggable="true"] {
|
|
cursor: move;
|
|
}
|
|
|
|
|
|
// ---- animations
|
|
@keyframes blink {
|
|
from { opacity: 1; }
|
|
to { opacity: 0.4; }
|
|
}
|
|
|
|
.blink { animation: 1s ease-in-out 3s infinite alternate blink; }
|
|
.loading { animation: 1s ease-in-out 1s infinite alternate blink; }
|
|
|
|
|
|
// -- colors
|
|
.main-color { color: var(--main-color); }
|
|
.secondary-color { color: var(--secondary-color); }
|
|
|
|
.bg-main { background-color: var(--main-color); }
|
|
.bg-main-light { background-color: var(--main-color-light); }
|
|
.bg-secondary { background-color: var(--secondary-color); }
|
|
.bg-secondary-light { background-color: var(--secondary-color-light); }
|
|
.bg-transparent { background-color: transparent; }
|
|
|
|
.border-bottom-main { border-bottom: 1px solid var(--main-color); }
|
|
.border-bottom-secondary { border-bottom: 1px solid var(--secondary-color); }
|
|
|
|
.is-success {
|
|
background-color: v.$green !important;
|
|
border-color: v.$green-dark !important;
|
|
}
|
|
.is-danger {
|
|
background-color: v.$red !important;
|
|
border-color: v.$red-dark !important;
|
|
}
|
|
|
|
|
|
.box-shadow {
|
|
&:hover {
|
|
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
|
}
|
|
|
|
&.active {
|
|
box-shadow: 0em 0em 1em rgba(0,0,0,0.4);
|
|
}
|
|
}
|