// ================================================================================================ // File Name: variables.scss // Description: Custom overrides of Bootstrap variables // ---------------------------------------------------------------------------------------------- // Item Name: Frest HTML Admin Template // Version: 2.1 // Author: PIXINVENT // Author URL: http://www.themeforest.net/user/pixinvent // ================================================================================================ // Color system $white: #FFFFFF; $gray-100: #A3AFBD; // $gray-lightest $gray-200: #828D99; // 919FB0; // $gray-lighter $gray-300: #7E8FA3; // $gray-light $gray-400: #6C7f95; $gray-500: #596F88; $gray-600: #475F7B; // $gray $gray-700: #40566F; $gray-800: #394C62; // $gray-dark $gray-900: #324356; $black: #000; $blue: #5A8DEE; //$primary $red: #FF5B5C; //$danger $yellow: #FDAC41; //$warning $green: #39DA8A; //$success $cyan: #00CFDD; //$info $primary: $blue; // 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: #F2F4F4; $body-color: #727E8C; // Links // // Style anchor elements. $link-color: $primary; // $link-hover-color: darken($link-color, 5%); $link-hover-decoration: none; // Grid columns // // Set the number of columns and specify the width of the gutters. // $grid-gutter-width: 28px; // Components // // Define common padding and border radius sizes and more. $line-height-lg: 1.4; $line-height-sm: 1.1; $border-width: 1px; $border-color: #DFE3E7; $border-radius: 0.267rem; $border-radius-lg: 0.6rem; $border-radius-sm: 0.25rem; $box-shadow: 0 2px 4px 0 rgba($black, .2) !default; // Typography // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case $font-family-sans-serif: "IBM Plex Sans", Helvetica, Arial, serif; $font-family-monospace: "Rubik", Helvetica, Arial, serif; // stylelint-enable value-keyword-case $font-size-base: 1rem; $font-size-sm: 0.8rem; $font-size-lg: 1.2rem; $font-weight-bold: 500; $line-height-base: 1.4; $h1-font-size: $font-size-base * 2.53; $h2-font-size: $font-size-base * 2.13; $h3-font-size: $font-size-base * 1.73; $h4-font-size: $font-size-base * 1.47; $h5-font-size: $font-size-base * 1.3; $headings-font-family: $font-family-monospace; $headings-font-weight: 500; $headings-color: $gray-600; $text-muted: $gray-200; $blockquote-small-color: $gray-200; $blockquote-small-font-size: $font-size-base; $blockquote-font-size: $font-size-base; $hr-border-color: $border-color; // Tables $table-cell-padding: 1.15rem 2rem; $table-head-bg: #F2F4F4; $table-head-color: $gray-600; $table-hover-bg: #F2F4F4; $table-accent-bg: #fafbfb; $table-border-color: #DFE3E7; $table-dark-border-color: $gray-700; $table-dark-bg: $gray-600; // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. $input-btn-padding-y: .8rem; $input-btn-padding-x: 1.6rem; $input-btn-line-height: $line-height-lg; $input-btn-font-size: $font-size-base; $input-btn-padding-y-sm: 0.47rem; $input-btn-padding-x-sm: 1.6rem; $input-btn-font-size-sm: $font-size-sm; $input-btn-padding-y-lg: 0.667rem; $input-btn-padding-x-lg: 0.8rem; $input-btn-font-size-lg: $font-size-lg; // Buttons // // For each of Bootstrap's buttons, define text, background, and border color. $btn-padding-y: .467rem; $btn-padding-x: 1.5rem; $btn-line-height: 1.6rem; $btn-padding-y-sm: .467rem; $btn-padding-x-sm: 1.2rem; $btn-line-height-sm: 1.4; $btn-padding-y-lg: .6rem; $btn-padding-x-lg: 1.8rem; $btn-line-height-lg: 1.7; $btn-border-width: 0; $btn-disabled-opacity: .45; $btn-border-radius: $border-radius; $btn-border-radius-lg: $border-radius; $btn-border-radius-sm: $border-radius; $btn-link-disabled-color: $gray-200; // Forms $label-margin-bottom: .2rem; $input-padding-y: 0.47rem; $input-padding-x: 0.8rem; $input-line-height: $line-height-lg; $input-padding-y-sm: .35rem; $input-padding-x-sm: 0.7rem; $input-padding-y-lg: $input-btn-padding-y-lg; $input-padding-x-lg: $input-btn-padding-x-lg; $input-disabled-bg: #F2F4F4; $input-color: $headings-color; $input-border-color: $border-color; $input-border-width: $border-width; $input-border-radius: $border-radius; $input-border-radius-lg: $border-radius; $input-border-radius-sm: $border-radius; $input-focus-border-color: $primary; $input-focus-box-shadow :0 3px 8px 0 rgba($black,.1); $input-placeholder-color: $gray-200; $input-plaintext-color: $body-color; $input-height-border: $input-border-width * 3.7; $input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2.7}); $custom-control-indicator-border-color: $border-color; $custom-file-height: 38px; $custom-file-padding-y: 0.65rem; $input-group-addon-bg: #f0f4f7; $custom-switch-width: 2.75rem; $custom-switch-indicator-border-radius: .8rem; $custom-switch-indicator-size: 18px; $custom-select-focus-box-shadow: $input-focus-box-shadow; // 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. $zindex-dropdown: 10; $zindex-tooltip: 1070; // Dropdowns // // Dropdown menu container and contents. $dropdown-min-width: 9.65rem; $dropdown-padding-y: .4rem; $dropdown-spacer: .5rem; $dropdown-font-size: 0.8rem; $dropdown-border-color: $border-color; $dropdown-border-radius: 5px; $dropdown-divider-bg: $border-color; $dropdown-link-color: $headings-color; $dropdown-link-hover-color: $headings-color; $dropdown-link-hover-bg: #F2F4F4; $dropdown-link-active-color: $white; $dropdown-link-disabled-color: $gray-200; //$gray-100; $dropdown-item-padding-y: .8rem;//.434rem; $dropdown-item-padding-x: 1.6rem; //1.25rem; $dropdown-header-color: $headings-color; // Pagination $pagination-padding-y: 0.47rem; $pagination-padding-x: 0.73rem; $pagination-padding-y-lg: .54rem; $pagination-padding-x-lg: 1.2rem; $pagination-padding-y-sm: .367rem; $pagination-padding-x-sm: .6rem; $pagination-active-border-color: #e7edf3; $pagination-border-color: $border-color; $pagination-color: #3F3356; $pagination-border-width: 0; $pagination-disabled-color: $gray-200; $pagination-disabled-bg: $input-disabled-bg; // Modals // Padding applied to the modal body $modal-inner-padding: 1.3rem 2.3rem; $modal-content-border-width: none; $modal-content-border-radius: $border-radius; $modal-content-box-shadow-xs: -8px 12px 18px 0 rgba(25, 42, 70, 0.13); $modal-content-box-shadow-sm-up: -8px 12px 18px 0 rgba(25, 42, 70, 0.13); $modal-header-border-color:$border-color; $modal-header-border-width:1px; $modal-header-padding-y: 1.05rem ; $modal-header-padding-x: 2.3rem ; $modal-md: 540px ; //Alerts $alert-padding-y: 0.71rem; $alert-padding-x: 0.71rem; // Nav tabs $nav-link-padding-y: 0.567rem ; $nav-link-padding-x: 1.33rem; $nav-tabs-border-radius: $border-radius; $nav-tabs-link-active-color: $white; $nav-tabs-link-active-bg: $primary; $nav-tabs-link-hover-border-color: transparent; $nav-tabs-link-active-border-color: transparent; // nav-pills $nav-pills-border-radius: $border-radius; // Navbar $navbar-brand-font-size: 1.46rem; // Cards $card-spacer-y: 1.4rem; $card-spacer-x: 1.7rem; $card-border-width: 0px; $card-cap-bg: transparent; $card-group-margin: 0.75rem; $card-columns-gap: 1.6rem; $card-border-color:#dfe3e7; // Tooltips $tooltip-bg: #475F7B; $tooltip-border-radius: .267rem; $tooltip-padding-y: .267rem; $tooltip-padding-x: .867rem; $tooltip-font-size: $font-size-base; $tooltip-opacity: 1; $tooltip-arrow-width: 1.07rem; $tooltip-arrow-height: .53rem; $form-feedback-tooltip-opacity: 0.2; $form-feedback-tooltip-font-size: $font-size-sm; // Popovers $popover-font-size: $font-size-base; $popover-border-color: $border-color; $popover-border-radius: .267rem; $popover-box-shadow: 0 0 10px 0 rgba(58,70,93,0.25); $popover-header-bg: $white; $popover-header-color: #304156; // Toasts $toast-max-width: 25.33rem; $toast-padding-x: 1.4rem; $toast-padding-y: .86rem; $toast-font-size: $font-size-base; $toast-background-color: $white; $toast-background-color: rgba($white, .95); $toast-border-color: #DFE3E7; $toast-border-radius: $border-radius; $toast-box-shadow: 0 4px 12px 0 rgba($black, .08); $toast-header-color: $white; $toast-header-background-color: $primary; $toast-header-border-color: transparent; // Badges $badge-font-size: $font-size-sm; $badge-font-weight: 400; $badge-padding-y: .34rem; $badge-padding-x: 1.11rem; $badge-border-radius: .267rem; $badge-pill-padding-x: 1.11rem; $badge-pill-border-radius: 2rem; // Alerts // // Define alert colors, border radius, and padding. $alert-padding-y: 1.1rem; $alert-padding-x: 1.267rem; $alert-margin-bottom: 2.67rem; $alert-border-radius: $border-radius; $alert-link-font-weight: $headings-font-weight; $alert-border-width: 0; // Progress $progress-height: .357rem; $progress-border-radius: 1.28rem; $progress-box-shadow: 0 2px 6px 0 rgba($primary, 0.6); // List group $list-group-color: $gray-500; $list-group-border-color: #DFE3E7; $list-group-disabled-bg: #e7edf3; $list-group-disabled-color: $gray-200; $list-group-item-padding-y: 1rem; $list-group-item-padding-x: 2rem; $list-group-hover-bg: #F2F4F4; // Image thumbnails $thumbnail-box-shadow: 0 5px 25px 0 rgba($black, .4); // Breadcrumbs $breadcrumb-padding-y: 1.05rem; $breadcrumb-padding-x: 1.67rem; $breadcrumb-item-padding: .93rem; $breadcrumb-bg: #F2F4F4; $breadcrumb-active-color: $primary; $breadcrumb-divider: quote("|"); $breadcrumb-border-radius: $border-radius; // carousel // $carousel-control-width: 14px; $carousel-indicator-width: 24px; $carousel-indicator-height: 6px; $carousel-control-icon-width: 14px; $carousel-caption-color: $white !default; // Code $code-font-size: 90% !default; $kbd-bg: #eee;