Skip to content

Commit ffbd223

Browse files
sagalbotsagalbot
committed
- organize css - switched 'selected' class back to 'active' - remove specificity where possible - add unsearchable and loading example to dev template
1 parent e202474 commit ffbd223

File tree

2 files changed

+71
-112
lines changed

2 files changed

+71
-112
lines changed

‎dev.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<head>
55
<meta charset="utf-8">
66
<title>Vue Select Dev</title>
7-
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
87
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
98
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
10-
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
9+
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
10+
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
1111
<style>
1212
html,
1313
body,
@@ -34,6 +34,8 @@
3434
<v-select placeholder="multiple" multiple :options="options"></v-select>
3535
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
3636
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
37+
<v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>
38+
<v-select placeholder="loading" loading></v-select>
3739
</div>
3840
</body>
3941

‎src/components/Select.vue

Lines changed: 67 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,15 @@
11
<style>
2+
.v-select {
3+
position: relative;
4+
}
25
.v-select,
36
.v-select * {
47
-webkit-box-sizing: border-box;
58
-moz-box-sizing: border-box;
69
box-sizing: border-box;
710
font-family: sans-serif;
811
}
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-
.dropdown-menu > li > a {
26-
27-
}
28-
29-
button.close {
30-
appearance: none;
31-
padding: 0;
32-
cursor: pointer;
33-
background: 0 0;
34-
border: 0;
35-
font-weight: 700;
36-
line-height: 1;
37-
color: #000;
38-
text-shadow: 0 1px 0 #fff;
39-
filter: alpha(opacity=20);
40-
opacity: .2;
41-
}
42-
43-
.v-select .dropdown-toggle {
44-
-webkit-appearance: none;
45-
-moz-appearance: none;
46-
appearance: none;
47-
}
48-
49-
/* - - - - - - - - - - - - - - - - */
50-
51-
.v-select {
52-
position: relative;
53-
}
54-
12+
/* Open Indicator */
5513
.v-select .open-indicator {
5614
position: absolute;
5715
bottom: 6px;
@@ -63,12 +21,8 @@
6321
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
6422
opacity: 1;
6523
transition: opacity .1s;
24+
height: 20px; width: 10px;
6625
}
67-
68-
.v-select.loading .open-indicator {
69-
opacity: 0;
70-
}
71-
7226
.v-select .open-indicator:before {
7327
border-color: rgba(60, 60, 60, .5);
7428
border-style: solid;
@@ -81,8 +35,24 @@
8135
transform: rotate(133deg);
8236
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
8337
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
38+
box-sizing: inherit;
39+
}
40+
/* Open Indicator States */
41+
.v-select.open .open-indicator:before {
42+
transform: rotate(315deg);
43+
}
44+
.v-select.loading .open-indicator {
45+
opacity: 0;
46+
}
47+
.v-select.open .open-indicator {
48+
bottom: 1px;
49+
}
50+
/* Dropdown Toggle */
51+
.v-select .dropdown-toggle {
52+
-webkit-appearance: none;
53+
-moz-appearance: none;
54+
appearance: none;
8455
}
85-
8656
.v-select .dropdown-toggle {
8757
display: block;
8858
padding: 0;
@@ -91,7 +61,6 @@
9161
border-radius: 4px;
9262
white-space: normal;
9363
}
94-
9564
.v-select .dropdown-toggle:after {
9665
visibility: hidden;
9766
display: block;
@@ -100,16 +69,20 @@
10069
clear: both;
10170
height: 0;
10271
}
103-
72+
/* Dropdown Toggle States */
10473
.v-select.searchable .dropdown-toggle {
10574
cursor: text;
10675
}
107-
10876
.v-select.unsearchable .dropdown-toggle {
10977
cursor: pointer;
11078
}
111-
112-
.v-select > .dropdown-menu {
79+
.v-select.open .dropdown-toggle {
80+
border-bottom-color: transparent;
81+
border-bottom-left-radius: 0;
82+
border-bottom-right-radius: 0;
83+
}
84+
/* Dropdown Menu */
85+
.v-select .dropdown-menu {
11386
position: absolute;
11487
top: 100%;
11588
left: 0;
@@ -134,22 +107,17 @@
134107
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
135108
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
136109
}
137-
138-
/*divider*/
139-
/*.v-select > .dropdown-menu*/
140-
.dropdown-menu .divider {
110+
.v-select .dropdown-menu .divider {
141111
height: 1px;
142-
margin: 9px 0;
112+
margin: 7px 0;
143113
overflow: hidden;
144114
background-color: #e5e5e5;
145115
}
146-
147-
.v-select .text-center {
116+
.v-select .no-options {
148117
text-align: center;
118+
padding-bottom: 2px;
149119
}
150-
151-
/*text-center*/
152-
120+
/* Selected Tags */
153121
.v-select .selected-tag {
154122
color: #333;
155123
background-color: #f0f0f0;
@@ -159,23 +127,31 @@
159127
margin: 4px 1px 0px 3px;
160128
padding: 0 0.25em;
161129
float: left;
162-
line-height: 1.7em;
130+
line-height: 24px;
163131
}
164-
165132
.v-select .selected-tag .close {
166133
float: none;
167134
margin-right: 0;
168135
font-size: 20px;
136+
appearance: none;
137+
padding: 0;
138+
cursor: pointer;
139+
background: 0 0;
140+
border: 0;
141+
font-weight: 700;
142+
line-height: 1;
143+
color: #000;
144+
text-shadow: 0 1px 0 #fff;
145+
filter: alpha(opacity=20);
146+
opacity: .2;
169147
}
170-
171-
/* -- Search Input -- */
148+
/* Search Input */
172149
.v-select input[type="search"]::-webkit-search-decoration,
173150
.v-select input[type="search"]::-webkit-search-cancel-button,
174151
.v-select input[type="search"]::-webkit-search-results-button,
175152
.v-select input[type="search"]::-webkit-search-results-decoration {
176153
display: none;
177154
}
178-
179155
.v-select input[type=search],
180156
.v-select input[type=search]:focus {
181157
appearance: none;
@@ -197,40 +173,38 @@
197173
float: left;
198174
clear: none;
199175
}
200-
176+
/* Search Input States */
201177
.v-select.unsearchable input[type=search] {
202178
max-width: 1px;
203179
}
204-
180+
/* List Items */
205181
.v-select li > a {
206182
display: block;
207183
padding: 3px 20px;
208184
clear: both;
209-
font-weight: 400;
210-
line-height: 1.42857143;
211-
color: #333;
185+
line-height: 1.42857143; /* Normalize line height */
186+
color: #333; /* Overrides most CSS frameworks */
212187
white-space: nowrap;
213188
}
214-
215189
.v-select li:hover {
216190
cursor: pointer;
217191
}
218-
219-
.v-select .active > a {
192+
.v-select .dropdown-menu .active > a {
193+
color: #333;
220194
background: rgba(50, 50, 50, .1);
221-
/*color: #333;*/
222195
}
223-
224-
.v-select .highlight > a {
196+
.v-select .dropdown-menu > .highlight > a {
197+
/*
198+
* required to override bootstrap 3's
199+
* .dropdown-menu > li > a:hover {} styles
200+
*/
225201
background: #5897fb;
226202
color: #fff;
227203
}
228-
229-
.v-select .highlight > a {
230-
background: #5897fb;
231-
color: #fff;
204+
.v-select .highlight:not(:last-child) {
205+
margin-bottom: 0; /* Fixes Bulma Margin */
232206
}
233-
207+
/* Loading Spinner */
234208
.v-select .spinner {
235209
opacity: 0;
236210
position: absolute;
@@ -247,33 +221,17 @@
247221
animation: vSelectSpinner 1.1s infinite linear;
248222
transition: opacity .1s;
249223
}
250-
251-
.v-select.loading .spinner {
252-
opacity: 1;
253-
}
254-
255224
.v-select .spinner,
256225
.v-select .spinner:after {
257226
border-radius: 50%;
258227
width: 5em;
259228
height: 5em;
260229
}
261-
262-
/* -- Open State -- */
263-
.v-select.open .open-indicator {
264-
bottom: 1px;
265-
}
266-
267-
.v-select.open .open-indicator:before {
268-
transform: rotate(315deg);
269-
}
270-
271-
.v-select.open .dropdown-toggle {
272-
border-bottom: none;
273-
border-bottom-left-radius: 0;
274-
border-bottom-right-radius: 0;
230+
/* Loading Spinner States */
231+
.v-select.loading .spinner {
232+
opacity: 1;
275233
}
276-
234+
/* KeyFrames */
277235
@-webkit-keyframes vSelectSpinner {
278236
0% {
279237
transform: rotate(0deg);
@@ -282,7 +240,6 @@
282240
transform: rotate(360deg);
283241
}
284242
}
285-
286243
@keyframes vSelectSpinner {
287244
0% {
288245
transform: rotate(0deg);
@@ -339,7 +296,7 @@
339296
<li v-if="!filteredOptions.length" class="divider"></li>
340297
</transition>
341298
<transition name="fade">
342-
<li v-if="!filteredOptions.length" class="text-center">
299+
<li v-if="!filteredOptions.length" class="no-options">
343300
<slot name="no-options">Sorry, no matching options.</slot>
344301
</li>
345302
</transition>

0 commit comments

Comments
 (0)