1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | $select-background: $white !default;
|
12 |
|
13 |
|
14 |
|
15 | $select-triangle-color: $dark-gray !default;
|
16 |
|
17 |
|
18 |
|
19 | $select-radius: $global-radius !default;
|
20 |
|
21 | @mixin form-select {
|
22 | $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
|
23 |
|
24 | height: $height;
|
25 | margin: 0 0 $form-spacing;
|
26 | padding: $input-padding;
|
27 |
|
28 | appearance: none;
|
29 | border: $input-border;
|
30 | border-radius: $select-radius;
|
31 | background-color: $select-background;
|
32 |
|
33 | font-family: $input-font-family;
|
34 | font-size: $input-font-size;
|
35 | font-weight: $input-font-weight;
|
36 | line-height: $input-line-height;
|
37 | color: $input-color;
|
38 |
|
39 | @if $select-triangle-color != transparent {
|
40 | @include background-triangle($select-triangle-color);
|
41 | background-origin: content-box;
|
42 | background-position: $global-right (-$form-spacing) center;
|
43 | background-repeat: no-repeat;
|
44 | background-size: 9px 6px;
|
45 |
|
46 | padding-#{$global-right}: ($form-spacing * 1.5);
|
47 | }
|
48 |
|
49 | @if has-value($input-transition) {
|
50 | transition: $input-transition;
|
51 | }
|
52 |
|
53 |
|
54 | &:focus {
|
55 | outline: none;
|
56 | border: $input-border-focus;
|
57 | background-color: $input-background-focus;
|
58 | box-shadow: $input-shadow-focus;
|
59 |
|
60 | @if has-value($input-transition) {
|
61 | transition: $input-transition;
|
62 | }
|
63 | }
|
64 |
|
65 |
|
66 | &:disabled {
|
67 | background-color: $input-background-disabled;
|
68 | cursor: $input-cursor-disabled;
|
69 | }
|
70 |
|
71 |
|
72 | &::-ms-expand {
|
73 | display: none;
|
74 | }
|
75 |
|
76 | &[multiple] {
|
77 | height: auto;
|
78 | background-image: none;
|
79 | }
|
80 | }
|
81 |
|
82 | @mixin foundation-form-select {
|
83 | select {
|
84 | @include form-select;
|
85 | }
|
86 | }
|