├── example ├── src │ ├── styles │ │ ├── theme-dark │ │ │ ├── form-item.css │ │ │ ├── menu-item.css │ │ │ ├── submenu.css │ │ │ ├── tab-pane.css │ │ │ ├── button-group.css │ │ │ ├── checkbox-group.css │ │ │ ├── collapse-item.css │ │ │ ├── dropdown-item.css │ │ │ ├── dropdown-menu.css │ │ │ ├── breadcrumb-item.css │ │ │ ├── checkbox-button.css │ │ │ ├── menu-item-group.css │ │ │ ├── fonts │ │ │ │ ├── element-icons.ttf │ │ │ │ └── element-icons.woff │ │ │ ├── element-variables.css │ │ │ ├── aside.css │ │ │ ├── steps.css │ │ │ ├── container.css │ │ │ ├── reset.css │ │ │ ├── spinner.css │ │ │ ├── radio-group.css │ │ │ ├── footer.css │ │ │ ├── header.css │ │ │ ├── timeline.css │ │ │ ├── main.css │ │ │ ├── image.css │ │ │ ├── option.css │ │ │ ├── card.css │ │ │ ├── option-group.css │ │ │ ├── rate.css │ │ │ ├── divider.css │ │ │ ├── badge.css │ │ │ ├── row.css │ │ │ ├── display.css │ │ │ ├── carousel-item.css │ │ │ ├── breadcrumb.css │ │ │ ├── scrollbar.css │ │ │ ├── calendar.css │ │ │ └── timeline-item.css │ │ ├── index.dark.less │ │ ├── theme-light │ │ │ └── fonts │ │ │ │ ├── element-icons.ttf │ │ │ │ └── element-icons.woff │ │ └── index.less │ ├── favicon.ico │ ├── index.html │ ├── router.js │ ├── index.js │ ├── pages │ │ ├── page2 │ │ │ └── index.vue │ │ └── page1 │ │ │ └── index.vue │ └── app.vue └── build │ ├── lib │ ├── helper.js │ ├── server.js │ └── service │ │ └── favicon.js │ ├── webpack.build.js │ └── webpack.dev.js ├── .gitignore ├── .eslintignore ├── docs └── static │ ├── fonts │ ├── element-icons.732389.ttf │ └── element-icons.535877.woff │ ├── css │ └── 1.ed58b898.css │ └── js │ └── 2.bcbc5cd7.js ├── lib ├── prod │ ├── lib │ │ ├── CssDependencyTemplate.js │ │ ├── CssModuleFactory.js │ │ ├── CssDependency.js │ │ ├── CssModule.js │ │ └── renderManifest.js │ ├── inject.js │ ├── plugin.js │ └── loader.js ├── index.js └── dev │ ├── lib │ ├── listToStyles.js │ ├── addStylesShadow.js │ └── addStylesServer.js │ ├── inject.js │ └── loader.js ├── README.md ├── .eslintrc.js ├── src ├── store.js ├── index.js ├── util.js └── theme.js ├── webpack.config.js └── package.json /example/src/styles/theme-dark/form-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/menu-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/submenu.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/tab-pane.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/button-group.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/checkbox-group.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/collapse-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/dropdown-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/dropdown-menu.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/breadcrumb-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/checkbox-button.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/menu-item-group.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | example/dist/ 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /example/src/styles/index.dark.less: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #dd5858; 3 | } 4 | -------------------------------------------------------------------------------- /example/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vue-theme-switch-webpack-plugin/HEAD/example/src/favicon.ico -------------------------------------------------------------------------------- /docs/static/fonts/element-icons.732389.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vue-theme-switch-webpack-plugin/HEAD/docs/static/fonts/element-icons.732389.ttf -------------------------------------------------------------------------------- /docs/static/fonts/element-icons.535877.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vue-theme-switch-webpack-plugin/HEAD/docs/static/fonts/element-icons.535877.woff -------------------------------------------------------------------------------- /lib/prod/lib/CssDependencyTemplate.js: -------------------------------------------------------------------------------- 1 | module.exports = class CssDependencyTemplate { 2 | // eslint-disable-next-line class-methods-use-this 3 | apply() {} 4 | }; 5 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vue-theme-switch-webpack-plugin/HEAD/example/src/styles/theme-dark/fonts/element-icons.ttf -------------------------------------------------------------------------------- /example/src/styles/theme-dark/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vue-theme-switch-webpack-plugin/HEAD/example/src/styles/theme-dark/fonts/element-icons.woff -------------------------------------------------------------------------------- /example/src/styles/theme-light/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vue-theme-switch-webpack-plugin/HEAD/example/src/styles/theme-light/fonts/element-icons.ttf -------------------------------------------------------------------------------- /example/src/styles/theme-light/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vue-theme-switch-webpack-plugin/HEAD/example/src/styles/theme-light/fonts/element-icons.woff -------------------------------------------------------------------------------- /example/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 主题切换演示 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /example/build/lib/helper.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | exports.resolve = function resolve(...args) { 4 | return path.resolve(__dirname, '../../', ...args); 5 | }; 6 | 7 | exports.staticPath = function staticPath(_path) { 8 | return `static/${_path}`; 9 | }; 10 | -------------------------------------------------------------------------------- /lib/prod/lib/CssModuleFactory.js: -------------------------------------------------------------------------------- 1 | const CssModule = require('./CssModule'); 2 | 3 | module.exports = class CssModuleFactory { 4 | // eslint-disable-next-line class-methods-use-this 5 | create({ dependencies: [dependency] }, callback) { 6 | callback(null, new CssModule(dependency)); 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-theme-switch-webpack-plugin 2 | 3 | Vue应用主题切换插件。您可以先[查看演示](https://spikef.github.io/vue-theme-switch-webpack-plugin/index.html)效果。 4 | 5 | ## 安装 6 | 7 | > 只支持`webpack v4.x`和`html-webpack-plugin v3.x`。 8 | 9 | ```bash 10 | $ npm i --save-dev vue-theme-switch-webpack-plugin 11 | ``` 12 | 13 | ## 使用 14 | 15 | 查看`/example`下的示例。 16 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | if (process.env.NODE_ENV === 'development') { 2 | exports.loader = require.resolve('./dev/loader'); 3 | module.exports.inject = require('./dev/inject'); 4 | } else { 5 | module.exports = require('./prod/plugin'); 6 | module.exports.inject = require('./prod/inject'); 7 | module.exports.loader = require.resolve('./prod/loader'); 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parserOptions: { 3 | parser: 'babel-eslint', 4 | }, 5 | extends: [ 6 | 'airbnb-base', 7 | 'plugin:vue/recommended', 8 | ], 9 | rules: { 10 | 'global-require': 'off', 11 | 'no-param-reassign': 'off', 12 | 'no-plusplus': 'off', 13 | 'no-underscore-dangle': 'off', 14 | 'no-use-before-define': 'off', 15 | 'import/no-extraneous-dependencies': 'off', 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | const key = '__current_style__'; 2 | 3 | const store = { 4 | value: 'default', 5 | get() { 6 | return this.value; 7 | }, 8 | set(val) { 9 | try { 10 | this.value = val; 11 | window.localStorage.setItem(key, val); 12 | } catch (e) { /* 静默处理 */ } 13 | }, 14 | }; 15 | 16 | try { 17 | const localValue = window.localStorage.getItem(key); 18 | if (localValue) store.value = localValue; 19 | } catch (e) { /* 静默处理 */ } 20 | 21 | export default store; 22 | -------------------------------------------------------------------------------- /example/src/styles/index.less: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; 5 | font-size: 14px; 6 | -webkit-font-smoothing: antialiased; 7 | background-color: #f9f9f9; 8 | } 9 | 10 | ul, li, p { 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | ul, li { 16 | list-style: none; 17 | } 18 | 19 | #app { 20 | position: absolute; 21 | top: 0; 22 | bottom: 0; 23 | width: 100%; 24 | } 25 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import theme from './theme'; 2 | 3 | // eslint-disable-next-line import/prefer-default-export 4 | export function install(Vue, options = {}) { 5 | Vue.util.defineReactive(theme, 'style'); 6 | const name = options.name || '$theme'; 7 | Vue.mixin({ 8 | beforeCreate() { 9 | Object.defineProperty(this, name, { 10 | get() { 11 | return theme.style; 12 | }, 13 | set(style) { 14 | theme.style = style; 15 | }, 16 | }); 17 | }, 18 | }); 19 | } 20 | -------------------------------------------------------------------------------- /example/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | 4 | const Page1 = () => import('./pages/page1/index.vue'); 5 | const Page2 = () => import('./pages/page2/index.vue'); 6 | 7 | const routes = [ 8 | { 9 | path: '/', redirect: '/page1', 10 | }, 11 | { 12 | path: '/page1', component: Page1, name: 'page1', text: '第1页', 13 | }, 14 | { 15 | path: '/page2', component: Page2, name: 'page2', text: '第2页', 16 | }, 17 | ]; 18 | 19 | Vue.use(VueRouter); 20 | 21 | export default new VueRouter({ routes }); 22 | -------------------------------------------------------------------------------- /example/build/lib/server.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | module.exports = function center(app, server) { 5 | const serviceRoot = path.resolve(__dirname, './service'); 6 | const fileList = fs.readdirSync(serviceRoot) || []; 7 | 8 | fileList.forEach((file) => { 9 | if (/\.js$/.test(file)) { 10 | const filename = path.join(serviceRoot, file); 11 | // eslint-disable-next-line import/no-dynamic-require 12 | const service = require(filename); 13 | service(app, server); 14 | } 15 | }); 16 | }; 17 | -------------------------------------------------------------------------------- /example/build/lib/service/favicon.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const favicon = fs.readFileSync(path.resolve(__dirname, '../../../src/favicon.ico')); // read file 5 | 6 | module.exports = function service(app /* server */) { 7 | app.get('/favicon.ico', (req, res) => { 8 | res.status(200); 9 | res.setHeader('Content-Length', favicon.length); 10 | res.setHeader('Content-Type', 'image/x-icon'); 11 | res.setHeader('Cache-Control', 'public, max-age=2592000'); 12 | res.setHeader('Expires', new Date(Date.now() + 2592000000).toUTCString()); 13 | res.end(favicon); 14 | }); 15 | }; 16 | -------------------------------------------------------------------------------- /lib/prod/lib/CssDependency.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | 3 | module.exports = class CssDependency extends webpack.Dependency { 4 | constructor( 5 | { 6 | identifier, content, media, sourceMap, 7 | }, 8 | context, 9 | identifierIndex, 10 | ) { 11 | super(); 12 | 13 | this.identifier = identifier; 14 | this.identifierIndex = identifierIndex; 15 | this.content = content; 16 | this.media = media; 17 | this.sourceMap = sourceMap; 18 | this.context = context; 19 | this.theme = /\btheme=(\w+?)\b/.exec(identifier) && RegExp.$1; 20 | } 21 | 22 | getResourceIdentifier() { 23 | return `css-module-${this.identifier}-${this.identifierIndex}`; 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import ElementUI from 'element-ui'; 3 | 4 | import router from './router'; 5 | 6 | import 'element-ui/lib/theme-chalk/index.css'; 7 | import './styles/theme-light/index.css?theme=light'; // eslint-disable-line import/no-unresolved 8 | import './styles/theme-dark/index.css?theme=dark'; // eslint-disable-line import/no-unresolved 9 | 10 | import './styles/index.less'; 11 | import './styles/index.dark.less?theme=dark'; // eslint-disable-line import/no-unresolved 12 | 13 | import App from './app.vue'; 14 | 15 | Vue.use(ElementUI, { size: 'small' }); 16 | Vue.use(window.VueThemeSwitcher); 17 | 18 | // eslint-disable-next-line no-new 19 | new Vue({ 20 | el: '#app', 21 | router, 22 | render: (h) => h(App), 23 | }); 24 | -------------------------------------------------------------------------------- /lib/dev/lib/listToStyles.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Translates the list format produced by css-loader into something 3 | * easier to manipulate. 4 | */ 5 | export default function listToStyles(parentId, list) { 6 | const styles = []; 7 | const newStyles = {}; 8 | for (let i = 0; i < list.length; i++) { 9 | const item = list[i]; 10 | const id = item[0]; 11 | const css = item[1]; 12 | const media = item[2]; 13 | const sourceMap = item[3]; 14 | const part = { 15 | id: `${parentId}:${i}`, 16 | css, 17 | media, 18 | sourceMap, 19 | }; 20 | if (!newStyles[id]) { 21 | styles.push(newStyles[id] = { id, parts: [part] }); 22 | } else { 23 | newStyles[id].parts.push(part); 24 | } 25 | } 26 | return styles; 27 | } 28 | -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | const head = document.getElementsByTagName('head')[0]; 2 | 3 | export function createLinkElement(attrs) { 4 | const el = document.createElement('link'); 5 | el.rel = 'stylesheet'; 6 | el.type = 'text/css'; 7 | el.href = attrs.href; 8 | 9 | Object.keys(attrs).forEach((key) => { 10 | if (key === 'href') return; 11 | el.setAttribute(key, attrs[key]); 12 | }); 13 | 14 | head.appendChild(el); 15 | return el; 16 | } 17 | 18 | export function createThemeLink(theme) { 19 | if (!theme) return; 20 | if (theme.$el) { 21 | theme.$el.setAttribute('href', theme.href); 22 | } else { 23 | // eslint-disable-next-line no-param-reassign 24 | theme.$el = createLinkElement({ href: theme.href }); 25 | } 26 | } 27 | 28 | export function removeThemeLink(theme) { 29 | if (!theme) return; 30 | if (theme.$el) { 31 | // eslint-disable-next-line no-param-reassign 32 | theme.$el = !theme.$el.parentNode.removeChild(theme.$el); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /lib/dev/inject.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const PLUGIN_NAME = 'html-theme-inject-plugin'; 5 | 6 | const themeScript = fs.readFileSync(path.resolve(__dirname, '../../dist/index.js')).toString(); 7 | 8 | module.exports = class HtmlThemeInjectPlugin { 9 | constructor(htmlWebpackPlugin) { 10 | this.htmlWebpackPlugin = htmlWebpackPlugin; 11 | } 12 | 13 | apply(compiler) { 14 | compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { 15 | const beforeEmitHook = this.htmlWebpackPlugin 16 | ? this.htmlWebpackPlugin.getHooks(compilation).beforeEmit 17 | : compilation.hooks.htmlWebpackPluginAfterHtmlProcessing; 18 | 19 | beforeEmitHook.tapAsync(PLUGIN_NAME, (data, callback) => { 20 | data.html = data.html.replace(/(?=<\/head>)/, () => { 21 | const script = themeScript.replace('window.$themeResource', 'null'); 22 | return ``; 23 | }); 24 | 25 | callback(null, data); 26 | }); 27 | }); 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = 'production'; 2 | 3 | const path = require('path'); 4 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 5 | 6 | module.exports = { 7 | mode: process.env.NODE_ENV, 8 | entry: { 9 | index: path.resolve(__dirname, 'src/index.js'), 10 | }, 11 | output: { 12 | path: path.resolve(__dirname, 'dist'), 13 | filename: '[name].js', 14 | library: 'VueThemeSwitcher', 15 | libraryTarget: 'umd', 16 | }, 17 | optimization: { 18 | minimize: false, // false for test 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.js$/, 24 | use: { 25 | loader: 'babel-loader', 26 | options: { 27 | presets: [ 28 | ['@babel/preset-env', { 29 | modules: false, 30 | }], 31 | ], 32 | plugins: [ 33 | '@babel/plugin-transform-runtime', 34 | ], 35 | }, 36 | }, 37 | }, 38 | ], 39 | }, 40 | plugins: [ 41 | new CleanWebpackPlugin(), 42 | ], 43 | stats: 'verbose', 44 | node: false, 45 | }; 46 | -------------------------------------------------------------------------------- /example/src/pages/page2/index.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 57 | -------------------------------------------------------------------------------- /docs/static/css/1.ed58b898.css: -------------------------------------------------------------------------------- 1 | #page1 .el-select .el-input { 2 | width: 380px; 3 | } 4 | #page1 .el-form { 5 | width: 460px; 6 | } 7 | #page1 .line { 8 | text-align: center; 9 | } 10 | #page1 .el-checkbox-group { 11 | width: 320px; 12 | margin: 0; 13 | padding: 0; 14 | list-style: none; 15 | } 16 | #page1 .el-checkbox-group:after, 17 | #page1 .el-checkbox-group:before { 18 | content: " "; 19 | display: table; 20 | } 21 | #page1 .el-checkbox-group:after { 22 | clear: both; 23 | visibility: hidden; 24 | font-size: 0; 25 | height: 0; 26 | } 27 | #page1 .el-checkbox-group .el-checkbox { 28 | float: left; 29 | width: 160px; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | #page1 .el-checkbox-group .el-checkbox + .el-checkbox { 34 | margin-left: 0; 35 | } 36 | #page1 .demo-form-normal { 37 | width: 460px; 38 | } 39 | #page1 .demo-form-inline { 40 | width: auto; 41 | } 42 | #page1 .demo-form-inline .el-input { 43 | width: 150px; 44 | } 45 | #page1 .demo-form-inline > * { 46 | margin-right: 10px; 47 | } 48 | #page1 .demo-ruleForm { 49 | width: 460px; 50 | } 51 | #page1 .demo-ruleForm .el-select .el-input { 52 | width: 360px; 53 | } 54 | #page1 .demo-dynamic .el-input { 55 | margin-right: 10px; 56 | width: 270px; 57 | vertical-align: top; 58 | } 59 | #page1 .fr { 60 | float: right; 61 | } 62 | 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-theme-switch-webpack-plugin", 3 | "version": "1.0.0", 4 | "main": "lib/index.js", 5 | "scripts": { 6 | "dev:example": "webpack-dev-server --config=example/build/webpack.dev.js", 7 | "build:example": "webpack-cli --config=example/build/webpack.build.js ", 8 | "build": "webpack-cli --config=webpack.config.js", 9 | "lint": "eslint src/** lib/** example/** --ext .js,.vue" 10 | }, 11 | "files": [ 12 | "dist", 13 | "lib" 14 | ], 15 | "dependencies": { 16 | "hash-sum": "^2.0.0", 17 | "loader-utils": "^1.2.3" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.2.2", 21 | "@babel/plugin-transform-runtime": "^7.7.4", 22 | "@babel/preset-env": "^7.3.1", 23 | "autoprefixer": "^9.7.2", 24 | "babel-eslint": "^10.0.3", 25 | "babel-loader": "^8.0.6", 26 | "clean-webpack-plugin": "^2.0.2", 27 | "css-loader": "^3.2.0", 28 | "element-ui": "^2.13.0", 29 | "eslint": "^6.7.1", 30 | "eslint-config-airbnb-base": "^14.0.0", 31 | "eslint-plugin-import": "^2.18.2", 32 | "eslint-plugin-vue": "^6.0.1", 33 | "file-loader": "^5.0.2", 34 | "html-webpack-plugin": "^3.2.0", 35 | "less": "^3.10.1", 36 | "less-loader": "^5.0.0", 37 | "postcss-loader": "^3.0.0", 38 | "url-loader": "^3.0.0", 39 | "vue": "^2.6.10", 40 | "vue-loader": "^15.7.1", 41 | "vue-router": "^3.1.2", 42 | "vue-template-compiler": "^2.6.10", 43 | "webpack": "^4.36.1", 44 | "webpack-cli": "^3.3.6", 45 | "webpack-dev-server": "^3.8.0", 46 | "webpack-sources": "^1.4.3" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /lib/prod/lib/CssModule.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | 3 | const MODULE_TYPE = 'css/theme-extract'; 4 | 5 | module.exports = class CssModule extends webpack.Module { 6 | constructor(dependency) { 7 | super(MODULE_TYPE, dependency.context); 8 | 9 | this.id = ''; 10 | this._identifier = dependency.identifier; 11 | this._identifierIndex = dependency.identifierIndex; 12 | this.content = dependency.content; 13 | this.media = dependency.media; 14 | this.theme = dependency.theme; 15 | this.sourceMap = dependency.sourceMap; 16 | } 17 | 18 | // no source() so webpack doesn't do add stuff to the bundle 19 | 20 | size() { 21 | return this.content.length; 22 | } 23 | 24 | identifier() { 25 | return `css ${this._identifier} ${this._identifierIndex}`; 26 | } 27 | 28 | readableIdentifier(requestShortener) { 29 | return `css ${requestShortener.shorten(this._identifier)}${ 30 | this._identifierIndex ? ` (${this._identifierIndex})` : '' 31 | }`; 32 | } 33 | 34 | nameForCondition() { 35 | const resource = this._identifier.split('!').pop(); 36 | const idx = resource.indexOf('?'); 37 | 38 | if (idx >= 0) { 39 | return resource.substring(0, idx); 40 | } 41 | 42 | return resource; 43 | } 44 | 45 | updateCacheModule(module) { 46 | this.content = module.content; 47 | this.media = module.media; 48 | this.theme = module.theme; 49 | this.sourceMap = module.sourceMap; 50 | } 51 | 52 | // eslint-disable-next-line class-methods-use-this 53 | needRebuild() { 54 | return true; 55 | } 56 | 57 | build(options, compilation, resolver, fileSystem, callback) { 58 | this.buildInfo = {}; 59 | this.buildMeta = {}; 60 | callback(); 61 | } 62 | 63 | updateHash(hash) { 64 | super.updateHash(hash); 65 | 66 | hash.update(this.content); 67 | hash.update(this.media || ''); 68 | hash.update(this.theme || ''); 69 | hash.update(this.sourceMap ? JSON.stringify(this.sourceMap) : ''); 70 | } 71 | }; 72 | -------------------------------------------------------------------------------- /src/theme.js: -------------------------------------------------------------------------------- 1 | import store from './store'; 2 | import * as util from './util'; 3 | 4 | const theme = {}; 5 | const resource = window.$themeResource; 6 | 7 | Object.defineProperties(theme, { 8 | style: { 9 | configurable: true, 10 | enumerable: true, 11 | get() { 12 | return store.get(); 13 | }, 14 | set(val) { 15 | const oldVal = store.get(); 16 | const newVal = String(val || 'default'); 17 | if (oldVal === newVal) return; 18 | store.set(newVal); 19 | window.dispatchEvent(new CustomEvent('theme-change', { bubbles: true, detail: { newVal, oldVal } })); 20 | }, 21 | }, 22 | __loadChunkCss: { 23 | enumerable: false, 24 | value: function loadChunkCss(chunkId) { 25 | const id = `${chunkId}#${theme.style}`; 26 | if (resource && resource.chunks) { 27 | util.createThemeLink(resource.chunks[id]); 28 | } 29 | }, 30 | }, 31 | }); 32 | 33 | // NODE_ENV = production 34 | if (resource) { 35 | // 加载entry 36 | const currentTheme = theme.style; 37 | if (resource.entry && currentTheme && currentTheme !== 'default') { 38 | Object.keys(resource.entry).forEach((id) => { 39 | const item = resource.entry[id]; 40 | if (item.theme === currentTheme) { 41 | util.createThemeLink(item); 42 | } 43 | }); 44 | } 45 | 46 | // 更新theme 47 | window.addEventListener('theme-change', (e) => { 48 | const newTheme = e.detail.newVal || 'default'; 49 | const oldTheme = e.detail.oldVal || 'default'; 50 | 51 | const updateThemeLink = (obj) => { 52 | if (obj.theme === newTheme && newTheme !== 'default') { 53 | util.createThemeLink(obj); 54 | } else if (obj.theme === oldTheme && oldTheme !== 'default') { 55 | util.removeThemeLink(obj); 56 | } 57 | }; 58 | 59 | if (resource.entry) { 60 | Object.keys(resource.entry).forEach((id) => { 61 | updateThemeLink(resource.entry[id]); 62 | }); 63 | } 64 | 65 | if (resource.chunks) { 66 | Object.keys(resource.chunks).forEach((id) => { 67 | updateThemeLink(resource.chunks[id]); 68 | }); 69 | } 70 | }); 71 | } 72 | 73 | window.$theme = theme; 74 | 75 | export default theme; 76 | -------------------------------------------------------------------------------- /lib/dev/lib/addStylesShadow.js: -------------------------------------------------------------------------------- 1 | import listToStyles from './listToStyles'; 2 | 3 | export default function addStylesToShadowDOM(parentId, list, shadowRoot) { 4 | const styles = listToStyles(parentId, list); 5 | addStyles(styles, shadowRoot); 6 | } 7 | 8 | /* 9 | type StyleObject = { 10 | id: number; 11 | parts: Array 12 | } 13 | type StyleObjectPart = { 14 | css: string; 15 | media: string; 16 | sourceMap: ?string 17 | } 18 | */ 19 | 20 | function addStyles(styles /* Array */, shadowRoot) { 21 | const injectedStyles = shadowRoot._injectedStyles 22 | || (shadowRoot._injectedStyles = {}); 23 | for (let i = 0; i < styles.length; i++) { 24 | const item = styles[i]; 25 | const style = injectedStyles[item.id]; 26 | if (!style) { 27 | for (let j = 0; j < item.parts.length; j++) { 28 | addStyle(item.parts[j], shadowRoot); 29 | } 30 | injectedStyles[item.id] = true; 31 | } 32 | } 33 | } 34 | 35 | function createStyleElement(shadowRoot) { 36 | const styleElement = document.createElement('style'); 37 | styleElement.type = 'text/css'; 38 | shadowRoot.appendChild(styleElement); 39 | return styleElement; 40 | } 41 | 42 | function addStyle(obj /* StyleObjectPart */, shadowRoot) { 43 | const styleElement = createStyleElement(shadowRoot); 44 | let { css } = obj; 45 | const { media } = obj; 46 | const { sourceMap } = obj; 47 | 48 | if (media) { 49 | styleElement.setAttribute('media', media); 50 | } 51 | 52 | if (sourceMap) { 53 | // https://developer.chrome.com/devtools/docs/javascript-debugging 54 | // this makes source maps inside style tags work properly in Chrome 55 | css += `\n/*# sourceURL=${sourceMap.sources[0]} */`; 56 | // http://stackoverflow.com/a/26603875 57 | css += `\n/*# sourceMappingURL=data:application/json;base64,${btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))))} */`; 58 | } 59 | 60 | if (styleElement.styleSheet) { 61 | styleElement.styleSheet.cssText = css; 62 | } else { 63 | while (styleElement.firstChild) { 64 | styleElement.removeChild(styleElement.firstChild); 65 | } 66 | styleElement.appendChild(document.createTextNode(css)); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/element-variables.css: -------------------------------------------------------------------------------- 1 | /* Transition 2 | -------------------------- */ 3 | /* Color 4 | -------------------------- */ 5 | /* 53a8ff */ 6 | /* 66b1ff */ 7 | /* 79bbff */ 8 | /* 8cc5ff */ 9 | /* a0cfff */ 10 | /* b3d8ff */ 11 | /* c6e2ff */ 12 | /* d9ecff */ 13 | /* ecf5ff */ 14 | /* Link 15 | -------------------------- */ 16 | /* Border 17 | -------------------------- */ 18 | /* Fill 19 | -------------------------- */ 20 | /* Typography 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 | /* MessageBox 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 | /* Tree 71 | -------------------------- */ 72 | /* Dropdown 73 | -------------------------- */ 74 | /* Badge 75 | -------------------------- */ 76 | /* Card 77 | --------------------------*/ 78 | /* Slider 79 | --------------------------*/ 80 | /* Steps 81 | --------------------------*/ 82 | /* Menu 83 | --------------------------*/ 84 | /* Rate 85 | --------------------------*/ 86 | /* DatePicker 87 | --------------------------*/ 88 | /* Loading 89 | --------------------------*/ 90 | /* Scrollbar 91 | --------------------------*/ 92 | /* Carousel 93 | --------------------------*/ 94 | /* Collapse 95 | --------------------------*/ 96 | /* Transfer 97 | --------------------------*/ 98 | /* Header 99 | --------------------------*/ 100 | /* Footer 101 | --------------------------*/ 102 | /* Main 103 | --------------------------*/ 104 | /* Timeline 105 | --------------------------*/ 106 | /* Link 107 | --------------------------*/ 108 | /* Calendar 109 | --------------------------*/ 110 | /* Break-point 111 | --------------------------*/ 112 | -------------------------------------------------------------------------------- /lib/dev/lib/addStylesServer.js: -------------------------------------------------------------------------------- 1 | import listToStyles from './listToStyles'; 2 | 3 | export default function addStylesServer(parentId, list, isProduction, context) { 4 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 5 | // eslint-disable-next-line no-undef 6 | context = __VUE_SSR_CONTEXT__; 7 | } 8 | if (context) { 9 | if (!Object.prototype.hasOwnProperty.call(context, 'styles')) { 10 | Object.defineProperty(context, 'styles', { 11 | enumerable: true, 12 | get() { 13 | return renderStyles(context._styles); 14 | }, 15 | }); 16 | // expose renderStyles for vue-server-renderer (vuejs/#6353) 17 | context._renderStyles = renderStyles; 18 | } 19 | 20 | const styles = context._styles || (context._styles = {}); 21 | list = listToStyles(parentId, list); 22 | if (isProduction) { 23 | addStyleProd(styles, list); 24 | } else { 25 | addStyleDev(styles, list); 26 | } 27 | } 28 | } 29 | 30 | // In production, render as few style tags as possible. 31 | // (mostly because IE9 has a limit on number of style tags) 32 | function addStyleProd(styles, list) { 33 | for (let i = 0; i < list.length; i++) { 34 | const { parts } = list[i]; 35 | for (let j = 0; j < parts.length; j++) { 36 | const part = parts[j]; 37 | // group style tags by media types. 38 | const id = part.media || 'default'; 39 | const style = styles[id]; 40 | if (style) { 41 | if (style.ids.indexOf(part.id) < 0) { 42 | style.ids.push(part.id); 43 | style.css += `\n${part.css}`; 44 | } 45 | } else { 46 | styles[id] = { 47 | ids: [part.id], 48 | css: part.css, 49 | media: part.media, 50 | }; 51 | } 52 | } 53 | } 54 | } 55 | 56 | // In dev we use individual style tag for each module for hot-reload 57 | // and source maps. 58 | function addStyleDev(styles, list) { 59 | for (let i = 0; i < list.length; i++) { 60 | const { parts } = list[i]; 61 | for (let j = 0; j < parts.length; j++) { 62 | const part = parts[j]; 63 | styles[part.id] = { 64 | ids: [part.id], 65 | css: part.css, 66 | media: part.media, 67 | }; 68 | } 69 | } 70 | } 71 | 72 | function renderStyles(styles) { 73 | let css = ''; 74 | // eslint-disable-next-line no-restricted-syntax 75 | for (const key in styles) { 76 | // eslint-disable-next-line no-continue 77 | if (!Object.prototype.hasOwnProperty.call(styles, key)) continue; 78 | const style = styles[key]; 79 | const attrs = [`data-vue-ssr-id="${style.ids.join(' ')}"`]; 80 | if (style.media) attrs.push(`media="${style.media}"`); 81 | css += ``; 82 | } 83 | return css; 84 | } 85 | -------------------------------------------------------------------------------- /lib/prod/inject.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const loaderUtils = require('loader-utils'); 4 | 5 | const MODULE_TYPE = 'css/theme-extract'; 6 | const PLUGIN_NAME = 'html-theme-inject-plugin'; 7 | 8 | const REGEXP_CSS = new RegExp(`\\btype=${MODULE_TYPE}\\b`); 9 | 10 | const themeScript = fs.readFileSync(path.resolve(__dirname, '../../dist/index.js')).toString(); 11 | 12 | module.exports = class HtmlThemeInjectPlugin { 13 | constructor(htmlWebpackPlugin) { 14 | this.htmlWebpackPlugin = htmlWebpackPlugin; 15 | } 16 | 17 | apply(compiler) { 18 | compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { 19 | const alterAssetTagsHook = this.htmlWebpackPlugin 20 | ? this.htmlWebpackPlugin.getHooks(compilation).alterAssetTags 21 | : compilation.hooks.htmlWebpackPluginAlterAssetTags; 22 | 23 | const beforeEmitHook = this.htmlWebpackPlugin 24 | ? this.htmlWebpackPlugin.getHooks(compilation).beforeEmit 25 | : compilation.hooks.htmlWebpackPluginAfterHtmlProcessing; 26 | 27 | alterAssetTagsHook.tapAsync(PLUGIN_NAME, (data, callback) => { 28 | data.head = data.head.filter((tag) => { 29 | if (tag.tagName === 'link' && REGEXP_CSS.test(tag.attributes && tag.attributes.href)) { 30 | const url = tag.attributes.href; 31 | if (!url.includes('theme=default')) return false; 32 | // eslint-disable-next-line no-return-assign 33 | return !!(tag.attributes.href = url.substring(0, url.indexOf('?'))); 34 | } 35 | return true; 36 | }); 37 | data.plugin.assetJson = JSON.stringify( 38 | JSON.parse(data.plugin.assetJson) 39 | .filter((url) => !REGEXP_CSS.test(url) || url.includes('theme=default')) 40 | .map((url) => (REGEXP_CSS.test(url) ? url.substring(0, url.indexOf('?')) : url)), 41 | ); 42 | 43 | callback(null, data); 44 | }); 45 | 46 | beforeEmitHook.tapAsync(PLUGIN_NAME, (data, callback) => { 47 | const resource = { entry: {}, chunks: {} }; 48 | Object.keys(compilation.assets).forEach((file) => { 49 | if (REGEXP_CSS.test(file)) { 50 | const query = loaderUtils.parseQuery(file.substring(file.indexOf('?'))); 51 | const theme = { id: query.id, theme: query.theme, href: file.substring(0, file.indexOf('?')) }; 52 | if (data.assets.css.indexOf(file) !== -1) { 53 | resource.entry[`${theme.id}#${theme.theme}`] = theme; 54 | } else { 55 | resource.chunks[`${theme.id}#${theme.theme}`] = theme; 56 | } 57 | } 58 | }); 59 | 60 | data.html = data.html.replace(/(?=<\/head>)/, () => { 61 | const script = themeScript.replace('window.$themeResource', JSON.stringify(resource)); 62 | return ``; 63 | }); 64 | 65 | callback(null, data); 66 | }); 67 | }); 68 | } 69 | }; 70 | -------------------------------------------------------------------------------- /docs/static/js/2.bcbc5cd7.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ 2 | 3 | /***/ 169: 4 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 5 | 6 | "use strict"; 7 | __webpack_require__.r(__webpack_exports__); 8 | 9 | // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./example/src/pages/page2/index.vue?vue&type=template&id=16c703a8& 10 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"page2"}},[_c('el-button',{staticStyle:{"margin-bottom":"48px"},attrs:{"type":"primary"},on:{"click":function($event){return _vm.$router.push('/page1')}}},[_vm._v("\n 新建\n ")]),_vm._v(" "),_c('el-table',{staticStyle:{"width":"100%"},attrs:{"data":_vm.tableData}},[_c('el-table-column',{attrs:{"prop":"date","label":"日期","width":"180"}}),_vm._v(" "),_c('el-table-column',{attrs:{"prop":"name","label":"姓名","width":"180"}}),_vm._v(" "),_c('el-table-column',{attrs:{"prop":"address","label":"地址"}})],1)],1)} 11 | var staticRenderFns = [] 12 | 13 | 14 | // CONCATENATED MODULE: ./example/src/pages/page2/index.vue?vue&type=template&id=16c703a8& 15 | 16 | // CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./example/src/pages/page2/index.vue?vue&type=script&lang=js& 17 | // 18 | // 19 | // 20 | // 21 | // 22 | // 23 | // 24 | // 25 | // 26 | // 27 | // 28 | // 29 | // 30 | // 31 | // 32 | // 33 | // 34 | // 35 | // 36 | // 37 | // 38 | // 39 | // 40 | // 41 | // 42 | // 43 | // 44 | // 45 | // 46 | // 47 | // 48 | /* harmony default export */ var page2vue_type_script_lang_js_ = ({ 49 | data: function data() { 50 | return { 51 | tableData: [{ 52 | date: '2016-05-02', 53 | name: '王小虎', 54 | address: '上海市普陀区金沙江路 1518 弄' 55 | }, { 56 | date: '2016-05-04', 57 | name: '王小虎', 58 | address: '上海市普陀区金沙江路 1517 弄' 59 | }, { 60 | date: '2016-05-01', 61 | name: '王小虎', 62 | address: '上海市普陀区金沙江路 1519 弄' 63 | }, { 64 | date: '2016-05-03', 65 | name: '王小虎', 66 | address: '上海市普陀区金沙江路 1516 弄' 67 | }] 68 | }; 69 | } 70 | }); 71 | // CONCATENATED MODULE: ./example/src/pages/page2/index.vue?vue&type=script&lang=js& 72 | /* harmony default export */ var pages_page2vue_type_script_lang_js_ = (page2vue_type_script_lang_js_); 73 | // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js 74 | var componentNormalizer = __webpack_require__(54); 75 | 76 | // CONCATENATED MODULE: ./example/src/pages/page2/index.vue 77 | 78 | 79 | 80 | 81 | 82 | /* normalize component */ 83 | 84 | var component = Object(componentNormalizer["a" /* default */])( 85 | pages_page2vue_type_script_lang_js_, 86 | render, 87 | staticRenderFns, 88 | false, 89 | null, 90 | null, 91 | null 92 | 93 | ) 94 | 95 | /* harmony default export */ var page2 = __webpack_exports__["default"] = (component.exports); 96 | 97 | /***/ }) 98 | 99 | }]); -------------------------------------------------------------------------------- /example/src/styles/theme-dark/aside.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | .el-aside { 123 | overflow: auto; 124 | -webkit-box-sizing: border-box; 125 | box-sizing: border-box; 126 | -ms-flex-negative: 0; 127 | flex-shrink: 0; } 128 | -------------------------------------------------------------------------------- /example/src/app.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 92 | 93 | 106 | 107 | 130 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/steps.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | .el-steps { 123 | display: -webkit-box; 124 | display: -ms-flexbox; 125 | display: flex; } 126 | .el-steps--simple { 127 | padding: 13px 8%; 128 | border-radius: 4px; 129 | background: #272822; } 130 | .el-steps--horizontal { 131 | white-space: nowrap; } 132 | .el-steps--vertical { 133 | height: 100%; 134 | -webkit-box-orient: vertical; 135 | -webkit-box-direction: normal; 136 | -ms-flex-flow: column; 137 | flex-flow: column; } 138 | -------------------------------------------------------------------------------- /example/build/webpack.build.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = 'production'; 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | const VueLoaderPlugin = require('vue-loader/lib/plugin'); 6 | 7 | const ThemeSwitchPlugin = require('../../lib'); 8 | 9 | const { resolve, staticPath } = require('./lib/helper'); 10 | 11 | module.exports = { 12 | mode: process.env.NODE_ENV, 13 | entry: { 14 | app: resolve('src/index.js'), 15 | }, 16 | output: { 17 | path: resolve('../docs'), 18 | filename: 'static/js/[name].[hash:8].js', 19 | libraryTarget: 'umd', 20 | }, 21 | optimization: { 22 | minimize: false, // false for test 23 | // namedModules: true, // true for test 24 | }, 25 | resolve: { 26 | extensions: ['.vue', '.js', '.json'], 27 | mainFields: ['jsnext:main', 'browser', 'main'], 28 | alias: { 29 | '@': resolve('example'), 30 | vue$: 'vue/dist/vue.runtime.esm.js', 31 | }, 32 | }, 33 | module: { 34 | rules: [ 35 | { 36 | test: /\.vue$/, 37 | include: [ 38 | resolve('src'), 39 | ], 40 | use: { 41 | loader: 'vue-loader', 42 | options: {}, 43 | }, 44 | }, 45 | { 46 | test: /\.js$/, 47 | include: [ 48 | resolve('src'), 49 | ], 50 | use: { 51 | loader: 'babel-loader', 52 | options: { 53 | presets: [ 54 | ['@babel/preset-env', { 55 | modules: false, 56 | }], 57 | ], 58 | }, 59 | }, 60 | }, 61 | { 62 | test: /\.(css|less)$/, 63 | use: [ 64 | ThemeSwitchPlugin.loader, 65 | { 66 | loader: 'css-loader', 67 | options: { 68 | sourceMap: false, 69 | }, 70 | }, 71 | { 72 | loader: 'postcss-loader', 73 | options: { 74 | plugins: [ 75 | require('autoprefixer'), 76 | ], 77 | }, 78 | }, 79 | { 80 | loader: 'less-loader', 81 | options: { 82 | sourceMap: false, 83 | }, 84 | }, 85 | ], 86 | }, 87 | { 88 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 89 | loader: 'url-loader', 90 | options: { 91 | limit: 10000, 92 | name: staticPath('fonts/[name].[hash:6].[ext]'), 93 | }, 94 | }, 95 | ], 96 | }, 97 | plugins: [ 98 | new VueLoaderPlugin(), 99 | new CleanWebpackPlugin(), 100 | new ThemeSwitchPlugin({ 101 | filename: 'static/css/[name].[hash:8].css', 102 | chunkFilename: 'static/css/[name].[contenthash:8].css', 103 | }), 104 | new HtmlWebpackPlugin({ 105 | template: resolve('./src/index.html'), 106 | filename: 'index.html', 107 | minify: { 108 | removeComments: true, 109 | collapseWhitespace: true, 110 | removeAttributeQuotes: true, 111 | // more $config: 112 | // https://github.com/kangax/html-minifier#options-quick-reference 113 | }, 114 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 115 | chunksSortMode: 'dependency', 116 | }), 117 | // eslint-disable-next-line new-cap 118 | new ThemeSwitchPlugin.inject(), 119 | ], 120 | stats: 'verbose', 121 | node: false, 122 | }; 123 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/container.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | .el-container { 123 | display: -webkit-box; 124 | display: -ms-flexbox; 125 | display: flex; 126 | -webkit-box-orient: horizontal; 127 | -webkit-box-direction: normal; 128 | -ms-flex-direction: row; 129 | flex-direction: row; 130 | -webkit-box-flex: 1; 131 | -ms-flex: 1; 132 | flex: 1; 133 | -ms-flex-preferred-size: auto; 134 | flex-basis: auto; 135 | -webkit-box-sizing: border-box; 136 | box-sizing: border-box; 137 | min-width: 0; } 138 | .el-container.is-vertical { 139 | -webkit-box-orient: vertical; 140 | -webkit-box-direction: normal; 141 | -ms-flex-direction: column; 142 | flex-direction: column; } 143 | -------------------------------------------------------------------------------- /example/build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = 'development'; 2 | 3 | const webpack = require('webpack'); 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | const VueLoaderPlugin = require('vue-loader/lib/plugin'); 6 | const ThemeSwitchPlugin = require('../../lib'); 7 | 8 | const customServers = require('./lib/server'); 9 | const { resolve, staticPath } = require('./lib/helper'); 10 | 11 | module.exports = { 12 | mode: process.env.NODE_ENV, 13 | entry: { 14 | app: resolve('src/index.js'), 15 | }, 16 | output: { 17 | path: resolve('dist'), 18 | filename: 'static/js/[name].js', 19 | publicPath: '/', 20 | }, 21 | devServer: { 22 | contentBase: false, 23 | compress: true, 24 | hot: true, 25 | useLocalIp: true, 26 | disableHostCheck: true, 27 | host: '0.0.0.0', 28 | port: 8500, 29 | stats: 'minimal', 30 | open: false, 31 | writeToDisk: false, // should be false 32 | before: customServers, 33 | }, 34 | devtool: 'cheap-module-eval-source-map', 35 | resolve: { 36 | extensions: ['.vue', '.js', '.json'], 37 | mainFields: ['jsnext:main', 'browser', 'main'], 38 | alias: { 39 | '@': resolve('example'), 40 | vue$: 'vue/dist/vue.runtime.esm.js', 41 | }, 42 | }, 43 | module: { 44 | rules: [ 45 | { 46 | test: /\.vue$/, 47 | include: [ 48 | resolve('src'), 49 | ], 50 | use: { 51 | loader: 'vue-loader', 52 | options: {}, 53 | }, 54 | }, 55 | { 56 | test: /\.js$/, 57 | include: [ 58 | resolve('src'), 59 | ], 60 | use: { 61 | loader: 'babel-loader', 62 | options: { 63 | presets: [ 64 | ['@babel/preset-env', { 65 | modules: false, 66 | }], 67 | ], 68 | }, 69 | }, 70 | }, 71 | { 72 | test: /\.less$/, 73 | use: [ 74 | { 75 | loader: ThemeSwitchPlugin.loader, 76 | options: {}, 77 | }, 78 | { 79 | loader: 'css-loader', 80 | options: { 81 | sourceMap: true, 82 | }, 83 | }, 84 | { 85 | loader: 'less-loader', 86 | options: { 87 | sourceMap: true, 88 | }, 89 | }, 90 | ], 91 | }, 92 | { 93 | test: /\.css$/, 94 | use: [ 95 | { 96 | loader: ThemeSwitchPlugin.loader, 97 | options: {}, 98 | }, 99 | { 100 | loader: 'css-loader', 101 | options: { 102 | sourceMap: true, 103 | }, 104 | }, 105 | ], 106 | }, 107 | { 108 | test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/, 109 | loader: 'url-loader', 110 | options: { 111 | limit: 10000, 112 | name: staticPath('fonts/[name].[hash:6].[ext]'), 113 | }, 114 | }, 115 | ], 116 | }, 117 | plugins: [ 118 | new VueLoaderPlugin(), 119 | new webpack.HotModuleReplacementPlugin(), 120 | new HtmlWebpackPlugin({ 121 | template: resolve('./src/index.html'), 122 | filename: 'index.html', 123 | minify: { 124 | removeComments: true, 125 | collapseWhitespace: true, 126 | removeAttributeQuotes: true, 127 | // more $config: 128 | // https://github.com/kangax/html-minifier#options-quick-reference 129 | }, 130 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 131 | chunksSortMode: 'dependency', 132 | }), 133 | // eslint-disable-next-line new-cap 134 | new ThemeSwitchPlugin.inject(), 135 | ], 136 | node: false, 137 | }; 138 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/reset.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* Transition 3 | -------------------------- */ 4 | /* Color 5 | -------------------------- */ 6 | /* 53a8ff */ 7 | /* 66b1ff */ 8 | /* 79bbff */ 9 | /* 8cc5ff */ 10 | /* a0cfff */ 11 | /* b3d8ff */ 12 | /* c6e2ff */ 13 | /* d9ecff */ 14 | /* ecf5ff */ 15 | /* Link 16 | -------------------------- */ 17 | /* Border 18 | -------------------------- */ 19 | /* Fill 20 | -------------------------- */ 21 | /* Typography 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 | /* MessageBox 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 | /* Tree 72 | -------------------------- */ 73 | /* Dropdown 74 | -------------------------- */ 75 | /* Badge 76 | -------------------------- */ 77 | /* Card 78 | --------------------------*/ 79 | /* Slider 80 | --------------------------*/ 81 | /* Steps 82 | --------------------------*/ 83 | /* Menu 84 | --------------------------*/ 85 | /* Rate 86 | --------------------------*/ 87 | /* DatePicker 88 | --------------------------*/ 89 | /* Loading 90 | --------------------------*/ 91 | /* Scrollbar 92 | --------------------------*/ 93 | /* Carousel 94 | --------------------------*/ 95 | /* Collapse 96 | --------------------------*/ 97 | /* Transfer 98 | --------------------------*/ 99 | /* Header 100 | --------------------------*/ 101 | /* Footer 102 | --------------------------*/ 103 | /* Main 104 | --------------------------*/ 105 | /* Timeline 106 | --------------------------*/ 107 | /* Link 108 | --------------------------*/ 109 | /* Calendar 110 | --------------------------*/ 111 | /* Break-point 112 | --------------------------*/ 113 | body { 114 | font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; 115 | font-weight: 400; 116 | font-size: 18px; 117 | color: #222222; 118 | -webkit-font-smoothing: antialiased; } 119 | 120 | a { 121 | color: #8183e2; 122 | text-decoration: none; } 123 | a:hover, a:focus { 124 | color: #7173bf; } 125 | a:active { 126 | color: #7879cf; } 127 | 128 | h1, h2, h3, h4, h5, h6 { 129 | color: #EBEEF5; 130 | font-weight: inherit; } 131 | h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { 132 | margin-top: 0; } 133 | h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { 134 | margin-bottom: 0; } 135 | 136 | h1 { 137 | font-size: 24px; } 138 | 139 | h2 { 140 | font-size: 22px; } 141 | 142 | h3 { 143 | font-size: 20px; } 144 | 145 | h4, h5, h6, p { 146 | font-size: inherit; } 147 | 148 | p { 149 | line-height: 1.8; } 150 | p:first-child { 151 | margin-top: 0; } 152 | p:last-child { 153 | margin-bottom: 0; } 154 | 155 | sup, sub { 156 | font-size: 17px; } 157 | 158 | small { 159 | font-size: 16px; } 160 | 161 | hr { 162 | margin-top: 20px; 163 | margin-bottom: 20px; 164 | border: 0; 165 | border-top: 1px solid #eeeeee; } 166 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/spinner.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | .el-time-spinner { 123 | width: 100%; 124 | white-space: nowrap; } 125 | 126 | .el-spinner { 127 | display: inline-block; 128 | vertical-align: middle; } 129 | 130 | .el-spinner-inner { 131 | -webkit-animation: rotate 2s linear infinite; 132 | animation: rotate 2s linear infinite; 133 | width: 50px; 134 | height: 50px; } 135 | .el-spinner-inner .path { 136 | stroke: #ececec; 137 | stroke-linecap: round; 138 | -webkit-animation: dash 1.5s ease-in-out infinite; 139 | animation: dash 1.5s ease-in-out infinite; } 140 | 141 | @-webkit-keyframes rotate { 142 | 100% { 143 | -webkit-transform: rotate(360deg); 144 | transform: rotate(360deg); } } 145 | 146 | @keyframes rotate { 147 | 100% { 148 | -webkit-transform: rotate(360deg); 149 | transform: rotate(360deg); } } 150 | 151 | @-webkit-keyframes dash { 152 | 0% { 153 | stroke-dasharray: 1, 150; 154 | stroke-dashoffset: 0; } 155 | 50% { 156 | stroke-dasharray: 90, 150; 157 | stroke-dashoffset: -35; } 158 | 100% { 159 | stroke-dasharray: 90, 150; 160 | stroke-dashoffset: -124; } } 161 | 162 | @keyframes dash { 163 | 0% { 164 | stroke-dasharray: 1, 150; 165 | stroke-dashoffset: 0; } 166 | 50% { 167 | stroke-dasharray: 90, 150; 168 | stroke-dashoffset: -35; } 169 | 100% { 170 | stroke-dasharray: 90, 150; 171 | stroke-dashoffset: -124; } } 172 | -------------------------------------------------------------------------------- /lib/dev/loader.js: -------------------------------------------------------------------------------- 1 | /* 2 | MIT License http://www.opensource.org/licenses/mit-license.php 3 | Author Tobias Koppers @sokra 4 | Modified by Evan You @yyx990803 5 | */ 6 | const loaderUtils = require('loader-utils'); 7 | const path = require('path'); 8 | const hash = require('hash-sum'); 9 | const qs = require('querystring'); 10 | 11 | module.exports = function loader() {}; 12 | 13 | module.exports.pitch = function pitch(remainingRequest) { 14 | const isServer = this.target === 'node'; 15 | const isProduction = this.minimize || process.env.NODE_ENV === 'production'; 16 | const addStylesClientPath = loaderUtils.stringifyRequest(this, `!${path.join(__dirname, 'lib/addStylesClient.js')}`); 17 | const addStylesServerPath = loaderUtils.stringifyRequest(this, `!${path.join(__dirname, 'lib/addStylesServer.js')}`); 18 | const addStylesShadowPath = loaderUtils.stringifyRequest(this, `!${path.join(__dirname, 'lib/addStylesShadow.js')}`); 19 | 20 | const request = loaderUtils.stringifyRequest(this, `!!${remainingRequest}`); 21 | const relPath = path.relative(__dirname, this.resourcePath).replace(/\\/g, '/'); 22 | const id = JSON.stringify(hash(request + relPath)); 23 | const options = loaderUtils.getOptions(this) || {}; 24 | options.theme = /\btheme=(\w+?)\b/.exec(this.resourceQuery) && RegExp.$1; 25 | 26 | // direct css import from js --> direct, 27 | // or manually call `styles.__inject__(ssrContext)` with `manualInject` option 28 | // css import from vue file --> component lifecycle linked 29 | // style embedded in vue file --> component lifecycle linked 30 | const isVue = ( 31 | /"vue":true/.test(remainingRequest) 32 | || options.manualInject 33 | // eslint-disable-next-line eqeqeq 34 | || qs.parse(this.resourceQuery.slice(1)).vue != null // null || undefined 35 | ); 36 | 37 | const shared = [ 38 | '// style-loader: Adds some css to the DOM by adding a 222 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/radio-group.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-radio-group { 234 | display: inline-block; 235 | line-height: 1; 236 | vertical-align: middle; 237 | font-size: 0; } 238 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/footer.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-footer { 234 | padding: 0 20px; 235 | -webkit-box-sizing: border-box; 236 | box-sizing: border-box; 237 | -ms-flex-negative: 0; 238 | flex-shrink: 0; } 239 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/header.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-header { 234 | padding: 0 20px; 235 | -webkit-box-sizing: border-box; 236 | box-sizing: border-box; 237 | -ms-flex-negative: 0; 238 | flex-shrink: 0; } 239 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/timeline.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-timeline { 234 | margin: 0; 235 | font-size: 18px; 236 | list-style: none; } 237 | .el-timeline .el-timeline-item:last-child .el-timeline-item__tail { 238 | display: none; } 239 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/main.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-main { 234 | display: block; 235 | -webkit-box-flex: 1; 236 | -ms-flex: 1; 237 | flex: 1; 238 | -ms-flex-preferred-size: auto; 239 | flex-basis: auto; 240 | overflow: auto; 241 | -webkit-box-sizing: border-box; 242 | box-sizing: border-box; 243 | padding: 20px; } 244 | -------------------------------------------------------------------------------- /lib/prod/loader.js: -------------------------------------------------------------------------------- 1 | const NativeModule = require('module'); 2 | 3 | const loaderUtils = require('loader-utils'); 4 | const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin'); 5 | const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin'); 6 | const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin'); 7 | const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin'); 8 | const LimitChunkCountPlugin = require('webpack/lib/optimize/LimitChunkCountPlugin'); 9 | 10 | const CssDependency = require('./lib/CssDependency'); 11 | 12 | const PLUGIN_NAME = 'theme-css-extract-plugin'; 13 | 14 | function evalModuleCode(loaderContext, code, filename) { 15 | const module = new NativeModule(filename, loaderContext); 16 | 17 | module.paths = NativeModule._nodeModulePaths(loaderContext.context); 18 | module.filename = filename; 19 | module._compile(code, filename); 20 | 21 | return module.exports; 22 | } 23 | 24 | function findModuleById(modules, id) { 25 | // eslint-disable-next-line no-restricted-syntax 26 | for (const module of modules) { 27 | if (module.id === id) { 28 | return module; 29 | } 30 | } 31 | 32 | return null; 33 | } 34 | 35 | exports.pitch = function pitch(request) { 36 | const options = loaderUtils.getOptions(this) || {}; 37 | 38 | const loaders = this.loaders.slice(this.loaderIndex + 1); 39 | 40 | this.addDependency(this.resourcePath); 41 | 42 | const childFilename = '*'; 43 | // eslint-disable-next-line no-nested-ternary 44 | const publicPath = typeof options.publicPath === 'string' 45 | ? options.publicPath === '' || options.publicPath.endsWith('/') 46 | ? options.publicPath 47 | : `${options.publicPath}/` 48 | : typeof options.publicPath === 'function' 49 | ? options.publicPath(this.resourcePath, this.rootContext) 50 | : this._compilation.outputOptions.publicPath; 51 | const outputOptions = { 52 | filename: childFilename, 53 | publicPath, 54 | }; 55 | const childCompiler = this._compilation.createChildCompiler( 56 | `${PLUGIN_NAME} ${request}`, 57 | outputOptions, 58 | ); 59 | 60 | new NodeTemplatePlugin(outputOptions).apply(childCompiler); 61 | new LibraryTemplatePlugin(null, 'commonjs2', false, '', '').apply(childCompiler); 62 | new NodeTargetPlugin().apply(childCompiler); 63 | new SingleEntryPlugin(this.context, `!!${request}`, PLUGIN_NAME).apply( 64 | childCompiler, 65 | ); 66 | new LimitChunkCountPlugin({ maxChunks: 1 }).apply(childCompiler); 67 | 68 | childCompiler.hooks.thisCompilation.tap( 69 | `${PLUGIN_NAME} loader`, 70 | (compilation) => { 71 | compilation.hooks.normalModuleLoader.tap( 72 | `${PLUGIN_NAME} loader`, 73 | (loaderContext, module) => { 74 | // eslint-disable-next-line no-param-reassign 75 | loaderContext.emitFile = this.emitFile; 76 | 77 | if (module.request === request) { 78 | // eslint-disable-next-line no-param-reassign 79 | module.loaders = loaders.map((loader) => ({ 80 | loader: loader.path, 81 | options: loader.options, 82 | ident: loader.ident, 83 | })); 84 | } 85 | }, 86 | ); 87 | }, 88 | ); 89 | 90 | let source; 91 | 92 | childCompiler.hooks.afterCompile.tap(PLUGIN_NAME, (compilation) => { 93 | source = compilation.assets[childFilename] 94 | && compilation.assets[childFilename].source(); 95 | 96 | // Remove all chunk assets 97 | compilation.chunks.forEach((chunk) => { 98 | chunk.files.forEach((file) => { 99 | delete compilation.assets[file]; // eslint-disable-line no-param-reassign 100 | }); 101 | }); 102 | }); 103 | 104 | const callback = this.async(); 105 | 106 | childCompiler.runAsChild((err, entries, compilation) => { 107 | const addDependencies = (dependencies) => { 108 | if (!Array.isArray(dependencies) && dependencies) { 109 | throw new Error(`Exported value was not extracted as an array: ${JSON.stringify(dependencies)}`); 110 | } 111 | 112 | const identifierCountMap = new Map(); 113 | 114 | // eslint-disable-next-line no-restricted-syntax 115 | for (const dependency of dependencies) { 116 | const count = identifierCountMap.get(dependency.identifier) || 0; 117 | 118 | this._module.addDependency( 119 | new CssDependency(dependency, module.context, count), 120 | ); 121 | identifierCountMap.set(dependency.identifier, count + 1); 122 | } 123 | }; 124 | 125 | if (err) { 126 | return callback(err); 127 | } 128 | 129 | if (compilation.errors.length > 0) { 130 | return callback(compilation.errors[0]); 131 | } 132 | 133 | compilation.fileDependencies.forEach((dep) => { 134 | this.addDependency(dep); 135 | }); 136 | 137 | compilation.contextDependencies.forEach((dep) => { 138 | this.addContextDependency(dep); 139 | }); 140 | 141 | if (!source) { 142 | return callback(new Error('Didn\'t get a result from child compiler')); 143 | } 144 | 145 | let locals; 146 | 147 | try { 148 | let dependencies; 149 | const exports = evalModuleCode(this, source, request); 150 | locals = exports && exports.locals; 151 | if (!Array.isArray(exports)) { 152 | dependencies = [[null, exports]]; 153 | } else { 154 | dependencies = exports.map(([id, content, media, sourceMap]) => { 155 | const module = findModuleById(compilation.modules, id); 156 | 157 | return { 158 | identifier: module.identifier(), 159 | content, 160 | media, 161 | sourceMap, 162 | }; 163 | }); 164 | } 165 | addDependencies(dependencies); 166 | } catch (e) { 167 | return callback(e); 168 | } 169 | 170 | let result = `// extracted by ${PLUGIN_NAME}`; 171 | result += locals 172 | ? `\nmodule.exports = ${JSON.stringify(locals)};` 173 | : ''; 174 | 175 | return callback(null, result); 176 | }); 177 | }; 178 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/image.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-image__inner, .el-image__placeholder, .el-image__error { 234 | width: 100%; 235 | height: 100%; } 236 | 237 | .el-image { 238 | display: inline-block; } 239 | .el-image__inner { 240 | vertical-align: top; } 241 | .el-image__placeholder { 242 | background: #272822; } 243 | .el-image__error { 244 | display: -webkit-box; 245 | display: -ms-flexbox; 246 | display: flex; 247 | -webkit-box-pack: center; 248 | -ms-flex-pack: center; 249 | justify-content: center; 250 | -webkit-box-align: center; 251 | -ms-flex-align: center; 252 | align-items: center; 253 | font-size: 14px; 254 | background: #272822; 255 | color: #DCDFE6; 256 | vertical-align: middle; } 257 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/option.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-select-dropdown__item { 234 | font-size: 18px; 235 | padding: 0 20px; 236 | position: relative; 237 | white-space: nowrap; 238 | overflow: hidden; 239 | text-overflow: ellipsis; 240 | color: #EBEEF5; 241 | height: 34px; 242 | line-height: 34px; 243 | -webkit-box-sizing: border-box; 244 | box-sizing: border-box; 245 | cursor: pointer; } 246 | .el-select-dropdown__item.is-disabled { 247 | color: #DCDFE6; 248 | cursor: not-allowed; } 249 | .el-select-dropdown__item.is-disabled:hover { 250 | background-color: #333333; } 251 | .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { 252 | background-color: #272822; } 253 | .el-select-dropdown__item.selected { 254 | color: #8183e2; 255 | font-weight: bold; } 256 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/card.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-card { 234 | border-radius: 4px; 235 | border: 1px solid #606266; 236 | background-color: #333333; 237 | overflow: hidden; 238 | color: #F2F6FC; 239 | -webkit-transition: 0.3s; 240 | transition: 0.3s; } 241 | .el-card.is-always-shadow { 242 | -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 243 | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } 244 | .el-card.is-hover-shadow:hover, .el-card.is-hover-shadow:focus { 245 | -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 246 | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } 247 | .el-card__header { 248 | padding: 18px 20px; 249 | border-bottom: 1px solid #606266; 250 | -webkit-box-sizing: border-box; 251 | box-sizing: border-box; } 252 | .el-card__body { 253 | padding: 20px; } 254 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/option-group.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-select-group { 234 | margin: 0; 235 | padding: 0; } 236 | .el-select-group__wrap { 237 | position: relative; 238 | list-style: none; 239 | margin: 0; 240 | padding: 0; } 241 | .el-select-group__wrap:not(:last-of-type) { 242 | padding-bottom: 24px; } 243 | .el-select-group__wrap:not(:last-of-type)::after { 244 | content: ''; 245 | position: absolute; 246 | display: block; 247 | left: 20px; 248 | right: 20px; 249 | bottom: 12px; 250 | height: 1px; 251 | background: #909399; } 252 | .el-select-group__title { 253 | padding-left: 20px; 254 | font-size: 12px; 255 | color: #909399; 256 | line-height: 30px; } 257 | .el-select-group .el-select-dropdown__item { 258 | padding-left: 20px; } 259 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/rate.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-rate { 234 | height: 20px; 235 | line-height: 1; } 236 | .el-rate:focus, .el-rate:active { 237 | outline-width: 0; } 238 | .el-rate__item { 239 | display: inline-block; 240 | position: relative; 241 | font-size: 0; 242 | vertical-align: middle; } 243 | .el-rate__icon { 244 | position: relative; 245 | display: inline-block; 246 | font-size: 18px; 247 | margin-right: 6px; 248 | color: #DCDFE6; 249 | -webkit-transition: .3s; 250 | transition: .3s; } 251 | .el-rate__icon.hover { 252 | -webkit-transform: scale(1.15); 253 | transform: scale(1.15); } 254 | .el-rate__icon .path2 { 255 | position: absolute; 256 | left: 0; 257 | top: 0; } 258 | .el-rate__decimal { 259 | position: absolute; 260 | top: 0; 261 | left: 0; 262 | display: inline-block; 263 | overflow: hidden; } 264 | .el-rate__text { 265 | font-size: 18px; 266 | vertical-align: middle; } 267 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/divider.css: -------------------------------------------------------------------------------- 1 | /* Transition 2 | -------------------------- */ 3 | /* Color 4 | -------------------------- */ 5 | /* 53a8ff */ 6 | /* 66b1ff */ 7 | /* 79bbff */ 8 | /* 8cc5ff */ 9 | /* a0cfff */ 10 | /* b3d8ff */ 11 | /* c6e2ff */ 12 | /* d9ecff */ 13 | /* ecf5ff */ 14 | /* Link 15 | -------------------------- */ 16 | /* Border 17 | -------------------------- */ 18 | /* Fill 19 | -------------------------- */ 20 | /* Typography 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 | /* MessageBox 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 | /* Tree 71 | -------------------------- */ 72 | /* Dropdown 73 | -------------------------- */ 74 | /* Badge 75 | -------------------------- */ 76 | /* Card 77 | --------------------------*/ 78 | /* Slider 79 | --------------------------*/ 80 | /* Steps 81 | --------------------------*/ 82 | /* Menu 83 | --------------------------*/ 84 | /* Rate 85 | --------------------------*/ 86 | /* DatePicker 87 | --------------------------*/ 88 | /* Loading 89 | --------------------------*/ 90 | /* Scrollbar 91 | --------------------------*/ 92 | /* Carousel 93 | --------------------------*/ 94 | /* Collapse 95 | --------------------------*/ 96 | /* Transfer 97 | --------------------------*/ 98 | /* Header 99 | --------------------------*/ 100 | /* Footer 101 | --------------------------*/ 102 | /* Main 103 | --------------------------*/ 104 | /* Timeline 105 | --------------------------*/ 106 | /* Link 107 | --------------------------*/ 108 | /* Calendar 109 | --------------------------*/ 110 | /* Break-point 111 | --------------------------*/ 112 | /* BEM support Func 113 | -------------------------- */ 114 | /* Transition 115 | -------------------------- */ 116 | /* Color 117 | -------------------------- */ 118 | /* 53a8ff */ 119 | /* 66b1ff */ 120 | /* 79bbff */ 121 | /* 8cc5ff */ 122 | /* a0cfff */ 123 | /* b3d8ff */ 124 | /* c6e2ff */ 125 | /* d9ecff */ 126 | /* ecf5ff */ 127 | /* Link 128 | -------------------------- */ 129 | /* Border 130 | -------------------------- */ 131 | /* Fill 132 | -------------------------- */ 133 | /* Typography 134 | -------------------------- */ 135 | /* Size 136 | -------------------------- */ 137 | /* z-index 138 | -------------------------- */ 139 | /* Disable base 140 | -------------------------- */ 141 | /* Icon 142 | -------------------------- */ 143 | /* Checkbox 144 | -------------------------- */ 145 | /* Radio 146 | -------------------------- */ 147 | /* Select 148 | -------------------------- */ 149 | /* Alert 150 | -------------------------- */ 151 | /* MessageBox 152 | -------------------------- */ 153 | /* Message 154 | -------------------------- */ 155 | /* Notification 156 | -------------------------- */ 157 | /* Input 158 | -------------------------- */ 159 | /* Cascader 160 | -------------------------- */ 161 | /* Group 162 | -------------------------- */ 163 | /* Tab 164 | -------------------------- */ 165 | /* Button 166 | -------------------------- */ 167 | /* cascader 168 | -------------------------- */ 169 | /* Switch 170 | -------------------------- */ 171 | /* Dialog 172 | -------------------------- */ 173 | /* Table 174 | -------------------------- */ 175 | /* Pagination 176 | -------------------------- */ 177 | /* Popover 178 | -------------------------- */ 179 | /* Tooltip 180 | -------------------------- */ 181 | /* Tag 182 | -------------------------- */ 183 | /* Tree 184 | -------------------------- */ 185 | /* Dropdown 186 | -------------------------- */ 187 | /* Badge 188 | -------------------------- */ 189 | /* Card 190 | --------------------------*/ 191 | /* Slider 192 | --------------------------*/ 193 | /* Steps 194 | --------------------------*/ 195 | /* Menu 196 | --------------------------*/ 197 | /* Rate 198 | --------------------------*/ 199 | /* DatePicker 200 | --------------------------*/ 201 | /* Loading 202 | --------------------------*/ 203 | /* Scrollbar 204 | --------------------------*/ 205 | /* Carousel 206 | --------------------------*/ 207 | /* Collapse 208 | --------------------------*/ 209 | /* Transfer 210 | --------------------------*/ 211 | /* Header 212 | --------------------------*/ 213 | /* Footer 214 | --------------------------*/ 215 | /* Main 216 | --------------------------*/ 217 | /* Timeline 218 | --------------------------*/ 219 | /* Link 220 | --------------------------*/ 221 | /* Calendar 222 | --------------------------*/ 223 | /* Break-point 224 | --------------------------*/ 225 | /* Break-points 226 | -------------------------- */ 227 | /* Scrollbar 228 | -------------------------- */ 229 | /* Placeholder 230 | -------------------------- */ 231 | /* BEM 232 | -------------------------- */ 233 | .el-divider { 234 | background-color: #C0C4CC; 235 | position: relative; } 236 | .el-divider--horizontal { 237 | display: block; 238 | height: 1px; 239 | width: 100%; 240 | margin: 24px 0; } 241 | .el-divider--vertical { 242 | display: inline-block; 243 | width: 1px; 244 | height: 1em; 245 | margin: 0 8px; 246 | vertical-align: middle; 247 | position: relative; } 248 | .el-divider__text { 249 | position: absolute; 250 | background-color: #333333; 251 | padding: 0 20px; 252 | font-weight: 500; 253 | color: #F2F6FC; 254 | font-size: 14px; } 255 | .el-divider__text.is-left { 256 | left: 20px; 257 | -webkit-transform: translateY(-50%); 258 | transform: translateY(-50%); } 259 | .el-divider__text.is-center { 260 | left: 50%; 261 | -webkit-transform: translateX(-50%) translateY(-50%); 262 | transform: translateX(-50%) translateY(-50%); } 263 | .el-divider__text.is-right { 264 | right: 20px; 265 | -webkit-transform: translateY(-50%); 266 | transform: translateY(-50%); } 267 | -------------------------------------------------------------------------------- /lib/prod/lib/renderManifest.js: -------------------------------------------------------------------------------- 1 | const { ConcatSource, SourceMapSource, OriginalSource } = require('webpack-sources'); 2 | 3 | const MODULE_TYPE = 'css/theme-extract'; 4 | const PLUGIN_NAME = 'theme-css-extract-plugin'; 5 | 6 | const REGEXP_THEME = /\[([._-]*)theme([._-]*)]/; 7 | 8 | module.exports = function renderManifest(result, chunk, compilation, filename, ignoreOrder) { 9 | const cssModules = Array.from(chunk.modulesIterable).filter( 10 | (module) => module.type === MODULE_TYPE, 11 | ); 12 | 13 | if (cssModules.length > 0) { 14 | // eslint-disable-next-line prefer-spread 15 | result.push.apply(result, renderContentAssets( 16 | compilation, 17 | chunk, 18 | cssModules, 19 | compilation.runtimeTemplate.requestShortener, 20 | { 21 | filenameTemplate: filename, 22 | pathOptions: { 23 | chunk, 24 | contentHashType: MODULE_TYPE, 25 | }, 26 | identifier: `${PLUGIN_NAME}.${chunk.id}[theme]`, 27 | hash: chunk.contentHash[MODULE_TYPE], 28 | ignoreOrder, 29 | }, 30 | )); 31 | } 32 | }; 33 | 34 | function renderContentAssets(compilation, chunk, modules, requestShortener, options) { 35 | // Store dependencies for modules 36 | const moduleDependencies = new Map(modules.map((m) => [m, new Set()])); 37 | 38 | // Get ordered list of modules per chunk group 39 | // This loop also gathers dependencies from the ordered lists 40 | // Lists are in reverse order to allow to use Array.pop() 41 | const modulesByChunkGroup = Array.from(chunk.groupsIterable, (cg) => { 42 | const sortedModules = modules 43 | .map((m) => ({ 44 | module: m, 45 | index: cg.getModuleIndex2(m), 46 | })) 47 | .filter((item) => item.index !== undefined) 48 | .sort((a, b) => b.index - a.index) 49 | .map((item) => item.module); 50 | 51 | for (let i = 0; i < sortedModules.length; i++) { 52 | const set = moduleDependencies.get(sortedModules[i]); 53 | 54 | for (let j = i + 1; j < sortedModules.length; j++) { 55 | set.add(sortedModules[j]); 56 | } 57 | } 58 | 59 | return sortedModules; 60 | }); 61 | 62 | // set with already included modules in correct order 63 | const usedModules = new Set(); 64 | 65 | const unusedModulesFilter = (m) => !usedModules.has(m); 66 | 67 | while (usedModules.size < modules.length) { 68 | let success = false; 69 | let bestMatch; 70 | let bestMatchDeps; 71 | 72 | // get first module where dependencies are fulfilled 73 | // eslint-disable-next-line no-restricted-syntax 74 | for (const list of modulesByChunkGroup) { 75 | // skip and remove already added modules 76 | while (list.length > 0 && usedModules.has(list[list.length - 1])) { 77 | list.pop(); 78 | } 79 | 80 | // skip empty lists 81 | if (list.length !== 0) { 82 | const module = list[list.length - 1]; 83 | const deps = moduleDependencies.get(module); 84 | // determine dependencies that are not yet included 85 | const failedDeps = Array.from(deps).filter(unusedModulesFilter); 86 | 87 | // store best match for fallback behavior 88 | if (!bestMatchDeps || bestMatchDeps.length > failedDeps.length) { 89 | bestMatch = list; 90 | bestMatchDeps = failedDeps; 91 | } 92 | 93 | if (failedDeps.length === 0) { 94 | // use this module and remove it from list 95 | usedModules.add(list.pop()); 96 | success = true; 97 | break; 98 | } 99 | } 100 | } 101 | 102 | if (!success) { 103 | // no module found => there is a conflict 104 | // use list with fewest failed deps 105 | // and emit a warning 106 | const fallbackModule = bestMatch.pop(); 107 | if (!options.ignoreOrder) { 108 | compilation.warnings.push( 109 | new Error( 110 | `chunk ${chunk.name || chunk.id} [${PLUGIN_NAME}]\n` 111 | + 'Conflicting order between:\n' 112 | + ` * ${fallbackModule.readableIdentifier( 113 | requestShortener, 114 | )}\n` 115 | + `${bestMatchDeps 116 | .map((m) => ` * ${m.readableIdentifier(requestShortener)}`) 117 | .join('\n')}`, 118 | ), 119 | ); 120 | } 121 | 122 | usedModules.add(fallbackModule); 123 | } 124 | } 125 | 126 | const themes = []; 127 | 128 | // eslint-disable-next-line no-restricted-syntax 129 | for (const m of usedModules) { 130 | const source = new ConcatSource(); 131 | const externalsSource = new ConcatSource(); 132 | 133 | if (/^@import url/.test(m.content)) { 134 | // HACK for IE 135 | // http://stackoverflow.com/a/14676665/1458162 136 | let { content } = m; 137 | 138 | if (m.media) { 139 | // insert media into the @import 140 | // this is rar 141 | // TODO improve this and parse the CSS to support multiple medias 142 | content = content.replace(/;|\s*$/, m.media); 143 | } 144 | 145 | externalsSource.add(content); 146 | externalsSource.add('\n'); 147 | } else { 148 | if (m.media) { 149 | source.add(`@media ${m.media} {\n`); 150 | } 151 | 152 | if (m.sourceMap) { 153 | source.add( 154 | new SourceMapSource( 155 | m.content, 156 | m.readableIdentifier(requestShortener), 157 | m.sourceMap, 158 | ), 159 | ); 160 | } else { 161 | source.add( 162 | new OriginalSource( 163 | m.content, 164 | m.readableIdentifier(requestShortener), 165 | ), 166 | ); 167 | } 168 | 169 | source.add('\n'); 170 | 171 | if (m.media) { 172 | source.add('}\n'); 173 | } 174 | } 175 | 176 | const theme = m.theme || 'default'; 177 | if (!themes[theme]) { 178 | themes[theme] = new ConcatSource(externalsSource, source); 179 | themes.push(theme); 180 | } else { 181 | themes[theme] = new ConcatSource(themes[theme], externalsSource, source); 182 | } 183 | } 184 | 185 | return themes.map((theme) => { 186 | const resolveTemplate = (template) => { 187 | if (theme === 'default') { 188 | template = template.replace(REGEXP_THEME, ''); 189 | } else { 190 | template = template.replace(REGEXP_THEME, `$1${theme}$2`); 191 | } 192 | return `${template}?type=${MODULE_TYPE}&id=${chunk.id}&theme=${theme}`; 193 | }; 194 | 195 | return { 196 | render: () => themes[theme], 197 | filenameTemplate: resolveTemplate(options.filenameTemplate), 198 | pathOptions: options.pathOptions, 199 | identifier: options.identifier, 200 | hash: options.hash, 201 | }; 202 | }); 203 | } 204 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/badge.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-badge { 234 | position: relative; 235 | vertical-align: middle; 236 | display: inline-block; } 237 | .el-badge__content { 238 | background-color: #F56C6C; 239 | border-radius: 10px; 240 | color: #333333; 241 | display: inline-block; 242 | font-size: 12px; 243 | height: 18px; 244 | line-height: 18px; 245 | padding: 0 6px; 246 | text-align: center; 247 | white-space: nowrap; 248 | border: 1px solid #333333; } 249 | .el-badge__content.is-fixed { 250 | position: absolute; 251 | top: 0; 252 | right: 10px; 253 | -webkit-transform: translateY(-50%) translateX(100%); 254 | transform: translateY(-50%) translateX(100%); } 255 | .el-badge__content.is-fixed.is-dot { 256 | right: 5px; } 257 | .el-badge__content.is-dot { 258 | height: 8px; 259 | width: 8px; 260 | padding: 0; 261 | right: 0; 262 | border-radius: 50%; } 263 | .el-badge__content--primary { 264 | background-color: #8183e2; } 265 | .el-badge__content--success { 266 | background-color: #67C23A; } 267 | .el-badge__content--warning { 268 | background-color: #E6A23C; } 269 | .el-badge__content--info { 270 | background-color: #909399; } 271 | .el-badge__content--danger { 272 | background-color: #F56C6C; } 273 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/row.css: -------------------------------------------------------------------------------- 1 | /* Transition 2 | -------------------------- */ 3 | /* Color 4 | -------------------------- */ 5 | /* 53a8ff */ 6 | /* 66b1ff */ 7 | /* 79bbff */ 8 | /* 8cc5ff */ 9 | /* a0cfff */ 10 | /* b3d8ff */ 11 | /* c6e2ff */ 12 | /* d9ecff */ 13 | /* ecf5ff */ 14 | /* Link 15 | -------------------------- */ 16 | /* Border 17 | -------------------------- */ 18 | /* Fill 19 | -------------------------- */ 20 | /* Typography 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 | /* MessageBox 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 | /* Tree 71 | -------------------------- */ 72 | /* Dropdown 73 | -------------------------- */ 74 | /* Badge 75 | -------------------------- */ 76 | /* Card 77 | --------------------------*/ 78 | /* Slider 79 | --------------------------*/ 80 | /* Steps 81 | --------------------------*/ 82 | /* Menu 83 | --------------------------*/ 84 | /* Rate 85 | --------------------------*/ 86 | /* DatePicker 87 | --------------------------*/ 88 | /* Loading 89 | --------------------------*/ 90 | /* Scrollbar 91 | --------------------------*/ 92 | /* Carousel 93 | --------------------------*/ 94 | /* Collapse 95 | --------------------------*/ 96 | /* Transfer 97 | --------------------------*/ 98 | /* Header 99 | --------------------------*/ 100 | /* Footer 101 | --------------------------*/ 102 | /* Main 103 | --------------------------*/ 104 | /* Timeline 105 | --------------------------*/ 106 | /* Link 107 | --------------------------*/ 108 | /* Calendar 109 | --------------------------*/ 110 | /* Break-point 111 | --------------------------*/ 112 | /* BEM support Func 113 | -------------------------- */ 114 | /* Transition 115 | -------------------------- */ 116 | /* Color 117 | -------------------------- */ 118 | /* 53a8ff */ 119 | /* 66b1ff */ 120 | /* 79bbff */ 121 | /* 8cc5ff */ 122 | /* a0cfff */ 123 | /* b3d8ff */ 124 | /* c6e2ff */ 125 | /* d9ecff */ 126 | /* ecf5ff */ 127 | /* Link 128 | -------------------------- */ 129 | /* Border 130 | -------------------------- */ 131 | /* Fill 132 | -------------------------- */ 133 | /* Typography 134 | -------------------------- */ 135 | /* Size 136 | -------------------------- */ 137 | /* z-index 138 | -------------------------- */ 139 | /* Disable base 140 | -------------------------- */ 141 | /* Icon 142 | -------------------------- */ 143 | /* Checkbox 144 | -------------------------- */ 145 | /* Radio 146 | -------------------------- */ 147 | /* Select 148 | -------------------------- */ 149 | /* Alert 150 | -------------------------- */ 151 | /* MessageBox 152 | -------------------------- */ 153 | /* Message 154 | -------------------------- */ 155 | /* Notification 156 | -------------------------- */ 157 | /* Input 158 | -------------------------- */ 159 | /* Cascader 160 | -------------------------- */ 161 | /* Group 162 | -------------------------- */ 163 | /* Tab 164 | -------------------------- */ 165 | /* Button 166 | -------------------------- */ 167 | /* cascader 168 | -------------------------- */ 169 | /* Switch 170 | -------------------------- */ 171 | /* Dialog 172 | -------------------------- */ 173 | /* Table 174 | -------------------------- */ 175 | /* Pagination 176 | -------------------------- */ 177 | /* Popover 178 | -------------------------- */ 179 | /* Tooltip 180 | -------------------------- */ 181 | /* Tag 182 | -------------------------- */ 183 | /* Tree 184 | -------------------------- */ 185 | /* Dropdown 186 | -------------------------- */ 187 | /* Badge 188 | -------------------------- */ 189 | /* Card 190 | --------------------------*/ 191 | /* Slider 192 | --------------------------*/ 193 | /* Steps 194 | --------------------------*/ 195 | /* Menu 196 | --------------------------*/ 197 | /* Rate 198 | --------------------------*/ 199 | /* DatePicker 200 | --------------------------*/ 201 | /* Loading 202 | --------------------------*/ 203 | /* Scrollbar 204 | --------------------------*/ 205 | /* Carousel 206 | --------------------------*/ 207 | /* Collapse 208 | --------------------------*/ 209 | /* Transfer 210 | --------------------------*/ 211 | /* Header 212 | --------------------------*/ 213 | /* Footer 214 | --------------------------*/ 215 | /* Main 216 | --------------------------*/ 217 | /* Timeline 218 | --------------------------*/ 219 | /* Link 220 | --------------------------*/ 221 | /* Calendar 222 | --------------------------*/ 223 | /* Break-point 224 | --------------------------*/ 225 | /* Break-points 226 | -------------------------- */ 227 | /* Scrollbar 228 | -------------------------- */ 229 | /* Placeholder 230 | -------------------------- */ 231 | /* BEM 232 | -------------------------- */ 233 | .el-row { 234 | position: relative; 235 | -webkit-box-sizing: border-box; 236 | box-sizing: border-box; } 237 | .el-row::before, 238 | .el-row::after { 239 | display: table; 240 | content: ""; } 241 | .el-row::after { 242 | clear: both; } 243 | .el-row--flex { 244 | display: -webkit-box; 245 | display: -ms-flexbox; 246 | display: flex; } 247 | .el-row--flex:before, .el-row--flex:after { 248 | display: none; } 249 | .el-row--flex.is-justify-center { 250 | -webkit-box-pack: center; 251 | -ms-flex-pack: center; 252 | justify-content: center; } 253 | .el-row--flex.is-justify-end { 254 | -webkit-box-pack: end; 255 | -ms-flex-pack: end; 256 | justify-content: flex-end; } 257 | .el-row--flex.is-justify-space-between { 258 | -webkit-box-pack: justify; 259 | -ms-flex-pack: justify; 260 | justify-content: space-between; } 261 | .el-row--flex.is-justify-space-around { 262 | -ms-flex-pack: distribute; 263 | justify-content: space-around; } 264 | .el-row--flex.is-align-middle { 265 | -webkit-box-align: center; 266 | -ms-flex-align: center; 267 | align-items: center; } 268 | .el-row--flex.is-align-bottom { 269 | -webkit-box-align: end; 270 | -ms-flex-align: end; 271 | align-items: flex-end; } 272 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/display.css: -------------------------------------------------------------------------------- 1 | /* Transition 2 | -------------------------- */ 3 | /* Color 4 | -------------------------- */ 5 | /* 53a8ff */ 6 | /* 66b1ff */ 7 | /* 79bbff */ 8 | /* 8cc5ff */ 9 | /* a0cfff */ 10 | /* b3d8ff */ 11 | /* c6e2ff */ 12 | /* d9ecff */ 13 | /* ecf5ff */ 14 | /* Link 15 | -------------------------- */ 16 | /* Border 17 | -------------------------- */ 18 | /* Fill 19 | -------------------------- */ 20 | /* Typography 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 | /* MessageBox 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 | /* Tree 71 | -------------------------- */ 72 | /* Dropdown 73 | -------------------------- */ 74 | /* Badge 75 | -------------------------- */ 76 | /* Card 77 | --------------------------*/ 78 | /* Slider 79 | --------------------------*/ 80 | /* Steps 81 | --------------------------*/ 82 | /* Menu 83 | --------------------------*/ 84 | /* Rate 85 | --------------------------*/ 86 | /* DatePicker 87 | --------------------------*/ 88 | /* Loading 89 | --------------------------*/ 90 | /* Scrollbar 91 | --------------------------*/ 92 | /* Carousel 93 | --------------------------*/ 94 | /* Collapse 95 | --------------------------*/ 96 | /* Transfer 97 | --------------------------*/ 98 | /* Header 99 | --------------------------*/ 100 | /* Footer 101 | --------------------------*/ 102 | /* Main 103 | --------------------------*/ 104 | /* Timeline 105 | --------------------------*/ 106 | /* Link 107 | --------------------------*/ 108 | /* Calendar 109 | --------------------------*/ 110 | /* Break-point 111 | --------------------------*/ 112 | /* BEM support Func 113 | -------------------------- */ 114 | /* Transition 115 | -------------------------- */ 116 | /* Color 117 | -------------------------- */ 118 | /* 53a8ff */ 119 | /* 66b1ff */ 120 | /* 79bbff */ 121 | /* 8cc5ff */ 122 | /* a0cfff */ 123 | /* b3d8ff */ 124 | /* c6e2ff */ 125 | /* d9ecff */ 126 | /* ecf5ff */ 127 | /* Link 128 | -------------------------- */ 129 | /* Border 130 | -------------------------- */ 131 | /* Fill 132 | -------------------------- */ 133 | /* Typography 134 | -------------------------- */ 135 | /* Size 136 | -------------------------- */ 137 | /* z-index 138 | -------------------------- */ 139 | /* Disable base 140 | -------------------------- */ 141 | /* Icon 142 | -------------------------- */ 143 | /* Checkbox 144 | -------------------------- */ 145 | /* Radio 146 | -------------------------- */ 147 | /* Select 148 | -------------------------- */ 149 | /* Alert 150 | -------------------------- */ 151 | /* MessageBox 152 | -------------------------- */ 153 | /* Message 154 | -------------------------- */ 155 | /* Notification 156 | -------------------------- */ 157 | /* Input 158 | -------------------------- */ 159 | /* Cascader 160 | -------------------------- */ 161 | /* Group 162 | -------------------------- */ 163 | /* Tab 164 | -------------------------- */ 165 | /* Button 166 | -------------------------- */ 167 | /* cascader 168 | -------------------------- */ 169 | /* Switch 170 | -------------------------- */ 171 | /* Dialog 172 | -------------------------- */ 173 | /* Table 174 | -------------------------- */ 175 | /* Pagination 176 | -------------------------- */ 177 | /* Popover 178 | -------------------------- */ 179 | /* Tooltip 180 | -------------------------- */ 181 | /* Tag 182 | -------------------------- */ 183 | /* Tree 184 | -------------------------- */ 185 | /* Dropdown 186 | -------------------------- */ 187 | /* Badge 188 | -------------------------- */ 189 | /* Card 190 | --------------------------*/ 191 | /* Slider 192 | --------------------------*/ 193 | /* Steps 194 | --------------------------*/ 195 | /* Menu 196 | --------------------------*/ 197 | /* Rate 198 | --------------------------*/ 199 | /* DatePicker 200 | --------------------------*/ 201 | /* Loading 202 | --------------------------*/ 203 | /* Scrollbar 204 | --------------------------*/ 205 | /* Carousel 206 | --------------------------*/ 207 | /* Collapse 208 | --------------------------*/ 209 | /* Transfer 210 | --------------------------*/ 211 | /* Header 212 | --------------------------*/ 213 | /* Footer 214 | --------------------------*/ 215 | /* Main 216 | --------------------------*/ 217 | /* Timeline 218 | --------------------------*/ 219 | /* Link 220 | --------------------------*/ 221 | /* Calendar 222 | --------------------------*/ 223 | /* Break-point 224 | --------------------------*/ 225 | /* Break-points 226 | -------------------------- */ 227 | /* Scrollbar 228 | -------------------------- */ 229 | /* Placeholder 230 | -------------------------- */ 231 | /* BEM 232 | -------------------------- */ 233 | @media only screen and (max-width: 767px) { 234 | .hidden-xs-only { 235 | display: none !important; } } 236 | 237 | @media only screen and (min-width: 768px) { 238 | .hidden-sm-and-up { 239 | display: none !important; } } 240 | 241 | @media only screen and (min-width: 768px) and (max-width: 991px) { 242 | .hidden-sm-only { 243 | display: none !important; } } 244 | 245 | @media only screen and (max-width: 991px) { 246 | .hidden-sm-and-down { 247 | display: none !important; } } 248 | 249 | @media only screen and (min-width: 992px) { 250 | .hidden-md-and-up { 251 | display: none !important; } } 252 | 253 | @media only screen and (min-width: 992px) and (max-width: 1199px) { 254 | .hidden-md-only { 255 | display: none !important; } } 256 | 257 | @media only screen and (max-width: 1199px) { 258 | .hidden-md-and-down { 259 | display: none !important; } } 260 | 261 | @media only screen and (min-width: 1200px) { 262 | .hidden-lg-and-up { 263 | display: none !important; } } 264 | 265 | @media only screen and (min-width: 1200px) and (max-width: 1919px) { 266 | .hidden-lg-only { 267 | display: none !important; } } 268 | 269 | @media only screen and (max-width: 1919px) { 270 | .hidden-lg-and-down { 271 | display: none !important; } } 272 | 273 | @media only screen and (min-width: 1920px) { 274 | .hidden-xl-only { 275 | display: none !important; } } 276 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/carousel-item.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-carousel__item { 234 | position: absolute; 235 | top: 0; 236 | left: 0; 237 | width: 100%; 238 | height: 100%; 239 | display: inline-block; 240 | overflow: hidden; 241 | z-index: 0; } 242 | .el-carousel__item.is-active { 243 | z-index: 2; } 244 | .el-carousel__item.is-animating { 245 | -webkit-transition: -webkit-transform .4s ease-in-out; 246 | transition: -webkit-transform .4s ease-in-out; 247 | transition: transform .4s ease-in-out; 248 | transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out; } 249 | .el-carousel__item--card { 250 | width: 50%; 251 | -webkit-transition: -webkit-transform .4s ease-in-out; 252 | transition: -webkit-transform .4s ease-in-out; 253 | transition: transform .4s ease-in-out; 254 | transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out; } 255 | .el-carousel__item--card.is-in-stage { 256 | cursor: pointer; 257 | z-index: 1; } 258 | .el-carousel__item--card.is-in-stage:hover .el-carousel__mask, 259 | .el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask { 260 | opacity: 0.12; } 261 | .el-carousel__item--card.is-active { 262 | z-index: 2; } 263 | 264 | .el-carousel__mask { 265 | position: absolute; 266 | width: 100%; 267 | height: 100%; 268 | top: 0; 269 | left: 0; 270 | background-color: #333333; 271 | opacity: 0.24; 272 | -webkit-transition: .2s; 273 | transition: .2s; } 274 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/breadcrumb.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-breadcrumb { 234 | font-size: 14px; 235 | line-height: 1; } 236 | .el-breadcrumb::before, 237 | .el-breadcrumb::after { 238 | display: table; 239 | content: ""; } 240 | .el-breadcrumb::after { 241 | clear: both; } 242 | .el-breadcrumb__separator { 243 | margin: 0 9px; 244 | font-weight: bold; 245 | color: #DCDFE6; } 246 | .el-breadcrumb__separator[class*=icon] { 247 | margin: 0 6px; 248 | font-weight: normal; } 249 | .el-breadcrumb__item { 250 | float: left; } 251 | .el-breadcrumb__inner { 252 | color: #EBEEF5; } 253 | .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a { 254 | font-weight: bold; 255 | text-decoration: none; 256 | -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); 257 | transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); 258 | color: #F2F6FC; } 259 | .el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover { 260 | color: #8183e2; 261 | cursor: pointer; } 262 | .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, 263 | .el-breadcrumb__item:last-child .el-breadcrumb__inner a, 264 | .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover { 265 | font-weight: normal; 266 | color: #EBEEF5; 267 | cursor: text; } 268 | .el-breadcrumb__item:last-child .el-breadcrumb__separator { 269 | display: none; } 270 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/scrollbar.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-scrollbar { 234 | overflow: hidden; 235 | position: relative; } 236 | .el-scrollbar:hover > .el-scrollbar__bar, .el-scrollbar:active > .el-scrollbar__bar, .el-scrollbar:focus > .el-scrollbar__bar { 237 | opacity: 1; 238 | -webkit-transition: opacity 340ms ease-out; 239 | transition: opacity 340ms ease-out; } 240 | .el-scrollbar__wrap { 241 | overflow: scroll; 242 | height: 100%; } 243 | .el-scrollbar__wrap--hidden-default::-webkit-scrollbar { 244 | width: 0; 245 | height: 0; } 246 | .el-scrollbar__thumb { 247 | position: relative; 248 | display: block; 249 | width: 0; 250 | height: 0; 251 | cursor: pointer; 252 | border-radius: inherit; 253 | background-color: rgba(228, 231, 237, 0.3); 254 | -webkit-transition: .3s background-color; 255 | transition: .3s background-color; } 256 | .el-scrollbar__thumb:hover { 257 | background-color: rgba(228, 231, 237, 0.5); } 258 | .el-scrollbar__bar { 259 | position: absolute; 260 | right: 2px; 261 | bottom: 2px; 262 | z-index: 1; 263 | border-radius: 4px; 264 | opacity: 0; 265 | -webkit-transition: opacity 120ms ease-out; 266 | transition: opacity 120ms ease-out; } 267 | .el-scrollbar__bar.is-vertical { 268 | width: 6px; 269 | top: 2px; } 270 | .el-scrollbar__bar.is-vertical > div { 271 | width: 100%; } 272 | .el-scrollbar__bar.is-horizontal { 273 | height: 6px; 274 | left: 2px; } 275 | .el-scrollbar__bar.is-horizontal > div { 276 | height: 100%; } 277 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/calendar.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-calendar { 234 | background-color: #fff; } 235 | .el-calendar__header { 236 | display: -webkit-box; 237 | display: -ms-flexbox; 238 | display: flex; 239 | -webkit-box-pack: justify; 240 | -ms-flex-pack: justify; 241 | justify-content: space-between; 242 | padding: 12px 20px; 243 | border-bottom: 1px solid #606266; } 244 | .el-calendar__title { 245 | color: #000000; 246 | -ms-flex-item-align: center; 247 | align-self: center; } 248 | .el-calendar__body { 249 | padding: 12px 20px 35px; } 250 | 251 | .el-calendar-table { 252 | table-layout: fixed; 253 | width: 100%; } 254 | .el-calendar-table thead th { 255 | padding: 12px 0; 256 | color: #EBEEF5; 257 | font-weight: normal; } 258 | .el-calendar-table:not(.is-range) td.prev, 259 | .el-calendar-table:not(.is-range) td.next { 260 | color: #DCDFE6; } 261 | .el-calendar-table td { 262 | border-bottom: 1px solid #606266; 263 | border-right: 1px solid #606266; 264 | vertical-align: top; 265 | -webkit-transition: background-color 0.2s ease; 266 | transition: background-color 0.2s ease; } 267 | .el-calendar-table td.is-selected { 268 | background-color: #F2F8FE; } 269 | .el-calendar-table td.is-today { 270 | color: #8183e2; } 271 | .el-calendar-table tr:first-child td { 272 | border-top: 1px solid #606266; } 273 | .el-calendar-table tr td:first-child { 274 | border-left: 1px solid #606266; } 275 | .el-calendar-table tr.el-calendar-table__row--hide-border td { 276 | border-top: none; } 277 | .el-calendar-table .el-calendar-day { 278 | -webkit-box-sizing: border-box; 279 | box-sizing: border-box; 280 | padding: 8px; 281 | height: 85px; } 282 | .el-calendar-table .el-calendar-day:hover { 283 | cursor: pointer; 284 | background-color: #F2F8FE; } 285 | -------------------------------------------------------------------------------- /example/src/styles/theme-dark/timeline-item.css: -------------------------------------------------------------------------------- 1 | /* BEM support Func 2 | -------------------------- */ 3 | /* Transition 4 | -------------------------- */ 5 | /* Color 6 | -------------------------- */ 7 | /* 53a8ff */ 8 | /* 66b1ff */ 9 | /* 79bbff */ 10 | /* 8cc5ff */ 11 | /* a0cfff */ 12 | /* b3d8ff */ 13 | /* c6e2ff */ 14 | /* d9ecff */ 15 | /* ecf5ff */ 16 | /* Link 17 | -------------------------- */ 18 | /* Border 19 | -------------------------- */ 20 | /* Fill 21 | -------------------------- */ 22 | /* Typography 23 | -------------------------- */ 24 | /* Size 25 | -------------------------- */ 26 | /* z-index 27 | -------------------------- */ 28 | /* Disable base 29 | -------------------------- */ 30 | /* Icon 31 | -------------------------- */ 32 | /* Checkbox 33 | -------------------------- */ 34 | /* Radio 35 | -------------------------- */ 36 | /* Select 37 | -------------------------- */ 38 | /* Alert 39 | -------------------------- */ 40 | /* MessageBox 41 | -------------------------- */ 42 | /* Message 43 | -------------------------- */ 44 | /* Notification 45 | -------------------------- */ 46 | /* Input 47 | -------------------------- */ 48 | /* Cascader 49 | -------------------------- */ 50 | /* Group 51 | -------------------------- */ 52 | /* Tab 53 | -------------------------- */ 54 | /* Button 55 | -------------------------- */ 56 | /* cascader 57 | -------------------------- */ 58 | /* Switch 59 | -------------------------- */ 60 | /* Dialog 61 | -------------------------- */ 62 | /* Table 63 | -------------------------- */ 64 | /* Pagination 65 | -------------------------- */ 66 | /* Popover 67 | -------------------------- */ 68 | /* Tooltip 69 | -------------------------- */ 70 | /* Tag 71 | -------------------------- */ 72 | /* Tree 73 | -------------------------- */ 74 | /* Dropdown 75 | -------------------------- */ 76 | /* Badge 77 | -------------------------- */ 78 | /* Card 79 | --------------------------*/ 80 | /* Slider 81 | --------------------------*/ 82 | /* Steps 83 | --------------------------*/ 84 | /* Menu 85 | --------------------------*/ 86 | /* Rate 87 | --------------------------*/ 88 | /* DatePicker 89 | --------------------------*/ 90 | /* Loading 91 | --------------------------*/ 92 | /* Scrollbar 93 | --------------------------*/ 94 | /* Carousel 95 | --------------------------*/ 96 | /* Collapse 97 | --------------------------*/ 98 | /* Transfer 99 | --------------------------*/ 100 | /* Header 101 | --------------------------*/ 102 | /* Footer 103 | --------------------------*/ 104 | /* Main 105 | --------------------------*/ 106 | /* Timeline 107 | --------------------------*/ 108 | /* Link 109 | --------------------------*/ 110 | /* Calendar 111 | --------------------------*/ 112 | /* Break-point 113 | --------------------------*/ 114 | /* Break-points 115 | -------------------------- */ 116 | /* Scrollbar 117 | -------------------------- */ 118 | /* Placeholder 119 | -------------------------- */ 120 | /* BEM 121 | -------------------------- */ 122 | /* Transition 123 | -------------------------- */ 124 | /* Color 125 | -------------------------- */ 126 | /* 53a8ff */ 127 | /* 66b1ff */ 128 | /* 79bbff */ 129 | /* 8cc5ff */ 130 | /* a0cfff */ 131 | /* b3d8ff */ 132 | /* c6e2ff */ 133 | /* d9ecff */ 134 | /* ecf5ff */ 135 | /* Link 136 | -------------------------- */ 137 | /* Border 138 | -------------------------- */ 139 | /* Fill 140 | -------------------------- */ 141 | /* Typography 142 | -------------------------- */ 143 | /* Size 144 | -------------------------- */ 145 | /* z-index 146 | -------------------------- */ 147 | /* Disable base 148 | -------------------------- */ 149 | /* Icon 150 | -------------------------- */ 151 | /* Checkbox 152 | -------------------------- */ 153 | /* Radio 154 | -------------------------- */ 155 | /* Select 156 | -------------------------- */ 157 | /* Alert 158 | -------------------------- */ 159 | /* MessageBox 160 | -------------------------- */ 161 | /* Message 162 | -------------------------- */ 163 | /* Notification 164 | -------------------------- */ 165 | /* Input 166 | -------------------------- */ 167 | /* Cascader 168 | -------------------------- */ 169 | /* Group 170 | -------------------------- */ 171 | /* Tab 172 | -------------------------- */ 173 | /* Button 174 | -------------------------- */ 175 | /* cascader 176 | -------------------------- */ 177 | /* Switch 178 | -------------------------- */ 179 | /* Dialog 180 | -------------------------- */ 181 | /* Table 182 | -------------------------- */ 183 | /* Pagination 184 | -------------------------- */ 185 | /* Popover 186 | -------------------------- */ 187 | /* Tooltip 188 | -------------------------- */ 189 | /* Tag 190 | -------------------------- */ 191 | /* Tree 192 | -------------------------- */ 193 | /* Dropdown 194 | -------------------------- */ 195 | /* Badge 196 | -------------------------- */ 197 | /* Card 198 | --------------------------*/ 199 | /* Slider 200 | --------------------------*/ 201 | /* Steps 202 | --------------------------*/ 203 | /* Menu 204 | --------------------------*/ 205 | /* Rate 206 | --------------------------*/ 207 | /* DatePicker 208 | --------------------------*/ 209 | /* Loading 210 | --------------------------*/ 211 | /* Scrollbar 212 | --------------------------*/ 213 | /* Carousel 214 | --------------------------*/ 215 | /* Collapse 216 | --------------------------*/ 217 | /* Transfer 218 | --------------------------*/ 219 | /* Header 220 | --------------------------*/ 221 | /* Footer 222 | --------------------------*/ 223 | /* Main 224 | --------------------------*/ 225 | /* Timeline 226 | --------------------------*/ 227 | /* Link 228 | --------------------------*/ 229 | /* Calendar 230 | --------------------------*/ 231 | /* Break-point 232 | --------------------------*/ 233 | .el-timeline-item { 234 | position: relative; 235 | padding-bottom: 20px; } 236 | .el-timeline-item__wrapper { 237 | position: relative; 238 | padding-left: 28px; 239 | top: -3px; } 240 | .el-timeline-item__tail { 241 | position: absolute; 242 | left: 4px; 243 | height: 100%; 244 | border-left: 2px solid #909399; } 245 | .el-timeline-item__icon { 246 | color: #333333; 247 | font-size: 16px; } 248 | .el-timeline-item__node { 249 | position: absolute; 250 | background-color: #909399; 251 | border-radius: 50%; 252 | display: -webkit-box; 253 | display: -ms-flexbox; 254 | display: flex; 255 | -webkit-box-pack: center; 256 | -ms-flex-pack: center; 257 | justify-content: center; 258 | -webkit-box-align: center; 259 | -ms-flex-align: center; 260 | align-items: center; } 261 | .el-timeline-item__node--normal { 262 | left: -1px; 263 | width: 12px; 264 | height: 12px; } 265 | .el-timeline-item__node--large { 266 | left: -2px; 267 | width: 14px; 268 | height: 14px; } 269 | .el-timeline-item__node--primary { 270 | background-color: #8183e2; } 271 | .el-timeline-item__node--success { 272 | background-color: #67C23A; } 273 | .el-timeline-item__node--warning { 274 | background-color: #E6A23C; } 275 | .el-timeline-item__node--danger { 276 | background-color: #F56C6C; } 277 | .el-timeline-item__node--info { 278 | background-color: #909399; } 279 | .el-timeline-item__dot { 280 | position: absolute; 281 | display: -webkit-box; 282 | display: -ms-flexbox; 283 | display: flex; 284 | -webkit-box-pack: center; 285 | -ms-flex-pack: center; 286 | justify-content: center; 287 | -webkit-box-align: center; 288 | -ms-flex-align: center; 289 | align-items: center; } 290 | .el-timeline-item__content { 291 | color: #F2F6FC; } 292 | .el-timeline-item__timestamp { 293 | color: #E4E7ED; 294 | line-height: 1; 295 | font-size: 16px; } 296 | .el-timeline-item__timestamp.is-top { 297 | margin-bottom: 8px; 298 | padding-top: 4px; } 299 | .el-timeline-item__timestamp.is-bottom { 300 | margin-top: 8px; } 301 | --------------------------------------------------------------------------------