mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-26 04:34:04 +03:00
feat: deprecate sass, convert to css (#1531)
This commit is contained in:
Jeff Sagal
@@ -0,0 +1,35 @@
|
||||
:root {
|
||||
--vs-transition-timing-function: cubic-bezier(1, 0.5, 0.8, 1);
|
||||
--vs-transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.vs__fade-enter-active,
|
||||
.vs__fade-leave-active {
|
||||
pointer-events: none;
|
||||
transition: opacity var(--vs-transition-duration)
|
||||
var(--vs-transition-timing-function);
|
||||
}
|
||||
.vs__fade-enter,
|
||||
.vs__fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.v-select {
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.v-select,
|
||||
.v-select * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/** Component States */
|
||||
|
||||
/*
|
||||
* Disabled
|
||||
*
|
||||
* When the component is disabled, all interaction
|
||||
* should be prevented. Here we modify the bg color,
|
||||
* and change the cursor displayed on the interactive
|
||||
* components.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--vs-disabled-bg: var(--vs-state-disabled-bg);
|
||||
--vs-disabled-color: var(--vs-state-disabled-color);
|
||||
--vs-disabled-cursor: var(--vs-state-disabled-cursor);
|
||||
}
|
||||
|
||||
.vs--disabled {
|
||||
.vs__dropdown-toggle,
|
||||
.vs__clear,
|
||||
.vs__search,
|
||||
.vs__selected,
|
||||
.vs__open-indicator {
|
||||
cursor: var(--vs-disabled-cursor);
|
||||
background-color: var(--vs-disabled-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* RTL - Right to Left Support
|
||||
*
|
||||
* Because we're using a flexbox layout, the `dir="rtl"`
|
||||
* HTML attribute does most of the work for us by
|
||||
* rearranging the child elements visually.
|
||||
*/
|
||||
|
||||
.v-select[dir='rtl'] {
|
||||
.vs__actions {
|
||||
padding: 0 3px 0 6px;
|
||||
}
|
||||
|
||||
.vs__clear {
|
||||
margin-left: 6px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.vs__deselect {
|
||||
margin-left: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.vs__dropdown-menu {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
:root {
|
||||
--vs-colors--lightest: rgba(60, 60, 60, 0.26);
|
||||
--vs-colors--light: rgba(60, 60, 60, 0.5);
|
||||
--vs-colors--dark: #333;
|
||||
--vs-colors--darkest: rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Search Input */
|
||||
--vs-search-input-color: inherit;
|
||||
--vs-search-input-placeholder-color: inherit;
|
||||
|
||||
/* Font */
|
||||
--vs-font-size: 1rem;
|
||||
--vs-line-height: 1.4;
|
||||
|
||||
/* Disabled State */
|
||||
--vs-state-disabled-bg: rgb(248, 248, 248);
|
||||
--vs-state-disabled-color: var(--vs-colors--light);
|
||||
--vs-state-disabled-controls-color: var(--vs-colors--light);
|
||||
--vs-state-disabled-cursor: not-allowed;
|
||||
|
||||
/* Borders */
|
||||
--vs-border-color: var(--vs-colors--lightest);
|
||||
--vs-border-width: 1px;
|
||||
--vs-border-style: solid;
|
||||
--vs-border-radius: 4px;
|
||||
|
||||
/* Actions: house the component controls */
|
||||
--vs-actions-padding: 4px 6px 0 3px;
|
||||
|
||||
/* Component Controls: Clear, Open Indicator */
|
||||
--vs-controls-color: var(--vs-colors--light);
|
||||
--vs-controls-size: 1;
|
||||
--vs-controls--deselect-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
/* Selected */
|
||||
--vs-selected-bg: #f0f0f0;
|
||||
--vs-selected-color: var(--vs-colors--dark);
|
||||
--vs-selected-border-color: var(--vs-border-color);
|
||||
--vs-selected-border-style: var(--vs-border-style);
|
||||
--vs-selected-border-width: var(--vs-border-width);
|
||||
|
||||
/* Dropdown */
|
||||
--vs-dropdown-bg: #fff;
|
||||
--vs-dropdown-color: inherit;
|
||||
--vs-dropdown-z-index: 1000;
|
||||
--vs-dropdown-min-width: 160px;
|
||||
--vs-dropdown-max-height: 350px;
|
||||
--vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);
|
||||
|
||||
/* Options */
|
||||
--vs-dropdown-option-bg: #000;
|
||||
--vs-dropdown-option-color: var(--vs-dropdown-color);
|
||||
--vs-dropdown-option-padding: 3px 20px;
|
||||
|
||||
/* Active State */
|
||||
--vs-dropdown-option--active-bg: #5897fb;
|
||||
--vs-dropdown-option--active-color: #fff;
|
||||
|
||||
/* Deselect State */
|
||||
--vs-dropdown-option--deselect-bg: #fb5858;
|
||||
--vs-dropdown-option--deselect-color: #fff;
|
||||
|
||||
/* Transitions */
|
||||
--vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
|
||||
--vs-transition-duration: 150ms;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@import 'global/variables.css';
|
||||
@import 'global/component.css';
|
||||
@import 'global/animations.css';
|
||||
@import 'global/states.css';
|
||||
|
||||
@import 'modules/dropdown-toggle.css';
|
||||
@import 'modules/open-indicator.css';
|
||||
@import 'modules/clear.css';
|
||||
@import 'modules/dropdown-menu.css';
|
||||
@import 'modules/dropdown-option.css';
|
||||
@import 'modules/selected.css';
|
||||
@import 'modules/search-input.css';
|
||||
@import 'modules/spinner.css';
|
||||
Reference in New Issue
Block a user