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

unscope styles, remove glyphicon dependency

Browse Source
This commit is contained in:
Jeff Sagal
2016-05-09 14:21:40 -07:00
parent 078d24bbe2
commit 4d5ee5434a
1 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select.vue
+39 -25
View File
@@ -1,14 +1,9 @@
<style scoped> <style>
.dropdown { .v-select.dropdown {
position: relative; position: relative;
} }
.open .dropdown-toggle, .v-select .open-indicator {
.open .dropdown-menu {
border-color: rgba(60,60,60,.26);
}
.open-indicator {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@@ -19,11 +14,29 @@
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);
} }
.open .open-indicator { .v-select .open-indicator:before {
transform: rotate(180deg); border-color: rgba(60,60,60,.5);
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 10px;
width: 10px;
vertical-align: top;
transform: rotate(133deg);
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);
} }
.dropdown-toggle { .v-select.open .open-indicator {
top: 15px;
}
.v-select.open .open-indicator:before {
transform: rotate(315deg);
}
.v-select .dropdown-toggle {
display: block; display: block;
padding: 0; padding: 0;
background: none; background: none;
@@ -31,17 +44,18 @@
border-radius: 4px; border-radius: 4px;
white-space: normal; white-space: normal;
} }
.searchable .dropdown-toggle {
.v-select.searchable .dropdown-toggle {
cursor: text; cursor: text;
} }
.open .dropdown-toggle { .v-select.open .dropdown-toggle {
border-bottom: none; border-bottom: none;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.dropdown-menu { .v-select > .dropdown-menu {
margin: 0; margin: 0;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
@@ -50,7 +64,7 @@
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.selected-tag { .v-select .selected-tag {
color: #333; color: #333;
background-color: #f0f0f0; background-color: #f0f0f0;
border: 1px solid #ccc; border: 1px solid #ccc;
@@ -62,14 +76,14 @@
line-height: 1.7em; line-height: 1.7em;
} }
.selected-tag .close { .v-select .selected-tag .close {
float: none; float: none;
margin-right: 0; margin-right: 0;
font-size: 20px; font-size: 20px;
} }
input[type=search], .v-select input[type=search],
input[type=search]:focus { .v-select input[type=search]:focus {
display: inline-block; display: inline-block;
border: none; border: none;
outline: none; outline: none;
@@ -84,28 +98,28 @@
clear: none; clear: none;
} }
input[type=search]:disabled { .v-select input[type=search]:disabled {
cursor: pointer; cursor: pointer;
} }
li a { .v-select li a {
cursor: pointer; cursor: pointer;
} }
.active a { .v-select .active a {
background: rgba(50,50,50,.1); background: rgba(50,50,50,.1);
color: #333; color: #333;
} }
.highlight a, .v-select .highlight a,
li:hover > a { .v-select li:hover > a {
background: #f0f0f0; background: #f0f0f0;
color: #333; color: #333;
} }
</style> </style>
<template> <template>
<div class="dropdown" :class="dropdownClasses"> <div class="dropdown v-select" :class="dropdownClasses">
<div v-el:toggle @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button"> <div v-el:toggle @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
<span class="form-control" v-if="!searchable && isValueEmpty"> <span class="form-control" v-if="!searchable && isValueEmpty">
{{ placeholder }} {{ placeholder }}
@@ -135,7 +149,7 @@
:style="{ width: isValueEmpty ? '100%' : 'auto' }" :style="{ width: isValueEmpty ? '100%' : 'auto' }"
> >
<i v-el:open-indicator role="presentation" class="open-indicator glyphicon-chevron-down glyphicon"></i> <i v-el:open-indicator role="presentation" class="open-indicator"></i>
</div> </div>
<ul v-show="open" v-el:dropdown-menu :transition="transition" :style="{ 'max-height': maxHeight }" class="dropdown-menu animated"> <ul v-show="open" v-el:dropdown-menu :transition="transition" :style="{ 'max-height': maxHeight }" class="dropdown-menu animated">