/** * Bootstrap variables * * This sets our defaults for the Bootstrap variables. */ @use "brand" as *; @use "colours" as *; @use "icons" as *; @use "variables" as *; // Legacy import for Bootstrap variable functions @import "functions"; $edgel-shadow: 0 4px 6px -5px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .1); $edgel-shadow-light: 0 2px 1px -1px rgba(0, 0, 0, .15); $enable-dark-mode: false; // Colours $white: $white; $gray-100: $gray-100; $gray-200: $gray-200; $gray-300: $gray-300; $gray-400: $gray-400; $gray-500: $gray-500; $gray-600: $gray-600; $gray-700: $gray-700; $gray-800: $gray-800; $gray-900: $gray-900; $black: $black; $primary: $dark; $secondary: $light; $colors: ( "brand-link": $brand-link-color, "brand-hover": $brand-hover, "brand-bg-text": $brand-bg-text, "brand-as-link": $brand-as-link, "brand-as-link-hover": $brand-as-link-hover, "white": $white, "gray": $gray-600, "gray-dark": $gray-800 ); $color-contrast-light: $color-contrast-light; $color-contrast-dark: $color-contrast-dark; $min-contrast-ratio: $min-contrast-ratio; $theme-colors: ( "brand": $brand-color, "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ); $brand-text-emphasis: shade-color($brand-color, 60%); $brand-bg-subtle: tint-color($brand-color, 80%); $brand-border-subtle: tint-color($brand-color, 60%); // Primary is equivalent to dark settings $primary-text-emphasis: $gray-700; $primary-bg-subtle: $gray-400; $primary-border-subtle: $gray-500; // Secondary is equivalent to light settings $secondary-text-emphasis: $gray-700; $secondary-bg-subtle: mix($gray-100, $white); $secondary-border-subtle: $gray-200; // Options // // EdGEL's settings should not be overridden. $enable-caret: true; $enable-rounded: true; $enable-shadows: true; $enable-gradients: false; $enable-transitions: true; $enable-reduced-motion: true; $enable-smooth-scroll: true; $enable-grid-classes: true; $enable-button-pointers: true; $enable-rfs: true; $enable-validation-icons: true; $enable-negative-margins: false; $enable-deprecation-messages: true; $enable-important-utilities: true; // Prefix for :root CSS variables $prefix: "edgel-"; // Spacing // // Control the default styling of most Bootstrap elements by modifying these // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. $spacer: 1rem; $spacers: ( 0: 0, 1: $spacer * .375, 2: $spacer * .625, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 2, 6: $spacer * 4, ); // Body // // Settings for the `` element. $body-bg: #e8e8e8; $body-color: $gray-800; $body-secondary-bg: $gray-200; $body-secondary-color: $gray-600; $body-tertiary-bg: $gray-100; $body-tertiary-color: $body-color; $body-emphasis-color: $body-color; $body-text-align: start; $focus-ring-blur: 0; $focus-ring-width: .25rem; $focus-ring-opacity: .72; $focus-ring-color: rgba($dark, $focus-ring-opacity); $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color; // Links // // Style anchor elements. $link-color: $body-color; $link-decoration: null; // See _unset.scss $link-shade-percentage: 0; $link-hover-color: $link-hover-color; $link-hover-decoration: null; // See _unset.scss $icon-link-underline-offset: $link-underline-offset; // Paragraphs // // Style p element. $paragraph-margin-bottom: .8rem; // Grid breakpoints // // Define the minimum dimensions at which your layout will change; // adapting to different screen sizes, for use in media queries. $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); $grid-gutter-width: space(5); // Grid containers // // Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( sm: 767px, md: 991px, lg: 1199px, xl: 1399px, xxl: 1600px ); // Components // // Define common padding and border radius sizes and more. $border-width: 1px; $border-color: #8e8e8e; $border-radius: .25rem; $border-radius-lg: .3rem; $border-radius-sm: .2rem; $caret-width: .3em; $hr-opacity: .55; $transition-base: all .2s ease-in-out; $transition-fade: opacity .15s linear; $transition-duration: .35s; $transition-collapse: height $transition-duration ease; $transition-collapse-width: width $transition-duration ease; // Typography // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case $font-family-sans-serif: "Source Sans Pro", sans-serif; $font-family-serif: "Crimson Text", serif; $font-family-base: $font-family-sans-serif; // stylelint-enable value-keyword-case $font-size-base: 1.15rem; // 18.4px for very wide viewports. RFS reduces this. $font-size-lg: $font-size-base * 1.25; $font-size-sm: $font-size-base * .875; $font-weight-semibold: 600; $line-height-base: 1.5; $line-height-lg: 1.6; $line-height-sm: 1.2; $h6-font-size: $font-size-base; $h5-font-size: $h6-font-size * 1.2; $h4-font-size: $h5-font-size * 1.2; $h3-font-size: $h4-font-size * 1.2; $h2-font-size: $h3-font-size * 1.2; $h1-font-size: $h2-font-size * 1.2; $display-font-sizes: (); $headings-margin-bottom: $spacer * .5; $headings-font-family: inherit; $headings-font-weight: 300; $headings-color: inherit; $headings-line-height: $line-height-sm; $lead-font-size: $font-size-base * 1.3; $lead-font-weight: 400; $small-font-size: $font-size-base * .85; $blockquote-font-size: $font-size-base * 1.25; $mark-color: $black; $code-color: $black; // Tables // // Customizes the `.table` component with basic values, each used across all table variations. $table-bg: transparent; $table-accent-bg: transparent; $table-hover-bg: $gray-300; $table-active-bg: $gray-300; $table-striped-bg: $gray-200; $table-border-color: $gray-400; $table-caption-color: $body-color; $table-bg-scale: -80%; $table-variants: ( "success": shift-color($success, $table-bg-scale), "info": shift-color($info, $table-bg-scale), "warning": shift-color($warning, $table-bg-scale), "danger": shift-color($danger, $table-bg-scale), "light": $light, "dark": $dark, "brand": $brand-color, ); // Forms $box-shadow-inset: inset 0 1px 5px rgba($black, .2); $btn-box-shadow: 0 0; $btn-link-disabled-color: $gray-700; $input-bg: $gray-200; $input-group-addon-bg: $input-bg; $input-disabled-bg: $gray-300; $input-color: $gray-800; $input-placeholder-color: $gray-700; $input-btn-padding-y: .275rem; $input-btn-padding-y-sm: .175rem; $input-btn-padding-y-lg: .3rem; $form-label-font-weight: 700; $form-range-track-bg: $gray-300; $form-check-input-disabled-opacity: .75; $form-floating-label-opacity: .75; $form-floating-input-padding-t: 1.5rem; $form-floating-input-padding-b: .2rem; $form-floating-label-transform: scale(.85) translateY(-.8rem) translateX(.15rem); $form-range-thumb-disabled-bg: $gray-500; $form-range-thumb-focus-box-shadow: inset 0 0 0 2px $white, $focus-ring-box-shadow; $form-feedback-valid-color: shade-color($success, 5%); $form-feedback-invalid-color: shade-color($danger, 5%); $component-active-bg: $dark; // Navbar $navbar-dark-color: $white; $navbar-dark-hover-color: $dark; $navbar-dark-active-color: $dark; $navbar-dark-brand-color: $white; $navbar-dark-brand-hover-color: $white; $navbar-padding-y: 0; $navbar-padding-x: 0; $navbar-nav-link-padding-x: space(3); $navbar-nav-link-padding-y: space(2); $navbar-light-toggler-icon-bg: ""; $navbar-dark-toggler-icon-bg: ""; // Dropdown $dropdown-bg: $white; $dropdown-link-hover-bg: var(--#{$prefix}secondary-bg); // Pagination $pagination-border-radius: 0; $pagination-border-radius-sm: 0; $pagination-border-radius-lg: 0; $pagination-color: $link-color; $pagination-bg: $white; $pagination-border-color: transparent; $pagination-hover-bg: $gray-200; $pagination-hover-border-color: transparent; $pagination-active-color: $brand-bg-text; $pagination-active-bg: $brand-color; $pagination-active-border-color: $brand-color; $pagination-disabled-color: $gray-600; $pagination-disabled-bg: $white; $pagination-disabled-border-color: transparent; // Cards $card-bg: $white; $card-spacer-y: .75rem; $card-spacer-x: 1.25rem; $card-title-spacer-y: 0; $card-border-width: 0; $card-border-color: transparent; $card-cap-padding-y: .75rem; $card-cap-padding-x: 1.25rem; $card-cap-bg: $card-bg; $card-img-overlay-padding: 1.25rem; $card-box-shadow: $edgel-shadow; // Figures $figure-caption-color: $gray-600; // Breadcrumbs $breadcrumb-font-size: $font-size-sm; $breadcrumb-padding-y: space(1); $breadcrumb-padding-x: space(2); $breadcrumb-item-padding-x: .5rem; $breadcrumb-margin-bottom: 0; $breadcrumb-bg: $gray-300; $breadcrumb-divider-color: $gray-600; $breadcrumb-active-color: $black; $breadcrumb-divider: quote(">"); $breadcrumb-divider-flipped: quote("<"); $breadcrumb-border-radius: .25rem; // Carousel $carousel-control-color: $white; $carousel-control-width: 5rem; $carousel-control-icon-filter: null; $carousel-control-icon-width: 5rem; $carousel-indicator-active-bg: $white; $carousel-caption-width: 100%; $carousel-caption-color: $white; $carousel-caption-padding-y: space(3); $carousel-caption-spacer: null; // See _icons.scss $carousel-control-prev-icon-bg: $uoe-previous-icon; $carousel-control-next-icon-bg: $uoe-next-icon; // We don't support the dark carousel - all set to match light mode $carousel-indicator-active-bg-dark: $carousel-indicator-active-bg; $carousel-caption-color-dark: $carousel-caption-color; $carousel-control-icon-filter-dark: null; // Responsive Font Sizing $rfs-rem-value: 16; $rfs-breakpoint: 1600; $rfs-breakpoint-unit: px; $rfs-base-value: 11; $rfs-unit: rem; $rfs-factor: 2; // Accordion $accordion-padding-y: space(3); $accordion-padding-x: 1.25rem; $accordion-bg: $white; $accordion-color: $body-color; $accordion-button-bg: $brand-color; $accordion-button-color: $brand-bg-text; $accordion-button-active-bg: $accordion-button-bg; $accordion-button-active-color: $accordion-button-color; $accordion-border-width: 0; $accordion-border-color: transparent; $accordion-border-radius: 0; $accordion-inner-border-radius: 0; $accordion-button-padding-x: $accordion-padding-x; $accordion-button-padding-y: .25rem; $accordion-button-focus-border-color: tint-color($accordion-button-bg, 50%); $accordion-button-focus-box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba($accordion-button-bg, $focus-ring-opacity); $accordion-icon-transform: null; $accordion-icon-width: 1.5rem; $accordion-icon-color: $brand-bg-text; $accordion-icon-active-color: $brand-bg-text; $accordion-button-icon: url("data:image/svg+xml,"); $accordion-button-active-icon: url("data:image/svg+xml,"); // Progress bars $progress-bar-bg: $brand-color; $progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); // List groups $list-group-bg: $white; $list-group-active-color: $brand-bg-text; $list-group-active-bg: $brand-color; $list-group-action-color: $body-color; $list-group-color: $body-color; // Toasts $toast-border-radius: 0; $toast-background-color: rgba($white, .85); $toast-header-background-color: $gray-100; // Modals $modal-content-bg: $white; // Offcanvas $offcanvas-bg-color: $white; /* eslint-enable scss/dollar-variable-default */ // Legacy import of variables since needs to access functions in same scope @import "bootstrap/scss/variables"; $theme-colors-text: ( "primary": $primary-text-emphasis, "brand": $brand-text-emphasis, "success": $success-text-emphasis, "info": $info-text-emphasis, "warning": $warning-text-emphasis, "danger": $danger-text-emphasis, "light": $light-text-emphasis, "dark": $dark-text-emphasis, ); $theme-colors-bg-subtle: ( "primary": $primary-bg-subtle, "brand": $brand-bg-subtle, "success": $success-bg-subtle, "info": $info-bg-subtle, "warning": $warning-bg-subtle, "danger": $danger-bg-subtle, "light": $light-bg-subtle, "dark": $dark-bg-subtle, ); $theme-colors-border-subtle: ( "primary": $primary-border-subtle, "brand": $brand-border-subtle, "success": $success-border-subtle, "info": $info-border-subtle, "warning": $warning-border-subtle, "danger": $danger-border-subtle, "light": $light-border-subtle, "dark": $dark-border-subtle, ); @import "bootstrap/scss/maps";