├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── docs ├── .vuepress │ └── config.js └── README.md ├── index.js ├── lib ├── client.js ├── components │ ├── Tab-bar.vue │ ├── Tab-nav.vue │ ├── Tab-pane.vue │ └── Tabs.vue ├── markdownItPlugin.js ├── theme │ ├── common │ │ └── var.scss │ ├── mixins │ │ ├── config.scss │ │ ├── function.scss │ │ └── mixins.scss │ └── tabs.scss └── utils │ ├── resize-event.js │ └── util.js ├── package-lock.json ├── package.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | .temp 64 | 65 | dist 66 | 67 | theme 68 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | __tests__ 2 | __mocks__ 3 | 4 | docs -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 superbiger 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | The MIT License (MIT) 24 | 25 | Copyright (c) 2016-present ElemeFE 26 | 27 | Permission is hereby granted, free of charge, to any person obtaining a copy 28 | of this software and associated documentation files (the "Software"), to deal 29 | in the Software without restriction, including without limitation the rights 30 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 31 | copies of the Software, and to permit persons to whom the Software is 32 | furnished to do so, subject to the following conditions: 33 | 34 | The above copyright notice and this permission notice shall be included in all 35 | copies or substantial portions of the Software. 36 | 37 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 38 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 39 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 40 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 41 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 42 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 43 | SOFTWARE. 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [vuepress-plugin-element-tabs](https://superbiger.github.io/vuepress-plugin-tabs/) 2 | 3 | Version 4 | License 5 | 6 | 7 | Vuepress plugin - markdown custom container to display content in tabs from [Element UI](https://github.com/ElemeFE/element) 8 | 9 | ## Docs 10 | > https://superbiger.github.io/vuepress-plugin-tabs 11 | 12 | ## Install 13 | > This plugin requires VuePress >= 1.0.0, for now you can try it via yarn add vuepress@next -D 14 | 15 | ```shell 16 | yarn add vuepress-plugin-element-tabs -D 17 | ``` 18 | 19 | ```javascript 20 | // .vuepress/config.js 21 | module.exports = { 22 | plugins: [ 23 | 'vuepress-plugin-element-tabs' 24 | ] 25 | } 26 | ``` 27 | 28 | ## Usage 29 | 30 | ~~~ md 31 | :::: tabs 32 | 33 | ::: tab title 34 | __markdown content__ 35 | ::: 36 | 37 | 38 | ::: tab javascript 39 | ``` javascript 40 | () => { 41 | console.log('Javascript code example') 42 | } 43 | ``` 44 | ::: 45 | 46 | :::: 47 | 48 | ~~~ 49 | 50 | ## Documents 51 | > Accepted Value Like That 52 | ~~~md 53 | :::: tabs type:board-card 54 | ::: tab title lazy 55 | __markdown content__ 56 | ::: 57 | :::: 58 | ~~~ 59 | 60 | ### Tabs Attributes 61 | |Attribute|Description|Type|Accepted Values|Default| 62 | |:--|:--|:--|:--|:--| 63 | |type|type of Tab|String|card/border-card|border-card| 64 | |tab-position|position of tabs|String|top/right/bottom/left|top| 65 | |stretch|whether width of tab automatically fits its container|Boolean|-|false| 66 | 67 | 68 | ### Tab Attributes 69 | |Attribute|Description|Type|Accepted Values|Default| 70 | |:--|:--|:--|:--|:--| 71 | |label|title of the tab|String|-|-| 72 | |lazy|whether Tab is lazily rendered|Boolean|-|false| 73 | 74 | ### Q&A 75 | * How to get mouse position with canvas ? 76 | ```javascript 77 | 78 | var canvas = document.getElementById('screen'); 79 | var mouse = getMouse(canvas); 80 | 81 | function addEvent(obj, type, handle) { 82 | try { 83 | obj.addEventListener(type, handle, false); 84 | } catch (e) { 85 | try { 86 | obj.attachEvent("on" + type, handle); 87 | } catch (e) { 88 | obj["on" + type] = handle; 89 | } 90 | } 91 | } 92 | 93 | function getMouse(element) { 94 | var mouse = { x: 0, y: 0 }; 95 | 96 | addEvent(element, "mousemove", function(e) { 97 | var x, y; 98 | var e = e || window.event; 99 | const box = element.getBoundingClientRect(); 100 | x = e.clientX - box.x; 101 | y = e.clientY - box.y; 102 | mouse.x = x; 103 | mouse.y = y; 104 | }); 105 | 106 | return mouse; 107 | } 108 | ``` 109 | 110 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | console.log(path.resolve(__dirname, '../../index.js')) 4 | 5 | module.exports = { 6 | base: '/vuepress-plugin-tabs/', 7 | title: 'element-tabs', 8 | description: "markdown custom container to display content in tabs", 9 | themeConfig: { 10 | repo: "https://github.com/superbiger/vuepress-plugin-tabs", 11 | editLinks: true, 12 | docsDir: 'docs', 13 | editLinkText: 'Edit this page on GitHub', 14 | lastUpdated: 'Last Updated' 15 | }, 16 | plugins: [ 17 | path.resolve(__dirname, '../../index.js'), 18 | ] 19 | } -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: auto 3 | --- 4 | # element-tabs 5 | 6 | Version 7 | License 8 | 9 | 10 | Vuepress plugin - markdown custom container to display content in tabs from [Element UI](https://github.com/ElemeFE/element) 11 | 12 | > This Docs is warning show o(>_<)o , but don't warry! this package is well!!!! 13 | 14 | ## Preview 15 | 16 | ### Demo 1 17 | :::: tabs 18 | ::: tab title 19 | __markdown content__ 20 | ::: 21 | ::: tab javascript 22 | ``` javascript 23 | () => { 24 | console.log('Javascript code example') 25 | } 26 | ``` 27 | ::: 28 | :::: 29 | 30 | ### Demo 2 31 | :::: tabs type:card 32 | ::: tab demo1 33 | __markdown content__ 34 | ::: 35 | ::: tab demo2 36 | ```javascript 37 | function func() { 38 | // TODO Demo 2 39 | } 40 | ``` 41 | ::: 42 | :::: 43 | 44 | ## Install 45 | ::: warning Note 46 | This plugin requires VuePress >= 1.0.0 47 | ::: 48 | 49 | ``` 50 | yarn add vuepress-plugin-element-tabs -D 51 | ``` 52 | 53 | ## Usage 54 | ``` 55 | // .vuepress/config.js 56 | module.exports = { 57 | plugins: [ 58 | 'vuepress-plugin-element-tabs' 59 | ] 60 | } 61 | ``` 62 | 63 | ## Documents 64 | > Accepted Value Like That 65 | ~~~md 66 | :::: tabs type:board-card 67 | ::: tab title lazy 68 | __markdown content__ 69 | ::: 70 | :::: 71 | ~~~ 72 | 73 | ### Tabs Attributes 74 | |Attribute|Description|Type|Accepted Values|Default| 75 | |:--|:--|:--|:--|:--| 76 | |type|type of Tab|String|card/border-card|border-card| 77 | |tab-position|position of tabs|String|top/right/bottom/left|top| 78 | |stretch|whether width of tab automatically fits its container|Boolean|-|false| 79 | 80 | 81 | ### Tab Attributes 82 | |Attribute|Description|Type|Accepted Values|Default| 83 | |:--|:--|:--|:--|:--| 84 | |label|title of the tab|String|-|-| 85 | |lazy|whether Tab is lazily rendered|Boolean|-|false| 86 | 87 | ## Q&A 88 | * How to get mouse position with canvas ? 89 | ```javascript 90 | 91 | var canvas = document.getElementById('screen'); 92 | var mouse = getMouse(canvas); 93 | 94 | function addEvent(obj, type, handle) { 95 | try { 96 | obj.addEventListener(type, handle, false); 97 | } catch (e) { 98 | try { 99 | obj.attachEvent("on" + type, handle); 100 | } catch (e) { 101 | obj["on" + type] = handle; 102 | } 103 | } 104 | } 105 | 106 | function getMouse(element) { 107 | var mouse = { x: 0, y: 0 }; 108 | 109 | addEvent(element, "mousemove", function(e) { 110 | var x, y; 111 | var e = e || window.event; 112 | const box = element.getBoundingClientRect(); 113 | x = e.clientX - box.x; 114 | y = e.clientY - box.y; 115 | mouse.x = x; 116 | mouse.y = y; 117 | }); 118 | 119 | return mouse; 120 | } 121 | ``` 122 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = (options, context) => ({ 4 | enhanceAppFiles: [ 5 | path.resolve(__dirname, './lib/client.js') 6 | ], 7 | scss: { 8 | includePath: ["./lib/theme/tabs.scss"] 9 | }, 10 | chainMarkdown (config) { 11 | config 12 | .plugin('@superbiger/tabs') 13 | .use(require('./lib/markdownItPlugin'), [options]) 14 | .end() 15 | } 16 | }) -------------------------------------------------------------------------------- /lib/client.js: -------------------------------------------------------------------------------- 1 | import Tabs from './components/Tabs.vue'; 2 | import TabPane from './components/Tab-pane.vue'; 3 | 4 | import './theme/tabs.scss'; 5 | 6 | export default function(ctx) { 7 | const { Vue } = ctx; 8 | Vue.component('Tabs', Tabs); 9 | Vue.component('Tab', TabPane); 10 | } 11 | -------------------------------------------------------------------------------- /lib/components/Tab-bar.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /lib/components/Tab-nav.vue: -------------------------------------------------------------------------------- 1 | 259 | -------------------------------------------------------------------------------- /lib/components/Tab-pane.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /lib/components/Tabs.vue: -------------------------------------------------------------------------------- 1 | 178 | -------------------------------------------------------------------------------- /lib/markdownItPlugin.js: -------------------------------------------------------------------------------- 1 | const container = require('markdown-it-container'); 2 | 3 | module.exports = function tabsPlugin(md, options = {}) { 4 | options = options || {}; 5 | 6 | md.use(container, 'tabs', { 7 | render: (tokens, idx) => { 8 | const token = tokens[idx]; 9 | const attributes = getTabsAttributes(token.info); 10 | if (token.nesting === 1) { 11 | return `\n`; 12 | } else { 13 | return `\n`; 14 | } 15 | }, 16 | }); 17 | 18 | md.use(container, 'tab', { 19 | render: (tokens, idx) => { 20 | const token = tokens[idx]; 21 | const attributes = getTabAttributes(token.info); 22 | 23 | if (token.nesting === 1) { 24 | return `\n`; 25 | } else { 26 | return `\n`; 27 | } 28 | }, 29 | }); 30 | }; 31 | 32 | function getTabsAttributes(info) { 33 | var arr = info.split(' '); 34 | var result = ''; 35 | if (arr.length > 2) { 36 | arr.forEach(item => { 37 | if (item !== '' && item !== 'tabs') { 38 | var attribute = item.split(':'); 39 | result += `${attribute[0]}="${attribute[1]}" `; 40 | } 41 | }); 42 | } else { 43 | result = `type="border-card"`; 44 | } 45 | return result; 46 | } 47 | 48 | function getTabAttributes(info) { 49 | var arr = info.split(' '); 50 | var last = arr.length - 1; 51 | if (arr[last].trim() != "lazy") { 52 | return `label="${arr.slice(2,last + 1).join(' ').trim()}"`; 53 | } 54 | if (arr[last].trim() == "lazy") { 55 | return `label="${arr.slice(2,last).join(' ').trim()}" ${arr[last].trim()}`; 56 | } 57 | return ''; 58 | } 59 | -------------------------------------------------------------------------------- /lib/theme/common/var.scss: -------------------------------------------------------------------------------- 1 | /* Element Chalk Variables */ 2 | 3 | // Special comment for theme configurator 4 | // type|skipAutoTranslation|Category|Order 5 | // skipAutoTranslation 1 6 | 7 | /* Transition 8 | -------------------------- */ 9 | $--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default; 10 | $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; 11 | $--fade-linear-transition: opacity 200ms linear !default; 12 | $--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; 13 | $--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default; 14 | $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; 15 | 16 | /* Color 17 | -------------------------- */ 18 | /// color|1|Brand Color|0 19 | $--color-primary: #3eaf7c !default; 20 | /// color|1|Background Color|4 21 | $--color-white: #FFFFFF !default; 22 | /// color|1|Background Color|4 23 | $--color-black: #000000 !default; 24 | $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ 25 | $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ 26 | $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ 27 | $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ 28 | $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ 29 | $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ 30 | $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ 31 | $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ 32 | $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ 33 | /// color|1|Functional Color|1 34 | $--color-success: #67C23A !default; 35 | /// color|1|Functional Color|1 36 | $--color-warning: #E6A23C !default; 37 | /// color|1|Functional Color|1 38 | $--color-danger: #F56C6C !default; 39 | /// color|1|Functional Color|1 40 | $--color-info: #909399 !default; 41 | 42 | $--color-success-light: mix($--color-white, $--color-success, 80%) !default; 43 | $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; 44 | $--color-danger-light: mix($--color-white, $--color-danger, 80%) !default; 45 | $--color-info-light: mix($--color-white, $--color-info, 80%) !default; 46 | 47 | $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default; 48 | $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; 49 | $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; 50 | $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; 51 | /// color|1|Font Color|2 52 | $--color-text-primary: #303133 !default; 53 | /// color|1|Font Color|2 54 | $--color-text-regular: #606266 !default; 55 | /// color|1|Font Color|2 56 | $--color-text-secondary: #909399 !default; 57 | /// color|1|Font Color|2 58 | $--color-text-placeholder: #C0C4CC !default; 59 | /// color|1|Border Color|3 60 | $--border-color-base: #DCDFE6 !default; 61 | /// color|1|Border Color|3 62 | $--border-color-light: #E4E7ED !default; 63 | /// color|1|Border Color|3 64 | $--border-color-lighter: #EBEEF5 !default; 65 | /// color|1|Border Color|3 66 | $--border-color-extra-light: #F2F6FC !default; 67 | 68 | // Background 69 | /// color|1|Background Color|4 70 | $--background-color-base: #F5F7FA !default; 71 | 72 | /* Link 73 | -------------------------- */ 74 | $--link-color: $--color-primary-light-2 !default; 75 | $--link-hover-color: $--color-primary !default; 76 | 77 | /* Border 78 | -------------------------- */ 79 | $--border-width-base: 1px !default; 80 | $--border-style-base: solid !default; 81 | $--border-color-hover: $--color-text-placeholder !default; 82 | $--border-base: $--border-width-base $--border-style-base $--border-color-base !default; 83 | /// borderRadius|1|Radius|0 84 | $--border-radius-base: 4px !default; 85 | /// borderRadius|1|Radius|0 86 | $--border-radius-small: 2px !default; 87 | /// borderRadius|1|Radius|0 88 | $--border-radius-circle: 100% !default; 89 | 90 | // Box-shadow 91 | /// boxShadow|1|Shadow|1 92 | $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default; 93 | // boxShadow|1|Shadow|1 94 | $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default; 95 | /// boxShadow|1|Shadow|1 96 | $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default; 97 | 98 | /* Fill 99 | -------------------------- */ 100 | $--fill-base: $--color-white !default; 101 | 102 | /* Typography 103 | -------------------------- */ 104 | $--font-path: 'fonts' !default; 105 | /// fontSize|1|Font Size|0 106 | $--font-size-extra-large: 20px !default; 107 | /// fontSize|1|Font Size|0 108 | $--font-size-large: 18px !default; 109 | /// fontSize|1|Font Size|0 110 | $--font-size-medium: 16px !default; 111 | /// fontSize|1|Font Size|0 112 | $--font-size-base: 14px !default; 113 | /// fontSize|1|Font Size|0 114 | $--font-size-small: 13px !default; 115 | /// fontSize|1|Font Size|0 116 | $--font-size-extra-small: 12px !default; 117 | /// fontWeight|1|Font Weight|1 118 | $--font-weight-primary: 500 !default; 119 | /// fontWeight|1|Font Weight|1 120 | $--font-weight-secondary: 100 !default; 121 | /// fontLineHeight|1|Line Height|2 122 | $--font-line-height-primary: 24px !default; 123 | /// fontLineHeight|1|Line Height|2 124 | $--font-line-height-secondary: 16px !default; 125 | $--font-color-disabled-base: #bbb !default; 126 | /* Size 127 | -------------------------- */ 128 | $--size-base: 14px !default; 129 | 130 | /* z-index 131 | -------------------------- */ 132 | $--index-normal: 1 !default; 133 | $--index-top: 1000 !default; 134 | $--index-popper: 2000 !default; 135 | 136 | /* Disable base 137 | -------------------------- */ 138 | $--disabled-fill-base: $--background-color-base !default; 139 | $--disabled-color-base: $--color-text-placeholder !default; 140 | $--disabled-border-base: $--border-color-light !default; 141 | 142 | /* Icon 143 | -------------------------- */ 144 | $--icon-color: #666 !default; 145 | $--icon-color-base: $--color-info !default; 146 | 147 | /* Checkbox 148 | -------------------------- */ 149 | /// fontSize||Font|1 150 | $--checkbox-font-size: 14px !default; 151 | /// fontWeight||Font|1 152 | $--checkbox-font-weight: $--font-weight-primary !default; 153 | /// color||Color|0 154 | $--checkbox-font-color: $--color-text-regular !default; 155 | $--checkbox-input-height: 14px !default; 156 | $--checkbox-input-width: 14px !default; 157 | /// borderRadius||Border|2 158 | $--checkbox-border-radius: $--border-radius-small !default; 159 | /// color||Color|0 160 | $--checkbox-background-color: $--color-white !default; 161 | $--checkbox-input-border: $--border-base !default; 162 | 163 | /// color||Color|0 164 | $--checkbox-disabled-border-color: $--border-color-base !default; 165 | $--checkbox-disabled-input-fill: #edf2fc !default; 166 | $--checkbox-disabled-icon-color: $--color-text-placeholder !default; 167 | 168 | $--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default; 169 | $--checkbox-disabled-checked-input-border-color: $--border-color-base !default; 170 | $--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default; 171 | 172 | /// color||Color|0 173 | $--checkbox-checked-font-color: $--color-primary !default; 174 | $--checkbox-checked-input-border-color: $--color-primary !default; 175 | /// color||Color|0 176 | $--checkbox-checked-background-color: $--color-primary !default; 177 | $--checkbox-checked-icon-color: $--fill-base !default; 178 | 179 | $--checkbox-input-border-color-hover: $--color-primary !default; 180 | /// height||Other|4 181 | $--checkbox-bordered-height: 40px !default; 182 | /// padding||Spacing|3 183 | $--checkbox-bordered-padding: 9px 20px 9px 10px !default; 184 | /// padding||Spacing|3 185 | $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default; 186 | /// padding||Spacing|3 187 | $--checkbox-bordered-small-padding: 5px 15px 5px 10px !default; 188 | /// padding||Spacing|3 189 | $--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default; 190 | $--checkbox-bordered-medium-input-height: 14px !default; 191 | $--checkbox-bordered-medium-input-width: 14px !default; 192 | /// height||Other|4 193 | $--checkbox-bordered-medium-height: 36px !default; 194 | $--checkbox-bordered-small-input-height: 12px !default; 195 | $--checkbox-bordered-small-input-width: 12px !default; 196 | /// height||Other|4 197 | $--checkbox-bordered-small-height: 32px !default; 198 | $--checkbox-bordered-mini-input-height: 12px !default; 199 | $--checkbox-bordered-mini-input-width: 12px !default; 200 | /// height||Other|4 201 | $--checkbox-bordered-mini-height: 28px !default; 202 | 203 | /// color||Color|0 204 | $--checkbox-button-checked-background-color: $--color-primary !default; 205 | /// color||Color|0 206 | $--checkbox-button-checked-font-color: $--color-white !default; 207 | /// color||Color|0 208 | $--checkbox-button-checked-border-color: $--color-primary !default; 209 | 210 | 211 | 212 | /* Radio 213 | -------------------------- */ 214 | /// fontSize||Font|1 215 | $--radio-font-size: $--font-size-base !default; 216 | /// fontWeight||Font|1 217 | $--radio-font-weight: $--font-weight-primary !default; 218 | /// color||Color|0 219 | $--radio-font-color: $--color-text-regular !default; 220 | $--radio-input-height: 14px !default; 221 | $--radio-input-width: 14px !default; 222 | /// borderRadius||Border|2 223 | $--radio-input-border-radius: $--border-radius-circle !default; 224 | /// color||Color|0 225 | $--radio-input-background-color: $--color-white !default; 226 | $--radio-input-border: $--border-base !default; 227 | /// color||Color|0 228 | $--radio-input-border-color: $--border-color-base !default; 229 | /// color||Color|0 230 | $--radio-icon-color: $--color-white !default; 231 | 232 | $--radio-disabled-input-border-color: $--disabled-border-base !default; 233 | $--radio-disabled-input-fill: $--disabled-fill-base !default; 234 | $--radio-disabled-icon-color: $--disabled-fill-base !default; 235 | 236 | $--radio-disabled-checked-input-border-color: $--disabled-border-base !default; 237 | $--radio-disabled-checked-input-fill: $--disabled-fill-base !default; 238 | $--radio-disabled-checked-icon-color: $--color-text-placeholder !default; 239 | 240 | /// color||Color|0 241 | $--radio-checked-font-color: $--color-primary !default; 242 | /// color||Color|0 243 | $--radio-checked-input-border-color: $--color-primary !default; 244 | /// color||Color|0 245 | $--radio-checked-input-background-color: $--color-white !default; 246 | /// color||Color|0 247 | $--radio-checked-icon-color: $--color-primary !default; 248 | 249 | $--radio-input-border-color-hover: $--color-primary !default; 250 | 251 | $--radio-bordered-height: 40px !default; 252 | $--radio-bordered-padding: 12px 20px 0 10px !default; 253 | $--radio-bordered-medium-padding: 10px 20px 0 10px !default; 254 | $--radio-bordered-small-padding: 8px 15px 0 10px !default; 255 | $--radio-bordered-mini-padding: 6px 15px 0 10px !default; 256 | $--radio-bordered-medium-input-height: 14px !default; 257 | $--radio-bordered-medium-input-width: 14px !default; 258 | $--radio-bordered-medium-height: 36px !default; 259 | $--radio-bordered-small-input-height: 12px !default; 260 | $--radio-bordered-small-input-width: 12px !default; 261 | $--radio-bordered-small-height: 32px !default; 262 | $--radio-bordered-mini-input-height: 12px !default; 263 | $--radio-bordered-mini-input-width: 12px !default; 264 | $--radio-bordered-mini-height: 28px !default; 265 | 266 | /// fontSize||Font|1 267 | $--radio-button-font-size: $--font-size-base !default; 268 | /// color||Color|0 269 | $--radio-button-checked-background-color: $--color-primary !default; 270 | /// color||Color|0 271 | $--radio-button-checked-font-color: $--color-white !default; 272 | /// color||Color|0 273 | $--radio-button-checked-border-color: $--color-primary !default; 274 | $--radio-button-disabled-checked-fill: $--border-color-extra-light !default; 275 | 276 | /* Select 277 | -------------------------- */ 278 | $--select-border-color-hover: $--border-color-hover !default; 279 | $--select-disabled-border: $--disabled-border-base !default; 280 | /// fontSize||Font|1 281 | $--select-font-size: $--font-size-base !default; 282 | $--select-close-hover-color: $--color-text-secondary !default; 283 | 284 | $--select-input-color: $--color-text-placeholder !default; 285 | $--select-multiple-input-color: #666 !default; 286 | /// color||Color|0 287 | $--select-input-focus-border-color: $--color-primary !default; 288 | /// fontSize||Font|1 289 | $--select-input-font-size: 14px !default; 290 | 291 | $--select-option-color: $--color-text-regular !default; 292 | $--select-option-disabled-color: $--color-text-placeholder !default; 293 | $--select-option-disabled-background: $--color-white !default; 294 | /// height||Other|4 295 | $--select-option-height: 34px !default; 296 | $--select-option-hover-background: $--background-color-base !default; 297 | /// color||Color|0 298 | $--select-option-selected-font-color: $--color-primary !default; 299 | $--select-option-selected-hover: $--background-color-base !default; 300 | 301 | $--select-group-color: $--color-info !default; 302 | $--select-group-height: 30px !default; 303 | $--select-group-font-size: 12px !default; 304 | 305 | $--select-dropdown-background: $--color-white !default; 306 | $--select-dropdown-shadow: $--box-shadow-light !default; 307 | $--select-dropdown-empty-color: #999 !default; 308 | /// height||Other|4 309 | $--select-dropdown-max-height: 274px !default; 310 | $--select-dropdown-padding: 6px 0 !default; 311 | $--select-dropdown-empty-padding: 10px 0 !default; 312 | $--select-dropdown-border: solid 1px $--border-color-light !default; 313 | 314 | /* Alert 315 | -------------------------- */ 316 | $--alert-padding: 8px 16px !default; 317 | /// borderRadius||Border|2 318 | $--alert-border-radius: $--border-radius-base !default; 319 | /// fontSize||Font|1 320 | $--alert-title-font-size: 13px !default; 321 | /// fontSize||Font|1 322 | $--alert-description-font-size: 12px !default; 323 | /// fontSize||Font|1 324 | $--alert-close-font-size: 12px !default; 325 | /// fontSize||Font|1 326 | $--alert-close-customed-font-size: 13px !default; 327 | 328 | $--alert-success-color: $--color-success-lighter !default; 329 | $--alert-info-color: $--color-info-lighter !default; 330 | $--alert-warning-color: $--color-warning-lighter !default; 331 | $--alert-danger-color: $--color-danger-lighter !default; 332 | 333 | /// height||Other|4 334 | $--alert-icon-size: 16px !default; 335 | /// height||Other|4 336 | $--alert-icon-large-size: 28px !default; 337 | 338 | /* MessageBox 339 | -------------------------- */ 340 | /// color||Color|0 341 | $--messagebox-title-color: $--color-text-primary !default; 342 | $--msgbox-width: 420px !default; 343 | $--msgbox-border-radius: 4px !default; 344 | /// fontSize||Font|1 345 | $--messagebox-font-size: $--font-size-large !default; 346 | /// fontSize||Font|1 347 | $--messagebox-content-font-size: $--font-size-base !default; 348 | /// color||Color|0 349 | $--messagebox-content-color: $--color-text-regular !default; 350 | /// fontSize||Font|1 351 | $--messagebox-error-font-size: 12px !default; 352 | $--msgbox-padding-primary: 15px !default; 353 | /// color||Color|0 354 | $--messagebox-success-color: $--color-success !default; 355 | /// color||Color|0 356 | $--messagebox-info-color: $--color-info !default; 357 | /// color||Color|0 358 | $--messagebox-warning-color: $--color-warning !default; 359 | /// color||Color|0 360 | $--messagebox-danger-color: $--color-danger !default; 361 | 362 | /* Message 363 | -------------------------- */ 364 | $--message-shadow: $--box-shadow-base !default; 365 | $--message-min-width: 380px !default; 366 | $--message-background-color: #edf2fc !default; 367 | $--message-padding: 15px 15px 15px 20px !default; 368 | /// color||Color|0 369 | $--message-close-icon-color: $--color-text-placeholder !default; 370 | /// height||Other|4 371 | $--message-close-size: 16px !default; 372 | /// color||Color|0 373 | $--message-close-hover-color: $--color-text-secondary !default; 374 | 375 | /// color||Color|0 376 | $--message-success-font-color: $--color-success !default; 377 | /// color||Color|0 378 | $--message-info-font-color: $--color-info !default; 379 | /// color||Color|0 380 | $--message-warning-font-color: $--color-warning !default; 381 | /// color||Color|0 382 | $--message-danger-font-color: $--color-danger !default; 383 | 384 | /* Notification 385 | -------------------------- */ 386 | $--notification-width: 330px !default; 387 | /// padding||Spacing|3 388 | $--notification-padding: 14px 26px 14px 13px !default; 389 | $--notification-radius: 8px !default; 390 | $--notification-shadow: $--box-shadow-light !default; 391 | /// color||Color|0 392 | $--notification-border-color: $--border-color-lighter !default; 393 | $--notification-icon-size: 24px !default; 394 | $--notification-close-font-size: $--message-close-size !default; 395 | $--notification-group-margin-left: 13px !default; 396 | $--notification-group-margin-right: 8px !default; 397 | /// fontSize||Font|1 398 | $--notification-content-font-size: $--font-size-base !default; 399 | /// color||Color|0 400 | $--notification-content-color: $--color-text-regular !default; 401 | /// fontSize||Font|1 402 | $--notification-title-font-size: 16px !default; 403 | /// color||Color|0 404 | $--notification-title-color: $--color-text-primary !default; 405 | 406 | /// color||Color|0 407 | $--notification-close-color: $--color-text-secondary !default; 408 | /// color||Color|0 409 | $--notification-close-hover-color: $--color-text-regular !default; 410 | 411 | /// color||Color|0 412 | $--notification-success-icon-color: $--color-success !default; 413 | /// color||Color|0 414 | $--notification-info-icon-color: $--color-info !default; 415 | /// color||Color|0 416 | $--notification-warning-icon-color: $--color-warning !default; 417 | /// color||Color|0 418 | $--notification-danger-icon-color: $--color-danger !default; 419 | 420 | /* Input 421 | -------------------------- */ 422 | $--input-font-size: $--font-size-base !default; 423 | /// color||Color|0 424 | $--input-font-color: $--color-text-regular !default; 425 | /// height||Other|4 426 | $--input-width: 140px !default; 427 | /// height||Other|4 428 | $--input-height: 40px !default; 429 | $--input-border: $--border-base !default; 430 | $--input-border-color: $--border-color-base !default; 431 | /// borderRadius||Border|2 432 | $--input-border-radius: $--border-radius-base !default; 433 | $--input-border-color-hover: $--border-color-hover !default; 434 | /// color||Color|0 435 | $--input-background-color: $--color-white !default; 436 | $--input-fill-disabled: $--disabled-fill-base !default; 437 | $--input-color-disabled: $--font-color-disabled-base !default; 438 | /// color||Color|0 439 | $--input-icon-color: $--color-text-placeholder !default; 440 | /// color||Color|0 441 | $--input-placeholder-color: $--color-text-placeholder !default; 442 | $--input-max-width: 314px !default; 443 | 444 | $--input-hover-border: $--border-color-hover !default; 445 | $--input-clear-hover-color: $--color-text-secondary !default; 446 | 447 | $--input-focus-border: $--color-primary !default; 448 | $--input-focus-fill: $--color-white !default; 449 | 450 | $--input-disabled-fill: $--disabled-fill-base !default; 451 | $--input-disabled-border: $--disabled-border-base !default; 452 | $--input-disabled-color: $--disabled-color-base !default; 453 | $--input-disabled-placeholder-color: $--color-text-placeholder !default; 454 | 455 | /// fontSize||Font|1 456 | $--input-medium-font-size: 14px !default; 457 | /// height||Other|4 458 | $--input-medium-height: 36px !default; 459 | /// fontSize||Font|1 460 | $--input-small-font-size: 13px !default; 461 | /// height||Other|4 462 | $--input-small-height: 32px !default; 463 | /// fontSize||Font|1 464 | $--input-mini-font-size: 12px !default; 465 | /// height||Other|4 466 | $--input-mini-height: 28px !default; 467 | 468 | /* Cascader 469 | -------------------------- */ 470 | /// color||Color|0 471 | $--cascader-menu-font-color: $--color-text-regular !default; 472 | /// color||Color|0 473 | $--cascader-menu-selected-font-color: $--color-primary !default; 474 | $--cascader-menu-fill: $--fill-base !default; 475 | $--cascader-menu-border: $--border-base !default; 476 | $--cascader-menu-border-width: $--border-width-base !default; 477 | $--cascader-menu-color: $--color-text-regular !default; 478 | $--cascader-menu-option-color-active: $--color-text-secondary !default; 479 | $--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default; 480 | $--cascader-menu-option-color-hover: $--color-text-regular !default; 481 | $--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default; 482 | $--cascader-menu-option-color-disabled: #999 !default; 483 | $--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default; 484 | $--cascader-menu-option-empty-color: #666 !default; 485 | $--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default; 486 | $--cascader-menu-option-pinyin-color: #999 !default; 487 | $--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default; 488 | 489 | /* Group 490 | -------------------------- */ 491 | $--group-option-flex: 0 0 (1/5) * 100% !default; 492 | $--group-option-offset-bottom: 12px !default; 493 | $--group-option-fill-hover: rgba($--color-black, 0.06) !default; 494 | $--group-title-color: $--color-black !default; 495 | $--group-title-font-size: $--font-size-base !default; 496 | $--group-title-width: 66px !default; 497 | 498 | /* Tab 499 | -------------------------- */ 500 | $--tab-font-size: $--font-size-base !default; 501 | $--tab-border-line: 1px solid #e4e4e4 !default; 502 | $--tab-header-color-active: $--color-text-secondary !default; 503 | $--tab-header-color-hover: $--color-text-regular !default; 504 | $--tab-header-color: $--color-text-regular !default; 505 | $--tab-header-fill-active: rgba($--color-black, 0.06) !default; 506 | $--tab-header-fill-hover: rgba($--color-black, 0.06) !default; 507 | $--tab-vertical-header-width: 90px !default; 508 | $--tab-vertical-header-count-color: $--color-white !default; 509 | $--tab-vertical-header-count-fill: $--color-text-secondary !default; 510 | 511 | /* Button 512 | -------------------------- */ 513 | /// fontSize||Font|1 514 | $--button-font-size: $--font-size-base !default; 515 | /// fontWeight||Font|1 516 | $--button-font-weight: $--font-weight-primary !default; 517 | /// borderRadius||Border|2 518 | $--button-border-radius: $--border-radius-base !default; 519 | /// padding||Spacing|3 520 | $--button-padding-vertical: 12px !default; 521 | /// padding||Spacing|3 522 | $--button-padding-horizontal: 20px !default; 523 | 524 | /// fontSize||Font|1 525 | $--button-medium-font-size: $--font-size-base !default; 526 | /// borderRadius||Border|2 527 | $--button-medium-border-radius: $--border-radius-base !default; 528 | /// padding||Spacing|3 529 | $--button-medium-padding-vertical: 10px !default; 530 | /// padding||Spacing|3 531 | $--button-medium-padding-horizontal: 20px !default; 532 | 533 | /// fontSize||Font|1 534 | $--button-small-font-size: 12px !default; 535 | $--button-small-border-radius: #{$--border-radius-base - 1} !default; 536 | /// padding||Spacing|3 537 | $--button-small-padding-vertical: 9px !default; 538 | /// padding||Spacing|3 539 | $--button-small-padding-horizontal: 15px !default; 540 | /// fontSize||Font|1 541 | $--button-mini-font-size: 12px !default; 542 | $--button-mini-border-radius: #{$--border-radius-base - 1} !default; 543 | /// padding||Spacing|3 544 | $--button-mini-padding-vertical: 7px !default; 545 | /// padding||Spacing|3 546 | $--button-mini-padding-horizontal: 15px !default; 547 | 548 | /// color||Color|0 549 | $--button-default-font-color: $--color-text-regular !default; 550 | /// color||Color|0 551 | $--button-default-background-color: $--color-white !default; 552 | /// color||Color|0 553 | $--button-default-border-color: $--border-color-base !default; 554 | 555 | /// color||Color|0 556 | $--button-disabled-font-color: $--color-text-placeholder !default; 557 | /// color||Color|0 558 | $--button-disabled-background-color: $--color-white !default; 559 | /// color||Color|0 560 | $--button-disabled-border-color: $--border-color-lighter !default; 561 | 562 | /// color||Color|0 563 | $--button-primary-border-color: $--color-primary !default; 564 | /// color||Color|0 565 | $--button-primary-font-color: $--color-white !default; 566 | /// color||Color|0 567 | $--button-primary-background-color: $--color-primary !default; 568 | /// color||Color|0 569 | $--button-success-border-color: $--color-success !default; 570 | /// color||Color|0 571 | $--button-success-font-color: $--color-white !default; 572 | /// color||Color|0 573 | $--button-success-background-color: $--color-success !default; 574 | /// color||Color|0 575 | $--button-warning-border-color: $--color-warning !default; 576 | /// color||Color|0 577 | $--button-warning-font-color: $--color-white !default; 578 | /// color||Color|0 579 | $--button-warning-background-color: $--color-warning !default; 580 | /// color||Color|0 581 | $--button-danger-border-color: $--color-danger !default; 582 | /// color||Color|0 583 | $--button-danger-font-color: $--color-white !default; 584 | /// color||Color|0 585 | $--button-danger-background-color: $--color-danger !default; 586 | /// color||Color|0 587 | $--button-info-border-color: $--color-info !default; 588 | /// color||Color|0 589 | $--button-info-font-color: $--color-white !default; 590 | /// color||Color|0 591 | $--button-info-background-color: $--color-info !default; 592 | 593 | $--button-hover-tint-percent: 20% !default; 594 | $--button-active-shade-percent: 10% !default; 595 | 596 | 597 | /* cascader 598 | -------------------------- */ 599 | $--cascader-height: 200px !default; 600 | 601 | /* Switch 602 | -------------------------- */ 603 | /// color||Color|0 604 | $--switch-on-color: $--color-primary !default; 605 | /// color||Color|0 606 | $--switch-off-color: $--border-color-base !default; 607 | /// fontSize||Font|1 608 | $--switch-font-size: $--font-size-base !default; 609 | $--switch-core-border-radius: 10px !default; 610 | // height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义 611 | $--switch-width: 40px !default; 612 | // height||Other|4 613 | $--switch-height: 20px !default; 614 | // height||Other|4 615 | $--switch-button-size: 16px !default; 616 | 617 | /* Dialog 618 | -------------------------- */ 619 | $--dialog-background-color: $--color-white !default; 620 | $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; 621 | /// fontSize||Font|1 622 | $--dialog-title-font-size: $--font-size-large !default; 623 | /// fontSize||Font|1 624 | $--dialog-content-font-size: 14px !default; 625 | /// fontLineHeight||LineHeight|2 626 | $--dialog-font-line-height: $--font-line-height-primary !default; 627 | /// padding||Spacing|3 628 | $--dialog-padding-primary: 20px !default; 629 | 630 | /* Table 631 | -------------------------- */ 632 | /// color||Color|0 633 | $--table-border-color: $--border-color-lighter !default; 634 | $--table-border: 1px solid $--table-border-color !default; 635 | /// color||Color|0 636 | $--table-font-color: $--color-text-regular !default; 637 | /// color||Color|0 638 | $--table-header-font-color: $--color-text-secondary !default; 639 | /// color||Color|0 640 | $--table-row-hover-background-color: $--background-color-base !default; 641 | $--table-current-row-background-color: $--color-primary-light-9 !default; 642 | /// color||Color|0 643 | $--table-header-background-color: $--color-white !default; 644 | $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default; 645 | 646 | /* Pagination 647 | -------------------------- */ 648 | /// fontSize||Font|1 649 | $--pagination-font-size: 13px !default; 650 | /// color||Color|0 651 | $--pagination-background-color: $--color-white !default; 652 | /// color||Color|0 653 | $--pagination-font-color: $--color-text-primary !default; 654 | $--pagination-border-radius: 3px !default; 655 | /// color||Color|0 656 | $--pagination-button-color: $--color-text-primary !default; 657 | /// height||Other|4 658 | $--pagination-button-width: 35.5px !default; 659 | /// height||Other|4 660 | $--pagination-button-height: 28px !default; 661 | /// color||Color|0 662 | $--pagination-button-disabled-color: $--color-text-placeholder !default; 663 | /// color||Color|0 664 | $--pagination-button-disabled-background-color: $--color-white !default; 665 | /// color||Color|0 666 | $--pagination-hover-color: $--color-primary !default; 667 | 668 | /* Popover 669 | -------------------------- */ 670 | /// color||Color|0 671 | $--popover-background-color: $--color-white !default; 672 | /// fontSize||Font|1 673 | $--popover-font-size: $--font-size-base !default; 674 | /// color||Color|0 675 | $--popover-border-color: $--border-color-lighter !default; 676 | $--popover-arrow-size: 6px !default; 677 | /// padding||Spacing|3 678 | $--popover-padding: 12px !default; 679 | $--popover-padding-large: 18px 20px !default; 680 | /// fontSize||Font|1 681 | $--popover-title-font-size: 16px !default; 682 | /// color||Color|0 683 | $--popover-title-font-color: $--color-text-primary !default; 684 | 685 | /* Tooltip 686 | -------------------------- */ 687 | /// color|1|Color|0 688 | $--tooltip-fill: $--color-text-primary !default; 689 | /// color|1|Color|0 690 | $--tooltip-color: $--color-white !default; 691 | /// fontSize||Font|1 692 | $--tooltip-font-size: 12px !default; 693 | /// color||Color|0 694 | $--tooltip-border-color: $--color-text-primary !default; 695 | $--tooltip-arrow-size: 6px !default; 696 | /// padding||Spacing|3 697 | $--tooltip-padding: 10px !default; 698 | 699 | /* Tag 700 | -------------------------- */ 701 | $--tag-padding: 0 10px !default; 702 | $--tag-fill: rgba($--color-primary, 0.10) !default; 703 | /// color||Color|0 704 | $--tag-font-color: $--color-primary !default; 705 | /// color||Color|0 706 | $--tag-default-hover-background-color: $--color-primary !default; 707 | $--tag-border: rgba($--color-primary, 0.20) !default; 708 | /// fontSize||Font|1 709 | $--tag-font-size: 12px !default; 710 | $--tag-border-radius: 4px !default; 711 | 712 | $--tag-info-fill: rgba($--color-info, 0.10) !default; 713 | $--tag-info-border: rgba($--color-info, 0.20) !default; 714 | $--tag-info-color: $--color-info !default; 715 | 716 | $--tag-primary-fill: rgba($--color-primary, 0.10) !default; 717 | $--tag-primary-border: rgba($--color-primary, 0.20) !default; 718 | $--tag-primary-color: $--color-primary !default; 719 | 720 | $--tag-success-fill: rgba($--color-success, 0.10) !default; 721 | $--tag-success-border: rgba($--color-success, 0.20) !default; 722 | $--tag-success-color: $--color-success !default; 723 | 724 | $--tag-warning-fill: rgba($--color-warning, 0.10) !default; 725 | $--tag-warning-border: rgba($--color-warning, 0.20) !default; 726 | $--tag-warning-color: $--color-warning !default; 727 | 728 | $--tag-danger-fill: rgba($--color-danger, 0.10) !default; 729 | $--tag-danger-border: rgba($--color-danger, 0.20) !default; 730 | $--tag-danger-color: $--color-danger !default; 731 | 732 | /* Tree 733 | -------------------------- */ 734 | /// color||Color|0 735 | $--tree-node-hover-background-color: $--background-color-base !default; 736 | /// color||Color|0 737 | $--tree-font-color: $--color-text-regular !default; 738 | /// color||Color|0 739 | $--tree-expand-icon-color: $--color-text-placeholder !default; 740 | 741 | /* Dropdown 742 | -------------------------- */ 743 | $--dropdown-menu-box-shadow: $--box-shadow-light !default; 744 | $--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default; 745 | $--dropdown-menuItem-hover-color: $--link-color !default; 746 | 747 | /* Badge 748 | -------------------------- */ 749 | /// color||Color|0 750 | $--badge-background-color: $--color-danger !default; 751 | $--badge-radius: 10px !default; 752 | /// fontSize||Font|1 753 | $--badge-font-size: 12px !default; 754 | /// padding||Spacing|3 755 | $--badge-padding: 6px !default; 756 | /// height||Other|4 757 | $--badge-size: 18px !default; 758 | 759 | /* Card 760 | --------------------------*/ 761 | /// color||Color|0 762 | $--card-border-color: $--border-color-lighter !default; 763 | $--card-border-radius: 4px !default; 764 | /// padding||Spacing|3 765 | $--card-padding: 20px !default; 766 | 767 | /* Slider 768 | --------------------------*/ 769 | /// color||Color|0 770 | $--slider-main-background-color: $--color-primary !default; 771 | /// color||Color|0 772 | $--slider-runway-background-color: $--border-color-light !default; 773 | $--slider-button-hover-color: mix($--color-primary, black, 97%) !default; 774 | $--slider-stop-background-color: $--color-white !default; 775 | $--slider-disable-color: $--color-text-placeholder !default; 776 | $--slider-margin: 16px 0 !default; 777 | $--slider-border-radius: 3px !default; 778 | /// height|1|Other|4 779 | $--slider-height: 6px !default; 780 | /// height||Other|4 781 | $--slider-button-size: 16px !default; 782 | $--slider-button-wrapper-size: 36px !default; 783 | $--slider-button-wrapper-offset: -15px !default; 784 | 785 | /* Steps 786 | --------------------------*/ 787 | $--steps-border-color: $--disabled-border-base !default; 788 | $--steps-border-radius: 4px !default; 789 | $--steps-padding: 20px !default; 790 | 791 | /* Menu 792 | --------------------------*/ 793 | /// fontSize||Font|1 794 | $--menu-item-font-size: $--font-size-base !default; 795 | /// color||Color|0 796 | $--menu-item-font-color: $--color-text-primary !default; 797 | /// color||Color|0 798 | $--menu-background-color: $--color-white !default; 799 | $--menu-item-hover-fill: $--color-primary-light-9 !default; 800 | 801 | /* Rate 802 | --------------------------*/ 803 | $--rate-height: 20px !default; 804 | /// fontSize||Font|1 805 | $--rate-font-size: $--font-size-base !default; 806 | /// height||Other|3 807 | $--rate-icon-size: 18px !default; 808 | /// margin||Spacing|2 809 | $--rate-icon-margin: 6px !default; 810 | $--rate-icon-color: $--color-text-placeholder !default; 811 | 812 | /* DatePicker 813 | --------------------------*/ 814 | $--datepicker-font-color: $--color-text-regular !default; 815 | /// color|1|Color|0 816 | $--datepicker-off-font-color: $--color-text-placeholder !default; 817 | /// color||Color|0 818 | $--datepicker-header-font-color: $--color-text-regular !default; 819 | $--datepicker-icon-color: $--color-text-primary !default; 820 | $--datepicker-border-color: $--disabled-border-base !default; 821 | $--datepicker-inner-border-color: #e4e4e4 !default; 822 | /// color||Color|0 823 | $--datepicker-inrange-background-color: $--border-color-extra-light !default; 824 | /// color||Color|0 825 | $--datepicker-inrange-hover-background-color: $--border-color-extra-light !default; 826 | /// color||Color|0 827 | $--datepicker-active-color: $--color-primary !default; 828 | /// color||Color|0 829 | $--datepicker-hover-font-color: $--color-primary !default; 830 | $--datepicker-cell-hover-color: #fff !default; 831 | 832 | /* Loading 833 | --------------------------*/ 834 | /// height||Other|4 835 | $--loading-spinner-size: 42px !default; 836 | /// height||Other|4 837 | $--loading-fullscreen-spinner-size: 50px !default; 838 | 839 | /* Scrollbar 840 | --------------------------*/ 841 | $--scrollbar-background-color: rgba($--color-text-secondary, .3) !default; 842 | $--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default; 843 | 844 | /* Carousel 845 | --------------------------*/ 846 | /// fontSize||Font|1 847 | $--carousel-arrow-font-size: 12px !default; 848 | $--carousel-arrow-size: 36px !default; 849 | $--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default; 850 | $--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default; 851 | /// width||Other|4 852 | $--carousel-indicator-width: 30px !default; 853 | /// height||Other|4 854 | $--carousel-indicator-height: 2px !default; 855 | $--carousel-indicator-padding-horizontal: 4px !default; 856 | $--carousel-indicator-padding-vertical: 12px !default; 857 | $--carousel-indicator-out-color: $--border-color-hover !default; 858 | 859 | /* Collapse 860 | --------------------------*/ 861 | /// color||Color|0 862 | $--collapse-border-color: $--border-color-lighter !default; 863 | /// height||Other|4 864 | $--collapse-header-height: 48px !default; 865 | /// color||Color|0 866 | $--collapse-header-background-color: $--color-white !default; 867 | /// color||Color|0 868 | $--collapse-header-font-color: $--color-text-primary !default; 869 | /// fontSize||Font|1 870 | $--collapse-header-font-size: 13px !default; 871 | /// color||Color|0 872 | $--collapse-content-background-color: $--color-white !default; 873 | /// fontSize||Font|1 874 | $--collapse-content-font-size: 13px !default; 875 | /// color||Color|0 876 | $--collapse-content-font-color: $--color-text-primary !default; 877 | 878 | /* Transfer 879 | --------------------------*/ 880 | $--transfer-border-color: $--border-color-lighter !default; 881 | $--transfer-border-radius: $--border-radius-base !default; 882 | /// height||Other|4 883 | $--transfer-panel-width: 200px !default; 884 | /// height||Other|4 885 | $--transfer-panel-header-height: 40px !default; 886 | /// color||Color|0 887 | $--transfer-panel-header-background-color: $--background-color-base !default; 888 | /// height||Other|4 889 | $--transfer-panel-footer-height: 40px !default; 890 | /// height||Other|4 891 | $--transfer-panel-body-height: 246px !default; 892 | /// height||Other|4 893 | $--transfer-item-height: 30px !default; 894 | /// height||Other|4 895 | $--transfer-filter-height: 32px !default; 896 | 897 | /* Header 898 | --------------------------*/ 899 | $--header-padding: 0 20px !default; 900 | 901 | /* Footer 902 | --------------------------*/ 903 | $--footer-padding: 0 20px !default; 904 | 905 | /* Main 906 | --------------------------*/ 907 | $--main-padding: 20px !default; 908 | 909 | /* Timeline 910 | --------------------------*/ 911 | $--timeline-node-size-normal: 12px !default; 912 | $--timeline-node-size-large: 14px !default; 913 | $--timeline-node-color: $--border-color-light !default; 914 | 915 | /* Link 916 | --------------------------*/ 917 | /// fontSize||Font|1 918 | $--link-font-size: $--font-size-base !default; 919 | /// fontWeight||Font|1 920 | $--link-font-weight: $--font-weight-primary !default; 921 | /// color||Color|0 922 | $--link-default-font-color: $--color-text-regular !default; 923 | /// color||Color|0 924 | $--link-default-active-color: $--color-primary !default; 925 | /// color||Color|0 926 | $--link-disabled-font-color: $--color-text-placeholder !default; 927 | /// color||Color|0 928 | $--link-primary-font-color: $--color-primary !default; 929 | /// color||Color|0 930 | $--link-success-font-color: $--color-success !default; 931 | /// color||Color|0 932 | $--link-warning-font-color: $--color-warning !default; 933 | /// color||Color|0 934 | $--link-danger-font-color: $--color-danger !default; 935 | /// color||Color|0 936 | $--link-info-font-color: $--color-info !default; 937 | 938 | /* Break-point 939 | --------------------------*/ 940 | $--sm: 768px !default; 941 | $--md: 992px !default; 942 | $--lg: 1200px !default; 943 | $--xl: 1920px !default; 944 | 945 | $--breakpoints: ( 946 | 'xs' : (max-width: $--sm - 1), 947 | 'sm' : (min-width: $--sm), 948 | 'md' : (min-width: $--md), 949 | 'lg' : (min-width: $--lg), 950 | 'xl' : (min-width: $--xl) 951 | ); 952 | 953 | $--breakpoints-spec: ( 954 | 'xs-only' : (max-width: $--sm - 1), 955 | 'sm-and-up' : (min-width: $--sm), 956 | 'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})", 957 | 'sm-and-down': (max-width: $--md - 1), 958 | 'md-and-up' : (min-width: $--md), 959 | 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})", 960 | 'md-and-down': (max-width: $--lg - 1), 961 | 'lg-and-up' : (min-width: $--lg), 962 | 'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})", 963 | 'lg-and-down': (max-width: $--xl - 1), 964 | 'xl-only' : (min-width: $--xl), 965 | ); -------------------------------------------------------------------------------- /lib/theme/mixins/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'el'; 2 | $element-separator: '__'; 3 | $modifier-separator: '--'; 4 | $state-prefix: 'is-'; -------------------------------------------------------------------------------- /lib/theme/mixins/function.scss: -------------------------------------------------------------------------------- 1 | @import "config"; 2 | 3 | /* BEM support Func 4 | -------------------------- */ 5 | @function selectorToString($selector) { 6 | $selector: inspect($selector); 7 | $selector: str-slice($selector, 2, -2); 8 | @return $selector; 9 | } 10 | 11 | @function containsModifier($selector) { 12 | $selector: selectorToString($selector); 13 | 14 | @if str-index($selector, $modifier-separator) { 15 | @return true; 16 | } @else { 17 | @return false; 18 | } 19 | } 20 | 21 | @function containWhenFlag($selector) { 22 | $selector: selectorToString($selector); 23 | 24 | @if str-index($selector, '.' + $state-prefix) { 25 | @return true 26 | } @else { 27 | @return false 28 | } 29 | } 30 | 31 | @function containPseudoClass($selector) { 32 | $selector: selectorToString($selector); 33 | 34 | @if str-index($selector, ':') { 35 | @return true 36 | } @else { 37 | @return false 38 | } 39 | } 40 | 41 | @function hitAllSpecialNestRule($selector) { 42 | 43 | @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector); 44 | } -------------------------------------------------------------------------------- /lib/theme/mixins/mixins.scss: -------------------------------------------------------------------------------- 1 | @import "function"; 2 | @import "../common/var"; 3 | 4 | /* Break-points 5 | -------------------------- */ 6 | @mixin res($key, $map: $--breakpoints) { 7 | // 循环断点Map，如果存在则返回 8 | @if map-has-key($map, $key) { 9 | @media only screen and #{inspect(map-get($map, $key))} { 10 | @content; 11 | } 12 | } @else { 13 | @warn "Undefeined points: `#{$map}`"; 14 | } 15 | } 16 | 17 | /* Scrollbar 18 | -------------------------- */ 19 | @mixin scroll-bar { 20 | $--scrollbar-thumb-background: #b4bccc; 21 | $--scrollbar-track-background: #fff; 22 | 23 | &::-webkit-scrollbar { 24 | z-index: 11; 25 | width: 6px; 26 | 27 | &:horizontal { 28 | height: 6px; 29 | } 30 | 31 | &-thumb { 32 | border-radius: 5px; 33 | width: 6px; 34 | background: $--scrollbar-thumb-background; 35 | } 36 | 37 | &-corner { 38 | background: $--scrollbar-track-background; 39 | } 40 | 41 | &-track { 42 | background: $--scrollbar-track-background; 43 | 44 | &-piece { 45 | background: $--scrollbar-track-background; 46 | width: 6px; 47 | } 48 | } 49 | } 50 | } 51 | 52 | /* Placeholder 53 | -------------------------- */ 54 | @mixin placeholder { 55 | &::-webkit-input-placeholder { 56 | @content 57 | } 58 | 59 | &::-moz-placeholder { 60 | @content 61 | } 62 | 63 | &:-ms-input-placeholder { 64 | @content 65 | } 66 | } 67 | 68 | /* BEM 69 | -------------------------- */ 70 | @mixin b($block) { 71 | $B: $namespace+'-'+$block !global; 72 | 73 | .#{$B} { 74 | @content; 75 | } 76 | } 77 | 78 | @mixin e($element) { 79 | $E: $element !global; 80 | $selector: &; 81 | $currentSelector: ""; 82 | @each $unit in $element { 83 | $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","}; 84 | } 85 | 86 | @if hitAllSpecialNestRule($selector) { 87 | @at-root { 88 | #{$selector} { 89 | #{$currentSelector} { 90 | @content; 91 | } 92 | } 93 | } 94 | } @else { 95 | @at-root { 96 | #{$currentSelector} { 97 | @content; 98 | } 99 | } 100 | } 101 | } 102 | 103 | @mixin m($modifier) { 104 | $selector: &; 105 | $currentSelector: ""; 106 | @each $unit in $modifier { 107 | $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","}; 108 | } 109 | 110 | @at-root { 111 | #{$currentSelector} { 112 | @content; 113 | } 114 | } 115 | } 116 | 117 | @mixin configurable-m($modifier, $E-flag: false) { 118 | $selector: &; 119 | $interpolation: ''; 120 | 121 | @if $E-flag { 122 | $interpolation: $element-separator + $E-flag; 123 | } 124 | 125 | @at-root { 126 | #{$selector} { 127 | .#{$B+$interpolation+$modifier-separator+$modifier} { 128 | @content; 129 | } 130 | } 131 | } 132 | } 133 | 134 | @mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) { 135 | $modifierCombo: ''; 136 | 137 | @if $modifier { 138 | $modifierCombo: $modifier-separator + $modifier; 139 | } 140 | 141 | @at-root { 142 | #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} { 143 | @content 144 | } 145 | } 146 | } 147 | 148 | @mixin meb($modifier: false, $element: $E, $block: $B) { 149 | $selector: &; 150 | $modifierCombo: ''; 151 | 152 | @if $modifier { 153 | $modifierCombo: $modifier-separator + $modifier; 154 | } 155 | 156 | @at-root { 157 | #{$selector} { 158 | .#{$block+$element-separator+$element+$modifierCombo} { 159 | @content 160 | } 161 | } 162 | } 163 | } 164 | 165 | @mixin when($state) { 166 | @at-root { 167 | &.#{$state-prefix + $state} { 168 | @content; 169 | } 170 | } 171 | } 172 | 173 | @mixin extend-rule($name) { 174 | @extend #{'%shared-'+$name}; 175 | } 176 | 177 | @mixin share-rule($name) { 178 | $rule-name: '%shared-'+$name; 179 | 180 | @at-root #{$rule-name} { 181 | @content 182 | } 183 | } 184 | 185 | @mixin pseudo($pseudo) { 186 | @at-root #{&}#{':#{$pseudo}'} { 187 | @content 188 | } 189 | } -------------------------------------------------------------------------------- /lib/theme/tabs.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(tabs) { 5 | @include e(header) { 6 | padding: 0; 7 | position: relative; 8 | margin: 15px 0 15px; 9 | } 10 | @include e(active-bar) { 11 | position: absolute; 12 | bottom: 0; 13 | left: 0; 14 | height: 2px; 15 | background-color: $--color-primary; 16 | z-index: 1; 17 | transition: transform .3s cubic-bezier(.645,.045,.355,1); 18 | list-style: none; 19 | } 20 | @include e(new-tab) { 21 | float: right; 22 | border: 1px solid #d3dce6; 23 | height: 18px; 24 | width: 18px; 25 | line-height: 18px; 26 | margin: 12px 0 9px 10px; 27 | border-radius: 3px; 28 | text-align: center; 29 | font-size: 12px; 30 | color: #d3dce6; 31 | cursor: pointer; 32 | transition: all .15s; 33 | 34 | .el-icon-plus { 35 | transform: scale(0.8, 0.8); 36 | } 37 | 38 | &:hover { 39 | color: $--color-primary; 40 | } 41 | } 42 | @include e(nav-wrap) { 43 | overflow: hidden; 44 | margin-bottom: -1px; 45 | position: relative; 46 | 47 | &::after { 48 | content: ""; 49 | position: absolute; 50 | left: 0; 51 | bottom: 0; 52 | width: 100%; 53 | height: 2px; 54 | background-color: $--border-color-light; 55 | z-index: $--index-normal; 56 | } 57 | 58 | @include when(scrollable) { 59 | padding: 0 20px; 60 | box-sizing: border-box; 61 | } 62 | } 63 | @include e(nav-scroll) { 64 | overflow: hidden; 65 | } 66 | @include e((nav-next, nav-prev)) { 67 | position: absolute; 68 | cursor: pointer; 69 | line-height: 44px; 70 | font-size: 12px; 71 | color: $--color-text-secondary; 72 | width: 20px; 73 | text-align: center; 74 | } 75 | @include e(nav-next) { 76 | right: 0; 77 | } 78 | @include e(nav-prev) { 79 | left: 0; 80 | } 81 | @include e(nav) { 82 | white-space: nowrap; 83 | position: relative; 84 | transition: transform .3s; 85 | float: left; 86 | z-index: #{$--index-normal + 1}; 87 | 88 | @include when(stretch) { 89 | min-width: 100%; 90 | display: flex; 91 | & > * { 92 | flex: 1; 93 | text-align: center; 94 | } 95 | } 96 | } 97 | @include e(item) { 98 | padding: 0 20px; 99 | height: 40px; 100 | box-sizing: border-box; 101 | line-height: 40px; 102 | display: inline-block; 103 | list-style: none; 104 | font-size: 14px; 105 | font-weight: 500; 106 | color: $--color-text-primary; 107 | position: relative; 108 | 109 | &:focus, &:focus:active { 110 | outline: none; 111 | } 112 | 113 | &:focus.is-active.is-focus:not(:active) { 114 | box-shadow: 0 0 2px 2px $--color-primary inset; 115 | border-radius: 3px; 116 | } 117 | 118 | & .el-icon-close { 119 | border-radius: 50%; 120 | text-align: center; 121 | transition: all .3s cubic-bezier(.645,.045,.355,1); 122 | margin-left: 5px; 123 | &:before { 124 | transform: scale(.9); 125 | display: inline-block; 126 | } 127 | 128 | &:hover { 129 | background-color: $--color-text-placeholder; 130 | color: $--color-white; 131 | } 132 | } 133 | 134 | @include when(active) { 135 | color: $--color-primary; 136 | } 137 | 138 | &:hover { 139 | color: $--color-primary; 140 | cursor: pointer; 141 | } 142 | 143 | @include when(disabled) { 144 | color: $--disabled-color-base; 145 | cursor: default; 146 | } 147 | } 148 | @include e(content) { 149 | overflow: hidden; 150 | position: relative; 151 | } 152 | @include m(card) { 153 | > .el-tabs__header { 154 | border-bottom: 1px solid $--border-color-light; 155 | } 156 | > .el-tabs__header .el-tabs__nav-wrap::after { 157 | content: none; 158 | } 159 | > .el-tabs__header .el-tabs__nav { 160 | border: 1px solid $--border-color-light; 161 | border-bottom: none; 162 | border-radius: 4px 4px 0 0; 163 | box-sizing: border-box; 164 | } 165 | > .el-tabs__header .el-tabs__active-bar { 166 | display: none; 167 | } 168 | > .el-tabs__header .el-tabs__item .el-icon-close { 169 | position: relative; 170 | font-size: 12px; 171 | width: 0; 172 | height: 14px; 173 | vertical-align: middle; 174 | line-height: 15px; 175 | overflow: hidden; 176 | top: -1px; 177 | right: -2px; 178 | transform-origin: 100% 50%; 179 | } 180 | > .el-tabs__header .el-tabs__item { 181 | border-bottom: 1px solid transparent; 182 | border-left: 1px solid $--border-color-light; 183 | transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1); 184 | &:first-child { 185 | border-left: none; 186 | } 187 | &.is-closable { 188 | &:hover { 189 | padding-left: 13px; 190 | padding-right: 13px; 191 | 192 | & .el-icon-close { 193 | width: 14px; 194 | } 195 | } 196 | } 197 | &.is-active { 198 | border-bottom-color: $--color-white; 199 | 200 | &.is-closable { 201 | padding-left: 20px; 202 | padding-right: 20px; 203 | 204 | .el-icon-close { 205 | width: 14px; 206 | } 207 | } 208 | } 209 | } 210 | } 211 | @include m(border-card) { 212 | background: $--color-white; 213 | border: 1px solid $--border-color-base; 214 | box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04); 215 | margin-top: 15px; 216 | 217 | > .el-tabs__content { 218 | padding: 15px; 219 | } 220 | > .el-tabs__header { 221 | background-color: $--background-color-base; 222 | border-bottom: 1px solid $--border-color-light; 223 | margin: 0; 224 | } 225 | > .el-tabs__header .el-tabs__nav-wrap::after { 226 | content: none; 227 | } 228 | > .el-tabs__header .el-tabs__item { 229 | transition: all .3s cubic-bezier(.645,.045,.355,1); 230 | border: 1px solid transparent; 231 | margin-top: -1px; 232 | color: $--color-text-secondary; 233 | 234 | &:first-child { 235 | margin-left: -1px; 236 | } 237 | 238 | & + .el-tabs__item { 239 | margin-left: -1px; 240 | } 241 | 242 | &.is-active { 243 | color: $--color-primary; 244 | background-color: $--color-white; 245 | border-right-color: $--border-color-base; 246 | border-left-color: $--border-color-base; 247 | } 248 | &:not(.is-disabled):hover { 249 | color: $--color-primary; 250 | } 251 | &.is-disabled { 252 | color: $--disabled-color-base; 253 | } 254 | } 255 | 256 | > .el-tabs__header .is-scrollable .el-tabs__item:first-child { 257 | margin-left: 0; 258 | } 259 | } 260 | @include m((top, bottom)) { 261 | .el-tabs__item.is-top:nth-child(2), 262 | .el-tabs__item.is-bottom:nth-child(2) { 263 | padding-left: 0; 264 | } 265 | .el-tabs__item.is-top:last-child, 266 | .el-tabs__item.is-bottom:last-child { 267 | padding-right: 0; 268 | } 269 | 270 | &.el-tabs--border-card, &.el-tabs--card, 271 | .el-tabs--left, .el-tabs--right { 272 | .el-tabs__item:nth-child(2) { 273 | padding-left: 20px; 274 | } 275 | .el-tabs__item:last-child { 276 | padding-right: 20px; 277 | } 278 | } 279 | } 280 | @include m(bottom) { 281 | .el-tabs__header.is-bottom { 282 | margin-bottom: 0; 283 | margin-top: 10px; 284 | } 285 | &.el-tabs--border-card { 286 | .el-tabs__header.is-bottom { 287 | border-bottom: 0; 288 | border-top: 1px solid $--border-color-base; 289 | } 290 | .el-tabs__nav-wrap.is-bottom { 291 | margin-top: -1px; 292 | margin-bottom: 0; 293 | } 294 | .el-tabs__item.is-bottom:not(.is-active) { 295 | border: 1px solid transparent; 296 | } 297 | .el-tabs__item.is-bottom { 298 | margin: 0 -1px -1px -1px; 299 | } 300 | } 301 | } 302 | @include m((left, right)) { 303 | overflow: hidden; 304 | 305 | .el-tabs__header.is-left, 306 | .el-tabs__header.is-right, 307 | .el-tabs__nav-wrap.is-left, 308 | .el-tabs__nav-wrap.is-right, 309 | .el-tabs__nav-scroll { 310 | height: 100%; 311 | } 312 | 313 | .el-tabs__active-bar.is-left, 314 | .el-tabs__active-bar.is-right { 315 | top: 0; 316 | bottom: auto; 317 | width: 2px; 318 | height: auto; 319 | } 320 | 321 | .el-tabs__nav-wrap.is-left, 322 | .el-tabs__nav-wrap.is-right { 323 | margin-bottom: 0; 324 | 325 | > .el-tabs__nav-prev, 326 | > .el-tabs__nav-next { 327 | height: 30px; 328 | line-height: 30px; 329 | width: 100%; 330 | text-align: center; 331 | cursor: pointer; 332 | 333 | i { 334 | transform: rotateZ(90deg); 335 | } 336 | } 337 | > .el-tabs__nav-prev { 338 | left: auto; 339 | top: 0; 340 | } 341 | > .el-tabs__nav-next { 342 | right: auto; 343 | bottom: 0; 344 | } 345 | 346 | &.is-scrollable { 347 | padding: 30px 0; 348 | } 349 | 350 | &::after { 351 | height: 100%; 352 | width: 2px; 353 | bottom: auto; 354 | top: 0; 355 | } 356 | } 357 | 358 | .el-tabs__nav.is-left, 359 | .el-tabs__nav.is-right { 360 | float: none; 361 | } 362 | .el-tabs__item.is-left, 363 | .el-tabs__item.is-right { 364 | display: block; 365 | } 366 | } 367 | @include m(left) { 368 | .el-tabs__header.is-left { 369 | float: left; 370 | margin-bottom: 0; 371 | margin-right: 10px; 372 | } 373 | .el-tabs__nav-wrap.is-left { 374 | margin-right: -1px; 375 | &::after { 376 | left: auto; 377 | right: 0; 378 | } 379 | } 380 | .el-tabs__active-bar.is-left { 381 | right: 0; 382 | left: auto; 383 | } 384 | .el-tabs__item.is-left { 385 | text-align: right; 386 | } 387 | 388 | &.el-tabs--card { 389 | .el-tabs__active-bar.is-left { 390 | display: none; 391 | } 392 | .el-tabs__item.is-left { 393 | border-left: none; 394 | border-right: 1px solid $--border-color-light; 395 | border-bottom: none; 396 | border-top: 1px solid $--border-color-light; 397 | } 398 | .el-tabs__item.is-left:first-child { 399 | border-right: 1px solid $--border-color-light; 400 | border-top: none; 401 | } 402 | .el-tabs__item.is-left.is-active { 403 | border: 1px solid $--border-color-light; 404 | border-right-color: #fff; 405 | border-left: none; 406 | border-bottom: none; 407 | 408 | &:first-child { 409 | border-top: none; 410 | } 411 | &:last-child { 412 | border-bottom: none; 413 | } 414 | } 415 | 416 | .el-tabs__nav { 417 | border-radius: 4px 0 0 4px; 418 | border-bottom: 1px solid $--border-color-light; 419 | border-right: none; 420 | } 421 | 422 | .el-tabs__new-tab { 423 | float: none; 424 | } 425 | } 426 | 427 | &.el-tabs--border-card { 428 | .el-tabs__header.is-left { 429 | border-right: 1px solid #dfe4ed; 430 | } 431 | .el-tabs__item.is-left { 432 | border: 1px solid transparent; 433 | margin: -1px 0 -1px -1px; 434 | 435 | &.is-active { 436 | border-color: transparent; 437 | border-top-color: rgb(209, 219, 229); 438 | border-bottom-color: rgb(209, 219, 229); 439 | } 440 | } 441 | } 442 | } 443 | @include m(right) { 444 | .el-tabs__header.is-right { 445 | float: right; 446 | margin-bottom: 0; 447 | margin-left: 10px; 448 | } 449 | 450 | .el-tabs__nav-wrap.is-right { 451 | margin-left: -1px; 452 | &::after { 453 | left: 0; 454 | right: auto; 455 | } 456 | } 457 | 458 | .el-tabs__active-bar.is-right { 459 | left: 0; 460 | } 461 | 462 | &.el-tabs--card { 463 | .el-tabs__active-bar.is-right { 464 | display: none; 465 | } 466 | .el-tabs__item.is-right { 467 | border-bottom: none; 468 | border-top: 1px solid $--border-color-light; 469 | } 470 | .el-tabs__item.is-right:first-child { 471 | border-left: 1px solid $--border-color-light; 472 | border-top: none; 473 | } 474 | .el-tabs__item.is-right.is-active { 475 | border: 1px solid $--border-color-light; 476 | border-left-color: #fff; 477 | border-right: none; 478 | border-bottom: none; 479 | 480 | &:first-child { 481 | border-top: none; 482 | } 483 | &:last-child { 484 | border-bottom: none; 485 | } 486 | } 487 | 488 | .el-tabs__nav { 489 | border-radius: 0 4px 4px 0; 490 | border-bottom: 1px solid $--border-color-light; 491 | border-left: none; 492 | } 493 | } 494 | &.el-tabs--border-card { 495 | .el-tabs__header.is-right { 496 | border-left: 1px solid #dfe4ed; 497 | } 498 | .el-tabs__item.is-right { 499 | border: 1px solid transparent; 500 | margin: -1px -1px -1px 0; 501 | 502 | &.is-active { 503 | border-color: transparent; 504 | border-top-color: rgb(209, 219, 229); 505 | border-bottom-color: rgb(209, 219, 229); 506 | } 507 | } 508 | } 509 | } 510 | } 511 | 512 | .slideInRight-transition, 513 | .slideInLeft-transition { 514 | display: inline-block; 515 | } 516 | .slideInRight-enter { 517 | animation: slideInRight-enter .3s; 518 | } 519 | .slideInRight-leave { 520 | position: absolute; 521 | left: 0; 522 | right: 0; 523 | animation: slideInRight-leave .3s; 524 | } 525 | .slideInLeft-enter { 526 | animation: slideInLeft-enter .3s; 527 | } 528 | .slideInLeft-leave { 529 | position: absolute; 530 | left: 0; 531 | right: 0; 532 | animation: slideInLeft-leave .3s; 533 | } 534 | 535 | @keyframes slideInRight-enter { 536 | 0% { 537 | opacity: 0; 538 | -webkit-transform-origin: 0 0; 539 | transform-origin: 0 0; 540 | -webkit-transform: translateX(100%); 541 | transform: translateX(100%) 542 | } 543 | 544 | to { 545 | opacity: 1; 546 | -webkit-transform-origin: 0 0; 547 | transform-origin: 0 0; 548 | -webkit-transform: translateX(0); 549 | transform: translateX(0) 550 | } 551 | } 552 | @keyframes slideInRight-leave { 553 | 0% { 554 | -webkit-transform-origin: 0 0; 555 | transform-origin: 0 0; 556 | -webkit-transform: translateX(0); 557 | transform: translateX(0); 558 | opacity: 1 559 | } 560 | 561 | 100% { 562 | -webkit-transform-origin: 0 0; 563 | transform-origin: 0 0; 564 | -webkit-transform: translateX(100%); 565 | transform: translateX(100%); 566 | opacity: 0 567 | } 568 | } 569 | @keyframes slideInLeft-enter { 570 | 0% { 571 | opacity: 0; 572 | -webkit-transform-origin: 0 0; 573 | transform-origin: 0 0; 574 | -webkit-transform: translateX(-100%); 575 | transform: translateX(-100%) 576 | } 577 | 578 | to { 579 | opacity: 1; 580 | -webkit-transform-origin: 0 0; 581 | transform-origin: 0 0; 582 | -webkit-transform: translateX(0); 583 | transform: translateX(0) 584 | } 585 | } 586 | @keyframes slideInLeft-leave { 587 | 0% { 588 | -webkit-transform-origin: 0 0; 589 | transform-origin: 0 0; 590 | -webkit-transform: translateX(0); 591 | transform: translateX(0); 592 | opacity: 1 593 | } 594 | 595 | 100% { 596 | -webkit-transform-origin: 0 0; 597 | transform-origin: 0 0; 598 | -webkit-transform: translateX(-100%); 599 | transform: translateX(-100%); 600 | opacity: 0 601 | } 602 | } -------------------------------------------------------------------------------- /lib/utils/resize-event.js: -------------------------------------------------------------------------------- 1 | import ResizeObserver from 'resize-observer-polyfill'; 2 | 3 | const isServer = typeof window === 'undefined'; 4 | 5 | /* istanbul ignore next */ 6 | const resizeHandler = function(entries) { 7 | for (let entry of entries) { 8 | const listeners = entry.target.__resizeListeners__ || []; 9 | if (listeners.length) { 10 | listeners.forEach(fn => { 11 | fn(); 12 | }); 13 | } 14 | } 15 | }; 16 | 17 | /* istanbul ignore next */ 18 | export const addResizeListener = function(element, fn) { 19 | if (isServer) return; 20 | if (!element.__resizeListeners__) { 21 | element.__resizeListeners__ = []; 22 | element.__ro__ = new ResizeObserver(resizeHandler); 23 | element.__ro__.observe(element); 24 | } 25 | element.__resizeListeners__.push(fn); 26 | }; 27 | 28 | /* istanbul ignore next */ 29 | export const removeResizeListener = function(element, fn) { 30 | if (!element || !element.__resizeListeners__) return; 31 | element.__resizeListeners__.splice( 32 | element.__resizeListeners__.indexOf(fn), 33 | 1, 34 | ); 35 | if (!element.__resizeListeners__.length) { 36 | element.__ro__.disconnect(); 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /lib/utils/util.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | const hasOwnProperty = Object.prototype.hasOwnProperty; 4 | 5 | export function noop() {} 6 | 7 | export function hasOwn(obj, key) { 8 | return hasOwnProperty.call(obj, key); 9 | } 10 | 11 | function extend(to, _from) { 12 | for (let key in _from) { 13 | to[key] = _from[key]; 14 | } 15 | return to; 16 | } 17 | 18 | export function toObject(arr) { 19 | var res = {}; 20 | for (let i = 0; i < arr.length; i++) { 21 | if (arr[i]) { 22 | extend(res, arr[i]); 23 | } 24 | } 25 | return res; 26 | } 27 | 28 | export const getValueByPath = (object, prop) => { 29 | prop = prop || ''; 30 | const paths = prop.split('.'); 31 | let current = object; 32 | let result = null; 33 | for (let i = 0, j = paths.length; i < j; i++) { 34 | const path = paths[i]; 35 | if (!current) break; 36 | 37 | if (i === j - 1) { 38 | result = current[path]; 39 | break; 40 | } 41 | current = current[path]; 42 | } 43 | return result; 44 | }; 45 | 46 | export function getPropByPath(obj, path, strict) { 47 | let tempObj = obj; 48 | path = path.replace(/\[(\w+)\]/g, '.$1'); 49 | path = path.replace(/^\./, ''); 50 | 51 | let keyArr = path.split('.'); 52 | let i = 0; 53 | for (let len = keyArr.length; i < len - 1; ++i) { 54 | if (!tempObj && !strict) break; 55 | let key = keyArr[i]; 56 | if (key in tempObj) { 57 | tempObj = tempObj[key]; 58 | } else { 59 | if (strict) { 60 | throw new Error('please transfer a valid prop path to form item!'); 61 | } 62 | break; 63 | } 64 | } 65 | return { 66 | o: tempObj, 67 | k: keyArr[i], 68 | v: tempObj ? tempObj[keyArr[i]] : null, 69 | }; 70 | } 71 | 72 | export const generateId = () => Math.floor(Math.random() * 10000); 73 | 74 | export const valueEquals = (a, b) => { 75 | // see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript 76 | if (a === b) return true; 77 | if (!(a instanceof Array)) return false; 78 | if (!(b instanceof Array)) return false; 79 | if (a.length !== b.length) return false; 80 | for (let i = 0; i !== a.length; ++i) { 81 | if (a[i] !== b[i]) return false; 82 | } 83 | return true; 84 | }; 85 | 86 | export const escapeRegexpString = (value = '') => 87 | String(value).replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); 88 | 89 | // TODO: use native Array.find, Array.findIndex when IE support is dropped 90 | export const arrayFindIndex = (arr, pred) => { 91 | for (let i = 0; i !== arr.length; ++i) { 92 | if (pred(arr[i])) { 93 | return i; 94 | } 95 | } 96 | return -1; 97 | }; 98 | 99 | export const arrayFind = (arr, pred) => { 100 | const idx = arrayFindIndex(arr, pred); 101 | return idx !== -1 ? arr[idx] : undefined; 102 | }; 103 | 104 | // coerce truthy value to array 105 | export const coerceTruthyValueToArray = val => { 106 | if (Array.isArray(val)) { 107 | return val; 108 | } else if (val) { 109 | return [val]; 110 | } else { 111 | return []; 112 | } 113 | }; 114 | 115 | export const isIE = () => 116 | !Vue.prototype.$isServer && !isNaN(Number(document.documentMode)); 117 | 118 | export const isEdge = () => 119 | !Vue.prototype.$isServer && navigator.userAgent.indexOf('Edge') > -1; 120 | 121 | export const autoprefixer = style => { 122 | if (typeof style !== 'object') return style; 123 | const rules = ['transform', 'transition', 'animation']; 124 | const prefixes = ['ms-', 'webkit-']; 125 | rules.forEach(rule => { 126 | const value = style[rule]; 127 | if (rule && value) { 128 | prefixes.forEach(prefix => { 129 | style[prefix + rule] = value; 130 | }); 131 | } 132 | }); 133 | return style; 134 | }; 135 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuepress-plugin-element-tabs", 3 | "version": "0.2.8", 4 | "description": "Vuepress plugin - Tabs Container for Vuepress", 5 | "author": "superbiger", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "vuepress dev docs --temp .temp", 9 | "build": "vuepress build docs", 10 | "ghpages": "gh-pages -d docs/.vuepress/dist", 11 | "release": "release-it" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/superbiger/vuepress-plugin-tabs.git" 16 | }, 17 | "keywords": [ 18 | "vuepress-plugin", 19 | "tabs", 20 | "component" 21 | ], 22 | "bugs": { 23 | "url": "https://github.com/superbiger/vuepress-plugin-tabs/issues" 24 | }, 25 | "homepage": "https://github.com/superbiger/vuepress-plugin-tabs#readme", 26 | "devDependencies": { 27 | "gh-pages": "^2.0.1", 28 | "release-it": "^10.3.1", 29 | "vuepress": "^1.0.1" 30 | }, 31 | "dependencies": { 32 | "node-sass": "^4.11.0", 33 | "resize-observer-polyfill": "^1.5.1", 34 | "sass-loader": "^7.1.0" 35 | } 36 | } 37 | --------------------------------------------------------------------------------