├── src ├── component │ ├── page2 │ │ ├── page2.html │ │ └── page2.ts │ ├── header │ │ ├── header.ts │ │ └── header.html │ ├── aggregates │ │ ├── aggregstes.ts │ │ └── aggregates.html │ └── page1 │ │ ├── page1.ts │ │ └── page1.html ├── routes.ts ├── app.html └── app.ts ├── .gitignore ├── warning.png ├── theme ├── fonts │ ├── element-icons.eot │ ├── element-icons.ttf │ └── element-icons.woff ├── form-item.css ├── menu-item.css ├── radio-group.css ├── submenu.css ├── tab-pane.css ├── breadcrumb-item.css ├── button-group.css ├── checkbox-group.css ├── collapse-item.css ├── dropdown-item.css ├── dropdown-menu.css ├── menu-item-group.css ├── radio-button.css ├── element-variables.css ├── steps.css ├── option-group.css ├── card.css ├── icon.css ├── spinner.css ├── badge.css ├── rate.css ├── carousel-item.css ├── option.css ├── row.css ├── collapse.css ├── breadcrumb.css ├── scrollbar.css ├── select-dropdown.css ├── loading.css ├── alert.css ├── notification.css ├── message.css ├── form.css ├── tree.css ├── progress.css ├── carousel.css ├── tag.css ├── dialog.css ├── popover.css └── switch.css ├── tsconfig.json ├── index.html ├── main.ts ├── package.json ├── static └── css │ └── reset.css ├── webpack.config.js ├── 2.0.0 └── README.md /src/component/page2/page2.html: -------------------------------------------------------------------------------- 1 |
Page2
-------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | .idea/ 5 | npm-debug.log 6 | -------------------------------------------------------------------------------- /warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ulivz/vue-typescript-template-ui/HEAD/warning.png -------------------------------------------------------------------------------- /theme/fonts/element-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ulivz/vue-typescript-template-ui/HEAD/theme/fonts/element-icons.eot -------------------------------------------------------------------------------- /theme/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ulivz/vue-typescript-template-ui/HEAD/theme/fonts/element-icons.ttf -------------------------------------------------------------------------------- /theme/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ulivz/vue-typescript-template-ui/HEAD/theme/fonts/element-icons.woff -------------------------------------------------------------------------------- /src/component/page2/page2.ts: -------------------------------------------------------------------------------- 1 | import * as Vue from 'vue'; 2 | 3 | export default Vue.extend({ 4 | template: require('./page2.html') 5 | }) -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "moduleResolution": "node", 5 | "sourceMap": true 6 | } 7 | } -------------------------------------------------------------------------------- /src/component/header/header.ts: -------------------------------------------------------------------------------- 1 | import * as Vue from 'vue'; 2 | 3 | export default Vue.extend({ 4 | template: require('./header.html'), 5 | methods: { 6 | handleSelect(key, keyPath) { 7 | console.log(key, keyPath); 8 | } 9 | } 10 | }) -------------------------------------------------------------------------------- /src/routes.ts: -------------------------------------------------------------------------------- 1 | import page1 from './component/page1/page1'; 2 | import page2 from './component/page2/page2'; 3 | 4 | const routes = [ 5 | { 6 | path: '/page1', 7 | component: page1 8 | }, 9 | { 10 | path: '/page2', 11 | component: page2 12 | } 13 | ] 14 | 15 | export default routes; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-typeScript-template 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/component/aggregates/aggregstes.ts: -------------------------------------------------------------------------------- 1 | import * as Vue from 'vue'; 2 | 3 | export default Vue.extend({ 4 | template: require('./aggregates.html'), 5 | methods: { 6 | handleOpen(key, keyPath) { 7 | console.log(key, keyPath); 8 | }, 9 | handleClose(key, keyPath) { 10 | console.log(key, keyPath); 11 | } 12 | }, 13 | }) -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |
7 | 8 |
9 | 10 |
11 |
12 |
13 | 15 |
-------------------------------------------------------------------------------- /main.ts: -------------------------------------------------------------------------------- 1 | import * as Vue from 'vue' 2 | import * as VueRouter from 'vue-router' 3 | import App from './src/app' 4 | import * as ElementUI from 'element-ui' 5 | import './theme/index.css' 6 | import routes from './src/routes' 7 | 8 | Vue.use(ElementUI) 9 | Vue.use(VueRouter) 10 | 11 | console.log(routes) 12 | 13 | const router = new VueRouter({ 14 | routes: routes 15 | }) 16 | 17 | const app = new Vue({ 18 | router: router, 19 | render: h => h(App) 20 | }).$mount('#app') 21 | -------------------------------------------------------------------------------- /src/component/page1/page1.ts: -------------------------------------------------------------------------------- 1 | import * as Vue from 'vue'; 2 | 3 | export default Vue.extend({ 4 | template: require('./page1.html'), 5 | data() { 6 | return { 7 | form: { 8 | name: '', 9 | region: '', 10 | date1: '', 11 | date2: '', 12 | delivery: false, 13 | type: [], 14 | resource: '', 15 | desc: '' 16 | } 17 | } 18 | }, 19 | methods: { 20 | onSubmit() { 21 | console.log('submit!'); 22 | } 23 | } 24 | }) -------------------------------------------------------------------------------- /src/component/header/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 首页 5 | 6 | 7 | JavaScript 8 | TypeScript 9 | AngularJS 10 | Vue 11 | React 12 | 13 | Github 14 | 15 |
16 |
-------------------------------------------------------------------------------- /src/app.ts: -------------------------------------------------------------------------------- 1 | import * as Vue from 'vue'; 2 | import header from './component/header/header'; 3 | import aggregate from './component/aggregates/aggregstes'; 4 | 5 | export default Vue.extend({ 6 | template: require('./app.html'), 7 | data() { 8 | return { 9 | radio: '1', 10 | value1: 0 11 | } 12 | }, 13 | methods: { 14 | handleSelect(key, keyPath) { 15 | console.log(key, keyPath); 16 | }, 17 | handleOpen(key, keyPath) { 18 | console.log(key, keyPath); 19 | }, 20 | handleClose(key, keyPath) { 21 | console.log(key, keyPath); 22 | } 23 | }, 24 | mounted() { 25 | console.log(this); 26 | }, 27 | components: { 28 | 'admin-header': header, 29 | aggregate 30 | } 31 | }); -------------------------------------------------------------------------------- /src/component/aggregates/aggregates.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Go Page1 8 | 9 | 10 | Go Page2 11 | 12 | 13 | 14 | 实体2 15 | 实体3 16 | 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-typescript-template-ui", 3 | "description": "A Vue project template developed with TypeScript 2.0 and element-ui", 4 | "version": "1.0.0", 5 | "author": "toxichl", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "@types/es6-promise": "0.0.32", 13 | "@types/lodash": "^4.14.52", 14 | "@types/requirejs": "^2.0.0", 15 | "element-theme": "^0.7.1", 16 | "element-ui": "^1.1.6", 17 | "vue": "^2.0.0", 18 | "vue-router": "^2.0.0" 19 | }, 20 | "devDependencies": { 21 | "cross-env": "^3.0.0", 22 | "css-loader": "^0.23.1", 23 | "element-theme-default": "^1.1.6", 24 | "file-loader": "^0.8.5", 25 | "html-loader": "^0.4.3", 26 | "style-loader": "^0.13.1", 27 | "ts-loader": "^2.0.0", 28 | "typescript": "^2.0.0", 29 | "webpack": "^2.2.0", 30 | "webpack-dev-server": "^2.2.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/component/page1/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | - 16 | 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 | -------------------------------------------------------------------------------- /static/css/reset.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS Reset v2.0 3 | * http://meyerweb.com/eric/tools/css/reset/ 4 | */ 5 | html, body, div, span, applet, object, iframe, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, img, ins, kbd, q, s, samp, 9 | small, strike, strong, sub, sup, tt, var, 10 | b, u, i, center, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td, 14 | article, aside, canvas, details, embed, 15 | figure, figcaption, footer, header, hgroup, 16 | menu, nav, output, ruby, section, summary, 17 | time, mark, audio, video { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | font-size: 100%; 22 | font: inherit; 23 | vertical-align: baseline; 24 | } 25 | 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | 32 | body { 33 | line-height: 1; 34 | } 35 | 36 | ol, ul { 37 | list-style: none; 38 | } 39 | 40 | blockquote, q { 41 | quotes: none; 42 | } 43 | 44 | blockquote:before, blockquote:after, 45 | q:before, q:after { 46 | content: ''; 47 | content: none; 48 | } 49 | 50 | table { 51 | border-collapse: collapse; 52 | border-spacing: 0; 53 | } 54 | 55 | 56 | /* custom */ 57 | a { 58 | color: #7e8c8d; 59 | -webkit-backface-visibility: hidden; 60 | text-decoration: none 61 | } 62 | 63 | li { 64 | list-style: none; 65 | } 66 | 67 | ::-webkit-scrollbar { 68 | width: 5px; 69 | height: 5px; 70 | } 71 | 72 | ::-webkit-scrollbar-track-piece { 73 | background-color: rgba(0, 0, 0, 0.2); 74 | } 75 | 76 | ::-webkit-scrollbar-thumb:vertical { 77 | height: 5px; 78 | background-color: rgba(125, 125, 125, 0.7); 79 | -webkit-border-radius: 6px; 80 | } 81 | 82 | ::-webkit-scrollbar-thumb:horizontal { 83 | height: 5px; 84 | background-color: rgba(125, 125, 125, 0.7); 85 | -webkit-border-radius: 6px; 86 | } 87 | 88 | html, body { 89 | width: 100%; 90 | } 91 | 92 | body { 93 | -webkit-text-size-adjust: none; 94 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 95 | } 96 | 97 | 98 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: './main.ts', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.tsx?$/, 15 | loader: 'ts-loader', 16 | exclude: /node_modules/ 17 | }, 18 | { 19 | test: /\.html$/, 20 | loader: 'html-loader', 21 | exclude: /node_modules/ 22 | }, 23 | { 24 | test: /\.css$/, 25 | loader: 'style-loader!css-loader' 26 | }, 27 | { 28 | test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 29 | loader: 'file-loader' 30 | }, 31 | ] 32 | }, 33 | resolve: { 34 | // Add `.ts` and `.tsx` as a resolvable extension. 35 | extensions: ['.ts', '.tsx', '.js', 'html'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.common.js', 38 | 'vue-router$': 'vue-router/dist/vue-router.common.js' 39 | } 40 | }, 41 | devServer: { 42 | historyApiFallback: true, 43 | noInfo: true 44 | }, 45 | performance: { 46 | hints: false 47 | }, 48 | devtool: '#eval-source-map' 49 | } 50 | 51 | /* 生产环境的配置 */ 52 | if (process.env.NODE_ENV === 'production') { 53 | module.exports.devtool = '#source-map' 54 | // http://vue-loader.vuejs.org/en/workflow/production.html 55 | module.exports.plugins = (module.exports.plugins || []).concat([ 56 | new webpack.DefinePlugin({ 57 | 'process.env': { 58 | NODE_ENV: '"production"' 59 | } 60 | }), 61 | new webpack.optimize.UglifyJsPlugin({ 62 | sourceMap: true, 63 | compress: { 64 | warnings: false 65 | } 66 | }), 67 | new webpack.LoaderOptionsPlugin({ 68 | minimize: true 69 | }), 70 | new webpack.BannerPlugin('This file is created by toxichl') 71 | ]) 72 | } 73 | -------------------------------------------------------------------------------- /theme/form-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/menu-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/radio-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/submenu.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/tab-pane.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/breadcrumb-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/button-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/checkbox-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/collapse-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/dropdown-item.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/dropdown-menu.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/menu-item-group.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/radio-button.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Transition 3 | -------------------------- */ 4 | /* Colors 5 | -------------------------- */ 6 | /* Link 7 | -------------------------- */ 8 | /* Border 9 | -------------------------- */ 10 | /* Box-shadow 11 | -------------------------- */ 12 | /* Fill 13 | -------------------------- */ 14 | /* Font 15 | -------------------------- */ 16 | /* Size 17 | -------------------------- */ 18 | /* z-index 19 | -------------------------- */ 20 | /* Disable base 21 | -------------------------- */ 22 | /* Icon 23 | -------------------------- */ 24 | /* Checkbox 25 | -------------------------- */ 26 | /* Radio 27 | -------------------------- */ 28 | /* Select 29 | -------------------------- */ 30 | /* Alert 31 | -------------------------- */ 32 | /* Message Box 33 | -------------------------- */ 34 | /* Message 35 | -------------------------- */ 36 | /* Notification 37 | -------------------------- */ 38 | /* Input 39 | -------------------------- */ 40 | /* Cascader 41 | -------------------------- */ 42 | /* Group 43 | -------------------------- */ 44 | /* Tab 45 | -------------------------- */ 46 | /* Button 47 | -------------------------- */ 48 | /* cascader 49 | -------------------------- */ 50 | /* Switch 51 | -------------------------- */ 52 | /* Dialog 53 | -------------------------- */ 54 | /* Table 55 | -------------------------- */ 56 | /* Pagination 57 | -------------------------- */ 58 | /* Popover 59 | -------------------------- */ 60 | /* Tooltip 61 | -------------------------- */ 62 | /* Tag 63 | -------------------------- */ 64 | /* Dropdown 65 | -------------------------- */ 66 | /* Badge 67 | -------------------------- */ 68 | /* Card 69 | --------------------------*/ 70 | /* Slider 71 | --------------------------*/ 72 | /* Steps 73 | --------------------------*/ 74 | /* Menu 75 | --------------------------*/ 76 | /* Rate 77 | --------------------------*/ 78 | /* DatePicker 79 | --------------------------*/ 80 | /* Loading 81 | --------------------------*/ 82 | /* Scrollbar 83 | --------------------------*/ 84 | /* Carousel 85 | --------------------------*/ 86 | /* Collapse 87 | --------------------------*/ 88 | } -------------------------------------------------------------------------------- /theme/element-variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | 3 | /* Transition 4 | -------------------------- */ 5 | 6 | /* Colors 7 | -------------------------- */ 8 | 9 | /* Link 10 | -------------------------- */ 11 | 12 | /* Border 13 | -------------------------- */ 14 | 15 | /* Box-shadow 16 | -------------------------- */ 17 | 18 | /* Fill 19 | -------------------------- */ 20 | 21 | /* Font 22 | -------------------------- */ 23 | 24 | /* Size 25 | -------------------------- */ 26 | 27 | /* z-index 28 | -------------------------- */ 29 | 30 | /* Disable base 31 | -------------------------- */ 32 | 33 | /* Icon 34 | -------------------------- */ 35 | 36 | /* Checkbox 37 | -------------------------- */ 38 | 39 | /* Radio 40 | -------------------------- */ 41 | 42 | /* Select 43 | -------------------------- */ 44 | 45 | /* Alert 46 | -------------------------- */ 47 | 48 | /* Message Box 49 | -------------------------- */ 50 | 51 | /* Message 52 | -------------------------- */ 53 | 54 | /* Notification 55 | -------------------------- */ 56 | 57 | /* Input 58 | -------------------------- */ 59 | 60 | /* Cascader 61 | -------------------------- */ 62 | 63 | /* Group 64 | -------------------------- */ 65 | 66 | /* Tab 67 | -------------------------- */ 68 | 69 | /* Button 70 | -------------------------- */ 71 | 72 | 73 | /* cascader 74 | -------------------------- */ 75 | 76 | /* Switch 77 | -------------------------- */ 78 | 79 | /* Dialog 80 | -------------------------- */ 81 | 82 | /* Table 83 | -------------------------- */ 84 | 85 | /* Pagination 86 | -------------------------- */ 87 | 88 | /* Popover 89 | -------------------------- */ 90 | 91 | /* Tooltip 92 | -------------------------- */ 93 | 94 | /* Tag 95 | -------------------------- */ 96 | 97 | /* Dropdown 98 | -------------------------- */ 99 | 100 | /* Badge 101 | -------------------------- */ 102 | 103 | /* Card 104 | --------------------------*/ 105 | 106 | /* Slider 107 | --------------------------*/ 108 | 109 | /* Steps 110 | --------------------------*/ 111 | 112 | /* Menu 113 | --------------------------*/ 114 | 115 | /* Rate 116 | --------------------------*/ 117 | 118 | /* DatePicker 119 | --------------------------*/ 120 | 121 | /* Loading 122 | --------------------------*/ 123 | 124 | /* Scrollbar 125 | --------------------------*/ 126 | 127 | /* Carousel 128 | --------------------------*/ 129 | 130 | /* Collapse 131 | --------------------------*/ 132 | } 133 | -------------------------------------------------------------------------------- /2.0.0: -------------------------------------------------------------------------------- 1 | C:\Users\C\AppData\Roaming\npm\webpack -> C:\Users\C\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js 2 | - amdefine@1.0.1 node_modules\webpack\node_modules\amdefine 3 | - wordwrap@0.0.2 node_modules\webpack\node_modules\cliui\node_modules\wordwrap 4 | - memory-fs@0.2.0 node_modules\webpack\node_modules\enhanced-resolve\node_modules\memory-fs 5 | - pbkdf2-compat@2.0.1 node_modules\webpack\node_modules\pbkdf2-compat 6 | - async@0.9.2 node_modules\webpack\node_modules\watchpack\node_modules\async 7 | - source-map@0.4.4 node_modules\webpack\node_modules\webpack-core\node_modules\source-map 8 | - clone@1.0.2 node_modules\webpack\node_modules\clone 9 | - optimist@0.6.1 node_modules\webpack\node_modules\optimist 10 | - webpack-core@0.6.9 node_modules\webpack\node_modules\webpack-core 11 | C:\Users\C\AppData\Roaming\npm 12 | `-- webpack@2.2.1 13 | +-- acorn@4.0.11 14 | +-- acorn-dynamic-import@2.0.1 15 | +-- ajv@4.11.3 16 | | +-- co@4.6.0 17 | | `-- json-stable-stringify@1.0.1 18 | | `-- jsonify@0.0.0 19 | +-- ajv-keywords@1.5.1 20 | +-- async@2.1.4 21 | | `-- lodash@4.17.4 22 | +-- enhanced-resolve@3.1.0 23 | | `-- object-assign@4.1.1 24 | +-- interpret@1.0.1 25 | +-- json-loader@0.5.4 26 | +-- loader-runner@2.3.0 27 | +-- memory-fs@0.4.1 28 | +-- node-libs-browser@2.0.0 29 | | +-- crypto-browserify@3.11.0 30 | | | +-- browserify-cipher@1.0.0 31 | | | | +-- browserify-aes@1.0.6 32 | | | | | `-- buffer-xor@1.0.3 33 | | | | +-- browserify-des@1.0.0 34 | | | | | `-- des.js@1.0.0 35 | | | | | `-- minimalistic-assert@1.0.0 36 | | | | `-- evp_bytestokey@1.0.0 37 | | | +-- browserify-sign@4.0.0 38 | | | | +-- bn.js@4.11.6 39 | | | | +-- browserify-rsa@4.0.1 40 | | | | +-- elliptic@6.3.3 41 | | | | | +-- brorand@1.0.7 42 | | | | | `-- hash.js@1.0.3 43 | | | | `-- parse-asn1@5.0.0 44 | | | | `-- asn1.js@4.9.1 45 | | | +-- create-ecdh@4.0.0 46 | | | +-- create-hash@1.1.2 47 | | | | +-- cipher-base@1.0.3 48 | | | | +-- ripemd160@1.0.1 49 | | | | `-- sha.js@2.4.8 50 | | | +-- create-hmac@1.1.4 51 | | | +-- diffie-hellman@5.0.2 52 | | | | `-- miller-rabin@4.0.0 53 | | | +-- pbkdf2@3.0.9 54 | | | +-- public-encrypt@4.0.0 55 | | | `-- randombytes@2.0.3 56 | | `-- stream-http@2.6.3 57 | | `-- builtin-status-codes@3.0.0 58 | +-- supports-color@3.2.3 59 | +-- tapable@0.2.6 60 | +-- uglify-js@2.7.5 61 | | `-- yargs@3.10.0 62 | | `-- cliui@2.1.0 63 | | `-- wordwrap@0.0.2 64 | +-- watchpack@1.2.1 65 | +-- webpack-sources@0.1.4 66 | | `-- source-list-map@0.1.8 67 | `-- yargs@6.6.0 68 | +-- camelcase@3.0.0 69 | +-- cliui@3.2.0 70 | | `-- wrap-ansi@2.1.0 71 | +-- get-caller-file@1.0.2 72 | +-- os-locale@1.4.0 73 | | `-- lcid@1.0.0 74 | | `-- invert-kv@1.0.0 75 | +-- read-pkg-up@1.0.1 76 | | +-- find-up@1.1.2 77 | | | +-- path-exists@2.1.0 78 | | | `-- pinkie-promise@2.0.1 79 | | | `-- pinkie@2.0.4 80 | | `-- read-pkg@1.1.0 81 | | +-- load-json-file@1.1.0 82 | | | +-- parse-json@2.2.0 83 | | | | `-- error-ex@1.3.0 84 | | | | `-- is-arrayish@0.2.1 85 | | | +-- pify@2.3.0 86 | | | `-- strip-bom@2.0.0 87 | | | `-- is-utf8@0.2.1 88 | | +-- normalize-package-data@2.3.5 89 | | | +-- hosted-git-info@2.2.0 90 | | | +-- is-builtin-module@1.0.0 91 | | | | `-- builtin-modules@1.1.1 92 | | | +-- semver@5.3.0 93 | | | `-- validate-npm-package-license@3.0.1 94 | | | +-- spdx-correct@1.0.2 95 | | | | `-- spdx-license-ids@1.2.2 96 | | | `-- spdx-expression-parse@1.0.4 97 | | `-- path-type@1.1.0 98 | +-- require-directory@2.1.1 99 | +-- require-main-filename@1.0.1 100 | +-- set-blocking@2.0.0 101 | +-- string-width@1.0.2 102 | | +-- code-point-at@1.1.0 103 | | +-- is-fullwidth-code-point@1.0.0 104 | | | `-- number-is-nan@1.0.1 105 | | `-- strip-ansi@3.0.1 106 | | `-- ansi-regex@2.1.1 107 | +-- which-module@1.0.0 108 | +-- y18n@3.2.1 109 | `-- yargs-parser@4.2.1 110 | `-- camelcase@3.0.0 111 | 112 | -------------------------------------------------------------------------------- /theme/steps.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-steps{ 92 | font-size: 0; 93 | } 94 | 95 | .el-steps > :last-child .el-step__line{ 96 | display: none; 97 | } 98 | 99 | .el-steps.is-horizontal{ 100 | white-space: nowrap; 101 | } 102 | 103 | .el-steps.is-horizontal.is-center{ 104 | text-align: center; 105 | } 106 | :root{ 107 | /* Transition 108 | -------------------------- */ 109 | /* Colors 110 | -------------------------- */ 111 | /* Link 112 | -------------------------- */ 113 | /* Border 114 | -------------------------- */ 115 | /* Box-shadow 116 | -------------------------- */ 117 | /* Fill 118 | -------------------------- */ 119 | /* Font 120 | -------------------------- */ 121 | /* Size 122 | -------------------------- */ 123 | /* z-index 124 | -------------------------- */ 125 | /* Disable base 126 | -------------------------- */ 127 | /* Icon 128 | -------------------------- */ 129 | /* Checkbox 130 | -------------------------- */ 131 | /* Radio 132 | -------------------------- */ 133 | /* Select 134 | -------------------------- */ 135 | /* Alert 136 | -------------------------- */ 137 | /* Message Box 138 | -------------------------- */ 139 | /* Message 140 | -------------------------- */ 141 | /* Notification 142 | -------------------------- */ 143 | /* Input 144 | -------------------------- */ 145 | /* Cascader 146 | -------------------------- */ 147 | /* Group 148 | -------------------------- */ 149 | /* Tab 150 | -------------------------- */ 151 | /* Button 152 | -------------------------- */ 153 | /* cascader 154 | -------------------------- */ 155 | /* Switch 156 | -------------------------- */ 157 | /* Dialog 158 | -------------------------- */ 159 | /* Table 160 | -------------------------- */ 161 | /* Pagination 162 | -------------------------- */ 163 | /* Popover 164 | -------------------------- */ 165 | /* Tooltip 166 | -------------------------- */ 167 | /* Tag 168 | -------------------------- */ 169 | /* Dropdown 170 | -------------------------- */ 171 | /* Badge 172 | -------------------------- */ 173 | /* Card 174 | --------------------------*/ 175 | /* Slider 176 | --------------------------*/ 177 | /* Steps 178 | --------------------------*/ 179 | /* Menu 180 | --------------------------*/ 181 | /* Rate 182 | --------------------------*/ 183 | /* DatePicker 184 | --------------------------*/ 185 | /* Loading 186 | --------------------------*/ 187 | /* Scrollbar 188 | --------------------------*/ 189 | /* Carousel 190 | --------------------------*/ 191 | /* Collapse 192 | --------------------------*/ 193 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-typescript-template-ui 2 | 3 | 一个非常简单的为[`Vue2.0`][1]和[`TypeScript2.0`][2]准备的项目开发环境，可以帮助你快速地开始一个项目的开发。 4 | 5 | # 特性 6 | 7 | - 引入了`Vue 2.0`全家桶的环境 8 | - 配置好了`webpack` 9 | - 配置好了一个`UI`库 - [element-ui][3]，让你开箱即用 10 | - 使用了 `TypeScript2.0` 以后的新特性`@types` 11 | - 由于`Vue2.0`采用`ES6`编写，类型声明中含有`Typescript`不支持的`ES6`特性，增加了 `TypeScript2.0` 对 [`Promise`][4] 等`es6`特性的支持 12 | - 引入`lodash`，快速开启`FP` 13 | 14 | 有个这些特性，无需在开发环境的搭建上煞费苦心，你可以轻松地将本项目作为你的脚手架代码进行项目开发。 15 | 16 | # 快速上手 17 | 18 | 安装依赖 19 | ``` 20 | npm install 21 | ``` 22 | 开发测试： 23 | ``` 24 | npm run dev 25 | ``` 26 | 部署到生产环境： 27 | ``` 28 | npm run build 29 | ``` 30 | 31 | 32 | # 自定义UI组件 33 | 34 | 倘若你不想引入`element-ui`，你也可以使用我的另外一个没有引入UI组件的纯净库：[vue-typescript-template][5]，这个库仅仅配置了`Vue 2.0`和`TypeScript`的基本开发环境。 35 | 36 | 37 | # UI主题 38 | 39 | 关于主题的配置可以参考`element-ui`官方的 [`custom-theme`][6] 40 | 41 | 基本的配置过程如下： 42 | 43 | - 安装element-theme： 44 | ``` 45 | $ npm i element-theme -D 46 | ``` 47 | 48 | - 安装element-theme-default 49 | ``` 50 | $ npm i element-theme-default -D 51 | ``` 52 | 53 | - 生成变量文件 54 | 55 | ``` 56 | $ node_modules/.bin/et -i 57 | ``` 58 | ![image_1b92frkkv1g7h7fo1pd41kp31k55m.png-13.9kB][7] 59 | 60 | 运行成功后，在你的项目根目录下会生成一个基于CSS4.0编写的`element-variables.css`，打开文件，可以编写你的主题配色： 61 | 62 | ![image_1b92fv4b81jr56i5o5l4o0h4r1g.png-75.2kB][8] 63 | 64 | 65 | - 生成主题文件 66 | 在上一步编辑好 `element-variables.css` 后，执行此步骤: 67 | ``` 68 | $ node_modules/.bin/et 69 | ``` 70 | 71 | ![image_1b92fs857n5d9k2car8did0g13.png-15.2kB][9] 72 | 73 | 这里你也可以加上`-w`参数进行实时编译。 74 | 75 | - 在项目中引入 76 | 77 | 注意，只需要引入`index.css` 78 | ``` 79 | $ import './theme/index.css'; 80 | ``` 81 | 82 | 接下来，你就可以使用自己的主题了。 83 | 84 | 85 | # 已经引入的库 86 | 87 | name | version 88 | --- | --- 89 | typescript | 2.0.0+ 90 | Vue | 2.0.0+ 91 | Vue Router | 2.0.0+ 92 | vue-resource | 0.9.3 93 | lodash | 4.0.0+ 94 | element-ui | 1.0.0+ 95 | 96 | 97 | # 注意点 98 | 99 | 100 | ## Typescript 2 以前 101 | 102 | 声明文件（`.d.ts`文件）是在`TypeScript`中使用现有`JavaScript`库的一个基本组成部分。 103 | 104 | 所有的`js`库在引入`ts`时，都必须顺带地加入类型声明文件（`d.ts`）,早期，有一个非常出色的库——[DefinitelyTyped][10]，它拥有一些主流的js库的类型声明文件。此外，为了更便捷地进行安装，还有一个非常强大的ts类型声明管理库——[typings][11]，它允许你通过这样的方式进行安装一个库的类型声明文件： 105 | 106 | 首先全局安装typings： 107 | 108 | ``` 109 | npm install typings -g 110 | ``` 111 | 112 | 推荐采用这种方式进行一个类型定义库的安装： 113 | 114 | ``` 115 | typings install dt~vue --global --save 116 | ``` 117 | 118 | 然后，项目根目录下会出现typings目录，结构如下： 119 | 120 | ![image_1b92hf66j18vo1ic71tcbcp1iac1t.png-8.5kB][12] 121 | 122 | index.d.ts 的内容如下：参见ts的[三斜线指令][13]和[模块解析][14] 123 | 124 | ``` 125 | /// 126 | ``` 127 | 128 | 如此一来，我们可以在当前项目目录的任意位置采用如下方式导入Vue: 129 | 130 | ``` 131 | import * as Vue from 'vue'; 132 | ``` 133 | 134 | 但凡是会引入ts的库，如`vue全家桶`，或者`lodash`，都必须通过上述方式获取dts类型声明文件。 135 | 136 | 但是，`Typescript2`开始有了一些变化，请看下文。 137 | 138 | 139 | ## Typescript2以后 140 | 141 | 可以参见微软的这篇博文：[The Future of Declaration Files][15] 142 | 143 | 总的意思就是，**在TypeScript 2.0中获取类型声明除了npm之外不需要任何工具。** 144 | 145 | 比如，想要引入`lodash`，只需要执行: 146 | 147 | ``` 148 | npm install --save @types/lodash 149 | ``` 150 | 151 | 然后你就可以直接使用了： 152 | 153 | ``` 154 | import * as _ from "lodash"; 155 | _.padStart("Hello TypeScript!", 20, " "); 156 | ``` 157 | 158 | 此外，目前在使用`Typescript2 + Vue2`遇到的问题，及其解决办法整理如下： 159 | 160 | issue | solution 161 | --- | --- 162 | `Typescript`编译表示不认识`vue`声明文件中的类型`Promise` | 安装es6-prommise `npm i @types/es6-promise -save` 163 | `VueRouter is not a constructor` | 在`webpack`的 `resolve.alias` 中配置：`'vue-router$': 'vue-router/dist/vue-router.common.js'` 164 | 165 | 166 | ## 千万不要在本项目中使用Vue-resource 167 | 168 | 在之前进行项目升级的过程中，由于原项目采用的技术栈是`vue@1.0.21`、`TypeScript@1.8`、`vue-resource@0.9.3`和`vue-router@0.7.13`、`webpack@1.13.1`，我按照首先升级`typescript`, 接着升级`Webpack`，最后升级`Vue`, 结果遇到很多坑。关于这个问题根本原因，在于`vue-resource`使用的`type`声明文件仍然还在使用`vue 1`的`d.ts`: 169 | 170 | 运行： 171 | 172 | ``` 173 | npm install --save @types/lodash 174 | ``` 175 | 176 | 你会看到： 177 | 178 | 179 | 180 | 这样一来，你会看到各种花式错误，例如`vue-router 2`找到了`vue 1`的`d.ts`, 这还能好好地玩耍吗？关于这个问题，我已经提交`PR`。 181 | 182 | 因此，在 `vue-resource` 官方仍未升级`d.ts`的时候，请不要使用它。 183 | 184 | 你可以用其他的库(和`vue`没有关系的库均可)来代替它，如`fetch`、`axios`。 185 | 186 | 187 | [1]: https://github.com/vuejs/vue 188 | [2]: https://github.com/Microsoft/TypeScript 189 | [3]: https://github.com/ElemeFE/element 190 | [4]: https://github.com/stefanpenner/es6-promise 191 | [5]: https://github.com/toxichl/vue-typescript-template 192 | [6]: http://element.eleme.io/#/en-US/component/custom-theme 193 | [7]: http://static.zybuluo.com/a472590061/jg8g8a6392ppmohabnoh7qii/image_1b92frkkv1g7h7fo1pd41kp31k55m.png 194 | [8]: http://static.zybuluo.com/a472590061/6oweqbrqjvfm221l3b64ny81/image_1b92fv4b81jr56i5o5l4o0h4r1g.png 195 | [9]: http://static.zybuluo.com/a472590061/64vc46bkcp3yaayxf6oimqtw/image_1b92fs857n5d9k2car8did0g13.png 196 | [10]: https://github.com/DefinitelyTyped/DefinitelyTyped 197 | [11]: https://github.com/typings/typings 198 | [12]: http://static.zybuluo.com/a472590061/crvbo8k38quhhywmn1j8pcz9/image_1b92hf66j18vo1ic71tcbcp1iac1t.png 199 | [13]: https://www.tslang.cn/docs/handbook/triple-slash-directives.html 200 | [14]: https://www.tslang.cn/docs/handbook/module-resolution.html 201 | [15]: https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/ -------------------------------------------------------------------------------- /theme/option-group.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-select-group{ 92 | margin: 0; 93 | padding: 0 94 | } 95 | 96 | .el-select-group .el-select-dropdown__item{ 97 | padding-left: 20px 98 | } 99 | 100 | .el-select-group__wrap{ 101 | list-style: none; 102 | margin: 0; 103 | padding: 0 104 | } 105 | 106 | .el-select-group__title{ 107 | padding-left: 10px; 108 | font-size: 12px; 109 | color: #999; 110 | height: 30px; 111 | line-height: 30px 112 | } 113 | :root{ 114 | /* Transition 115 | -------------------------- */ 116 | /* Colors 117 | -------------------------- */ 118 | /* Link 119 | -------------------------- */ 120 | /* Border 121 | -------------------------- */ 122 | /* Box-shadow 123 | -------------------------- */ 124 | /* Fill 125 | -------------------------- */ 126 | /* Font 127 | -------------------------- */ 128 | /* Size 129 | -------------------------- */ 130 | /* z-index 131 | -------------------------- */ 132 | /* Disable base 133 | -------------------------- */ 134 | /* Icon 135 | -------------------------- */ 136 | /* Checkbox 137 | -------------------------- */ 138 | /* Radio 139 | -------------------------- */ 140 | /* Select 141 | -------------------------- */ 142 | /* Alert 143 | -------------------------- */ 144 | /* Message Box 145 | -------------------------- */ 146 | /* Message 147 | -------------------------- */ 148 | /* Notification 149 | -------------------------- */ 150 | /* Input 151 | -------------------------- */ 152 | /* Cascader 153 | -------------------------- */ 154 | /* Group 155 | -------------------------- */ 156 | /* Tab 157 | -------------------------- */ 158 | /* Button 159 | -------------------------- */ 160 | /* cascader 161 | -------------------------- */ 162 | /* Switch 163 | -------------------------- */ 164 | /* Dialog 165 | -------------------------- */ 166 | /* Table 167 | -------------------------- */ 168 | /* Pagination 169 | -------------------------- */ 170 | /* Popover 171 | -------------------------- */ 172 | /* Tooltip 173 | -------------------------- */ 174 | /* Tag 175 | -------------------------- */ 176 | /* Dropdown 177 | -------------------------- */ 178 | /* Badge 179 | -------------------------- */ 180 | /* Card 181 | --------------------------*/ 182 | /* Slider 183 | --------------------------*/ 184 | /* Steps 185 | --------------------------*/ 186 | /* Menu 187 | --------------------------*/ 188 | /* Rate 189 | --------------------------*/ 190 | /* DatePicker 191 | --------------------------*/ 192 | /* Loading 193 | --------------------------*/ 194 | /* Scrollbar 195 | --------------------------*/ 196 | /* Carousel 197 | --------------------------*/ 198 | /* Collapse 199 | --------------------------*/ 200 | } -------------------------------------------------------------------------------- /theme/card.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-card{ 92 | border: 1px solid rgb(209, 219, 229); 93 | border-radius: 4px; 94 | background-color: #fff; 95 | overflow: hidden; 96 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12), 97 | 0px 0px 6px 0px rgba(0, 0, 0, .04) 98 | } 99 | 100 | .el-card__header{ 101 | padding: 18px 20px; 102 | border-bottom: 1px solid rgb(209, 219, 229); 103 | box-sizing: border-box 104 | } 105 | 106 | .el-card__body{ 107 | padding: 20px 108 | } 109 | :root{ 110 | /* Transition 111 | -------------------------- */ 112 | /* Colors 113 | -------------------------- */ 114 | /* Link 115 | -------------------------- */ 116 | /* Border 117 | -------------------------- */ 118 | /* Box-shadow 119 | -------------------------- */ 120 | /* Fill 121 | -------------------------- */ 122 | /* Font 123 | -------------------------- */ 124 | /* Size 125 | -------------------------- */ 126 | /* z-index 127 | -------------------------- */ 128 | /* Disable base 129 | -------------------------- */ 130 | /* Icon 131 | -------------------------- */ 132 | /* Checkbox 133 | -------------------------- */ 134 | /* Radio 135 | -------------------------- */ 136 | /* Select 137 | -------------------------- */ 138 | /* Alert 139 | -------------------------- */ 140 | /* Message Box 141 | -------------------------- */ 142 | /* Message 143 | -------------------------- */ 144 | /* Notification 145 | -------------------------- */ 146 | /* Input 147 | -------------------------- */ 148 | /* Cascader 149 | -------------------------- */ 150 | /* Group 151 | -------------------------- */ 152 | /* Tab 153 | -------------------------- */ 154 | /* Button 155 | -------------------------- */ 156 | /* cascader 157 | -------------------------- */ 158 | /* Switch 159 | -------------------------- */ 160 | /* Dialog 161 | -------------------------- */ 162 | /* Table 163 | -------------------------- */ 164 | /* Pagination 165 | -------------------------- */ 166 | /* Popover 167 | -------------------------- */ 168 | /* Tooltip 169 | -------------------------- */ 170 | /* Tag 171 | -------------------------- */ 172 | /* Dropdown 173 | -------------------------- */ 174 | /* Badge 175 | -------------------------- */ 176 | /* Card 177 | --------------------------*/ 178 | /* Slider 179 | --------------------------*/ 180 | /* Steps 181 | --------------------------*/ 182 | /* Menu 183 | --------------------------*/ 184 | /* Rate 185 | --------------------------*/ 186 | /* DatePicker 187 | --------------------------*/ 188 | /* Loading 189 | --------------------------*/ 190 | /* Scrollbar 191 | --------------------------*/ 192 | /* Carousel 193 | --------------------------*/ 194 | /* Collapse 195 | --------------------------*/ 196 | } -------------------------------------------------------------------------------- /theme/icon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'element-icons'; 3 | src: url('fonts/element-icons.eot?t=1472440741'); /* IE9*/ 4 | src: url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */ 5 | url('fonts/element-icons.ttf?t=1472440741') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 6 | url('fonts/element-icons.svg?t=1472440741#el-icon') format('svg'); /* iOS 4.1- */ 7 | font-weight: 400; 8 | font-style: normal; 9 | } 10 | 11 | [class^="el-icon-"], [class*=" el-icon-"] { 12 | /* use !important to prevent issues with browser extensions that change fonts */ 13 | font-family: 'element-icons' !important; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: 400; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | vertical-align: baseline; 21 | display: inline-block; 22 | 23 | /* Better Font Rendering =========== */ 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | .el-icon-arrow-down:before { content: "\e600"; } 29 | .el-icon-arrow-left:before { content: "\e601"; } 30 | .el-icon-arrow-right:before { content: "\e602"; } 31 | .el-icon-arrow-up:before { content: "\e603"; } 32 | .el-icon-caret-bottom:before { content: "\e604"; } 33 | .el-icon-caret-left:before { content: "\e605"; } 34 | .el-icon-caret-right:before { content: "\e606"; } 35 | .el-icon-caret-top:before { content: "\e607"; } 36 | .el-icon-check:before { content: "\e608"; } 37 | .el-icon-circle-check:before { content: "\e609"; } 38 | .el-icon-circle-close:before { content: "\e60a"; } 39 | .el-icon-circle-cross:before { content: "\e60b"; } 40 | .el-icon-close:before { content: "\e60c"; } 41 | .el-icon-upload:before { content: "\e60d"; } 42 | .el-icon-d-arrow-left:before { content: "\e60e"; } 43 | .el-icon-d-arrow-right:before { content: "\e60f"; } 44 | .el-icon-d-caret:before { content: "\e610"; } 45 | .el-icon-date:before { content: "\e611"; } 46 | .el-icon-delete:before { content: "\e612"; } 47 | .el-icon-document:before { content: "\e613"; } 48 | .el-icon-edit:before { content: "\e614"; } 49 | .el-icon-information:before { content: "\e615"; } 50 | .el-icon-loading:before { content: "\e616"; } 51 | .el-icon-menu:before { content: "\e617"; } 52 | .el-icon-message:before { content: "\e618"; } 53 | .el-icon-minus:before { content: "\e619"; } 54 | .el-icon-more:before { content: "\e61a"; } 55 | .el-icon-picture:before { content: "\e61b"; } 56 | .el-icon-plus:before { content: "\e61c"; } 57 | .el-icon-search:before { content: "\e61d"; } 58 | .el-icon-setting:before { content: "\e61e"; } 59 | .el-icon-share:before { content: "\e61f"; } 60 | .el-icon-star-off:before { content: "\e620"; } 61 | .el-icon-star-on:before { content: "\e621"; } 62 | .el-icon-time:before { content: "\e622"; } 63 | .el-icon-warning:before { content: "\e623"; } 64 | .el-icon-delete2:before { content: "\e624"; } 65 | .el-icon-upload2:before { content: "\e627"; } 66 | .el-icon-view:before { content: "\e626"; } 67 | 68 | .el-icon-loading { 69 | animation: rotating 1s linear infinite; 70 | } 71 | 72 | .el-icon--right { 73 | margin-left: 5px; 74 | } 75 | .el-icon--left { 76 | margin-right: 5px; 77 | } 78 | 79 | @keyframes rotating { 80 | 0% { 81 | transform: rotateZ(0deg); 82 | } 83 | 100% { 84 | transform: rotateZ(360deg); 85 | } 86 | } 87 | :root { /* Transition 88 | -------------------------- */ /* Colors 89 | -------------------------- */ /* Link 90 | -------------------------- */ /* Border 91 | -------------------------- */ /* Box-shadow 92 | -------------------------- */ /* Fill 93 | -------------------------- */ /* Font 94 | -------------------------- */ /* Size 95 | -------------------------- */ /* z-index 96 | -------------------------- */ /* Disable base 97 | -------------------------- */ /* Icon 98 | -------------------------- */ /* Checkbox 99 | -------------------------- */ /* Radio 100 | -------------------------- */ /* Select 101 | -------------------------- */ /* Alert 102 | -------------------------- */ /* Message Box 103 | -------------------------- */ /* Message 104 | -------------------------- */ /* Notification 105 | -------------------------- */ /* Input 106 | -------------------------- */ /* Cascader 107 | -------------------------- */ /* Group 108 | -------------------------- */ /* Tab 109 | -------------------------- */ /* Button 110 | -------------------------- */ /* cascader 111 | -------------------------- */ /* Switch 112 | -------------------------- */ /* Dialog 113 | -------------------------- */ /* Table 114 | -------------------------- */ /* Pagination 115 | -------------------------- */ /* Popover 116 | -------------------------- */ /* Tooltip 117 | -------------------------- */ /* Tag 118 | -------------------------- */ /* Dropdown 119 | -------------------------- */ /* Badge 120 | -------------------------- */ /* Card 121 | --------------------------*/ /* Slider 122 | --------------------------*/ /* Steps 123 | --------------------------*/ /* Menu 124 | --------------------------*/ /* Rate 125 | --------------------------*/ /* DatePicker 126 | --------------------------*/ /* Loading 127 | --------------------------*/ /* Scrollbar 128 | --------------------------*/ /* Carousel 129 | --------------------------*/ /* Collapse 130 | --------------------------*/ 131 | } -------------------------------------------------------------------------------- /theme/spinner.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-time-spinner{ 92 | width: 100%; 93 | white-space: nowrap; 94 | } 95 | 96 | .el-spinner{ 97 | display: inline-block; 98 | vertical-align: middle; 99 | } 100 | 101 | .el-spinner-inner{ 102 | animation: rotate 2s linear infinite; 103 | width: 50px; 104 | height: 50px; 105 | } 106 | 107 | .el-spinner-inner .path{ 108 | stroke: #ececec; 109 | stroke-linecap: round; 110 | animation: dash 1.5s ease-in-out infinite; 111 | } 112 | @keyframes rotate { 113 | 100% { 114 | transform: rotate(360deg); 115 | } 116 | } 117 | 118 | @keyframes dash { 119 | 0% { 120 | stroke-dasharray: 1, 150; 121 | stroke-dashoffset: 0; 122 | } 123 | 50% { 124 | stroke-dasharray: 90, 150; 125 | stroke-dashoffset: -35; 126 | } 127 | 100% { 128 | stroke-dasharray: 90, 150; 129 | stroke-dashoffset: -124; 130 | } 131 | } 132 | :root{ 133 | /* Transition 134 | -------------------------- */ 135 | /* Colors 136 | -------------------------- */ 137 | /* Link 138 | -------------------------- */ 139 | /* Border 140 | -------------------------- */ 141 | /* Box-shadow 142 | -------------------------- */ 143 | /* Fill 144 | -------------------------- */ 145 | /* Font 146 | -------------------------- */ 147 | /* Size 148 | -------------------------- */ 149 | /* z-index 150 | -------------------------- */ 151 | /* Disable base 152 | -------------------------- */ 153 | /* Icon 154 | -------------------------- */ 155 | /* Checkbox 156 | -------------------------- */ 157 | /* Radio 158 | -------------------------- */ 159 | /* Select 160 | -------------------------- */ 161 | /* Alert 162 | -------------------------- */ 163 | /* Message Box 164 | -------------------------- */ 165 | /* Message 166 | -------------------------- */ 167 | /* Notification 168 | -------------------------- */ 169 | /* Input 170 | -------------------------- */ 171 | /* Cascader 172 | -------------------------- */ 173 | /* Group 174 | -------------------------- */ 175 | /* Tab 176 | -------------------------- */ 177 | /* Button 178 | -------------------------- */ 179 | /* cascader 180 | -------------------------- */ 181 | /* Switch 182 | -------------------------- */ 183 | /* Dialog 184 | -------------------------- */ 185 | /* Table 186 | -------------------------- */ 187 | /* Pagination 188 | -------------------------- */ 189 | /* Popover 190 | -------------------------- */ 191 | /* Tooltip 192 | -------------------------- */ 193 | /* Tag 194 | -------------------------- */ 195 | /* Dropdown 196 | -------------------------- */ 197 | /* Badge 198 | -------------------------- */ 199 | /* Card 200 | --------------------------*/ 201 | /* Slider 202 | --------------------------*/ 203 | /* Steps 204 | --------------------------*/ 205 | /* Menu 206 | --------------------------*/ 207 | /* Rate 208 | --------------------------*/ 209 | /* DatePicker 210 | --------------------------*/ 211 | /* Loading 212 | --------------------------*/ 213 | /* Scrollbar 214 | --------------------------*/ 215 | /* Carousel 216 | --------------------------*/ 217 | /* Collapse 218 | --------------------------*/ 219 | } -------------------------------------------------------------------------------- /theme/badge.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-badge{ 92 | position: relative; 93 | vertical-align: middle; 94 | display: inline-block 95 | } 96 | 97 | .el-badge__content{ 98 | background-color: #ff4949; 99 | border-radius: 10px; 100 | color: #fff; 101 | display: inline-block; 102 | font-size: 12px; 103 | height: 18px; 104 | line-height: 18px; 105 | padding: 0 6px; 106 | text-align: center; 107 | white-space: nowrap; 108 | border: 1px solid #fff 109 | } 110 | 111 | .el-badge__content.is-dot{ 112 | width: 8px; 113 | height: 8px; 114 | padding: 0; 115 | right: 0; 116 | border-radius: 50% 117 | } 118 | 119 | .el-badge__content.is-fixed{ 120 | top: 0; 121 | right: 10px; 122 | position: absolute; 123 | transform: translateY(-50%) translateX(100%) 124 | } 125 | 126 | .el-badge__content.is-fixed.is-dot{ 127 | right: 5px 128 | } 129 | :root{ 130 | /* Transition 131 | -------------------------- */ 132 | /* Colors 133 | -------------------------- */ 134 | /* Link 135 | -------------------------- */ 136 | /* Border 137 | -------------------------- */ 138 | /* Box-shadow 139 | -------------------------- */ 140 | /* Fill 141 | -------------------------- */ 142 | /* Font 143 | -------------------------- */ 144 | /* Size 145 | -------------------------- */ 146 | /* z-index 147 | -------------------------- */ 148 | /* Disable base 149 | -------------------------- */ 150 | /* Icon 151 | -------------------------- */ 152 | /* Checkbox 153 | -------------------------- */ 154 | /* Radio 155 | -------------------------- */ 156 | /* Select 157 | -------------------------- */ 158 | /* Alert 159 | -------------------------- */ 160 | /* Message Box 161 | -------------------------- */ 162 | /* Message 163 | -------------------------- */ 164 | /* Notification 165 | -------------------------- */ 166 | /* Input 167 | -------------------------- */ 168 | /* Cascader 169 | -------------------------- */ 170 | /* Group 171 | -------------------------- */ 172 | /* Tab 173 | -------------------------- */ 174 | /* Button 175 | -------------------------- */ 176 | /* cascader 177 | -------------------------- */ 178 | /* Switch 179 | -------------------------- */ 180 | /* Dialog 181 | -------------------------- */ 182 | /* Table 183 | -------------------------- */ 184 | /* Pagination 185 | -------------------------- */ 186 | /* Popover 187 | -------------------------- */ 188 | /* Tooltip 189 | -------------------------- */ 190 | /* Tag 191 | -------------------------- */ 192 | /* Dropdown 193 | -------------------------- */ 194 | /* Badge 195 | -------------------------- */ 196 | /* Card 197 | --------------------------*/ 198 | /* Slider 199 | --------------------------*/ 200 | /* Steps 201 | --------------------------*/ 202 | /* Menu 203 | --------------------------*/ 204 | /* Rate 205 | --------------------------*/ 206 | /* DatePicker 207 | --------------------------*/ 208 | /* Loading 209 | --------------------------*/ 210 | /* Scrollbar 211 | --------------------------*/ 212 | /* Carousel 213 | --------------------------*/ 214 | /* Collapse 215 | --------------------------*/ 216 | } -------------------------------------------------------------------------------- /theme/rate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-rate{ 92 | height: 20px; 93 | line-height: 1; 94 | } 95 | 96 | .el-rate__item{ 97 | display: inline-block; 98 | position: relative; 99 | font-size: 0; 100 | vertical-align: middle; 101 | } 102 | 103 | .el-rate__icon{ 104 | position: relative; 105 | display: inline-block; 106 | font-size: 18px; 107 | margin-right: 6px; 108 | color: rgb(191, 203, 217); 109 | transition: .3s; 110 | } 111 | 112 | .el-rate__icon .path2 { 113 | position: absolute; 114 | left: 0; 115 | top: 0; 116 | } 117 | 118 | .el-rate__icon.hover{ 119 | transform: scale(1.15); 120 | } 121 | 122 | .el-rate__decimal{ 123 | position: absolute; 124 | top: 0; 125 | left: 0; 126 | display: inline-block; 127 | overflow: hidden; 128 | } 129 | 130 | .el-rate__text{ 131 | font-size: 14px; 132 | vertical-align: middle; 133 | } 134 | :root{ 135 | /* Transition 136 | -------------------------- */ 137 | /* Colors 138 | -------------------------- */ 139 | /* Link 140 | -------------------------- */ 141 | /* Border 142 | -------------------------- */ 143 | /* Box-shadow 144 | -------------------------- */ 145 | /* Fill 146 | -------------------------- */ 147 | /* Font 148 | -------------------------- */ 149 | /* Size 150 | -------------------------- */ 151 | /* z-index 152 | -------------------------- */ 153 | /* Disable base 154 | -------------------------- */ 155 | /* Icon 156 | -------------------------- */ 157 | /* Checkbox 158 | -------------------------- */ 159 | /* Radio 160 | -------------------------- */ 161 | /* Select 162 | -------------------------- */ 163 | /* Alert 164 | -------------------------- */ 165 | /* Message Box 166 | -------------------------- */ 167 | /* Message 168 | -------------------------- */ 169 | /* Notification 170 | -------------------------- */ 171 | /* Input 172 | -------------------------- */ 173 | /* Cascader 174 | -------------------------- */ 175 | /* Group 176 | -------------------------- */ 177 | /* Tab 178 | -------------------------- */ 179 | /* Button 180 | -------------------------- */ 181 | /* cascader 182 | -------------------------- */ 183 | /* Switch 184 | -------------------------- */ 185 | /* Dialog 186 | -------------------------- */ 187 | /* Table 188 | -------------------------- */ 189 | /* Pagination 190 | -------------------------- */ 191 | /* Popover 192 | -------------------------- */ 193 | /* Tooltip 194 | -------------------------- */ 195 | /* Tag 196 | -------------------------- */ 197 | /* Dropdown 198 | -------------------------- */ 199 | /* Badge 200 | -------------------------- */ 201 | /* Card 202 | --------------------------*/ 203 | /* Slider 204 | --------------------------*/ 205 | /* Steps 206 | --------------------------*/ 207 | /* Menu 208 | --------------------------*/ 209 | /* Rate 210 | --------------------------*/ 211 | /* DatePicker 212 | --------------------------*/ 213 | /* Loading 214 | --------------------------*/ 215 | /* Scrollbar 216 | --------------------------*/ 217 | /* Carousel 218 | --------------------------*/ 219 | /* Collapse 220 | --------------------------*/ 221 | } -------------------------------------------------------------------------------- /theme/carousel-item.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-carousel{} 92 | 93 | .el-carousel__item{ 94 | position: absolute; 95 | top: 0; 96 | left: 0; 97 | width: 100%; 98 | height: 100%; 99 | display: inline-block; 100 | transition: .4s ease-in-out; 101 | overflow: hidden 102 | } 103 | 104 | .el-carousel__item--card{ 105 | width: 50%; 106 | z-index: 0 107 | } 108 | 109 | .el-carousel__item--card.is-in-stage{ 110 | cursor: pointer; 111 | z-index: 1 112 | } 113 | 114 | .el-carousel__item--card.is-in-stage:hover .el-carousel__mask, .el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask{ 115 | opacity: 0.12 116 | } 117 | 118 | .el-carousel__item--card.is-active{ 119 | z-index: 2 120 | } 121 | 122 | .el-carousel__mask{ 123 | position: absolute; 124 | width: 100%; 125 | height: 100%; 126 | top: 0; 127 | left: 0; 128 | background-color: #fff; 129 | opacity: 0.24; 130 | transition: .2s 131 | }:root{ 132 | /* Transition 133 | -------------------------- */ 134 | /* Colors 135 | -------------------------- */ 136 | /* Link 137 | -------------------------- */ 138 | /* Border 139 | -------------------------- */ 140 | /* Box-shadow 141 | -------------------------- */ 142 | /* Fill 143 | -------------------------- */ 144 | /* Font 145 | -------------------------- */ 146 | /* Size 147 | -------------------------- */ 148 | /* z-index 149 | -------------------------- */ 150 | /* Disable base 151 | -------------------------- */ 152 | /* Icon 153 | -------------------------- */ 154 | /* Checkbox 155 | -------------------------- */ 156 | /* Radio 157 | -------------------------- */ 158 | /* Select 159 | -------------------------- */ 160 | /* Alert 161 | -------------------------- */ 162 | /* Message Box 163 | -------------------------- */ 164 | /* Message 165 | -------------------------- */ 166 | /* Notification 167 | -------------------------- */ 168 | /* Input 169 | -------------------------- */ 170 | /* Cascader 171 | -------------------------- */ 172 | /* Group 173 | -------------------------- */ 174 | /* Tab 175 | -------------------------- */ 176 | /* Button 177 | -------------------------- */ 178 | /* cascader 179 | -------------------------- */ 180 | /* Switch 181 | -------------------------- */ 182 | /* Dialog 183 | -------------------------- */ 184 | /* Table 185 | -------------------------- */ 186 | /* Pagination 187 | -------------------------- */ 188 | /* Popover 189 | -------------------------- */ 190 | /* Tooltip 191 | -------------------------- */ 192 | /* Tag 193 | -------------------------- */ 194 | /* Dropdown 195 | -------------------------- */ 196 | /* Badge 197 | -------------------------- */ 198 | /* Card 199 | --------------------------*/ 200 | /* Slider 201 | --------------------------*/ 202 | /* Steps 203 | --------------------------*/ 204 | /* Menu 205 | --------------------------*/ 206 | /* Rate 207 | --------------------------*/ 208 | /* DatePicker 209 | --------------------------*/ 210 | /* Loading 211 | --------------------------*/ 212 | /* Scrollbar 213 | --------------------------*/ 214 | /* Carousel 215 | --------------------------*/ 216 | /* Collapse 217 | --------------------------*/ 218 | } -------------------------------------------------------------------------------- /theme/option.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-select-dropdown{} 92 | 93 | .el-select-dropdown__item{ 94 | font-size: 14px; 95 | padding: 8px 10px; 96 | position: relative; 97 | white-space: nowrap; 98 | overflow: hidden; 99 | text-overflow: ellipsis; 100 | color: rgb(72, 87, 106); 101 | height: 36px; 102 | line-height: 1.5; 103 | box-sizing: border-box; 104 | cursor: pointer 105 | } 106 | 107 | .el-select-dropdown__item.hover{ 108 | background-color: rgb(228, 232, 241) 109 | } 110 | 111 | .el-select-dropdown__item.selected{ 112 | color: #fff; 113 | background-color: #20a0ff 114 | } 115 | 116 | .el-select-dropdown__item.selected.hover{ 117 | background-color: rgb(28, 141, 224) 118 | } 119 | 120 | .el-select-dropdown__item span{ 121 | line-height: 1.5 !important 122 | } 123 | 124 | .el-select-dropdown__item.is-disabled{ 125 | color: rgb(191, 203, 217); 126 | cursor: not-allowed 127 | } 128 | 129 | .el-select-dropdown__item.is-disabled:hover{ 130 | background-color: #fff 131 | } 132 | :root{ 133 | /* Transition 134 | -------------------------- */ 135 | /* Colors 136 | -------------------------- */ 137 | /* Link 138 | -------------------------- */ 139 | /* Border 140 | -------------------------- */ 141 | /* Box-shadow 142 | -------------------------- */ 143 | /* Fill 144 | -------------------------- */ 145 | /* Font 146 | -------------------------- */ 147 | /* Size 148 | -------------------------- */ 149 | /* z-index 150 | -------------------------- */ 151 | /* Disable base 152 | -------------------------- */ 153 | /* Icon 154 | -------------------------- */ 155 | /* Checkbox 156 | -------------------------- */ 157 | /* Radio 158 | -------------------------- */ 159 | /* Select 160 | -------------------------- */ 161 | /* Alert 162 | -------------------------- */ 163 | /* Message Box 164 | -------------------------- */ 165 | /* Message 166 | -------------------------- */ 167 | /* Notification 168 | -------------------------- */ 169 | /* Input 170 | -------------------------- */ 171 | /* Cascader 172 | -------------------------- */ 173 | /* Group 174 | -------------------------- */ 175 | /* Tab 176 | -------------------------- */ 177 | /* Button 178 | -------------------------- */ 179 | /* cascader 180 | -------------------------- */ 181 | /* Switch 182 | -------------------------- */ 183 | /* Dialog 184 | -------------------------- */ 185 | /* Table 186 | -------------------------- */ 187 | /* Pagination 188 | -------------------------- */ 189 | /* Popover 190 | -------------------------- */ 191 | /* Tooltip 192 | -------------------------- */ 193 | /* Tag 194 | -------------------------- */ 195 | /* Dropdown 196 | -------------------------- */ 197 | /* Badge 198 | -------------------------- */ 199 | /* Card 200 | --------------------------*/ 201 | /* Slider 202 | --------------------------*/ 203 | /* Steps 204 | --------------------------*/ 205 | /* Menu 206 | --------------------------*/ 207 | /* Rate 208 | --------------------------*/ 209 | /* DatePicker 210 | --------------------------*/ 211 | /* Loading 212 | --------------------------*/ 213 | /* Scrollbar 214 | --------------------------*/ 215 | /* Carousel 216 | --------------------------*/ 217 | /* Collapse 218 | --------------------------*/ 219 | } -------------------------------------------------------------------------------- /theme/row.css: -------------------------------------------------------------------------------- 1 | .el-row:before, .el-row:after{ 2 | display: table; 3 | content: "" 4 | } 5 | .el-row:after{ 6 | clear: both 7 | }@charset "UTF-8"; 8 | :root{ 9 | /* Transition 10 | -------------------------- */ 11 | /* Colors 12 | -------------------------- */ 13 | /* Link 14 | -------------------------- */ 15 | /* Border 16 | -------------------------- */ 17 | /* Box-shadow 18 | -------------------------- */ 19 | /* Fill 20 | -------------------------- */ 21 | /* Font 22 | -------------------------- */ 23 | /* Size 24 | -------------------------- */ 25 | /* z-index 26 | -------------------------- */ 27 | /* Disable base 28 | -------------------------- */ 29 | /* Icon 30 | -------------------------- */ 31 | /* Checkbox 32 | -------------------------- */ 33 | /* Radio 34 | -------------------------- */ 35 | /* Select 36 | -------------------------- */ 37 | /* Alert 38 | -------------------------- */ 39 | /* Message Box 40 | -------------------------- */ 41 | /* Message 42 | -------------------------- */ 43 | /* Notification 44 | -------------------------- */ 45 | /* Input 46 | -------------------------- */ 47 | /* Cascader 48 | -------------------------- */ 49 | /* Group 50 | -------------------------- */ 51 | /* Tab 52 | -------------------------- */ 53 | /* Button 54 | -------------------------- */ 55 | /* cascader 56 | -------------------------- */ 57 | /* Switch 58 | -------------------------- */ 59 | /* Dialog 60 | -------------------------- */ 61 | /* Table 62 | -------------------------- */ 63 | /* Pagination 64 | -------------------------- */ 65 | /* Popover 66 | -------------------------- */ 67 | /* Tooltip 68 | -------------------------- */ 69 | /* Tag 70 | -------------------------- */ 71 | /* Dropdown 72 | -------------------------- */ 73 | /* Badge 74 | -------------------------- */ 75 | /* Card 76 | --------------------------*/ 77 | /* Slider 78 | --------------------------*/ 79 | /* Steps 80 | --------------------------*/ 81 | /* Menu 82 | --------------------------*/ 83 | /* Rate 84 | --------------------------*/ 85 | /* DatePicker 86 | --------------------------*/ 87 | /* Loading 88 | --------------------------*/ 89 | /* Scrollbar 90 | --------------------------*/ 91 | /* Carousel 92 | --------------------------*/ 93 | /* Collapse 94 | --------------------------*/ 95 | } 96 | 97 | .el-row{ 98 | position: relative; 99 | box-sizing: border-box 100 | } 101 | 102 | .el-row--flex{ 103 | display: -ms-flexbox; 104 | display: flex 105 | } 106 | 107 | .el-row--flex:before, .el-row--flex:after{ 108 | display: none 109 | } 110 | 111 | .el-row--flex.is-align-bottom{ 112 | -ms-flex-align: end; 113 | align-items: flex-end 114 | } 115 | 116 | .el-row--flex.is-align-middle{ 117 | -ms-flex-align: center; 118 | align-items: center 119 | } 120 | 121 | .el-row--flex.is-justify-space-around{ 122 | -ms-flex-pack: distribute; 123 | justify-content: space-around 124 | } 125 | 126 | .el-row--flex.is-justify-space-between{ 127 | -ms-flex-pack: justify; 128 | justify-content: space-between 129 | } 130 | 131 | .el-row--flex.is-justify-end{ 132 | -ms-flex-pack: end; 133 | justify-content: flex-end 134 | } 135 | 136 | .el-row--flex.is-justify-center{ 137 | -ms-flex-pack: center; 138 | justify-content: center 139 | } 140 | :root{ 141 | /* Transition 142 | -------------------------- */ 143 | /* Colors 144 | -------------------------- */ 145 | /* Link 146 | -------------------------- */ 147 | /* Border 148 | -------------------------- */ 149 | /* Box-shadow 150 | -------------------------- */ 151 | /* Fill 152 | -------------------------- */ 153 | /* Font 154 | -------------------------- */ 155 | /* Size 156 | -------------------------- */ 157 | /* z-index 158 | -------------------------- */ 159 | /* Disable base 160 | -------------------------- */ 161 | /* Icon 162 | -------------------------- */ 163 | /* Checkbox 164 | -------------------------- */ 165 | /* Radio 166 | -------------------------- */ 167 | /* Select 168 | -------------------------- */ 169 | /* Alert 170 | -------------------------- */ 171 | /* Message Box 172 | -------------------------- */ 173 | /* Message 174 | -------------------------- */ 175 | /* Notification 176 | -------------------------- */ 177 | /* Input 178 | -------------------------- */ 179 | /* Cascader 180 | -------------------------- */ 181 | /* Group 182 | -------------------------- */ 183 | /* Tab 184 | -------------------------- */ 185 | /* Button 186 | -------------------------- */ 187 | /* cascader 188 | -------------------------- */ 189 | /* Switch 190 | -------------------------- */ 191 | /* Dialog 192 | -------------------------- */ 193 | /* Table 194 | -------------------------- */ 195 | /* Pagination 196 | -------------------------- */ 197 | /* Popover 198 | -------------------------- */ 199 | /* Tooltip 200 | -------------------------- */ 201 | /* Tag 202 | -------------------------- */ 203 | /* Dropdown 204 | -------------------------- */ 205 | /* Badge 206 | -------------------------- */ 207 | /* Card 208 | --------------------------*/ 209 | /* Slider 210 | --------------------------*/ 211 | /* Steps 212 | --------------------------*/ 213 | /* Menu 214 | --------------------------*/ 215 | /* Rate 216 | --------------------------*/ 217 | /* DatePicker 218 | --------------------------*/ 219 | /* Loading 220 | --------------------------*/ 221 | /* Scrollbar 222 | --------------------------*/ 223 | /* Carousel 224 | --------------------------*/ 225 | /* Collapse 226 | --------------------------*/ 227 | } -------------------------------------------------------------------------------- /theme/collapse.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-collapse{ 92 | border: 1px solid rgb(223, 230, 236); 93 | border-radius: 0; 94 | } 95 | 96 | .el-collapse-item{} 97 | 98 | .el-collapse-item:last-child{ 99 | margin-bottom: -1px; 100 | } 101 | 102 | .el-collapse-item.is-active .el-collapse-item__header__arrow{ 103 | transform: rotate(90deg); 104 | } 105 | 106 | .el-collapse-item__header{ 107 | height: 43px; 108 | line-height: 43px; 109 | padding-left: 15px; 110 | background-color: #fff; 111 | color: rgb(72, 87, 106); 112 | cursor: pointer; 113 | border-bottom: 1px solid rgb(223, 230, 236); 114 | font-size: 13px; 115 | } 116 | 117 | .el-collapse-item__header__arrow{ 118 | margin-right: 8px; 119 | transition: transform .3s; 120 | } 121 | 122 | .el-collapse-item__wrap{ 123 | will-change: height; 124 | background-color: rgb(251, 253, 255); 125 | overflow: hidden; 126 | box-sizing: border-box; 127 | border-bottom: 1px solid rgb(223, 230, 236); 128 | } 129 | 130 | .el-collapse-item__content{ 131 | padding: 10px 15px; 132 | font-size: 13px; 133 | color: rgb(31, 45, 61); 134 | line-height: 1.769230769230769; 135 | } 136 | :root{ 137 | /* Transition 138 | -------------------------- */ 139 | /* Colors 140 | -------------------------- */ 141 | /* Link 142 | -------------------------- */ 143 | /* Border 144 | -------------------------- */ 145 | /* Box-shadow 146 | -------------------------- */ 147 | /* Fill 148 | -------------------------- */ 149 | /* Font 150 | -------------------------- */ 151 | /* Size 152 | -------------------------- */ 153 | /* z-index 154 | -------------------------- */ 155 | /* Disable base 156 | -------------------------- */ 157 | /* Icon 158 | -------------------------- */ 159 | /* Checkbox 160 | -------------------------- */ 161 | /* Radio 162 | -------------------------- */ 163 | /* Select 164 | -------------------------- */ 165 | /* Alert 166 | -------------------------- */ 167 | /* Message Box 168 | -------------------------- */ 169 | /* Message 170 | -------------------------- */ 171 | /* Notification 172 | -------------------------- */ 173 | /* Input 174 | -------------------------- */ 175 | /* Cascader 176 | -------------------------- */ 177 | /* Group 178 | -------------------------- */ 179 | /* Tab 180 | -------------------------- */ 181 | /* Button 182 | -------------------------- */ 183 | /* cascader 184 | -------------------------- */ 185 | /* Switch 186 | -------------------------- */ 187 | /* Dialog 188 | -------------------------- */ 189 | /* Table 190 | -------------------------- */ 191 | /* Pagination 192 | -------------------------- */ 193 | /* Popover 194 | -------------------------- */ 195 | /* Tooltip 196 | -------------------------- */ 197 | /* Tag 198 | -------------------------- */ 199 | /* Dropdown 200 | -------------------------- */ 201 | /* Badge 202 | -------------------------- */ 203 | /* Card 204 | --------------------------*/ 205 | /* Slider 206 | --------------------------*/ 207 | /* Steps 208 | --------------------------*/ 209 | /* Menu 210 | --------------------------*/ 211 | /* Rate 212 | --------------------------*/ 213 | /* DatePicker 214 | --------------------------*/ 215 | /* Loading 216 | --------------------------*/ 217 | /* Scrollbar 218 | --------------------------*/ 219 | /* Carousel 220 | --------------------------*/ 221 | /* Collapse 222 | --------------------------*/ 223 | } -------------------------------------------------------------------------------- /theme/breadcrumb.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-breadcrumb{ 92 | font-size: 13px; 93 | line-height: 1 94 | } 95 | 96 | .el-breadcrumb:before, .el-breadcrumb:after{ 97 | display: table; 98 | content: "" 99 | } 100 | 101 | .el-breadcrumb:after{ 102 | clear: both 103 | } 104 | 105 | .el-breadcrumb__separator{ 106 | margin: 0 8px; 107 | color: rgb(191, 203, 217) 108 | } 109 | 110 | .el-breadcrumb__item{ 111 | float: left 112 | } 113 | 114 | .el-breadcrumb__item:last-child .el-breadcrumb__item__inner, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a{} 115 | 116 | .el-breadcrumb__item:last-child .el-breadcrumb__item__inner, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover{ 117 | color: rgb(151, 168, 190); 118 | cursor: text 119 | } 120 | 121 | .el-breadcrumb__item:last-child .el-breadcrumb__separator{ 122 | display: none 123 | } 124 | 125 | .el-breadcrumb__item__inner{} 126 | 127 | .el-breadcrumb__item__inner, .el-breadcrumb__item__inner a{ 128 | transition: color .15s linear; 129 | color: rgb(72, 87, 106) 130 | } 131 | 132 | .el-breadcrumb__item__inner:hover, .el-breadcrumb__item__inner a:hover{ 133 | color: #20a0ff; 134 | cursor: pointer 135 | } 136 | :root{ 137 | /* Transition 138 | -------------------------- */ 139 | /* Colors 140 | -------------------------- */ 141 | /* Link 142 | -------------------------- */ 143 | /* Border 144 | -------------------------- */ 145 | /* Box-shadow 146 | -------------------------- */ 147 | /* Fill 148 | -------------------------- */ 149 | /* Font 150 | -------------------------- */ 151 | /* Size 152 | -------------------------- */ 153 | /* z-index 154 | -------------------------- */ 155 | /* Disable base 156 | -------------------------- */ 157 | /* Icon 158 | -------------------------- */ 159 | /* Checkbox 160 | -------------------------- */ 161 | /* Radio 162 | -------------------------- */ 163 | /* Select 164 | -------------------------- */ 165 | /* Alert 166 | -------------------------- */ 167 | /* Message Box 168 | -------------------------- */ 169 | /* Message 170 | -------------------------- */ 171 | /* Notification 172 | -------------------------- */ 173 | /* Input 174 | -------------------------- */ 175 | /* Cascader 176 | -------------------------- */ 177 | /* Group 178 | -------------------------- */ 179 | /* Tab 180 | -------------------------- */ 181 | /* Button 182 | -------------------------- */ 183 | /* cascader 184 | -------------------------- */ 185 | /* Switch 186 | -------------------------- */ 187 | /* Dialog 188 | -------------------------- */ 189 | /* Table 190 | -------------------------- */ 191 | /* Pagination 192 | -------------------------- */ 193 | /* Popover 194 | -------------------------- */ 195 | /* Tooltip 196 | -------------------------- */ 197 | /* Tag 198 | -------------------------- */ 199 | /* Dropdown 200 | -------------------------- */ 201 | /* Badge 202 | -------------------------- */ 203 | /* Card 204 | --------------------------*/ 205 | /* Slider 206 | --------------------------*/ 207 | /* Steps 208 | --------------------------*/ 209 | /* Menu 210 | --------------------------*/ 211 | /* Rate 212 | --------------------------*/ 213 | /* DatePicker 214 | --------------------------*/ 215 | /* Loading 216 | --------------------------*/ 217 | /* Scrollbar 218 | --------------------------*/ 219 | /* Carousel 220 | --------------------------*/ 221 | /* Collapse 222 | --------------------------*/ 223 | } -------------------------------------------------------------------------------- /theme/scrollbar.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-scrollbar{ 92 | overflow: hidden; 93 | position: relative; 94 | } 95 | 96 | .el-scrollbar:hover .el-scrollbar__bar, .el-scrollbar:active .el-scrollbar__bar, .el-scrollbar:focus .el-scrollbar__bar{ 97 | opacity: 1; 98 | transition: opacity 340ms ease-out; 99 | } 100 | 101 | .el-scrollbar__wrap{ 102 | overflow: scroll; 103 | } 104 | 105 | .el-scrollbar__wrap--hidden-default{} 106 | 107 | .el-scrollbar__wrap--hidden-default::-webkit-scrollbar{ 108 | width: 0; 109 | height: 0; 110 | } 111 | 112 | .el-scrollbar__thumb{ 113 | position: relative; 114 | display: block; 115 | width: 0; 116 | height: 0; 117 | cursor: pointer; 118 | border-radius: inherit; 119 | background-color: rgba(151, 168, 190, 0.3); 120 | transition: .3s background-color; 121 | } 122 | 123 | .el-scrollbar__thumb:hover{ 124 | background-color: rgba(151, 168, 190, 0.5); 125 | } 126 | 127 | .el-scrollbar__bar{ 128 | position: absolute; 129 | right: 2px; 130 | bottom: 2px; 131 | z-index: 1; 132 | border-radius: 4px; 133 | opacity: 0; 134 | transition: opacity 120ms ease-out; 135 | } 136 | 137 | .el-scrollbar__bar.is-horizontal{ 138 | height: 6px; 139 | left: 2px; 140 | } 141 | 142 | .el-scrollbar__bar.is-horizontal > div{ 143 | height: 100%; 144 | } 145 | 146 | .el-scrollbar__bar.is-vertical{ 147 | width: 6px; 148 | top: 2px; 149 | } 150 | 151 | .el-scrollbar__bar.is-vertical > div{ 152 | width: 100%; 153 | } 154 | :root{ 155 | /* Transition 156 | -------------------------- */ 157 | /* Colors 158 | -------------------------- */ 159 | /* Link 160 | -------------------------- */ 161 | /* Border 162 | -------------------------- */ 163 | /* Box-shadow 164 | -------------------------- */ 165 | /* Fill 166 | -------------------------- */ 167 | /* Font 168 | -------------------------- */ 169 | /* Size 170 | -------------------------- */ 171 | /* z-index 172 | -------------------------- */ 173 | /* Disable base 174 | -------------------------- */ 175 | /* Icon 176 | -------------------------- */ 177 | /* Checkbox 178 | -------------------------- */ 179 | /* Radio 180 | -------------------------- */ 181 | /* Select 182 | -------------------------- */ 183 | /* Alert 184 | -------------------------- */ 185 | /* Message Box 186 | -------------------------- */ 187 | /* Message 188 | -------------------------- */ 189 | /* Notification 190 | -------------------------- */ 191 | /* Input 192 | -------------------------- */ 193 | /* Cascader 194 | -------------------------- */ 195 | /* Group 196 | -------------------------- */ 197 | /* Tab 198 | -------------------------- */ 199 | /* Button 200 | -------------------------- */ 201 | /* cascader 202 | -------------------------- */ 203 | /* Switch 204 | -------------------------- */ 205 | /* Dialog 206 | -------------------------- */ 207 | /* Table 208 | -------------------------- */ 209 | /* Pagination 210 | -------------------------- */ 211 | /* Popover 212 | -------------------------- */ 213 | /* Tooltip 214 | -------------------------- */ 215 | /* Tag 216 | -------------------------- */ 217 | /* Dropdown 218 | -------------------------- */ 219 | /* Badge 220 | -------------------------- */ 221 | /* Card 222 | --------------------------*/ 223 | /* Slider 224 | --------------------------*/ 225 | /* Steps 226 | --------------------------*/ 227 | /* Menu 228 | --------------------------*/ 229 | /* Rate 230 | --------------------------*/ 231 | /* DatePicker 232 | --------------------------*/ 233 | /* Loading 234 | --------------------------*/ 235 | /* Scrollbar 236 | --------------------------*/ 237 | /* Carousel 238 | --------------------------*/ 239 | /* Collapse 240 | --------------------------*/ 241 | } -------------------------------------------------------------------------------- /theme/select-dropdown.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-select-dropdown{ 92 | position: absolute; 93 | z-index: 1001; 94 | border: solid 1px rgb(209, 219, 229); 95 | border-radius: 2px; 96 | background-color: #fff; 97 | box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); 98 | box-sizing: border-box; 99 | margin: 5px 0; 100 | } 101 | 102 | .el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{ 103 | padding: 0; 104 | } 105 | 106 | .el-select-dropdown.is-multiple{} 107 | 108 | .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ 109 | color: #20a0ff; 110 | background-color: #fff; 111 | } 112 | 113 | .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{ 114 | background-color: rgb(228, 232, 241); 115 | } 116 | 117 | .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{ 118 | position: absolute; 119 | right: 10px; 120 | font-family: 'element-icons'; 121 | content: "\E608"; 122 | font-size: 11px; 123 | -webkit-font-smoothing: antialiased; 124 | -moz-osx-font-smoothing: grayscale; 125 | } 126 | 127 | .el-select-dropdown__empty{ 128 | padding: 10px 0; 129 | margin: 0; 130 | text-align: center; 131 | color: #999; 132 | font-size: 14px; 133 | } 134 | 135 | .el-select-dropdown__wrap{ 136 | max-height: 274px; 137 | width: 100%; 138 | } 139 | 140 | .el-select-dropdown__list{ 141 | list-style: none; 142 | padding: 6px 0; 143 | margin: 0; 144 | box-sizing: border-box; 145 | } 146 | :root{ 147 | /* Transition 148 | -------------------------- */ 149 | /* Colors 150 | -------------------------- */ 151 | /* Link 152 | -------------------------- */ 153 | /* Border 154 | -------------------------- */ 155 | /* Box-shadow 156 | -------------------------- */ 157 | /* Fill 158 | -------------------------- */ 159 | /* Font 160 | -------------------------- */ 161 | /* Size 162 | -------------------------- */ 163 | /* z-index 164 | -------------------------- */ 165 | /* Disable base 166 | -------------------------- */ 167 | /* Icon 168 | -------------------------- */ 169 | /* Checkbox 170 | -------------------------- */ 171 | /* Radio 172 | -------------------------- */ 173 | /* Select 174 | -------------------------- */ 175 | /* Alert 176 | -------------------------- */ 177 | /* Message Box 178 | -------------------------- */ 179 | /* Message 180 | -------------------------- */ 181 | /* Notification 182 | -------------------------- */ 183 | /* Input 184 | -------------------------- */ 185 | /* Cascader 186 | -------------------------- */ 187 | /* Group 188 | -------------------------- */ 189 | /* Tab 190 | -------------------------- */ 191 | /* Button 192 | -------------------------- */ 193 | /* cascader 194 | -------------------------- */ 195 | /* Switch 196 | -------------------------- */ 197 | /* Dialog 198 | -------------------------- */ 199 | /* Table 200 | -------------------------- */ 201 | /* Pagination 202 | -------------------------- */ 203 | /* Popover 204 | -------------------------- */ 205 | /* Tooltip 206 | -------------------------- */ 207 | /* Tag 208 | -------------------------- */ 209 | /* Dropdown 210 | -------------------------- */ 211 | /* Badge 212 | -------------------------- */ 213 | /* Card 214 | --------------------------*/ 215 | /* Slider 216 | --------------------------*/ 217 | /* Steps 218 | --------------------------*/ 219 | /* Menu 220 | --------------------------*/ 221 | /* Rate 222 | --------------------------*/ 223 | /* DatePicker 224 | --------------------------*/ 225 | /* Loading 226 | --------------------------*/ 227 | /* Scrollbar 228 | --------------------------*/ 229 | /* Carousel 230 | --------------------------*/ 231 | /* Collapse 232 | --------------------------*/ 233 | } -------------------------------------------------------------------------------- /theme/loading.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-loading-mask{ 92 | position: absolute; 93 | z-index: 10000; 94 | background-color: rgba(255, 255, 255, .9); 95 | margin: 0; 96 | top: 0; 97 | right: 0; 98 | bottom: 0; 99 | left: 0; 100 | transition: opacity 0.3s; 101 | } 102 | 103 | .el-loading-mask.is-fullscreen{ 104 | position: fixed; 105 | } 106 | 107 | .el-loading-mask.is-fullscreen .el-loading-spinner{ 108 | margin-top: -25px; 109 | } 110 | 111 | .el-loading-mask.is-fullscreen .el-loading-spinner .circular{ 112 | width: 50px; 113 | height: 50px; 114 | } 115 | 116 | .el-loading-spinner{ 117 | top: 50%; 118 | margin-top: -21px; 119 | width: 100%; 120 | text-align: center; 121 | position: absolute; 122 | } 123 | 124 | .el-loading-spinner .el-loading-text{ 125 | color: #20a0ff; 126 | margin: 3px 0; 127 | font-size: 14px; 128 | } 129 | 130 | .el-loading-spinner .circular{ 131 | width: 42px; 132 | height: 42px; 133 | animation: loading-rotate 2s linear infinite; 134 | } 135 | 136 | .el-loading-spinner .path{ 137 | animation: loading-dash 1.5s ease-in-out infinite; 138 | stroke-dasharray: 90, 150; 139 | stroke-dashoffset: 0; 140 | stroke-width: 2; 141 | stroke: #20a0ff; 142 | stroke-linecap: round; 143 | } 144 | 145 | .el-loading-fade-enter, .el-loading-fade-leave-active { 146 | opacity: 0; 147 | } 148 | 149 | @keyframes loading-rotate { 150 | 100% { 151 | transform: rotate(360deg); 152 | } 153 | } 154 | 155 | @keyframes loading-dash { 156 | 0% { 157 | stroke-dasharray: 1, 200; 158 | stroke-dashoffset: 0; 159 | } 160 | 50% { 161 | stroke-dasharray: 90, 150; 162 | stroke-dashoffset: -40px; 163 | } 164 | 100% { 165 | stroke-dasharray: 90, 150; 166 | stroke-dashoffset: -120px; 167 | } 168 | } 169 | :root{ 170 | /* Transition 171 | -------------------------- */ 172 | /* Colors 173 | -------------------------- */ 174 | /* Link 175 | -------------------------- */ 176 | /* Border 177 | -------------------------- */ 178 | /* Box-shadow 179 | -------------------------- */ 180 | /* Fill 181 | -------------------------- */ 182 | /* Font 183 | -------------------------- */ 184 | /* Size 185 | -------------------------- */ 186 | /* z-index 187 | -------------------------- */ 188 | /* Disable base 189 | -------------------------- */ 190 | /* Icon 191 | -------------------------- */ 192 | /* Checkbox 193 | -------------------------- */ 194 | /* Radio 195 | -------------------------- */ 196 | /* Select 197 | -------------------------- */ 198 | /* Alert 199 | -------------------------- */ 200 | /* Message Box 201 | -------------------------- */ 202 | /* Message 203 | -------------------------- */ 204 | /* Notification 205 | -------------------------- */ 206 | /* Input 207 | -------------------------- */ 208 | /* Cascader 209 | -------------------------- */ 210 | /* Group 211 | -------------------------- */ 212 | /* Tab 213 | -------------------------- */ 214 | /* Button 215 | -------------------------- */ 216 | /* cascader 217 | -------------------------- */ 218 | /* Switch 219 | -------------------------- */ 220 | /* Dialog 221 | -------------------------- */ 222 | /* Table 223 | -------------------------- */ 224 | /* Pagination 225 | -------------------------- */ 226 | /* Popover 227 | -------------------------- */ 228 | /* Tooltip 229 | -------------------------- */ 230 | /* Tag 231 | -------------------------- */ 232 | /* Dropdown 233 | -------------------------- */ 234 | /* Badge 235 | -------------------------- */ 236 | /* Card 237 | --------------------------*/ 238 | /* Slider 239 | --------------------------*/ 240 | /* Steps 241 | --------------------------*/ 242 | /* Menu 243 | --------------------------*/ 244 | /* Rate 245 | --------------------------*/ 246 | /* DatePicker 247 | --------------------------*/ 248 | /* Loading 249 | --------------------------*/ 250 | /* Scrollbar 251 | --------------------------*/ 252 | /* Carousel 253 | --------------------------*/ 254 | /* Collapse 255 | --------------------------*/ 256 | } -------------------------------------------------------------------------------- /theme/alert.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-alert{ 92 | width: 100%; 93 | padding: 8px 16px; 94 | margin: 0; 95 | box-sizing: border-box; 96 | border-radius: 4px; 97 | position: relative; 98 | background-color: #fff; 99 | overflow: hidden; 100 | color: #fff; 101 | opacity: 1; 102 | display: table; 103 | transition: opacity .2s; 104 | } 105 | 106 | .el-alert .el-alert__description{ 107 | color: #fff; 108 | font-size: 12px; 109 | margin: 5px 0 0 0; 110 | } 111 | 112 | .el-alert--success{ 113 | background-color: #13ce66; 114 | } 115 | 116 | .el-alert--info{ 117 | background-color: #50bfff; 118 | } 119 | 120 | .el-alert--warning{ 121 | background-color: #f7ba2a; 122 | } 123 | 124 | .el-alert--error{ 125 | background-color: #ff4949; 126 | } 127 | 128 | .el-alert__content{ 129 | display: table-cell; 130 | padding: 0 8px; 131 | } 132 | 133 | .el-alert__icon{ 134 | font-size: 16px; 135 | width: 16px; 136 | display: table-cell; 137 | color: #fff; 138 | vertical-align: middle; 139 | } 140 | 141 | .el-alert__icon.is-big{ 142 | font-size: 28px; 143 | width: 28px; 144 | } 145 | 146 | .el-alert__title{ 147 | font-size: 13px; 148 | line-height: 18px; 149 | } 150 | 151 | .el-alert__title.is-bold{ 152 | font-weight: 700; 153 | } 154 | 155 | .el-alert__closebtn{ 156 | font-size: 12px; 157 | color: #fff; 158 | opacity: 1; 159 | top: 12px; 160 | right: 15px; 161 | position: absolute; 162 | cursor: pointer; 163 | } 164 | 165 | .el-alert__closebtn.is-customed{ 166 | font-style: normal; 167 | font-size: 13px; 168 | top: 9px; 169 | } 170 | 171 | .el-alert-fade-enter, .el-alert-fade-leave-active { 172 | opacity: 0; 173 | } 174 | :root{ 175 | /* Transition 176 | -------------------------- */ 177 | /* Colors 178 | -------------------------- */ 179 | /* Link 180 | -------------------------- */ 181 | /* Border 182 | -------------------------- */ 183 | /* Box-shadow 184 | -------------------------- */ 185 | /* Fill 186 | -------------------------- */ 187 | /* Font 188 | -------------------------- */ 189 | /* Size 190 | -------------------------- */ 191 | /* z-index 192 | -------------------------- */ 193 | /* Disable base 194 | -------------------------- */ 195 | /* Icon 196 | -------------------------- */ 197 | /* Checkbox 198 | -------------------------- */ 199 | /* Radio 200 | -------------------------- */ 201 | /* Select 202 | -------------------------- */ 203 | /* Alert 204 | -------------------------- */ 205 | /* Message Box 206 | -------------------------- */ 207 | /* Message 208 | -------------------------- */ 209 | /* Notification 210 | -------------------------- */ 211 | /* Input 212 | -------------------------- */ 213 | /* Cascader 214 | -------------------------- */ 215 | /* Group 216 | -------------------------- */ 217 | /* Tab 218 | -------------------------- */ 219 | /* Button 220 | -------------------------- */ 221 | /* cascader 222 | -------------------------- */ 223 | /* Switch 224 | -------------------------- */ 225 | /* Dialog 226 | -------------------------- */ 227 | /* Table 228 | -------------------------- */ 229 | /* Pagination 230 | -------------------------- */ 231 | /* Popover 232 | -------------------------- */ 233 | /* Tooltip 234 | -------------------------- */ 235 | /* Tag 236 | -------------------------- */ 237 | /* Dropdown 238 | -------------------------- */ 239 | /* Badge 240 | -------------------------- */ 241 | /* Card 242 | --------------------------*/ 243 | /* Slider 244 | --------------------------*/ 245 | /* Steps 246 | --------------------------*/ 247 | /* Menu 248 | --------------------------*/ 249 | /* Rate 250 | --------------------------*/ 251 | /* DatePicker 252 | --------------------------*/ 253 | /* Loading 254 | --------------------------*/ 255 | /* Scrollbar 256 | --------------------------*/ 257 | /* Carousel 258 | --------------------------*/ 259 | /* Collapse 260 | --------------------------*/ 261 | } -------------------------------------------------------------------------------- /theme/notification.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-notification{ 92 | width: 330px; 93 | padding: 20px; 94 | box-sizing: border-box; 95 | border-radius: 2px; 96 | position: fixed; 97 | right: 16px; 98 | background-color: #fff; 99 | box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); 100 | transition: opacity 0.3s, transform .3s, right .3s, top 0.4s; 101 | overflow: hidden; 102 | } 103 | 104 | .el-notification .el-icon-circle-check{ 105 | color: #13ce66; 106 | } 107 | 108 | .el-notification .el-icon-circle-cross{ 109 | color: #ff4949; 110 | } 111 | 112 | .el-notification .el-icon-information{ 113 | color: #50bfff; 114 | } 115 | 116 | .el-notification .el-icon-warning{ 117 | color: #f7ba2a; 118 | } 119 | 120 | .el-notification__group{ 121 | margin-left: 0; 122 | } 123 | 124 | .el-notification__group.is-with-icon{ 125 | margin-left: 55px; 126 | } 127 | 128 | .el-notification__title{ 129 | font-weight: 400; 130 | font-size: 16px; 131 | color: rgb(31, 45, 61); 132 | } 133 | 134 | .el-notification__content{ 135 | font-size: 14px; 136 | line-height: 21px; 137 | margin: 10px 0 0 0; 138 | color: rgb(131, 145, 165); 139 | text-align: justify; 140 | } 141 | 142 | .el-notification__icon{ 143 | width: 40px; 144 | height: 40px; 145 | font-size: 40px; 146 | float: left; 147 | position: relative; 148 | top: 3px; 149 | } 150 | 151 | .el-notification__closeBtn{ 152 | top: 20px; 153 | right: 20px; 154 | position: absolute; 155 | cursor: pointer; 156 | color: rgb(191, 203, 217); 157 | font-size: 14px; 158 | } 159 | 160 | .el-notification__closeBtn:hover{ 161 | color: rgb(151, 168, 190); 162 | } 163 | 164 | .el-notification-fade-enter { 165 | transform: translateX(100%); 166 | right: 0; 167 | } 168 | 169 | .el-notification-fade-leave-active { 170 | opacity: 0; 171 | } 172 | :root{ 173 | /* Transition 174 | -------------------------- */ 175 | /* Colors 176 | -------------------------- */ 177 | /* Link 178 | -------------------------- */ 179 | /* Border 180 | -------------------------- */ 181 | /* Box-shadow 182 | -------------------------- */ 183 | /* Fill 184 | -------------------------- */ 185 | /* Font 186 | -------------------------- */ 187 | /* Size 188 | -------------------------- */ 189 | /* z-index 190 | -------------------------- */ 191 | /* Disable base 192 | -------------------------- */ 193 | /* Icon 194 | -------------------------- */ 195 | /* Checkbox 196 | -------------------------- */ 197 | /* Radio 198 | -------------------------- */ 199 | /* Select 200 | -------------------------- */ 201 | /* Alert 202 | -------------------------- */ 203 | /* Message Box 204 | -------------------------- */ 205 | /* Message 206 | -------------------------- */ 207 | /* Notification 208 | -------------------------- */ 209 | /* Input 210 | -------------------------- */ 211 | /* Cascader 212 | -------------------------- */ 213 | /* Group 214 | -------------------------- */ 215 | /* Tab 216 | -------------------------- */ 217 | /* Button 218 | -------------------------- */ 219 | /* cascader 220 | -------------------------- */ 221 | /* Switch 222 | -------------------------- */ 223 | /* Dialog 224 | -------------------------- */ 225 | /* Table 226 | -------------------------- */ 227 | /* Pagination 228 | -------------------------- */ 229 | /* Popover 230 | -------------------------- */ 231 | /* Tooltip 232 | -------------------------- */ 233 | /* Tag 234 | -------------------------- */ 235 | /* Dropdown 236 | -------------------------- */ 237 | /* Badge 238 | -------------------------- */ 239 | /* Card 240 | --------------------------*/ 241 | /* Slider 242 | --------------------------*/ 243 | /* Steps 244 | --------------------------*/ 245 | /* Menu 246 | --------------------------*/ 247 | /* Rate 248 | --------------------------*/ 249 | /* DatePicker 250 | --------------------------*/ 251 | /* Loading 252 | --------------------------*/ 253 | /* Scrollbar 254 | --------------------------*/ 255 | /* Carousel 256 | --------------------------*/ 257 | /* Collapse 258 | --------------------------*/ 259 | } -------------------------------------------------------------------------------- /theme/message.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-message{ 92 | box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); 93 | min-width: 300px; 94 | padding: 10px 12px; 95 | box-sizing: border-box; 96 | border-radius: 2px; 97 | position: fixed; 98 | left: 50%; 99 | top: 20px; 100 | transform: translateX(-50%); 101 | background-color: #fff; 102 | transition: opacity 0.3s, transform .4s; 103 | overflow: hidden; 104 | } 105 | 106 | .el-message .el-icon-circle-check{ 107 | color: #13ce66; 108 | } 109 | 110 | .el-message .el-icon-circle-cross{ 111 | color: #ff4949; 112 | } 113 | 114 | .el-message .el-icon-information{ 115 | color: #50bfff; 116 | } 117 | 118 | .el-message .el-icon-warning{ 119 | color: #f7ba2a; 120 | } 121 | 122 | .el-message__group{ 123 | margin-left: 38px; 124 | position: relative; 125 | height: 20px; 126 | } 127 | 128 | .el-message__group p{ 129 | font-size: 14px; 130 | line-height: 20px; 131 | margin: 0 34px 0 0; 132 | white-space: nowrap; 133 | color: rgb(131, 145, 165); 134 | text-align: justify; 135 | display: inline-block; 136 | vertical-align: middle; 137 | } 138 | 139 | .el-message__group.is-with-icon{ 140 | margin-left: 0; 141 | } 142 | 143 | .el-message__img{ 144 | width: 40px; 145 | height: 40px; 146 | position: absolute; 147 | left: 0; 148 | top: 0; 149 | } 150 | 151 | .el-message__icon{ 152 | vertical-align: middle; 153 | margin-right: 8px; 154 | } 155 | 156 | .el-message__closeBtn{ 157 | top: 3px; 158 | right: 0; 159 | position: absolute; 160 | cursor: pointer; 161 | color: rgb(191, 203, 217); 162 | font-size: 14px; 163 | } 164 | 165 | .el-message__closeBtn:hover{ 166 | color: rgb(151, 168, 190); 167 | } 168 | 169 | .el-message-fade-enter, .el-message-fade-leave-active { 170 | opacity: 0; 171 | transform: translate(-50%, -100%); 172 | } 173 | :root{ 174 | /* Transition 175 | -------------------------- */ 176 | /* Colors 177 | -------------------------- */ 178 | /* Link 179 | -------------------------- */ 180 | /* Border 181 | -------------------------- */ 182 | /* Box-shadow 183 | -------------------------- */ 184 | /* Fill 185 | -------------------------- */ 186 | /* Font 187 | -------------------------- */ 188 | /* Size 189 | -------------------------- */ 190 | /* z-index 191 | -------------------------- */ 192 | /* Disable base 193 | -------------------------- */ 194 | /* Icon 195 | -------------------------- */ 196 | /* Checkbox 197 | -------------------------- */ 198 | /* Radio 199 | -------------------------- */ 200 | /* Select 201 | -------------------------- */ 202 | /* Alert 203 | -------------------------- */ 204 | /* Message Box 205 | -------------------------- */ 206 | /* Message 207 | -------------------------- */ 208 | /* Notification 209 | -------------------------- */ 210 | /* Input 211 | -------------------------- */ 212 | /* Cascader 213 | -------------------------- */ 214 | /* Group 215 | -------------------------- */ 216 | /* Tab 217 | -------------------------- */ 218 | /* Button 219 | -------------------------- */ 220 | /* cascader 221 | -------------------------- */ 222 | /* Switch 223 | -------------------------- */ 224 | /* Dialog 225 | -------------------------- */ 226 | /* Table 227 | -------------------------- */ 228 | /* Pagination 229 | -------------------------- */ 230 | /* Popover 231 | -------------------------- */ 232 | /* Tooltip 233 | -------------------------- */ 234 | /* Tag 235 | -------------------------- */ 236 | /* Dropdown 237 | -------------------------- */ 238 | /* Badge 239 | -------------------------- */ 240 | /* Card 241 | --------------------------*/ 242 | /* Slider 243 | --------------------------*/ 244 | /* Steps 245 | --------------------------*/ 246 | /* Menu 247 | --------------------------*/ 248 | /* Rate 249 | --------------------------*/ 250 | /* DatePicker 251 | --------------------------*/ 252 | /* Loading 253 | --------------------------*/ 254 | /* Scrollbar 255 | --------------------------*/ 256 | /* Carousel 257 | --------------------------*/ 258 | /* Collapse 259 | --------------------------*/ 260 | } -------------------------------------------------------------------------------- /theme/form.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-form{} 92 | 93 | .el-form--label-left{} 94 | 95 | .el-form--label-left .el-form-item__label{ 96 | text-align: left; 97 | } 98 | 99 | .el-form--label-top{} 100 | 101 | .el-form--label-top .el-form-item__label{ 102 | float: none; 103 | display: inline-block; 104 | padding: 0 0 10px 0; 105 | } 106 | 107 | .el-form--inline{} 108 | 109 | .el-form--inline .el-form-item{ 110 | display: inline-block; 111 | margin-right: 10px; 112 | vertical-align: top; 113 | } 114 | 115 | .el-form-item{ 116 | margin-bottom: 22px; 117 | } 118 | 119 | .el-form-item:before, .el-form-item:after{ 120 | display: table; 121 | content: ""; 122 | } 123 | 124 | .el-form-item:after{ 125 | clear: both; 126 | } 127 | 128 | .el-form-item .el-form-item{ 129 | margin-bottom: 0; 130 | } 131 | 132 | .el-form-item .el-form-item .el-form-item__content{ 133 | margin-left: 0 !important; 134 | } 135 | 136 | .el-form-item.is-error{} 137 | 138 | .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-textarea__inner{ 139 | border-color: #ff4949; 140 | } 141 | 142 | .el-form-item.is-required .el-form-item__label:before{ 143 | content: '*'; 144 | color: #ff4949; 145 | margin-right: 4px; 146 | } 147 | 148 | .el-form-item__label{ 149 | text-align: right; 150 | vertical-align: middle; 151 | float: left; 152 | font-size: 14px; 153 | color: rgb(72, 87, 106); 154 | line-height: 1; 155 | padding: 11px 12px 11px 0; 156 | box-sizing: border-box; 157 | } 158 | 159 | .el-form-item__content{ 160 | line-height: 36px; 161 | position: relative; 162 | font-size: 14px; 163 | } 164 | 165 | .el-form-item__content:before, .el-form-item__content:after{ 166 | display: table; 167 | content: ""; 168 | } 169 | 170 | .el-form-item__content:after{ 171 | clear: both; 172 | } 173 | 174 | .el-form-item__error{ 175 | color: #ff4949; 176 | font-size: 12px; 177 | line-height: 1; 178 | padding-top: 4px; 179 | position: absolute; 180 | top: 100%; 181 | left: 0; 182 | } 183 | :root{ 184 | /* Transition 185 | -------------------------- */ 186 | /* Colors 187 | -------------------------- */ 188 | /* Link 189 | -------------------------- */ 190 | /* Border 191 | -------------------------- */ 192 | /* Box-shadow 193 | -------------------------- */ 194 | /* Fill 195 | -------------------------- */ 196 | /* Font 197 | -------------------------- */ 198 | /* Size 199 | -------------------------- */ 200 | /* z-index 201 | -------------------------- */ 202 | /* Disable base 203 | -------------------------- */ 204 | /* Icon 205 | -------------------------- */ 206 | /* Checkbox 207 | -------------------------- */ 208 | /* Radio 209 | -------------------------- */ 210 | /* Select 211 | -------------------------- */ 212 | /* Alert 213 | -------------------------- */ 214 | /* Message Box 215 | -------------------------- */ 216 | /* Message 217 | -------------------------- */ 218 | /* Notification 219 | -------------------------- */ 220 | /* Input 221 | -------------------------- */ 222 | /* Cascader 223 | -------------------------- */ 224 | /* Group 225 | -------------------------- */ 226 | /* Tab 227 | -------------------------- */ 228 | /* Button 229 | -------------------------- */ 230 | /* cascader 231 | -------------------------- */ 232 | /* Switch 233 | -------------------------- */ 234 | /* Dialog 235 | -------------------------- */ 236 | /* Table 237 | -------------------------- */ 238 | /* Pagination 239 | -------------------------- */ 240 | /* Popover 241 | -------------------------- */ 242 | /* Tooltip 243 | -------------------------- */ 244 | /* Tag 245 | -------------------------- */ 246 | /* Dropdown 247 | -------------------------- */ 248 | /* Badge 249 | -------------------------- */ 250 | /* Card 251 | --------------------------*/ 252 | /* Slider 253 | --------------------------*/ 254 | /* Steps 255 | --------------------------*/ 256 | /* Menu 257 | --------------------------*/ 258 | /* Rate 259 | --------------------------*/ 260 | /* DatePicker 261 | --------------------------*/ 262 | /* Loading 263 | --------------------------*/ 264 | /* Scrollbar 265 | --------------------------*/ 266 | /* Carousel 267 | --------------------------*/ 268 | /* Collapse 269 | --------------------------*/ 270 | } -------------------------------------------------------------------------------- /theme/tree.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-tree{ 92 | cursor: default; 93 | background: #fff; 94 | border: 1px solid rgb(209, 219, 229); 95 | } 96 | 97 | .el-tree__empty-block{ 98 | position: relative; 99 | min-height: 60px; 100 | text-align: center; 101 | width: 100%; 102 | height: 100%; 103 | } 104 | 105 | .el-tree__empty-text{ 106 | position: absolute; 107 | left: 50%; 108 | top: 50%; 109 | transform: translate(-50%, -50%); 110 | color: rgb(94, 115, 130); 111 | } 112 | 113 | .el-tree-node{ 114 | white-space: nowrap; 115 | } 116 | 117 | .el-tree-node > .el-tree-node__children{ 118 | overflow: hidden; 119 | background-color: transparent; 120 | } 121 | 122 | .el-tree-node.is-expanded > .el-tree-node__children{ 123 | display: block; 124 | } 125 | 126 | .el-tree-node__content{ 127 | line-height: 36px; 128 | height: 36px; 129 | cursor: pointer; 130 | } 131 | 132 | .el-tree-node__content > .el-checkbox, .el-tree-node__content > .el-tree-node__expand-icon{ 133 | margin-right: 8px; 134 | } 135 | 136 | .el-tree-node__content > .el-checkbox{ 137 | vertical-align: middle; 138 | } 139 | 140 | .el-tree-node__content:hover{ 141 | background: rgb(228, 232, 241); 142 | } 143 | 144 | .el-tree-node__expand-icon{ 145 | display: inline-block; 146 | cursor: pointer; 147 | width: 0; 148 | height: 0; 149 | vertical-align: middle; 150 | margin-left: 10px; 151 | border: 6px solid transparent; 152 | border-right-width: 0; 153 | border-left-color: rgb(151, 168, 190); 154 | border-left-width: 7px; 155 | transform: rotate(0deg); 156 | transition: transform 0.3s ease-in-out; 157 | } 158 | 159 | .el-tree-node__expand-icon:hover{ 160 | border-left-color: #999; 161 | } 162 | 163 | .el-tree-node__expand-icon.expanded{ 164 | transform: rotate(90deg); 165 | } 166 | 167 | .el-tree-node__expand-icon.is-leaf{ 168 | border-color: transparent; 169 | cursor: default; 170 | } 171 | 172 | .el-tree-node__label{ 173 | font-size: 14px; 174 | vertical-align: middle; 175 | display: inline-block; 176 | } 177 | 178 | .el-tree-node__loading-icon{ 179 | display: inline-block; 180 | vertical-align: middle; 181 | margin-right: 4px; 182 | font-size: 14px; 183 | color: rgb(151, 168, 190); 184 | } 185 | 186 | .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { 187 | background-color: rgb(237, 247, 255); 188 | } 189 | :root{ 190 | /* Transition 191 | -------------------------- */ 192 | /* Colors 193 | -------------------------- */ 194 | /* Link 195 | -------------------------- */ 196 | /* Border 197 | -------------------------- */ 198 | /* Box-shadow 199 | -------------------------- */ 200 | /* Fill 201 | -------------------------- */ 202 | /* Font 203 | -------------------------- */ 204 | /* Size 205 | -------------------------- */ 206 | /* z-index 207 | -------------------------- */ 208 | /* Disable base 209 | -------------------------- */ 210 | /* Icon 211 | -------------------------- */ 212 | /* Checkbox 213 | -------------------------- */ 214 | /* Radio 215 | -------------------------- */ 216 | /* Select 217 | -------------------------- */ 218 | /* Alert 219 | -------------------------- */ 220 | /* Message Box 221 | -------------------------- */ 222 | /* Message 223 | -------------------------- */ 224 | /* Notification 225 | -------------------------- */ 226 | /* Input 227 | -------------------------- */ 228 | /* Cascader 229 | -------------------------- */ 230 | /* Group 231 | -------------------------- */ 232 | /* Tab 233 | -------------------------- */ 234 | /* Button 235 | -------------------------- */ 236 | /* cascader 237 | -------------------------- */ 238 | /* Switch 239 | -------------------------- */ 240 | /* Dialog 241 | -------------------------- */ 242 | /* Table 243 | -------------------------- */ 244 | /* Pagination 245 | -------------------------- */ 246 | /* Popover 247 | -------------------------- */ 248 | /* Tooltip 249 | -------------------------- */ 250 | /* Tag 251 | -------------------------- */ 252 | /* Dropdown 253 | -------------------------- */ 254 | /* Badge 255 | -------------------------- */ 256 | /* Card 257 | --------------------------*/ 258 | /* Slider 259 | --------------------------*/ 260 | /* Steps 261 | --------------------------*/ 262 | /* Menu 263 | --------------------------*/ 264 | /* Rate 265 | --------------------------*/ 266 | /* DatePicker 267 | --------------------------*/ 268 | /* Loading 269 | --------------------------*/ 270 | /* Scrollbar 271 | --------------------------*/ 272 | /* Carousel 273 | --------------------------*/ 274 | /* Collapse 275 | --------------------------*/ 276 | } -------------------------------------------------------------------------------- /theme/progress.css: -------------------------------------------------------------------------------- 1 | .el-progress-bar__inner:after{ 2 | display:inline-block; 3 | content:""; 4 | height:100%; 5 | vertical-align:middle; 6 | }@charset "UTF-8"; 7 | :root{ 8 | /* Transition 9 | -------------------------- */ 10 | /* Colors 11 | -------------------------- */ 12 | /* Link 13 | -------------------------- */ 14 | /* Border 15 | -------------------------- */ 16 | /* Box-shadow 17 | -------------------------- */ 18 | /* Fill 19 | -------------------------- */ 20 | /* Font 21 | -------------------------- */ 22 | /* Size 23 | -------------------------- */ 24 | /* z-index 25 | -------------------------- */ 26 | /* Disable base 27 | -------------------------- */ 28 | /* Icon 29 | -------------------------- */ 30 | /* Checkbox 31 | -------------------------- */ 32 | /* Radio 33 | -------------------------- */ 34 | /* Select 35 | -------------------------- */ 36 | /* Alert 37 | -------------------------- */ 38 | /* Message Box 39 | -------------------------- */ 40 | /* Message 41 | -------------------------- */ 42 | /* Notification 43 | -------------------------- */ 44 | /* Input 45 | -------------------------- */ 46 | /* Cascader 47 | -------------------------- */ 48 | /* Group 49 | -------------------------- */ 50 | /* Tab 51 | -------------------------- */ 52 | /* Button 53 | -------------------------- */ 54 | /* cascader 55 | -------------------------- */ 56 | /* Switch 57 | -------------------------- */ 58 | /* Dialog 59 | -------------------------- */ 60 | /* Table 61 | -------------------------- */ 62 | /* Pagination 63 | -------------------------- */ 64 | /* Popover 65 | -------------------------- */ 66 | /* Tooltip 67 | -------------------------- */ 68 | /* Tag 69 | -------------------------- */ 70 | /* Dropdown 71 | -------------------------- */ 72 | /* Badge 73 | -------------------------- */ 74 | /* Card 75 | --------------------------*/ 76 | /* Slider 77 | --------------------------*/ 78 | /* Steps 79 | --------------------------*/ 80 | /* Menu 81 | --------------------------*/ 82 | /* Rate 83 | --------------------------*/ 84 | /* DatePicker 85 | --------------------------*/ 86 | /* Loading 87 | --------------------------*/ 88 | /* Scrollbar 89 | --------------------------*/ 90 | /* Carousel 91 | --------------------------*/ 92 | /* Collapse 93 | --------------------------*/ 94 | } 95 | 96 | .el-progress{ 97 | position:relative; 98 | line-height:1; 99 | } 100 | 101 | .el-progress.is-exception .el-progress-bar__inner{ 102 | background-color:#ff4949; 103 | } 104 | 105 | .el-progress.is-exception .el-progress__text{ 106 | color:#ff4949; 107 | } 108 | 109 | .el-progress.is-success .el-progress-bar__inner{ 110 | background-color:#13ce66; 111 | } 112 | 113 | .el-progress.is-success .el-progress__text{ 114 | color:#13ce66; 115 | } 116 | 117 | .el-progress__text{ 118 | font-size:14px; 119 | color:rgb(72, 87, 106); 120 | display: inline-block; 121 | vertical-align: middle; 122 | margin-left: 10px; 123 | line-height: 1; 124 | } 125 | 126 | .el-progress__text i { 127 | vertical-align: middle; 128 | display: block; 129 | } 130 | 131 | .el-progress--circle{ 132 | display: inline-block; 133 | } 134 | 135 | .el-progress--circle .el-progress__text { 136 | position: absolute; 137 | top: 50%; 138 | left: 0; 139 | width: 100%; 140 | text-align: center; 141 | margin: 0; 142 | transform: translate(0, -50%); 143 | } 144 | 145 | .el-progress--circle .el-progress__text i { 146 | vertical-align: middle; 147 | display: inline-block; 148 | } 149 | 150 | .el-progress--without-text .el-progress__text { 151 | display: none; 152 | } 153 | 154 | .el-progress--without-text .el-progress-bar { 155 | padding-right: 0; 156 | margin-right: 0; 157 | display: block; 158 | } 159 | 160 | .el-progress--text-inside .el-progress-bar { 161 | padding-right: 0; 162 | margin-right: 0; 163 | } 164 | 165 | .el-progress-bar{ 166 | padding-right:50px; 167 | display:inline-block; 168 | vertical-align:middle; 169 | width:100%; 170 | margin-right:-55px; 171 | box-sizing:border-box; 172 | } 173 | 174 | .el-progress-bar__outer{ 175 | height: 6px; 176 | border-radius: 100px; 177 | background-color:rgb(228, 232, 241); 178 | overflow: hidden; 179 | position: relative; 180 | vertical-align: middle; 181 | } 182 | 183 | .el-progress-bar__inner{ 184 | position: absolute; 185 | left: 0; 186 | top: 0; 187 | height: 100%; 188 | border-radius: 2px 0 0 2px; 189 | background-color:#20a0ff; 190 | text-align: right; 191 | border-radius: 100px; 192 | line-height: 1; 193 | } 194 | 195 | .el-progress-bar__innerText{ 196 | display: inline-block; 197 | vertical-align: middle; 198 | color:#fff; 199 | font-size: 12px; 200 | margin: 0 5px; 201 | } 202 | 203 | @keyframes progress { 204 | 0% { 205 | background-position: 0 0; 206 | } 207 | 100% { 208 | background-position: 32px 0; 209 | } 210 | } 211 | :root{ 212 | /* Transition 213 | -------------------------- */ 214 | /* Colors 215 | -------------------------- */ 216 | /* Link 217 | -------------------------- */ 218 | /* Border 219 | -------------------------- */ 220 | /* Box-shadow 221 | -------------------------- */ 222 | /* Fill 223 | -------------------------- */ 224 | /* Font 225 | -------------------------- */ 226 | /* Size 227 | -------------------------- */ 228 | /* z-index 229 | -------------------------- */ 230 | /* Disable base 231 | -------------------------- */ 232 | /* Icon 233 | -------------------------- */ 234 | /* Checkbox 235 | -------------------------- */ 236 | /* Radio 237 | -------------------------- */ 238 | /* Select 239 | -------------------------- */ 240 | /* Alert 241 | -------------------------- */ 242 | /* Message Box 243 | -------------------------- */ 244 | /* Message 245 | -------------------------- */ 246 | /* Notification 247 | -------------------------- */ 248 | /* Input 249 | -------------------------- */ 250 | /* Cascader 251 | -------------------------- */ 252 | /* Group 253 | -------------------------- */ 254 | /* Tab 255 | -------------------------- */ 256 | /* Button 257 | -------------------------- */ 258 | /* cascader 259 | -------------------------- */ 260 | /* Switch 261 | -------------------------- */ 262 | /* Dialog 263 | -------------------------- */ 264 | /* Table 265 | -------------------------- */ 266 | /* Pagination 267 | -------------------------- */ 268 | /* Popover 269 | -------------------------- */ 270 | /* Tooltip 271 | -------------------------- */ 272 | /* Tag 273 | -------------------------- */ 274 | /* Dropdown 275 | -------------------------- */ 276 | /* Badge 277 | -------------------------- */ 278 | /* Card 279 | --------------------------*/ 280 | /* Slider 281 | --------------------------*/ 282 | /* Steps 283 | --------------------------*/ 284 | /* Menu 285 | --------------------------*/ 286 | /* Rate 287 | --------------------------*/ 288 | /* DatePicker 289 | --------------------------*/ 290 | /* Loading 291 | --------------------------*/ 292 | /* Scrollbar 293 | --------------------------*/ 294 | /* Carousel 295 | --------------------------*/ 296 | /* Collapse 297 | --------------------------*/ 298 | } -------------------------------------------------------------------------------- /theme/carousel.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-carousel{ 92 | overflow-x: hidden; 93 | position: relative; 94 | } 95 | 96 | .el-carousel__container{ 97 | position: relative; 98 | height: 300px; 99 | } 100 | 101 | .el-carousel__arrow{ 102 | border: none; 103 | outline: none; 104 | padding: 0; 105 | margin: 0; 106 | width: 36px; 107 | height: 36px; 108 | cursor: pointer; 109 | transition: .3s; 110 | border-radius: 50%; 111 | background-color: rgba(31, 45, 61, 0.11); 112 | color: #fff; 113 | position: absolute; 114 | top: 50%; 115 | z-index: 10; 116 | transform: translateY(-50%); 117 | text-align: center; 118 | font-size: 12px; 119 | } 120 | 121 | .el-carousel__arrow:hover{ 122 | background-color: rgba(31, 45, 61, 0.23); 123 | } 124 | 125 | .el-carousel__arrow i{ 126 | cursor: pointer; 127 | } 128 | 129 | .el-carousel__arrow--left{ 130 | left: 16px; 131 | } 132 | 133 | .el-carousel__arrow--right{ 134 | right: 16px; 135 | } 136 | 137 | .el-carousel__indicators{ 138 | position: absolute; 139 | list-style: none; 140 | bottom: 0; 141 | left: 50%; 142 | transform: translateX(-50%); 143 | margin: 0; 144 | padding: 0; 145 | } 146 | 147 | .el-carousel__indicators--outside{ 148 | bottom: 26px; 149 | text-align: center; 150 | position: static; 151 | transform: none; 152 | } 153 | 154 | .el-carousel__indicators--outside .el-carousel__indicator:hover button { 155 | opacity: 0.64; 156 | } 157 | 158 | .el-carousel__indicators--outside button { 159 | background-color: rgb(131, 145, 165); 160 | opacity: 0.24; 161 | } 162 | 163 | .el-carousel__indicator{ 164 | display: inline-block; 165 | background-color: transparent; 166 | padding: 12px 4px; 167 | cursor: pointer; 168 | } 169 | 170 | .el-carousel__indicator:hover button{ 171 | opacity: 0.72; 172 | } 173 | 174 | .el-carousel__indicator.is-active button{ 175 | opacity: 1; 176 | } 177 | 178 | .el-carousel__button{ 179 | display: block; 180 | opacity: 0.48; 181 | width: 30px; 182 | height: 2px; 183 | background-color: #fff; 184 | border: none; 185 | outline: none; 186 | padding: 0; 187 | margin: 0; 188 | cursor: pointer; 189 | transition: .3s; 190 | } 191 | 192 | .carousel-arrow-left-enter, .carousel-arrow-left-leave-active { 193 | transform: translateY(-50%) translateX(-10px); 194 | opacity: 0; 195 | } 196 | 197 | .carousel-arrow-right-enter, .carousel-arrow-right-leave-active { 198 | transform: translateY(-50%) translateX(10px); 199 | opacity: 0; 200 | }:root{ 201 | /* Transition 202 | -------------------------- */ 203 | /* Colors 204 | -------------------------- */ 205 | /* Link 206 | -------------------------- */ 207 | /* Border 208 | -------------------------- */ 209 | /* Box-shadow 210 | -------------------------- */ 211 | /* Fill 212 | -------------------------- */ 213 | /* Font 214 | -------------------------- */ 215 | /* Size 216 | -------------------------- */ 217 | /* z-index 218 | -------------------------- */ 219 | /* Disable base 220 | -------------------------- */ 221 | /* Icon 222 | -------------------------- */ 223 | /* Checkbox 224 | -------------------------- */ 225 | /* Radio 226 | -------------------------- */ 227 | /* Select 228 | -------------------------- */ 229 | /* Alert 230 | -------------------------- */ 231 | /* Message Box 232 | -------------------------- */ 233 | /* Message 234 | -------------------------- */ 235 | /* Notification 236 | -------------------------- */ 237 | /* Input 238 | -------------------------- */ 239 | /* Cascader 240 | -------------------------- */ 241 | /* Group 242 | -------------------------- */ 243 | /* Tab 244 | -------------------------- */ 245 | /* Button 246 | -------------------------- */ 247 | /* cascader 248 | -------------------------- */ 249 | /* Switch 250 | -------------------------- */ 251 | /* Dialog 252 | -------------------------- */ 253 | /* Table 254 | -------------------------- */ 255 | /* Pagination 256 | -------------------------- */ 257 | /* Popover 258 | -------------------------- */ 259 | /* Tooltip 260 | -------------------------- */ 261 | /* Tag 262 | -------------------------- */ 263 | /* Dropdown 264 | -------------------------- */ 265 | /* Badge 266 | -------------------------- */ 267 | /* Card 268 | --------------------------*/ 269 | /* Slider 270 | --------------------------*/ 271 | /* Steps 272 | --------------------------*/ 273 | /* Menu 274 | --------------------------*/ 275 | /* Rate 276 | --------------------------*/ 277 | /* DatePicker 278 | --------------------------*/ 279 | /* Loading 280 | --------------------------*/ 281 | /* Scrollbar 282 | --------------------------*/ 283 | /* Carousel 284 | --------------------------*/ 285 | /* Collapse 286 | --------------------------*/ 287 | } -------------------------------------------------------------------------------- /theme/tag.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-tag{ 92 | background-color: rgb(131, 145, 165); 93 | display: inline-block; 94 | padding: 0 5px; 95 | height: 24px; 96 | line-height: 22px; 97 | font-size: 12px; 98 | color: #fff; 99 | border-radius: 4px; 100 | box-sizing: border-box; 101 | border: 1px solid transparent; 102 | white-space: nowrap 103 | } 104 | 105 | .el-tag .el-icon-close{ 106 | border-radius: 50%; 107 | text-align: center; 108 | position: relative; 109 | cursor: pointer; 110 | font-size: 12px; 111 | transform: scale(.75, .75); 112 | height: 18px; 113 | width: 18px; 114 | line-height: 18px; 115 | vertical-align: middle; 116 | top: -1px; 117 | right: -2px 118 | } 119 | 120 | .el-tag .el-icon-close:hover{ 121 | background-color: #fff; 122 | color: rgb(131, 145, 165) 123 | } 124 | 125 | .el-tag--gray{ 126 | background-color: rgb(228, 232, 241); 127 | border-color: rgb(228, 232, 241); 128 | color: rgb(72, 87, 106) 129 | } 130 | 131 | .el-tag--gray .el-tag__close:hover{ 132 | background-color: rgb(72, 87, 106); 133 | color: #fff 134 | } 135 | 136 | .el-tag--gray.is-hit{ 137 | border-color: rgb(72, 87, 106) 138 | } 139 | 140 | .el-tag--primary{ 141 | background-color: rgba(32,159,255,0.10); 142 | border-color: rgba(32,159,255,0.20); 143 | color: #20a0ff 144 | } 145 | 146 | .el-tag--primary .el-tag__close:hover{ 147 | background-color: #20a0ff; 148 | color: #fff 149 | } 150 | 151 | .el-tag--primary.is-hit{ 152 | border-color: #20a0ff 153 | } 154 | 155 | .el-tag--success{ 156 | background-color: rgba(18,206,102,0.10); 157 | border-color: rgba(18,206,102,0.20); 158 | color: #13ce66 159 | } 160 | 161 | .el-tag--success .el-tag__close:hover{ 162 | background-color: #13ce66; 163 | color: #fff 164 | } 165 | 166 | .el-tag--success.is-hit{ 167 | border-color: #13ce66 168 | } 169 | 170 | .el-tag--warning{ 171 | background-color: rgba(247,186,41,0.10); 172 | border-color: rgba(247,186,41,0.20); 173 | color: #f7ba2a 174 | } 175 | 176 | .el-tag--warning .el-tag__close:hover{ 177 | background-color: #f7ba2a; 178 | color: #fff 179 | } 180 | 181 | .el-tag--warning.is-hit{ 182 | border-color: #f7ba2a 183 | } 184 | 185 | .el-tag--danger{ 186 | background-color: rgba(255,73,73,0.10); 187 | border-color: rgba(255,73,73,0.20); 188 | color: #ff4949 189 | } 190 | 191 | .el-tag--danger .el-tag__close:hover{ 192 | background-color: #ff4949; 193 | color: #fff 194 | } 195 | 196 | .el-tag--danger.is-hit{ 197 | border-color: #ff4949 198 | } 199 | :root{ 200 | /* Transition 201 | -------------------------- */ 202 | /* Colors 203 | -------------------------- */ 204 | /* Link 205 | -------------------------- */ 206 | /* Border 207 | -------------------------- */ 208 | /* Box-shadow 209 | -------------------------- */ 210 | /* Fill 211 | -------------------------- */ 212 | /* Font 213 | -------------------------- */ 214 | /* Size 215 | -------------------------- */ 216 | /* z-index 217 | -------------------------- */ 218 | /* Disable base 219 | -------------------------- */ 220 | /* Icon 221 | -------------------------- */ 222 | /* Checkbox 223 | -------------------------- */ 224 | /* Radio 225 | -------------------------- */ 226 | /* Select 227 | -------------------------- */ 228 | /* Alert 229 | -------------------------- */ 230 | /* Message Box 231 | -------------------------- */ 232 | /* Message 233 | -------------------------- */ 234 | /* Notification 235 | -------------------------- */ 236 | /* Input 237 | -------------------------- */ 238 | /* Cascader 239 | -------------------------- */ 240 | /* Group 241 | -------------------------- */ 242 | /* Tab 243 | -------------------------- */ 244 | /* Button 245 | -------------------------- */ 246 | /* cascader 247 | -------------------------- */ 248 | /* Switch 249 | -------------------------- */ 250 | /* Dialog 251 | -------------------------- */ 252 | /* Table 253 | -------------------------- */ 254 | /* Pagination 255 | -------------------------- */ 256 | /* Popover 257 | -------------------------- */ 258 | /* Tooltip 259 | -------------------------- */ 260 | /* Tag 261 | -------------------------- */ 262 | /* Dropdown 263 | -------------------------- */ 264 | /* Badge 265 | -------------------------- */ 266 | /* Card 267 | --------------------------*/ 268 | /* Slider 269 | --------------------------*/ 270 | /* Steps 271 | --------------------------*/ 272 | /* Menu 273 | --------------------------*/ 274 | /* Rate 275 | --------------------------*/ 276 | /* DatePicker 277 | --------------------------*/ 278 | /* Loading 279 | --------------------------*/ 280 | /* Scrollbar 281 | --------------------------*/ 282 | /* Carousel 283 | --------------------------*/ 284 | /* Collapse 285 | --------------------------*/ 286 | } -------------------------------------------------------------------------------- /theme/dialog.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | .v-modal-enter{ 91 | animation: v-modal-in .2s ease; 92 | } 93 | .v-modal-leave{ 94 | animation: v-modal-out .2s ease forwards; 95 | } 96 | @keyframes v-modal-in{ 97 | 0%{ 98 | opacity: 0; 99 | } 100 | 100%{} 101 | } 102 | @keyframes v-modal-out{ 103 | 0%{} 104 | 100%{ 105 | opacity: 0; 106 | } 107 | } 108 | .v-modal{ 109 | position: fixed; 110 | left: 0; 111 | top: 0; 112 | width: 100%; 113 | height: 100%; 114 | opacity: 0.5; 115 | background: #000; 116 | } 117 | 118 | .el-dialog{ 119 | position: absolute; 120 | left: 50%; 121 | transform: translateX(-50%); 122 | background: #fff; 123 | border-radius: 2px; 124 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 125 | box-sizing: border-box; 126 | } 127 | 128 | .el-dialog--tiny{ 129 | width: 30%; 130 | } 131 | 132 | .el-dialog--small{ 133 | width: 50%; 134 | } 135 | 136 | .el-dialog--large{ 137 | width: 90%; 138 | } 139 | 140 | .el-dialog--full{ 141 | width: 100%; 142 | top: 0; 143 | height: 100%; 144 | overflow: auto; 145 | } 146 | 147 | .el-dialog__wrapper{ 148 | top: 0; 149 | right: 0; 150 | bottom: 0; 151 | left: 0; 152 | position: fixed; 153 | overflow: auto; 154 | margin: 0; 155 | } 156 | 157 | .el-dialog__header{ 158 | padding: 20px 20px 0; 159 | } 160 | 161 | .el-dialog__close{ 162 | cursor: pointer; 163 | color: rgb(191, 203, 217); 164 | } 165 | 166 | .el-dialog__close:hover{ 167 | color: #20a0ff; 168 | } 169 | 170 | .el-dialog__title{ 171 | line-height: 1; 172 | font-size: 16px; 173 | font-weight: 700; 174 | color: rgb(31, 45, 61); 175 | } 176 | 177 | .el-dialog__body{ 178 | padding: 30px 20px; 179 | color: rgb(72, 87, 106); 180 | font-size: 14px; 181 | } 182 | 183 | .el-dialog__headerbtn{ 184 | float: right; 185 | } 186 | 187 | .el-dialog__footer{ 188 | padding: 10px 20px 15px; 189 | text-align: right; 190 | box-sizing: border-box; 191 | } 192 | 193 | .dialog-fade-enter-active { 194 | animation: dialog-fade-in .3s; 195 | } 196 | 197 | .dialog-fade-leave-active { 198 | animation: dialog-fade-out .3s; 199 | } 200 | 201 | @keyframes dialog-fade-in { 202 | 0% { 203 | transform: translate3d(0, -20px, 0); 204 | opacity: 0; 205 | } 206 | 100% { 207 | transform: translate3d(0, 0, 0); 208 | opacity: 1; 209 | } 210 | } 211 | 212 | @keyframes dialog-fade-out { 213 | 0% { 214 | transform: translate3d(0, 0, 0); 215 | opacity: 1; 216 | } 217 | 100% { 218 | transform: translate3d(0, -20px, 0); 219 | opacity: 0; 220 | } 221 | } 222 | :root{ 223 | /* Transition 224 | -------------------------- */ 225 | /* Colors 226 | -------------------------- */ 227 | /* Link 228 | -------------------------- */ 229 | /* Border 230 | -------------------------- */ 231 | /* Box-shadow 232 | -------------------------- */ 233 | /* Fill 234 | -------------------------- */ 235 | /* Font 236 | -------------------------- */ 237 | /* Size 238 | -------------------------- */ 239 | /* z-index 240 | -------------------------- */ 241 | /* Disable base 242 | -------------------------- */ 243 | /* Icon 244 | -------------------------- */ 245 | /* Checkbox 246 | -------------------------- */ 247 | /* Radio 248 | -------------------------- */ 249 | /* Select 250 | -------------------------- */ 251 | /* Alert 252 | -------------------------- */ 253 | /* Message Box 254 | -------------------------- */ 255 | /* Message 256 | -------------------------- */ 257 | /* Notification 258 | -------------------------- */ 259 | /* Input 260 | -------------------------- */ 261 | /* Cascader 262 | -------------------------- */ 263 | /* Group 264 | -------------------------- */ 265 | /* Tab 266 | -------------------------- */ 267 | /* Button 268 | -------------------------- */ 269 | /* cascader 270 | -------------------------- */ 271 | /* Switch 272 | -------------------------- */ 273 | /* Dialog 274 | -------------------------- */ 275 | /* Table 276 | -------------------------- */ 277 | /* Pagination 278 | -------------------------- */ 279 | /* Popover 280 | -------------------------- */ 281 | /* Tooltip 282 | -------------------------- */ 283 | /* Tag 284 | -------------------------- */ 285 | /* Dropdown 286 | -------------------------- */ 287 | /* Badge 288 | -------------------------- */ 289 | /* Card 290 | --------------------------*/ 291 | /* Slider 292 | --------------------------*/ 293 | /* Steps 294 | --------------------------*/ 295 | /* Menu 296 | --------------------------*/ 297 | /* Rate 298 | --------------------------*/ 299 | /* DatePicker 300 | --------------------------*/ 301 | /* Loading 302 | --------------------------*/ 303 | /* Scrollbar 304 | --------------------------*/ 305 | /* Carousel 306 | --------------------------*/ 307 | /* Collapse 308 | --------------------------*/ 309 | } -------------------------------------------------------------------------------- /theme/popover.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-popover{ 92 | position: absolute; 93 | background: #fff; 94 | min-width: 150px; 95 | border-radius: 2px; 96 | border: 1px solid rgb(209, 219, 229); 97 | padding: 10px; 98 | z-index: 2000; 99 | font-size: 12px; 100 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12), 101 | 0px 0px 6px 0px rgba(0, 0, 0, .04); 102 | } 103 | 104 | .el-popover .popper__arrow, .el-popover .popper__arrow::after{ 105 | position: absolute; 106 | display: block; 107 | width: 0; 108 | height: 0; 109 | border-color: transparent; 110 | border-style: solid; 111 | } 112 | 113 | .el-popover .popper__arrow{ 114 | border-width: 6px; 115 | } 116 | 117 | .el-popover .popper__arrow::after{ 118 | content: " "; 119 | border-width: 6px; 120 | } 121 | 122 | .el-popover[x-placement^="top"]{ 123 | margin-bottom: 12px; 124 | } 125 | 126 | .el-popover[x-placement^="top"] .popper__arrow{ 127 | bottom: -6px; 128 | left: 50%; 129 | margin-right: 3px; 130 | border-top-color: rgb(209, 219, 229); 131 | border-bottom-width: 0; 132 | } 133 | 134 | .el-popover[x-placement^="top"] .popper__arrow::after{ 135 | bottom: 1px; 136 | margin-left: -6px; 137 | border-top-color: #fff; 138 | border-bottom-width: 0; 139 | } 140 | 141 | .el-popover[x-placement^="bottom"]{ 142 | margin-top: 12px; 143 | } 144 | 145 | .el-popover[x-placement^="bottom"] .popper__arrow{ 146 | top: -6px; 147 | left: 50%; 148 | margin-right: 3px; 149 | border-top-width: 0; 150 | border-bottom-color: rgb(209, 219, 229); 151 | } 152 | 153 | .el-popover[x-placement^="bottom"] .popper__arrow::after{ 154 | top: 1px; 155 | margin-left: -6px; 156 | border-top-width: 0; 157 | border-bottom-color: #fff; 158 | } 159 | 160 | .el-popover[x-placement^="right"]{ 161 | margin-left: 12px; 162 | } 163 | 164 | .el-popover[x-placement^="right"] .popper__arrow{ 165 | top: 50%; 166 | left: -6px; 167 | margin-bottom: 3px; 168 | border-right-color: rgb(209, 219, 229); 169 | border-left-width: 0; 170 | } 171 | 172 | .el-popover[x-placement^="right"] .popper__arrow::after{ 173 | bottom: -6px; 174 | left: 1px; 175 | border-right-color: #fff; 176 | border-left-width: 0; 177 | } 178 | 179 | .el-popover[x-placement^="left"]{ 180 | margin-right: 12px; 181 | } 182 | 183 | .el-popover[x-placement^="left"] .popper__arrow{ 184 | top: 50%; 185 | right: -6px; 186 | margin-bottom: 3px; 187 | border-right-width: 0; 188 | border-left-color: rgb(209, 219, 229); 189 | } 190 | 191 | .el-popover[x-placement^="left"] .popper__arrow::after{ 192 | right: 1px; 193 | bottom: -6px; 194 | margin-left: -6px; 195 | border-right-width: 0; 196 | border-left-color: #fff; 197 | } 198 | 199 | .el-popover__title{ 200 | color: rgb(31, 45, 61); 201 | font-size: 13px; 202 | line-height: 1; 203 | margin-bottom: 9px; 204 | } 205 | :root{ 206 | /* Transition 207 | -------------------------- */ 208 | /* Colors 209 | -------------------------- */ 210 | /* Link 211 | -------------------------- */ 212 | /* Border 213 | -------------------------- */ 214 | /* Box-shadow 215 | -------------------------- */ 216 | /* Fill 217 | -------------------------- */ 218 | /* Font 219 | -------------------------- */ 220 | /* Size 221 | -------------------------- */ 222 | /* z-index 223 | -------------------------- */ 224 | /* Disable base 225 | -------------------------- */ 226 | /* Icon 227 | -------------------------- */ 228 | /* Checkbox 229 | -------------------------- */ 230 | /* Radio 231 | -------------------------- */ 232 | /* Select 233 | -------------------------- */ 234 | /* Alert 235 | -------------------------- */ 236 | /* Message Box 237 | -------------------------- */ 238 | /* Message 239 | -------------------------- */ 240 | /* Notification 241 | -------------------------- */ 242 | /* Input 243 | -------------------------- */ 244 | /* Cascader 245 | -------------------------- */ 246 | /* Group 247 | -------------------------- */ 248 | /* Tab 249 | -------------------------- */ 250 | /* Button 251 | -------------------------- */ 252 | /* cascader 253 | -------------------------- */ 254 | /* Switch 255 | -------------------------- */ 256 | /* Dialog 257 | -------------------------- */ 258 | /* Table 259 | -------------------------- */ 260 | /* Pagination 261 | -------------------------- */ 262 | /* Popover 263 | -------------------------- */ 264 | /* Tooltip 265 | -------------------------- */ 266 | /* Tag 267 | -------------------------- */ 268 | /* Dropdown 269 | -------------------------- */ 270 | /* Badge 271 | -------------------------- */ 272 | /* Card 273 | --------------------------*/ 274 | /* Slider 275 | --------------------------*/ 276 | /* Steps 277 | --------------------------*/ 278 | /* Menu 279 | --------------------------*/ 280 | /* Rate 281 | --------------------------*/ 282 | /* DatePicker 283 | --------------------------*/ 284 | /* Loading 285 | --------------------------*/ 286 | /* Scrollbar 287 | --------------------------*/ 288 | /* Carousel 289 | --------------------------*/ 290 | /* Collapse 291 | --------------------------*/ 292 | } -------------------------------------------------------------------------------- /theme/switch.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root{ 3 | /* Transition 4 | -------------------------- */ 5 | /* Colors 6 | -------------------------- */ 7 | /* Link 8 | -------------------------- */ 9 | /* Border 10 | -------------------------- */ 11 | /* Box-shadow 12 | -------------------------- */ 13 | /* Fill 14 | -------------------------- */ 15 | /* Font 16 | -------------------------- */ 17 | /* Size 18 | -------------------------- */ 19 | /* z-index 20 | -------------------------- */ 21 | /* Disable base 22 | -------------------------- */ 23 | /* Icon 24 | -------------------------- */ 25 | /* Checkbox 26 | -------------------------- */ 27 | /* Radio 28 | -------------------------- */ 29 | /* Select 30 | -------------------------- */ 31 | /* Alert 32 | -------------------------- */ 33 | /* Message Box 34 | -------------------------- */ 35 | /* Message 36 | -------------------------- */ 37 | /* Notification 38 | -------------------------- */ 39 | /* Input 40 | -------------------------- */ 41 | /* Cascader 42 | -------------------------- */ 43 | /* Group 44 | -------------------------- */ 45 | /* Tab 46 | -------------------------- */ 47 | /* Button 48 | -------------------------- */ 49 | /* cascader 50 | -------------------------- */ 51 | /* Switch 52 | -------------------------- */ 53 | /* Dialog 54 | -------------------------- */ 55 | /* Table 56 | -------------------------- */ 57 | /* Pagination 58 | -------------------------- */ 59 | /* Popover 60 | -------------------------- */ 61 | /* Tooltip 62 | -------------------------- */ 63 | /* Tag 64 | -------------------------- */ 65 | /* Dropdown 66 | -------------------------- */ 67 | /* Badge 68 | -------------------------- */ 69 | /* Card 70 | --------------------------*/ 71 | /* Slider 72 | --------------------------*/ 73 | /* Steps 74 | --------------------------*/ 75 | /* Menu 76 | --------------------------*/ 77 | /* Rate 78 | --------------------------*/ 79 | /* DatePicker 80 | --------------------------*/ 81 | /* Loading 82 | --------------------------*/ 83 | /* Scrollbar 84 | --------------------------*/ 85 | /* Carousel 86 | --------------------------*/ 87 | /* Collapse 88 | --------------------------*/ 89 | } 90 | 91 | .el-switch{ 92 | display: inline-block; 93 | position: relative; 94 | font-size: 14px; 95 | line-height: 22px; 96 | height: 22px; 97 | vertical-align: middle 98 | } 99 | 100 | .el-switch .label-fade-enter, .el-switch .label-fade-leave-active{ 101 | opacity: 0 102 | } 103 | 104 | .el-switch.is-disabled .el-switch__core{ 105 | border-color: rgb(228, 232, 241) !important; 106 | background: rgb(228, 232, 241) !important 107 | } 108 | 109 | .el-switch.is-disabled .el-switch__core span{ 110 | background-color: rgb(251, 253, 255) !important 111 | } 112 | 113 | .el-switch.is-disabled .el-switch__core ~ .el-switch__label *{ 114 | color: rgb(251, 253, 255) !important 115 | } 116 | 117 | .el-switch.is-disabled .el-switch__input:checked + .el-switch__core{ 118 | border-color: rgb(228, 232, 241); 119 | background-color: rgb(228, 232, 241); 120 | } 121 | 122 | .el-switch.is-disabled{} 123 | 124 | .el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label{ 125 | cursor: not-allowed 126 | } 127 | 128 | .el-switch__label{ 129 | transition: .2s; 130 | position: absolute; 131 | z-index: 10; 132 | width: 46px; 133 | height: 22px; 134 | left: 0; 135 | top: 0; 136 | display: inline-block; 137 | font-size: 14px; 138 | cursor: pointer; 139 | -webkit-user-select: none; 140 | -moz-user-select: none; 141 | -ms-user-select: none; 142 | user-select: none 143 | } 144 | 145 | .el-switch__label *{ 146 | line-height: 1; 147 | top: 4px; 148 | position: absolute; 149 | font-size: 14px; 150 | display: inline-block; 151 | color: #fff 152 | } 153 | 154 | .el-switch__label--left i { 155 | left: 6px; 156 | } 157 | 158 | .el-switch__label--right i { 159 | right: 6px; 160 | } 161 | 162 | .el-switch__input{ 163 | display: none 164 | } 165 | 166 | .el-switch__input:checked + .el-switch__core{ 167 | border-color: #20a0ff; 168 | background-color: #20a0ff 169 | } 170 | 171 | .el-switch__core{ 172 | margin: 0; 173 | display: inline-block; 174 | position: relative; 175 | width: 46px; 176 | height: 22px; 177 | border: 1px solid rgb(191, 203, 217); 178 | outline: none; 179 | border-radius: 12px; 180 | box-sizing: border-box; 181 | background: rgb(191, 203, 217); 182 | cursor: pointer; 183 | transition: border-color .3s, background-color .3s 184 | } 185 | 186 | .el-switch__core .el-switch__button{ 187 | top: 0; 188 | left: 0; 189 | position: absolute; 190 | border-radius: 100%; 191 | transition: transform .3s; 192 | width: 16px; 193 | height: 16px; 194 | z-index: 20; 195 | background-color: #fff 196 | } 197 | 198 | .el-switch--wide .el-switch__label {} 199 | 200 | .el-switch--wide .el-switch__label.el-switch__label--left span{ 201 | left: 10px 202 | } 203 | 204 | .el-switch--wide .el-switch__label.el-switch__label--right span{ 205 | right: 10px 206 | } 207 | :root{ 208 | /* Transition 209 | -------------------------- */ 210 | /* Colors 211 | -------------------------- */ 212 | /* Link 213 | -------------------------- */ 214 | /* Border 215 | -------------------------- */ 216 | /* Box-shadow 217 | -------------------------- */ 218 | /* Fill 219 | -------------------------- */ 220 | /* Font 221 | -------------------------- */ 222 | /* Size 223 | -------------------------- */ 224 | /* z-index 225 | -------------------------- */ 226 | /* Disable base 227 | -------------------------- */ 228 | /* Icon 229 | -------------------------- */ 230 | /* Checkbox 231 | -------------------------- */ 232 | /* Radio 233 | -------------------------- */ 234 | /* Select 235 | -------------------------- */ 236 | /* Alert 237 | -------------------------- */ 238 | /* Message Box 239 | -------------------------- */ 240 | /* Message 241 | -------------------------- */ 242 | /* Notification 243 | -------------------------- */ 244 | /* Input 245 | -------------------------- */ 246 | /* Cascader 247 | -------------------------- */ 248 | /* Group 249 | -------------------------- */ 250 | /* Tab 251 | -------------------------- */ 252 | /* Button 253 | -------------------------- */ 254 | /* cascader 255 | -------------------------- */ 256 | /* Switch 257 | -------------------------- */ 258 | /* Dialog 259 | -------------------------- */ 260 | /* Table 261 | -------------------------- */ 262 | /* Pagination 263 | -------------------------- */ 264 | /* Popover 265 | -------------------------- */ 266 | /* Tooltip 267 | -------------------------- */ 268 | /* Tag 269 | -------------------------- */ 270 | /* Dropdown 271 | -------------------------- */ 272 | /* Badge 273 | -------------------------- */ 274 | /* Card 275 | --------------------------*/ 276 | /* Slider 277 | --------------------------*/ 278 | /* Steps 279 | --------------------------*/ 280 | /* Menu 281 | --------------------------*/ 282 | /* Rate 283 | --------------------------*/ 284 | /* DatePicker 285 | --------------------------*/ 286 | /* Loading 287 | --------------------------*/ 288 | /* Scrollbar 289 | --------------------------*/ 290 | /* Carousel 291 | --------------------------*/ 292 | /* Collapse 293 | --------------------------*/ 294 | } --------------------------------------------------------------------------------