src/forms/select/style.scss
.v-select {
position: relative;
font-family: sans-serif;
}
.v-select .disabled {
cursor: not-allowed !important;
background-color: rgb(248, 248, 248) !important;
}
.v-select,
.v-select * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Rtl support */
.v-select.rtl .open-indicator {
left: 10px;
right: auto;
}
.v-select.rtl .selected-tag {
float: right;
margin-right: 3px;
margin-left: 1px;
}
.v-select.rtl .dropdown-menu {
text-align: right;
}
/* Open Indicator */
.v-select .open-indicator {
position: absolute;
bottom: 3px;
right: 10px;
display: inline-block;
cursor: pointer;
pointer-events: all;
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);
opacity: 1;
height: 20px; width: 10px;
}
.v-select .open-indicator:before {
border-color: rgba(60, 60, 60, .5);
border-style: solid;
border-width: 3px 3px 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);
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;
display: block;
padding: 0;
background: none;
border: 1px solid rgba(60, 60, 60, .26);
border-radius: 4px;
white-space: normal;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.v-select .dropdown-single {
height: 33px;
}
.v-select .dropdown-toggle:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/* Dropdown Toggle States */
.v-select.searchable .dropdown-toggle {
cursor: text;
}
.v-select.unsearchable .dropdown-toggle {
cursor: pointer;
}
.v-select.open .dropdown-toggle {
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Dropdown Menu */
.v-select .dropdown-menu {
display:block;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 160px;
padding: 5px 0;
margin: 0;
width: 100%;
overflow-y: scroll;
border: 1px solid rgba(0, 0, 0, .26);
box-shadow: 0px 3px 6px 0px rgba(0,0,0,.15);
border-top: none;
border-radius: 0 0 4px 4px;
text-align: left;
list-style: none;
background: #fff;
}
.v-select .no-options {
text-align: center;
}
/* Selected Tags */
.v-select .selected-tag {
color: #333;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
height: 24px;
margin: 4px 1px 0px 3px;
padding: 1px 0.25em;
float: left;
line-height: 22px;
font-size: 14px;
}
.v-select.single .selected-tag {
background-color: transparent;
border-color: transparent;
}
.v-select.single.open .selected-tag {
position: absolute;
opacity: .5;
}
.v-select.single.open.searching .selected-tag,
.v-select.single.loading .selected-tag {
display: none;
}
.v-select .selected-tag .vclose {
float: none;
margin-right: 0;
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;
}
.v-select.single.searching:not(.open):not(.loading) input[type="search"] {
opacity: .2;
}
/* Search Input */
.v-select input[type="search"]::-webkit-search-decoration,
.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-decoration {
display: none;
}
.v-select input[type="search"]::-ms-clear {
display: none;
}
.v-select input[type="search"],
.v-select input[type="search"]:focus {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
line-height: 1.42857143;
display: inline-block;
height: 32px;
border: none;
outline: none;
margin: 0;
padding: 0 .5em;
width: 10em;
max-width: 100%;
background: none;
position: relative;
box-shadow: none;
float: left;
clear: none;
}
.v-select .dropdown-single input[type="search"] {
position: absolute;
}
/* List Items */
.v-select li {
line-height: 1.42857143; /* Normalize line height */
}
.v-select li > a {
display: block;
padding: 3px 20px;
clear: both;
color: #333; /* Overrides most CSS frameworks */
white-space: nowrap;
}
.v-select li:hover {
cursor: pointer;
}
.v-select .dropdown-menu .active > a {
color: #333;
background: rgba(50, 50, 50, .1);
}
.v-select .dropdown-menu > .highlight > a {
/*
* required to override bootstrap 3's
* .dropdown-menu > li > a:hover {} styles
*/
background: #5897fb;
color: #fff;
}
.v-select .highlight:not(:last-child) {
margin-bottom: 0; /* Fixes Bulma Margin */
}
/* Loading Spinner */
.v-select .spinner {
opacity: 0;
position: absolute;
top: 5px;
right: 10px;
font-size: 5px;
text-indent: -9999em;
overflow: hidden;
border-top: .9em solid rgba(100, 100, 100, .1);
border-right: .9em solid rgba(100, 100, 100, .1);
border-bottom: .9em solid rgba(100, 100, 100, .1);
border-left: .9em solid rgba(60, 60, 60, .45);
transform: translateZ(0);
animation: vSelectSpinner 1.1s infinite linear;
transition: opacity .1s;
}
.v-select .spinner,
.v-select .spinner:after {
border-radius: 50%;
width: 5em;
height: 5em;
}
/* Loading Spinner States */
.v-select.loading .spinner {
opacity: 1;
}
/* KeyFrames */
@-webkit-keyframes vSelectSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes vSelectSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Dropdown Default Transition */
.fade-enter-active,
.fade-leave-active {
transition: opacity .15s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}