mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Code Activity

feat: deprecate sass, convert to css (#1531)

Browse Source
This commit is contained in:
Jeff Sagal
2022-02-17 12:21:27 -08:00
committed by GitHub
parent 361523056f
commit 1ecf71aa4b
26 changed files with 2142 additions and 2893 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/webpack.base.conf.js
+5 -3
View File
@@ -41,12 +41,14 @@ module.exports = {
exclude: /node_modules/,
},
{
test: /\.s?css$/,
test: /\.css$/i,
use: [
extractOrInjectStyles,
'css-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
'postcss-loader',
'sass-loader',
],
},
],
build/webpack.dev.conf.js
+13 -14
View File
@@ -1,4 +1,4 @@
const merge = require('webpack-merge')
const { merge } = require('webpack-merge')
const chokidar = require('chokidar')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.base.conf')
@@ -18,20 +18,19 @@ module.exports = merge(baseWebpackConfig, {
noEmitOnErrors: true,
},
devServer: {
hot: true,
hotOnly: true,
hot: 'only',
open: true,
inline: true,
stats: {
children: false,
modules: false,
chunks: false,
},
// inline: true,
// stats: {
// children: false,
// modules: false,
// chunks: false,
// },
port: 8080,
before(app, server) {
chokidar.watch(['./**/*.html']).on('all', function () {
server.sockWrite(server.sockets, 'content-changed')
})
},
// onBeforeSetupMiddleware(server) {
// chokidar.watch(['./**/*.html']).on('all', function () {
// server.sockWrite(server.sockets, 'content-changed')
// })
// },
},
})
build/webpack.prod.conf.js
+3 -6
View File
@@ -1,5 +1,5 @@
const TerserPlugin = require('terser-webpack-plugin')
const merge = require('webpack-merge')
const { merge } = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
module.exports = merge(baseWebpackConfig, {
@@ -11,10 +11,7 @@ module.exports = merge(baseWebpackConfig, {
globalObject: "typeof self !== 'undefined' ? self : this",
},
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true,
}),
],
minimize: true,
minimizer: [new TerserPlugin()],
},
})
docs/.vuepress/components/CssVariables.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<div style="background: #282c34; padding: 1rem; border-radius: 0.3rem">
<v-select :options="countries" />
</div>
</template>
<script>
import countries from '../data/countries.js'
export default {
data: () => ({ countries }),
}
</script>
<style scoped>
>>> {
--vs-controls-color: #664cc3;
--vs-border-color: #664cc3;
--vs-dropdown-bg: #282c34;
--vs-dropdown-color: #cc99cd;
--vs-dropdown-option-color: #cc99cd;
--vs-selected-bg: #664cc3;
--vs-selected-color: #eeeeee;
--vs-search-input-color: #eeeeee;
--vs-dropdown-option--active-bg: #664cc3;
--vs-dropdown-option--active-color: #eeeeee;
}
</style>
docs/guide/css.md
+48 -17
View File
@@ -1,17 +1,47 @@
Vue Select offers many APIs for customizing the look and feel from the component. You can use
[scoped slots](../api/slots.md), [custom child components](components.md), or modify the built in
SCSS variables.
Vue Select offers many APIs for customizing the look and feel from the component. You can use
[scoped slots](../api/slots.md), [custom child components](components.md), or modify the built in
CSS properties.
::: tip
Support for CSS variables (custom properties) is currently on the road map for those
that are not using sass in their projects.
:::
## CSS Variables
## SCSS Variables
Vue Select uses custom CSS properties throughout the component to handle visual opinions. This
allows for quite a bit of flexibility in styling, without having to hook into a build system for
generating your own styles with something like SASS. If there is a value that you think should use a
CSS property instead of a hardcoded CSS value, please submit a PR.
## Dark Mode Example
Without writing any CSS yourself, you can completely customize the look and feel of Vue Select
through the use of CSS variables. In this example, we adjust the colors of the component to match
for a dark mode application.
In this case, the variables are scoped to only this implementation of the component, but you could
place these variables anywhere in your applications CSS file to implement at a global level for your
app.
Check the MDN docs for more info
about [CSS Custom Properties.](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
<CssVariables style="margin-top: 1rem;" />
<<< @/.vuepress/components/CssVariables.vue
### Available CSS Variables <Badge type="primary">3.18+</Badge>
<<< @/../src/css/global/variables.css
## SCSS <Badge type="warning">Deprecated in v3.18</Badge>
::: warning Deprecation Notice
The SCSS build been deprecated for the `v3.x` release, and will be
removed in `v4.0.0`. The files will remain in the v3 codebase if you really need them, but the
recommended approach is to leverage the included CSS variables instead.
:::
Variables are leveraged in as much of the component styles as possible. If you really want to dig
into the SCSS, the files are located in `src/scss`. The variables listed below can be found at
[`src/scss/global/_variables`](https://github.com/sagalbot/vue-select/blob/master/src/scss/global/_variables.scss).
[`src/scss/global/_variables`](https://github.com/sagalbot/vue-select/blob/master/src/scss/global/_variables.scss)
.
All variables are implemented with `!default` in order to make them easier to override in your
application.
@@ -23,12 +53,12 @@ application.
Vue Select takes the approach of using selectors with a single level of specificity, while using
classes that are very specific to Vue Select to avoid collisions with your app.
All classes within Vue Select use the `vs__` prefix, and selectors are generally a single classname
Most classes within Vue Select use the `vs__` prefix, and selectors are generally a single classname
– unless there is a state being applied to the component.
In order to override a default property in your app, you should add one level of specificity.
The easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust
all instances of Vue Select, or add your own classname if you just want to affect one.
In order to override a default property in your app, you should add one level of specificity. The
easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust all
instances of Vue Select, or add your own classname if you just want to affect one.
<CssSpecificity />
@@ -38,17 +68,18 @@ all instances of Vue Select, or add your own classname if you just want to affec
By default, the dropdown transitions with a `.15s` cubic-bezier opacity fade in/out. The component
uses the [VueJS transition system](https://vuejs.org/v2/guide/transitions.html). By default, the
transition name is `vs__fade`. There's a couple ways to override or change this transition.
transition name is `vs__fade`. There's a couple ways to override or change this transition.
1. Use the `transition` prop. Applying this prop will change the name of the animation classes and
negate the default CSS. If you want to remove it entirely, you can set it to an empty string.
negate the default CSS. If you want to remove it entirely, you can set it to an empty string.
```html
<v-select transition="" />
```
2. You can also override the default CSS for the `vs__fade` transition. Again, if you
wanted to eliminate the transition entirely:
2. You can also override the default CSS for the `vs__fade` transition. Again, if you wanted to
eliminate the transition entirely:
```css
.vs__fade-enter-active,
docs/guide/install.md
+9 -9
View File
@@ -1,8 +1,14 @@
## Yarn / NPM
Install with yarn:
Install with yarn or npm:
```bash
# vue 2
yarn add vue-select
# vue 3
yarn add vue-select@beta
# or, using NPM
npm install vue-select
```
@@ -22,12 +28,6 @@ The component itself does not include any CSS. You'll need to include it separat
import 'vue-select/dist/vue-select.css';
```
Alternatively, you can import the scss for complete control of the component styles:
```scss
@import "vue-select/src/scss/vue-select.scss";
```
## In the Browser
vue-select ships as an UMD module that is accessible in the browser. When loaded
@@ -56,5 +56,5 @@ Vue.component('v-select', VueSelect.VueSelect);
## Vue Compatibility
- If you're on Vue `1.x`, use vue-select `1.x`.
- The `1.x` branch has not received updates since the 2.0 release.
- Vue `2.x`, use vue-select `3.x`.
- Vue `3.x`, use vue-select `3.x@beta`.
docs/package.json
-2
View File
@@ -22,9 +22,7 @@
"dotenv": "^8.2.0",
"fuse.js": "^6.4.0",
"gh-pages": "^2.2.0",
"node-sass": "^4.12.0",
"octonode": "^0.9.5",
"sass-loader": "^8.0.2",
"vue": "^2.6.10",
"vuepress": "^1.4.0",
"vuex": "^3.1.0"
docs/yarn.lock
+26 -574
View File
File diff suppressed because it is too large Load Diff
package.json
+22 -20
View File
@@ -13,7 +13,7 @@
"license": "MIT",
"prepare": "npm run build",
"scripts": {
"serve": "webpack-dev-server --config build/webpack.dev.conf.js --hot --progress -d",
"serve": "webpack-dev-server --config build/webpack.dev.conf.js --hot --progress",
"serve:docs": "cd docs && yarn serve",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js --progress",
"build:docs": "cd docs && yarn build",
@@ -43,17 +43,17 @@
"@semantic-release/git": "^9.0.0",
"@semantic-release/github": "^7.0.4",
"@vue/test-utils": "^1.2.2",
"autoprefixer": "^9.4.7",
"autoprefixer": "^10.3.7",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.5",
"bundlewatch": "^0.2.5",
"chokidar": "^2.1.5",
"chokidar": "^3.5.2",
"commitizen": "^4.0.3",
"coveralls": "^3.0.2",
"cross-env": "^5.2.0",
"css-loader": "^2.1.0",
"cssnano": "^4.1.10",
"css-loader": "^6.4.0",
"cssnano": "^5.0.8",
"cz-conventional-changelog": "3.1.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
@@ -61,30 +61,29 @@
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.2.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"html-webpack-plugin": "^5.4.0",
"jest": "^24.1.0",
"jest-serializer-vue": "^2.0.2",
"jest-transform-stub": "^2.0.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"postcss-scss": "^2.0.0",
"mini-css-extract-plugin": "^2.4.3",
"postcss": "^8.3.11",
"postcss-import": "^14.0.2",
"postcss-loader": "^6.2.0",
"prettier": "2.2.1",
"sass-loader": "^7.1.0",
"semantic-release": "^17.0.4",
"terser-webpack-plugin": "^1.2.3",
"url-loader": "^1.1.2",
"terser-webpack-plugin": "^5.2.4",
"url-loader": "^4.1.1",
"vue": "^2.6.10",
"vue-html-loader": "^1.2.4",
"vue-jest": "^3.0.4",
"vue-loader": "^15.7.0",
"vue-loader": "^15.9.8",
"vue-server-renderer": "^2.6.10",
"vue-style-loader": "^4.1.2",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1"
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.3.1",
"webpack-merge": "^5.8.0"
},
"jest": {
"moduleFileExtensions": [
@@ -134,8 +133,11 @@
{
"path": "./dist/vue-select.css",
"compression": "none",
"maxSize": "6 KB"
"maxSize": "8 KB"
}
]
},
"dependencies": {
"postcss-nested": "^5.0.6"
}
}
postcss.config.js
+2
View File
@@ -1,6 +1,8 @@
module.exports = {
plugins: [
require('postcss-import'),
require('autoprefixer'),
require('postcss-nested'),
require('cssnano')({
preset: 'default',
}),
src/components/Select.vue
+5 -5
View File
@@ -1,5 +1,5 @@
<style lang="scss">
@import '../scss/vue-select.scss';
<style>
@import '../css/vue-select.css';
</style>
<template>
@@ -118,9 +118,9 @@
</slot>
</li>
<li v-if="filteredOptions.length === 0" class="vs__no-options">
<slot name="no-options" v-bind="scope.noOptions"
>Sorry, no matching options.</slot
>
<slot name="no-options" v-bind="scope.noOptions">
Sorry, no matching options.
</slot>
</li>
<slot name="list-footer" v-bind="scope.listFooter" />
</ul>
src/css/global/animations.css
+35
View File
@@ -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;
}
src/css/global/component.css
+9
View File
@@ -0,0 +1,9 @@
.v-select {
position: relative;
font-family: inherit;
}
.v-select,
.v-select * {
box-sizing: border-box;
}
src/css/global/states.css
+55
View File
@@ -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;
}
}
src/css/global/variables.css
+66
View File
@@ -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;
}
src/css/modules/clear.css
+10
View File
@@ -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;
}
src/css/modules/dropdown-menu.css
+29
View File
@@ -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;
}
src/css/modules/dropdown-option.css
+26
View File
@@ -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);
}
src/css/modules/dropdown-toggle.css
+49
View File
@@ -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;
}
src/css/modules/open-indicator.css
+26
View File
@@ -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;
}
src/css/modules/search-input.css
+61
View File
@@ -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;
}
}
src/css/modules/selected.css
+43
View File
@@ -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;
}
}
src/css/modules/spinner.css
+28
View File
@@ -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;
}
src/css/vue-select.css
+13
View File
@@ -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';
src/scss/vue-select.scss
+22 -12
View File
@@ -1,13 +1,23 @@
@import "global/variables";
@import "global/component";
@import "global/animations";
@import "global/states";
/**
Support for SASS is deprecated as of v3.18.
@import "modules/dropdown-toggle";
@import "modules/open-indicator";
@import "modules/clear";
@import "modules/dropdown-menu";
@import "modules/dropdown-option";
@import "modules/selected";
@import "modules/search-input";
@import "modules/spinner";
The files remain here if your build is dependent on them
but they will not receive updates in future releases. All
SASS variables have been translated into CSS variables, so
migration should be quite simple if you'd like to move over.
In v4, these files will be removed.
*/
@import 'global/variables';
@import 'global/component';
@import 'global/animations';
@import 'global/states';
@import 'modules/dropdown-toggle';
@import 'modules/open-indicator';
@import 'modules/clear';
@import 'modules/dropdown-menu';
@import 'modules/dropdown-option';
@import 'modules/selected';
@import 'modules/search-input';
@import 'modules/spinner';
yarn.lock
+1506 -2231
View File
File diff suppressed because it is too large Load Diff