generated from ztimson/template
558 lines
17 KiB
SCSS
558 lines
17 KiB
SCSS
@use 'sass:map';
|
|
|
|
// Theme settings ===========================================================================================
|
|
|
|
// Colors
|
|
:root {
|
|
// Theme colors -- what ever you like
|
|
--theme-primary: #4979de;
|
|
--theme-primary-contrast: black;
|
|
--theme-accent: #2caec0;
|
|
--theme-accent-contrast: black;
|
|
|
|
--theme-info: #6157cc;
|
|
--theme-success: #65c147;
|
|
--theme-warn: #d88750;
|
|
--theme-danger: #bf4f4f;
|
|
--theme-black: black;
|
|
--theme-white: white;
|
|
|
|
// Misc
|
|
--theme-animation: 0.2s linear;
|
|
--theme-content-width: 1100px;
|
|
--theme-font: Arial, sans-serif;
|
|
|
|
// Light theme
|
|
&, .theme-light {
|
|
--theme-background: #fafafa;
|
|
--theme-background-contrast: white;
|
|
|
|
--theme-surface: #ffffff;
|
|
--theme-border: #E5E7EB;
|
|
--theme-muted: #6c757d;
|
|
--theme-text: #000000;
|
|
|
|
--theme-lighter: rgba(255, 255, 255, 0.05);
|
|
--theme-darker: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
// Dark theme
|
|
.theme-dark {
|
|
--theme-background: #1a1a1a;
|
|
--theme-background-contrast: black;
|
|
|
|
--theme-surface: #2e2e2e;
|
|
--theme-border: #374151;
|
|
--theme-muted: #cccccc;
|
|
--theme-text: #ffffff;
|
|
|
|
--theme-lighter: rgba(255, 255, 255, 0.1);
|
|
--theme-darker: rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
|
|
$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem);
|
|
|
|
// Don't edit past this point ===============================================================================
|
|
|
|
$direction: ('s': 'left', 't': 'top', 'e': 'right', 'b': 'bottom');
|
|
$divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
|
|
|
|
// "Fixes" ==================================================================================================
|
|
|
|
// Base resets applied like Bootstrap's reboot
|
|
.fix-anchor {
|
|
a, a:not([href]) {
|
|
cursor: pointer;
|
|
color: var(--theme-primary);
|
|
text-decoration: none;
|
|
&:hover, &:focus { text-decoration: underline; }
|
|
}
|
|
}
|
|
|
|
.fix-button {
|
|
button:not(:disabled) { cursor: pointer; }
|
|
}
|
|
|
|
.fix-dom {
|
|
&, html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: auto;
|
|
color: var(--theme-text);
|
|
background-color: var(--theme-background);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
}
|
|
|
|
.fix-focus {
|
|
* {
|
|
outline: inherit;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
}
|
|
|
|
.fix-font {
|
|
color: var(--theme-text);
|
|
font-family: var(--theme-font), sans-serif;
|
|
|
|
p, input, select, textarea, button { font-size: 1rem; }
|
|
h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
|
|
h1 { font-weight: 500; font-size: 2.5rem; }
|
|
h2 { font-weight: 500; font-size: 2rem; }
|
|
h3 { font-weight: 500; font-size: 1.75rem; }
|
|
h4 { font-weight: 500; font-size: 1.5rem; }
|
|
h5 { font-weight: 500; font-size: 1.25rem; }
|
|
h6 { font-weight: 500; font-size: 1rem; }
|
|
}
|
|
|
|
.fix-scrollbar {
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--theme-primary) var(--theme-background);
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: var(--theme-background);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: var(--theme-primary);
|
|
border-radius: 4px;
|
|
border: 2px solid var(--theme-background);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--theme-accent);
|
|
}
|
|
}
|
|
|
|
// Apply all fixes by default (like Bootstrap)
|
|
.fix {
|
|
@extend .fix-anchor;
|
|
@extend .fix-button;
|
|
@extend .fix-dom;
|
|
@extend .fix-focus;
|
|
@extend .fix-font;
|
|
@extend .fix-scrollbar;
|
|
}
|
|
|
|
// Misc =====================================================================================================
|
|
|
|
.center {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); }
|
|
|
|
.reset { all: revert !important; }
|
|
|
|
// Utilities ================================================================================================
|
|
|
|
// Anchor
|
|
.anchor-c { transform: translate(-50%, -50%); }
|
|
.anchor-e { transform: translate(-100%, -50%); }
|
|
.anchor-s { transform: translate(0, -50%); }
|
|
|
|
// Animate
|
|
.animate { transition: var(--theme-animation); }
|
|
.animate-none { transition: none !important; }
|
|
.animate-color {
|
|
transition: var(--theme-animation);
|
|
transition-property: color, background-color;
|
|
}
|
|
.animate-opacity {
|
|
transition: var(--theme-animation);
|
|
transition-property: opacity;
|
|
}
|
|
.animate-pos {
|
|
transition: var(--theme-animation);
|
|
transition-property: height, width, left, right, top, bottom;
|
|
}
|
|
.animate-trans {
|
|
transition: var(--theme-animation);
|
|
transition-property: transform;
|
|
}
|
|
|
|
// Border - Radius
|
|
.br-circle { border-radius: 50% !important; }
|
|
.br-pill { border-radius: 50rem !important; }
|
|
@each $s, $size in $sizes {
|
|
.brtl-#{$s}, .brt-#{$s}, .brs-#{$s}, .br-#{$s} { border-top-left-radius: $size !important; }
|
|
.brtr-#{$s}, .brt-#{$s}, .bre-#{$s}, .br-#{$s} { border-top-right-radius: $size !important; }
|
|
.brbl-#{$s}, .brb-#{$s}, .brs-#{$s}, .br-#{$s} { border-bottom-left-radius: $size !important; }
|
|
.brbr-#{$s}, .brb-#{$s}, .bre-#{$s}, .br-#{$s} { border-bottom-right-radius: $size !important; }
|
|
}
|
|
|
|
// Border - Style
|
|
.b-dash { border-style: dashed !important; }
|
|
.b-dot { border-style: dotted !important; }
|
|
.b-double { border-style: double !important; }
|
|
.b-none { border-style: none !important; }
|
|
.b-solid { border-style: solid !important; }
|
|
|
|
// Colors - Shared mixin for efficiency
|
|
@mixin color-variant($name, $bg-var, $fg-var: null) {
|
|
.b-#{$name} { border-color: var(--theme-#{$bg-var}) !important; }
|
|
.bg-#{$name} {
|
|
background-color: var(--theme-#{$bg-var}) !important;
|
|
@if $fg-var {
|
|
color: var(--theme-#{$fg-var});
|
|
text-decoration-color: var(--theme-#{$fg-var});
|
|
}
|
|
}
|
|
.fg-#{$name} {
|
|
color: var(--theme-#{$bg-var}) !important;
|
|
text-decoration-color: var(--theme-#{$bg-var}) !important;
|
|
}
|
|
}
|
|
|
|
@include color-variant('black', 'black');
|
|
@include color-variant('white', 'white');
|
|
@include color-variant('background', 'background');
|
|
@include color-variant('background-contrast', 'background-contrast');
|
|
@include color-variant('primary', 'primary', 'primary-contrast');
|
|
@include color-variant('primary-contrast', 'primary-contrast');
|
|
@include color-variant('accent', 'accent', 'accent-contrast');
|
|
@include color-variant('accent-contrast', 'accent-contrast');
|
|
@include color-variant('surface', 'surface');
|
|
@include color-variant('border', 'border');
|
|
@include color-variant('text', 'text');
|
|
@include color-variant('muted', 'muted');
|
|
@include color-variant('lighter', 'lighter');
|
|
@include color-variant('darker', 'darker');
|
|
@include color-variant('info', 'info');
|
|
@include color-variant('success', 'success');
|
|
@include color-variant('warn', 'warn');
|
|
@include color-variant('danger', 'danger');
|
|
|
|
.bg-transparent { background-color: transparent !important; }
|
|
.bg-container {
|
|
background-color: var(--theme-clear) !important;
|
|
color: var(--theme-text) !important;
|
|
}
|
|
|
|
// Lighter/Darker pseudo variants
|
|
@each $color in ('primary', 'accent', 'background', 'surface', 'info', 'success', 'warn', 'danger', 'muted') {
|
|
.bg-#{$color}-lighter, .bg-#{$color}-darker {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: var(--theme-#{$color}-contrast);
|
|
text-decoration-color: var(--theme-#{$color}-contrast);
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: var(--theme-#{$color});
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.bg-#{$color}-lighter::before { filter: saturate(.5) brightness(150%); }
|
|
.bg-#{$color}-darker::before { filter: saturate(.5) brightness(50%); }
|
|
}
|
|
|
|
// Cursors
|
|
@each $name in ('alias','auto','cell','col-resize','copy','crosshair','default','grab','grabbing','help','move','not-allowed','pointer','progress','row-resize','text','none','wait','vertical-text','zoom-in','zoom-out') {
|
|
.curs-#{$name} { cursor: #{$name} !important; }
|
|
}
|
|
|
|
// Font
|
|
.fs-bolder { font-weight: bolder !important; }
|
|
.fs-bold { font-weight: 500 !important; }
|
|
.fs-normal { font-weight: normal !important; }
|
|
.fs-italic { font-style: italic !important; }
|
|
.fs-norm { font-style: normal !important; }
|
|
.fs-lighter { font-weight: lighter !important; }
|
|
.fs-none { text-decoration: none !important; }
|
|
.fs-strike { text-decoration: line-through !important; }
|
|
.fs-underline { text-decoration: underline !important; }
|
|
.fs-strike.fs-underline { text-decoration: line-through underline !important; }
|
|
.fs-7 { font-size: 2.5rem !important; }
|
|
.fs-6 { font-size: 2.25rem !important; }
|
|
.fs-5 { font-size: 2rem !important; }
|
|
.fs-4 { font-size: 1.75rem !important; }
|
|
.fs-3 { font-size: 1.5rem !important; }
|
|
.fs-2 { font-size: 1.25rem !important; }
|
|
.fs-1 { font-size: 1rem !important; }
|
|
.fs-break {
|
|
word-wrap: break-word !important;
|
|
word-break: break-word !important;
|
|
}
|
|
.fs-truncate {
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
.fs-nowrap {
|
|
white-space: nowrap !important;
|
|
text-wrap: nowrap !important;
|
|
}
|
|
.fs-wrap {
|
|
white-space: normal !important;
|
|
text-wrap: pretty !important;
|
|
}
|
|
.fs-lowercase { text-transform: lowercase !important; }
|
|
.fs-uppercase { text-transform: uppercase !important; }
|
|
.fs-capitalize { text-transform: capitalize !important; }
|
|
|
|
// Hover
|
|
.hover:hover { filter: brightness(125%) !important; }
|
|
.curs-hover {
|
|
&:hover {
|
|
filter: brightness(125%) !important;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
// Opacity
|
|
@each $div in $divisible {
|
|
.o-#{$div} { opacity: #{$div * 0.01} !important; }
|
|
}
|
|
|
|
// Overflow
|
|
@each $opt in ('auto', 'hidden', 'scroll', 'visible') {
|
|
.overflow-#{$opt} { overflow: #{$opt} !important; }
|
|
.overflow-x-#{$opt} { overflow-x: #{$opt} !important; }
|
|
.overflow-y-#{$opt} { overflow-y: #{$opt} !important; }
|
|
}
|
|
|
|
// Position
|
|
@each $p, $pos in ('abs': 'absolute', 'fix': 'fixed', 'rel': 'relative', 'static': 'static', 'stick': 'sticky') {
|
|
.pos-#{$p} { position: #{$pos} !important; }
|
|
}
|
|
|
|
@each $div in $divisible {
|
|
.bottom-#{$div} { bottom: #{$div * 1%} !important; }
|
|
.end-#{$div} { right: #{$div * 1%} !important; }
|
|
.start-#{$div} { left: #{$div * 1%} !important; }
|
|
.top-#{$div} { top: #{$div * 1%} !important; }
|
|
}
|
|
|
|
// Shadows
|
|
.shadow-none { box-shadow: none !important; }
|
|
.shadow-1 { box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }
|
|
.shadow-2 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08) !important; }
|
|
.shadow,.shadow-3 { box-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08) !important; }
|
|
.shadow-4 { box-shadow: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.06) !important; }
|
|
.shadow-5 { box-shadow: 0 20px 25px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.06) !important; }
|
|
.shadow-top { box-shadow: 0 -4px 6px rgba(0,0,0,0.08) !important; }
|
|
.shadow-bottom { box-shadow: 0 4px 6px rgba(0,0,0,0.08) !important; }
|
|
.shadow-start { box-shadow: -4px 0 6px rgba(0,0,0,0.08) !important; }
|
|
.shadow-end { box-shadow: 4px 0 6px rgba(0,0,0,0.08) !important; }
|
|
.shadow-inset-1 { box-shadow: inset 0 1px 2px rgba(0,0,0,0.10) !important; }
|
|
.shadow-inset-2 { box-shadow: inset 0 2px 6px rgba(0,0,0,0.12) !important; }
|
|
.shadow-drop-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)) !important; }
|
|
.shadow-drop { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.30)) !important; }
|
|
.shadow-drop-lg { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)) !important; }
|
|
@each $color, $value in (
|
|
'primary': #2d5dc5,
|
|
'accent': #15439a,
|
|
'info': #6157cc,
|
|
'success': #65c147,
|
|
'warn': #d88750,
|
|
'danger': #bf4f4f
|
|
) {
|
|
.shadow-#{$color} { box-shadow: 0 4px 14px rgba($value, 0.35) !important; }
|
|
}
|
|
|
|
// User Select
|
|
@each $s in ('all', 'auto', 'none', 'text') {
|
|
.select-#{$s} { user-select: #{$s} !important; }
|
|
}
|
|
|
|
// Z-index
|
|
@each $s, $ignore in $sizes {
|
|
.z-#{$s} { z-index: #{$s} !important; }
|
|
}
|
|
|
|
// Breakpoint rules
|
|
@mixin utilities($bp) {
|
|
@if $bp != null { $bp: '-#{$bp}'; } @else { $bp: ''; }
|
|
|
|
// Alignment
|
|
.align-x#{$bp} { text-align: center !important; }
|
|
.align-x#{$bp}-start { text-align: left !important; }
|
|
.align-x#{$bp}-end { text-align: right !important; }
|
|
.align-y#{$bp} { vertical-align: middle !important; }
|
|
.align-y#{$bp}-start { vertical-align: top !important; }
|
|
.align-y#{$bp}-end { vertical-align: bottom !important; }
|
|
|
|
// Display
|
|
@each $display in (block, inline, inline-block, flex, inline-flex, grid, inline-grid, table, table-row, table-cell, none) {
|
|
.d#{$bp}-#{$display} { display: #{$display} !important; }
|
|
}
|
|
|
|
// Flex
|
|
.align-content#{$bp}-start { align-content: start !important; }
|
|
.align-content#{$bp}-end { align-content: end !important; }
|
|
.align-content#{$bp}-center { align-content: center !important; }
|
|
.align-content#{$bp}-baseline { align-content: baseline !important; }
|
|
.align-content#{$bp}-stretch { align-content: stretch !important; }
|
|
.align-items#{$bp}-start { align-items: start !important; }
|
|
.align-items#{$bp}-end { align-items: end !important; }
|
|
.align-items#{$bp}-center { align-items: center !important; }
|
|
.align-items#{$bp}-baseline { align-items: baseline !important; }
|
|
.align-items#{$bp}-stretch { align-items: stretch !important; }
|
|
.align-self#{$bp}-start { align-self: start !important; }
|
|
.align-self#{$bp}-end { align-self: end !important; }
|
|
.align-self#{$bp}-center { align-self: center !important; }
|
|
.align-self#{$bp}-baseline { align-self: baseline !important; }
|
|
.align-self#{$bp}-stretch { align-self: stretch !important; }
|
|
.flex#{$bp}-c {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
}
|
|
.flex#{$bp}-cr {
|
|
display: flex !important;
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
.flex#{$bp}-r {
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
}
|
|
.flex#{$bp}-rr {
|
|
display: flex !important;
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.flex-inline#{$bp}-c {
|
|
display: inline-flex !important;
|
|
flex-direction: column !important;
|
|
}
|
|
.flex-inline#{$bp}-cr {
|
|
display: inline-flex !important;
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
.flex-inline#{$bp}-r {
|
|
display: inline-flex !important;
|
|
flex-direction: row !important;
|
|
}
|
|
.flex-inline#{$bp}-rr {
|
|
display: inline-flex !important;
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.flex#{$bp}-fill { flex: 1 1 auto !important; }
|
|
.flex#{$bp}-fill-even {
|
|
flex-basis: 0 !important;
|
|
flex-grow: 1 !important;
|
|
}
|
|
.flex#{$bp}-grow-0 { flex-grow: 0 !important; }
|
|
.flex#{$bp}-shrink-0 { flex-shrink: 0 !important; }
|
|
.flex#{$bp}-grow-1 { flex-grow: 1 !important; }
|
|
.flex#{$bp}-shrink-1 { flex-shrink: 1 !important; }
|
|
.flex#{$bp}-grow-2 { flex-grow: 2 !important; }
|
|
.flex#{$bp}-shrink-2 { flex-shrink: 2 !important; }
|
|
.flex#{$bp}-grow-3 { flex-grow: 3 !important; }
|
|
.flex#{$bp}-shrink-3 { flex-shrink: 3 !important; }
|
|
.flex#{$bp}-nowrap { flex-wrap: nowrap !important; }
|
|
.flex#{$bp}-wrap { flex-wrap: wrap !important; }
|
|
.justify#{$bp}-start { justify-content: start !important; }
|
|
.justify#{$bp}-end { justify-content: end !important; }
|
|
.justify#{$bp}-center { justify-content: center !important; }
|
|
.justify#{$bp}-between { justify-content: space-between !important; }
|
|
.justify#{$bp}-around { justify-content: space-around !important; }
|
|
.justify#{$bp}-evenly { justify-content: space-evenly !important; }
|
|
|
|
// Float
|
|
@each $f, $float in ('start': 'left', 'end': 'right', 'none': 'none') {
|
|
.float#{$bp}-#{$f} { float: #{$float} !important; }
|
|
}
|
|
|
|
// Height
|
|
.h#{$bp}-auto { height: auto !important; }
|
|
@each $div in $divisible {
|
|
.h#{$bp}-#{$div} { height: #{$div * 1%} !important; }
|
|
}
|
|
|
|
// Width
|
|
.w#{$bp}-auto { width: auto !important; }
|
|
@each $div in $divisible {
|
|
.w#{$bp}-#{$div} { width: #{$div * 1%} !important; }
|
|
}
|
|
|
|
// Object Fit
|
|
.fit#{$bp}-contain { object-fit: contain !important; }
|
|
.fit#{$bp}-cover { object-fit: cover !important; }
|
|
.fit#{$bp}-fill { object-fit: fill !important; }
|
|
.fit#{$bp}-scale { object-fit: scale-down !important; }
|
|
.fit#{$bp}-none { object-fit: none !important; }
|
|
|
|
// Margin auto
|
|
.m#{$bp}-auto { margin: auto !important; }
|
|
.mx#{$bp}-auto {
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
.my#{$bp}-auto {
|
|
margin-top: auto !important;
|
|
margin-bottom: auto !important;
|
|
}
|
|
|
|
// Visibility
|
|
.visible#{$bp} { visibility: visible !important; }
|
|
.hidden#{$bp} { visibility: hidden !important; }
|
|
|
|
@each $s, $size in $sizes {
|
|
.gap#{$bp}-#{$s} { gap: $size !important; }
|
|
.b#{$bp}-#{$s} {
|
|
border-width: #{$s}px !important;
|
|
border-style: solid;
|
|
border-color: var(--theme-border);
|
|
}
|
|
.m#{$bp}-#{$s} { margin: $size !important; }
|
|
.p#{$bp}-#{$s} { padding: $size !important; }
|
|
.mx#{$bp}-#{$s} {
|
|
margin-left: $size !important;
|
|
margin-right: $size !important;
|
|
}
|
|
.px#{$bp}-#{$s} {
|
|
padding-left: $size !important;
|
|
padding-right: $size !important;
|
|
}
|
|
.my#{$bp}-#{$s} {
|
|
margin-top: $size !important;
|
|
margin-bottom: $size !important;
|
|
}
|
|
.py#{$bp}-#{$s} {
|
|
padding-top: $size !important;
|
|
padding-bottom: $size !important;
|
|
}
|
|
.order#{$bp}-#{$s} { order: $s !important; }
|
|
}
|
|
|
|
@each $d, $dir in $direction {
|
|
.m#{$d}#{$bp}-auto { margin-#{$dir}: auto !important; }
|
|
|
|
@each $s, $size in $sizes {
|
|
.b#{$d}#{$bp}-#{$s} {
|
|
border-#{$dir}-width: #{$s}px !important;
|
|
border-#{$dir}-style: solid;
|
|
border-#{$dir}-color: var(--theme-border);
|
|
}
|
|
.m#{$d}#{$bp}-#{$s} { margin-#{$dir}: $size !important; }
|
|
.p#{$d}#{$bp}-#{$s} { padding-#{$dir}: $size !important; }
|
|
}
|
|
}
|
|
}
|
|
|
|
@include utilities(null);
|
|
@media print { @include utilities('print'); }
|
|
@each $breakpoint, $min-width in $breakpoints {
|
|
@media (min-width: #{$min-width}) {
|
|
@include utilities($breakpoint);
|
|
}
|
|
}
|