874 lines
34 KiB
SCSS
874 lines
34 KiB
SCSS
|
@import 'variables';
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Reset + Base */
|
||
|
|
/* ========================================================================== */
|
||
|
|
*,
|
||
|
|
*::before,
|
||
|
|
*::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
html, body { height: 100%; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: $font-family-base;
|
||
|
|
font-size: map-get($font-sizes, base);
|
||
|
|
line-height: map-get($line-heights, normal);
|
||
|
|
color: map-get($colors, dark);
|
||
|
|
background: map-get($colors, white);
|
||
|
|
text-rendering: optimizeLegibility;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
}
|
||
|
|
|
||
|
|
a { color: inherit; text-decoration: none; }
|
||
|
|
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Typography Utilities */
|
||
|
|
/* ========================================================================== */
|
||
|
|
@each $k, $v in $font-sizes { .text-#{$k} { font-size: $v; } }
|
||
|
|
@each $k, $v in $font-weights { .fw-#{$k} { font-weight: $v; } }
|
||
|
|
@each $k, $v in $line-heights { .lh-#{$k} { line-height: $v; } }
|
||
|
|
|
||
|
|
.text-left { text-align: left; }
|
||
|
|
.text-center { text-align: center; }
|
||
|
|
.text-right { text-align: right; }
|
||
|
|
.text-uppercase { text-transform: uppercase; }
|
||
|
|
.text-lowercase { text-transform: lowercase; }
|
||
|
|
.text-capitalize { text-transform: capitalize; }
|
||
|
|
.text-underline { text-decoration: underline; }
|
||
|
|
.text-line-through { text-decoration: line-through; }
|
||
|
|
.text-no-decoration { text-decoration: none; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Color Utilities */
|
||
|
|
/* ========================================================================== */
|
||
|
|
@each $name, $color in $colors {
|
||
|
|
.text-#{$name} { color: $color !important; }
|
||
|
|
.bg-#{$name} { background-color: $color !important; }
|
||
|
|
.border-#{$name} { border-color: $color !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Spacing Utilities (Margin / Padding) */
|
||
|
|
/* ========================================================================== */
|
||
|
|
@each $k, $v in $space {
|
||
|
|
.m-#{$k} { margin: $v !important; }
|
||
|
|
.mt-#{$k} { margin-top: $v !important; }
|
||
|
|
.mr-#{$k} { margin-right: $v !important; }
|
||
|
|
.mb-#{$k} { margin-bottom: $v !important; }
|
||
|
|
.ml-#{$k} { margin-left: $v !important; }
|
||
|
|
.mx-#{$k} { margin-left: $v !important; margin-right: $v !important; }
|
||
|
|
.my-#{$k} { margin-top: $v !important; margin-bottom: $v !important; }
|
||
|
|
|
||
|
|
.p-#{$k} { padding: $v !important; }
|
||
|
|
.pt-#{$k} { padding-top: $v !important; }
|
||
|
|
.pr-#{$k} { padding-right: $v !important; }
|
||
|
|
.pb-#{$k} { padding-bottom: $v !important; }
|
||
|
|
.pl-#{$k} { padding-left: $v !important; }
|
||
|
|
.px-#{$k} { padding-left: $v !important; padding-right: $v !important; }
|
||
|
|
.py-#{$k} { padding-top: $v !important; padding-bottom: $v !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive spacing */
|
||
|
|
@each $bp, $w in $breakpoints {
|
||
|
|
@media (min-width: $w) {
|
||
|
|
@each $k, $v in $space {
|
||
|
|
.#{$bp}-m-#{$k} { margin: $v !important; }
|
||
|
|
.#{$bp}-mt-#{$k} { margin-top: $v !important; }
|
||
|
|
.#{$bp}-mr-#{$k} { margin-right: $v !important; }
|
||
|
|
.#{$bp}-mb-#{$k} { margin-bottom: $v !important; }
|
||
|
|
.#{$bp}-ml-#{$k} { margin-left: $v !important; }
|
||
|
|
.#{$bp}-mx-#{$k} { margin-left: $v !important; margin-right: $v !important; }
|
||
|
|
.#{$bp}-my-#{$k} { margin-top: $v !important; margin-bottom: $v !important; }
|
||
|
|
|
||
|
|
.#{$bp}-p-#{$k} { padding: $v !important; }
|
||
|
|
.#{$bp}-pt-#{$k} { padding-top: $v !important; }
|
||
|
|
.#{$bp}-pr-#{$k} { padding-right: $v !important; }
|
||
|
|
.#{$bp}-pb-#{$k} { padding-bottom: $v !important; }
|
||
|
|
.#{$bp}-pl-#{$k} { padding-left: $v !important; }
|
||
|
|
.#{$bp}-px-#{$k} { padding-left: $v !important; padding-right: $v !important; }
|
||
|
|
.#{$bp}-py-#{$k} { padding-top: $v !important; padding-bottom: $v !important; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Sizing Utilities (Width / Height) */
|
||
|
|
/* ========================================================================== */
|
||
|
|
@each $k, $v in $size-percent { .w-#{$k} { width: $v; } .h-#{$k} { height: $v; } }
|
||
|
|
@each $k, $v in $size-px { .wpx-#{$k} { width: $v; } .hpx-#{$k} { height: $v; } }
|
||
|
|
@each $k, $v in $size-rem { .wrem-#{$k} { width: $v; } .hrem-#{$k} { height: $v; } }
|
||
|
|
@each $k, $v in $size-vw { .wvw-#{$k} { width: $v; } }
|
||
|
|
@each $k, $v in $size-vh { .hvh-#{$k} { height: $v; } }
|
||
|
|
@each $k, $v in $size-dvh { .hdvh-#{$k} { height: $v; } }
|
||
|
|
@each $k, $v in $size-svh { .hsvh-#{$k} { height: $v; } }
|
||
|
|
@each $k, $v in $size-lvh { .hlvh-#{$k} { height: $v; } }
|
||
|
|
|
||
|
|
/* Responsive sizing */
|
||
|
|
@each $bp, $w in $breakpoints {
|
||
|
|
@media (min-width: $w) {
|
||
|
|
@each $k, $v in $size-percent { .#{$bp}-w-#{$k} { width: $v; } .#{$bp}-h-#{$k} { height: $v; } }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Display + Layout */
|
||
|
|
/* ========================================================================== */
|
||
|
|
@each $t in $display-types { .d-#{$t} { display: $t !important; } }
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
@each $bp, $mw in $container-max-widths {
|
||
|
|
@media (min-width: map-get($breakpoints, $bp)) { max-width: $mw; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Container variants */
|
||
|
|
.container-fluid {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
max-width: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-bleed {
|
||
|
|
width: 100vw;
|
||
|
|
margin-left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
padding-inline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-narrow {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
max-width: clamp(36rem, 70vw, 56rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-wide {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
max-width: clamp(72rem, 92vw, 100rem);
|
||
|
|
}
|
||
|
|
.container-fluid {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
max-width: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-bleed {
|
||
|
|
width: 100vw;
|
||
|
|
margin-left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
padding-inline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-narrow {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
max-width: clamp(36rem, 70vw, 56rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-wide {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
max-width: clamp(72rem, 92vw, 100rem);
|
||
|
|
}
|
||
|
|
.container-fluid {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
max-width: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-bleed {
|
||
|
|
width: 100vw;
|
||
|
|
margin-left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
padding-inline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-narrow {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
max-width: clamp(36rem, 70vw, 56rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-wide {
|
||
|
|
width: 100%;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: $container-padding;
|
||
|
|
max-width: clamp(72rem, 92vw, 100rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Flex grid */
|
||
|
|
.row {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-inline: map-get($gutters, 3);
|
||
|
|
margin-block: map-get($gutters, 3);
|
||
|
|
}
|
||
|
|
.col { flex: 1 0 0%; padding-inline: map-get($gutters, 3); padding-block: map-get($gutters, 3); }
|
||
|
|
.col-auto { flex: 0 0 auto; width: auto; padding-inline: map-get($gutters, 3); padding-block: map-get($gutters, 3); }
|
||
|
|
|
||
|
|
@for $i from 1 through $grid-columns {
|
||
|
|
.col-#{$i} {
|
||
|
|
flex: 0 0 percentage($i / $grid-columns);
|
||
|
|
max-width: percentage($i / $grid-columns);
|
||
|
|
padding-inline: map-get($gutters, 3);
|
||
|
|
padding-block: map-get($gutters, 3);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@each $bp, $w in $breakpoints {
|
||
|
|
@media (min-width: $w) {
|
||
|
|
.col-#{$bp} { flex: 1 0 0%; padding-inline: map-get($gutters, 3); padding-block: map-get($gutters, 3); }
|
||
|
|
.col-#{$bp}-auto { flex: 0 0 auto; width: auto; padding-inline: map-get($gutters, 3); padding-block: map-get($gutters, 3); }
|
||
|
|
@for $i from 1 through $grid-columns {
|
||
|
|
.col-#{$bp}-#{$i} {
|
||
|
|
flex: 0 0 percentage($i / $grid-columns);
|
||
|
|
max-width: percentage($i / $grid-columns);
|
||
|
|
padding-inline: map-get($gutters, 3);
|
||
|
|
padding-block: map-get($gutters, 3);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Flex helpers */
|
||
|
|
.flex { display: flex; }
|
||
|
|
.inline-flex { display: inline-flex; }
|
||
|
|
@each $k, $v in $flex-directions { .flex-#{$k} { display: flex; flex-direction: $v; } }
|
||
|
|
@each $k, $v in $justify-content-values { .justify-#{$k} { display: flex; justify-content: $v; } }
|
||
|
|
@each $k, $v in $align-items-values { .items-#{$k} { display: flex; align-items: $v; } }
|
||
|
|
|
||
|
|
/* Borders + Radius + Shadows */
|
||
|
|
@each $k, $v in $border-widths { .border-#{$k} { border-width: $v; border-style: solid; border-color: currentColor; } }
|
||
|
|
.border { border: 1px solid currentColor; }
|
||
|
|
.border-top { border-top: 1px solid currentColor; }
|
||
|
|
.border-right { border-right: 1px solid currentColor; }
|
||
|
|
.border-bottom { border-bottom: 1px solid currentColor; }
|
||
|
|
.border-left { border-left: 1px solid currentColor; }
|
||
|
|
|
||
|
|
@each $k, $v in $radii { .rounded-#{$k} { border-radius: $v; } }
|
||
|
|
.rounded { border-radius: map-get($radii, md); }
|
||
|
|
.rounded-top { border-top-left-radius: map-get($radii, md); border-top-right-radius: map-get($radii, md); }
|
||
|
|
.rounded-bottom { border-bottom-left-radius: map-get($radii, md); border-bottom-right-radius: map-get($radii, md); }
|
||
|
|
.rounded-left { border-top-left-radius: map-get($radii, md); border-bottom-left-radius: map-get($radii, md); }
|
||
|
|
.rounded-right { border-top-right-radius: map-get($radii, md); border-bottom-right-radius: map-get($radii, md); }
|
||
|
|
|
||
|
|
@each $k, $v in $shadows { .shadow-#{$k} { box-shadow: $v !important; } }
|
||
|
|
@each $k, $v in $drop-shadows { .drop-shadow-#{$k} { box-shadow: $v !important; } }
|
||
|
|
|
||
|
|
/* Z-Index */
|
||
|
|
.z-base { z-index: map-get($z, base); }
|
||
|
|
.z-dropdown { z-index: map-get($z, dropdown); }
|
||
|
|
.z-overlay { z-index: map-get($z, overlay); }
|
||
|
|
.z-modal { z-index: map-get($z, modal); }
|
||
|
|
.z-toast { z-index: map-get($z, toast); }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Grid System (CSS Grid Utilities) */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.grid { display: grid !important; }
|
||
|
|
.inline-grid { display: inline-grid !important; }
|
||
|
|
|
||
|
|
@for $i from 1 through 12 { .grid-cols-#{$i} { grid-template-columns: repeat($i, 1fr) !important; } }
|
||
|
|
.grid-cols-none { grid-template-columns: none !important; }
|
||
|
|
|
||
|
|
@each $bp, $width in $breakpoints {
|
||
|
|
@media (min-width: $width) {
|
||
|
|
@for $i from 1 through 12 {
|
||
|
|
.#{$bp}-grid-cols-#{$i} { grid-template-columns: repeat($i, 1fr) !important; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@for $i from 1 through 12 { .grid-rows-#{$i} { grid-template-rows: repeat($i, 1fr) !important; } }
|
||
|
|
.grid-rows-none { grid-template-rows: none !important; }
|
||
|
|
|
||
|
|
.grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) !important; }
|
||
|
|
.grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; }
|
||
|
|
.grid-auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important; }
|
||
|
|
.grid-auto-fill-sm { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important; }
|
||
|
|
.grid-auto-fill-md { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) !important; }
|
||
|
|
.grid-auto-fill-lg { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)) !important; }
|
||
|
|
|
||
|
|
.grid-align-center { align-items: center !important; justify-items: center !important; }
|
||
|
|
.grid-align-start { align-items: start !important; justify-items: start !important; }
|
||
|
|
.grid-align-end { align-items: end !important; justify-items: end !important; }
|
||
|
|
.grid-align-stretch { align-items: stretch !important; justify-items: stretch !important; }
|
||
|
|
|
||
|
|
.place-self-center { place-self: center !important; }
|
||
|
|
.place-self-start { place-self: start !important; }
|
||
|
|
.place-self-end { place-self: end !important; }
|
||
|
|
.place-self-stretch { place-self: stretch !important; }
|
||
|
|
|
||
|
|
.grid-flow-row { grid-auto-flow: row !important; }
|
||
|
|
.grid-flow-col { grid-auto-flow: column !important; }
|
||
|
|
.grid-flow-row-dense { grid-auto-flow: row dense !important; }
|
||
|
|
.grid-flow-col-dense { grid-auto-flow: column dense !important; }
|
||
|
|
|
||
|
|
/* Auto rows/cols sizing */
|
||
|
|
.grid-auto-cols-min { grid-auto-columns: min-content !important; }
|
||
|
|
.grid-auto-cols-max { grid-auto-columns: max-content !important; }
|
||
|
|
.grid-auto-cols-fr { grid-auto-columns: 1fr !important; }
|
||
|
|
.grid-auto-rows-min { grid-auto-rows: min-content !important; }
|
||
|
|
.grid-auto-rows-max { grid-auto-rows: max-content !important; }
|
||
|
|
.grid-auto-rows-fr { grid-auto-rows: 1fr !important; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Control Blueprints (shared by inputs/buttons/etc.) */
|
||
|
|
/* ========================================================================== */
|
||
|
|
@mixin control-base {
|
||
|
|
appearance: none;
|
||
|
|
border-style: map-get($control-border, style);
|
||
|
|
border-width: map-get($control-border, width);
|
||
|
|
border-color: map-get($control-colors, border);
|
||
|
|
background-color: map-get($control-colors, bg);
|
||
|
|
color: map-get($control-colors, fg);
|
||
|
|
outline: 0;
|
||
|
|
transition:
|
||
|
|
background-color map-get($timings, base) map-get($easings, in-out),
|
||
|
|
color map-get($timings, base) map-get($easings, in-out),
|
||
|
|
border-color map-get($timings, base) map-get($easings, in-out),
|
||
|
|
box-shadow map-get($timings, base) map-get($easings, in-out),
|
||
|
|
transform map-get($timings, fast) map-get($easings, out);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin control-size($size) {
|
||
|
|
$props: map-get($control-sizes, $size);
|
||
|
|
font-size: map-get($props, font-size);
|
||
|
|
line-height: map-get($props, line-height);
|
||
|
|
padding: map-get($props, py) map-get($props, px);
|
||
|
|
border-radius: map-get($props, radius);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Inputs */
|
||
|
|
.input, select, textarea {
|
||
|
|
@include control-base;
|
||
|
|
width: 100%;
|
||
|
|
&:focus {
|
||
|
|
border-color: map-get($control-colors, focus);
|
||
|
|
box-shadow: 0 0 0 3px map-get($control-colors, ring);
|
||
|
|
background-color: map-get($colors, white);
|
||
|
|
}
|
||
|
|
&:disabled {
|
||
|
|
background-color: map-get($control-colors, disabled-bg);
|
||
|
|
opacity: .6;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
&::placeholder { color: map-get($control-colors, placeholder); }
|
||
|
|
}
|
||
|
|
@each $size, $props in $control-sizes { .input-#{$size} { @include control-size($size); } }
|
||
|
|
|
||
|
|
/* Buttons */
|
||
|
|
.btn {
|
||
|
|
@include control-base;
|
||
|
|
display: inline-flex;
|
||
|
|
width: auto;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
user-select: none;
|
||
|
|
box-shadow: map-get($shadows, 1);
|
||
|
|
&:focus-visible {
|
||
|
|
border-color: map-get($control-colors, focus);
|
||
|
|
box-shadow: 0 0 0 3px map-get($control-colors, ring), map-get($shadows, 2);
|
||
|
|
}
|
||
|
|
&:active { transform: translateY(1px); box-shadow: map-get($shadows, 3); }
|
||
|
|
&:disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
|
||
|
|
}
|
||
|
|
@each $size, $props in $control-sizes { .btn-#{$size} { @include control-size($size); } }
|
||
|
|
|
||
|
|
@each $name, $color in $colors {
|
||
|
|
.btn-#{$name} {
|
||
|
|
background-color: $color;
|
||
|
|
color: if(lightness($color) > 60%, map-get($colors, dark), map-get($colors, white));
|
||
|
|
border-color: transparent;
|
||
|
|
&:hover { background-color: darken($color, 8%); box-shadow: map-get($shadows, 2); }
|
||
|
|
}
|
||
|
|
.btn-outline-#{$name} {
|
||
|
|
background-color: transparent;
|
||
|
|
color: $color;
|
||
|
|
border-color: $color;
|
||
|
|
&:hover { background-color: $color; color: if(lightness($color) > 60%, map-get($colors, dark), map-get($colors, white)); }
|
||
|
|
}
|
||
|
|
.btn-ghost-#{$name} {
|
||
|
|
background-color: transparent;
|
||
|
|
color: $color;
|
||
|
|
border-color: transparent;
|
||
|
|
&:hover { background-color: rgba($color, .12); }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Alerts */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.alert {
|
||
|
|
padding: map-get($space, 2) map-get($space, 3);
|
||
|
|
border-radius: map-get($radii, md);
|
||
|
|
border: 1px solid map-get($control-colors, border);
|
||
|
|
background: map-get($colors, accent-white);
|
||
|
|
}
|
||
|
|
@each $name, $color in $colors {
|
||
|
|
.alert-#{$name} {
|
||
|
|
background: mix($color, map-get($colors, white), 12%);
|
||
|
|
border-color: $color;
|
||
|
|
color: if(lightness($color) > 60%, map-get($colors, dark), map-get($colors, dark));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Cards (with custom borders and shadows) */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.card {
|
||
|
|
background: map-get($colors, white);
|
||
|
|
border: 1px solid map-get($control-colors, border);
|
||
|
|
border-radius: map-get($radii, lg);
|
||
|
|
box-shadow: map-get($shadows, 1);
|
||
|
|
transition: box-shadow map-get($timings, base) map-get($easings, in-out);
|
||
|
|
}
|
||
|
|
.card-hover:hover { box-shadow: map-get($shadows, 3); }
|
||
|
|
|
||
|
|
@each $k, $v in $shadows { .card-shadow-#{$k} { box-shadow: $v; } }
|
||
|
|
@each $name, $color in $colors {
|
||
|
|
.card-border-#{$name} { border-color: $color; }
|
||
|
|
.card-bg-#{$name} { background-color: $color; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Modals */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.modal {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
display: none;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: map-get($space, 3);
|
||
|
|
z-index: map-get($z, modal);
|
||
|
|
}
|
||
|
|
.modal.open { display: flex; }
|
||
|
|
|
||
|
|
.modal__overlay { position: absolute; inset: 0; background: rgba(map-get($colors, black), .5); }
|
||
|
|
|
||
|
|
.modal__dialog {
|
||
|
|
position: relative;
|
||
|
|
width: min(720px, 100%);
|
||
|
|
background: map-get($colors, white);
|
||
|
|
border: 1px solid map-get($control-colors, border);
|
||
|
|
border-radius: map-get($radii, lg);
|
||
|
|
box-shadow: map-get($shadows, 5);
|
||
|
|
padding: map-get($space, 3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: map-get($space, 2); margin-bottom: map-get($space, 2); }
|
||
|
|
.modal__title { font-size: map-get($font-sizes, lg); font-weight: map-get($font-weights, semibold); }
|
||
|
|
.modal__close { @extend .btn; @extend .btn-sm; background: transparent; box-shadow: none; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Pills */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.pill {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: map-get($space, 1);
|
||
|
|
padding: map-get($space, 1) map-get($space, 2);
|
||
|
|
border-radius: map-get($radii, full);
|
||
|
|
border: 1px solid map-get($control-colors, border);
|
||
|
|
background: map-get($colors, accent-white);
|
||
|
|
font-size: map-get($font-sizes, sm);
|
||
|
|
line-height: map-get($line-heights, normal);
|
||
|
|
}
|
||
|
|
@each $name, $color in $colors {
|
||
|
|
.pill-#{$name} {
|
||
|
|
background: mix($color, map-get($colors, white), 12%);
|
||
|
|
color: if(lightness($color) > 60%, map-get($colors, dark), map-get($colors, white));
|
||
|
|
border-color: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Accordions */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.accordion { border: 1px solid map-get($control-colors, border); border-radius: map-get($radii, lg); overflow: hidden; }
|
||
|
|
.accordion__item + .accordion__item { border-top: 1px solid map-get($control-colors, border); }
|
||
|
|
|
||
|
|
.accordion__header {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: map-get($space, 2);
|
||
|
|
padding: map-get($space, 2) map-get($space, 3);
|
||
|
|
cursor: pointer;
|
||
|
|
background: map-get($colors, accent-white);
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
.accordion__title { font-weight: map-get($font-weights, medium); }
|
||
|
|
.accordion__icon { transition: transform map-get($timings, base) map-get($easings, in-out); }
|
||
|
|
|
||
|
|
.accordion__panel {
|
||
|
|
display: grid;
|
||
|
|
grid-template-rows: 0fr;
|
||
|
|
transition: grid-template-rows map-get($timings, base) map-get($easings, in-out);
|
||
|
|
}
|
||
|
|
.accordion__content { overflow: hidden; padding: 0 map-get($space, 3); }
|
||
|
|
|
||
|
|
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
|
||
|
|
.accordion__item.is-open .accordion__content { padding: map-get($space, 2) map-get($space, 3) map-get($space, 3); }
|
||
|
|
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Stack Utilities */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.stack > * + * { margin-top: map-get($space, 3); }
|
||
|
|
@each $k, $v in $space { .stack-#{$k} > * + * { margin-top: $v; } }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Transitions & Animations */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.transition-all { transition: all map-get($timings, base) map-get($easings, in-out); }
|
||
|
|
.transition-fast { transition-duration: map-get($timings, fast); }
|
||
|
|
.transition-slow { transition-duration: map-get($timings, slow); }
|
||
|
|
|
||
|
|
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
|
||
|
|
@keyframes slide-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
||
|
|
|
||
|
|
.animate-fade-in { animation: fade-in .3s map-get($easings, out) both; }
|
||
|
|
.animate-slide-up { animation: slide-up .35s map-get($easings, out) both; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Tooltips */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.tooltip { position: relative; display: inline-block; cursor: help; }
|
||
|
|
.tooltip::after {
|
||
|
|
content: attr(data-tip);
|
||
|
|
position: absolute;
|
||
|
|
bottom: calc(100% + 6px);
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: map-get($colors, dark);
|
||
|
|
color: map-get($colors, white);
|
||
|
|
padding: .25rem .5rem;
|
||
|
|
font-size: map-get($font-sizes, sm);
|
||
|
|
border-radius: map-get($radii, sm);
|
||
|
|
white-space: nowrap;
|
||
|
|
opacity: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
transition: opacity map-get($timings, base) map-get($easings, in-out);
|
||
|
|
z-index: map-get($z, dropdown);
|
||
|
|
}
|
||
|
|
.tooltip:hover::after { opacity: 1; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Tabs */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.tabs { display: flex; gap: map-get($space, 2); border-bottom: 1px solid map-get($control-colors, border); }
|
||
|
|
.tab {
|
||
|
|
padding: map-get($space, 2) map-get($space, 3);
|
||
|
|
cursor: pointer;
|
||
|
|
border-bottom: 2px solid transparent;
|
||
|
|
transition:
|
||
|
|
border-color map-get($timings, base) map-get($easings, in-out),
|
||
|
|
color map-get($timings, base) map-get($easings, in-out);
|
||
|
|
}
|
||
|
|
.tab.active { border-color: map-get($colors, primary); color: map-get($colors, primary); }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Transform & Scale Utilities */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.scale-90 { transform: scale(.9); }
|
||
|
|
.scale-95 { transform: scale(.95); }
|
||
|
|
.scale-100 { transform: scale(1); }
|
||
|
|
.scale-105 { transform: scale(1.05); }
|
||
|
|
.scale-110 { transform: scale(1.1); }
|
||
|
|
|
||
|
|
.rotate-90 { transform: rotate(90deg); }
|
||
|
|
.rotate-180 { transform: rotate(180deg); }
|
||
|
|
.rotate-270 { transform: rotate(270deg); }
|
||
|
|
|
||
|
|
.skew-x-6 { transform: skewX(6deg); }
|
||
|
|
.skew-y-6 { transform: skewY(6deg); }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Shadow, Blur, and Glow Utilities */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.shadow-none { box-shadow: none !important; }
|
||
|
|
.blur-sm { filter: blur(2px); }
|
||
|
|
.blur-md { filter: blur(4px); }
|
||
|
|
.blur-lg { filter: blur(8px); }
|
||
|
|
.glow { box-shadow: 0 0 12px rgba(map-get($colors, accent), .5); }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Dark Mode (opt-in via .theme-dark) */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.theme-dark { background: map-get($colors, dark); color: map-get($colors, light); }
|
||
|
|
.theme-dark .card,
|
||
|
|
.theme-dark .modal__dialog {
|
||
|
|
background: map-get($colors, secondary);
|
||
|
|
border-color: map-get($colors, muted);
|
||
|
|
color: map-get($colors, light);
|
||
|
|
}
|
||
|
|
.theme-dark .input,
|
||
|
|
.theme-dark select,
|
||
|
|
.theme-dark textarea {
|
||
|
|
background: map-get($colors, secondary);
|
||
|
|
color: map-get($colors, light);
|
||
|
|
border-color: map-get($colors, muted);
|
||
|
|
}
|
||
|
|
.theme-dark .tabs { border-bottom-color: map-get($colors, muted); }
|
||
|
|
.theme-dark .tab.active { border-color: map-get($colors, primary); color: map-get($colors, primary); }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Scroll Utilities */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.scroll-y { overflow-y: auto !important; }
|
||
|
|
.scroll-x { overflow-x: auto !important; }
|
||
|
|
.scroll-hidden { overflow: hidden !important; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Spinner */
|
||
|
|
/* ========================================================================== */
|
||
|
|
@keyframes ui-spinner { to { transform: rotate(360deg); } }
|
||
|
|
|
||
|
|
.spinner {
|
||
|
|
display: inline-block;
|
||
|
|
width: 1rem;
|
||
|
|
height: 1rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
border-style: solid;
|
||
|
|
border-width: 2px;
|
||
|
|
border-color: map-get($colors, dark);
|
||
|
|
border-left-color: transparent !important;
|
||
|
|
animation: ui-spinner 1s linear infinite;
|
||
|
|
}
|
||
|
|
@each $name, $color in $colors {
|
||
|
|
.spinner-#{$name} { border-color: $color; border-left-color: transparent !important; }
|
||
|
|
}
|
||
|
|
.spinner-sm { width: .875rem; height: .875rem; border-width: 2px; }
|
||
|
|
.spinner-md { width: 1.25rem; height: 1.25rem; border-width: 2px; }
|
||
|
|
.spinner-lg { width: 1.75rem; height: 1.75rem; border-width: 3px; }
|
||
|
|
.spinner-xl { width: 2.25rem; height: 2.25rem; border-width: 4px; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Visibility + Accessibility */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.visible { visibility: visible !important; }
|
||
|
|
.invisible { visibility: hidden !important; }
|
||
|
|
|
||
|
|
.sr-only {
|
||
|
|
position: absolute !important;
|
||
|
|
width: 1px !important;
|
||
|
|
height: 1px !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
margin: -1px !important;
|
||
|
|
overflow: hidden !important;
|
||
|
|
clip: rect(0, 0, 0, 0) !important;
|
||
|
|
white-space: nowrap !important;
|
||
|
|
border: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Overflow + Text Truncation */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.overflow-hidden { overflow: hidden !important; }
|
||
|
|
.overflow-auto { overflow: auto !important; }
|
||
|
|
.overflow-scroll { overflow: scroll !important; }
|
||
|
|
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Opacity */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.opacity-0 { opacity: 0; }
|
||
|
|
.opacity-25 { opacity: .25; }
|
||
|
|
.opacity-50 { opacity: .5; }
|
||
|
|
.opacity-75 { opacity: .75; }
|
||
|
|
.opacity-100 { opacity: 1; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Cursor + Pointer Events */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.cursor-default { cursor: default !important; }
|
||
|
|
.cursor-pointer { cursor: pointer !important; }
|
||
|
|
.cursor-not-allowed { cursor: not-allowed !important; }
|
||
|
|
.pointer-none { pointer-events: none !important; }
|
||
|
|
.pointer-auto { pointer-events: auto !important; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Position + Inset */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.relative { position: relative !important; }
|
||
|
|
.absolute { position: absolute !important; }
|
||
|
|
.fixed { position: fixed !important; }
|
||
|
|
.sticky { position: sticky !important; }
|
||
|
|
|
||
|
|
.inset-0 { inset: 0 !important; }
|
||
|
|
.top-0 { top: 0 !important; }
|
||
|
|
.right-0 { right: 0 !important; }
|
||
|
|
.bottom-0 { bottom: 0 !important; }
|
||
|
|
.left-0 { left: 0 !important; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Flex Wrapping + Gap */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.wrap { flex-wrap: wrap !important; }
|
||
|
|
.nowrap { flex-wrap: nowrap !important; }
|
||
|
|
.wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||
|
|
|
||
|
|
@each $k, $v in $space {
|
||
|
|
.gap-#{$k} { gap: $v !important; }
|
||
|
|
.row-gap-#{$k} { row-gap: $v !important; }
|
||
|
|
.col-gap-#{$k} { column-gap: $v !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Responsive Reverse (small-down) */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.sm-reverse {
|
||
|
|
@media (max-width: map-get($breakpoints, md)) {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column-reverse;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Aspect Ratios + Object Fit */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.ratio { position: relative; width: 100%; height: 0; overflow: hidden; }
|
||
|
|
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||
|
|
|
||
|
|
.ratio-16x9 { padding-bottom: 56.25%; }
|
||
|
|
.ratio-4x3 { padding-bottom: 75%; }
|
||
|
|
.ratio-1x1 { padding-bottom: 100%; }
|
||
|
|
|
||
|
|
.object-contain { object-fit: contain !important; }
|
||
|
|
.object-cover { object-fit: cover !important; }
|
||
|
|
.object-fill { object-fit: fill !important; }
|
||
|
|
.object-none { object-fit: none !important; }
|
||
|
|
.object-scale-down { object-fit: scale-down !important; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Hover Motion Helpers */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.hover-raise { transition: transform map-get($timings, base) map-get($easings, in-out), box-shadow map-get($timings, base) map-get($easings, in-out); }
|
||
|
|
.hover-raise:hover { transform: translateY(-2px); box-shadow: map-get($shadows, 2); }
|
||
|
|
|
||
|
|
.hover-glow { transition: box-shadow map-get($timings, base) map-get($easings, in-out); }
|
||
|
|
.hover-glow:hover { box-shadow: 0 0 0 3px map-get($control-colors, ring), map-get($shadows, 2); }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Divider Utilities */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.hr { width: 100%; height: 1px; background: map-get($control-colors, border); border: 0; }
|
||
|
|
.hr-dashed { height: 1px; border-top: 1px dashed map-get($control-colors, border); background: transparent; }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Utility Badges (aliases of pills) */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.badge { @extend .pill; }
|
||
|
|
@each $name, $color in $colors { .badge-#{$name} { @extend .pill-#{$name}; } }
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Quick Utility Aliases */
|
||
|
|
/* ========================================================================== */
|
||
|
|
.rel { position: relative; }
|
||
|
|
.no-click { pointer-events: none; }
|
||
|
|
.center { display: grid; place-items: center; }
|
||
|
|
.full-height { height: 100vh; }
|
||
|
|
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* Flex Grid Extensions */
|
||
|
|
/* ========================================================================== */
|
||
|
|
|
||
|
|
.row.no-gutter {
|
||
|
|
margin-inline: 0;
|
||
|
|
margin-block: 0;
|
||
|
|
|
||
|
|
> .col,
|
||
|
|
> [class^="col-"] {
|
||
|
|
padding-inline: 0;
|
||
|
|
padding-block: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.row.gx-0 {
|
||
|
|
margin-right: 0;
|
||
|
|
margin-left: 0;
|
||
|
|
|
||
|
|
> .col,
|
||
|
|
> [class^="col-"] {
|
||
|
|
padding-right: 0;
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.row.gy-0 {
|
||
|
|
margin-top: 0;
|
||
|
|
margin-bottom: 0;
|
||
|
|
|
||
|
|
> .col,
|
||
|
|
> [class^="col-"] {
|
||
|
|
padding-top: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-bleed {
|
||
|
|
margin-right: calc(#{$container-padding} * -1);
|
||
|
|
margin-left: calc(#{$container-padding} * -1);
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $bp, $width in $breakpoints {
|
||
|
|
@media (min-width: $width) {
|
||
|
|
.#{$bp}-row-center { justify-content: center; }
|
||
|
|
.#{$bp}-row-between { justify-content: space-between; }
|
||
|
|
.#{$bp}-row-around { justify-content: space-around; }
|
||
|
|
.#{$bp}-row-evenly { justify-content: space-evenly; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ========================================================================== */
|
||
|
|
/* CSS Grid Enhancements */
|
||
|
|
/* ========================================================================== */
|
||
|
|
|
||
|
|
@for $i from 1 through 12 {
|
||
|
|
.grid-cols-#{$i} { grid-template-columns: repeat($i, 1fr) !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-cols-none { grid-template-columns: none !important; }
|
||
|
|
|
||
|
|
@for $i from 1 through 12 {
|
||
|
|
.grid-rows-#{$i} { grid-template-rows: repeat($i, 1fr) !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-rows-none { grid-template-rows: none !important; }
|
||
|
|
|
||
|
|
.grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) !important; }
|
||
|
|
.grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; }
|
||
|
|
.grid-auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important; }
|
||
|
|
|
||
|
|
.grid-auto-fill-sm { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important; }
|
||
|
|
.grid-auto-fill-md { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) !important; }
|
||
|
|
.grid-auto-fill-lg { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)) !important; }
|
||
|
|
|
||
|
|
.grid-align-center { align-items: center !important; justify-items: center !important; }
|
||
|
|
.grid-align-start { align-items: start !important; justify-items: start !important; }
|
||
|
|
.grid-align-end { align-items: end !important; justify-items: end !important; }
|
||
|
|
.grid-align-stretch { align-items: stretch !important; justify-items: stretch !important; }
|
||
|
|
|
||
|
|
.grid-flow-row { grid-auto-flow: row !important; }
|
||
|
|
.grid-flow-col { grid-auto-flow: column !important; }
|
||
|
|
.grid-flow-row-dense { grid-auto-flow: row dense !important; }
|
||
|
|
.grid-flow-col-dense { grid-auto-flow: column dense !important; }
|