mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

#124

Browse Source 
- organize css
- switched 'selected' class back to 'active'
- remove specificity where possible
- add unsearchable and loading example to dev template
This commit is contained in:
Jeff Sagal
2017-03-11 16:27:36 -08:00
parent e202474905
commit ffbd2238b8
2 changed files with 71 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev.html
+4 -2
View File
@@ -4,10 +4,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue Select Dev</title> <title>Vue Select Dev</title>
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">--> <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">--> <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">--> <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
<style> <style>
html, html,
body, body,
@@ -34,6 +34,8 @@
<v-select placeholder="multiple" multiple :options="options"></v-select> <v-select placeholder="multiple" multiple :options="options"></v-select>
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select> <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select> <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
<v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>
<v-select placeholder="loading" loading></v-select>
</div> </div>
</body> </body>
src/components/Select.vue
+67 -110
View File
@@ -1,4 +1,7 @@
<style> <style>
.v-select {
position: relative;
}
.v-select, .v-select,
.v-select * { .v-select * {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@@ -6,52 +9,7 @@
box-sizing: border-box; box-sizing: border-box;
font-family: sans-serif; font-family: sans-serif;
} }
/* Open Indicator */
.v-select ::after,
.v-select ::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.v-select a:not([href]):not([tabindex]):focus,
.v-select a:not([href]):not([tabindex]):hover {
color: #fff;
}
.v-select input[type="search"] {
}
.dropdown-menu > li > a {
}
button.close {
appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.v-select .dropdown-toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* - - - - - - - - - - - - - - - - */
.v-select {
position: relative;
}
.v-select .open-indicator { .v-select .open-indicator {
position: absolute; position: absolute;
bottom: 6px; bottom: 6px;
@@ -63,12 +21,8 @@
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855); transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
opacity: 1; opacity: 1;
transition: opacity .1s; transition: opacity .1s;
height: 20px; width: 10px;
} }
.v-select.loading .open-indicator {
opacity: 0;
}
.v-select .open-indicator:before { .v-select .open-indicator:before {
border-color: rgba(60, 60, 60, .5); border-color: rgba(60, 60, 60, .5);
border-style: solid; border-style: solid;
@@ -81,8 +35,24 @@
transform: rotate(133deg); transform: rotate(133deg);
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855); transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855); transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
box-sizing: inherit;
}
/* Open Indicator States */
.v-select.open .open-indicator:before {
transform: rotate(315deg);
}
.v-select.loading .open-indicator {
opacity: 0;
}
.v-select.open .open-indicator {
bottom: 1px;
}
/* Dropdown Toggle */
.v-select .dropdown-toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
} }
.v-select .dropdown-toggle { .v-select .dropdown-toggle {
display: block; display: block;
padding: 0; padding: 0;
@@ -91,7 +61,6 @@
border-radius: 4px; border-radius: 4px;
white-space: normal; white-space: normal;
} }
.v-select .dropdown-toggle:after { .v-select .dropdown-toggle:after {
visibility: hidden; visibility: hidden;
display: block; display: block;
@@ -100,16 +69,20 @@
clear: both; clear: both;
height: 0; height: 0;
} }
/* Dropdown Toggle States */
.v-select.searchable .dropdown-toggle { .v-select.searchable .dropdown-toggle {
cursor: text; cursor: text;
} }
.v-select.unsearchable .dropdown-toggle { .v-select.unsearchable .dropdown-toggle {
cursor: pointer; cursor: pointer;
} }
.v-select.open .dropdown-toggle {
.v-select > .dropdown-menu { border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Dropdown Menu */
.v-select .dropdown-menu {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
@@ -134,22 +107,17 @@
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
} }
.v-select .dropdown-menu .divider {
/*divider*/
/*.v-select > .dropdown-menu*/
.dropdown-menu .divider {
height: 1px; height: 1px;
margin: 9px 0; margin: 7px 0;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: #e5e5e5;
} }
.v-select .no-options {
.v-select .text-center {
text-align: center; text-align: center;
padding-bottom: 2px;
} }
/* Selected Tags */
/*text-center*/
.v-select .selected-tag { .v-select .selected-tag {
color: #333; color: #333;
background-color: #f0f0f0; background-color: #f0f0f0;
@@ -159,23 +127,31 @@
margin: 4px 1px 0px 3px; margin: 4px 1px 0px 3px;
padding: 0 0.25em; padding: 0 0.25em;
float: left; float: left;
line-height: 1.7em; line-height: 24px;
} }
.v-select .selected-tag .close { .v-select .selected-tag .close {
float: none; float: none;
margin-right: 0; margin-right: 0;
font-size: 20px; font-size: 20px;
appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
} }
/* Search Input */
/* -- Search Input -- */
.v-select input[type="search"]::-webkit-search-decoration, .v-select input[type="search"]::-webkit-search-decoration,
.v-select input[type="search"]::-webkit-search-cancel-button, .v-select input[type="search"]::-webkit-search-cancel-button,
.v-select input[type="search"]::-webkit-search-results-button, .v-select input[type="search"]::-webkit-search-results-button,
.v-select input[type="search"]::-webkit-search-results-decoration { .v-select input[type="search"]::-webkit-search-results-decoration {
display: none; display: none;
} }
.v-select input[type=search], .v-select input[type=search],
.v-select input[type=search]:focus { .v-select input[type=search]:focus {
appearance: none; appearance: none;
@@ -197,40 +173,38 @@
float: left; float: left;
clear: none; clear: none;
} }
/* Search Input States */
.v-select.unsearchable input[type=search] { .v-select.unsearchable input[type=search] {
max-width: 1px; max-width: 1px;
} }
/* List Items */
.v-select li > a { .v-select li > a {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
font-weight: 400; line-height: 1.42857143; /* Normalize line height */
line-height: 1.42857143; color: #333; /* Overrides most CSS frameworks */
color: #333;
white-space: nowrap; white-space: nowrap;
} }
.v-select li:hover { .v-select li:hover {
cursor: pointer; cursor: pointer;
} }
.v-select .dropdown-menu .active > a {
.v-select .active > a { color: #333;
background: rgba(50, 50, 50, .1); background: rgba(50, 50, 50, .1);
/*color: #333;*/
} }
.v-select .dropdown-menu > .highlight > a {
.v-select .highlight > a { /*
* required to override bootstrap 3's
* .dropdown-menu > li > a:hover {} styles
*/
background: #5897fb; background: #5897fb;
color: #fff; color: #fff;
} }
.v-select .highlight:not(:last-child) {
.v-select .highlight > a { margin-bottom: 0; /* Fixes Bulma Margin */
background: #5897fb;
color: #fff;
} }
/* Loading Spinner */
.v-select .spinner { .v-select .spinner {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
@@ -247,33 +221,17 @@
animation: vSelectSpinner 1.1s infinite linear; animation: vSelectSpinner 1.1s infinite linear;
transition: opacity .1s; transition: opacity .1s;
} }
.v-select.loading .spinner {
opacity: 1;
}
.v-select .spinner, .v-select .spinner,
.v-select .spinner:after { .v-select .spinner:after {
border-radius: 50%; border-radius: 50%;
width: 5em; width: 5em;
height: 5em; height: 5em;
} }
/* Loading Spinner States */
/* -- Open State -- */ .v-select.loading .spinner {
.v-select.open .open-indicator { opacity: 1;
bottom: 1px;
} }
/* KeyFrames */
.v-select.open .open-indicator:before {
transform: rotate(315deg);
}
.v-select.open .dropdown-toggle {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@-webkit-keyframes vSelectSpinner { @-webkit-keyframes vSelectSpinner {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
@@ -282,7 +240,6 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes vSelectSpinner { @keyframes vSelectSpinner {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
@@ -339,7 +296,7 @@
<li v-if="!filteredOptions.length" class="divider"></li> <li v-if="!filteredOptions.length" class="divider"></li>
</transition> </transition>
<transition name="fade"> <transition name="fade">
<li v-if="!filteredOptions.length" class="text-center"> <li v-if="!filteredOptions.length" class="no-options">
<slot name="no-options">Sorry, no matching options.</slot> <slot name="no-options">Sorry, no matching options.</slot>
</li> </li>
</transition> </transition>