/** CUSTOM VARIABLES Bootstrap variables can be re-defined and customized: Copy the variable you want to re-define and set the value without "!default". We are doing it here to have an overview of the variables and definitons we are using for the portals. NAMING RULES Variables should follow the `$component-state-property-size` formula for consistent naming. Example: $nav-link-disabled-color and $modal-content-box-shadow-xs. We have the chance to make this repository a template for all portals: By deklaring a variable with !default, you can set a default color, that a specific portal can change in their own repository. */ /* TABLE OF CONTENT Colors Light/Dark contrast Body Links Components (padding, border-radius and more) Fonts Grid breakpoints Grid containers */ // COLORS $gray-100: #f4f4f4; $gray-600: #666; $red: #c01d1d; $orange: #f93; $yellow: #ffc700; //fti-orange $green: #96c948; $cyan: #09c; $white: #fff; $primary: $orange; // LIGHT/DARK CONTRAST // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. $yiq-contrasted-threshold: 200; // BODY // Settings for the `` element. $body-bg: $gray-100; $body-color: $white; // LINKS $link-color: theme-color("primary") !default; $link-hover-color: $link-color; // COMPONENTS // Define common padding and border radius sizes and more. $border-radius: .125rem; $border-radius-lg: .125rem; $border-radius-sm: .125rem; // FONTS $font-family-sans-serif: "Helvetica Neue", helvetica, arial, sans-serif; $font-size-base: 1rem !default; // Assumes the browser default, typically '16px' $h1-font-size: $font-size-base * 2; $h2-font-size: $font-size-base * 1.6; $h3-font-size: $font-size-base * 1.5; $h4-font-size: $font-size-base * 1.12; $h5-font-size: $font-size-base * 1.12; $h6-font-size: $font-size-base; // GRID BREAKPOINTS $grid-breakpoints: ( xs: 0, sm: 480px, md: 768px, lg: 960px, xl: 1280px ); // GRID CONTAINERS $container-max-widths: ( sm: 451px + 30px, md: 722px + 30px, lg: 902px + 30px, xl: 1203px + 30px );