mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
feat: deprecate sass, convert to css (#1531)
This commit is contained in:
Jeff Sagal
@@ -41,12 +41,14 @@ module.exports = {
|
|||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.s?css$/,
|
test: /\.css$/i,
|
||||||
use: [
|
use: [
|
||||||
extractOrInjectStyles,
|
extractOrInjectStyles,
|
||||||
'css-loader',
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: { importLoaders: 1 },
|
||||||
|
},
|
||||||
'postcss-loader',
|
'postcss-loader',
|
||||||
'sass-loader',
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
+13
-14
@@ -1,4 +1,4 @@
|
|||||||
const merge = require('webpack-merge')
|
const { merge } = require('webpack-merge')
|
||||||
const chokidar = require('chokidar')
|
const chokidar = require('chokidar')
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||||
const baseWebpackConfig = require('./webpack.base.conf')
|
const baseWebpackConfig = require('./webpack.base.conf')
|
||||||
@@ -18,20 +18,19 @@ module.exports = merge(baseWebpackConfig, {
|
|||||||
noEmitOnErrors: true,
|
noEmitOnErrors: true,
|
||||||
},
|
},
|
||||||
devServer: {
|
devServer: {
|
||||||
hot: true,
|
hot: 'only',
|
||||||
hotOnly: true,
|
|
||||||
open: true,
|
open: true,
|
||||||
inline: true,
|
// inline: true,
|
||||||
stats: {
|
// stats: {
|
||||||
children: false,
|
// children: false,
|
||||||
modules: false,
|
// modules: false,
|
||||||
chunks: false,
|
// chunks: false,
|
||||||
},
|
// },
|
||||||
port: 8080,
|
port: 8080,
|
||||||
before(app, server) {
|
// onBeforeSetupMiddleware(server) {
|
||||||
chokidar.watch(['./**/*.html']).on('all', function () {
|
// chokidar.watch(['./**/*.html']).on('all', function () {
|
||||||
server.sockWrite(server.sockets, 'content-changed')
|
// server.sockWrite(server.sockets, 'content-changed')
|
||||||
})
|
// })
|
||||||
},
|
// },
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
const TerserPlugin = require('terser-webpack-plugin')
|
const TerserPlugin = require('terser-webpack-plugin')
|
||||||
const merge = require('webpack-merge')
|
const { merge } = require('webpack-merge')
|
||||||
const baseWebpackConfig = require('./webpack.base.conf')
|
const baseWebpackConfig = require('./webpack.base.conf')
|
||||||
|
|
||||||
module.exports = merge(baseWebpackConfig, {
|
module.exports = merge(baseWebpackConfig, {
|
||||||
@@ -11,10 +11,7 @@ module.exports = merge(baseWebpackConfig, {
|
|||||||
globalObject: "typeof self !== 'undefined' ? self : this",
|
globalObject: "typeof self !== 'undefined' ? self : this",
|
||||||
},
|
},
|
||||||
optimization: {
|
optimization: {
|
||||||
minimizer: [
|
minimize: true,
|
||||||
new TerserPlugin({
|
minimizer: [new TerserPlugin()],
|
||||||
sourceMap: true,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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>
|
||||||
+48
-17
@@ -1,17 +1,47 @@
|
|||||||
Vue Select offers many APIs for customizing the look and feel from the component. You can use
|
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
|
[scoped slots](../api/slots.md), [custom child components](components.md), or modify the built in
|
||||||
SCSS variables.
|
CSS properties.
|
||||||
|
|
||||||
::: tip
|
## CSS Variables
|
||||||
Support for CSS variables (custom properties) is currently on the road map for those
|
|
||||||
that are not using sass in their projects.
|
|
||||||
:::
|
|
||||||
|
|
||||||
## 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
|
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
|
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
|
All variables are implemented with `!default` in order to make them easier to override in your
|
||||||
application.
|
application.
|
||||||
@@ -23,12 +53,12 @@ application.
|
|||||||
Vue Select takes the approach of using selectors with a single level of specificity, while using
|
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.
|
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.
|
– 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.
|
In order to override a default property in your app, you should add one level of specificity. The
|
||||||
The easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust
|
easiest way to do this, is to add `.v-select` before the `vs__*` selector if you want to adjust all
|
||||||
all instances of Vue Select, or add your own classname if you just want to affect one.
|
instances of Vue Select, or add your own classname if you just want to affect one.
|
||||||
|
|
||||||
<CssSpecificity />
|
<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
|
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
|
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
|
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
|
```html
|
||||||
|
|
||||||
<v-select transition="" />
|
<v-select transition="" />
|
||||||
```
|
```
|
||||||
|
|
||||||
2. You can also override the default CSS for the `vs__fade` transition. Again, if you
|
2. You can also override the default CSS for the `vs__fade` transition. Again, if you wanted to
|
||||||
wanted to eliminate the transition entirely:
|
eliminate the transition entirely:
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.vs__fade-enter-active,
|
.vs__fade-enter-active,
|
||||||
|
|||||||
@@ -1,8 +1,14 @@
|
|||||||
## Yarn / NPM
|
## Yarn / NPM
|
||||||
Install with yarn:
|
|
||||||
|
Install with yarn or npm:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
# vue 2
|
||||||
yarn add vue-select
|
yarn add vue-select
|
||||||
|
|
||||||
|
# vue 3
|
||||||
|
yarn add vue-select@beta
|
||||||
|
|
||||||
# or, using NPM
|
# or, using NPM
|
||||||
npm install vue-select
|
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';
|
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
|
## In the Browser
|
||||||
|
|
||||||
vue-select ships as an UMD module that is accessible in the browser. When loaded
|
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
|
## Vue Compatibility
|
||||||
|
|
||||||
- If you're on Vue `1.x`, use vue-select `1.x`.
|
- Vue `2.x`, use vue-select `3.x`.
|
||||||
- The `1.x` branch has not received updates since the 2.0 release.
|
- Vue `3.x`, use vue-select `3.x@beta`.
|
||||||
|
|||||||
@@ -22,9 +22,7 @@
|
|||||||
"dotenv": "^8.2.0",
|
"dotenv": "^8.2.0",
|
||||||
"fuse.js": "^6.4.0",
|
"fuse.js": "^6.4.0",
|
||||||
"gh-pages": "^2.2.0",
|
"gh-pages": "^2.2.0",
|
||||||
"node-sass": "^4.12.0",
|
|
||||||
"octonode": "^0.9.5",
|
"octonode": "^0.9.5",
|
||||||
"sass-loader": "^8.0.2",
|
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vuepress": "^1.4.0",
|
"vuepress": "^1.4.0",
|
||||||
"vuex": "^3.1.0"
|
"vuex": "^3.1.0"
|
||||||
|
|||||||
+26
-574
File diff suppressed because it is too large
Load Diff
+22
-20
@@ -13,7 +13,7 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"prepare": "npm run build",
|
"prepare": "npm run build",
|
||||||
"scripts": {
|
"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",
|
"serve:docs": "cd docs && yarn serve",
|
||||||
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js --progress",
|
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js --progress",
|
||||||
"build:docs": "cd docs && yarn build",
|
"build:docs": "cd docs && yarn build",
|
||||||
@@ -43,17 +43,17 @@
|
|||||||
"@semantic-release/git": "^9.0.0",
|
"@semantic-release/git": "^9.0.0",
|
||||||
"@semantic-release/github": "^7.0.4",
|
"@semantic-release/github": "^7.0.4",
|
||||||
"@vue/test-utils": "^1.2.2",
|
"@vue/test-utils": "^1.2.2",
|
||||||
"autoprefixer": "^9.4.7",
|
"autoprefixer": "^10.3.7",
|
||||||
"babel-core": "^7.0.0-bridge.0",
|
"babel-core": "^7.0.0-bridge.0",
|
||||||
"babel-eslint": "^10.0.3",
|
"babel-eslint": "^10.0.3",
|
||||||
"babel-loader": "^8.0.5",
|
"babel-loader": "^8.0.5",
|
||||||
"bundlewatch": "^0.2.5",
|
"bundlewatch": "^0.2.5",
|
||||||
"chokidar": "^2.1.5",
|
"chokidar": "^3.5.2",
|
||||||
"commitizen": "^4.0.3",
|
"commitizen": "^4.0.3",
|
||||||
"coveralls": "^3.0.2",
|
"coveralls": "^3.0.2",
|
||||||
"cross-env": "^5.2.0",
|
"cross-env": "^5.2.0",
|
||||||
"css-loader": "^2.1.0",
|
"css-loader": "^6.4.0",
|
||||||
"cssnano": "^4.1.10",
|
"cssnano": "^5.0.8",
|
||||||
"cz-conventional-changelog": "3.1.0",
|
"cz-conventional-changelog": "3.1.0",
|
||||||
"eslint": "^6.8.0",
|
"eslint": "^6.8.0",
|
||||||
"eslint-config-prettier": "^6.10.0",
|
"eslint-config-prettier": "^6.10.0",
|
||||||
@@ -61,30 +61,29 @@
|
|||||||
"eslint-plugin-prettier": "^3.1.2",
|
"eslint-plugin-prettier": "^3.1.2",
|
||||||
"eslint-plugin-vue": "^6.2.1",
|
"eslint-plugin-vue": "^6.2.1",
|
||||||
"html-loader": "^0.5.5",
|
"html-loader": "^0.5.5",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"html-webpack-plugin": "^5.4.0",
|
||||||
"jest": "^24.1.0",
|
"jest": "^24.1.0",
|
||||||
"jest-serializer-vue": "^2.0.2",
|
"jest-serializer-vue": "^2.0.2",
|
||||||
"jest-transform-stub": "^2.0.0",
|
"jest-transform-stub": "^2.0.0",
|
||||||
"mini-css-extract-plugin": "^0.5.0",
|
"mini-css-extract-plugin": "^2.4.3",
|
||||||
"node-sass": "^4.12.0",
|
"postcss": "^8.3.11",
|
||||||
"postcss-loader": "^3.0.0",
|
"postcss-import": "^14.0.2",
|
||||||
"postcss-scss": "^2.0.0",
|
"postcss-loader": "^6.2.0",
|
||||||
"prettier": "2.2.1",
|
"prettier": "2.2.1",
|
||||||
"sass-loader": "^7.1.0",
|
|
||||||
"semantic-release": "^17.0.4",
|
"semantic-release": "^17.0.4",
|
||||||
"terser-webpack-plugin": "^1.2.3",
|
"terser-webpack-plugin": "^5.2.4",
|
||||||
"url-loader": "^1.1.2",
|
"url-loader": "^4.1.1",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-html-loader": "^1.2.4",
|
"vue-html-loader": "^1.2.4",
|
||||||
"vue-jest": "^3.0.4",
|
"vue-jest": "^3.0.4",
|
||||||
"vue-loader": "^15.7.0",
|
"vue-loader": "^15.9.8",
|
||||||
"vue-server-renderer": "^2.6.10",
|
"vue-server-renderer": "^2.6.10",
|
||||||
"vue-style-loader": "^4.1.2",
|
"vue-style-loader": "^4.1.3",
|
||||||
"vue-template-compiler": "^2.6.10",
|
"vue-template-compiler": "^2.6.10",
|
||||||
"webpack": "^4.29.6",
|
"webpack": "^5.59.1",
|
||||||
"webpack-cli": "^3.3.0",
|
"webpack-cli": "^4.9.1",
|
||||||
"webpack-dev-server": "^3.2.1",
|
"webpack-dev-server": "^4.3.1",
|
||||||
"webpack-merge": "^4.2.1"
|
"webpack-merge": "^5.8.0"
|
||||||
},
|
},
|
||||||
"jest": {
|
"jest": {
|
||||||
"moduleFileExtensions": [
|
"moduleFileExtensions": [
|
||||||
@@ -134,8 +133,11 @@
|
|||||||
{
|
{
|
||||||
"path": "./dist/vue-select.css",
|
"path": "./dist/vue-select.css",
|
||||||
"compression": "none",
|
"compression": "none",
|
||||||
"maxSize": "6 KB"
|
"maxSize": "8 KB"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"postcss-nested": "^5.0.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
|
require('postcss-import'),
|
||||||
require('autoprefixer'),
|
require('autoprefixer'),
|
||||||
|
require('postcss-nested'),
|
||||||
require('cssnano')({
|
require('cssnano')({
|
||||||
preset: 'default',
|
preset: 'default',
|
||||||
}),
|
}),
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<style lang="scss">
|
<style>
|
||||||
@import '../scss/vue-select.scss';
|
@import '../css/vue-select.css';
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -118,9 +118,9 @@
|
|||||||
</slot>
|
</slot>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="filteredOptions.length === 0" class="vs__no-options">
|
<li v-if="filteredOptions.length === 0" class="vs__no-options">
|
||||||
<slot name="no-options" v-bind="scope.noOptions"
|
<slot name="no-options" v-bind="scope.noOptions">
|
||||||
>Sorry, no matching options.</slot
|
Sorry, no matching options.
|
||||||
>
|
</slot>
|
||||||
</li>
|
</li>
|
||||||
<slot name="list-footer" v-bind="scope.listFooter" />
|
<slot name="list-footer" v-bind="scope.listFooter" />
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -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';
|
||||||
+22
-12
@@ -1,13 +1,23 @@
|
|||||||
@import "global/variables";
|
/**
|
||||||
@import "global/component";
|
Support for SASS is deprecated as of v3.18.
|
||||||
@import "global/animations";
|
|
||||||
@import "global/states";
|
|
||||||
|
|
||||||
@import "modules/dropdown-toggle";
|
The files remain here if your build is dependent on them
|
||||||
@import "modules/open-indicator";
|
but they will not receive updates in future releases. All
|
||||||
@import "modules/clear";
|
SASS variables have been translated into CSS variables, so
|
||||||
@import "modules/dropdown-menu";
|
migration should be quite simple if you'd like to move over.
|
||||||
@import "modules/dropdown-option";
|
|
||||||
@import "modules/selected";
|
In v4, these files will be removed.
|
||||||
@import "modules/search-input";
|
*/
|
||||||
@import "modules/spinner";
|
@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';
|
||||||
|
|||||||
Reference in New Issue
Block a user