gnosis-css/css/scss/base.scss
2024-07-04 09:07:29 +00:00

175 lines
4.6 KiB
SCSS

@use "sass:math";
@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 "./bootstrap/accordion";
@import "./bootstrap/nav";
@import "./bootstrap/navbar";
@import "./bootstrap/g-components/sidebar";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "./bootstrap/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
@import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/offcanvas";
@import "../node_modules/bootstrap/scss/placeholders";
@import "../node_modules/bootstrap/scss/helpers";
@import "./bootstrap/utilities";
@function contrast-ratio($color1, $color2) {
$luminance1: luminance($color1);
$luminance2: luminance($color2);
@return if(
$luminance1 > $luminance2,
math.div($luminance1 + 0.05, $luminance2 + 0.05),
math.div($luminance2 + 0.05, $luminance1 + 0.05)
);
}
@function get-contrasting-text-color(
$background-color,
$light: #fff9e5,
$dark: #33322e,
$min-contrast-ratio: 4.5
) {
$light-contrast: contrast-ratio($light, $background-color);
$dark-contrast: contrast-ratio($dark, $background-color);
@if ($dark-contrast >= $min-contrast-ratio) {
@return $dark;
} @else if ($light-contrast >= $min-contrast-ratio) {
@return $light;
} @else {
@return if($light-contrast < $dark-contrast, #000000, #ffffff);
}
}
@each $color, $hex in $all-colors {
.bg-#{$color} {
background-color: $hex;
color: get-contrasting-text-color($hex);
}
.bg-gradient-x-#{$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)
);
}
.bg-gradient-y-#{$color} {
--#{$prefix}gradient-start: 0%;
--#{$prefix}gradient-end: 100%;
--#{$prefix}gradient-to: transparent;
@include gradient-y(
$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;
}
i {
font-size: 1.5rem;
}
html,
body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
gap: 0;
}
a {
text-decoration-thickness: 2px;
}
@media (min-width: 992px) {
.toc-margin {
max-width: 70%;
margin-left: 0;
}
}