summaryrefslogtreecommitdiffstats
path: root/scss/forms
diff options
context:
space:
mode:
Diffstat (limited to 'scss/forms')
-rw-r--r--scss/forms/_floating-labels.scss3
-rw-r--r--scss/forms/_form-check.scss2
-rw-r--r--scss/forms/_form-control.scss2
-rw-r--r--scss/forms/_form-range.scss6
-rw-r--r--scss/forms/_form-select.scss2
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;