Skip to content

Commit ea11bc2

Browse files
sagalbotsagalbot
committed
- add necessary styles to work without bootstrap - update bootstrap 4 compatibility
1 parent e1a100a commit ea11bc2

File tree

1 file changed

+142
-22
lines changed

1 file changed

+142
-22
lines changed

‎src/components/Select.vue

Lines changed: 142 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,55 @@
11
<style>
2+
.v-select,
3+
.v-select * {
4+
-webkit-box-sizing: border-box;
5+
-moz-box-sizing: border-box;
6+
box-sizing: border-box;
7+
font-family: sans-serif;
8+
}
9+
10+
.v-select ::after,
11+
.v-select ::before {
12+
-webkit-box-sizing: inherit;
13+
box-sizing: inherit;
14+
}
15+
16+
.v-select a:not([href]):not([tabindex]):focus,
17+
.v-select a:not([href]):not([tabindex]):hover {
18+
color: #fff;
19+
}
20+
21+
.v-select input[type="search"] {
22+
23+
}
24+
25+
26+
27+
.dropdown-menu > li > a {
28+
29+
}
30+
31+
button.close {
32+
appearance: none;
33+
padding: 0;
34+
cursor: pointer;
35+
background: 0 0;
36+
border: 0;
37+
font-weight: 700;
38+
line-height: 1;
39+
color: #000;
40+
text-shadow: 0 1px 0 #fff;
41+
filter: alpha(opacity=20);
42+
opacity: .2;
43+
}
44+
45+
.v-select .dropdown-toggle {
46+
-webkit-appearance: none;
47+
-moz-appearance: none;
48+
appearance: none;
49+
}
50+
51+
/* - - - - - - - - - - - - - - - - */
52+
253
.v-select {
354
position: relative;
455
}
@@ -23,7 +74,7 @@
2374
.v-select .open-indicator:before {
2475
border-color: rgba(60, 60, 60, .5);
2576
border-style: solid;
26-
border-width: 0.25em 0.25em 0 0;
77+
border-width: 3px 3px 0 0;
2778
content: '';
2879
display: inline-block;
2980
height: 10px;
@@ -34,14 +85,6 @@
3485
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
3586
}
3687
37-
.v-select.open .open-indicator {
38-
bottom: 1px;
39-
}
40-
41-
.v-select.open .open-indicator:before {
42-
transform: rotate(315deg);
43-
}
44-
4588
.v-select .dropdown-toggle {
4689
display: block;
4790
padding: 0;
@@ -51,25 +94,64 @@
5194
white-space: normal;
5295
}
5396
97+
.v-select .dropdown-toggle:after {
98+
visibility: hidden;
99+
display: block;
100+
font-size: 0;
101+
content: " ";
102+
clear: both;
103+
height: 0;
104+
}
105+
54106
.v-select.searchable .dropdown-toggle {
55107
cursor: text;
56108
}
57109
58-
.v-select.open .dropdown-toggle {
59-
border-bottom: none;
60-
border-bottom-left-radius: 0;
61-
border-bottom-right-radius: 0;
110+
.v-select.unsearchable .dropdown-toggle {
111+
cursor: pointer;
62112
}
63113
64114
.v-select > .dropdown-menu {
115+
position: absolute;
116+
top: 100%;
117+
left: 0;
118+
z-index: 1000;
119+
/*float: left;*/
120+
min-width: 160px;
121+
padding: 5px 0;
65122
margin: 0;
66123
width: 100%;
67124
overflow-y: scroll;
125+
border: 1px solid #ccc;
126+
border: 1px solid rgba(0, 0, 0, .15);
68127
border-top: none;
128+
border-radius: 4px;
69129
border-top-left-radius: 0;
70130
border-top-right-radius: 0;
131+
/*font-size: 14px;*/
132+
text-align: left;
133+
list-style: none;
134+
background-color: #fff;
135+
background-clip: padding-box;
136+
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
137+
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
138+
}
139+
140+
/*divider*/
141+
/*.v-select > .dropdown-menu*/
142+
.dropdown-menu .divider {
143+
height: 1px;
144+
margin: 9px 0;
145+
overflow: hidden;
146+
background-color: #e5e5e5;
147+
}
148+
149+
.v-select .text-center {
150+
text-align: center;
71151
}
72152
153+
/*text-center*/
154+
73155
.v-select .selected-tag {
74156
color: #333;
75157
background-color: #f0f0f0;
@@ -81,15 +163,27 @@
81163
float: left;
82164
line-height: 1.7em;
83165
}
84-
85166
.v-select .selected-tag .close {
86167
float: none;
87168
margin-right: 0;
88169
font-size: 20px;
89170
}
90171
172+
/* -- Search Input -- */
173+
.v-select input[type="search"]::-webkit-search-decoration,
174+
.v-select input[type="search"]::-webkit-search-cancel-button,
175+
.v-select input[type="search"]::-webkit-search-results-button,
176+
.v-select input[type="search"]::-webkit-search-results-decoration {
177+
display: none;
178+
}
91179
.v-select input[type=search],
92180
.v-select input[type=search]:focus {
181+
appearance: none;
182+
line-height: 1.42857143;
183+
/*color: #555;*/
184+
border-radius: 4px;
185+
height: 34px;
186+
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
93187
display: inline-block;
94188
border: none;
95189
outline: none;
@@ -103,27 +197,40 @@
103197
float: left;
104198
clear: none;
105199
}
200+
.v-select.unsearchable input[type=search] {
201+
max-width: 1px;
202+
}
106203
107-
.v-select input[type=search]:disabled {
108-
cursor: pointer;
204+
.v-select li > a {
205+
display: block;
206+
padding: 3px 20px;
207+
clear: both;
208+
font-weight: 400;
209+
line-height: 1.42857143;
210+
color: #333;
211+
white-space: nowrap;
109212
}
110213
111-
.v-select li a {
214+
.v-select li:hover {
112215
cursor: pointer;
113216
}
114217
115-
.v-select .active a {
218+
.v-select .active > a {
116219
background: rgba(50, 50, 50, .1);
117-
color: #333;
220+
/*color: #333;*/
221+
}
222+
223+
.v-select .highlight > a {
224+
background: #5897fb;
225+
color: #fff;
118226
}
119227
120-
.v-select .highlight a,
121-
.v-select li:hover > a,
122-
.v-select .active > a:hover {
228+
.v-select .highlight > a {
123229
background: #5897fb;
124230
color: #fff;
125231
}
126232
233+
127234
.v-select .spinner {
128235
opacity: 0;
129236
position: absolute;
@@ -152,6 +259,19 @@
152259
height: 5em;
153260
}
154261
262+
/* -- Open State -- */
263+
.v-select.open .open-indicator {
264+
bottom: 1px;
265+
}
266+
.v-select.open .open-indicator:before {
267+
transform: rotate(315deg);
268+
}
269+
.v-select.open .dropdown-toggle {
270+
border-bottom: none;
271+
border-bottom-left-radius: 0;
272+
border-bottom-right-radius: 0;
273+
}
274+
155275
@-webkit-keyframes vSelectSpinner {
156276
0% {
157277
transform: rotate(0deg);

0 commit comments

Comments
 (0)