aboutsummaryrefslogtreecommitdiff
path: root/scss/forms/_form-select.scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss/forms/_form-select.scss')
-rw-r--r--scss/forms/_form-select.scss16
1 files changed, 12 insertions, 4 deletions
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 153ff6cd5..69ace529d 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -4,18 +4,19 @@
// https://primer.github.io/.
.form-select {
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+
display: block;
width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
- // stylelint-disable-next-line property-no-vendor-prefix
- -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
font-family: $form-select-font-family;
@include font-size($form-select-font-size);
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: escape-svg($form-select-indicator);
+ background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
@@ -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;
@@ -70,3 +70,11 @@
@include font-size($form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg);
}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .form-select {
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+ }
+ }
+}