rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

$component-active-bg and $component-active-color are partially useful (#24710)

Browse Source 
* Use `$component-active-bg`, `$component-active-color` in custom-control-indicators and pagination for checked, indeterminate, and active states

* Button and Forms focus colors should be based on `$component-active-bg`
This commit is contained in:
Patrick Yeo 2018-01-12 23:56:31 -08:00 committed by XhmikosR
parent 588227f97f
commit 17b0472b12
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
scss/_variables.scss
View File

@ -323,7 +323,7 @@ $input-btn-padding-x: .75rem !default;
$input-btn-line-height: $line-height-base !default; $input-btn-line-height: $line-height-base !default;
$input-btn-focus-width: .2rem !default; $input-btn-focus-width: .2rem !default;
$input-btn-focus-color: rgba(theme-color("primary"), .25) !default; $input-btn-focus-color: rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
$input-btn-padding-y-sm: .25rem !default; $input-btn-padding-y-sm: .25rem !default;
@ -401,7 +401,7 @@ $input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default; $input-border-radius-sm: $border-radius-sm !default;
$input-focus-bg: $input-bg !default; $input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default; $input-focus-border-color: lighten($component-active-bg, 25%) !default;
$input-focus-color: $input-color !default; $input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default; $input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
@ -447,20 +447,20 @@ $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !
$custom-control-indicator-disabled-bg: $gray-200 !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: $white !default; $custom-control-indicator-checked-color: $component-active-color !default;
$custom-control-indicator-checked-bg: theme-color("primary") !default; $custom-control-indicator-checked-bg: $component-active-bg !default;
$custom-control-indicator-checked-box-shadow: none !default; $custom-control-indicator-checked-box-shadow: none !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: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
$custom-control-indicator-active-color: $white !default; $custom-control-indicator-active-color: $component-active-color !default;
$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default; $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
$custom-control-indicator-active-box-shadow: none !default; $custom-control-indicator-active-box-shadow: none !default;
$custom-checkbox-indicator-border-radius: $border-radius !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;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: theme-color("primary") !default; $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !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-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-box-shadow: none !default;
@ -485,7 +485,7 @@ $custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default; $custom-select-border-radius: $border-radius !default;
$custom-select-focus-border-color: $input-focus-border-color !default; $custom-select-focus-border-color: $input-focus-border-color !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default; $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
$custom-select-font-size-sm: 75% !default; $custom-select-font-size-sm: 75% !default;
$custom-select-height-sm: $input-height-sm !default; $custom-select-height-sm: $input-height-sm !default;
@ -633,9 +633,9 @@ $pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default; $pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default; $pagination-hover-border-color: $gray-300 !default;
$pagination-active-color: $white !default; $pagination-active-color: $component-active-color !default;
$pagination-active-bg: theme-color("primary") !default; $pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: theme-color("primary") !default; $pagination-active-border-color: $pagination-active-bg !default;
$pagination-disabled-color: $gray-600 !default; $pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default; $pagination-disabled-bg: $white !default;