// ================================================================================================ // File Name: bootstrap-variables.scss // Description: Bootstrap extedned vaiables file // ---------------------------------------------------------------------------------------------- // Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template // Author: PIXINVENT // Author URL: http://www.themeforest.net/user/pixinvent // ================================================================================================ // ================================================================================================ // WARNING: THIS FILE WILL GET OVERWRITTEN WITH EACH MODERN TEMPLATE RELEASE. // TIP: YOU CAN CUSTOMIZE BOOTSTRAP VARIABLE AS PER YOUR REQUIREMENTS, IT WILL AFFECT ONLY // FOR DEFAULT LAYOUTS. ALWAYS KEEP BACKUP IF YOU CHANGE THIS FILE. // ================================================================================================ // 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 // $white: #fff; $gray-100: #babfc7; // $gray-lightest $gray-200: #98a4b8; // $gray-lighter $gray-300: #626e82; // $gray-light $gray-400: #6f7274; $gray-500: #adb5bd; $gray-600: #6b6f82; // $gray $gray-700: #4e5154; $gray-800: #464855; // $gray-dark $gray-900: #2a2e30; $black: #000; $blue: #1e9ff2; //$info // $indigo: #6610f2; // $purple: #6f42c1; // $pink: #e83e8c; $red: #ff4961; //$danger $orange: #ff9149; //$warning // $yellow: #ffc107; $green: #28d094; //$success // $teal: #20c997; $cyan: #666ee8; //$primary $primary: $cyan; // $secondary: $gray-600; // $success: $green; $info: $blue; $warning: $orange; // $danger: $red; // $light: $gray-100; // $gray-100 // $dark: $gray-800; // $gray-dakr // // 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 $spacer: 1rem; $spacers: (); // stylelint-disable-next-line scss/dollar-variable-default $spacers: map-merge((0: 0, 25: ($spacer * .25), 50: ($spacer * .5), 75: ($spacer * .75), 1: ($spacer), 2: ($spacer * 1.5), 3: ($spacer * 3), 4: ($spacer * 3.5), 5: ($spacer * 4)), $spacers); // Body // // Settings for the `` element. $body-bg: #f4f5fa; $body-color: $gray-600; // // Links // // // // Style anchor elements. $link-color: darken($primary, 5%); // // Components // // // // Define common padding and border radius sizes and more. $line-height-lg: 1.25; $line-height-sm: 1; $border-width: 1px; $border-radius-lg: 0.35rem; $border-radius-sm: 0.21rem; $component-active-bg: $info; // // Fonts // // // // Font, line-height, and color for body text, headings, and more. // // stylelint-disable value-keyword-case $font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; $font-family-monospace: "Quicksand", Georgia, "Times New Roman", Times, serif; $font-family-base: $font-family-sans-serif; // // stylelint-enable value-keyword-case $font-size-base: 1rem; // Assumes the browser default, typically `16px` $font-size-sm: ($font-size-base * 0.875); $line-height-base: 1.45; $h1-font-size: $font-size-base * 2; $h2-font-size: $font-size-base * 1.74; $h3-font-size: $font-size-base * 1.51; $h4-font-size: $font-size-base * 1.32; $h5-font-size: $font-size-base * 1.14; $headings-font-family: $font-family-monospace; $headings-font-weight: 400; $headings-color: $gray-800; $display1-weight: 400; $display2-weight: 400; $display3-weight: 400; $display4-weight: 400; $lead-font-weight: 400; // // Tables // // // // Customizes the `.table` component with basic values, each used across all table variations. // $table-bg: transparent; $table-accent-bg: rgba(245, 247, 250, 0.5); $table-hover-bg: rgba(245, 247, 250, 0.5); // // Buttons + Forms // // // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. $input-btn-padding-y: 0.75rem; $input-btn-padding-x: 1rem; $input-btn-line-height: $line-height-lg; $input-btn-focus-box-shadow: none; $input-btn-padding-y-sm: 0.5rem; $input-btn-padding-x-sm: 0.75rem; $input-btn-line-height-sm: $line-height-sm; $input-btn-padding-y-lg: 1rem; $input-btn-padding-x-lg: 1.25rem; $input-btn-border-width: $border-width; // // Forms $input-border-color: $gray-100; $input-border-width: $input-btn-border-width; $input-focus-border-color: $info; $input-placeholder-color: $gray-100; $input-height-border: $input-border-width * 2; $input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm)+($input-btn-padding-y-sm * 2); $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}); $input-group-addon-bg: $body-bg; $custom-select-focus-border-color: $input-focus-border-color; $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, 0.075), 0 0 5px rgba($custom-select-focus-border-color, 0.5); // // Dropdowns // // // // Dropdown menu container and contents. $dropdown-link-hover-bg: $body-bg; // // 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. $nav-tabs-border-color: $gray-100; // // Navbar $navbar-dark-color: rgba($white, 1); $navbar-dark-hover-color: rgba($white, 0.9); $navbar-dark-disabled-color: rgba($white, 0.5); $navbar-light-color: $gray-600; $navbar-light-hover-color: $gray-300; $navbar-light-active-color: $gray-800; $navbar-light-disabled-color: $body-bg; $pagination-hover-bg: $body-bg; // // Cards $card-spacer-y: 1.5rem; $card-spacer-x: 1.5rem; $card-border-radius: $border-radius-lg; $card-border-color: rgba($black, 0.06); $card-cap-bg: $white; $card-columns-count: 3; // // Tooltips $tooltip-opacity: 0.9; $tooltip-margin: 0; // // Popovers // // Badges $badge-font-size: 80%; $badge-padding-y: 0.35em; // // Modals $modal-backdrop-opacity: 0.5; // // Alerts // // // // Define alert colors, border radius, and padding. $alert-padding-x: 1rem; $alert-border-level: -9; $alert-color-level: 6; // // Progress bars $progress-bg: #eee; // // List group $list-group-border-color: #e4e7ed; $list-group-item-padding-y: 1.25rem; $list-group-hover-bg: $body-bg; // // Breadcrumbs $breadcrumb-padding-x: 0rem; // // Carousel $carousel-control-opacity: 0.5; // // Code $code-color: #f74b5c; $kbd-bg: lighten($gray-100, 20%); $pre-color: $gray-600; // Z-index $zindex-fixed: 1038 !default; // Overwrite material variable