1082 lines
28 KiB
SCSS
1082 lines
28 KiB
SCSS
|
/* main.scss (drop-in)
|
||
|
|
VOR Core (base + utilities + components)
|
||
|
|
- No patterns/presets here (those belong in template/components later)
|
||
|
|
- Token-driven (variables.scss is the contract)
|
||
|
|
*/
|
||
|
|
@use "sass:math";
|
||
|
|
@use "sass:map";
|
||
|
|
@use "sass:color";
|
||
|
|
@use "./palette" as *;
|
||
|
|
@use "./variables" as *;
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Base reset
|
||
|
|
-------------------------------------------- */
|
||
|
|
*,
|
||
|
|
*::before,
|
||
|
|
*::after { box-sizing: border-box; }
|
||
|
|
|
||
|
|
html {
|
||
|
|
font-family: $font-family-sans;
|
||
|
|
line-height: $line-height-base;
|
||
|
|
-webkit-text-size-adjust: 100%;
|
||
|
|
-moz-tab-size: 4;
|
||
|
|
tab-size: 4;
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
font-size: map.get($font-sizes, "body");
|
||
|
|
font-weight: $weight-normal;
|
||
|
|
color: $text-main;
|
||
|
|
background-color: $bg-app;
|
||
|
|
transition: background-color $duration-base $standard, color $duration-base $standard;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Media defaults */
|
||
|
|
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
|
||
|
|
|
||
|
|
/* Links */
|
||
|
|
a { color: inherit; }
|
||
|
|
a:hover { text-decoration: none; }
|
||
|
|
|
||
|
|
/* Accessible focus (default; components can override) */
|
||
|
|
:focus-visible { outline: none; }
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Token helpers
|
||
|
|
-------------------------------------------- */
|
||
|
|
.bg-app { background-color: $bg-app !important; }
|
||
|
|
.bg-surface { background-color: $bg-surface !important; }
|
||
|
|
.bg-card { background-color: $bg-card !important; }
|
||
|
|
|
||
|
|
.text-main { color: $text-main !important; }
|
||
|
|
.text-muted { color: $text-muted !important; }
|
||
|
|
.text-light { color: $text-light !important; }
|
||
|
|
.text-inverse { color: $text-inverse !important; }
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Containers / Grid (gutter via CSS vars)
|
||
|
|
-------------------------------------------- */
|
||
|
|
:root { --gutter-x: #{$grid-gutter-width}; --gutter-y: 0; }
|
||
|
|
|
||
|
|
.container,
|
||
|
|
.container-fluid {
|
||
|
|
width: 100%;
|
||
|
|
padding-right: math.div($grid-gutter-width, 2);
|
||
|
|
padding-left: math.div($grid-gutter-width, 2);
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $br-name, $br-value in $breakpoints {
|
||
|
|
@if $br-name != "xs" {
|
||
|
|
@media (min-width: $br-value) {
|
||
|
|
.container {
|
||
|
|
max-width: map.get($container-max-widths, $br-name);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.row {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
/* row controls gutters */
|
||
|
|
--gutter-x: #{$grid-gutter-width};
|
||
|
|
--gutter-y: 0;
|
||
|
|
|
||
|
|
margin-top: calc(var(--gutter-y) * -1);
|
||
|
|
margin-right: calc(var(--gutter-x) / -2);
|
||
|
|
margin-left: calc(var(--gutter-x) / -2);
|
||
|
|
|
||
|
|
& > * {
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
padding-right: calc(var(--gutter-x) / 2);
|
||
|
|
padding-left: calc(var(--gutter-x) / 2);
|
||
|
|
margin-top: var(--gutter-y);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-wrap {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 14px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* gutter utilities */
|
||
|
|
.g-0 { --gutter-x: 0; --gutter-y: 0; }
|
||
|
|
.gx-0 { --gutter-x: 0; }
|
||
|
|
.gy-0 { --gutter-y: 0; }
|
||
|
|
|
||
|
|
/* IMPORTANT: no @extend across media queries */
|
||
|
|
@mixin col-base() {
|
||
|
|
width: 100%;
|
||
|
|
padding-right: calc(var(--gutter-x) / 2);
|
||
|
|
padding-left: calc(var(--gutter-x) / 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $br-name, $br-value in $breakpoints {
|
||
|
|
@media (min-width: $br-value) {
|
||
|
|
$infix: if($br-name == "xs", "", "-#{$br-name}");
|
||
|
|
|
||
|
|
@for $i from 1 through $grid-columns {
|
||
|
|
.col#{$infix}-#{$i} {
|
||
|
|
@include col-base();
|
||
|
|
flex: 0 0 auto;
|
||
|
|
width: percentage(math.div($i, $grid-columns));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.col#{$infix} {
|
||
|
|
@include col-base();
|
||
|
|
flex: 1 0 0%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col#{$infix}-auto {
|
||
|
|
@include col-base();
|
||
|
|
flex: 0 0 auto;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Display / Flex utilities
|
||
|
|
-------------------------------------------- */
|
||
|
|
@each $br-name, $br-value in $breakpoints {
|
||
|
|
@media (min-width: $br-value) {
|
||
|
|
$infix: if($br-name == "xs", "", "-#{$br-name}");
|
||
|
|
|
||
|
|
@each $prop in $display-values {
|
||
|
|
.d#{$infix}-#{$prop} { display: $prop !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $key, $val in $justify-content {
|
||
|
|
.justify#{$infix}-#{$key} { justify-content: $val !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $key, $val in $align-items {
|
||
|
|
.align#{$infix}-#{$key} { align-items: $val !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $dir in $flex-directions {
|
||
|
|
.flex#{$infix}-#{$dir} { flex-direction: $dir !important; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Convenience */
|
||
|
|
.flex-column { flex-direction: column !important; }
|
||
|
|
.mt-auto { margin-top: auto !important; }
|
||
|
|
.min-w-0 { min-width: 0 !important; }
|
||
|
|
.w-100 { width: 100% !important; }
|
||
|
|
.h-100 { height: 100% !important; }
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Spacing utilities (generator)
|
||
|
|
-------------------------------------------- */
|
||
|
|
@each $br-name, $br-value in $breakpoints {
|
||
|
|
@media (min-width: $br-value) {
|
||
|
|
$infix: if($br-name == "xs", "", "-#{$br-name}");
|
||
|
|
|
||
|
|
@each $prop-key, $prop-val in $spacing-properties {
|
||
|
|
@each $side-key, $side-val in $spacing-sides {
|
||
|
|
@each $size-key, $size-val in $spacers {
|
||
|
|
.#{$prop-key}#{$side-key}#{$infix}-#{$size-key} {
|
||
|
|
@if type-of($side-val) == "list" {
|
||
|
|
@each $side in $side-val { #{$prop-val}-#{$side}: $size-val !important; }
|
||
|
|
} @else if $side-val == "" {
|
||
|
|
#{$prop-val}: $size-val !important;
|
||
|
|
} @else {
|
||
|
|
#{$prop-val}-#{$side-val}: $size-val !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Classic alias set (p-0 / px-4 / etc) + gap */
|
||
|
|
@each $k, $v in $spacers {
|
||
|
|
.m-#{$k} { margin: $v !important; }
|
||
|
|
.mx-#{$k} { margin-left: $v !important; margin-right: $v !important; }
|
||
|
|
.my-#{$k} { margin-top: $v !important; margin-bottom: $v !important; }
|
||
|
|
.mt-#{$k} { margin-top: $v !important; }
|
||
|
|
.mb-#{$k} { margin-bottom: $v !important; }
|
||
|
|
.ml-#{$k} { margin-left: $v !important; }
|
||
|
|
.mr-#{$k} { margin-right: $v !important; }
|
||
|
|
|
||
|
|
.p-#{$k} { padding: $v !important; }
|
||
|
|
.px-#{$k} { padding-left: $v !important; padding-right: $v !important; }
|
||
|
|
.py-#{$k} { padding-top: $v !important; padding-bottom: $v !important; }
|
||
|
|
.pt-#{$k} { padding-top: $v !important; }
|
||
|
|
.pb-#{$k} { padding-bottom: $v !important; }
|
||
|
|
.pl-#{$k} { padding-left: $v !important; }
|
||
|
|
.pr-#{$k} { padding-right: $v !important; }
|
||
|
|
|
||
|
|
.gap-#{$k} { gap: $v !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Sizing utilities + responsive widths/heights
|
||
|
|
-------------------------------------------- */
|
||
|
|
@each $key, $val in $sizes {
|
||
|
|
.w-#{$key} { width: $val !important; }
|
||
|
|
.h-#{$key} { height: $val !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $br-name, $br-value in $breakpoints {
|
||
|
|
@media (min-width: $br-value) {
|
||
|
|
$infix: if($br-name == "xs", "", "-#{$br-name}");
|
||
|
|
@each $key, $val in $sizes {
|
||
|
|
.w#{$infix}-#{$key} { width: $val !important; }
|
||
|
|
.h#{$infix}-#{$key} { height: $val !important; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Typography utilities
|
||
|
|
-------------------------------------------- */
|
||
|
|
@each $key, $val in $font-sizes { .#{$key} { font-size: $val !important; } }
|
||
|
|
|
||
|
|
.text-center { text-align: center !important; }
|
||
|
|
.text-right { text-align: right !important; }
|
||
|
|
.text-left { text-align: left !important; }
|
||
|
|
|
||
|
|
.font-weight-light { font-weight: $weight-light !important; }
|
||
|
|
.font-weight-normal { font-weight: $weight-normal !important; }
|
||
|
|
.font-weight-medium { font-weight: $weight-medium !important; }
|
||
|
|
.font-weight-bold { font-weight: $weight-bold !important; }
|
||
|
|
|
||
|
|
.text-decoration-none { text-decoration: none !important; }
|
||
|
|
.text-uppercase { text-transform: uppercase !important; }
|
||
|
|
|
||
|
|
code {
|
||
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||
|
|
font-size: 0.95em;
|
||
|
|
padding: 0.12em 0.35em;
|
||
|
|
border-radius: $radius-sm;
|
||
|
|
background: rgba(var(--primary-rgb), 0.10);
|
||
|
|
border: 1px solid rgba(var(--primary-rgb), 0.14);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Border helpers
|
||
|
|
-------------------------------------------- */
|
||
|
|
.border { border: 1px solid $border-color !important; }
|
||
|
|
.border-top { border-top: 1px solid $border-color !important; }
|
||
|
|
.border-bottom { border-bottom: 1px solid $border-color !important; }
|
||
|
|
.border-left { border-left: 1px solid $border-color !important; }
|
||
|
|
.border-right { border-right: 1px solid $border-color !important; }
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Radius helpers
|
||
|
|
-------------------------------------------- */
|
||
|
|
.rounded { border-radius: $radius-md !important; }
|
||
|
|
.rounded-sm { border-radius: $radius-sm !important; }
|
||
|
|
.rounded-lg { border-radius: $radius-lg !important; }
|
||
|
|
.rounded-pill { border-radius: $radius-pill !important; }
|
||
|
|
.rounded-none { border-radius: $radius-none !important; }
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Elevation helpers
|
||
|
|
-------------------------------------------- */
|
||
|
|
@each $key, $val in $elevation { .elevation-#{$key} { box-shadow: $val !important; } }
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Z-index utilities
|
||
|
|
-------------------------------------------- */
|
||
|
|
@each $key, $val in $z-index { .z-#{$key} { z-index: $val !important; } }
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Visibility / overflow helpers
|
||
|
|
-------------------------------------------- */
|
||
|
|
.opacity-0 { opacity: 0 !important; }
|
||
|
|
.opacity-50 { opacity: 0.5 !important; }
|
||
|
|
.opacity-100 { opacity: 1 !important; }
|
||
|
|
|
||
|
|
.overflow-hidden { overflow: hidden !important; }
|
||
|
|
.overflow-auto { overflow: auto !important; }
|
||
|
|
|
||
|
|
.cursor-pointer { cursor: pointer !important; }
|
||
|
|
.user-select-none { user-select: none !important; }
|
||
|
|
.is-hidden { display: none !important; }
|
||
|
|
.lock-scroll { overflow: hidden !important; }
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Media helpers
|
||
|
|
-------------------------------------------- */
|
||
|
|
.img-fluid { max-width: 100%; height: auto; }
|
||
|
|
@each $fit in $object-fits { .object-#{$fit} { object-fit: $fit !important; } }
|
||
|
|
|
||
|
|
@each $key, $val in $aspect-ratios {
|
||
|
|
.ratio-#{$key} {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
&::before { display: block; content: ""; padding-top: $val; }
|
||
|
|
> * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Color utilities + Buttons + Alerts
|
||
|
|
-------------------------------------------- */
|
||
|
|
@each $color-name, $shades in $colors {
|
||
|
|
$base: map.get($shades, 600);
|
||
|
|
$light: map.get($shades, 100);
|
||
|
|
$soft-border: map.get($shades, 200);
|
||
|
|
$dark: map.get($shades, 900);
|
||
|
|
$text-strong: map.get($shades, 800);
|
||
|
|
|
||
|
|
.text-#{$color-name} { color: $base !important; }
|
||
|
|
.bg-#{$color-name} { background-color: $base !important; }
|
||
|
|
.bg-#{$color-name}-light { background-color: $light !important; }
|
||
|
|
|
||
|
|
@each $shade-level, $color-value in $shades {
|
||
|
|
.text-#{$color-name}-#{$shade-level} { color: $color-value !important; }
|
||
|
|
.bg-#{$color-name}-#{$shade-level} { background-color: $color-value !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Solid button */
|
||
|
|
.btn-#{$color-name} {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: map.get($spacers, 2);
|
||
|
|
padding: $input-padding-y $input-padding-x;
|
||
|
|
font-weight: $weight-medium;
|
||
|
|
border-radius: $radius-md;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: $base;
|
||
|
|
color: $white;
|
||
|
|
transition:
|
||
|
|
background-color $duration-fast $standard,
|
||
|
|
box-shadow $duration-base $standard,
|
||
|
|
transform $duration-base $standard,
|
||
|
|
filter $duration-fast $standard;
|
||
|
|
|
||
|
|
&:hover { filter: brightness($hover-brightness); box-shadow: map.get($elevation, 2); transform: $hover-lift; }
|
||
|
|
&:active { filter: brightness($active-brightness); transform: translateY(0); }
|
||
|
|
&:focus { outline: none; }
|
||
|
|
&:focus-visible { box-shadow: 0 0 0 $focus-ring-width $focus-ring-color, map.get($elevation, 2); }
|
||
|
|
|
||
|
|
&:disabled, &.is-disabled {
|
||
|
|
opacity: 0.6;
|
||
|
|
cursor: not-allowed;
|
||
|
|
pointer-events: none;
|
||
|
|
box-shadow: none;
|
||
|
|
transform: none;
|
||
|
|
filter: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Light button */
|
||
|
|
.btn-#{$color-name}-light {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: map.get($spacers, 2);
|
||
|
|
padding: $input-padding-y $input-padding-x;
|
||
|
|
font-weight: $weight-medium;
|
||
|
|
border-radius: $radius-md;
|
||
|
|
border: 1px solid $soft-border;
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: $light;
|
||
|
|
color: $text-strong;
|
||
|
|
transition:
|
||
|
|
background-color $duration-fast $standard,
|
||
|
|
box-shadow $duration-base $standard,
|
||
|
|
transform $duration-base $standard;
|
||
|
|
|
||
|
|
&:hover { background-color: map.get($shades, 200); box-shadow: map.get($elevation, 1); transform: translateY(-1px); }
|
||
|
|
&:active { background-color: map.get($shades, 300); transform: translateY(0); }
|
||
|
|
&:focus { outline: none; }
|
||
|
|
&:focus-visible { box-shadow: 0 0 0 $focus-ring-width $focus-ring-color, map.get($elevation, 1); }
|
||
|
|
|
||
|
|
&:disabled, &.is-disabled {
|
||
|
|
opacity: 0.6;
|
||
|
|
cursor: not-allowed;
|
||
|
|
pointer-events: none;
|
||
|
|
box-shadow: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Alerts */
|
||
|
|
.alert-#{$color-name} {
|
||
|
|
padding: $spacer;
|
||
|
|
border-radius: $radius-md;
|
||
|
|
background-color: $light;
|
||
|
|
color: $dark;
|
||
|
|
border: 1px solid $soft-border;
|
||
|
|
margin-bottom: $spacer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Button size modifiers */
|
||
|
|
.btn-sm {
|
||
|
|
padding: math.div($input-padding-y, 1.4) math.div($input-padding-x, 1.4) !important;
|
||
|
|
font-size: map.get($font-sizes, "small") !important;
|
||
|
|
border-radius: $radius-sm !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-lg {
|
||
|
|
padding: map.get($spacers, 3) map.get($spacers, 4) !important;
|
||
|
|
font-size: map.get($font-sizes, "body") !important;
|
||
|
|
border-radius: $radius-lg !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Cards / Surfaces
|
||
|
|
-------------------------------------------- */
|
||
|
|
.card {
|
||
|
|
background-color: $bg-card;
|
||
|
|
border: $card-border-width solid $border-color;
|
||
|
|
border-radius: $card-border-radius;
|
||
|
|
padding: $card-padding;
|
||
|
|
box-shadow: map.get($elevation, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card.hoverable {
|
||
|
|
transition: box-shadow $duration-slow $standard, transform $duration-slow $standard;
|
||
|
|
&:hover { box-shadow: $hover-shadow; transform: $hover-lift; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-soft {
|
||
|
|
background-color: $bg-surface;
|
||
|
|
border: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Forms (inputs/selects/textarea/checkbox/radio)
|
||
|
|
-------------------------------------------- */
|
||
|
|
.form-group { margin-bottom: map.get($spacers, 3); }
|
||
|
|
|
||
|
|
.label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: $label-margin-bottom;
|
||
|
|
font-size: $label-font-size;
|
||
|
|
font-weight: $label-font-weight;
|
||
|
|
color: $text-muted;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin input-base($height: $input-height) {
|
||
|
|
width: 100%;
|
||
|
|
height: $height;
|
||
|
|
padding: $input-padding-y $input-padding-x;
|
||
|
|
background-color: $bg-surface;
|
||
|
|
border: 1px solid $border-color;
|
||
|
|
border-radius: $radius-sm;
|
||
|
|
color: $text-main;
|
||
|
|
transition: border-color $duration-fast $standard, box-shadow $duration-fast $standard, background-color $duration-fast $standard;
|
||
|
|
|
||
|
|
&:focus { outline: none; border-color: var(--primary); }
|
||
|
|
&:focus-visible { box-shadow: 0 0 0 $focus-ring-width $focus-ring-color; }
|
||
|
|
&::placeholder { color: $text-light; }
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
opacity: 0.7;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.input { @include input-base($input-height); }
|
||
|
|
.input-sm { @include input-base($input-height-sm); font-size: map.get($font-sizes, "small"); }
|
||
|
|
.input-lg { @include input-base($input-height-lg); font-size: map.get($font-sizes, "body"); }
|
||
|
|
|
||
|
|
.textarea {
|
||
|
|
@include input-base($input-height-lg);
|
||
|
|
height: auto;
|
||
|
|
min-height: 120px;
|
||
|
|
resize: vertical;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select {
|
||
|
|
@include input-base($input-height);
|
||
|
|
appearance: none;
|
||
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: right $input-padding-x center;
|
||
|
|
background-size: 16px 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="dark"] .select {
|
||
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-group {
|
||
|
|
display: flex;
|
||
|
|
align-items: stretch;
|
||
|
|
|
||
|
|
.input, .select {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
[class^="btn-"], .btn {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Checkbox / radio */
|
||
|
|
.check {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: map.get($spacers, 2);
|
||
|
|
cursor: pointer;
|
||
|
|
user-select: none;
|
||
|
|
color: $text-main;
|
||
|
|
|
||
|
|
input {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
margin: 0;
|
||
|
|
accent-color: var(--primary);
|
||
|
|
|
||
|
|
&:focus-visible {
|
||
|
|
outline: none;
|
||
|
|
box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
|
||
|
|
border-radius: $radius-sm;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.check-label { color: $text-muted; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Tables (token-driven)
|
||
|
|
-------------------------------------------- */
|
||
|
|
.table-wrap {
|
||
|
|
overflow: auto;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
border-radius: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: separate;
|
||
|
|
border-spacing: 0;
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
th, td {
|
||
|
|
padding: $table-cell-padding-y $table-cell-padding-x;
|
||
|
|
text-align: left;
|
||
|
|
vertical-align: middle;
|
||
|
|
border-bottom: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
thead th {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
z-index: 1;
|
||
|
|
|
||
|
|
background: $table-header-bg;
|
||
|
|
color: $table-header-color;
|
||
|
|
|
||
|
|
font-weight: $weight-medium;
|
||
|
|
text-transform: none;
|
||
|
|
letter-spacing: 0.02em;
|
||
|
|
font-size: map.get($font-sizes, "small");
|
||
|
|
border-bottom: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
thead th:first-child { border-top-left-radius: $radius-md; }
|
||
|
|
thead th:last-child { border-top-right-radius: $radius-md; }
|
||
|
|
|
||
|
|
tbody tr {
|
||
|
|
background: transparent;
|
||
|
|
transition: background-color $duration-base $standard;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.striped tbody tr:nth-of-type(odd) { background: $table-striped-bg; }
|
||
|
|
|
||
|
|
&.hover tbody tr:hover { background: $table-hover-bg; }
|
||
|
|
|
||
|
|
&.table-sm {
|
||
|
|
th, td { padding: math.div($table-cell-padding-y, 1.4) math.div($table-cell-padding-x, 1.4); }
|
||
|
|
thead th { font-size: map.get($font-sizes, "xs"); }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Scrollbar
|
||
|
|
-------------------------------------------- */
|
||
|
|
::-webkit-scrollbar { width: $scrollbar-width; height: $scrollbar-width; }
|
||
|
|
::-webkit-scrollbar-track { background: $scrollbar-track; }
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: $scrollbar-thumb;
|
||
|
|
border-radius: $radius-pill;
|
||
|
|
&:hover { background: $scrollbar-thumb-hover; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Badges
|
||
|
|
-------------------------------------------- */
|
||
|
|
.badge {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 0.25em 0.6em;
|
||
|
|
font-size: map.get($font-sizes, "xs");
|
||
|
|
font-weight: $weight-bold;
|
||
|
|
border-radius: $radius-pill;
|
||
|
|
line-height: 1;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $color-name, $shades in $colors {
|
||
|
|
.badge-#{$color-name} {
|
||
|
|
background-color: map.get($shades, 100);
|
||
|
|
color: map.get($shades, 800);
|
||
|
|
border: 1px solid map.get($shades, 200);
|
||
|
|
|
||
|
|
&.badge-solid {
|
||
|
|
background-color: map.get($shades, 600);
|
||
|
|
color: $white;
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Chips (component)
|
||
|
|
-------------------------------------------- */
|
||
|
|
.chip-row { display: flex; flex-wrap: wrap; gap: map.get($spacers, 2); }
|
||
|
|
|
||
|
|
.chip {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: map.get($spacers, 2);
|
||
|
|
padding: 0.35rem 0.65rem;
|
||
|
|
border-radius: $radius-pill;
|
||
|
|
border: 1px solid $border-color;
|
||
|
|
background: $bg-surface;
|
||
|
|
color: $text-muted;
|
||
|
|
cursor: pointer;
|
||
|
|
user-select: none;
|
||
|
|
transition: transform $duration-fast $standard, box-shadow $duration-base $standard, background-color $duration-fast $standard, color $duration-fast $standard;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
transform: translateY(-1px);
|
||
|
|
box-shadow: map.get($elevation, 2);
|
||
|
|
color: $text-main;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
background: rgba(var(--primary-rgb), 0.12);
|
||
|
|
border-color: rgba(var(--primary-rgb), 0.18);
|
||
|
|
color: $text-main;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Progress (component)
|
||
|
|
-------------------------------------------- */
|
||
|
|
.progress {
|
||
|
|
height: 10px;
|
||
|
|
border-radius: $radius-pill;
|
||
|
|
background: $bg-surface;
|
||
|
|
overflow: hidden;
|
||
|
|
border: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-bar {
|
||
|
|
height: 100%;
|
||
|
|
background: var(--primary);
|
||
|
|
border-radius: $radius-pill;
|
||
|
|
transition: width $duration-slow $standard;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Optional width helpers (keep demo-friendly) */
|
||
|
|
.progress-0 { width: 0%; }
|
||
|
|
.progress-25 { width: 25%; }
|
||
|
|
.progress-46 { width: 46%; }
|
||
|
|
.progress-50 { width: 50%; }
|
||
|
|
.progress-72 { width: 72%; }
|
||
|
|
.progress-100 { width: 100%; }
|
||
|
|
|
||
|
|
/* Variant tones */
|
||
|
|
.progress-bar.soft { background: rgba(var(--primary-rgb), 0.55); }
|
||
|
|
.progress-bar.warn { background: rgba(249,115,22,0.55); } /* stays as MDI-ish warning tone */
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Buttons: Close / Icon (component)
|
||
|
|
-------------------------------------------- */
|
||
|
|
.btn-close {
|
||
|
|
border: none;
|
||
|
|
background: transparent;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
line-height: 1;
|
||
|
|
cursor: pointer;
|
||
|
|
color: $text-muted;
|
||
|
|
padding: 0.25rem 0.5rem;
|
||
|
|
border-radius: $radius-sm;
|
||
|
|
transition: background-color $duration-fast $standard, color $duration-fast $standard, transform $duration-fast $standard;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: rgba(0,0,0,0.06);
|
||
|
|
color: $text-main;
|
||
|
|
transform: translateY(-1px);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active { transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="dark"] .btn-close:hover { background: rgba(255,255,255,0.08); }
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
App shell / Sidebar / Drawer / Modal
|
||
|
|
-------------------------------------------- */
|
||
|
|
.app-wrapper {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar {
|
||
|
|
width: $sidebar-width;
|
||
|
|
height: 100vh;
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
background-color: $bg-surface;
|
||
|
|
border-right: 1px solid $border-color;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
transition: width $duration-base $standard;
|
||
|
|
|
||
|
|
&.collapsed { width: $sidebar-collapsed; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 320px;
|
||
|
|
max-width: 88vw;
|
||
|
|
height: 100vh;
|
||
|
|
z-index: map.get($z-index, "sidebar");
|
||
|
|
background-color: $bg-card;
|
||
|
|
border-right: 1px solid $border-color;
|
||
|
|
transform: translateX(-105%);
|
||
|
|
transition: transform $duration-base $standard;
|
||
|
|
box-shadow: map.get($elevation, 24);
|
||
|
|
|
||
|
|
&.is-open { transform: translateX(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Modal */
|
||
|
|
.modal-overlay {
|
||
|
|
position: fixed;
|
||
|
|
top: 0; left: 0;
|
||
|
|
width: 100%; height: 100%;
|
||
|
|
background-color: rgba(0,0,0,0.55);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
z-index: map.get($z-index, "modal");
|
||
|
|
padding: map.get($spacers, 4);
|
||
|
|
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
pointer-events: none;
|
||
|
|
transition: opacity $duration-base $standard, visibility $duration-base $standard;
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-content {
|
||
|
|
background-color: $bg-card;
|
||
|
|
border-radius: $radius-lg;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 640px;
|
||
|
|
box-shadow: map.get($elevation, 24);
|
||
|
|
overflow: hidden;
|
||
|
|
border: 1px solid $border-color;
|
||
|
|
|
||
|
|
transform: translateY(10px) scale(0.985);
|
||
|
|
transition: transform $duration-base $standard;
|
||
|
|
|
||
|
|
.modal-overlay.is-active & {
|
||
|
|
transform: translateY(0) scale(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: map.get($spacers, 3);
|
||
|
|
padding: map.get($spacers, 4);
|
||
|
|
border-bottom: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-title {
|
||
|
|
margin: 0;
|
||
|
|
font-size: map.get($font-sizes, "h4");
|
||
|
|
font-weight: $weight-bold;
|
||
|
|
color: $text-main;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-body {
|
||
|
|
padding: map.get($spacers, 4);
|
||
|
|
color: $text-muted;
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-footer {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: map.get($spacers, 2);
|
||
|
|
padding: map.get($spacers, 3) map.get($spacers, 4);
|
||
|
|
border-top: 1px solid $border-color;
|
||
|
|
background: $bg-surface;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-actions {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: map.get($spacers, 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.vor-modal-sm {
|
||
|
|
max-width: 480px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vor-modal-md {
|
||
|
|
max-width: 640px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vor-modal-lg {
|
||
|
|
max-width: 820px;
|
||
|
|
}
|
||
|
|
/* --------------------------------------------
|
||
|
|
Accordion
|
||
|
|
-------------------------------------------- */
|
||
|
|
.accordion-item {
|
||
|
|
border-bottom: 1px solid $border-color;
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
.accordion-body { display: block; }
|
||
|
|
.accordion-icon { transform: rotate(180deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.accordion-header {
|
||
|
|
padding: $spacer;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
width: 100%;
|
||
|
|
color: $text-main;
|
||
|
|
|
||
|
|
&:hover { background-color: $bg-surface; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.accordion-icon { transition: transform $duration-base $standard; }
|
||
|
|
|
||
|
|
.accordion-body {
|
||
|
|
padding: 0 $spacer $spacer;
|
||
|
|
display: none;
|
||
|
|
color: $text-muted;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Switch
|
||
|
|
-------------------------------------------- */
|
||
|
|
.switch {
|
||
|
|
--switch-width: 40px;
|
||
|
|
--switch-height: 22px;
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
width: var(--switch-width);
|
||
|
|
height: var(--switch-height);
|
||
|
|
|
||
|
|
input {
|
||
|
|
opacity: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
|
||
|
|
&:checked + .slider {
|
||
|
|
background-color: var(--primary);
|
||
|
|
&::before { transform: translateX(18px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus-visible + .slider {
|
||
|
|
box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider {
|
||
|
|
position: absolute;
|
||
|
|
cursor: pointer;
|
||
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
||
|
|
background-color: map.get(map.get($colors, "gray"), 300);
|
||
|
|
transition: $duration-fast $standard;
|
||
|
|
border-radius: $radius-pill;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
position: absolute;
|
||
|
|
content: "";
|
||
|
|
height: 16px;
|
||
|
|
width: 16px;
|
||
|
|
left: 3px;
|
||
|
|
bottom: 3px;
|
||
|
|
background-color: $white;
|
||
|
|
transition: $duration-fast $standard;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Dividers / helpers
|
||
|
|
-------------------------------------------- */
|
||
|
|
.hr {
|
||
|
|
border: none;
|
||
|
|
border-top: 1px solid $border-color;
|
||
|
|
margin: map.get($spacers, 4) 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Drawer Modal (off-canvas modal)
|
||
|
|
-------------------------------------------- */
|
||
|
|
.drawer-modal {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
z-index: map.get($z-index, "modal");
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
|
||
|
|
background-color: rgba(0,0,0,0.55);
|
||
|
|
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
pointer-events: none;
|
||
|
|
transition: opacity $duration-base $standard, visibility $duration-base $standard;
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------------------------------
|
||
|
|
Drawer Modal (off-canvas modal)
|
||
|
|
-------------------------------------------- */
|
||
|
|
.drawer-modal {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
z-index: map.get($z-index, "modal");
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end; /* right default */
|
||
|
|
|
||
|
|
background-color: rgba(0,0,0,0.55);
|
||
|
|
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
pointer-events: none;
|
||
|
|
|
||
|
|
transition:
|
||
|
|
opacity $duration-base $standard,
|
||
|
|
visibility $duration-base $standard;
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-left {
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer-panel {
|
||
|
|
width: 520px;
|
||
|
|
max-width: 94vw;
|
||
|
|
height: 100vh;
|
||
|
|
|
||
|
|
background-color: $bg-card;
|
||
|
|
box-shadow: map.get($elevation, 24);
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
transition: transform $duration-slow $standard;
|
||
|
|
|
||
|
|
/* default: start off-screen right */
|
||
|
|
transform: translateX(105%);
|
||
|
|
border-left: 1px solid $border-color;
|
||
|
|
|
||
|
|
.drawer-modal.is-active & {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* left variant */
|
||
|
|
.drawer-modal.is-left & {
|
||
|
|
transform: translateX(-105%);
|
||
|
|
border-left: none;
|
||
|
|
border-right: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer-modal.is-left.is-active & {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer-panel-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: map.get($spacers, 4);
|
||
|
|
border-bottom: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer-panel-body {
|
||
|
|
padding: map.get($spacers, 4);
|
||
|
|
overflow: auto;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer-panel-footer {
|
||
|
|
padding: map.get($spacers, 3) map.get($spacers, 4);
|
||
|
|
border-top: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Dark mode tweaks (optional, usually already handled by tokens) */
|
||
|
|
[data-theme="dark"] .drawer-modal {
|
||
|
|
background-color: rgba(0,0,0,0.65);
|
||
|
|
}
|