mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-23 03:54:04 +03:00
feat: deprecate sass, convert to css (#1531)
This commit is contained in:
Jeff Sagal
@@ -0,0 +1,10 @@
|
||||
/* Clear Button */
|
||||
|
||||
.vs__clear {
|
||||
fill: var(--vs-controls-color);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/* Dropdown Menu */
|
||||
|
||||
.vs__dropdown-menu {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
/* calc to ensure the left and right borders of the dropdown appear flush with the toggle. */
|
||||
top: calc(100% - var(--vs-border-width));
|
||||
left: 0;
|
||||
z-index: var(--vs-dropdown-z-index);
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-height: var(--vs-dropdown-max-height);
|
||||
min-width: var(--vs-dropdown-min-width);
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--vs-dropdown-box-shadow);
|
||||
border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);
|
||||
border-top-style: none;
|
||||
border-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background: var(--vs-dropdown-bg);
|
||||
color: var(--vs-dropdown-color);
|
||||
}
|
||||
|
||||
.vs__no-options {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/* List Items */
|
||||
.vs__dropdown-option {
|
||||
line-height: 1.42857143; /* Normalize line height */
|
||||
display: block;
|
||||
padding: var(--vs-dropdown-option-padding);
|
||||
clear: both;
|
||||
color: var(--vs-dropdown-option-color); /* Overrides most CSS frameworks */
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vs__dropdown-option--highlight {
|
||||
background: var(--vs-dropdown-option--active-bg);
|
||||
color: var(--vs-dropdown-option--active-color);
|
||||
}
|
||||
|
||||
.vs__dropdown-option--deselect {
|
||||
background: var(--vs-dropdown-option--deselect-bg);
|
||||
color: var(--vs-dropdown-option--deselect-color);
|
||||
}
|
||||
|
||||
.vs__dropdown-option--disabled {
|
||||
background: var(--vs-state-disabled-bg);
|
||||
color: var(--vs-state-disabled-color);
|
||||
cursor: var(--vs-state-disabled-cursor);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
Dropdown Toggle
|
||||
|
||||
The dropdown toggle is the primary wrapper of the component. It
|
||||
has two direct descendants: .vs__selected-options, and .vs__actions.
|
||||
|
||||
.vs__selected-options holds the .vs__selected's as well as the
|
||||
main search input.
|
||||
|
||||
.vs__actions holds the clear button and dropdown toggle.
|
||||
*/
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
padding: 0 0 4px 0;
|
||||
background: none;
|
||||
border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);
|
||||
border-radius: var(--vs-border-radius);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.vs__selected-options {
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--vs-actions-padding);
|
||||
}
|
||||
|
||||
/* Dropdown Toggle States */
|
||||
.vs--searchable .vs__dropdown-toggle {
|
||||
cursor: text;
|
||||
}
|
||||
.vs--unsearchable .vs__dropdown-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
.vs--open .vs__dropdown-toggle {
|
||||
border-bottom-color: transparent;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/* Open Indicator */
|
||||
|
||||
/*
|
||||
The open indicator appears as a down facing
|
||||
caret on the right side of the select.
|
||||
*/
|
||||
|
||||
.vs__open-indicator {
|
||||
fill: var(--vs-controls-color);
|
||||
transform: scale(var(--vs-controls-size));
|
||||
transition: transform var(--vs-transition-duration)
|
||||
var(--vs-transition-timing-function);
|
||||
transition-timing-function: var(--vs-transition-timing-function);
|
||||
}
|
||||
|
||||
/* Open State */
|
||||
|
||||
.vs--open .vs__open-indicator {
|
||||
transform: rotate(180deg) scale(var(--vs-controls-size));
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
|
||||
.vs--loading .vs__open-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/* Search Input */
|
||||
|
||||
/**
|
||||
* Super weird bug... If this declaration is grouped
|
||||
* below, the cancel button will still appear in chrome.
|
||||
* If it's up here on it's own, it'll hide it.
|
||||
*/
|
||||
.vs__search::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vs__search::-webkit-search-decoration,
|
||||
.vs__search::-webkit-search-results-button,
|
||||
.vs__search::-webkit-search-results-decoration,
|
||||
.vs__search::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vs__search,
|
||||
.vs__search:focus {
|
||||
color: var(--vs-search-input-color);
|
||||
appearance: none;
|
||||
line-height: var(--vs-line-height);
|
||||
font-size: var(--vs-font-size);
|
||||
border: 1px solid transparent;
|
||||
border-left: none;
|
||||
outline: none;
|
||||
margin: 4px 0 0 0;
|
||||
padding: 0 7px;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
width: 0;
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.vs__search::placeholder {
|
||||
color: var(--vs-search-input-placeholder-color);
|
||||
}
|
||||
|
||||
/**
|
||||
States
|
||||
*/
|
||||
|
||||
/* Unsearchable */
|
||||
.vs--unsearchable {
|
||||
.vs__search {
|
||||
opacity: 1;
|
||||
}
|
||||
&:not(.vs--disabled) .vs__search {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* Single, when searching but not loading or open */
|
||||
.vs--single.vs--searching:not(.vs--open):not(.vs--loading) {
|
||||
.vs__search {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/* Selected Tags */
|
||||
.vs__selected {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--vs-selected-bg);
|
||||
border: var(--vs-selected-border-width) var(--vs-selected-border-style)
|
||||
var(--vs-selected-border-color);
|
||||
border-radius: var(--vs-border-radius);
|
||||
color: var(--vs-selected-color);
|
||||
line-height: var(--vs-line-height);
|
||||
margin: 4px 2px 0px 2px;
|
||||
padding: 0 0.25em;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.vs__deselect {
|
||||
display: inline-flex;
|
||||
appearance: none;
|
||||
margin-left: 4px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
fill: var(--vs-controls-color);
|
||||
text-shadow: var(--vs-controls--deselect-text-shadow);
|
||||
}
|
||||
|
||||
/* States */
|
||||
|
||||
.vs--single {
|
||||
.vs__selected {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
&.vs--open .vs__selected,
|
||||
&.vs--loading .vs__selected {
|
||||
position: absolute;
|
||||
opacity: 0.4;
|
||||
}
|
||||
&.vs--searching .vs__selected {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/* Loading Spinner */
|
||||
.vs__spinner {
|
||||
align-self: center;
|
||||
opacity: 0;
|
||||
font-size: 5px;
|
||||
text-indent: -9999em;
|
||||
overflow: hidden;
|
||||
border-top: 0.9em solid rgba(100, 100, 100, 0.1);
|
||||
border-right: 0.9em solid rgba(100, 100, 100, 0.1);
|
||||
border-bottom: 0.9em solid rgba(100, 100, 100, 0.1);
|
||||
border-left: 0.9em solid rgba(60, 60, 60, 0.45);
|
||||
transform: translateZ(0)
|
||||
scale(var(--vs-controls--spinner-size, var(--vs-controls-size)));
|
||||
animation: vSelectSpinner 1.1s infinite linear;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
.vs__spinner,
|
||||
.vs__spinner:after {
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
transform: scale(var(--vs-controls--spinner-size, var(--vs-controls-size)));
|
||||
}
|
||||
|
||||
/* Loading Spinner States */
|
||||
.vs--loading .vs__spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user