├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .travis.yml ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package.json ├── screenshots ├── login.png ├── new_vm.png ├── overview.png ├── vm_list.png └── vnc.png ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── Login.vue │ ├── Overview.vue │ ├── OverviewBar.vue │ ├── User.vue │ ├── VMItem.vue │ ├── VirtualMachines.vue │ └── back.vue ├── main.js ├── router │ └── index.js ├── svg │ ├── centos.svg │ ├── delete.svg │ ├── indicator.svg │ ├── logout.svg │ ├── shutdown.svg │ ├── start.svg │ ├── ubuntu.svg │ └── windows.svg └── vuex │ └── store.js ├── static └── .gitkeep └── theme ├── alert.css ├── autocomplete.css ├── badge.css ├── base.css ├── breadcrumb-item.css ├── breadcrumb.css ├── button-group.css ├── button.css ├── card.css ├── carousel-item.css ├── carousel.css ├── cascader.css ├── checkbox-group.css ├── checkbox.css ├── col.css ├── collapse-item.css ├── collapse.css ├── color-picker.css ├── date-picker.css ├── dialog.css ├── dropdown-item.css ├── dropdown-menu.css ├── dropdown.css ├── element-variables.css ├── fonts ├── element-icons.ttf └── element-icons.woff ├── form-item.css ├── form.css ├── icon.css ├── index.css ├── input-number.css ├── input.css ├── loading.css ├── menu-item-group.css ├── menu-item.css ├── menu.css ├── message-box.css ├── message.css ├── notification.css ├── option-group.css ├── option.css ├── pagination.css ├── popover.css ├── progress.css ├── radio-button.css ├── radio-group.css ├── radio.css ├── rate.css ├── reset.css ├── row.css ├── scrollbar.css ├── select-dropdown.css ├── select.css ├── slider.css ├── spinner.css ├── step.css ├── steps.css ├── submenu.css ├── switch.css ├── tab-pane.css ├── table-column.css ├── table.css ├── tabs.css ├── tag.css ├── time-picker.css ├── time-select.css ├── tooltip.css ├── tree.css └── upload.css /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "presets": ["env", "stage-2"], 11 | "plugins": [ "istanbul" ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SpringX 2 | ![image](https://travis-ci.org/Alecyrus/SpringX.svg?branch=master) 3 | 4 | 5 | > A web front-end for the simple private cloud. 6 | 7 | 8 | 9 | ## Login 10 | >![Login](https://github.com/Alecyrus/SpringX/blob/master/screenshots/login.png?raw=true) 11 | --- 12 | 13 | ## Overview 14 | >![Overview](https://github.com/Alecyrus/SpringX/blob/master/screenshots/overview.png?raw=true) 15 | --- 16 | 17 | ## Virtual Machine 18 | ### Create a new server 19 | >![New VM](https://github.com/Alecyrus/SpringX/blob/master/screenshots/new_vm.png?raw=true) 20 | 21 | ### Show the vm list 22 | >![VM List](https://github.com/Alecyrus/SpringX/blob/master/screenshots/vm_list.png?raw=true) 23 | 24 | ### The VNC desktop 25 | >![VNC](https://github.com/Alecyrus/SpringX/blob/master/screenshots/vnc.png?raw=true) 26 | --- 27 | ## Build Setup 28 | 29 | ``` bash 30 | # install dependencies 31 | npm install 32 | 33 | # serve with hot reload at localhost:8080 34 | npm run dev 35 | 36 | # build for production with minification 37 | npm run build 38 | 39 | # build for production and view the bundle analyzer report 40 | npm run build --report 41 | ``` 42 | 43 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 44 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | var ora = require('ora') 6 | var rm = require('rimraf') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var webpack = require('webpack') 10 | var config = require('../config') 11 | var webpackConfig = require('./webpack.prod.conf') 12 | 13 | var spinner = ora('building for production...') 14 | spinner.start() 15 | 16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 17 | if (err) throw err 18 | webpack(webpackConfig, function (err, stats) { 19 | spinner.stop() 20 | if (err) throw err 21 | process.stdout.write(stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, 25 | chunks: false, 26 | chunkModules: false 27 | }) + '\n\n') 28 | 29 | console.log(chalk.cyan(' Build complete.\n')) 30 | console.log(chalk.yellow( 31 | ' Tip: built files are meant to be served over an HTTP server.\n' + 32 | ' Opening index.html over file:// won\'t work.\n' 33 | )) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = require('./webpack.dev.conf') 14 | 15 | // default port where dev server listens for incoming traffic 16 | var port = process.env.PORT || config.dev.port 17 | // automatically open browser, if not set will be false 18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 19 | // Define HTTP proxies to your custom API backend 20 | // https://github.com/chimurai/http-proxy-middleware 21 | var proxyTable = config.dev.proxyTable 22 | 23 | var app = express() 24 | var compiler = webpack(webpackConfig) 25 | 26 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 27 | publicPath: webpackConfig.output.publicPath, 28 | quiet: true 29 | }) 30 | 31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 32 | log: () => {} 33 | }) 34 | // force page reload when html-webpack-plugin template changes 35 | compiler.plugin('compilation', function (compilation) { 36 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 37 | hotMiddleware.publish({ action: 'reload' }) 38 | cb() 39 | }) 40 | }) 41 | 42 | // proxy api requests 43 | Object.keys(proxyTable).forEach(function (context) { 44 | var options = proxyTable[context] 45 | if (typeof options === 'string') { 46 | options = { target: options } 47 | } 48 | app.use(proxyMiddleware(options.filter || context, options)) 49 | }) 50 | 51 | // handle fallback for HTML5 history API 52 | app.use(require('connect-history-api-fallback')()) 53 | 54 | // serve webpack bundle output 55 | app.use(devMiddleware) 56 | 57 | // enable hot-reload and state-preserving 58 | // compilation error display 59 | app.use(hotMiddleware) 60 | 61 | // serve pure static assets 62 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 63 | app.use(staticPath, express.static('./static')) 64 | 65 | var uri = 'http://localhost:' + port 66 | 67 | devMiddleware.waitUntilValid(function () { 68 | console.log('> Listening at ' + uri + '\n') 69 | }) 70 | 71 | module.exports = app.listen(port, function (err) { 72 | if (err) { 73 | console.log(err) 74 | return 75 | } 76 | 77 | // when env is testing, don't need open it 78 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 79 | opn(uri) 80 | } 81 | }) 82 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | 15 | var cssLoader = { 16 | loader: 'css-loader', 17 | options: { 18 | minimize: process.env.NODE_ENV === 'production', 19 | sourceMap: options.sourceMap 20 | } 21 | } 22 | 23 | // generate loader string to be used with extract text plugin 24 | function generateLoaders (loader, loaderOptions) { 25 | var loaders = [cssLoader] 26 | if (loader) { 27 | loaders.push({ 28 | loader: loader + '-loader', 29 | options: Object.assign({}, loaderOptions, { 30 | sourceMap: options.sourceMap 31 | }) 32 | }) 33 | } 34 | 35 | // Extract CSS when that option is specified 36 | // (which is the case during production build) 37 | if (options.extract) { 38 | return ExtractTextPlugin.extract({ 39 | use: loaders, 40 | fallback: 'vue-style-loader' 41 | }) 42 | } else { 43 | return ['vue-style-loader'].concat(loaders) 44 | } 45 | } 46 | 47 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 48 | return { 49 | css: generateLoaders(), 50 | postcss: generateLoaders(), 51 | less: generateLoaders('less'), 52 | sass: generateLoaders('sass', { indentedSyntax: true }), 53 | scss: generateLoaders('sass'), 54 | stylus: generateLoaders('stylus'), 55 | styl: generateLoaders('stylus') 56 | } 57 | } 58 | 59 | // Generate loaders for standalone style files (outside of .vue) 60 | exports.styleLoaders = function (options) { 61 | var output = [] 62 | var loaders = exports.cssLoaders(options) 63 | for (var extension in loaders) { 64 | var loader = loaders[extension] 65 | output.push({ 66 | test: new RegExp('\\.' + extension + '$'), 67 | use: loader 68 | }) 69 | } 70 | return output 71 | } 72 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | alias: { 24 | 'vue$': 'vue/dist/vue.esm.js', 25 | '@': resolve('src'), 26 | } 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.vue$/, 32 | loader: 'vue-loader', 33 | options: vueLoaderConfig 34 | }, 35 | { 36 | test: /\.js$/, 37 | loader: 'babel-loader', 38 | include: [resolve('src'), resolve('test')] 39 | }, 40 | { 41 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 42 | loader: 'url-loader', 43 | query: { 44 | limit: 10000, 45 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 46 | } 47 | }, 48 | { 49 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 50 | loader: 'url-loader', 51 | query: { 52 | limit: 10000, 53 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 54 | } 55 | } 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var CopyWebpackPlugin = require('copy-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 11 | 12 | var env = config.build.env 13 | 14 | var webpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ 17 | sourceMap: config.build.productionSourceMap, 18 | extract: true 19 | }) 20 | }, 21 | devtool: config.build.productionSourceMap ? '#source-map' : false, 22 | output: { 23 | path: config.build.assetsRoot, 24 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 25 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 26 | }, 27 | plugins: [ 28 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 29 | new webpack.DefinePlugin({ 30 | 'process.env': env 31 | }), 32 | new webpack.optimize.UglifyJsPlugin({ 33 | compress: { 34 | warnings: false 35 | }, 36 | sourceMap: true 37 | }), 38 | // extract css into its own file 39 | new ExtractTextPlugin({ 40 | filename: utils.assetsPath('css/[name].[contenthash].css') 41 | }), 42 | // Compress extracted CSS. We are using this plugin so that possible 43 | // duplicated CSS from different components can be deduped. 44 | new OptimizeCSSPlugin(), 45 | // generate dist index.html with correct asset hash for caching. 46 | // you can customize output by editing /index.html 47 | // see https://github.com/ampedandwired/html-webpack-plugin 48 | new HtmlWebpackPlugin({ 49 | filename: config.build.index, 50 | template: 'index.html', 51 | inject: true, 52 | minify: { 53 | removeComments: true, 54 | collapseWhitespace: true, 55 | removeAttributeQuotes: true 56 | // more options: 57 | // https://github.com/kangax/html-minifier#options-quick-reference 58 | }, 59 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 60 | chunksSortMode: 'dependency' 61 | }), 62 | // split vendor js into its own file 63 | new webpack.optimize.CommonsChunkPlugin({ 64 | name: 'vendor', 65 | minChunks: function (module, count) { 66 | // any required modules inside node_modules are extracted to vendor 67 | return ( 68 | module.resource && 69 | /\.js$/.test(module.resource) && 70 | module.resource.indexOf( 71 | path.join(__dirname, '../node_modules') 72 | ) === 0 73 | ) 74 | } 75 | }), 76 | // extract webpack runtime and module manifest to its own file in order to 77 | // prevent vendor hash from being updated whenever app bundle is updated 78 | new webpack.optimize.CommonsChunkPlugin({ 79 | name: 'manifest', 80 | chunks: ['vendor'] 81 | }), 82 | // copy custom static assets 83 | new CopyWebpackPlugin([ 84 | { 85 | from: path.resolve(__dirname, '../static'), 86 | to: config.build.assetsSubDirectory, 87 | ignore: ['.*'] 88 | } 89 | ]) 90 | ] 91 | }) 92 | 93 | if (config.build.productionGzip) { 94 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 95 | 96 | webpackConfig.plugins.push( 97 | new CompressionWebpackPlugin({ 98 | asset: '[path].gz[query]', 99 | algorithm: 'gzip', 100 | test: new RegExp( 101 | '\\.(' + 102 | config.build.productionGzipExtensions.join('|') + 103 | ')$' 104 | ), 105 | threshold: 10240, 106 | minRatio: 0.8 107 | }) 108 | ) 109 | } 110 | 111 | if (config.build.bundleAnalyzerReport) { 112 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 113 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 114 | } 115 | 116 | module.exports = webpackConfig 117 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: { 31 | '/api': { 32 | target: 'http://172.29.152.246:8181', 33 | changeOrigin: true, 34 | pathRewrite: { 35 | '^/api': '' 36 | } 37 | } 38 | 39 | }, 40 | // CSS Sourcemaps off by default because relative paths are "buggy" 41 | // with this option, according to the CSS-Loader README 42 | // (https://github.com/webpack/css-loader#sourcemaps) 43 | // In our experience, they generally work as expected, 44 | // just be aware of this issue when enabling this option. 45 | cssSourceMap: false 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SpringX 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "halo", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "Junkai Huang", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.15.3", 13 | "element-ui": "^1.2.4", 14 | "iview": "^2.0.0-rc.8", 15 | "vue": "^2.2.2", 16 | "vue-echarts-v3": "^1.0.3", 17 | "vue-router": "^2.2.0", 18 | "vue-svg-icon": "^1.2.9", 19 | "vuex": "^2.2.1" 20 | }, 21 | "devDependencies": { 22 | "autoprefixer": "^6.7.2", 23 | "babel-core": "^6.22.1", 24 | "babel-loader": "^6.2.10", 25 | "babel-plugin-transform-runtime": "^6.22.0", 26 | "babel-preset-env": "^1.2.1", 27 | "babel-preset-stage-2": "^6.22.0", 28 | "babel-register": "^6.22.0", 29 | "chalk": "^1.1.3", 30 | "connect-history-api-fallback": "^1.3.0", 31 | "copy-webpack-plugin": "^4.0.1", 32 | "css-loader": "^0.26.1", 33 | "element-theme-default": "https://github.com/ElementUI/theme-default", 34 | "eventsource-polyfill": "^0.9.6", 35 | "express": "^4.14.1", 36 | "extract-text-webpack-plugin": "^2.0.0", 37 | "file-loader": "^0.10.0", 38 | "friendly-errors-webpack-plugin": "^1.1.3", 39 | "function-bind": "^1.1.0", 40 | "html-webpack-plugin": "^2.28.0", 41 | "http-proxy-middleware": "^0.17.3", 42 | "opn": "^4.0.2", 43 | "optimize-css-assets-webpack-plugin": "^1.3.0", 44 | "ora": "^1.1.0", 45 | "rimraf": "^2.6.0", 46 | "semver": "^5.3.0", 47 | "url-loader": "^0.5.7", 48 | "vue-loader": "^11.1.4", 49 | "vue-style-loader": "^2.0.0", 50 | "vue-svg-icon": "^1.2.9", 51 | "vue-template-compiler": "^2.2.4", 52 | "webpack": "^2.2.1", 53 | "webpack-bundle-analyzer": "^2.2.1", 54 | "webpack-dev-middleware": "^1.10.0", 55 | "webpack-hot-middleware": "^2.16.1", 56 | "webpack-merge": "^2.6.1" 57 | }, 58 | "engines": { 59 | "node": ">= 4.0.0", 60 | "npm": ">= 3.0.0" 61 | }, 62 | "browserslist": [ 63 | "> 1%", 64 | "last 2 versions", 65 | "not ie <= 8" 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /screenshots/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alecyrus/SpringX/4b76d5641770d32f42410e041b9a344070f43e8b/screenshots/login.png -------------------------------------------------------------------------------- /screenshots/new_vm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alecyrus/SpringX/4b76d5641770d32f42410e041b9a344070f43e8b/screenshots/new_vm.png -------------------------------------------------------------------------------- /screenshots/overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alecyrus/SpringX/4b76d5641770d32f42410e041b9a344070f43e8b/screenshots/overview.png -------------------------------------------------------------------------------- /screenshots/vm_list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alecyrus/SpringX/4b76d5641770d32f42410e041b9a344070f43e8b/screenshots/vm_list.png -------------------------------------------------------------------------------- /screenshots/vnc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alecyrus/SpringX/4b76d5641770d32f42410e041b9a344070f43e8b/screenshots/vnc.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | 46 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alecyrus/SpringX/4b76d5641770d32f42410e041b9a344070f43e8b/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/Overview.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 42 | 43 | 44 | 57 | -------------------------------------------------------------------------------- /src/components/OverviewBar.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 111 | 112 | -------------------------------------------------------------------------------- /src/components/User.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 82 | 83 | 84 | 85 | 103 | -------------------------------------------------------------------------------- /src/components/VMItem.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 146 | 147 | 148 | 149 | 150 | 232 | -------------------------------------------------------------------------------- /src/components/back.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 100 | 101 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | import '../theme/index.css' 7 | import store from './vuex/store' 8 | import ElementUI from 'element-ui' 9 | import Icon from 'vue-svg-icon/Icon.vue'; 10 | import axios from 'axios'; 11 | 12 | 13 | Vue.use(ElementUI); 14 | Vue.component('icon', Icon); 15 | Vue.prototype.$request = axios 16 | /* eslint-disable no-new */ 17 | new Vue({ 18 | el: '#app', 19 | router, 20 | store, 21 | template: '', 22 | components: { App } 23 | }) 24 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import VirtualMachines from '@/components/VirtualMachines' 4 | import Overview from '@/components/Overview' 5 | import Login from '@/components/Login' 6 | import User from '@/components/User' 7 | import Echarts from '@/components/OverviewBar' 8 | 9 | Vue.use(Router) 10 | 11 | export default new Router({ 12 | routes: [ 13 | { 14 | path: '/', 15 | name: 'Login', 16 | component: Login 17 | }, 18 | { 19 | path: '/user/:username', 20 | name: 'User', 21 | component: User, 22 | children: [ 23 | { 24 | // 当 /user/:id/profile 匹配成功， 25 | // UserProfile 会被渲染在 User 的 中 26 | path: 'virtual_machines', 27 | component: VirtualMachines 28 | }, 29 | { 30 | // 当 /user/:id/posts 匹配成功 31 | // UserPosts 会被渲染在 User 的 中 32 | path: 'overview', 33 | component: Overview 34 | } 35 | ] 36 | } 37 | ] 38 | }) 39 | -------------------------------------------------------------------------------- /src/svg/centos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/indicator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/logout.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/shutdown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/start.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/ubuntu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svg/windows.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/vuex/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | import axios from 'axios' 4 | 5 | 6 | Vue.use(Vuex) 7 | 8 | export default new Vuex.Store({ 9 | state: { 10 | username: '', 11 | password: '', 12 | user_id:0, 13 | userUsage: [{type:"Hosts",used:0,total:5}, 14 | {type:"CPU",used:0,total:6}, 15 | {type:"Memory",used:0,total:8192}], 16 | vmItems:[] 17 | }, 18 | mutations: { 19 | Set_UserInfo(state, userinfo) { 20 | state.username = userinfo.username; 21 | state.password = userinfo.password; 22 | }, 23 | Set_UserID(state, user) { 24 | state.user_id = user.user_id; 25 | }, 26 | Set_UserUsage(state, usage) { 27 | state.userUsage[0].used = 5 - usage.instance_left; 28 | state.userUsage[1].used = 6 - usage.cpu_left; 29 | state.userUsage[2].used = 8192 - usage.memory_left; 30 | }, 31 | Set_UserVM(state, vms) { 32 | state.vmItems = vms 33 | } 34 | }, 35 | actions: { 36 | SET_USER_INFO({commit}, userinfo) { 37 | commit('Set_UserInfo', userinfo); 38 | }, 39 | SET_USER_ID({commit}, user) { 40 | commit('Set_UserID', user); 41 | }, 42 | SET_USER_USAGE({commit}, usage) { 43 | commit('Set_UserUsage', usage); 44 | }, 45 | FETCH_USER_VM(context){ 46 | axios({ 47 | method: 'patch', 48 | url: '/api/v1/environment/action', 49 | data: {user_id:context.state.user_id} 50 | }).then((response) => { 51 | let resp = JSON.parse(response.data.replace(/'([^']*)'/g,'"$1"')); 52 | console.log(resp); 53 | context.commit('Set_UserVM', resp.info); 54 | }) 55 | }, 56 | FETCH_USER_USAGE(context){ 57 | console.log(context.state.username); 58 | console.log(context.state.password); 59 | axios({ 60 | method: 'put', 61 | url: '/api/v1/account/user', 62 | data: {username:context.state.username, 63 | password:context.state.password} 64 | }).then((response) => { 65 | let resp = JSON.parse(response.data.replace(/'([^']*)'/g,'"$1"')); 66 | console.log(resp); 67 | context.commit('Set_UserUsage', resp.info); 68 | }) 69 | } 70 | }, 71 | getters: { 72 | getUsername: (state) => state.username, 73 | getUserID: (state) => state.user_id, 74 | getUserUsage: (state) => state.userUsage, 75 | getUserVM: (state) => state.vmItems, 76 | } 77 | }) -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alecyrus/SpringX/4b76d5641770d32f42410e041b9a344070f43e8b/static/.gitkeep -------------------------------------------------------------------------------- /theme/alert.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-alert{ 92 | width: 100%; 93 | padding: 8px 16px; 94 | margin: 0; 95 | box-sizing: border-box; 96 | border-radius: 4px; 97 | position: relative; 98 | background-color: #fff; 99 | overflow: hidden; 100 | color: #fff; 101 | opacity: 1; 102 | display: table; 103 | transition: opacity .2s; 104 | } 105 | 106 | .el-alert .el-alert__description{ 107 | color: #fff; 108 | font-size: 12px; 109 | margin: 5px 0 0 0; 110 | } 111 | 112 | .el-alert--success{ 113 | background-color: #13ce66; 114 | } 115 | 116 | .el-alert--info{ 117 | background-color: #50bfff; 118 | } 119 | 120 | .el-alert--warning{ 121 | background-color: #f7ba2a; 122 | } 123 | 124 | .el-alert--error{ 125 | background-color: #ff4949; 126 | } 127 | 128 | .el-alert__content{ 129 | display: table-cell; 130 | padding: 0 8px; 131 | } 132 | 133 | .el-alert__icon{ 134 | font-size: 16px; 135 | width: 16px; 136 | display: table-cell; 137 | color: #fff; 138 | vertical-align: middle; 139 | } 140 | 141 | .el-alert__icon.is-big{ 142 | font-size: 28px; 143 | width: 28px; 144 | } 145 | 146 | .el-alert__title{ 147 | font-size: 13px; 148 | line-height: 18px; 149 | } 150 | 151 | .el-alert__title.is-bold{ 152 | font-weight: 700; 153 | } 154 | 155 | .el-alert__closebtn{ 156 | font-size: 12px; 157 | color: #fff; 158 | opacity: 1; 159 | top: 12px; 160 | right: 15px; 161 | position: absolute; 162 | cursor: pointer; 163 | } 164 | 165 | .el-alert__closebtn.is-customed{ 166 | font-style: normal; 167 | font-size: 13px; 168 | top: 9px; 169 | } 170 | 171 | .el-alert-fade-enter, .el-alert-fade-leave-active { 172 | opacity: 0; 173 | } 174 | :root{ 175 | /* Transition 176 | -------------------------- */ 177 | /* Colors 178 | -------------------------- */ 179 | /* Link 180 | -------------------------- */ 181 | /* Border 182 | -------------------------- */ 183 | /* Box-shadow 184 | -------------------------- */ 185 | /* Fill 186 | -------------------------- */ 187 | /* Font 188 | -------------------------- */ 189 | /* Size 190 | -------------------------- */ 191 | /* z-index 192 | -------------------------- */ 193 | /* Disable base 194 | -------------------------- */ 195 | /* Icon 196 | -------------------------- */ 197 | /* Checkbox 198 | -------------------------- */ 199 | /* Radio 200 | -------------------------- */ 201 | /* Select 202 | -------------------------- */ 203 | /* Alert 204 | -------------------------- */ 205 | /* Message Box 206 | -------------------------- */ 207 | /* Message 208 | -------------------------- */ 209 | /* Notification 210 | -------------------------- */ 211 | /* Input 212 | -------------------------- */ 213 | /* Cascader 214 | -------------------------- */ 215 | /* Group 216 | -------------------------- */ 217 | /* Tab 218 | -------------------------- */ 219 | /* Button 220 | -------------------------- */ 221 | /* cascader 222 | -------------------------- */ 223 | /* Switch 224 | -------------------------- */ 225 | /* Dialog 226 | -------------------------- */ 227 | /* Table 228 | -------------------------- */ 229 | /* Pagination 230 | -------------------------- */ 231 | /* Popover 232 | -------------------------- */ 233 | /* Tooltip 234 | -------------------------- */ 235 | /* Tag 236 | -------------------------- */ 237 | /* Dropdown 238 | -------------------------- */ 239 | /* Badge 240 | -------------------------- */ 241 | /* Card 242 | --------------------------*/ 243 | /* Slider 244 | --------------------------*/ 245 | /* Steps 246 | --------------------------*/ 247 | /* Menu 248 | --------------------------*/ 249 | /* Rate 250 | --------------------------*/ 251 | /* DatePicker 252 | --------------------------*/ 253 | /* Loading 254 | --------------------------*/ 255 | /* Scrollbar 256 | --------------------------*/ 257 | /* Carousel 258 | --------------------------*/ 259 | /* Collapse 260 | --------------------------*/ 261 | } -------------------------------------------------------------------------------- /theme/badge.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-badge{ 92 | position: relative; 93 | vertical-align: middle; 94 | display: inline-block 95 | } 96 | 97 | .el-badge__content{ 98 | background-color: #ff4949; 99 | border-radius: 10px; 100 | color: #fff; 101 | display: inline-block; 102 | font-size: 12px; 103 | height: 18px; 104 | line-height: 18px; 105 | padding: 0 6px; 106 | text-align: center; 107 | white-space: nowrap; 108 | border: 1px solid #fff 109 | } 110 | 111 | .el-badge__content.is-dot{ 112 | width: 8px; 113 | height: 8px; 114 | padding: 0; 115 | right: 0; 116 | border-radius: 50% 117 | } 118 | 119 | .el-badge__content.is-fixed{ 120 | top: 0; 121 | right: 10px; 122 | position: absolute; 123 | transform: translateY(-50%) translateX(100%) 124 | } 125 | 126 | .el-badge__content.is-fixed.is-dot{ 127 | right: 5px 128 | } 129 | :root{ 130 | /* Transition 131 | -------------------------- */ 132 | /* Colors 133 | -------------------------- */ 134 | /* Link 135 | -------------------------- */ 136 | /* Border 137 | -------------------------- */ 138 | /* Box-shadow 139 | -------------------------- */ 140 | /* Fill 141 | -------------------------- */ 142 | /* Font 143 | -------------------------- */ 144 | /* Size 145 | -------------------------- */ 146 | /* z-index 147 | -------------------------- */ 148 | /* Disable base 149 | -------------------------- */ 150 | /* Icon 151 | -------------------------- */ 152 | /* Checkbox 153 | -------------------------- */ 154 | /* Radio 155 | -------------------------- */ 156 | /* Select 157 | -------------------------- */ 158 | /* Alert 159 | -------------------------- */ 160 | /* Message Box 161 | -------------------------- */ 162 | /* Message 163 | -------------------------- */ 164 | /* Notification 165 | -------------------------- */ 166 | /* Input 167 | -------------------------- */ 168 | /* Cascader 169 | -------------------------- */ 170 | /* Group 171 | -------------------------- */ 172 | /* Tab 173 | -------------------------- */ 174 | /* Button 175 | -------------------------- */ 176 | /* cascader 177 | -------------------------- */ 178 | /* Switch 179 | -------------------------- */ 180 | /* Dialog 181 | -------------------------- */ 182 | /* Table 183 | -------------------------- */ 184 | /* Pagination 185 | -------------------------- */ 186 | /* Popover 187 | -------------------------- */ 188 | /* Tooltip 189 | -------------------------- */ 190 | /* Tag 191 | -------------------------- */ 192 | /* Dropdown 193 | -------------------------- */ 194 | /* Badge 195 | -------------------------- */ 196 | /* Card 197 | --------------------------*/ 198 | /* Slider 199 | --------------------------*/ 200 | /* Steps 201 | --------------------------*/ 202 | /* Menu 203 | --------------------------*/ 204 | /* Rate 205 | --------------------------*/ 206 | /* DatePicker 207 | --------------------------*/ 208 | /* Loading 209 | --------------------------*/ 210 | /* Scrollbar 211 | --------------------------*/ 212 | /* Carousel 213 | --------------------------*/ 214 | /* Collapse 215 | --------------------------*/ 216 | } -------------------------------------------------------------------------------- /theme/breadcrumb-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/breadcrumb.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-breadcrumb{ 92 | font-size: 13px; 93 | line-height: 1 94 | } 95 | 96 | .el-breadcrumb:before, .el-breadcrumb:after{ 97 | display: table; 98 | content: "" 99 | } 100 | 101 | .el-breadcrumb:after{ 102 | clear: both 103 | } 104 | 105 | .el-breadcrumb__separator{ 106 | margin: 0 8px; 107 | color: rgb(191, 217, 205) 108 | } 109 | 110 | .el-breadcrumb__item{ 111 | float: left 112 | } 113 | 114 | .el-breadcrumb__item:last-child .el-breadcrumb__item__inner, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a{} 115 | 116 | .el-breadcrumb__item:last-child .el-breadcrumb__item__inner, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover{ 117 | color: rgb(151, 190, 174); 118 | cursor: text 119 | } 120 | 121 | .el-breadcrumb__item:last-child .el-breadcrumb__separator{ 122 | display: none 123 | } 124 | 125 | .el-breadcrumb__item__inner{} 126 | 127 | .el-breadcrumb__item__inner, .el-breadcrumb__item__inner a{ 128 | transition: color .15s linear; 129 | color: rgb(72, 106, 92) 130 | } 131 | 132 | .el-breadcrumb__item__inner:hover, .el-breadcrumb__item__inner a:hover{ 133 | color: #00B050; 134 | cursor: pointer 135 | } 136 | :root{ 137 | /* Transition 138 | -------------------------- */ 139 | /* Colors 140 | -------------------------- */ 141 | /* Link 142 | -------------------------- */ 143 | /* Border 144 | -------------------------- */ 145 | /* Box-shadow 146 | -------------------------- */ 147 | /* Fill 148 | -------------------------- */ 149 | /* Font 150 | -------------------------- */ 151 | /* Size 152 | -------------------------- */ 153 | /* z-index 154 | -------------------------- */ 155 | /* Disable base 156 | -------------------------- */ 157 | /* Icon 158 | -------------------------- */ 159 | /* Checkbox 160 | -------------------------- */ 161 | /* Radio 162 | -------------------------- */ 163 | /* Select 164 | -------------------------- */ 165 | /* Alert 166 | -------------------------- */ 167 | /* Message Box 168 | -------------------------- */ 169 | /* Message 170 | -------------------------- */ 171 | /* Notification 172 | -------------------------- */ 173 | /* Input 174 | -------------------------- */ 175 | /* Cascader 176 | -------------------------- */ 177 | /* Group 178 | -------------------------- */ 179 | /* Tab 180 | -------------------------- */ 181 | /* Button 182 | -------------------------- */ 183 | /* cascader 184 | -------------------------- */ 185 | /* Switch 186 | -------------------------- */ 187 | /* Dialog 188 | -------------------------- */ 189 | /* Table 190 | -------------------------- */ 191 | /* Pagination 192 | -------------------------- */ 193 | /* Popover 194 | -------------------------- */ 195 | /* Tooltip 196 | -------------------------- */ 197 | /* Tag 198 | -------------------------- */ 199 | /* Dropdown 200 | -------------------------- */ 201 | /* Badge 202 | -------------------------- */ 203 | /* Card 204 | --------------------------*/ 205 | /* Slider 206 | --------------------------*/ 207 | /* Steps 208 | --------------------------*/ 209 | /* Menu 210 | --------------------------*/ 211 | /* Rate 212 | --------------------------*/ 213 | /* DatePicker 214 | --------------------------*/ 215 | /* Loading 216 | --------------------------*/ 217 | /* Scrollbar 218 | --------------------------*/ 219 | /* Carousel 220 | --------------------------*/ 221 | /* Collapse 222 | --------------------------*/ 223 | } -------------------------------------------------------------------------------- /theme/button-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/card.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-card{ 92 | border: 1px solid rgb(209, 229, 220); 93 | border-radius: 4px; 94 | background-color: #fff; 95 | overflow: hidden; 96 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12), 97 | 0px 0px 6px 0px rgba(0, 0, 0, .04) 98 | } 99 | 100 | .el-card__header{ 101 | padding: 18px 20px; 102 | border-bottom: 1px solid rgb(209, 229, 220); 103 | box-sizing: border-box 104 | } 105 | 106 | .el-card__body{ 107 | padding: 20px 108 | } 109 | :root{ 110 | /* Transition 111 | -------------------------- */ 112 | /* Colors 113 | -------------------------- */ 114 | /* Link 115 | -------------------------- */ 116 | /* Border 117 | -------------------------- */ 118 | /* Box-shadow 119 | -------------------------- */ 120 | /* Fill 121 | -------------------------- */ 122 | /* Font 123 | -------------------------- */ 124 | /* Size 125 | -------------------------- */ 126 | /* z-index 127 | -------------------------- */ 128 | /* Disable base 129 | -------------------------- */ 130 | /* Icon 131 | -------------------------- */ 132 | /* Checkbox 133 | -------------------------- */ 134 | /* Radio 135 | -------------------------- */ 136 | /* Select 137 | -------------------------- */ 138 | /* Alert 139 | -------------------------- */ 140 | /* Message Box 141 | -------------------------- */ 142 | /* Message 143 | -------------------------- */ 144 | /* Notification 145 | -------------------------- */ 146 | /* Input 147 | -------------------------- */ 148 | /* Cascader 149 | -------------------------- */ 150 | /* Group 151 | -------------------------- */ 152 | /* Tab 153 | -------------------------- */ 154 | /* Button 155 | -------------------------- */ 156 | /* cascader 157 | -------------------------- */ 158 | /* Switch 159 | -------------------------- */ 160 | /* Dialog 161 | -------------------------- */ 162 | /* Table 163 | -------------------------- */ 164 | /* Pagination 165 | -------------------------- */ 166 | /* Popover 167 | -------------------------- */ 168 | /* Tooltip 169 | -------------------------- */ 170 | /* Tag 171 | -------------------------- */ 172 | /* Dropdown 173 | -------------------------- */ 174 | /* Badge 175 | -------------------------- */ 176 | /* Card 177 | --------------------------*/ 178 | /* Slider 179 | --------------------------*/ 180 | /* Steps 181 | --------------------------*/ 182 | /* Menu 183 | --------------------------*/ 184 | /* Rate 185 | --------------------------*/ 186 | /* DatePicker 187 | --------------------------*/ 188 | /* Loading 189 | --------------------------*/ 190 | /* Scrollbar 191 | --------------------------*/ 192 | /* Carousel 193 | --------------------------*/ 194 | /* Collapse 195 | --------------------------*/ 196 | } -------------------------------------------------------------------------------- /theme/carousel-item.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-carousel{} 92 | 93 | .el-carousel__item{ 94 | position: absolute; 95 | top: 0; 96 | left: 0; 97 | width: 100%; 98 | height: 100%; 99 | display: inline-block; 100 | transition: .4s ease-in-out; 101 | overflow: hidden; 102 | z-index: 0 103 | } 104 | 105 | .el-carousel__item.is-active{ 106 | z-index: 2 107 | } 108 | 109 | .el-carousel__item--card{ 110 | width: 50% 111 | } 112 | 113 | .el-carousel__item--card.is-in-stage{ 114 | cursor: pointer; 115 | z-index: 1 116 | } 117 | 118 | .el-carousel__item--card.is-in-stage:hover .el-carousel__mask, .el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask{ 119 | opacity: 0.12 120 | } 121 | 122 | .el-carousel__item--card.is-active{ 123 | z-index: 2 124 | } 125 | 126 | .el-carousel__mask{ 127 | position: absolute; 128 | width: 100%; 129 | height: 100%; 130 | top: 0; 131 | left: 0; 132 | background-color: #fff; 133 | opacity: 0.24; 134 | transition: .2s 135 | }:root{ 136 | /* Transition 137 | -------------------------- */ 138 | /* Colors 139 | -------------------------- */ 140 | /* Link 141 | -------------------------- */ 142 | /* Border 143 | -------------------------- */ 144 | /* Box-shadow 145 | -------------------------- */ 146 | /* Fill 147 | -------------------------- */ 148 | /* Font 149 | -------------------------- */ 150 | /* Size 151 | -------------------------- */ 152 | /* z-index 153 | -------------------------- */ 154 | /* Disable base 155 | -------------------------- */ 156 | /* Icon 157 | -------------------------- */ 158 | /* Checkbox 159 | -------------------------- */ 160 | /* Radio 161 | -------------------------- */ 162 | /* Select 163 | -------------------------- */ 164 | /* Alert 165 | -------------------------- */ 166 | /* Message Box 167 | -------------------------- */ 168 | /* Message 169 | -------------------------- */ 170 | /* Notification 171 | -------------------------- */ 172 | /* Input 173 | -------------------------- */ 174 | /* Cascader 175 | -------------------------- */ 176 | /* Group 177 | -------------------------- */ 178 | /* Tab 179 | -------------------------- */ 180 | /* Button 181 | -------------------------- */ 182 | /* cascader 183 | -------------------------- */ 184 | /* Switch 185 | -------------------------- */ 186 | /* Dialog 187 | -------------------------- */ 188 | /* Table 189 | -------------------------- */ 190 | /* Pagination 191 | -------------------------- */ 192 | /* Popover 193 | -------------------------- */ 194 | /* Tooltip 195 | -------------------------- */ 196 | /* Tag 197 | -------------------------- */ 198 | /* Dropdown 199 | -------------------------- */ 200 | /* Badge 201 | -------------------------- */ 202 | /* Card 203 | --------------------------*/ 204 | /* Slider 205 | --------------------------*/ 206 | /* Steps 207 | --------------------------*/ 208 | /* Menu 209 | --------------------------*/ 210 | /* Rate 211 | --------------------------*/ 212 | /* DatePicker 213 | --------------------------*/ 214 | /* Loading 215 | --------------------------*/ 216 | /* Scrollbar 217 | --------------------------*/ 218 | /* Carousel 219 | --------------------------*/ 220 | /* Collapse 221 | --------------------------*/ 222 | } -------------------------------------------------------------------------------- /theme/checkbox-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/collapse-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/collapse.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-collapse{ 92 | border: 1px solid rgb(223, 236, 229); 93 | border-radius: 0; 94 | } 95 | 96 | .el-collapse-item{} 97 | 98 | .el-collapse-item:last-child{ 99 | margin-bottom: -1px; 100 | } 101 | 102 | .el-collapse-item.is-active > .el-collapse-item__header .el-collapse-item__header__arrow{ 103 | transform: rotate(90deg); 104 | } 105 | 106 | .el-collapse-item__header{ 107 | height: 43px; 108 | line-height: 43px; 109 | padding-left: 15px; 110 | background-color: #fff; 111 | color: rgb(72, 106, 92); 112 | cursor: pointer; 113 | border-bottom: 1px solid rgb(223, 236, 229); 114 | font-size: 13px; 115 | } 116 | 117 | .el-collapse-item__header__arrow{ 118 | margin-right: 8px; 119 | transition: transform .3s; 120 | } 121 | 122 | .el-collapse-item__wrap{ 123 | will-change: height; 124 | background-color: rgb(250, 253, 252); 125 | overflow: hidden; 126 | box-sizing: border-box; 127 | border-bottom: 1px solid rgb(223, 236, 229); 128 | } 129 | 130 | .el-collapse-item__content{ 131 | padding: 10px 15px; 132 | font-size: 13px; 133 | color: rgb(31, 61, 47); 134 | line-height: 1.769230769230769; 135 | } 136 | :root{ 137 | /* Transition 138 | -------------------------- */ 139 | /* Colors 140 | -------------------------- */ 141 | /* Link 142 | -------------------------- */ 143 | /* Border 144 | -------------------------- */ 145 | /* Box-shadow 146 | -------------------------- */ 147 | /* Fill 148 | -------------------------- */ 149 | /* Font 150 | -------------------------- */ 151 | /* Size 152 | -------------------------- */ 153 | /* z-index 154 | -------------------------- */ 155 | /* Disable base 156 | -------------------------- */ 157 | /* Icon 158 | -------------------------- */ 159 | /* Checkbox 160 | -------------------------- */ 161 | /* Radio 162 | -------------------------- */ 163 | /* Select 164 | -------------------------- */ 165 | /* Alert 166 | -------------------------- */ 167 | /* Message Box 168 | -------------------------- */ 169 | /* Message 170 | -------------------------- */ 171 | /* Notification 172 | -------------------------- */ 173 | /* Input 174 | -------------------------- */ 175 | /* Cascader 176 | -------------------------- */ 177 | /* Group 178 | -------------------------- */ 179 | /* Tab 180 | -------------------------- */ 181 | /* Button 182 | -------------------------- */ 183 | /* cascader 184 | -------------------------- */ 185 | /* Switch 186 | -------------------------- */ 187 | /* Dialog 188 | -------------------------- */ 189 | /* Table 190 | -------------------------- */ 191 | /* Pagination 192 | -------------------------- */ 193 | /* Popover 194 | -------------------------- */ 195 | /* Tooltip 196 | -------------------------- */ 197 | /* Tag 198 | -------------------------- */ 199 | /* Dropdown 200 | -------------------------- */ 201 | /* Badge 202 | -------------------------- */ 203 | /* Card 204 | --------------------------*/ 205 | /* Slider 206 | --------------------------*/ 207 | /* Steps 208 | --------------------------*/ 209 | /* Menu 210 | --------------------------*/ 211 | /* Rate 212 | --------------------------*/ 213 | /* DatePicker 214 | --------------------------*/ 215 | /* Loading 216 | --------------------------*/ 217 | /* Scrollbar 218 | --------------------------*/ 219 | /* Carousel 220 | --------------------------*/ 221 | /* Collapse 222 | --------------------------*/ 223 | } -------------------------------------------------------------------------------- /theme/dropdown-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/dropdown-menu.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/element-variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | 3 | /* Transition 4 | -------------------------- */ 5 | 6 | /* Colors 7 | -------------------------- */ 8 | 9 | /* Link 10 | -------------------------- */ 11 | 12 | /* Border 13 | -------------------------- */ 14 | 15 | /* Box-shadow 16 | -------------------------- */ 17 | 18 | /* Fill 19 | -------------------------- */ 20 | 21 | /* Font 22 | -------------------------- */ 23 | 24 | /* Size 25 | -------------------------- */ 26 | 27 | /* z-index 28 | -------------------------- */ 29 | 30 | /* Disable base 31 | -------------------------- */ 32 | 33 | /* Icon 34 | -------------------------- */ 35 | 36 | /* Checkbox 37 | -------------------------- */ 38 | 39 | /* Radio 40 | -------------------------- */ 41 | 42 | /* Select 43 | -------------------------- */ 44 | 45 | /* Alert 46 | -------------------------- */ 47 | 48 | /* Message Box 49 | -------------------------- */ 50 | 51 | /* Message 52 | -------------------------- */ 53 | 54 | /* Notification 55 | -------------------------- */ 56 | 57 | /* Input 58 | -------------------------- */ 59 | 60 | /* Cascader 61 | -------------------------- */ 62 | 63 | /* Group 64 | -------------------------- */ 65 | 66 | /* Tab 67 | -------------------------- */ 68 | 69 | /* Button 70 | -------------------------- */ 71 | 72 | 73 | /* cascader 74 | -------------------------- */ 75 | 76 | /* Switch 77 | -------------------------- */ 78 | 79 | /* Dialog 80 | -------------------------- */ 81 | 82 | /* Table 83 | -------------------------- */ 84 | 85 | /* Pagination 86 | -------------------------- */ 87 | 88 | /* Popover 89 | -------------------------- */ 90 | 91 | /* Tooltip 92 | -------------------------- */ 93 | 94 | /* Tag 95 | -------------------------- */ 96 | 97 | /* Dropdown 98 | -------------------------- */ 99 | 100 | /* Badge 101 | -------------------------- */ 102 | 103 | /* Card 104 | --------------------------*/ 105 | 106 | /* Slider 107 | --------------------------*/ 108 | 109 | /* Steps 110 | --------------------------*/ 111 | 112 | /* Menu 113 | --------------------------*/ 114 | 115 | /* Rate 116 | --------------------------*/ 117 | 118 | /* DatePicker 119 | --------------------------*/ 120 | 121 | /* Loading 122 | --------------------------*/ 123 | 124 | /* Scrollbar 125 | --------------------------*/ 126 | 127 | /* Carousel 128 | --------------------------*/ 129 | 130 | /* Collapse 131 | --------------------------*/ 132 | } 133 | -------------------------------------------------------------------------------- /theme/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alecyrus/SpringX/4b76d5641770d32f42410e041b9a344070f43e8b/theme/fonts/element-icons.ttf -------------------------------------------------------------------------------- /theme/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alecyrus/SpringX/4b76d5641770d32f42410e041b9a344070f43e8b/theme/fonts/element-icons.woff -------------------------------------------------------------------------------- /theme/form-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/icon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'element-icons'; 3 | src: url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */ 4 | url('fonts/element-icons.ttf?t=1472440741') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 5 | font-weight: 400; 6 | font-style: normal; 7 | } 8 | 9 | [class^="el-icon-"], [class*=" el-icon-"] { 10 | /* use !important to prevent issues with browser extensions that change fonts */ 11 | font-family: 'element-icons' !important; 12 | speak: none; 13 | font-style: normal; 14 | font-weight: 400; 15 | font-variant: normal; 16 | text-transform: none; 17 | line-height: 1; 18 | vertical-align: baseline; 19 | display: inline-block; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .el-icon-arrow-down:before { content: "\e600"; } 27 | .el-icon-arrow-left:before { content: "\e601"; } 28 | .el-icon-arrow-right:before { content: "\e602"; } 29 | .el-icon-arrow-up:before { content: "\e603"; } 30 | .el-icon-caret-bottom:before { content: "\e604"; } 31 | .el-icon-caret-left:before { content: "\e605"; } 32 | .el-icon-caret-right:before { content: "\e606"; } 33 | .el-icon-caret-top:before { content: "\e607"; } 34 | .el-icon-check:before { content: "\e608"; } 35 | .el-icon-circle-check:before { content: "\e609"; } 36 | .el-icon-circle-close:before { content: "\e60a"; } 37 | .el-icon-circle-cross:before { content: "\e60b"; } 38 | .el-icon-close:before { content: "\e60c"; } 39 | .el-icon-upload:before { content: "\e60d"; } 40 | .el-icon-d-arrow-left:before { content: "\e60e"; } 41 | .el-icon-d-arrow-right:before { content: "\e60f"; } 42 | .el-icon-d-caret:before { content: "\e610"; } 43 | .el-icon-date:before { content: "\e611"; } 44 | .el-icon-delete:before { content: "\e612"; } 45 | .el-icon-document:before { content: "\e613"; } 46 | .el-icon-edit:before { content: "\e614"; } 47 | .el-icon-information:before { content: "\e615"; } 48 | .el-icon-loading:before { content: "\e616"; } 49 | .el-icon-menu:before { content: "\e617"; } 50 | .el-icon-message:before { content: "\e618"; } 51 | .el-icon-minus:before { content: "\e619"; } 52 | .el-icon-more:before { content: "\e61a"; } 53 | .el-icon-picture:before { content: "\e61b"; } 54 | .el-icon-plus:before { content: "\e61c"; } 55 | .el-icon-search:before { content: "\e61d"; } 56 | .el-icon-setting:before { content: "\e61e"; } 57 | .el-icon-share:before { content: "\e61f"; } 58 | .el-icon-star-off:before { content: "\e620"; } 59 | .el-icon-star-on:before { content: "\e621"; } 60 | .el-icon-time:before { content: "\e622"; } 61 | .el-icon-warning:before { content: "\e623"; } 62 | .el-icon-delete2:before { content: "\e624"; } 63 | .el-icon-upload2:before { content: "\e627"; } 64 | .el-icon-view:before { content: "\e626"; } 65 | 66 | .el-icon-loading { 67 | animation: rotating 1s linear infinite; 68 | } 69 | 70 | .el-icon--right { 71 | margin-left: 5px; 72 | } 73 | .el-icon--left { 74 | margin-right: 5px; 75 | } 76 | 77 | @keyframes rotating { 78 | 0% { 79 | transform: rotateZ(0deg); 80 | } 81 | 100% { 82 | transform: rotateZ(360deg); 83 | } 84 | } 85 | :root { /* Transition 86 | -------------------------- */ /* Colors 87 | -------------------------- */ /* Link 88 | -------------------------- */ /* Border 89 | -------------------------- */ /* Box-shadow 90 | -------------------------- */ /* Fill 91 | -------------------------- */ /* Font 92 | -------------------------- */ /* Size 93 | -------------------------- */ /* z-index 94 | -------------------------- */ /* Disable base 95 | -------------------------- */ /* Icon 96 | -------------------------- */ /* Checkbox 97 | -------------------------- */ /* Radio 98 | -------------------------- */ /* Select 99 | -------------------------- */ /* Alert 100 | -------------------------- */ /* Message Box 101 | -------------------------- */ /* Message 102 | -------------------------- */ /* Notification 103 | -------------------------- */ /* Input 104 | -------------------------- */ /* Cascader 105 | -------------------------- */ /* Group 106 | -------------------------- */ /* Tab 107 | -------------------------- */ /* Button 108 | -------------------------- */ /* cascader 109 | -------------------------- */ /* Switch 110 | -------------------------- */ /* Dialog 111 | -------------------------- */ /* Table 112 | -------------------------- */ /* Pagination 113 | -------------------------- */ /* Popover 114 | -------------------------- */ /* Tooltip 115 | -------------------------- */ /* Tag 116 | -------------------------- */ /* Dropdown 117 | -------------------------- */ /* Badge 118 | -------------------------- */ /* Card 119 | --------------------------*/ /* Slider 120 | --------------------------*/ /* Steps 121 | --------------------------*/ /* Menu 122 | --------------------------*/ /* Rate 123 | --------------------------*/ /* DatePicker 124 | --------------------------*/ /* Loading 125 | --------------------------*/ /* Scrollbar 126 | --------------------------*/ /* Carousel 127 | --------------------------*/ /* Collapse 128 | --------------------------*/ 129 | } -------------------------------------------------------------------------------- /theme/loading.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-loading-mask{ 92 | position: absolute; 93 | z-index: 10000; 94 | background-color: rgba(255, 255, 255, .9); 95 | margin: 0; 96 | top: 0; 97 | right: 0; 98 | bottom: 0; 99 | left: 0; 100 | transition: opacity 0.3s; 101 | } 102 | 103 | .el-loading-mask.is-fullscreen{ 104 | position: fixed; 105 | } 106 | 107 | .el-loading-mask.is-fullscreen .el-loading-spinner{ 108 | margin-top: -25px; 109 | } 110 | 111 | .el-loading-mask.is-fullscreen .el-loading-spinner .circular{ 112 | width: 50px; 113 | height: 50px; 114 | } 115 | 116 | .el-loading-spinner{ 117 | top: 50%; 118 | margin-top: -21px; 119 | width: 100%; 120 | text-align: center; 121 | position: absolute; 122 | } 123 | 124 | .el-loading-spinner .el-loading-text{ 125 | color: #00B050; 126 | margin: 3px 0; 127 | font-size: 14px; 128 | } 129 | 130 | .el-loading-spinner .circular{ 131 | width: 42px; 132 | height: 42px; 133 | animation: loading-rotate 2s linear infinite; 134 | } 135 | 136 | .el-loading-spinner .path{ 137 | animation: loading-dash 1.5s ease-in-out infinite; 138 | stroke-dasharray: 90, 150; 139 | stroke-dashoffset: 0; 140 | stroke-width: 2; 141 | stroke: #00B050; 142 | stroke-linecap: round; 143 | } 144 | 145 | .el-loading-fade-enter, .el-loading-fade-leave-active { 146 | opacity: 0; 147 | } 148 | 149 | @keyframes loading-rotate { 150 | 100% { 151 | transform: rotate(360deg); 152 | } 153 | } 154 | 155 | @keyframes loading-dash { 156 | 0% { 157 | stroke-dasharray: 1, 200; 158 | stroke-dashoffset: 0; 159 | } 160 | 50% { 161 | stroke-dasharray: 90, 150; 162 | stroke-dashoffset: -40px; 163 | } 164 | 100% { 165 | stroke-dasharray: 90, 150; 166 | stroke-dashoffset: -120px; 167 | } 168 | } 169 | :root{ 170 | /* Transition 171 | -------------------------- */ 172 | /* Colors 173 | -------------------------- */ 174 | /* Link 175 | -------------------------- */ 176 | /* Border 177 | -------------------------- */ 178 | /* Box-shadow 179 | -------------------------- */ 180 | /* Fill 181 | -------------------------- */ 182 | /* Font 183 | -------------------------- */ 184 | /* Size 185 | -------------------------- */ 186 | /* z-index 187 | -------------------------- */ 188 | /* Disable base 189 | -------------------------- */ 190 | /* Icon 191 | -------------------------- */ 192 | /* Checkbox 193 | -------------------------- */ 194 | /* Radio 195 | -------------------------- */ 196 | /* Select 197 | -------------------------- */ 198 | /* Alert 199 | -------------------------- */ 200 | /* Message Box 201 | -------------------------- */ 202 | /* Message 203 | -------------------------- */ 204 | /* Notification 205 | -------------------------- */ 206 | /* Input 207 | -------------------------- */ 208 | /* Cascader 209 | -------------------------- */ 210 | /* Group 211 | -------------------------- */ 212 | /* Tab 213 | -------------------------- */ 214 | /* Button 215 | -------------------------- */ 216 | /* cascader 217 | -------------------------- */ 218 | /* Switch 219 | -------------------------- */ 220 | /* Dialog 221 | -------------------------- */ 222 | /* Table 223 | -------------------------- */ 224 | /* Pagination 225 | -------------------------- */ 226 | /* Popover 227 | -------------------------- */ 228 | /* Tooltip 229 | -------------------------- */ 230 | /* Tag 231 | -------------------------- */ 232 | /* Dropdown 233 | -------------------------- */ 234 | /* Badge 235 | -------------------------- */ 236 | /* Card 237 | --------------------------*/ 238 | /* Slider 239 | --------------------------*/ 240 | /* Steps 241 | --------------------------*/ 242 | /* Menu 243 | --------------------------*/ 244 | /* Rate 245 | --------------------------*/ 246 | /* DatePicker 247 | --------------------------*/ 248 | /* Loading 249 | --------------------------*/ 250 | /* Scrollbar 251 | --------------------------*/ 252 | /* Carousel 253 | --------------------------*/ 254 | /* Collapse 255 | --------------------------*/ 256 | } -------------------------------------------------------------------------------- /theme/menu-item-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/menu-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/message.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-message{ 92 | box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); 93 | min-width: 300px; 94 | padding: 10px 12px; 95 | box-sizing: border-box; 96 | border-radius: 2px; 97 | position: fixed; 98 | left: 50%; 99 | top: 20px; 100 | transform: translateX(-50%); 101 | background-color: #fff; 102 | transition: opacity 0.3s, transform .4s; 103 | overflow: hidden; 104 | } 105 | 106 | .el-message .el-icon-circle-check{ 107 | color: #13ce66; 108 | } 109 | 110 | .el-message .el-icon-circle-cross{ 111 | color: #ff4949; 112 | } 113 | 114 | .el-message .el-icon-information{ 115 | color: #50bfff; 116 | } 117 | 118 | .el-message .el-icon-warning{ 119 | color: #f7ba2a; 120 | } 121 | 122 | .el-message__group{ 123 | margin-left: 38px; 124 | position: relative; 125 | height: 20px; 126 | line-height: 20px; 127 | } 128 | 129 | .el-message__group p{ 130 | font-size: 14px; 131 | margin: 0 34px 0 0; 132 | white-space: nowrap; 133 | color: rgb(131, 165, 151); 134 | text-align: justify; 135 | } 136 | 137 | .el-message__group.is-with-icon{ 138 | margin-left: 0; 139 | } 140 | 141 | .el-message__img{ 142 | width: 40px; 143 | height: 40px; 144 | position: absolute; 145 | left: 0; 146 | top: 0; 147 | } 148 | 149 | .el-message__icon{ 150 | vertical-align: middle; 151 | margin-right: 8px; 152 | } 153 | 154 | .el-message__closeBtn{ 155 | top: 3px; 156 | right: 0; 157 | position: absolute; 158 | cursor: pointer; 159 | color: rgb(191, 217, 205); 160 | font-size: 14px; 161 | } 162 | 163 | .el-message__closeBtn:hover{ 164 | color: rgb(151, 190, 174); 165 | } 166 | 167 | .el-message-fade-enter, .el-message-fade-leave-active { 168 | opacity: 0; 169 | transform: translate(-50%, -100%); 170 | } 171 | :root{ 172 | /* Transition 173 | -------------------------- */ 174 | /* Colors 175 | -------------------------- */ 176 | /* Link 177 | -------------------------- */ 178 | /* Border 179 | -------------------------- */ 180 | /* Box-shadow 181 | -------------------------- */ 182 | /* Fill 183 | -------------------------- */ 184 | /* Font 185 | -------------------------- */ 186 | /* Size 187 | -------------------------- */ 188 | /* z-index 189 | -------------------------- */ 190 | /* Disable base 191 | -------------------------- */ 192 | /* Icon 193 | -------------------------- */ 194 | /* Checkbox 195 | -------------------------- */ 196 | /* Radio 197 | -------------------------- */ 198 | /* Select 199 | -------------------------- */ 200 | /* Alert 201 | -------------------------- */ 202 | /* Message Box 203 | -------------------------- */ 204 | /* Message 205 | -------------------------- */ 206 | /* Notification 207 | -------------------------- */ 208 | /* Input 209 | -------------------------- */ 210 | /* Cascader 211 | -------------------------- */ 212 | /* Group 213 | -------------------------- */ 214 | /* Tab 215 | -------------------------- */ 216 | /* Button 217 | -------------------------- */ 218 | /* cascader 219 | -------------------------- */ 220 | /* Switch 221 | -------------------------- */ 222 | /* Dialog 223 | -------------------------- */ 224 | /* Table 225 | -------------------------- */ 226 | /* Pagination 227 | -------------------------- */ 228 | /* Popover 229 | -------------------------- */ 230 | /* Tooltip 231 | -------------------------- */ 232 | /* Tag 233 | -------------------------- */ 234 | /* Dropdown 235 | -------------------------- */ 236 | /* Badge 237 | -------------------------- */ 238 | /* Card 239 | --------------------------*/ 240 | /* Slider 241 | --------------------------*/ 242 | /* Steps 243 | --------------------------*/ 244 | /* Menu 245 | --------------------------*/ 246 | /* Rate 247 | --------------------------*/ 248 | /* DatePicker 249 | --------------------------*/ 250 | /* Loading 251 | --------------------------*/ 252 | /* Scrollbar 253 | --------------------------*/ 254 | /* Carousel 255 | --------------------------*/ 256 | /* Collapse 257 | --------------------------*/ 258 | } -------------------------------------------------------------------------------- /theme/notification.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-notification{ 92 | width: 330px; 93 | padding: 20px; 94 | box-sizing: border-box; 95 | border-radius: 2px; 96 | position: fixed; 97 | right: 16px; 98 | background-color: #fff; 99 | box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); 100 | transition: opacity 0.3s, transform .3s, right .3s, top 0.4s; 101 | overflow: hidden; 102 | } 103 | 104 | .el-notification .el-icon-circle-check{ 105 | color: #13ce66; 106 | } 107 | 108 | .el-notification .el-icon-circle-cross{ 109 | color: #ff4949; 110 | } 111 | 112 | .el-notification .el-icon-information{ 113 | color: #50bfff; 114 | } 115 | 116 | .el-notification .el-icon-warning{ 117 | color: #f7ba2a; 118 | } 119 | 120 | .el-notification__group{ 121 | margin-left: 0; 122 | } 123 | 124 | .el-notification__group.is-with-icon{ 125 | margin-left: 55px; 126 | } 127 | 128 | .el-notification__title{ 129 | font-weight: 400; 130 | font-size: 16px; 131 | color: rgb(31, 61, 47); 132 | margin: 0; 133 | } 134 | 135 | .el-notification__content{ 136 | font-size: 14px; 137 | line-height: 21px; 138 | margin: 10px 0 0 0; 139 | color: rgb(131, 165, 151); 140 | text-align: justify; 141 | } 142 | 143 | .el-notification__icon{ 144 | width: 40px; 145 | height: 40px; 146 | font-size: 40px; 147 | float: left; 148 | position: relative; 149 | top: 3px; 150 | } 151 | 152 | .el-notification__closeBtn{ 153 | top: 20px; 154 | right: 20px; 155 | position: absolute; 156 | cursor: pointer; 157 | color: rgb(191, 217, 205); 158 | font-size: 14px; 159 | } 160 | 161 | .el-notification__closeBtn:hover{ 162 | color: rgb(151, 190, 174); 163 | } 164 | 165 | .el-notification-fade-enter { 166 | transform: translateX(100%); 167 | right: 0; 168 | } 169 | 170 | .el-notification-fade-leave-active { 171 | opacity: 0; 172 | } 173 | :root{ 174 | /* Transition 175 | -------------------------- */ 176 | /* Colors 177 | -------------------------- */ 178 | /* Link 179 | -------------------------- */ 180 | /* Border 181 | -------------------------- */ 182 | /* Box-shadow 183 | -------------------------- */ 184 | /* Fill 185 | -------------------------- */ 186 | /* Font 187 | -------------------------- */ 188 | /* Size 189 | -------------------------- */ 190 | /* z-index 191 | -------------------------- */ 192 | /* Disable base 193 | -------------------------- */ 194 | /* Icon 195 | -------------------------- */ 196 | /* Checkbox 197 | -------------------------- */ 198 | /* Radio 199 | -------------------------- */ 200 | /* Select 201 | -------------------------- */ 202 | /* Alert 203 | -------------------------- */ 204 | /* Message Box 205 | -------------------------- */ 206 | /* Message 207 | -------------------------- */ 208 | /* Notification 209 | -------------------------- */ 210 | /* Input 211 | -------------------------- */ 212 | /* Cascader 213 | -------------------------- */ 214 | /* Group 215 | -------------------------- */ 216 | /* Tab 217 | -------------------------- */ 218 | /* Button 219 | -------------------------- */ 220 | /* cascader 221 | -------------------------- */ 222 | /* Switch 223 | -------------------------- */ 224 | /* Dialog 225 | -------------------------- */ 226 | /* Table 227 | -------------------------- */ 228 | /* Pagination 229 | -------------------------- */ 230 | /* Popover 231 | -------------------------- */ 232 | /* Tooltip 233 | -------------------------- */ 234 | /* Tag 235 | -------------------------- */ 236 | /* Dropdown 237 | -------------------------- */ 238 | /* Badge 239 | -------------------------- */ 240 | /* Card 241 | --------------------------*/ 242 | /* Slider 243 | --------------------------*/ 244 | /* Steps 245 | --------------------------*/ 246 | /* Menu 247 | --------------------------*/ 248 | /* Rate 249 | --------------------------*/ 250 | /* DatePicker 251 | --------------------------*/ 252 | /* Loading 253 | --------------------------*/ 254 | /* Scrollbar 255 | --------------------------*/ 256 | /* Carousel 257 | --------------------------*/ 258 | /* Collapse 259 | --------------------------*/ 260 | } -------------------------------------------------------------------------------- /theme/option-group.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-select-group{ 92 | margin: 0; 93 | padding: 0 94 | } 95 | 96 | .el-select-group .el-select-dropdown__item{ 97 | padding-left: 20px 98 | } 99 | 100 | .el-select-group__wrap{ 101 | list-style: none; 102 | margin: 0; 103 | padding: 0 104 | } 105 | 106 | .el-select-group__title{ 107 | padding-left: 10px; 108 | font-size: 12px; 109 | color: #999; 110 | height: 30px; 111 | line-height: 30px 112 | } 113 | :root{ 114 | /* Transition 115 | -------------------------- */ 116 | /* Colors 117 | -------------------------- */ 118 | /* Link 119 | -------------------------- */ 120 | /* Border 121 | -------------------------- */ 122 | /* Box-shadow 123 | -------------------------- */ 124 | /* Fill 125 | -------------------------- */ 126 | /* Font 127 | -------------------------- */ 128 | /* Size 129 | -------------------------- */ 130 | /* z-index 131 | -------------------------- */ 132 | /* Disable base 133 | -------------------------- */ 134 | /* Icon 135 | -------------------------- */ 136 | /* Checkbox 137 | -------------------------- */ 138 | /* Radio 139 | -------------------------- */ 140 | /* Select 141 | -------------------------- */ 142 | /* Alert 143 | -------------------------- */ 144 | /* Message Box 145 | -------------------------- */ 146 | /* Message 147 | -------------------------- */ 148 | /* Notification 149 | -------------------------- */ 150 | /* Input 151 | -------------------------- */ 152 | /* Cascader 153 | -------------------------- */ 154 | /* Group 155 | -------------------------- */ 156 | /* Tab 157 | -------------------------- */ 158 | /* Button 159 | -------------------------- */ 160 | /* cascader 161 | -------------------------- */ 162 | /* Switch 163 | -------------------------- */ 164 | /* Dialog 165 | -------------------------- */ 166 | /* Table 167 | -------------------------- */ 168 | /* Pagination 169 | -------------------------- */ 170 | /* Popover 171 | -------------------------- */ 172 | /* Tooltip 173 | -------------------------- */ 174 | /* Tag 175 | -------------------------- */ 176 | /* Dropdown 177 | -------------------------- */ 178 | /* Badge 179 | -------------------------- */ 180 | /* Card 181 | --------------------------*/ 182 | /* Slider 183 | --------------------------*/ 184 | /* Steps 185 | --------------------------*/ 186 | /* Menu 187 | --------------------------*/ 188 | /* Rate 189 | --------------------------*/ 190 | /* DatePicker 191 | --------------------------*/ 192 | /* Loading 193 | --------------------------*/ 194 | /* Scrollbar 195 | --------------------------*/ 196 | /* Carousel 197 | --------------------------*/ 198 | /* Collapse 199 | --------------------------*/ 200 | } -------------------------------------------------------------------------------- /theme/option.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-select-dropdown{} 92 | 93 | .el-select-dropdown__item{ 94 | font-size: 14px; 95 | padding: 8px 10px; 96 | position: relative; 97 | white-space: nowrap; 98 | overflow: hidden; 99 | text-overflow: ellipsis; 100 | color: rgb(72, 106, 92); 101 | height: 36px; 102 | line-height: 1.5; 103 | box-sizing: border-box; 104 | cursor: pointer 105 | } 106 | 107 | .el-select-dropdown__item.hover{ 108 | background-color: rgb(228, 241, 237) 109 | } 110 | 111 | .el-select-dropdown__item.selected{ 112 | color: #fff; 113 | background-color: #00B050 114 | } 115 | 116 | .el-select-dropdown__item.selected.hover{ 117 | background-color: rgb(0, 155, 70) 118 | } 119 | 120 | .el-select-dropdown__item span{ 121 | line-height: 1.5 !important 122 | } 123 | 124 | .el-select-dropdown__item.is-disabled{ 125 | color: rgb(191, 217, 205); 126 | cursor: not-allowed 127 | } 128 | 129 | .el-select-dropdown__item.is-disabled:hover{ 130 | background-color: #fff 131 | } 132 | :root{ 133 | /* Transition 134 | -------------------------- */ 135 | /* Colors 136 | -------------------------- */ 137 | /* Link 138 | -------------------------- */ 139 | /* Border 140 | -------------------------- */ 141 | /* Box-shadow 142 | -------------------------- */ 143 | /* Fill 144 | -------------------------- */ 145 | /* Font 146 | -------------------------- */ 147 | /* Size 148 | -------------------------- */ 149 | /* z-index 150 | -------------------------- */ 151 | /* Disable base 152 | -------------------------- */ 153 | /* Icon 154 | -------------------------- */ 155 | /* Checkbox 156 | -------------------------- */ 157 | /* Radio 158 | -------------------------- */ 159 | /* Select 160 | -------------------------- */ 161 | /* Alert 162 | -------------------------- */ 163 | /* Message Box 164 | -------------------------- */ 165 | /* Message 166 | -------------------------- */ 167 | /* Notification 168 | -------------------------- */ 169 | /* Input 170 | -------------------------- */ 171 | /* Cascader 172 | -------------------------- */ 173 | /* Group 174 | -------------------------- */ 175 | /* Tab 176 | -------------------------- */ 177 | /* Button 178 | -------------------------- */ 179 | /* cascader 180 | -------------------------- */ 181 | /* Switch 182 | -------------------------- */ 183 | /* Dialog 184 | -------------------------- */ 185 | /* Table 186 | -------------------------- */ 187 | /* Pagination 188 | -------------------------- */ 189 | /* Popover 190 | -------------------------- */ 191 | /* Tooltip 192 | -------------------------- */ 193 | /* Tag 194 | -------------------------- */ 195 | /* Dropdown 196 | -------------------------- */ 197 | /* Badge 198 | -------------------------- */ 199 | /* Card 200 | --------------------------*/ 201 | /* Slider 202 | --------------------------*/ 203 | /* Steps 204 | --------------------------*/ 205 | /* Menu 206 | --------------------------*/ 207 | /* Rate 208 | --------------------------*/ 209 | /* DatePicker 210 | --------------------------*/ 211 | /* Loading 212 | --------------------------*/ 213 | /* Scrollbar 214 | --------------------------*/ 215 | /* Carousel 216 | --------------------------*/ 217 | /* Collapse 218 | --------------------------*/ 219 | } -------------------------------------------------------------------------------- /theme/progress.css: -------------------------------------------------------------------------------- 1 | .el-progress-bar__inner:after{ 2 | display:inline-block; 3 | content:""; 4 | height:100%; 5 | vertical-align:middle; 6 | }@charset "UTF-8"; 7 | :root{ 8 | /* Transition 9 | -------------------------- */ 10 | /* Colors 11 | -------------------------- */ 12 | /* Link 13 | -------------------------- */ 14 | /* Border 15 | -------------------------- */ 16 | /* Box-shadow 17 | -------------------------- */ 18 | /* Fill 19 | -------------------------- */ 20 | /* Font 21 | -------------------------- */ 22 | /* Size 23 | -------------------------- */ 24 | /* z-index 25 | -------------------------- */ 26 | /* Disable base 27 | -------------------------- */ 28 | /* Icon 29 | -------------------------- */ 30 | /* Checkbox 31 | -------------------------- */ 32 | /* Radio 33 | -------------------------- */ 34 | /* Select 35 | -------------------------- */ 36 | /* Alert 37 | -------------------------- */ 38 | /* Message Box 39 | -------------------------- */ 40 | /* Message 41 | -------------------------- */ 42 | /* Notification 43 | -------------------------- */ 44 | /* Input 45 | -------------------------- */ 46 | /* Cascader 47 | -------------------------- */ 48 | /* Group 49 | -------------------------- */ 50 | /* Tab 51 | -------------------------- */ 52 | /* Button 53 | -------------------------- */ 54 | /* cascader 55 | -------------------------- */ 56 | /* Switch 57 | -------------------------- */ 58 | /* Dialog 59 | -------------------------- */ 60 | /* Table 61 | -------------------------- */ 62 | /* Pagination 63 | -------------------------- */ 64 | /* Popover 65 | -------------------------- */ 66 | /* Tooltip 67 | -------------------------- */ 68 | /* Tag 69 | -------------------------- */ 70 | /* Dropdown 71 | -------------------------- */ 72 | /* Badge 73 | -------------------------- */ 74 | /* Card 75 | --------------------------*/ 76 | /* Slider 77 | --------------------------*/ 78 | /* Steps 79 | --------------------------*/ 80 | /* Menu 81 | --------------------------*/ 82 | /* Rate 83 | --------------------------*/ 84 | /* DatePicker 85 | --------------------------*/ 86 | /* Loading 87 | --------------------------*/ 88 | /* Scrollbar 89 | --------------------------*/ 90 | /* Carousel 91 | --------------------------*/ 92 | /* Collapse 93 | --------------------------*/ 94 | } 95 | 96 | .el-progress{ 97 | position:relative; 98 | line-height:1; 99 | } 100 | 101 | .el-progress.is-exception .el-progress-bar__inner{ 102 | background-color:#ff4949; 103 | } 104 | 105 | .el-progress.is-exception .el-progress__text{ 106 | color:#ff4949; 107 | } 108 | 109 | .el-progress.is-success .el-progress-bar__inner{ 110 | background-color:#13ce66; 111 | } 112 | 113 | .el-progress.is-success .el-progress__text{ 114 | color:#13ce66; 115 | } 116 | 117 | .el-progress__text{ 118 | font-size:14px; 119 | color:rgb(72, 106, 92); 120 | display: inline-block; 121 | vertical-align: middle; 122 | margin-left: 10px; 123 | line-height: 1; 124 | } 125 | 126 | .el-progress__text i { 127 | vertical-align: middle; 128 | display: block; 129 | } 130 | 131 | .el-progress--circle{ 132 | display: inline-block; 133 | } 134 | 135 | .el-progress--circle .el-progress__text { 136 | position: absolute; 137 | top: 50%; 138 | left: 0; 139 | width: 100%; 140 | text-align: center; 141 | margin: 0; 142 | transform: translate(0, -50%); 143 | } 144 | 145 | .el-progress--circle .el-progress__text i { 146 | vertical-align: middle; 147 | display: inline-block; 148 | } 149 | 150 | .el-progress--without-text .el-progress__text { 151 | display: none; 152 | } 153 | 154 | .el-progress--without-text .el-progress-bar { 155 | padding-right: 0; 156 | margin-right: 0; 157 | display: block; 158 | } 159 | 160 | .el-progress--text-inside .el-progress-bar { 161 | padding-right: 0; 162 | margin-right: 0; 163 | } 164 | 165 | .el-progress-bar{ 166 | padding-right:50px; 167 | display:inline-block; 168 | vertical-align:middle; 169 | width:100%; 170 | margin-right:-55px; 171 | box-sizing:border-box; 172 | } 173 | 174 | .el-progress-bar__outer{ 175 | height: 6px; 176 | border-radius: 100px; 177 | background-color:rgb(228, 241, 237); 178 | overflow: hidden; 179 | position: relative; 180 | vertical-align: middle; 181 | } 182 | 183 | .el-progress-bar__inner{ 184 | position: absolute; 185 | left: 0; 186 | top: 0; 187 | height: 100%; 188 | border-radius: 2px 0 0 2px; 189 | background-color:#00B050; 190 | text-align: right; 191 | border-radius: 100px; 192 | line-height: 1; 193 | } 194 | 195 | .el-progress-bar__innerText{ 196 | display: inline-block; 197 | vertical-align: middle; 198 | color:#fff; 199 | font-size: 12px; 200 | margin: 0 5px; 201 | } 202 | 203 | @keyframes progress { 204 | 0% { 205 | background-position: 0 0; 206 | } 207 | 100% { 208 | background-position: 32px 0; 209 | } 210 | } 211 | :root{ 212 | /* Transition 213 | -------------------------- */ 214 | /* Colors 215 | -------------------------- */ 216 | /* Link 217 | -------------------------- */ 218 | /* Border 219 | -------------------------- */ 220 | /* Box-shadow 221 | -------------------------- */ 222 | /* Fill 223 | -------------------------- */ 224 | /* Font 225 | -------------------------- */ 226 | /* Size 227 | -------------------------- */ 228 | /* z-index 229 | -------------------------- */ 230 | /* Disable base 231 | -------------------------- */ 232 | /* Icon 233 | -------------------------- */ 234 | /* Checkbox 235 | -------------------------- */ 236 | /* Radio 237 | -------------------------- */ 238 | /* Select 239 | -------------------------- */ 240 | /* Alert 241 | -------------------------- */ 242 | /* Message Box 243 | -------------------------- */ 244 | /* Message 245 | -------------------------- */ 246 | /* Notification 247 | -------------------------- */ 248 | /* Input 249 | -------------------------- */ 250 | /* Cascader 251 | -------------------------- */ 252 | /* Group 253 | -------------------------- */ 254 | /* Tab 255 | -------------------------- */ 256 | /* Button 257 | -------------------------- */ 258 | /* cascader 259 | -------------------------- */ 260 | /* Switch 261 | -------------------------- */ 262 | /* Dialog 263 | -------------------------- */ 264 | /* Table 265 | -------------------------- */ 266 | /* Pagination 267 | -------------------------- */ 268 | /* Popover 269 | -------------------------- */ 270 | /* Tooltip 271 | -------------------------- */ 272 | /* Tag 273 | -------------------------- */ 274 | /* Dropdown 275 | -------------------------- */ 276 | /* Badge 277 | -------------------------- */ 278 | /* Card 279 | --------------------------*/ 280 | /* Slider 281 | --------------------------*/ 282 | /* Steps 283 | --------------------------*/ 284 | /* Menu 285 | --------------------------*/ 286 | /* Rate 287 | --------------------------*/ 288 | /* DatePicker 289 | --------------------------*/ 290 | /* Loading 291 | --------------------------*/ 292 | /* Scrollbar 293 | --------------------------*/ 294 | /* Carousel 295 | --------------------------*/ 296 | /* Collapse 297 | --------------------------*/ 298 | } -------------------------------------------------------------------------------- /theme/radio-button.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/radio-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/rate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-rate{ 92 | height: 20px; 93 | line-height: 1; 94 | } 95 | 96 | .el-rate__item{ 97 | display: inline-block; 98 | position: relative; 99 | font-size: 0; 100 | vertical-align: middle; 101 | } 102 | 103 | .el-rate__icon{ 104 | position: relative; 105 | display: inline-block; 106 | font-size: 18px; 107 | margin-right: 6px; 108 | color: rgb(191, 217, 205); 109 | transition: .3s; 110 | } 111 | 112 | .el-rate__icon .path2 { 113 | position: absolute; 114 | left: 0; 115 | top: 0; 116 | } 117 | 118 | .el-rate__icon.hover{ 119 | transform: scale(1.15); 120 | } 121 | 122 | .el-rate__decimal{ 123 | position: absolute; 124 | top: 0; 125 | left: 0; 126 | display: inline-block; 127 | overflow: hidden; 128 | } 129 | 130 | .el-rate__text{ 131 | font-size: 14px; 132 | vertical-align: middle; 133 | } 134 | :root{ 135 | /* Transition 136 | -------------------------- */ 137 | /* Colors 138 | -------------------------- */ 139 | /* Link 140 | -------------------------- */ 141 | /* Border 142 | -------------------------- */ 143 | /* Box-shadow 144 | -------------------------- */ 145 | /* Fill 146 | -------------------------- */ 147 | /* Font 148 | -------------------------- */ 149 | /* Size 150 | -------------------------- */ 151 | /* z-index 152 | -------------------------- */ 153 | /* Disable base 154 | -------------------------- */ 155 | /* Icon 156 | -------------------------- */ 157 | /* Checkbox 158 | -------------------------- */ 159 | /* Radio 160 | -------------------------- */ 161 | /* Select 162 | -------------------------- */ 163 | /* Alert 164 | -------------------------- */ 165 | /* Message Box 166 | -------------------------- */ 167 | /* Message 168 | -------------------------- */ 169 | /* Notification 170 | -------------------------- */ 171 | /* Input 172 | -------------------------- */ 173 | /* Cascader 174 | -------------------------- */ 175 | /* Group 176 | -------------------------- */ 177 | /* Tab 178 | -------------------------- */ 179 | /* Button 180 | -------------------------- */ 181 | /* cascader 182 | -------------------------- */ 183 | /* Switch 184 | -------------------------- */ 185 | /* Dialog 186 | -------------------------- */ 187 | /* Table 188 | -------------------------- */ 189 | /* Pagination 190 | -------------------------- */ 191 | /* Popover 192 | -------------------------- */ 193 | /* Tooltip 194 | -------------------------- */ 195 | /* Tag 196 | -------------------------- */ 197 | /* Dropdown 198 | -------------------------- */ 199 | /* Badge 200 | -------------------------- */ 201 | /* Card 202 | --------------------------*/ 203 | /* Slider 204 | --------------------------*/ 205 | /* Steps 206 | --------------------------*/ 207 | /* Menu 208 | --------------------------*/ 209 | /* Rate 210 | --------------------------*/ 211 | /* DatePicker 212 | --------------------------*/ 213 | /* Loading 214 | --------------------------*/ 215 | /* Scrollbar 216 | --------------------------*/ 217 | /* Carousel 218 | --------------------------*/ 219 | /* Collapse 220 | --------------------------*/ 221 | } -------------------------------------------------------------------------------- /theme/row.css: -------------------------------------------------------------------------------- 1 | .el-row:before, .el-row:after{ 2 | display: table; 3 | content: "" 4 | } 5 | .el-row:after{ 6 | clear: both 7 | }@charset "UTF-8"; 8 | :root{ 9 | /* Transition 10 | -------------------------- */ 11 | /* Colors 12 | -------------------------- */ 13 | /* Link 14 | -------------------------- */ 15 | /* Border 16 | -------------------------- */ 17 | /* Box-shadow 18 | -------------------------- */ 19 | /* Fill 20 | -------------------------- */ 21 | /* Font 22 | -------------------------- */ 23 | /* Size 24 | -------------------------- */ 25 | /* z-index 26 | -------------------------- */ 27 | /* Disable base 28 | -------------------------- */ 29 | /* Icon 30 | -------------------------- */ 31 | /* Checkbox 32 | -------------------------- */ 33 | /* Radio 34 | -------------------------- */ 35 | /* Select 36 | -------------------------- */ 37 | /* Alert 38 | -------------------------- */ 39 | /* Message Box 40 | -------------------------- */ 41 | /* Message 42 | -------------------------- */ 43 | /* Notification 44 | -------------------------- */ 45 | /* Input 46 | -------------------------- */ 47 | /* Cascader 48 | -------------------------- */ 49 | /* Group 50 | -------------------------- */ 51 | /* Tab 52 | -------------------------- */ 53 | /* Button 54 | -------------------------- */ 55 | /* cascader 56 | -------------------------- */ 57 | /* Switch 58 | -------------------------- */ 59 | /* Dialog 60 | -------------------------- */ 61 | /* Table 62 | -------------------------- */ 63 | /* Pagination 64 | -------------------------- */ 65 | /* Popover 66 | -------------------------- */ 67 | /* Tooltip 68 | -------------------------- */ 69 | /* Tag 70 | -------------------------- */ 71 | /* Dropdown 72 | -------------------------- */ 73 | /* Badge 74 | -------------------------- */ 75 | /* Card 76 | --------------------------*/ 77 | /* Slider 78 | --------------------------*/ 79 | /* Steps 80 | --------------------------*/ 81 | /* Menu 82 | --------------------------*/ 83 | /* Rate 84 | --------------------------*/ 85 | /* DatePicker 86 | --------------------------*/ 87 | /* Loading 88 | --------------------------*/ 89 | /* Scrollbar 90 | --------------------------*/ 91 | /* Carousel 92 | --------------------------*/ 93 | /* Collapse 94 | --------------------------*/ 95 | } 96 | 97 | .el-row{ 98 | position: relative; 99 | box-sizing: border-box 100 | } 101 | 102 | .el-row--flex{ 103 | display: -ms-flexbox; 104 | display: flex 105 | } 106 | 107 | .el-row--flex:before, .el-row--flex:after{ 108 | display: none 109 | } 110 | 111 | .el-row--flex.is-align-bottom{ 112 | -ms-flex-align: end; 113 | align-items: flex-end 114 | } 115 | 116 | .el-row--flex.is-align-middle{ 117 | -ms-flex-align: center; 118 | align-items: center 119 | } 120 | 121 | .el-row--flex.is-justify-space-around{ 122 | -ms-flex-pack: distribute; 123 | justify-content: space-around 124 | } 125 | 126 | .el-row--flex.is-justify-space-between{ 127 | -ms-flex-pack: justify; 128 | justify-content: space-between 129 | } 130 | 131 | .el-row--flex.is-justify-end{ 132 | -ms-flex-pack: end; 133 | justify-content: flex-end 134 | } 135 | 136 | .el-row--flex.is-justify-center{ 137 | -ms-flex-pack: center; 138 | justify-content: center 139 | } 140 | :root{ 141 | /* Transition 142 | -------------------------- */ 143 | /* Colors 144 | -------------------------- */ 145 | /* Link 146 | -------------------------- */ 147 | /* Border 148 | -------------------------- */ 149 | /* Box-shadow 150 | -------------------------- */ 151 | /* Fill 152 | -------------------------- */ 153 | /* Font 154 | -------------------------- */ 155 | /* Size 156 | -------------------------- */ 157 | /* z-index 158 | -------------------------- */ 159 | /* Disable base 160 | -------------------------- */ 161 | /* Icon 162 | -------------------------- */ 163 | /* Checkbox 164 | -------------------------- */ 165 | /* Radio 166 | -------------------------- */ 167 | /* Select 168 | -------------------------- */ 169 | /* Alert 170 | -------------------------- */ 171 | /* Message Box 172 | -------------------------- */ 173 | /* Message 174 | -------------------------- */ 175 | /* Notification 176 | -------------------------- */ 177 | /* Input 178 | -------------------------- */ 179 | /* Cascader 180 | -------------------------- */ 181 | /* Group 182 | -------------------------- */ 183 | /* Tab 184 | -------------------------- */ 185 | /* Button 186 | -------------------------- */ 187 | /* cascader 188 | -------------------------- */ 189 | /* Switch 190 | -------------------------- */ 191 | /* Dialog 192 | -------------------------- */ 193 | /* Table 194 | -------------------------- */ 195 | /* Pagination 196 | -------------------------- */ 197 | /* Popover 198 | -------------------------- */ 199 | /* Tooltip 200 | -------------------------- */ 201 | /* Tag 202 | -------------------------- */ 203 | /* Dropdown 204 | -------------------------- */ 205 | /* Badge 206 | -------------------------- */ 207 | /* Card 208 | --------------------------*/ 209 | /* Slider 210 | --------------------------*/ 211 | /* Steps 212 | --------------------------*/ 213 | /* Menu 214 | --------------------------*/ 215 | /* Rate 216 | --------------------------*/ 217 | /* DatePicker 218 | --------------------------*/ 219 | /* Loading 220 | --------------------------*/ 221 | /* Scrollbar 222 | --------------------------*/ 223 | /* Carousel 224 | --------------------------*/ 225 | /* Collapse 226 | --------------------------*/ 227 | } -------------------------------------------------------------------------------- /theme/scrollbar.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-scrollbar{ 92 | overflow: hidden; 93 | position: relative; 94 | } 95 | 96 | .el-scrollbar:hover .el-scrollbar__bar, .el-scrollbar:active .el-scrollbar__bar, .el-scrollbar:focus .el-scrollbar__bar{ 97 | opacity: 1; 98 | transition: opacity 340ms ease-out; 99 | } 100 | 101 | .el-scrollbar__wrap{ 102 | overflow: scroll; 103 | } 104 | 105 | .el-scrollbar__wrap--hidden-default{} 106 | 107 | .el-scrollbar__wrap--hidden-default::-webkit-scrollbar{ 108 | width: 0; 109 | height: 0; 110 | } 111 | 112 | .el-scrollbar__thumb{ 113 | position: relative; 114 | display: block; 115 | width: 0; 116 | height: 0; 117 | cursor: pointer; 118 | border-radius: inherit; 119 | background-color: rgba(151, 190, 174, 0.3); 120 | transition: .3s background-color; 121 | } 122 | 123 | .el-scrollbar__thumb:hover{ 124 | background-color: rgba(151, 190, 174, 0.5); 125 | } 126 | 127 | .el-scrollbar__bar{ 128 | position: absolute; 129 | right: 2px; 130 | bottom: 2px; 131 | z-index: 1; 132 | border-radius: 4px; 133 | opacity: 0; 134 | transition: opacity 120ms ease-out; 135 | } 136 | 137 | .el-scrollbar__bar.is-horizontal{ 138 | height: 6px; 139 | left: 2px; 140 | } 141 | 142 | .el-scrollbar__bar.is-horizontal > div{ 143 | height: 100%; 144 | } 145 | 146 | .el-scrollbar__bar.is-vertical{ 147 | width: 6px; 148 | top: 2px; 149 | } 150 | 151 | .el-scrollbar__bar.is-vertical > div{ 152 | width: 100%; 153 | } 154 | :root{ 155 | /* Transition 156 | -------------------------- */ 157 | /* Colors 158 | -------------------------- */ 159 | /* Link 160 | -------------------------- */ 161 | /* Border 162 | -------------------------- */ 163 | /* Box-shadow 164 | -------------------------- */ 165 | /* Fill 166 | -------------------------- */ 167 | /* Font 168 | -------------------------- */ 169 | /* Size 170 | -------------------------- */ 171 | /* z-index 172 | -------------------------- */ 173 | /* Disable base 174 | -------------------------- */ 175 | /* Icon 176 | -------------------------- */ 177 | /* Checkbox 178 | -------------------------- */ 179 | /* Radio 180 | -------------------------- */ 181 | /* Select 182 | -------------------------- */ 183 | /* Alert 184 | -------------------------- */ 185 | /* Message Box 186 | -------------------------- */ 187 | /* Message 188 | -------------------------- */ 189 | /* Notification 190 | -------------------------- */ 191 | /* Input 192 | -------------------------- */ 193 | /* Cascader 194 | -------------------------- */ 195 | /* Group 196 | -------------------------- */ 197 | /* Tab 198 | -------------------------- */ 199 | /* Button 200 | -------------------------- */ 201 | /* cascader 202 | -------------------------- */ 203 | /* Switch 204 | -------------------------- */ 205 | /* Dialog 206 | -------------------------- */ 207 | /* Table 208 | -------------------------- */ 209 | /* Pagination 210 | -------------------------- */ 211 | /* Popover 212 | -------------------------- */ 213 | /* Tooltip 214 | -------------------------- */ 215 | /* Tag 216 | -------------------------- */ 217 | /* Dropdown 218 | -------------------------- */ 219 | /* Badge 220 | -------------------------- */ 221 | /* Card 222 | --------------------------*/ 223 | /* Slider 224 | --------------------------*/ 225 | /* Steps 226 | --------------------------*/ 227 | /* Menu 228 | --------------------------*/ 229 | /* Rate 230 | --------------------------*/ 231 | /* DatePicker 232 | --------------------------*/ 233 | /* Loading 234 | --------------------------*/ 235 | /* Scrollbar 236 | --------------------------*/ 237 | /* Carousel 238 | --------------------------*/ 239 | /* Collapse 240 | --------------------------*/ 241 | } -------------------------------------------------------------------------------- /theme/select-dropdown.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-select-dropdown{ 92 | position: absolute; 93 | z-index: 1001; 94 | border: solid 1px rgb(209, 229, 220); 95 | border-radius: 2px; 96 | background-color: #fff; 97 | box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); 98 | box-sizing: border-box; 99 | margin: 5px 0; 100 | } 101 | 102 | .el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{ 103 | padding: 0; 104 | } 105 | 106 | .el-select-dropdown.is-multiple{} 107 | 108 | .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ 109 | color: #00B050; 110 | background-color: #fff; 111 | } 112 | 113 | .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{ 114 | background-color: rgb(228, 241, 237); 115 | } 116 | 117 | .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{ 118 | position: absolute; 119 | right: 10px; 120 | font-family: 'element-icons'; 121 | content: "\E608"; 122 | font-size: 11px; 123 | -webkit-font-smoothing: antialiased; 124 | -moz-osx-font-smoothing: grayscale; 125 | } 126 | 127 | .el-select-dropdown__empty{ 128 | padding: 10px 0; 129 | margin: 0; 130 | text-align: center; 131 | color: #999; 132 | font-size: 14px; 133 | } 134 | 135 | .el-select-dropdown__wrap{ 136 | max-height: 274px; 137 | } 138 | 139 | .el-select-dropdown__list{ 140 | list-style: none; 141 | padding: 6px 0; 142 | margin: 0; 143 | box-sizing: border-box; 144 | } 145 | :root{ 146 | /* Transition 147 | -------------------------- */ 148 | /* Colors 149 | -------------------------- */ 150 | /* Link 151 | -------------------------- */ 152 | /* Border 153 | -------------------------- */ 154 | /* Box-shadow 155 | -------------------------- */ 156 | /* Fill 157 | -------------------------- */ 158 | /* Font 159 | -------------------------- */ 160 | /* Size 161 | -------------------------- */ 162 | /* z-index 163 | -------------------------- */ 164 | /* Disable base 165 | -------------------------- */ 166 | /* Icon 167 | -------------------------- */ 168 | /* Checkbox 169 | -------------------------- */ 170 | /* Radio 171 | -------------------------- */ 172 | /* Select 173 | -------------------------- */ 174 | /* Alert 175 | -------------------------- */ 176 | /* Message Box 177 | -------------------------- */ 178 | /* Message 179 | -------------------------- */ 180 | /* Notification 181 | -------------------------- */ 182 | /* Input 183 | -------------------------- */ 184 | /* Cascader 185 | -------------------------- */ 186 | /* Group 187 | -------------------------- */ 188 | /* Tab 189 | -------------------------- */ 190 | /* Button 191 | -------------------------- */ 192 | /* cascader 193 | -------------------------- */ 194 | /* Switch 195 | -------------------------- */ 196 | /* Dialog 197 | -------------------------- */ 198 | /* Table 199 | -------------------------- */ 200 | /* Pagination 201 | -------------------------- */ 202 | /* Popover 203 | -------------------------- */ 204 | /* Tooltip 205 | -------------------------- */ 206 | /* Tag 207 | -------------------------- */ 208 | /* Dropdown 209 | -------------------------- */ 210 | /* Badge 211 | -------------------------- */ 212 | /* Card 213 | --------------------------*/ 214 | /* Slider 215 | --------------------------*/ 216 | /* Steps 217 | --------------------------*/ 218 | /* Menu 219 | --------------------------*/ 220 | /* Rate 221 | --------------------------*/ 222 | /* DatePicker 223 | --------------------------*/ 224 | /* Loading 225 | --------------------------*/ 226 | /* Scrollbar 227 | --------------------------*/ 228 | /* Carousel 229 | --------------------------*/ 230 | /* Collapse 231 | --------------------------*/ 232 | } -------------------------------------------------------------------------------- /theme/spinner.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-time-spinner{ 92 | width: 100%; 93 | white-space: nowrap; 94 | } 95 | 96 | .el-spinner{ 97 | display: inline-block; 98 | vertical-align: middle; 99 | } 100 | 101 | .el-spinner-inner{ 102 | animation: rotate 2s linear infinite; 103 | width: 50px; 104 | height: 50px; 105 | } 106 | 107 | .el-spinner-inner .path{ 108 | stroke: #ececec; 109 | stroke-linecap: round; 110 | animation: dash 1.5s ease-in-out infinite; 111 | } 112 | @keyframes rotate { 113 | 100% { 114 | transform: rotate(360deg); 115 | } 116 | } 117 | 118 | @keyframes dash { 119 | 0% { 120 | stroke-dasharray: 1, 150; 121 | stroke-dashoffset: 0; 122 | } 123 | 50% { 124 | stroke-dasharray: 90, 150; 125 | stroke-dashoffset: -35; 126 | } 127 | 100% { 128 | stroke-dasharray: 90, 150; 129 | stroke-dashoffset: -124; 130 | } 131 | } 132 | :root{ 133 | /* Transition 134 | -------------------------- */ 135 | /* Colors 136 | -------------------------- */ 137 | /* Link 138 | -------------------------- */ 139 | /* Border 140 | -------------------------- */ 141 | /* Box-shadow 142 | -------------------------- */ 143 | /* Fill 144 | -------------------------- */ 145 | /* Font 146 | -------------------------- */ 147 | /* Size 148 | -------------------------- */ 149 | /* z-index 150 | -------------------------- */ 151 | /* Disable base 152 | -------------------------- */ 153 | /* Icon 154 | -------------------------- */ 155 | /* Checkbox 156 | -------------------------- */ 157 | /* Radio 158 | -------------------------- */ 159 | /* Select 160 | -------------------------- */ 161 | /* Alert 162 | -------------------------- */ 163 | /* Message Box 164 | -------------------------- */ 165 | /* Message 166 | -------------------------- */ 167 | /* Notification 168 | -------------------------- */ 169 | /* Input 170 | -------------------------- */ 171 | /* Cascader 172 | -------------------------- */ 173 | /* Group 174 | -------------------------- */ 175 | /* Tab 176 | -------------------------- */ 177 | /* Button 178 | -------------------------- */ 179 | /* cascader 180 | -------------------------- */ 181 | /* Switch 182 | -------------------------- */ 183 | /* Dialog 184 | -------------------------- */ 185 | /* Table 186 | -------------------------- */ 187 | /* Pagination 188 | -------------------------- */ 189 | /* Popover 190 | -------------------------- */ 191 | /* Tooltip 192 | -------------------------- */ 193 | /* Tag 194 | -------------------------- */ 195 | /* Dropdown 196 | -------------------------- */ 197 | /* Badge 198 | -------------------------- */ 199 | /* Card 200 | --------------------------*/ 201 | /* Slider 202 | --------------------------*/ 203 | /* Steps 204 | --------------------------*/ 205 | /* Menu 206 | --------------------------*/ 207 | /* Rate 208 | --------------------------*/ 209 | /* DatePicker 210 | --------------------------*/ 211 | /* Loading 212 | --------------------------*/ 213 | /* Scrollbar 214 | --------------------------*/ 215 | /* Carousel 216 | --------------------------*/ 217 | /* Collapse 218 | --------------------------*/ 219 | } -------------------------------------------------------------------------------- /theme/steps.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-steps{ 92 | font-size: 0; 93 | } 94 | 95 | .el-steps > :last-child .el-step__line{ 96 | display: none; 97 | } 98 | 99 | .el-steps.is-horizontal{ 100 | white-space: nowrap; 101 | } 102 | 103 | .el-steps.is-horizontal.is-center{ 104 | text-align: center; 105 | } 106 | :root{ 107 | /* Transition 108 | -------------------------- */ 109 | /* Colors 110 | -------------------------- */ 111 | /* Link 112 | -------------------------- */ 113 | /* Border 114 | -------------------------- */ 115 | /* Box-shadow 116 | -------------------------- */ 117 | /* Fill 118 | -------------------------- */ 119 | /* Font 120 | -------------------------- */ 121 | /* Size 122 | -------------------------- */ 123 | /* z-index 124 | -------------------------- */ 125 | /* Disable base 126 | -------------------------- */ 127 | /* Icon 128 | -------------------------- */ 129 | /* Checkbox 130 | -------------------------- */ 131 | /* Radio 132 | -------------------------- */ 133 | /* Select 134 | -------------------------- */ 135 | /* Alert 136 | -------------------------- */ 137 | /* Message Box 138 | -------------------------- */ 139 | /* Message 140 | -------------------------- */ 141 | /* Notification 142 | -------------------------- */ 143 | /* Input 144 | -------------------------- */ 145 | /* Cascader 146 | -------------------------- */ 147 | /* Group 148 | -------------------------- */ 149 | /* Tab 150 | -------------------------- */ 151 | /* Button 152 | -------------------------- */ 153 | /* cascader 154 | -------------------------- */ 155 | /* Switch 156 | -------------------------- */ 157 | /* Dialog 158 | -------------------------- */ 159 | /* Table 160 | -------------------------- */ 161 | /* Pagination 162 | -------------------------- */ 163 | /* Popover 164 | -------------------------- */ 165 | /* Tooltip 166 | -------------------------- */ 167 | /* Tag 168 | -------------------------- */ 169 | /* Dropdown 170 | -------------------------- */ 171 | /* Badge 172 | -------------------------- */ 173 | /* Card 174 | --------------------------*/ 175 | /* Slider 176 | --------------------------*/ 177 | /* Steps 178 | --------------------------*/ 179 | /* Menu 180 | --------------------------*/ 181 | /* Rate 182 | --------------------------*/ 183 | /* DatePicker 184 | --------------------------*/ 185 | /* Loading 186 | --------------------------*/ 187 | /* Scrollbar 188 | --------------------------*/ 189 | /* Carousel 190 | --------------------------*/ 191 | /* Collapse 192 | --------------------------*/ 193 | } -------------------------------------------------------------------------------- /theme/submenu.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/tab-pane.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/tag.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-tag{ 92 | background-color: rgb(131, 165, 151); 93 | display: inline-block; 94 | padding: 0 5px; 95 | height: 24px; 96 | line-height: 22px; 97 | font-size: 12px; 98 | color: #fff; 99 | border-radius: 4px; 100 | box-sizing: border-box; 101 | border: 1px solid transparent; 102 | white-space: nowrap 103 | } 104 | 105 | .el-tag .el-icon-close{ 106 | border-radius: 50%; 107 | text-align: center; 108 | position: relative; 109 | cursor: pointer; 110 | font-size: 12px; 111 | transform: scale(.75, .75); 112 | height: 18px; 113 | width: 18px; 114 | line-height: 18px; 115 | vertical-align: middle; 116 | top: -1px; 117 | right: -2px 118 | } 119 | 120 | .el-tag .el-icon-close:hover{ 121 | background-color: #fff; 122 | color: rgb(131, 165, 151) 123 | } 124 | 125 | .el-tag--gray{ 126 | background-color: rgb(228, 241, 237); 127 | border-color: rgb(228, 241, 237); 128 | color: rgb(72, 106, 92) 129 | } 130 | 131 | .el-tag--gray .el-tag__close:hover{ 132 | background-color: rgb(72, 106, 92); 133 | color: #fff 134 | } 135 | 136 | .el-tag--gray.is-hit{ 137 | border-color: rgb(72, 106, 92) 138 | } 139 | 140 | .el-tag--primary{ 141 | background-color: rgba(0, 176, 80, 0.1); 142 | border-color: rgba(0, 176, 80, 0.2); 143 | color: #00B050 144 | } 145 | 146 | .el-tag--primary .el-tag__close:hover{ 147 | background-color: #00B050; 148 | color: #fff 149 | } 150 | 151 | .el-tag--primary.is-hit{ 152 | border-color: #00B050 153 | } 154 | 155 | .el-tag--success{ 156 | background-color: rgba(18,206,102,0.10); 157 | border-color: rgba(18,206,102,0.20); 158 | color: #13ce66 159 | } 160 | 161 | .el-tag--success .el-tag__close:hover{ 162 | background-color: #13ce66; 163 | color: #fff 164 | } 165 | 166 | .el-tag--success.is-hit{ 167 | border-color: #13ce66 168 | } 169 | 170 | .el-tag--warning{ 171 | background-color: rgba(247,186,41,0.10); 172 | border-color: rgba(247,186,41,0.20); 173 | color: #f7ba2a 174 | } 175 | 176 | .el-tag--warning .el-tag__close:hover{ 177 | background-color: #f7ba2a; 178 | color: #fff 179 | } 180 | 181 | .el-tag--warning.is-hit{ 182 | border-color: #f7ba2a 183 | } 184 | 185 | .el-tag--danger{ 186 | background-color: rgba(255,73,73,0.10); 187 | border-color: rgba(255,73,73,0.20); 188 | color: #ff4949 189 | } 190 | 191 | .el-tag--danger .el-tag__close:hover{ 192 | background-color: #ff4949; 193 | color: #fff 194 | } 195 | 196 | .el-tag--danger.is-hit{ 197 | border-color: #ff4949 198 | } 199 | :root{ 200 | /* Transition 201 | -------------------------- */ 202 | /* Colors 203 | -------------------------- */ 204 | /* Link 205 | -------------------------- */ 206 | /* Border 207 | -------------------------- */ 208 | /* Box-shadow 209 | -------------------------- */ 210 | /* Fill 211 | -------------------------- */ 212 | /* Font 213 | -------------------------- */ 214 | /* Size 215 | -------------------------- */ 216 | /* z-index 217 | -------------------------- */ 218 | /* Disable base 219 | -------------------------- */ 220 | /* Icon 221 | -------------------------- */ 222 | /* Checkbox 223 | -------------------------- */ 224 | /* Radio 225 | -------------------------- */ 226 | /* Select 227 | -------------------------- */ 228 | /* Alert 229 | -------------------------- */ 230 | /* Message Box 231 | -------------------------- */ 232 | /* Message 233 | -------------------------- */ 234 | /* Notification 235 | -------------------------- */ 236 | /* Input 237 | -------------------------- */ 238 | /* Cascader 239 | -------------------------- */ 240 | /* Group 241 | -------------------------- */ 242 | /* Tab 243 | -------------------------- */ 244 | /* Button 245 | -------------------------- */ 246 | /* cascader 247 | -------------------------- */ 248 | /* Switch 249 | -------------------------- */ 250 | /* Dialog 251 | -------------------------- */ 252 | /* Table 253 | -------------------------- */ 254 | /* Pagination 255 | -------------------------- */ 256 | /* Popover 257 | -------------------------- */ 258 | /* Tooltip 259 | -------------------------- */ 260 | /* Tag 261 | -------------------------- */ 262 | /* Dropdown 263 | -------------------------- */ 264 | /* Badge 265 | -------------------------- */ 266 | /* Card 267 | --------------------------*/ 268 | /* Slider 269 | --------------------------*/ 270 | /* Steps 271 | --------------------------*/ 272 | /* Menu 273 | --------------------------*/ 274 | /* Rate 275 | --------------------------*/ 276 | /* DatePicker 277 | --------------------------*/ 278 | /* Loading 279 | --------------------------*/ 280 | /* Scrollbar 281 | --------------------------*/ 282 | /* Carousel 283 | --------------------------*/ 284 | /* Collapse 285 | --------------------------*/ 286 | } -------------------------------------------------------------------------------- /theme/tree.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-tree{ 92 | cursor: default; 93 | background: #fff; 94 | border: 1px solid rgb(209, 229, 220); 95 | } 96 | 97 | .el-tree__empty-block{ 98 | position: relative; 99 | min-height: 60px; 100 | text-align: center; 101 | width: 100%; 102 | height: 100%; 103 | } 104 | 105 | .el-tree__empty-text{ 106 | position: absolute; 107 | left: 50%; 108 | top: 50%; 109 | transform: translate(-50%, -50%); 110 | color: rgb(94, 130, 110); 111 | } 112 | 113 | .el-tree-node{ 114 | white-space: nowrap; 115 | } 116 | 117 | .el-tree-node > .el-tree-node__children{ 118 | overflow: hidden; 119 | background-color: transparent; 120 | } 121 | 122 | .el-tree-node.is-expanded > .el-tree-node__children{ 123 | display: block; 124 | } 125 | 126 | .el-tree-node__content{ 127 | line-height: 36px; 128 | height: 36px; 129 | cursor: pointer; 130 | } 131 | 132 | .el-tree-node__content > .el-checkbox, .el-tree-node__content > .el-tree-node__expand-icon{ 133 | margin-right: 8px; 134 | } 135 | 136 | .el-tree-node__content > .el-checkbox{ 137 | vertical-align: middle; 138 | } 139 | 140 | .el-tree-node__content:hover{ 141 | background: rgb(228, 241, 237); 142 | } 143 | 144 | .el-tree-node__expand-icon{ 145 | display: inline-block; 146 | cursor: pointer; 147 | width: 0; 148 | height: 0; 149 | vertical-align: middle; 150 | margin-left: 10px; 151 | border: 6px solid transparent; 152 | border-right-width: 0; 153 | border-left-color: rgb(151, 190, 174); 154 | border-left-width: 7px; 155 | transform: rotate(0deg); 156 | transition: transform 0.3s ease-in-out; 157 | } 158 | 159 | .el-tree-node__expand-icon:hover{ 160 | border-left-color: #999; 161 | } 162 | 163 | .el-tree-node__expand-icon.expanded{ 164 | transform: rotate(90deg); 165 | } 166 | 167 | .el-tree-node__expand-icon.is-leaf{ 168 | border-color: transparent; 169 | cursor: default; 170 | } 171 | 172 | .el-tree-node__label{ 173 | font-size: 14px; 174 | vertical-align: middle; 175 | display: inline-block; 176 | } 177 | 178 | .el-tree-node__loading-icon{ 179 | display: inline-block; 180 | vertical-align: middle; 181 | margin-right: 4px; 182 | font-size: 14px; 183 | color: rgb(151, 190, 174); 184 | } 185 | 186 | .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { 187 | background-color: rgb(235, 249, 241); 188 | } 189 | :root{ 190 | /* Transition 191 | -------------------------- */ 192 | /* Colors 193 | -------------------------- */ 194 | /* Link 195 | -------------------------- */ 196 | /* Border 197 | -------------------------- */ 198 | /* Box-shadow 199 | -------------------------- */ 200 | /* Fill 201 | -------------------------- */ 202 | /* Font 203 | -------------------------- */ 204 | /* Size 205 | -------------------------- */ 206 | /* z-index 207 | -------------------------- */ 208 | /* Disable base 209 | -------------------------- */ 210 | /* Icon 211 | -------------------------- */ 212 | /* Checkbox 213 | -------------------------- */ 214 | /* Radio 215 | -------------------------- */ 216 | /* Select 217 | -------------------------- */ 218 | /* Alert 219 | -------------------------- */ 220 | /* Message Box 221 | -------------------------- */ 222 | /* Message 223 | -------------------------- */ 224 | /* Notification 225 | -------------------------- */ 226 | /* Input 227 | -------------------------- */ 228 | /* Cascader 229 | -------------------------- */ 230 | /* Group 231 | -------------------------- */ 232 | /* Tab 233 | -------------------------- */ 234 | /* Button 235 | -------------------------- */ 236 | /* cascader 237 | -------------------------- */ 238 | /* Switch 239 | -------------------------- */ 240 | /* Dialog 241 | -------------------------- */ 242 | /* Table 243 | -------------------------- */ 244 | /* Pagination 245 | -------------------------- */ 246 | /* Popover 247 | -------------------------- */ 248 | /* Tooltip 249 | -------------------------- */ 250 | /* Tag 251 | -------------------------- */ 252 | /* Dropdown 253 | -------------------------- */ 254 | /* Badge 255 | -------------------------- */ 256 | /* Card 257 | --------------------------*/ 258 | /* Slider 259 | --------------------------*/ 260 | /* Steps 261 | --------------------------*/ 262 | /* Menu 263 | --------------------------*/ 264 | /* Rate 265 | --------------------------*/ 266 | /* DatePicker 267 | --------------------------*/ 268 | /* Loading 269 | --------------------------*/ 270 | /* Scrollbar 271 | --------------------------*/ 272 | /* Carousel 273 | --------------------------*/ 274 | /* Collapse 275 | --------------------------*/ 276 | } --------------------------------------------------------------------------------