1
2
3.#{$select-ns}-control {
4
5 border: $select-border;
6 padding: $select-padding-y $select-padding-x;
7 width: 100%;
8 overflow: hidden;
9 position: relative;
10 z-index: 1;
11 box-sizing: border-box;
12 box-shadow: $select-shadow-input;
13 border-radius: $select-border-radius;
14 display: flex;
15 flex-wrap: wrap;
16
17 .#{$select-ns}-wrapper.multi.has-items & {
18 $padding-x: $select-padding-x;
19 $padding-top: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-width-item-border});
20 $padding-bottom: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-margin-item-y} - #{$select-width-item-border});
21 padding: $padding-top $padding-x $padding-bottom;
22 }
23
24 .full & {
25 background-color: $select-color-input-full;
26 }
27
28 .disabled &,
29 .disabled & * {
30 cursor: default !important;
31 }
32
33 .focus & {
34 box-shadow: $select-shadow-input-focus;
35 }
36
37 > * {
38 vertical-align: baseline;
39 display: inline-block;
40 }
41
42 .#{$select-ns}-wrapper.multi & > div {
43 cursor: pointer;
44 margin: 0 $select-margin-item-x $select-margin-item-y 0;
45 padding: $select-padding-item-y $select-padding-item-x;
46 background: $select-color-item;
47 color: $select-color-item-text;
48 border: $select-width-item-border solid $select-color-item-border;
49
50 &.active {
51 background: $select-color-item-active;
52 color: $select-color-item-active-text;
53 border: $select-width-item-border solid $select-color-item-active-border;
54 }
55 }
56
57 .#{$select-ns}-wrapper.multi.disabled & > div {
58 &, &.active {
59 color: lighten(desaturate($select-color-item-text, 100%), $select-lighten-disabled-item-text);
60 background: lighten(desaturate($select-color-item, 100%), $select-lighten-disabled-item);
61 border: $select-width-item-border solid lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
62 }
63 }
64
65 > input {
66 &::-ms-clear {
67 display: none;
68 }
69
70 flex: 1 1 auto;
71 min-width: 7rem;
72 display: inline-block !important;
73 padding: 0 !important;
74 min-height: 0 !important;
75 max-height: none !important;
76 max-width: 100% !important;
77 margin: 0 !important;
78 text-indent: 0 !important;
79 border: 0 none !important;
80 background: none !important;
81 line-height: inherit !important;
82 user-select: auto !important;
83 box-shadow: none !important;
84 &:focus { outline: none !important; }
85 }
86
87 .has-items & > input{
88 margin: $select-caret-margin !important;
89 }
90
91 &.rtl {
92 text-align: right;
93 &.single .#{$select-ns}-control:after {
94 left: $select-arrow-offset;
95 right: auto;
96 }
97 .#{$select-ns}-control > input {
98 margin: $select-caret-margin-rtl !important;
99 }
100 }
101
102 .disabled & {
103 opacity: $select-opacity-disabled;
104 background-color: $select-color-disabled;
105 }
106
107 // hide input, while retaining its focus, and maintain layout so users can still click on the space to bring the display back
108 // visibility:hidden can prevent the input from receiving focus
109 .input-hidden & > input{
110 opacity: 0;
111 position: absolute;
112 left: -10000px;
113 }
114
115}