diff options
| author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2018-12-20 14:41:25 +0300 |
|---|---|---|
| committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2018-12-20 14:41:25 +0300 |
| commit | 4192f905e57968d24d0d3fbb7bd1c091a41aaeb4 (patch) | |
| tree | 1f978bbe9b6d78be9a4d728c43f7e0d2dab2c16b /assets/stylesheets/bootstrap/_variables.scss | |
| parent | 804e3dd5a00f2994409b1bf845f1fa5f073210ec (diff) | |
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets/bootstrap/_variables.scss')
| -rw-r--r-- | assets/stylesheets/bootstrap/_variables.scss | 301 |
1 files changed, 220 insertions, 81 deletions
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index 5cf118f..25e2684 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -3,10 +3,7 @@ // 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 !default; $gray-100: #f8f9fa !default; @@ -37,7 +34,6 @@ $grays: map-merge( $grays ); - $blue: #007bff !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; @@ -105,18 +101,21 @@ $yiq-contrasted-threshold: 150 !default; $yiq-text-dark: $gray-900 !default; $yiq-text-light: $white !default; + // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS -$enable-grid-classes: true !default; -$enable-print-styles: true !default; +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-prefers-reduced-motion-media-query: true !default; +$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS +$enable-grid-classes: true !default; +$enable-print-styles: true !default; +$enable-validation-icons: true !default; // Spacing @@ -154,6 +153,7 @@ $sizes: map-merge( $sizes ); + // Body // // Settings for the `<body>` element. @@ -161,14 +161,17 @@ $sizes: map-merge( $body-bg: $white !default; $body-color: $gray-900 !default; + // Links // // Style anchor elements. -$link-color: theme-color("primary") !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%) !default; -$link-hover-decoration: underline !default; +$link-color: theme-color("primary") !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; +// Darken percentage for links with `.text-*` class (e.g. `.text-success`) +$emphasized-link-hover-darken-percentage: 15% !default; // Paragraphs // @@ -182,13 +185,18 @@ $paragraph-margin-bottom: 1rem !default; // 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 -) !default; +$grid-breakpoints: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$grid-breakpoints: map-merge( + ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px + ), + $grid-breakpoints +); @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-starts-at-zero($grid-breakpoints); @@ -198,12 +206,17 @@ $grid-breakpoints: ( // // Define the maximum width of `.container` for different screen sizes. -$container-max-widths: ( - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px -) !default; +$container-max-widths: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$container-max-widths: map-merge( + ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px + ), + $container-max-widths +); @include _assert-ascending($container-max-widths, "$container-max-widths"); @@ -215,6 +228,7 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: 30px !default; + // Components // // Define common padding and border radius sizes and more. @@ -229,6 +243,8 @@ $border-radius: .25rem !default; $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; +$rounded-pill: 50rem !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; @@ -242,13 +258,24 @@ $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; $transition-collapse: height .35s ease !default; +$embed-responsive-aspect-ratios: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$embed-responsive-aspect-ratios: join( + ( + (21 9), + (16 9), + (3 4), + (1 1), + ), + $embed-responsive-aspect-ratios +); // Fonts // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case @@ -257,9 +284,11 @@ $font-size-base: 1rem !default; // Assumes the browser default, typ $font-size-lg: ($font-size-base * 1.25) !default; $font-size-sm: ($font-size-base * .875) !default; +$font-weight-lighter: lighter !default; $font-weight-light: 300 !default; $font-weight-normal: 400 !default; $font-weight-bold: 700 !default; +$font-weight-bolder: bolder !default; $font-weight-base: $font-weight-normal !default; $line-height-base: 1.5 !default; @@ -271,7 +300,7 @@ $h4-font-size: $font-size-base * 1.5 !default; $h5-font-size: $font-size-base * 1.25 !default; $h6-font-size: $font-size-base !default; -$headings-margin-bottom: ($spacer / 2) !default; +$headings-margin-bottom: $spacer / 2 !default; $headings-font-family: inherit !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; @@ -296,6 +325,7 @@ $small-font-size: 80% !default; $text-muted: $gray-600 !default; $blockquote-small-color: $gray-600 !default; +$blockquote-small-font-size: $small-font-size !default; $blockquote-font-size: ($font-size-base * 1.25) !default; $hr-border-color: rgba($black, .1) !default; @@ -337,18 +367,23 @@ $table-dark-bg: $gray-900 !default; $table-dark-accent-bg: rgba($white, .05) !default; $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-dark-color: $white !default; $table-striped-order: odd !default; $table-caption-color: $text-muted !default; +$table-bg-level: -9 !default; +$table-border-level: -6 !default; + + // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. $input-btn-padding-y: .375rem !default; $input-btn-padding-x: .75rem !default; +$input-btn-font-size: $font-size-base !default; $input-btn-line-height: $line-height-base !default; $input-btn-focus-width: .2rem !default; @@ -357,10 +392,12 @@ $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-colo $input-btn-padding-y-sm: .25rem !default; $input-btn-padding-x-sm: .5rem !default; +$input-btn-font-size-sm: $font-size-sm !default; $input-btn-line-height-sm: $line-height-sm !default; $input-btn-padding-y-lg: .5rem !default; $input-btn-padding-x-lg: 1rem !default; +$input-btn-font-size-lg: $font-size-lg !default; $input-btn-line-height-lg: $line-height-lg !default; $input-btn-border-width: $border-width !default; @@ -372,14 +409,17 @@ $input-btn-border-width: $border-width !default; $btn-padding-y: $input-btn-padding-y !default; $btn-padding-x: $input-btn-padding-x !default; +$btn-font-size: $input-btn-font-size !default; $btn-line-height: $input-btn-line-height !default; $btn-padding-y-sm: $input-btn-padding-y-sm !default; $btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-font-size-sm: $input-btn-font-size-sm !default; $btn-line-height-sm: $input-btn-line-height-sm !default; $btn-padding-y-lg: $input-btn-padding-y-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-font-size-lg: $input-btn-font-size-lg !default; $btn-line-height-lg: $input-btn-line-height-lg !default; $btn-border-width: $input-btn-border-width !default; @@ -409,14 +449,18 @@ $label-margin-bottom: .5rem !default; $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; +$input-font-size: $input-btn-font-size !default; +$input-font-weight: $font-weight-base !default; $input-line-height: $input-btn-line-height !default; $input-padding-y-sm: $input-btn-padding-y-sm !default; $input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: $input-btn-font-size-sm !default; $input-line-height-sm: $input-btn-line-height-sm !default; $input-padding-y-lg: $input-btn-padding-y-lg !default; $input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: $input-btn-font-size-lg !default; $input-line-height-lg: $input-btn-line-height-lg !default; $input-bg: $white !default; @@ -442,13 +486,13 @@ $input-plaintext-color: $body-color !default; $input-height-border: $input-border-width * 2 !default; -$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; +$input-height-inner: ($input-btn-font-size * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; $input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; -$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; +$input-height-inner-sm: ($input-btn-font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; -$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; +$input-height-inner-lg: ($input-btn-font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; @@ -462,6 +506,7 @@ $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; $form-check-inline-input-margin-x: .3125rem !default; +$form-grid-gutter-width: 10px !default; $form-group-margin-bottom: 1rem !default; $input-group-addon-color: $input-color !default; @@ -470,64 +515,86 @@ $input-group-addon-border-color: $input-border-color !default; $custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; -$custom-control-gutter: 1.5rem !default; +$custom-control-gutter: .5rem !default; $custom-control-spacer-x: 1rem !default; $custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: $gray-300 !default; +$custom-control-indicator-bg: $input-bg !default; + $custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; +$custom-control-indicator-box-shadow: $input-box-shadow !default; +$custom-control-indicator-border-color: $gray-500 !default; +$custom-control-indicator-border-width: $input-border-width !default; -$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-indicator-disabled-bg: $input-disabled-bg !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; $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; $custom-control-indicator-checked-box-shadow: none !default; +$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default; -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; +$custom-control-indicator-focus-box-shadow: $input-btn-focus-box-shadow !default; +$custom-control-indicator-focus-border-color: $input-focus-border-color !default; $custom-control-indicator-active-color: $component-active-color !default; $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; $custom-control-indicator-active-box-shadow: none !default; +$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !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-icon-checked: str-replace(url("data:image/svg+xml,%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,%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-border-color: $custom-checkbox-indicator-indeterminate-bg !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-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%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-switch-width: $custom-control-indicator-size * 1.75 !default; +$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; +$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; -$custom-select-padding-y: .375rem !default; -$custom-select-padding-x: .75rem !default; +$custom-select-padding-y: $input-btn-padding-y !default; +$custom-select-padding-x: $input-btn-padding-x !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-font-weight: $input-font-weight !default; +$custom-select-line-height: $input-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-600 !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; -$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-select-border-width: $input-btn-border-width !default; +$custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default; +$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) + +$custom-select-feedback-icon-padding-right: $input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding !default; +$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; +$custom-select-feedback-icon-size: ($input-height-inner / 2) ($input-height-inner / 2) !default; + +$custom-select-border-width: $input-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; $custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default; $custom-select-focus-border-color: $input-focus-border-color !default; -$custom-select-focus-width: $input-btn-focus-width !default; +$custom-select-focus-width: $input-focus-width !default; $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default; -$custom-select-font-size-sm: 75% !default; +$custom-select-padding-y-sm: $input-padding-y-sm !default; +$custom-select-padding-x-sm: $input-padding-x-sm !default; +$custom-select-font-size-sm: $input-btn-font-size-sm !default; $custom-select-height-sm: $input-height-sm !default; -$custom-select-font-size-lg: 125% !default; +$custom-select-padding-y-lg: $input-padding-y-lg !default; +$custom-select-padding-x-lg: $input-padding-x-lg !default; +$custom-select-font-size-lg: $input-btn-font-size-lg !default; $custom-select-height-lg: $input-height-lg !default; $custom-range-track-width: 100% !default; @@ -543,22 +610,24 @@ $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-focus-box-shadow-width: $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge +$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; +$custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; +$custom-range-thumb-disabled-bg: $gray-500 !default; $custom-file-height: $input-height !default; $custom-file-height-inner: $input-height-inner !default; $custom-file-focus-border-color: $input-focus-border-color !default; -$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; +$custom-file-focus-box-shadow: $input-focus-box-shadow !default; $custom-file-disabled-bg: $input-disabled-bg !default; -$custom-file-padding-y: $input-btn-padding-y !default; -$custom-file-padding-x: $input-btn-padding-x !default; -$custom-file-line-height: $input-btn-line-height !default; +$custom-file-padding-y: $input-padding-y !default; +$custom-file-padding-x: $input-padding-x !default; +$custom-file-line-height: $input-line-height !default; +$custom-file-font-weight: $input-font-weight !default; $custom-file-color: $input-color !default; $custom-file-bg: $input-bg !default; -$custom-file-border-width: $input-btn-border-width !default; +$custom-file-border-width: $input-border-width !default; $custom-file-border-color: $input-border-color !default; $custom-file-border-radius: $input-border-radius !default; $custom-file-box-shadow: $input-box-shadow !default; @@ -570,11 +639,17 @@ $custom-file-text: ( // Form validation + $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $small-font-size !default; $form-feedback-valid-color: theme-color("success") !default; $form-feedback-invalid-color: theme-color("danger") !default; +$form-feedback-icon-valid-color: $form-feedback-valid-color !default; +$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default; +$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; +$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default; + // Dropdowns // @@ -587,6 +662,7 @@ $dropdown-bg: $white !default; $dropdown-border-color: rgba($black, .15) !default; $dropdown-border-radius: $border-radius !default; $dropdown-border-width: $border-width !default; +$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; $dropdown-divider-bg: $gray-200 !default; $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; @@ -618,6 +694,7 @@ $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; + // Navs $nav-link-padding-y: .5rem !default; @@ -637,18 +714,19 @@ $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; +$nav-divider-margin-y: $spacer / 2 !default; + // Navbar -$navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-y: $spacer / 2 !default; $navbar-padding-x: $spacer !default; $navbar-nav-link-padding-x: .5rem !default; $navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link -$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; +$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; @@ -661,16 +739,22 @@ $navbar-dark-color: rgba($white, .5) !default; $navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-active-color: $white !default; $navbar-dark-disabled-color: rgba($white, .25) !default; -$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-light-color: rgba($black, .5) !default; $navbar-light-hover-color: rgba($black, .7) !default; $navbar-light-active-color: rgba($black, .9) !default; $navbar-light-disabled-color: rgba($black, .3) !default; -$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; $navbar-light-toggler-border-color: rgba($black, .1) !default; +$navbar-light-brand-color: $navbar-light-active-color !default; +$navbar-light-brand-hover-color: $navbar-light-active-color !default; +$navbar-dark-brand-color: $navbar-dark-active-color !default; +$navbar-dark-brand-hover-color: $navbar-dark-active-color !default; + + // Pagination $pagination-padding-y: .5rem !default; @@ -717,11 +801,12 @@ $card-border-radius: $border-radius !default; $card-border-color: rgba($black, .125) !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-cap-bg: rgba($black, .03) !default; +$card-cap-color: inherit !default; $card-bg: $white !default; $card-img-overlay-padding: 1.25rem !default; -$card-group-margin: ($grid-gutter-width / 2) !default; +$card-group-margin: $grid-gutter-width / 2 !default; $card-deck-margin: $card-group-margin !default; $card-columns-count: 3 !default; @@ -745,6 +830,14 @@ $tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: .4rem !default; $tooltip-arrow-color: $tooltip-bg !default; +// Form tooltips must come after regular tooltips +$form-feedback-tooltip-padding-y: $tooltip-padding-y !default; +$form-feedback-tooltip-padding-x: $tooltip-padding-x !default; +$form-feedback-tooltip-font-size: $tooltip-font-size !default; +$form-feedback-tooltip-line-height: $line-height-base !default; +$form-feedback-tooltip-opacity: $tooltip-opacity !default; +$form-feedback-tooltip-border-radius: $tooltip-border-radius !default; + // Popovers @@ -772,6 +865,22 @@ $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +// Toasts +$toast-max-width: 350px !default; +$toast-padding-x: .75rem !default; +$toast-padding-y: .25rem !default; +$toast-font-size: .875rem !default; +$toast-background-color: rgba($white, .85) !default; +$toast-border-width: 1px !default; +$toast-border-color: rgba(0, 0, 0, .1) !default; +$toast-border-radius: .25rem !default; +$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default; + +$toast-header-color: $gray-600 !default; +$toast-header-background-color: rgba($white, .85) !default; +$toast-header-border-color: rgba(0, 0, 0, .05) !default; + + // Badges $badge-font-size: 75% !default; @@ -809,12 +918,17 @@ $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-header-padding-y: 1rem !default; +$modal-header-padding-x: 1rem !default; +$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility +$modal-xl: 1140px !default; $modal-lg: 800px !default; $modal-md: 500px !default; $modal-sm: 300px !default; +$modal-fade-transform: translate(0, -50px) !default; +$modal-show-transform: none !default; $modal-transition: transform .3s ease-out !default; @@ -846,6 +960,7 @@ $progress-bar-bg: theme-color("primary") !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; + // List group $list-group-bg: $white !default; @@ -905,24 +1020,40 @@ $breadcrumb-border-radius: $border-radius !default; // Carousel -$carousel-control-color: $white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; +$carousel-control-hover-opacity: .9 !default; +$carousel-control-transition: opacity .15s ease !default; + +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-hit-area-height: 10px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-active-bg: $white !default; +$carousel-indicator-transition: opacity .6s ease !default; + +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; + +$carousel-control-icon-width: 20px !default; -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; +$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%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,%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-caption-width: 70% !default; -$carousel-caption-color: $white !default; +$carousel-transition-duration: .6s !default; +$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) -$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; +// Spinners -$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +$spinner-width: 2rem !default; +$spinner-height: $spinner-width !default; +$spinner-border-width: .25em !default; + +$spinner-width-sm: 1rem !default; +$spinner-height-sm: $spinner-width-sm !default; +$spinner-border-width-sm: .2em !default; // Close @@ -932,6 +1063,7 @@ $close-font-weight: $font-weight-bold !default; $close-color: $black !default; $close-text-shadow: 0 1px 0 $white !default; + // Code $code-font-size: 87.5% !default; @@ -947,6 +1079,13 @@ $pre-color: $gray-900 !default; $pre-scrollable-max-height: 340px !default; +// Utilities + +$overflows: auto, hidden !default; +$positions: static, relative, absolute, fixed, sticky !default; + + // Printing + $print-page-size: a3 !default; $print-body-min-width: map-get($grid-breakpoints, "lg") !default; |