diff options
Diffstat (limited to 'scss/_variables.scss')
| -rw-r--r-- | scss/_variables.scss | 223 |
1 files changed, 108 insertions, 115 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 09ac11a9d..f517797fa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -21,8 +21,8 @@ // Forms // Dropdowns // Z-index master list -// Navbar // Navs +// Navbar // Pagination // Jumbotron // Form states and alerts @@ -138,36 +138,15 @@ $enable-print-styles: true !default; // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. -$spacer: 1rem !default; -$spacer-x: $spacer !default; -$spacer-y: $spacer !default; +$spacer: 1rem !default; $spacers: ( - 0: ( - x: 0, - y: 0 - ), - 1: ( - x: ($spacer-x * .25), - y: ($spacer-y * .25) - ), - 2: ( - x: ($spacer-x * .5), - y: ($spacer-y * .5) - ), - 3: ( - x: $spacer-x, - y: $spacer-y - ), - 4: ( - x: ($spacer-x * 1.5), - y: ($spacer-y * 1.5) - ), - 5: ( - x: ($spacer-x * 3), - y: ($spacer-y * 3) - ) + 0: 0, + 1: ($spacer * .25), + 2: ($spacer * .5), + 3: $spacer, + 4: ($spacer * 1.5), + 5: ($spacer * 3) ) !default; -$border-width: 1px !default; // This variable affects the `.h-*` and `.w-*` classes. $sizes: ( @@ -237,11 +216,35 @@ $grid-gutter-widths: ( xl: $grid-gutter-width-base ) !default; + +// Components +// +// Define common padding and border radius sizes and more. + +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; + +$border-width: 1px !default; + +$border-radius: .25rem !default; +$border-radius-lg: .3rem !default; +$border-radius-sm: .2rem !default; + +$component-active-color: $white !default; +$component-active-bg: $brand-primary !default; + +$caret-width: .3em !default; + +$transition-base: all .2s ease-in-out !default; +$transition-fade: opacity .15s linear !default; +$transition-collapse: height .35s ease !default; + + // Fonts // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; @@ -305,27 +308,6 @@ $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: 5px !default; -// Components -// -// Define common padding and border radius sizes and more. - -$line-height-lg: (4 / 3) !default; -$line-height-sm: 1.5 !default; - -$border-radius: .25rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; - -$component-active-color: $white !default; -$component-active-bg: $brand-primary !default; - -$caret-width: .3em !default; - -$transition-base: all .2s ease-in-out !default; -$transition-fade: opacity .15s linear !default; -$transition-collapse: height .35s ease !default; - - // Tables // // Customizes the `.table` component with basic values, each used across all table variations. @@ -334,28 +316,40 @@ $table-cell-padding: .75rem !default; $table-sm-cell-padding: .3rem !default; $table-bg: transparent !default; - -$table-inverse-bg: $gray-dark !default; -$table-inverse-color: $body-bg !default; - $table-bg-accent: rgba($black,.05) !default; $table-bg-hover: rgba($black,.075) !default; $table-bg-active: $table-bg-hover !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-lighter !default; + $table-head-bg: $gray-lighter !default; $table-head-color: $gray !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-lighter !default; +$table-inverse-bg: $gray-dark !default; +$table-inverse-bg-accent: rgba($white, .05) !default; +$table-inverse-bg-hover: rgba($white, .075) !default; +$table-inverse-bg-active: $table-inverse-bg-hover !default; +$table-inverse-border: lighten($gray-dark, 7.5%) !default; +$table-inverse-color: $body-bg !default; // Buttons // // For each of Bootstrap's buttons, define text, background and border color. -$btn-padding-x: 1rem !default; -$btn-padding-y: .5rem !default; -$btn-line-height: 1.25 !default; +$input-btn-padding-y: .5rem !default; +$input-btn-padding-x: 1rem !default; +$input-btn-line-height: 1.25 !default; + +$input-btn-padding-y-sm: .25rem !default; +$input-btn-padding-x-sm: .5rem !default; +$input-btn-line-height-sm: 1.5 !default; + +$input-btn-padding-y-lg: .5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: 1.5 !default; + $btn-font-weight: $font-weight-normal !default; $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; $btn-focus-box-shadow: 0 0 0 2px rgba($brand-primary, .25) !default; @@ -387,12 +381,6 @@ $btn-danger-border: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; -$btn-padding-x-sm: .5rem !default; -$btn-padding-y-sm: .25rem !default; - -$btn-padding-x-lg: 1.5rem !default; -$btn-padding-y-lg: .75rem !default; - $btn-block-spacing-y: .5rem !default; // Allows for customizing button radius independently from global border radius @@ -405,10 +393,6 @@ $btn-transition: all .2s ease-in-out !default; // Forms -$input-padding-x: .75rem !default; -$input-padding-y: .5rem !default; -$input-line-height: 1.25 !default; - $input-bg: $white !default; $input-bg-disabled: $gray-lighter !default; @@ -428,15 +412,9 @@ $input-color-focus: $input-color !default; $input-color-placeholder: $gray-light !default; -$input-padding-x-sm: .5rem !default; -$input-padding-y-sm: .25rem !default; - -$input-padding-x-lg: 1.5rem !default; -$input-padding-y-lg: .75rem !default; - -$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default; -$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; -$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; +$input-height: (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default; +$input-height-lg: (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default; +$input-height-sm: (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default; $input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; @@ -450,7 +428,7 @@ $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; -$form-group-margin-bottom: $spacer-y !default; +$form-group-margin-bottom: 1rem !default; $input-group-addon-bg: $gray-lighter !default; $input-group-addon-border-color: $input-border-color !default; @@ -458,8 +436,8 @@ $input-group-addon-border-color: $input-border-color !default; $cursor-disabled: not-allowed !default; $custom-control-gutter: 1.5rem !default; -$custom-control-spacer-x: 1rem !default; $custom-control-spacer-y: .25rem !default; +$custom-control-spacer-x: 1rem !default; $custom-control-indicator-size: 1rem !default; $custom-control-indicator-bg: #ddd !default; @@ -491,10 +469,10 @@ $custom-checkbox-indeterminate-box-shadow: none !default; $custom-radio-radius: 50% !default; $custom-radio-checked-icon: 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-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; +$custom-select-padding-x: .75rem !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-line-height !default; +$custom-select-line-height: $input-btn-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-light !default; $custom-select-bg: $white !default; @@ -515,8 +493,8 @@ $custom-file-height: 2.5rem !default; $custom-file-width: 14rem !default; $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default; -$custom-file-padding-x: .5rem !default; $custom-file-padding-y: 1rem !default; +$custom-file-padding-x: .5rem !default; $custom-file-line-height: 1.5 !default; $custom-file-color: $gray !default; $custom-file-bg: $white !default; @@ -569,6 +547,7 @@ $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-light !default; +$dropdown-item-padding-y: .25rem !default; $dropdown-item-padding-x: 1.5rem !default; $dropdown-header-color: $gray-light !default; @@ -588,13 +567,42 @@ $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; +// Navs + +$nav-item-margin: .2rem !default; +$nav-item-inline-spacer: 1rem !default; +$nav-link-padding-y: .5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-hover-bg: $gray-lighter !default; +$nav-disabled-link-color: $gray-light !default; + +$nav-tabs-border-color: #ddd !default; +$nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius !default; +$nav-tabs-link-hover-border-color: $gray-lighter !default; +$nav-tabs-active-link-color: $gray !default; +$nav-tabs-active-link-bg: $body-bg !default; +$nav-tabs-active-link-border-color: #ddd !default; +$nav-tabs-justified-link-border-color: #ddd !default; +$nav-tabs-justified-active-link-border-color: $body-bg !default; + +$nav-pills-border-radius: $border-radius !default; +$nav-pills-active-link-color: $component-active-color !default; +$nav-pills-active-link-bg: $component-active-bg !default; + // Navbar -$navbar-padding-x: $spacer !default; $navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-x: $spacer !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: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; +$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default; -$navbar-toggler-padding-x: .75rem !default; $navbar-toggler-padding-y: .25rem !default; +$navbar-toggler-padding-x: .75rem !default; $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; @@ -612,32 +620,14 @@ $navbar-light-disabled-color: rgba($black,.3) !default; $navbar-light-toggler-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-border: rgba($black,.1) !default; -// Navs - -$nav-link-padding: .5em 1em !default; -$nav-disabled-link-color: $gray-light !default; - -$nav-tabs-border-color: #ddd !default; -$nav-tabs-border-width: $border-width !default; -$nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-lighter !default; -$nav-tabs-active-link-color: $gray !default; -$nav-tabs-active-link-bg: $body-bg !default; -$nav-tabs-active-link-border-color: #ddd !default; - -$nav-pills-border-radius: $border-radius !default; -$nav-pills-active-link-color: $component-active-color !default; -$nav-pills-active-link-bg: $component-active-bg !default; - - // Pagination -$pagination-padding-x: .75rem !default; $pagination-padding-y: .5rem !default; -$pagination-padding-x-sm: .5rem !default; +$pagination-padding-x: .75rem !default; $pagination-padding-y-sm: .25rem !default; -$pagination-padding-x-lg: 1.5rem !default; +$pagination-padding-x-sm: .5rem !default; $pagination-padding-y-lg: .75rem !default; +$pagination-padding-x-lg: 1.5rem !default; $pagination-line-height: 1.25 !default; $pagination-color: $link-color !default; @@ -688,8 +678,8 @@ $state-danger-border: darken($state-danger-bg, 5%) !default; // Cards -$card-spacer-x: 1.25rem !default; $card-spacer-y: .75rem !default; +$card-spacer-x: 1.25rem !default; $card-border-width: 1px !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black,.125) !default; @@ -732,11 +722,13 @@ $popover-border-color: rgba($black,.2) !default; $popover-box-shadow: 0 5px 10px rgba($black,.2) !default; $popover-title-bg: darken($popover-bg, 3%) !default; -$popover-title-padding-x: 14px !default; +$popover-title-color: $headings-color !default; $popover-title-padding-y: 8px !default; +$popover-title-padding-x: 14px !default; -$popover-content-padding-x: 14px !default; +$popover-content-color: $body-color !default; $popover-content-padding-y: 9px !default; +$popover-content-padding-x: 14px !default; $popover-arrow-width: 10px !default; $popover-arrow-color: $popover-bg !default; @@ -758,8 +750,8 @@ $badge-color: $white !default; $badge-link-hover-color: $white !default; $badge-font-size: 75% !default; $badge-font-weight: $font-weight-bold !default; -$badge-padding-x: .4em !default; $badge-padding-y: .25em !default; +$badge-padding-x: .4em !default; $badge-pill-padding-x: .6em !default; // Use a higher than normal value to ensure completely rounded edges when @@ -802,9 +794,9 @@ $modal-transition: transform .3s ease-out !default; // // Define alert colors, border radius, and padding. -$alert-padding-x: 1.25rem !default; $alert-padding-y: .75rem !default; -$alert-margin-bottom: $spacer-y !default; +$alert-padding-x: 1.25rem !default; +$alert-margin-bottom: 1rem !default; $alert-border-radius: $border-radius !default; $alert-link-font-weight: $font-weight-bold !default; $alert-border-width: $border-width !default; @@ -836,6 +828,7 @@ $progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; $progress-bar-color: $white !default; $progress-bar-bg: $brand-primary !default; $progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width .6s ease !default; // List group @@ -845,8 +838,8 @@ $list-group-border-color: rgba($black,.125) !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; -$list-group-item-padding-x: 1.25rem !default; $list-group-item-padding-y: .75rem !default; +$list-group-item-padding-x: 1.25rem !default; $list-group-hover-bg: $gray-lightest !default; $list-group-active-color: $component-active-color !default; @@ -924,8 +917,8 @@ $close-text-shadow: 0 1px 0 $white !default; // Code $code-font-size: 90% !default; -$code-padding-x: .4rem !default; $code-padding-y: .2rem !default; +$code-padding-x: .4rem !default; $code-color: #bd4147 !default; $code-bg: $gray-lightest !default; |