UNPKG

2.26 kBSCSSView Raw
1// Select
2//
3// Replaces the browser default select with a custom one, mostly pulled from
4// https://primer.github.io/.
5
6.form-select {
7 display: block;
8 width: 100%;
9 padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
10 // stylelint-disable-next-line property-no-vendor-prefix
11 -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
12 font-family: $form-select-font-family;
13 @include font-size($form-select-font-size);
14 font-weight: $form-select-font-weight;
15 line-height: $form-select-line-height;
16 color: $form-select-color;
17 background-color: $form-select-bg;
18 background-image: escape-svg($form-select-indicator);
19 background-repeat: no-repeat;
20 background-position: $form-select-bg-position;
21 background-size: $form-select-bg-size;
22 border: $form-select-border-width solid $form-select-border-color;
23 @include border-radius($form-select-border-radius, 0);
24 @include box-shadow($form-select-box-shadow);
25 @include transition($form-select-transition);
26 appearance: none;
27
28 &:focus {
29 border-color: $form-select-focus-border-color;
30 outline: 0;
31 @if $enable-shadows {
32 @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
33 } @else {
34 // Avoid using mixin so we can pass custom focus shadow properly
35 box-shadow: $form-select-focus-box-shadow;
36 }
37 }
38
39 &[multiple],
40 &[size]:not([size="1"]) {
41 padding-right: $form-select-padding-x;
42 background-image: none;
43 }
44
45 &:disabled {
46 color: $form-select-disabled-color;
47 background-color: $form-select-disabled-bg;
48 border-color: $form-select-disabled-border-color;
49 }
50
51 // Remove outline from select box in FF
52 &:-moz-focusring {
53 color: transparent;
54 text-shadow: 0 0 0 $form-select-color;
55 }
56}
57
58.form-select-sm {
59 padding-top: $form-select-padding-y-sm;
60 padding-bottom: $form-select-padding-y-sm;
61 padding-left: $form-select-padding-x-sm;
62 @include font-size($form-select-font-size-sm);
63}
64
65.form-select-lg {
66 padding-top: $form-select-padding-y-lg;
67 padding-bottom: $form-select-padding-y-lg;
68 padding-left: $form-select-padding-x-lg;
69 @include font-size($form-select-font-size-lg);
70}