97 lines
2.4 KiB
SCSS
97 lines
2.4 KiB
SCSS
@use "./vars" as v;
|
|
|
|
.text-light { weight: 400; color: var(--text-color-light); }
|
|
|
|
// ---- layout
|
|
.align-left { text-align: left; justify-content: left; }
|
|
.align-right { text-align: right; justify-content: right; }
|
|
|
|
.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; }
|
|
|
|
|
|
// ---- 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-transparent { background-color: transparent; }
|
|
|
|
.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;
|
|
}
|