You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// 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; 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: 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; border: $form-select-border-width solid $form-select-border-color; @include border-radius($form-select-border-radius, 0); @include box-shadow($form-select-box-shadow); @include transition($form-select-transition);
&:focus { border-color: $form-select-focus-border-color; outline: 0; @if $enable-shadows { @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow); } @else { // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow; } }
&[multiple], &[size]:not([size="1"]) { padding-right: $form-select-padding-x; background-image: none; }
&:disabled { color: $form-select-disabled-color; background-color: $form-select-disabled-bg; border-color: $form-select-disabled-border-color; }
// Remove outline from select box in FF
&:-moz-focusring { color: transparent; text-shadow: 0 0 0 $form-select-color; } }
.form-select-sm { padding-top: $form-select-padding-y-sm; padding-bottom: $form-select-padding-y-sm; padding-left: $form-select-padding-x-sm; @include font-size($form-select-font-size-sm); @include border-radius($form-select-border-radius-sm); }
.form-select-lg { padding-top: $form-select-padding-y-lg; padding-bottom: $form-select-padding-y-lg; padding-left: $form-select-padding-x-lg; @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)}; } } }
|