133 lines
3.2 KiB
SCSS
133 lines
3.2 KiB
SCSS
@use "sass:color";
|
|
|
|
// Font settings
|
|
$lexend-font-path: ".";
|
|
$lexend-weights: 500, 600;
|
|
$fa-font-path: ".";
|
|
|
|
$font-family-sans-serif: "Lexend", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
$font-family-serif: Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
|
|
$font-family-monospace: "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
|
|
$font-family-base: $font-family-sans-serif;
|
|
|
|
$font-size-base: 1rem;
|
|
$font-size-large: ceil(($font-size-base * 1.25)); // ~18px
|
|
$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
|
|
|
|
$font-size-h1: floor(($font-size-base * 2.6)); // ~36px
|
|
$font-size-h2: floor(($font-size-base * 2.15)); // ~30px
|
|
$font-size-h3: ceil(($font-size-base * 1.7)); // ~24px
|
|
$font-size-h4: ceil(($font-size-base * 1.25)); // ~18px
|
|
$font-size-h5: $font-size-base;
|
|
$font-size-h6: ceil(($font-size-base * 0.85)); // ~12px
|
|
|
|
// Bootstrap CSS variable prefix
|
|
$prefix: '';
|
|
|
|
// Usual navbar height
|
|
$navbar-height: 56px;
|
|
|
|
// Color overrides for Bootstrap
|
|
$primary: #5e35b1;
|
|
|
|
$rs-theme-colors: (
|
|
primary: $primary
|
|
);
|
|
|
|
$theme-colors: map-merge($theme-colors, $rs-theme-colors);
|
|
|
|
// Container overrides for Bootstrap
|
|
|
|
$container-max-widths: map-remove($container-max-widths, xxl);
|
|
|
|
// Cards
|
|
$card-border-width: 0;
|
|
|
|
// List Groups
|
|
$list-group-border-width: 0;
|
|
|
|
// nProgress
|
|
$nprogress-color: lighten($primary, 25%);
|
|
|
|
// Color names for theme generation
|
|
$color-names: (
|
|
"primary",
|
|
"danger",
|
|
"warning",
|
|
"info",
|
|
"success",
|
|
"dark",
|
|
"light"
|
|
);
|
|
|
|
// Avatar variables
|
|
$avatar-border-radius: 4px;
|
|
|
|
$avatar-sizes: (
|
|
"xs": 20px,
|
|
"sm": 30px,
|
|
"md": 40px,
|
|
"lg": 80px,
|
|
"xl": 120px,
|
|
"xxl": 160px,
|
|
);
|
|
|
|
$rs-spacers: (
|
|
10: (1rem * 6)
|
|
);
|
|
|
|
$spacers: map-merge($rs-spacers, $spacers);
|
|
|
|
:root {
|
|
--background: #f0edf4;
|
|
--input-bg: var(--background);
|
|
--raised-bg: #ffffff;
|
|
--raised-accent: #f7f7f7;
|
|
|
|
/**
|
|
*-rgb values are some of the background colors
|
|
available as triplets because they are required
|
|
for background opacity styles
|
|
*/
|
|
|
|
--primary-rgb: #{color.red($primary)}, #{color.green($primary)}, #{color.blue($primary)};
|
|
--raised-bg-rgb: #{color.red(#ffffff)}, #{color.green(#ffffff)}, #{color.blue(#ffffff)};
|
|
--raised-accent-rgb: #{color.red(#f7f7f7)}, #{color.green(#f7f7f7)}, #{color.blue(#f7f7f7)};
|
|
|
|
/**
|
|
NOTE for all *-text variables
|
|
----------------------------------------------
|
|
The text-variables are present as triplets
|
|
because in some places it's required to adjust
|
|
their transparency.
|
|
|
|
So, for general usage, use:
|
|
color: RGB(var(--*-text));
|
|
|
|
And for transparent usage, use:
|
|
color: rgba(var(--*-text), .7);
|
|
|
|
The uppercase RGB is required because internally
|
|
SassC wants more than one argument for rgb(),
|
|
hence writing RGB() bypasses that check, but
|
|
browsers interpret it correctly.
|
|
*/
|
|
|
|
--primary-text: 255, 255, 255;
|
|
--danger-text: 255, 255, 255;
|
|
--warning-text: 41, 41, 41;
|
|
--info-text: 255, 255, 255;
|
|
--success-text: 255, 255, 255;
|
|
--dark-text: 255, 255, 255;
|
|
--light-text: 0, 0, 0;
|
|
|
|
--body-text: 0, 0, 0;
|
|
--muted-text: 108, 117, 125;
|
|
--input-text: 0, 0, 0;
|
|
--input-placeholder: 108, 117, 125;
|
|
|
|
--turbolinks-progress-color: #a58adc; // --primary lightened by 25%
|
|
}
|
|
|
|
$gray: #e2e2e2;
|