diff options
Diffstat (limited to 'node_modules/bootstrap/scss/_custom-forms.scss')
-rw-r--r-- | node_modules/bootstrap/scss/_custom-forms.scss | 42 |
1 files changed, 29 insertions, 13 deletions
diff --git a/node_modules/bootstrap/scss/_custom-forms.scss b/node_modules/bootstrap/scss/_custom-forms.scss index 03f3fc5..9aeeeda 100644 --- a/node_modules/bootstrap/scss/_custom-forms.scss +++ b/node_modules/bootstrap/scss/_custom-forms.scss @@ -9,6 +9,7 @@ .custom-control { position: relative; + z-index: 1; display: block; min-height: $font-size-base * $line-height-base; padding-left: $custom-control-gutter + $custom-control-indicator-size; @@ -21,7 +22,10 @@ .custom-control-input { position: absolute; + left: 0; z-index: -1; // Put the input behind the label so it doesn't overlay text + width: $custom-control-indicator-size; + height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2; opacity: 0; &:checked ~ .custom-control-label::before { @@ -51,6 +55,8 @@ @include box-shadow($custom-control-indicator-active-box-shadow); } + // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 + &[disabled], &:disabled { ~ .custom-control-label { color: $custom-control-label-disabled-color; @@ -69,7 +75,9 @@ .custom-control-label { position: relative; margin-bottom: 0; + color: $custom-control-label-color; vertical-align: top; + cursor: $custom-control-cursor; // Background-color and (when enabled) gradient &::before { @@ -111,7 +119,7 @@ .custom-control-input:checked ~ .custom-control-label { &::after { - background-image: $custom-checkbox-indicator-icon-checked; + background-image: escape-svg($custom-checkbox-indicator-icon-checked); } } @@ -122,16 +130,16 @@ @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); } &::after { - background-image: $custom-checkbox-indicator-icon-indeterminate; + background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate); } } .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } &:indeterminate ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } } } @@ -148,13 +156,13 @@ .custom-control-input:checked ~ .custom-control-label { &::after { - background-image: $custom-radio-indicator-icon-checked; + background-image: escape-svg($custom-radio-indicator-icon-checked); } } .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } } } @@ -177,8 +185,8 @@ } &::after { - top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2}); - left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2}); + top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2); + left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2); width: $custom-switch-indicator-size; height: $custom-switch-indicator-size; background-color: $custom-control-indicator-border-color; @@ -197,7 +205,7 @@ .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } } } @@ -220,8 +228,7 @@ line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; - background: $custom-select-background; - background-color: $custom-select-bg; + background: $custom-select-bg $custom-select-background; border: $custom-select-border-width solid $custom-select-border-color; @include border-radius($custom-select-border-radius, 0); @include box-shadow($custom-select-box-shadow); @@ -231,8 +238,9 @@ border-color: $custom-select-focus-border-color; outline: 0; @if $enable-shadows { - box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow; + @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow); } @else { + // Avoid using mixin so we can pass custom focus shadow properly box-shadow: $custom-select-focus-box-shadow; } @@ -263,6 +271,12 @@ &::-ms-expand { display: none; } + + // Remove outline from select box in FF + &:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 $custom-select-color; + } } .custom-select-sm { @@ -307,6 +321,8 @@ box-shadow: $custom-file-focus-box-shadow; } + // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 + &[disabled] ~ .custom-file-label, &:disabled ~ .custom-file-label { background-color: $custom-file-disabled-bg; } @@ -365,7 +381,7 @@ .custom-range { width: 100%; - height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2}); + height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2); padding: 0; // Need to reset padding background-color: transparent; appearance: none; |