1015 lines
30 KiB
SCSS
1015 lines
30 KiB
SCSS
// Variables
|
|
|
|
//
|
|
// custom-variables
|
|
//
|
|
|
|
$fw-medium: 600;
|
|
|
|
//Custom Fonts
|
|
// $font-family-secondary: 'Nunito', sans-serif;
|
|
|
|
$text-default: #3C4257;
|
|
$muted: #6b7686;
|
|
$dark: #3c4858;
|
|
$btn-color: #ffffff;
|
|
$body-color: $text-default;
|
|
|
|
//Body Background
|
|
$shadow-sm: 0 .125rem .25rem rgba($dark,.15);
|
|
$shadow: 0 0 3px rgba($dark,.15);
|
|
$shadow-md: 0 5px 13px rgba($dark, .2);
|
|
$shadow-lg: 0 10px 25px rgba($dark, 0.15);
|
|
|
|
// Overlay
|
|
$overlay: rgba($dark, 0.7);
|
|
$bg-overlay-white: rgba($white, 0.5);
|
|
$bg-gradient-primary: linear-gradient(to left, darken($purple, 10%) 0%, darken($primary, 10%) 100%);
|
|
$linear-gradient: linear-gradient(to bottom, rgba($black, 0) 0%, rgba($black, 0.0) 50%, rgba($black, 0.3) 80%, rgba($black, 1) 100%);
|
|
$linear-gradient-2: linear-gradient(to bottom, rgba($black, 0) 0%, rgba($black, 0.3) 50%, rgba($black, 0.7) 75%, rgba($black, 1) 100%);
|
|
$linear-gradient-3: linear-gradient(to right, rgba($black, 1) 0%, rgba($black, 1) 25%, rgba($black, 1) 50%, rgba($black, 0.5) 75%, rgba($black, 0) 100%);
|
|
$gradient-overlay: linear-gradient(to bottom, rgba($black, 0) 0%, rgba($black, 0.5) 25%, rgba($black, 0.75) 50%, rgba($black, 1) 100%);
|
|
$gradient-overlay-2: linear-gradient(to bottom, rgba($black,0.5) 0%, rgba($black,0.6) 25%, rgba($black,0.7) 50%, rgba($black,0.8) 100%);
|
|
$primary-gradient-overlay: linear-gradient(to bottom, rgba($primary, 0) 0%, rgba($primary, 0.25) 25%, rgba($primary, 0.50) 50%, rgba($primary, 0.75) 75%, rgba($primary, 1) 100%);
|
|
$gradient-white-overlay: linear-gradient(to bottom, rgba($white, 0) 0%, rgba($white, 0) 25%, rgba($white, 0) 50%, rgba($white, 0.5) 100%);
|
|
$card-overlay: linear-gradient(to bottom, transparent 0%, transparent 25%, transparent 35%, rgba($black, 0.9) 100%);
|
|
|
|
//Topnav
|
|
$nav-sticky-bg: $white;
|
|
$submenu-bg: $white;
|
|
$megamenu-head-text: $body-color;
|
|
$topnav-bg: $white;
|
|
$navbar-white-bg: $white;
|
|
$topnav-white-color: $white;
|
|
$topnav-dark-color: $dark;
|
|
|
|
//Back to top
|
|
$back-to-top-color: $white;
|
|
|
|
//Footer
|
|
$footer: #202942;
|
|
$footer-text: #adb5bd;
|
|
$footer-head-color: $white;
|
|
$foot-social-color: #adb5bd;
|
|
$social-icon-color: #adb5bd;
|
|
$social-border-color: #adb5bd;
|
|
$foot-social-color-white: $white;
|
|
|
|
//CTA
|
|
$play-btn-border: $white;
|
|
$play-btn-icon: $white;
|
|
|
|
//Nav-pills
|
|
$nav-pills-bg: $dark;
|
|
$nav-pills-color: $white;
|
|
|
|
//Forms
|
|
$form-placeholder: $dark;
|
|
$subscribe-form-bg: $white;
|
|
$datepicker-bg: $white;
|
|
$datepicker-text: $dark;
|
|
|
|
//Features
|
|
$feature-text-white: $white;
|
|
|
|
//text
|
|
$text-color-white: $body-bg;
|
|
$bg-white-color: $white;
|
|
|
|
$heading-font-sizes: (
|
|
"h1": 42px,
|
|
"h2": 36px,
|
|
"h3": 30px,
|
|
"h4": 24px,
|
|
"h5": 20px,
|
|
"h6": 16px,
|
|
);
|
|
|
|
$display-font-sizes: (
|
|
"display-1": 80px,
|
|
"display-2": 72px,
|
|
"display-3": 64px,
|
|
"display-4": 56px,
|
|
"display-5": 48px,
|
|
"display-6": 40px,
|
|
);
|
|
|
|
// Variables
|
|
//
|
|
// Variables should follow the `$component-state-property-size` formula for
|
|
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
|
|
|
// Color system
|
|
|
|
// scss-docs-start gray-color-variables
|
|
$white: #ffffff;
|
|
$gray-100: #f8f9fa;
|
|
$gray-200: #e9ecef;
|
|
$gray-300: #dee2e6;
|
|
$gray-400: #ced4da;
|
|
$gray-500: #adb5bd;
|
|
$gray-600: #6c757d;
|
|
$gray-700: #495057;
|
|
$gray-800: #343a40;
|
|
$gray-900: #212529;
|
|
$black: #000000;
|
|
// scss-docs-end gray-color-variables
|
|
|
|
// fusv-disable
|
|
// scss-docs-start gray-colors-map
|
|
$grays: (
|
|
"100": $gray-100,
|
|
"200": $gray-200,
|
|
"300": $gray-300,
|
|
"400": $gray-400,
|
|
"500": $gray-500,
|
|
"600": $gray-600,
|
|
"700": $gray-700,
|
|
"800": $gray-800,
|
|
"900": $gray-900
|
|
);
|
|
// scss-docs-end gray-colors-map
|
|
// fusv-enable
|
|
|
|
// scss-docs-start color-variables
|
|
$blue: #0066ff; /*#4d80ff*/
|
|
$indigo: #6610f2;
|
|
$purple: #7952B3;
|
|
$pink: #d63384;
|
|
$red: #e43f52;
|
|
$orange: #fd7e14;
|
|
$yellow: #f17425;
|
|
$green: #2eca8b;
|
|
$teal: #20c997;
|
|
$cyan: #17a2b8;
|
|
// scss-docs-end color-variables
|
|
|
|
// scss-docs-start colors-map
|
|
$colors: (
|
|
"blue": $blue,
|
|
"indigo": $indigo,
|
|
"purple": $purple,
|
|
"pink": $pink,
|
|
"red": $red,
|
|
"orange": $orange,
|
|
"yellow": $yellow,
|
|
"green": $green,
|
|
"teal": $teal,
|
|
"cyan": $cyan,
|
|
"white": $white,
|
|
"gray": $gray-600,
|
|
"gray-dark": $gray-800,
|
|
);
|
|
// scss-docs-end colors-map
|
|
|
|
// scss-docs-start theme-color-variables
|
|
$primary: $blue;
|
|
$secondary: $gray-600;
|
|
$success: $green;
|
|
$info: $cyan;
|
|
$warning: $yellow;
|
|
$danger: $red;
|
|
$light: $gray-100;
|
|
$dark: $dark;
|
|
// scss-docs-end theme-color-variables
|
|
|
|
// scss-docs-start theme-colors-map
|
|
$theme-colors: (
|
|
"primary": $primary,
|
|
"secondary": $secondary,
|
|
"success": $success,
|
|
"info": $info,
|
|
"warning": $warning,
|
|
"danger": $danger,
|
|
"light": $light,
|
|
"dark": $dark,
|
|
"footer": $footer,
|
|
"muted": $muted
|
|
);
|
|
// scss-docs-end theme-colors-map
|
|
|
|
// scss-docs-start theme-colors-rgb
|
|
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
|
|
// scss-docs-end theme-colors-rgb
|
|
|
|
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
|
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
|
$min-contrast-ratio: 1.8;
|
|
|
|
// Customize the light and dark text colors for use in our color contrast function.
|
|
$color-contrast-dark: $black;
|
|
$color-contrast-light: $white;
|
|
|
|
// fusv-disable
|
|
$blue-100: tint-color($blue, 80%);
|
|
$blue-200: tint-color($blue, 60%);
|
|
$blue-300: tint-color($blue, 40%);
|
|
$blue-400: tint-color($blue, 20%);
|
|
$blue-500: $blue;
|
|
$blue-600: shade-color($blue, 20%);
|
|
$blue-700: shade-color($blue, 40%);
|
|
$blue-800: shade-color($blue, 60%);
|
|
$blue-900: shade-color($blue, 80%);
|
|
|
|
$indigo-100: tint-color($indigo, 80%);
|
|
$indigo-200: tint-color($indigo, 60%);
|
|
$indigo-300: tint-color($indigo, 40%);
|
|
$indigo-400: tint-color($indigo, 20%);
|
|
$indigo-500: $indigo;
|
|
$indigo-600: shade-color($indigo, 20%);
|
|
$indigo-700: shade-color($indigo, 40%);
|
|
$indigo-800: shade-color($indigo, 60%);
|
|
$indigo-900: shade-color($indigo, 80%);
|
|
|
|
$purple-100: tint-color($purple, 80%);
|
|
$purple-200: tint-color($purple, 60%);
|
|
$purple-300: tint-color($purple, 40%);
|
|
$purple-400: tint-color($purple, 20%);
|
|
$purple-500: $purple;
|
|
$purple-600: shade-color($purple, 20%);
|
|
$purple-700: shade-color($purple, 40%);
|
|
$purple-800: shade-color($purple, 60%);
|
|
$purple-900: shade-color($purple, 80%);
|
|
|
|
$pink-100: tint-color($pink, 80%);
|
|
$pink-200: tint-color($pink, 60%);
|
|
$pink-300: tint-color($pink, 40%);
|
|
$pink-400: tint-color($pink, 20%);
|
|
$pink-500: $pink;
|
|
$pink-600: shade-color($pink, 20%);
|
|
$pink-700: shade-color($pink, 40%);
|
|
$pink-800: shade-color($pink, 60%);
|
|
$pink-900: shade-color($pink, 80%);
|
|
|
|
$red-100: tint-color($red, 80%);
|
|
$red-200: tint-color($red, 60%);
|
|
$red-300: tint-color($red, 40%);
|
|
$red-400: tint-color($red, 20%);
|
|
$red-500: $red;
|
|
$red-600: shade-color($red, 20%);
|
|
$red-700: shade-color($red, 40%);
|
|
$red-800: shade-color($red, 60%);
|
|
$red-900: shade-color($red, 80%);
|
|
|
|
$orange-100: tint-color($orange, 80%);
|
|
$orange-200: tint-color($orange, 60%);
|
|
$orange-300: tint-color($orange, 40%);
|
|
$orange-400: tint-color($orange, 20%);
|
|
$orange-500: $orange;
|
|
$orange-600: shade-color($orange, 20%);
|
|
$orange-700: shade-color($orange, 40%);
|
|
$orange-800: shade-color($orange, 60%);
|
|
$orange-900: shade-color($orange, 80%);
|
|
|
|
$yellow-100: tint-color($yellow, 80%);
|
|
$yellow-200: tint-color($yellow, 60%);
|
|
$yellow-300: tint-color($yellow, 40%);
|
|
$yellow-400: tint-color($yellow, 20%);
|
|
$yellow-500: $yellow;
|
|
$yellow-600: shade-color($yellow, 20%);
|
|
$yellow-700: shade-color($yellow, 40%);
|
|
$yellow-800: shade-color($yellow, 60%);
|
|
$yellow-900: shade-color($yellow, 80%);
|
|
|
|
$green-100: tint-color($green, 80%);
|
|
$green-200: tint-color($green, 60%);
|
|
$green-300: tint-color($green, 40%);
|
|
$green-400: tint-color($green, 20%);
|
|
$green-500: $green;
|
|
$green-600: shade-color($green, 20%);
|
|
$green-700: shade-color($green, 40%);
|
|
$green-800: shade-color($green, 60%);
|
|
$green-900: shade-color($green, 80%);
|
|
|
|
$teal-100: tint-color($teal, 80%);
|
|
$teal-200: tint-color($teal, 60%);
|
|
$teal-300: tint-color($teal, 40%);
|
|
$teal-400: tint-color($teal, 20%);
|
|
$teal-500: $teal;
|
|
$teal-600: shade-color($teal, 20%);
|
|
$teal-700: shade-color($teal, 40%);
|
|
$teal-800: shade-color($teal, 60%);
|
|
$teal-900: shade-color($teal, 80%);
|
|
|
|
$cyan-100: tint-color($cyan, 80%);
|
|
$cyan-200: tint-color($cyan, 60%);
|
|
$cyan-300: tint-color($cyan, 40%);
|
|
$cyan-400: tint-color($cyan, 20%);
|
|
$cyan-500: $cyan;
|
|
$cyan-600: shade-color($cyan, 20%);
|
|
$cyan-700: shade-color($cyan, 40%);
|
|
$cyan-800: shade-color($cyan, 60%);
|
|
$cyan-900: shade-color($cyan, 80%);
|
|
|
|
$blues: (
|
|
"blue-100": $blue-100,
|
|
"blue-200": $blue-200,
|
|
"blue-300": $blue-300,
|
|
"blue-400": $blue-400,
|
|
"blue-500": $blue-500,
|
|
"blue-600": $blue-600,
|
|
"blue-700": $blue-700,
|
|
"blue-800": $blue-800,
|
|
"blue-900": $blue-900
|
|
);
|
|
|
|
$indigos: (
|
|
"indigo-100": $indigo-100,
|
|
"indigo-200": $indigo-200,
|
|
"indigo-300": $indigo-300,
|
|
"indigo-400": $indigo-400,
|
|
"indigo-500": $indigo-500,
|
|
"indigo-600": $indigo-600,
|
|
"indigo-700": $indigo-700,
|
|
"indigo-800": $indigo-800,
|
|
"indigo-900": $indigo-900
|
|
);
|
|
|
|
$purples: (
|
|
"purple-100": $purple-200,
|
|
"purple-200": $purple-100,
|
|
"purple-300": $purple-300,
|
|
"purple-400": $purple-400,
|
|
"purple-500": $purple-500,
|
|
"purple-600": $purple-600,
|
|
"purple-700": $purple-700,
|
|
"purple-800": $purple-800,
|
|
"purple-900": $purple-900
|
|
);
|
|
|
|
$pinks: (
|
|
"pink-100": $pink-100,
|
|
"pink-200": $pink-200,
|
|
"pink-300": $pink-300,
|
|
"pink-400": $pink-400,
|
|
"pink-500": $pink-500,
|
|
"pink-600": $pink-600,
|
|
"pink-700": $pink-700,
|
|
"pink-800": $pink-800,
|
|
"pink-900": $pink-900
|
|
);
|
|
|
|
$reds: (
|
|
"red-100": $red-100,
|
|
"red-200": $red-200,
|
|
"red-300": $red-300,
|
|
"red-400": $red-400,
|
|
"red-500": $red-500,
|
|
"red-600": $red-600,
|
|
"red-700": $red-700,
|
|
"red-800": $red-800,
|
|
"red-900": $red-900
|
|
);
|
|
|
|
$oranges: (
|
|
"orange-100": $orange-100,
|
|
"orange-200": $orange-200,
|
|
"orange-300": $orange-300,
|
|
"orange-400": $orange-400,
|
|
"orange-500": $orange-500,
|
|
"orange-600": $orange-600,
|
|
"orange-700": $orange-700,
|
|
"orange-800": $orange-800,
|
|
"orange-900": $orange-900
|
|
);
|
|
|
|
$yellows: (
|
|
"yellow-100": $yellow-100,
|
|
"yellow-200": $yellow-200,
|
|
"yellow-300": $yellow-300,
|
|
"yellow-400": $yellow-400,
|
|
"yellow-500": $yellow-500,
|
|
"yellow-600": $yellow-600,
|
|
"yellow-700": $yellow-700,
|
|
"yellow-800": $yellow-800,
|
|
"yellow-900": $yellow-900
|
|
);
|
|
|
|
$greens: (
|
|
"green-100": $green-100,
|
|
"green-200": $green-200,
|
|
"green-300": $green-300,
|
|
"green-400": $green-400,
|
|
"green-500": $green-500,
|
|
"green-600": $green-600,
|
|
"green-700": $green-700,
|
|
"green-800": $green-800,
|
|
"green-900": $green-900
|
|
);
|
|
|
|
$teals: (
|
|
"teal-100": $teal-100,
|
|
"teal-200": $teal-200,
|
|
"teal-300": $teal-300,
|
|
"teal-400": $teal-400,
|
|
"teal-500": $teal-500,
|
|
"teal-600": $teal-600,
|
|
"teal-700": $teal-700,
|
|
"teal-800": $teal-800,
|
|
"teal-900": $teal-900
|
|
);
|
|
|
|
$cyans: (
|
|
"cyan-100": $cyan-100,
|
|
"cyan-200": $cyan-200,
|
|
"cyan-300": $cyan-300,
|
|
"cyan-400": $cyan-400,
|
|
"cyan-500": $cyan-500,
|
|
"cyan-600": $cyan-600,
|
|
"cyan-700": $cyan-700,
|
|
"cyan-800": $cyan-800,
|
|
"cyan-900": $cyan-900
|
|
);
|
|
// fusv-enable
|
|
|
|
// Characters which are escaped by the escape-svg function
|
|
$escaped-characters: (
|
|
("<", "%3c"),
|
|
(">", "%3e"),
|
|
("#", "%23"),
|
|
("(", "%28"),
|
|
(")", "%29"),
|
|
);
|
|
|
|
// Options
|
|
//
|
|
// Quickly modify global styling by enabling or disabling optional features.
|
|
|
|
$enable-caret: true;
|
|
$enable-rounded: true;
|
|
$enable-shadows: false;
|
|
$enable-gradients: false;
|
|
$enable-transitions: true;
|
|
$enable-reduced-motion: true;
|
|
$enable-smooth-scroll: true;
|
|
$enable-grid-classes: true;
|
|
$enable-cssgrid: false;
|
|
$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
|
|
|
|
$variable-prefix: bs-;
|
|
|
|
// Gradient
|
|
//
|
|
// The gradient which is added to components if `$enable-gradients` is `true`
|
|
// This gradient is also added to elements with `.bg-gradient`
|
|
// scss-docs-start variable-gradient
|
|
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));
|
|
// scss-docs-end variable-gradient
|
|
|
|
// 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.
|
|
|
|
// scss-docs-start spacer-variables-maps
|
|
$spacer: 1rem;
|
|
$spacers: (
|
|
0: 0,
|
|
1: $spacer * .25,
|
|
2: $spacer * .5,
|
|
3: $spacer,
|
|
4: $spacer * 1.5,
|
|
5: $spacer * 3,
|
|
);
|
|
|
|
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
|
|
// scss-docs-end spacer-variables-maps
|
|
|
|
// Position
|
|
//
|
|
// Define the edge positioning anchors of the position utilities.
|
|
|
|
// scss-docs-start position-map
|
|
$position-values: (
|
|
0: 0,
|
|
50: 50%,
|
|
100: 100%
|
|
);
|
|
// scss-docs-end position-map
|
|
|
|
// Body
|
|
//
|
|
// Settings for the `<body>` element.
|
|
|
|
$body-bg: $white;
|
|
$body-text-align: null;
|
|
|
|
// Utilities maps
|
|
//
|
|
// Extends the default `$theme-colors` maps to help create our utilities.
|
|
|
|
// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
|
|
// scss-docs-start utilities-colors
|
|
$utilities-colors: $theme-colors-rgb;
|
|
// scss-docs-end utilities-colors
|
|
|
|
// scss-docs-start utilities-text-colors
|
|
$utilities-text: map-merge(
|
|
$utilities-colors,
|
|
(
|
|
"black": to-rgb($black),
|
|
"white": to-rgb($white),
|
|
"body": to-rgb($body-color)
|
|
)
|
|
);
|
|
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
|
|
// scss-docs-end utilities-text-colors
|
|
|
|
// scss-docs-start utilities-bg-colors
|
|
$utilities-bg: map-merge(
|
|
$utilities-colors,
|
|
(
|
|
"black": to-rgb($black),
|
|
"white": to-rgb($white),
|
|
"body": to-rgb($body-bg)
|
|
)
|
|
);
|
|
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
|
|
// scss-docs-end utilities-bg-colors
|
|
|
|
// Links
|
|
//
|
|
// Style anchor elements.
|
|
|
|
$link-color: $primary;
|
|
$link-decoration: underline;
|
|
$link-shade-percentage: 20%;
|
|
$link-hover-color: shift-color($link-color, $link-shade-percentage);
|
|
$link-hover-decoration: null;
|
|
|
|
$stretched-link-pseudo-element: after;
|
|
$stretched-link-z-index: 1;
|
|
|
|
// Paragraphs
|
|
//
|
|
// Style p element.
|
|
|
|
$paragraph-margin-bottom: 1rem;
|
|
|
|
|
|
// Grid breakpoints
|
|
//
|
|
// Define the minimum dimensions at which your layout will change,
|
|
// adapting to different screen sizes, for use in media queries.
|
|
|
|
// scss-docs-start grid-breakpoints
|
|
$grid-breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
xxl: 1400px
|
|
);
|
|
// scss-docs-end grid-breakpoints
|
|
|
|
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
|
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
|
|
|
|
|
|
// Grid containers
|
|
//
|
|
// Define the maximum width of `.container` for different screen sizes.
|
|
|
|
// scss-docs-start container-max-widths
|
|
$container-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1140px,
|
|
xxl: 1320px
|
|
);
|
|
// scss-docs-end container-max-widths
|
|
|
|
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
|
|
|
|
|
// Grid columns
|
|
//
|
|
// Set the number of columns and specify the width of the gutters.
|
|
|
|
$grid-columns: 12;
|
|
$grid-gutter-width: 1.5rem;
|
|
$grid-row-columns: 6;
|
|
|
|
$gutters: $spacers;
|
|
|
|
// Container padding
|
|
|
|
$container-padding-x: $grid-gutter-width;
|
|
|
|
|
|
// Components
|
|
//
|
|
// Define common padding and border radius sizes and more.
|
|
|
|
// scss-docs-start border-variables
|
|
$border-width: 1px;
|
|
$border-widths: (
|
|
1: 1px,
|
|
2: 2px,
|
|
3: 3px,
|
|
4: 4px,
|
|
5: 5px
|
|
);
|
|
|
|
$border-color: $gray-200;
|
|
// scss-docs-end border-variables
|
|
|
|
// scss-docs-start border-radius-variables
|
|
$border-radius: .25rem;
|
|
$border-radius-sm: .2rem;
|
|
$border-radius-lg: .3rem;
|
|
$border-radius-xl: 1rem;
|
|
$border-radius-2xl: 2rem;
|
|
$border-radius-pill: 50rem;
|
|
// scss-docs-end border-radius-variables
|
|
|
|
// scss-docs-start box-shadow-variables
|
|
$box-shadow: 0 .5rem 1rem rgba($black, .15);
|
|
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
|
|
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
|
|
$box-shadow-inset: inset 0 1px 2px rgba($black, .075);
|
|
// scss-docs-end box-shadow-variables
|
|
|
|
$component-active-color: $white;
|
|
$component-active-bg: $primary;
|
|
|
|
// scss-docs-start caret-variables
|
|
$caret-width: .3em;
|
|
$caret-vertical-align: $caret-width * .85;
|
|
$caret-spacing: $caret-width * .85;
|
|
// scss-docs-end caret-variables
|
|
|
|
$transition-base: all .2s ease-in-out;
|
|
$transition-fade: opacity .15s linear;
|
|
// scss-docs-start collapse-transition
|
|
$transition-collapse: height .35s ease;
|
|
$transition-collapse-width: width .35s ease;
|
|
// scss-docs-end collapse-transition
|
|
|
|
// stylelint-disable function-disallowed-list
|
|
// scss-docs-start aspect-ratios
|
|
$aspect-ratios: (
|
|
"1x1": 100%,
|
|
"4x3": calc(3 / 4 * 100%),
|
|
"16x9": calc(9 / 16 * 100%),
|
|
"21x9": calc(9 / 21 * 100%)
|
|
);
|
|
// scss-docs-end aspect-ratios
|
|
// stylelint-enable function-disallowed-list
|
|
|
|
// Typography
|
|
//
|
|
// Font, line-height, and color for body text, headings, and more.
|
|
|
|
// scss-docs-start font-variables
|
|
// stylelint-disable value-keyword-case
|
|
|
|
// $font-family-sans-serif: 'Nunito', sans-serif;
|
|
// $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
// stylelint-enable value-keyword-case
|
|
$font-family-base: var(--#{$variable-prefix}font-sans-serif);
|
|
$font-family-code: var(--#{$variable-prefix}font-monospace);
|
|
|
|
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
|
|
// $font-size-base affects the font size of the body text
|
|
$font-size-root: null;
|
|
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
|
|
$font-size-sm: $font-size-base * .875;
|
|
$font-size-lg: $font-size-base * 1.25;
|
|
|
|
$font-weight-lighter: lighter;
|
|
$font-weight-light: 300;
|
|
$font-weight-normal: 400;
|
|
$font-weight-bold: 700;
|
|
$font-weight-bolder: bolder;
|
|
|
|
$font-weight-base: $font-weight-normal;
|
|
|
|
$line-height-base: 1.5;
|
|
$line-height-sm: 1.25;
|
|
$line-height-lg: 2;
|
|
|
|
$h1-font-size: 42px;
|
|
$h2-font-size: 36px;
|
|
$h3-font-size: 30px;
|
|
$h4-font-size: 24px;
|
|
$h5-font-size: 20px;
|
|
$h6-font-size: 16px;
|
|
// scss-docs-end font-variables
|
|
|
|
// scss-docs-start font-sizes
|
|
$font-sizes: (
|
|
1: $h1-font-size,
|
|
2: $h2-font-size,
|
|
3: $h3-font-size,
|
|
4: $h4-font-size,
|
|
5: $h5-font-size,
|
|
6: $h6-font-size
|
|
);
|
|
// scss-docs-end font-sizes
|
|
|
|
// scss-docs-start headings-variables
|
|
$headings-margin-bottom: $spacer * .5;
|
|
$headings-font-family: null;
|
|
$headings-font-style: null;
|
|
$headings-font-weight: 500;
|
|
$headings-line-height: 1.2;
|
|
$headings-color: null;
|
|
// scss-docs-end headings-variables
|
|
|
|
// scss-docs-start display-headings
|
|
$display-font-sizes: (
|
|
1: 80px,
|
|
2: 72px,
|
|
3: 64px,
|
|
4: 56px,
|
|
5: 48px,
|
|
6: 40px
|
|
);
|
|
|
|
$display-font-weight: 300;
|
|
$display-line-height: $headings-line-height;
|
|
// scss-docs-end display-headings
|
|
|
|
// scss-docs-start type-variables
|
|
$lead-font-size: $font-size-base * 1.25;
|
|
$lead-font-weight: 300;
|
|
|
|
$small-font-size: .875em;
|
|
|
|
$sub-sup-font-size: .75em;
|
|
|
|
$text-muted: $muted;
|
|
|
|
$initialism-font-size: $small-font-size;
|
|
|
|
$blockquote-margin-y: $spacer;
|
|
$blockquote-font-size: $font-size-base * 1.25;
|
|
$blockquote-footer-color: $gray-600;
|
|
$blockquote-footer-font-size: $small-font-size;
|
|
|
|
$hr-margin-y: $spacer;
|
|
$hr-color: inherit;
|
|
$hr-height: $border-width;
|
|
$hr-opacity: .25;
|
|
|
|
$legend-margin-bottom: .5rem;
|
|
$legend-font-size: 1.5rem;
|
|
$legend-font-weight: null;
|
|
|
|
$mark-padding: .2em;
|
|
|
|
$dt-font-weight: $font-weight-bold;
|
|
|
|
$nested-kbd-font-weight: $font-weight-bold;
|
|
|
|
$list-inline-padding: .5rem;
|
|
|
|
$mark-bg: #fcf8e3;
|
|
// scss-docs-end type-variables
|
|
|
|
|
|
// Buttons + Forms
|
|
//
|
|
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
|
|
|
// scss-docs-start input-btn-variables
|
|
$input-btn-padding-y: .375rem;
|
|
$input-btn-padding-x: .75rem;
|
|
$input-btn-font-family: null;
|
|
$input-btn-font-size: $font-size-base;
|
|
$input-btn-line-height: $line-height-base;
|
|
|
|
$input-btn-focus-width: .25rem;
|
|
$input-btn-focus-color-opacity: .25;
|
|
$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity);
|
|
$input-btn-focus-blur: 0;
|
|
$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;
|
|
|
|
$input-btn-padding-y-sm: .25rem;
|
|
$input-btn-padding-x-sm: .5rem;
|
|
$input-btn-font-size-sm: $font-size-sm;
|
|
|
|
$input-btn-padding-y-lg: .5rem;
|
|
$input-btn-padding-x-lg: 1rem;
|
|
$input-btn-font-size-lg: $font-size-lg;
|
|
|
|
$input-btn-border-width: $border-width;
|
|
// scss-docs-end input-btn-variables
|
|
|
|
|
|
// Buttons
|
|
//
|
|
// For each of Bootstrap's buttons, define text, background, and border color.
|
|
|
|
// scss-docs-start btn-variables
|
|
$btn-padding-y: $input-btn-padding-y;
|
|
$btn-padding-x: $input-btn-padding-x;
|
|
$btn-font-family: $input-btn-font-family;
|
|
$btn-font-size: $input-btn-font-size;
|
|
$btn-line-height: $input-btn-line-height;
|
|
$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
|
|
|
|
$btn-padding-y-sm: $input-btn-padding-y-sm;
|
|
$btn-padding-x-sm: $input-btn-padding-x-sm;
|
|
$btn-font-size-sm: $input-btn-font-size-sm;
|
|
|
|
$btn-padding-y-lg: $input-btn-padding-y-lg;
|
|
$btn-padding-x-lg: $input-btn-padding-x-lg;
|
|
$btn-font-size-lg: $input-btn-font-size-lg;
|
|
|
|
$btn-border-width: $input-btn-border-width;
|
|
|
|
$btn-font-weight: $font-weight-normal;
|
|
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
|
|
$btn-focus-width: $input-btn-focus-width;
|
|
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
|
|
$btn-disabled-opacity: .65;
|
|
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
|
|
|
|
$btn-link-color: $link-color;
|
|
$btn-link-hover-color: $link-hover-color;
|
|
$btn-link-disabled-color: $gray-600;
|
|
|
|
// Allows for customizing button radius independently from global border radius
|
|
$btn-border-radius: $border-radius;
|
|
$btn-border-radius-sm: $border-radius-sm;
|
|
$btn-border-radius-lg: $border-radius-lg;
|
|
|
|
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
|
|
$btn-hover-bg-shade-amount: 15%;
|
|
$btn-hover-bg-tint-amount: 15%;
|
|
$btn-hover-border-shade-amount: 20%;
|
|
$btn-hover-border-tint-amount: 10%;
|
|
$btn-active-bg-shade-amount: 20%;
|
|
$btn-active-bg-tint-amount: 20%;
|
|
$btn-active-border-shade-amount: 25%;
|
|
$btn-active-border-tint-amount: 10%;
|
|
// scss-docs-end btn-variables
|
|
|
|
|
|
// Z-index master list
|
|
//
|
|
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
|
// of components dependent on the z-axis and are designed to all work together.
|
|
|
|
// scss-docs-start zindex-stack
|
|
$zindex-dropdown: 1000;
|
|
$zindex-sticky: 1020;
|
|
$zindex-fixed: 1030;
|
|
$zindex-offcanvas-backdrop: 1040;
|
|
$zindex-offcanvas: 1045;
|
|
$zindex-modal-backdrop: 1050;
|
|
$zindex-modal: 1055;
|
|
$zindex-popover: 1070;
|
|
$zindex-tooltip: 1080;
|
|
// scss-docs-end zindex-stack
|
|
|
|
|
|
// Navs
|
|
|
|
// scss-docs-start nav-variables
|
|
$nav-link-padding-y: .5rem;
|
|
$nav-link-padding-x: 1rem;
|
|
$nav-link-font-size: null;
|
|
$nav-link-font-weight: null;
|
|
$nav-link-color: $link-color;
|
|
$nav-link-hover-color: $link-hover-color;
|
|
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
|
|
$nav-link-disabled-color: $gray-600;
|
|
|
|
$nav-tabs-border-color: $gray-300;
|
|
$nav-tabs-border-width: $border-width;
|
|
$nav-tabs-border-radius: $border-radius;
|
|
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
|
|
$nav-tabs-link-active-color: $gray-700;
|
|
$nav-tabs-link-active-bg: $body-bg;
|
|
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;
|
|
|
|
$nav-pills-border-radius: $border-radius;
|
|
$nav-pills-link-active-color: $component-active-color;
|
|
$nav-pills-link-active-bg: $component-active-bg;
|
|
// scss-docs-end nav-variables
|
|
|
|
|
|
// Navbar
|
|
|
|
// scss-docs-start navbar-variables
|
|
$navbar-padding-y: $spacer * .5;
|
|
$navbar-padding-x: null;
|
|
|
|
$navbar-nav-link-padding-x: .5rem;
|
|
|
|
$navbar-brand-font-size: $font-size-lg;
|
|
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
|
|
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
|
|
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
|
|
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5;
|
|
$navbar-brand-margin-end: 1rem;
|
|
|
|
$navbar-toggler-padding-y: .25rem;
|
|
$navbar-toggler-padding-x: .75rem;
|
|
$navbar-toggler-font-size: $font-size-lg;
|
|
$navbar-toggler-border-radius: $btn-border-radius;
|
|
$navbar-toggler-focus-width: $btn-focus-width;
|
|
$navbar-toggler-transition: box-shadow .15s ease-in-out;
|
|
// scss-docs-end navbar-variables
|
|
|
|
// scss-docs-start navbar-theme-variables
|
|
$navbar-dark-color: rgba($white, .55);
|
|
$navbar-dark-hover-color: rgba($white, .75);
|
|
$navbar-dark-active-color: $white;
|
|
$navbar-dark-disabled-color: rgba($white, .25);
|
|
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
|
|
$navbar-dark-toggler-border-color: rgba($white, .1);
|
|
|
|
$navbar-light-color: rgba($black, .55);
|
|
$navbar-light-hover-color: rgba($black, .7);
|
|
$navbar-light-active-color: rgba($black, .9);
|
|
$navbar-light-disabled-color: rgba($black, .3);
|
|
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
|
|
$navbar-light-toggler-border-color: rgba($black, .1);
|
|
|
|
$navbar-light-brand-color: $navbar-light-active-color;
|
|
$navbar-light-brand-hover-color: $navbar-light-active-color;
|
|
$navbar-dark-brand-color: $navbar-dark-active-color;
|
|
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
|
|
// scss-docs-end navbar-theme-variables
|
|
|
|
|
|
// Cards
|
|
|
|
// scss-docs-start card-variables
|
|
$card-spacer-y: $spacer;
|
|
$card-spacer-x: $spacer;
|
|
$card-title-spacer-y: $spacer * .5;
|
|
$card-border-width: $border-width;
|
|
$card-border-color: rgba($black, .125);
|
|
$card-border-radius: $border-radius;
|
|
$card-box-shadow: null;
|
|
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
|
|
$card-cap-padding-y: $card-spacer-y * .5;
|
|
$card-cap-padding-x: $card-spacer-x;
|
|
$card-cap-bg: rgba($black, .03);
|
|
$card-cap-color: null;
|
|
$card-height: null;
|
|
$card-color: null;
|
|
$card-bg: $white;
|
|
$card-img-overlay-padding: $spacer;
|
|
$card-group-margin: $grid-gutter-width * .5;
|
|
// scss-docs-end card-variables
|
|
|
|
|
|
// Badges
|
|
|
|
// scss-docs-start badge-variables
|
|
$badge-font-size: .75em;
|
|
$badge-font-weight: $font-weight-bold;
|
|
$badge-color: $white;
|
|
$badge-padding-y: .35em;
|
|
$badge-padding-x: .65em;
|
|
$badge-border-radius: $border-radius;
|
|
// scss-docs-end badge-variables
|
|
|
|
|
|
// Close
|
|
|
|
// scss-docs-start close-variables
|
|
$btn-close-width: 1em;
|
|
$btn-close-height: $btn-close-width;
|
|
$btn-close-padding-x: .25em;
|
|
$btn-close-padding-y: $btn-close-padding-x;
|
|
$btn-close-color: $black;
|
|
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
|
|
$btn-close-focus-shadow: $input-btn-focus-box-shadow;
|
|
$btn-close-opacity: .5;
|
|
$btn-close-hover-opacity: .75;
|
|
$btn-close-focus-opacity: 1;
|
|
$btn-close-disabled-opacity: .25;
|
|
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
|
|
// scss-docs-end close-variables
|
|
|
|
// Code
|
|
|
|
$code-font-size: $small-font-size;
|
|
$code-color: $pink;
|
|
|
|
$kbd-padding-y: .2rem;
|
|
$kbd-padding-x: .4rem;
|
|
$kbd-font-size: $code-font-size;
|
|
$kbd-color: $white;
|
|
$kbd-bg: $gray-900;
|
|
|
|
$pre-color: null;
|