diff options
Diffstat (limited to 'scss/forms')
-rw-r--r-- | scss/forms/_floating-labels.scss | 3 | ||||
-rw-r--r-- | scss/forms/_form-check.scss | 2 | ||||
-rw-r--r-- | scss/forms/_form-control.scss | 2 | ||||
-rw-r--r-- | scss/forms/_form-range.scss | 6 | ||||
-rw-r--r-- | scss/forms/_form-select.scss | 2 |
5 files changed, 8 insertions, 7 deletions
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 3ca4264..2cf0470 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -84,7 +84,8 @@ } } - > :disabled ~ label { + > :disabled ~ label, + > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity color: $form-floating-label-disabled-color; &::after { diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 83aacba..f8d9b08 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -33,13 +33,13 @@ height: $form-check-input-width; margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height vertical-align: top; + appearance: none; background-color: var(--#{$prefix}form-check-bg); background-image: var(--#{$prefix}form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: contain; border: $form-check-input-border; - appearance: none; print-color-adjust: exact; // Keep themed appearance for print @include transition($form-check-transition); diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index ca2a7df..67ae5f4 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -11,10 +11,10 @@ font-weight: $input-font-weight; line-height: $input-line-height; color: $input-color; + appearance: none; // Fix appearance for date inputs in Safari background-color: $input-bg; background-clip: padding-box; border: $input-border-width solid $input-border-color; - appearance: none; // Fix appearance for date inputs in Safari // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. @include border-radius($input-border-radius, 0); diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss index 6de4213..4732213 100644 --- a/scss/forms/_form-range.scss +++ b/scss/forms/_form-range.scss @@ -8,8 +8,8 @@ width: 100%; height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2); padding: 0; // Need to reset padding - background-color: transparent; appearance: none; + background-color: transparent; &:focus { outline: 0; @@ -28,12 +28,12 @@ width: $form-range-thumb-width; height: $form-range-thumb-height; margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific + appearance: none; @include gradient-bg($form-range-thumb-bg); border: $form-range-thumb-border; @include border-radius($form-range-thumb-border-radius); @include box-shadow($form-range-thumb-box-shadow); @include transition($form-range-thumb-transition); - appearance: none; &:active { @include gradient-bg($form-range-thumb-active-bg); @@ -54,12 +54,12 @@ &::-moz-range-thumb { width: $form-range-thumb-width; height: $form-range-thumb-height; + appearance: none; @include gradient-bg($form-range-thumb-bg); border: $form-range-thumb-border; @include border-radius($form-range-thumb-border-radius); @include box-shadow($form-range-thumb-box-shadow); @include transition($form-range-thumb-transition); - appearance: none; &:active { @include gradient-bg($form-range-thumb-active-bg); diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 0b26323..69ace52 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -14,6 +14,7 @@ font-weight: $form-select-font-weight; line-height: $form-select-line-height; color: $form-select-color; + appearance: none; background-color: $form-select-bg; background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none); background-repeat: no-repeat; @@ -23,7 +24,6 @@ @include border-radius($form-select-border-radius, 0); @include box-shadow($form-select-box-shadow); @include transition($form-select-transition); - appearance: none; &:focus { border-color: $form-select-focus-border-color; |