Skip to content

Commit c151fad

Browse files
sagalbotsagalbot
authored
Merge pull request sagalbot#156 from sagalbot/simple-css
Simple css
2 parents f67a352 + ffbd223 commit c151fad

File tree

2 files changed

+129
-46
lines changed

2 files changed

+129
-46
lines changed

‎dev.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +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">
8-
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"> -->
7+
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
8+
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
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">-->
911
<style>
1012
html,
1113
body,
@@ -32,6 +34,8 @@
3234
<v-select placeholder="multiple" multiple :options="options"></v-select>
3335
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
3436
<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>
3539
</div>
3640
</body>
3741

‎src/components/Select.vue

Lines changed: 123 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
.v-select {
33
position: relative;
44
}
5-
5+
.v-select,
6+
.v-select * {
7+
-webkit-box-sizing: border-box;
8+
-moz-box-sizing: border-box;
9+
box-sizing: border-box;
10+
font-family: sans-serif;
11+
}
12+
/* Open Indicator */
613
.v-select .open-indicator {
714
position: absolute;
815
bottom: 6px;
@@ -14,16 +21,12 @@
1421
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
1522
opacity: 1;
1623
transition: opacity .1s;
24+
height: 20px; width: 10px;
1725
}
18-
19-
.v-select.loading .open-indicator {
20-
opacity: 0;
21-
}
22-
2326
.v-select .open-indicator:before {
2427
border-color: rgba(60, 60, 60, .5);
2528
border-style: solid;
26-
border-width: 0.25em 0.25em 0 0;
29+
border-width: 3px 3px 0 0;
2730
content: '';
2831
display: inline-block;
2932
height: 10px;
@@ -32,16 +35,24 @@
3235
transform: rotate(133deg);
3336
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
3437
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;
3546
}
36-
3747
.v-select.open .open-indicator {
3848
bottom: 1px;
3949
}
40-
41-
.v-select.open .open-indicator:before {
42-
transform: rotate(315deg);
50+
/* Dropdown Toggle */
51+
.v-select .dropdown-toggle {
52+
-webkit-appearance: none;
53+
-moz-appearance: none;
54+
appearance: none;
4355
}
44-
4556
.v-select .dropdown-toggle {
4657
display: block;
4758
padding: 0;
@@ -50,26 +61,63 @@
5061
border-radius: 4px;
5162
white-space: normal;
5263
}
53-
64+
.v-select .dropdown-toggle:after {
65+
visibility: hidden;
66+
display: block;
67+
font-size: 0;
68+
content: " ";
69+
clear: both;
70+
height: 0;
71+
}
72+
/* Dropdown Toggle States */
5473
.v-select.searchable .dropdown-toggle {
5574
cursor: text;
5675
}
57-
76+
.v-select.unsearchable .dropdown-toggle {
77+
cursor: pointer;
78+
}
5879
.v-select.open .dropdown-toggle {
59-
border-bottom: none;
80+
border-bottom-color: transparent;
6081
border-bottom-left-radius: 0;
6182
border-bottom-right-radius: 0;
6283
}
63-
64-
.v-select > .dropdown-menu {
84+
/* Dropdown Menu */
85+
.v-select .dropdown-menu {
86+
position: absolute;
87+
top: 100%;
88+
left: 0;
89+
z-index: 1000;
90+
/*float: left;*/
91+
min-width: 160px;
92+
padding: 5px 0;
6593
margin: 0;
6694
width: 100%;
6795
overflow-y: scroll;
96+
border: 1px solid #ccc;
97+
border: 1px solid rgba(0, 0, 0, .15);
6898
border-top: none;
99+
border-radius: 4px;
69100
border-top-left-radius: 0;
70101
border-top-right-radius: 0;
102+
/*font-size: 14px;*/
103+
text-align: left;
104+
list-style: none;
105+
background-color: #fff;
106+
background-clip: padding-box;
107+
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
108+
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
71109
}
72-
110+
.v-select .dropdown-menu .divider {
111+
height: 1px;
112+
margin: 7px 0;
113+
overflow: hidden;
114+
background-color: #e5e5e5;
115+
}
116+
.v-select .no-options {
117+
text-align: center;
118+
padding-bottom: 2px;
119+
}
120+
/* Selected Tags */
73121
.v-select .selected-tag {
74122
color: #333;
75123
background-color: #f0f0f0;
@@ -79,17 +127,39 @@
79127
margin: 4px 1px 0px 3px;
80128
padding: 0 0.25em;
81129
float: left;
82-
line-height: 1.7em;
130+
line-height: 24px;
83131
}
84-
85132
.v-select .selected-tag .close {
86133
float: none;
87134
margin-right: 0;
88135
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;
147+
}
148+
/* Search Input */
149+
.v-select input[type="search"]::-webkit-search-decoration,
150+
.v-select input[type="search"]::-webkit-search-cancel-button,
151+
.v-select input[type="search"]::-webkit-search-results-button,
152+
.v-select input[type="search"]::-webkit-search-results-decoration {
153+
display: none;
89154
}
90-
91155
.v-select input[type=search],
92156
.v-select input[type=search]:focus {
157+
appearance: none;
158+
line-height: 1.42857143;
159+
/*color: #555;*/
160+
border-radius: 4px;
161+
height: 34px;
162+
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
93163
display: inline-block;
94164
border: none;
95165
outline: none;
@@ -103,27 +173,38 @@
103173
float: left;
104174
clear: none;
105175
}
106-
107-
.v-select input[type=search]:disabled {
108-
cursor: pointer;
176+
/* Search Input States */
177+
.v-select.unsearchable input[type=search] {
178+
max-width: 1px;
109179
}
110-
111-
.v-select li a {
180+
/* List Items */
181+
.v-select li > a {
182+
display: block;
183+
padding: 3px 20px;
184+
clear: both;
185+
line-height: 1.42857143; /* Normalize line height */
186+
color: #333; /* Overrides most CSS frameworks */
187+
white-space: nowrap;
188+
}
189+
.v-select li:hover {
112190
cursor: pointer;
113191
}
114-
115-
.v-select .active a {
116-
background: rgba(50, 50, 50, .1);
192+
.v-select .dropdown-menu .active > a {
117193
color: #333;
194+
background: rgba(50, 50, 50, .1);
118195
}
119-
120-
.v-select .highlight a,
121-
.v-select li:hover > a,
122-
.v-select .active > a:hover {
196+
.v-select .dropdown-menu > .highlight > a {
197+
/*
198+
* required to override bootstrap 3's
199+
* .dropdown-menu > li > a:hover {} styles
200+
*/
123201
background: #5897fb;
124202
color: #fff;
125203
}
126-
204+
.v-select .highlight:not(:last-child) {
205+
margin-bottom: 0; /* Fixes Bulma Margin */
206+
}
207+
/* Loading Spinner */
127208
.v-select .spinner {
128209
opacity: 0;
129210
position: absolute;
@@ -140,18 +221,17 @@
140221
animation: vSelectSpinner 1.1s infinite linear;
141222
transition: opacity .1s;
142223
}
143-
144-
.v-select.loading .spinner {
145-
opacity: 1;
146-
}
147-
148224
.v-select .spinner,
149225
.v-select .spinner:after {
150226
border-radius: 50%;
151227
width: 5em;
152228
height: 5em;
153229
}
154-
230+
/* Loading Spinner States */
231+
.v-select.loading .spinner {
232+
opacity: 1;
233+
}
234+
/* KeyFrames */
155235
@-webkit-keyframes vSelectSpinner {
156236
0% {
157237
transform: rotate(0deg);
@@ -160,7 +240,6 @@
160240
transform: rotate(360deg);
161241
}
162242
}
163-
164243
@keyframes vSelectSpinner {
165244
0% {
166245
transform: rotate(0deg);
@@ -173,7 +252,7 @@
173252

174253
<template>
175254
<div class="dropdown v-select" :class="dropdownClasses">
176-
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
255+
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle" type="button">
177256

178257
<span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
179258
{{ getOptionLabel(option) }}
@@ -217,15 +296,14 @@
217296
<li v-if="!filteredOptions.length" class="divider"></li>
218297
</transition>
219298
<transition name="fade">
220-
<li v-if="!filteredOptions.length" class="text-center">
299+
<li v-if="!filteredOptions.length" class="no-options">
221300
<slot name="no-options">Sorry, no matching options.</slot>
222301
</li>
223302
</transition>
224303
</ul>
225304
</div>
226305
</template>
227306

228-
229307
<script type="text/babel">
230308
import pointerScroll from '../mixins/pointerScroll'
231309
import typeAheadPointer from '../mixins/typeAheadPointer'
@@ -681,6 +759,7 @@
681759
return {
682760
open: this.dropdownOpen,
683761
searchable: this.searchable,
762+
unsearchable: !this.searchable,
684763
loading: this.mutableLoading
685764
}
686765
},

0 commit comments

Comments
 (0)