112 lines
3.2 KiB
SCSS
112 lines
3.2 KiB
SCSS
|
@import '../node_modules/bootstrap/scss/functions';
|
||
|
|
|
||
|
|
// override variables
|
||
|
|
|
||
|
|
@import './bootstrap/variables';
|
||
|
|
@import '../node_modules/bootstrap/scss/variables';
|
||
|
|
@import '../node_modules/bootstrap/scss/variables-dark';
|
||
|
|
|
||
|
|
// override maps
|
||
|
|
@import './bootstrap/maps';
|
||
|
|
|
||
|
|
@import '../node_modules/bootstrap/scss/maps';
|
||
|
|
@import '../node_modules/bootstrap/scss/mixins';
|
||
|
|
@import '../node_modules/bootstrap/scss/root';
|
||
|
|
|
||
|
|
@import '../node_modules/bootstrap/scss/utilities';
|
||
|
|
@import '../node_modules/bootstrap/scss/reboot';
|
||
|
|
|
||
|
|
// override typography
|
||
|
|
|
||
|
|
@import './bootstrap/typography';
|
||
|
|
@import '../node_modules/bootstrap/scss/type';
|
||
|
|
@import './bootstrap/accordion';
|
||
|
|
@import '../node_modules/bootstrap/scss/transitions';
|
||
|
|
@import '../node_modules/bootstrap/scss/badge';
|
||
|
|
@import '../node_modules/bootstrap/scss/card';
|
||
|
|
@import '../node_modules/bootstrap/scss/grid';
|
||
|
|
@import '../node_modules/bootstrap/scss/containers';
|
||
|
|
@import '../node_modules/bootstrap/scss/helpers';
|
||
|
|
@import '../node_modules/bootstrap/scss/buttons';
|
||
|
|
@import './bootstrap/utilities';
|
||
|
|
|
||
|
|
@function contrast-ratio($color1, $color2) {
|
||
|
|
// Calculate the relative luminance for each color
|
||
|
|
$luminance1: luminance($color1);
|
||
|
|
$luminance2: luminance($color2);
|
||
|
|
|
||
|
|
// Calculate the contrast ratio
|
||
|
|
$contrastRatio: if(
|
||
|
|
$luminance1 > $luminance2,
|
||
|
|
calc(($luminance1 + 0.05) / ($luminance2 + 0.05)),
|
||
|
|
calc(($luminance2 + 0.05) / ($luminance1 + 0.05))
|
||
|
|
);
|
||
|
|
|
||
|
|
// Return the contrast ratio
|
||
|
|
@return $contrastRatio;
|
||
|
|
}
|
||
|
|
|
||
|
|
@function get-contrasting-text-color($background-color, $min-contrast-ratio: 4.5) {
|
||
|
|
// Calculate relative luminance
|
||
|
|
$rel-lum: luminance($background-color);
|
||
|
|
$bg-lum: if($rel-lum > 0.5, $rel-lum, 1 - $rel-lum);
|
||
|
|
// Calculate contrast ratio
|
||
|
|
$light-contrast: contrast-ratio($light, $background-color);
|
||
|
|
$dark-contrast: contrast-ratio($dark, $background-color);
|
||
|
|
|
||
|
|
// Determine the text color based on contrast ratio and minimum threshold
|
||
|
|
@if (calc($bg-lum * $dark-contrast) >= $min-contrast-ratio) {
|
||
|
|
@return $dark;
|
||
|
|
} @else if (calc($bg-lum * $light-contrast) >= $min-contrast-ratio) {
|
||
|
|
@return $light;
|
||
|
|
} @else {
|
||
|
|
@return if($light-contrast > $dark-contrast, $light, $dark);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $color, $hex in $all-colors {
|
||
|
|
.bg-#{$color} {
|
||
|
|
background-color: $hex;
|
||
|
|
color: get-contrasting-text-color($hex);
|
||
|
|
}
|
||
|
|
.bg-gradient-#{$color} {
|
||
|
|
--#{$prefix}gradient-start:0%;
|
||
|
|
--#{$prefix}gradient-end:100%;
|
||
|
|
--#{$prefix}gradient-to: transparent;
|
||
|
|
|
||
|
|
@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $color, $hex in $theme-colors {
|
||
|
|
.bg-gradient-#{$color} {
|
||
|
|
--#{$prefix}gradient-start:0%;
|
||
|
|
--#{$prefix}gradient-end:100%;
|
||
|
|
--#{$prefix}gradient-to: transparent;
|
||
|
|
|
||
|
|
@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $color, $hex in $all-colors {
|
||
|
|
.border-#{$color} {
|
||
|
|
--#{$prefix}border-color: #{$hex};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@import '../node_modules/bootstrap/scss/utilities/api';
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|