@import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; // These are the variables that most often changed from Bootstrap SCSS // Other variables can be found node_modules/bootstrap/scss/_variables.scss // Bootstrap color variables $grey01: #E9E8E8; $grey02: #231F20; $primary: #2A62D3; $success: #2E8633; $danger: #BE1918; $error: $danger; $warning: #C35601; $info: $cyan; $light: $gray-100; $dark: $gray-800; // Other oftenly-used color variables $text: $grey02 ; $border: $grey01; // 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. // stylelint-disable-next-line scss/dollar-variable-default $baseline: 4px; $spacers: ( 0: $baseline * 0, ); // Body // // Settings for the `` element. $body-bg: $white; $body-color: $gray-900; // Links // // Style anchor elements. $link-color: theme-color('primary'); $link-decoration: none; $link-hover-color: darken($link-color, 15%); $link-hover-decoration: underline; // Darken percentage for links with `.text-*` class (e.g. `.text-success`) $emphasized-link-hover-darken-percentage: 15%; // 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. // $grid-breakpoints: ( // xs: 0, // sm: 576px, // md: 768px, // lg: 992px, // xl: 1200px // ); $grid-breakpoints: ( xs: 0, sm: 768px, md: 992px, lg: 1200px, ); // Grid containers // // Define the maximum width of `.container` for different screen sizes. // $container-max-widths: ( // sm: 540px, // md: 720px, // lg: 960px, // xl: 1140px // ); $container-max-widths: ( sm: 720px, md: 960px, lg: 1140px, ); @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: 30px; // Fonts // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case $font-family-sans-serif: 'Open Sans', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; $font-family-base: $font-family-sans-serif; // stylelint-enable value-keyword-case $font-size-base: 18px; // Assumes the browser default, typically `16px` $font-size-lg: ($font-size-base * 1.25); $font-size-sm: ($font-size-base * 0.875); $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; $h1-font-size: 60px; $h2-font-size: 48px; $h3-font-size: 40px; $h4-font-size: 32px; $h5-font-size: 26px; $h6-font-size: 20px;