diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_variables.scss')
| -rw-r--r-- | assets/stylesheets/bootstrap/_variables.scss | 116 |
1 files changed, 75 insertions, 41 deletions
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index be580de..1e17429 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -88,11 +88,11 @@ $theme-colors: map-merge(( $theme-color-interval: 8% !default; // 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: 150 !default; +$yiq-contrasted-threshold: 150 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; // Options // @@ -132,7 +132,8 @@ $sizes: map-merge(( 25: 25%, 50: 50%, 75: 75%, - 100: 100% + 100: 100%, + auto: auto ), $sizes); // stylelint-enable @@ -211,6 +212,10 @@ $border-radius: .25rem !default; $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; +$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; +$box-shadow: 0 .5rem 1rem rgba($black, .15) !default; +$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; + $component-active-color: $white !default; $component-active-bg: theme-color("primary") !default; @@ -317,6 +322,9 @@ $table-dark-hover-bg: rgba($white, .075) !default; $table-dark-border-color: lighten($gray-900, 7.5%) !default; $table-dark-color: $body-bg !default; +$table-striped-order: odd !default; + +$table-caption-color: $text-muted !default; // Buttons + Forms // @@ -380,6 +388,8 @@ $btn-transition: color .15s ease-in-out, background-color .15s ease // Forms +$label-margin-bottom: .5rem !default; + $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; $input-line-height: $input-btn-line-height !default; @@ -411,6 +421,7 @@ $input-focus-width: $input-btn-focus-width !default; $input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-placeholder-color: $gray-600 !default; +$input-plaintext-color: $body-color !default; $input-height-border: $input-border-width * 2 !default; @@ -449,7 +460,7 @@ $custom-control-indicator-bg-size: 50% 50% !default; $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; $custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-label-disabled-color: $gray-600 !default; +$custom-control-label-disabled-color: $gray-600 !default; $custom-control-indicator-checked-color: $component-active-color !default; $custom-control-indicator-checked-bg: $component-active-bg !default; @@ -465,22 +476,22 @@ $custom-control-indicator-active-box-shadow: none !default; $custom-checkbox-indicator-border-radius: $border-radius !default; $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; -$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; -$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-box-shadow: none !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; $custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-padding-y: .375rem !default; -$custom-select-padding-x: .75rem !default; +$custom-select-padding-x: .75rem !default; $custom-select-height: $input-height !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator $custom-select-line-height: $input-btn-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-600 !default; -$custom-select-bg: $white !default; +$custom-select-bg: $input-bg !default; $custom-select-disabled-bg: $gray-200 !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-indicator-color: $gray-800 !default; @@ -498,6 +509,22 @@ $custom-select-height-sm: $input-height-sm !default; $custom-select-font-size-lg: 125% !default; $custom-select-height-lg: $input-height-lg !default; +$custom-range-track-width: 100% !default; +$custom-range-track-height: .5rem !default; +$custom-range-track-cursor: pointer !default; +$custom-range-track-bg: $gray-300 !default; +$custom-range-track-border-radius: 1rem !default; +$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; + +$custom-range-thumb-width: 1rem !default; +$custom-range-thumb-height: $custom-range-thumb-width !default; +$custom-range-thumb-bg: $component-active-bg !default; +$custom-range-thumb-border: 0 !default; +$custom-range-thumb-border-radius: 1rem !default; +$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; +$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; +$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; + $custom-file-height: $input-height !default; $custom-file-focus-border-color: $input-focus-border-color !default; $custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; @@ -585,6 +612,9 @@ $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; +$nav-divider-color: $gray-200 !default; +$nav-divider-margin-y: ($spacer / 2) !default; + // Navbar $navbar-padding-y: ($spacer / 2) !default; @@ -633,6 +663,7 @@ $pagination-border-width: $border-width !default; $pagination-border-color: $gray-300 !default; $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-outline: 0 !default; $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-200 !default; @@ -676,19 +707,19 @@ $card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-font-size: $font-size-sm !default; -$tooltip-max-width: 200px !default; -$tooltip-color: $white !default; -$tooltip-bg: $black !default; -$tooltip-border-radius: $border-radius !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: .25rem !default; -$tooltip-padding-x: .5rem !default; -$tooltip-margin: 0 !default; +$tooltip-font-size: $font-size-sm !default; +$tooltip-max-width: 200px !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity: .9 !default; +$tooltip-padding-y: .25rem !default; +$tooltip-padding-x: .5rem !default; +$tooltip-margin: 0 !default; -$tooltip-arrow-width: .8rem !default; -$tooltip-arrow-height: .4rem !default; -$tooltip-arrow-color: $tooltip-bg !default; +$tooltip-arrow-width: .8rem !default; +$tooltip-arrow-height: .4rem !default; +$tooltip-arrow-color: $tooltip-bg !default; // Popovers @@ -734,26 +765,27 @@ $badge-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body -$modal-inner-padding: 1rem !default; +$modal-inner-padding: 1rem !default; -$modal-dialog-margin: .5rem !default; -$modal-dialog-margin-y-sm-up: 1.75rem !default; +$modal-dialog-margin: .5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; $modal-title-line-height: $line-height-base !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2) !default; -$modal-content-border-width: $border-width !default; -$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; -$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; - -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 1rem !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, .2) !default; +$modal-content-border-width: $border-width !default; +$modal-content-border-radius: $border-radius-lg !default; +$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; +$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; + +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: .5 !default; +$modal-header-border-color: $gray-200 !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 1rem !default; $modal-lg: 800px !default; $modal-md: 500px !default; @@ -842,7 +874,9 @@ $breadcrumb-margin-bottom: 1rem !default; $breadcrumb-bg: $gray-200 !default; $breadcrumb-divider-color: $gray-600 !default; $breadcrumb-active-color: $gray-600 !default; -$breadcrumb-divider: "/" !default; +$breadcrumb-divider: quote("/") !default; + +$breadcrumb-border-radius: $border-radius !default; // Carousel @@ -864,7 +898,7 @@ $carousel-control-icon-width: 20px !default; $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-transition: transform .6s ease !default; +$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitons (e.g., `transform 2s ease, opacity .5s ease-out`) // Close |