diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_variables.scss')
| -rw-r--r-- | assets/stylesheets/bootstrap/_variables.scss | 136 |
1 files changed, 92 insertions, 44 deletions
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index 2e0d0ce..e4d844f 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -38,9 +38,9 @@ $pink: #d63384 !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; -$green: #28a745 !default; +$green: #198754 !default; $teal: #20c997 !default; -$cyan: #17a2b8 !default; +$cyan: #0dcaf0 !default; // scss-docs-start colors-map $colors: ( @@ -87,10 +87,10 @@ $theme-color-interval: 8% !default; // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast -$min-contrast-ratio: 3 !default; +$min-contrast-ratio: 4.5 !default; // Customize the light and dark text colors for use in our color contrast function. -$color-contrast-dark: $gray-900 !default; +$color-contrast-dark: $black !default; $color-contrast-light: $white !default; // fusv-disable @@ -197,11 +197,11 @@ $cyan-900: shade-color($cyan, 8) !default; // Characters which are escaped by the escape-svg function $escaped-characters: ( - ("<","%3c"), - (">","%3e"), - ("#","%23"), - ("(","%28"), - (")","%29"), + ("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29"), ) !default; // Options @@ -246,6 +246,17 @@ $spacers: ( $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; +// Position +// +// Define the edge positioning anchors of the position utilities. + +$position-values: ( + 0: 0, + 50: 50%, + 100: 100% +) !default; + + // Body // // Settings for the `<body>` element. @@ -325,7 +336,7 @@ $gutters: $spacers !default; // Container padding -$container-padding-x: 1rem !default; +$container-padding-x: $grid-gutter-width !default; // Components @@ -338,6 +349,14 @@ $border-color: $gray-300 !default; $border-radius: .25rem !default; $border-radius-sm: .2rem !default; $border-radius-lg: .3rem !default; +$border-widths: ( + 0: 0, + 1: 1px, + 2: 2px, + 3: 3px, + 4: 4px, + 5: 5px +) !default; $rounded-pill: 50rem !default; @@ -357,26 +376,16 @@ $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; $transition-collapse: height .35s ease !default; -// scss-docs-start embed-responsive-aspect-ratios -$embed-responsive-aspect-ratios: ( - "21by9": ( - x: 21, - y: 9 - ), - "16by9": ( - x: 16, - y: 9 - ), - "4by3": ( - x: 4, - y: 3 - ), - "1by1": ( - x: 1, - y: 1 - ) +// stylelint-disable function-disallowed-list +// scss-docs-start aspect-ratios +$aspect-ratios: ( + "1x1": 100%, + "4x3": calc(3 / 4 * 100%), + "16x9": calc(9 / 16 * 100%), + "21x9": calc(9 / 21 * 100%) ) !default; -// scss-docs-end embed-responsive-aspect-ratios +// scss-docs-end aspect-ratios +// stylelint-enable function-disallowed-list // Typography // @@ -487,6 +496,8 @@ $table-cell-vertical-align: top !default; $table-color: $body-color !default; $table-bg: transparent !default; +$table-th-font-weight: null !default; + $table-striped-color: $table-color !default; $table-striped-bg-factor: .05 !default; $table-striped-bg: rgba($black, $table-striped-bg-factor) !default; @@ -505,7 +516,7 @@ $table-border-color: $border-color !default; $table-striped-order: odd !default; -$table-group-seperator-color: currentColor !default; +$table-group-separator-color: currentColor !default; $table-caption-color: $text-muted !default; @@ -534,7 +545,7 @@ $input-btn-font-family: null !default; $input-btn-font-size: $font-size-base !default; $input-btn-line-height: $line-height-base !default; -$input-btn-focus-width: .2rem !default; +$input-btn-focus-width: .25rem !default; $input-btn-focus-color-opacity: .25 !default; $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default; $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; @@ -656,7 +667,7 @@ $input-height-lg: add($input-line-height * 1em, add($input $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; -$form-check-input-width: 1.25em !default; +$form-check-input-width: 1em !default; $form-check-min-height: $font-size-base * $line-height-base !default; $form-check-padding-left: $form-check-input-width + .5em !default; $form-check-margin-bottom: .125rem !default; @@ -699,6 +710,9 @@ $form-switch-checked-bg-position: right center !default; $form-check-inline-margin-right: 1rem !default; +$input-group-addon-padding-y: $input-padding-y !default; +$input-group-addon-padding-x: $input-padding-x !default; +$input-group-addon-font-weight: $input-font-weight !default; $input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; @@ -841,6 +855,10 @@ $zindex-tooltip: 1070 !default; $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; +$nav-link-font-size: null !default; +$nav-link-font-weight: null !default; +$nav-link-color: null !default; +$nav-link-hover-color: null !default; $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default; $nav-link-disabled-color: $gray-600 !default; @@ -903,6 +921,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; // Dropdown menu container and contents. $dropdown-min-width: 10rem !default; +$dropdown-padding-x: 0 !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; $dropdown-font-size: $font-size-base !default; @@ -912,7 +931,7 @@ $dropdown-border-color: rgba($black, .15) !default; $dropdown-border-radius: $border-radius !default; $dropdown-border-width: $border-width !default; $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; -$dropdown-divider-bg: $gray-200 !default; +$dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-margin-y: $spacer / 2 !default; $dropdown-box-shadow: $box-shadow !default; @@ -931,6 +950,19 @@ $dropdown-item-padding-x: $spacer !default; $dropdown-header-color: $gray-600 !default; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; +$dropdown-dark-color: $gray-300 !default; +$dropdown-dark-bg: $gray-800 !default; +$dropdown-dark-border-color: $dropdown-border-color !default; +$dropdown-dark-divider-bg: $dropdown-divider-bg !default; +$dropdown-dark-box-shadow: null !default; +$dropdown-dark-link-color: $dropdown-dark-color !default; +$dropdown-dark-link-hover-color: $white !default; +$dropdown-dark-link-hover-bg: rgba($white, .15) !default; +$dropdown-dark-link-active-color: $dropdown-link-active-color !default; +$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default; +$dropdown-dark-link-disabled-color: $gray-500 !default; +$dropdown-dark-header-color: $gray-500 !default; + // Pagination @@ -948,6 +980,8 @@ $pagination-border-radius: $border-radius !default; $pagination-margin-left: -$pagination-border-width !default; $pagination-border-color: $gray-300 !default; +$pagination-focus-color: $link-hover-color !default; +$pagination-focus-bg: $gray-200 !default; $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; $pagination-focus-outline: 0 !default; @@ -963,6 +997,7 @@ $pagination-disabled-color: $gray-600 !default; $pagination-disabled-bg: $white !default; $pagination-disabled-border-color: $gray-300 !default; +$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; // Cards @@ -1042,7 +1077,7 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default $toast-max-width: 350px !default; $toast-padding-x: .75rem !default; -$toast-padding-y: .25rem !default; +$toast-padding-y: .5rem !default; $toast-font-size: .875rem !default; $toast-color: null !default; $toast-background-color: rgba($white, .85) !default; @@ -1061,8 +1096,8 @@ $toast-header-border-color: rgba(0, 0, 0, .05) !default; $badge-font-size: .75em !default; $badge-font-weight: $font-weight-bold !default; $badge-color: $white !default; -$badge-padding-y: .25em !default; -$badge-padding-x: .5em !default; +$badge-padding-y: .35em !default; +$badge-padding-x: .65em !default; $badge-border-radius: $border-radius !default; @@ -1124,6 +1159,8 @@ $alert-bg-level: -10 !default; $alert-border-level: -9 !default; $alert-color-level: 6 !default; +$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side + // Progress bars @@ -1217,14 +1254,18 @@ $carousel-caption-color: $white !default; $carousel-caption-padding-y: 1.25rem !default; $carousel-caption-spacer: 1.25rem !default; -$carousel-control-icon-width: 20px !default; +$carousel-control-icon-width: 2rem !default; -$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default; -$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default; +$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !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-dark-indicator-active-bg: $black !default; +$carousel-dark-caption-color: $black !default; +$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; + // Spinners @@ -1240,11 +1281,18 @@ $spinner-border-width-sm: .2em !default; // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; - +$btn-close-width: 1em !default; +$btn-close-height: $btn-close-width !default; +$btn-close-padding-x: .25em !default; +$btn-close-padding-y: $btn-close-padding-x !default; +$btn-close-color: $black !default; +$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$btn-close-color}' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default; +$btn-close-focus-shadow: $input-btn-focus-box-shadow !default; +$btn-close-opacity: .5 !default; +$btn-close-hover-opacity: .75 !default; +$btn-close-focus-opacity: 1 !default; +$btn-close-disabled-opacity: .25 !default; +$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Code |