├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom.md │ └── feature_request.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── test.yml ├── .gitignore ├── .prettierrc ├── .vscode ├── launch.json └── settings.json ├── LICENSE ├── README.md ├── babel.config.js ├── build ├── bin │ ├── build-entry.js │ ├── gen-cssfile.js │ └── verifyCommit.js ├── config.js └── webpack.demo.js ├── examples ├── index.html └── src │ ├── App.vue │ └── main.ts ├── jest.config.js ├── package.json ├── packages ├── alert │ ├── index.ts │ └── src │ │ ├── alert.vue │ │ └── type.ts ├── avatar │ ├── index.ts │ └── src │ │ ├── avatar.vue │ │ └── type.ts ├── backtop │ ├── index.ts │ └── src │ │ └── backtop.vue ├── badge │ ├── index.ts │ └── src │ │ ├── badge.vue │ │ └── type.ts ├── breadcrumb-item │ └── index.ts ├── breadcrumb │ ├── index.ts │ └── src │ │ ├── breadcrumb-item.vue │ │ ├── breadcrumb.vue │ │ └── propsKey.ts ├── button-group │ └── index.ts ├── button │ ├── index.ts │ └── src │ │ ├── button-group.vue │ │ ├── button.vue │ │ └── type.ts ├── card │ ├── index.ts │ └── src │ │ ├── card.vue │ │ └── type.ts ├── col │ ├── index.ts │ └── src │ │ └── col.vue ├── divider │ ├── index.ts │ └── src │ │ ├── divider.vue │ │ └── type.ts ├── icon │ ├── index.ts │ └── src │ │ └── icon.vue ├── input-number │ ├── index.ts │ └── src │ │ └── input-number.vue ├── input │ ├── index.ts │ └── src │ │ ├── calcTextareaHeight.ts │ │ ├── input.vue │ │ └── type.ts ├── link │ ├── index.ts │ └── src │ │ ├── link.vue │ │ └── type.ts ├── progress │ ├── index.ts │ └── src │ │ ├── progress.vue │ │ └── type.ts ├── row │ ├── index.ts │ └── src │ │ ├── row.vue │ │ └── type.ts ├── theme-chalk │ ├── .gitignore │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ └── src │ │ ├── alert.scss │ │ ├── aside.scss │ │ ├── autocomplete.scss │ │ ├── avatar.scss │ │ ├── backtop.scss │ │ ├── badge.scss │ │ ├── base.scss │ │ ├── breadcrumb-item.scss │ │ ├── breadcrumb.scss │ │ ├── button-group.scss │ │ ├── button.scss │ │ ├── calendar.scss │ │ ├── card.scss │ │ ├── carousel-item.scss │ │ ├── carousel.scss │ │ ├── cascader-panel.scss │ │ ├── cascader.scss │ │ ├── checkbox-button.scss │ │ ├── checkbox-group.scss │ │ ├── checkbox.scss │ │ ├── col.scss │ │ ├── collapse-item.scss │ │ ├── collapse.scss │ │ ├── color-picker.scss │ │ ├── common │ │ ├── popup.scss │ │ ├── transition.scss │ │ └── var.scss │ │ ├── container.scss │ │ ├── date-picker.scss │ │ ├── date-picker │ │ ├── date-picker.scss │ │ ├── date-range-picker.scss │ │ ├── date-table.scss │ │ ├── month-table.scss │ │ ├── picker-panel.scss │ │ ├── picker.scss │ │ ├── time-picker.scss │ │ ├── time-range-picker.scss │ │ ├── time-spinner.scss │ │ └── year-table.scss │ │ ├── dialog.scss │ │ ├── display.scss │ │ ├── divider.scss │ │ ├── drawer.scss │ │ ├── dropdown-item.scss │ │ ├── dropdown-menu.scss │ │ ├── dropdown.scss │ │ ├── fonts │ │ ├── element-icons.ttf │ │ └── element-icons.woff │ │ ├── footer.scss │ │ ├── form-item.scss │ │ ├── form.scss │ │ ├── header.scss │ │ ├── icon.scss │ │ ├── image.scss │ │ ├── index.scss │ │ ├── infinite-scroll.scss │ │ ├── infiniteScroll.scss │ │ ├── input-number.scss │ │ ├── input.scss │ │ ├── link.scss │ │ ├── loading.scss │ │ ├── main.scss │ │ ├── menu-item-group.scss │ │ ├── menu-item.scss │ │ ├── menu.scss │ │ ├── message-box.scss │ │ ├── message.scss │ │ ├── mixins │ │ ├── _button.scss │ │ ├── config.scss │ │ ├── function.scss │ │ ├── mixins.scss │ │ └── utils.scss │ │ ├── notification.scss │ │ ├── option-group.scss │ │ ├── option.scss │ │ ├── page-header.scss │ │ ├── pagination.scss │ │ ├── popconfirm.scss │ │ ├── popover.scss │ │ ├── popper.scss │ │ ├── progress.scss │ │ ├── radio-button.scss │ │ ├── radio-group.scss │ │ ├── radio.scss │ │ ├── rate.scss │ │ ├── reset.scss │ │ ├── row.scss │ │ ├── scrollbar.scss │ │ ├── select-dropdown.scss │ │ ├── select.scss │ │ ├── slider.scss │ │ ├── spinner.scss │ │ ├── step.scss │ │ ├── steps.scss │ │ ├── submenu.scss │ │ ├── switch.scss │ │ ├── tab-pane.scss │ │ ├── table-column.scss │ │ ├── table.scss │ │ ├── tabs.scss │ │ ├── tag.scss │ │ ├── time-picker.scss │ │ ├── time-select.scss │ │ ├── timeline-item.scss │ │ ├── timeline.scss │ │ ├── tooltip.scss │ │ ├── transfer.scss │ │ ├── tree.scss │ │ └── upload.scss ├── timeline-item │ └── index.ts └── timeline │ ├── index.ts │ └── src │ ├── timeline-item.vue │ ├── timeline.vue │ └── type.ts ├── src ├── component.ts ├── directives │ └── repeat-click.ts ├── hooks │ └── focus.ts ├── index.ts └── utils │ ├── dom.ts │ ├── emitter.ts │ ├── injection │ └── form.ts │ └── share.ts ├── test └── unit │ ├── mocks │ └── uri.ts │ ├── specs │ ├── alert.spec.ts │ ├── avatar.spec.ts │ ├── backtop.spec.ts │ ├── badge.spec.ts │ ├── breadcrumb.spec.ts │ ├── button.spec.ts │ ├── card.spec.ts │ ├── col.spec.ts │ ├── divider.spec.ts │ ├── input-number.spec.ts │ ├── input.spec.ts │ ├── link.spec.ts │ ├── progress.spec.ts │ ├── row.spec.ts │ └── timeline.spec.ts │ └── util.ts ├── tsconfig.json ├── vue-shim.d.ts └── yarn.lock /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Version** 11 | Check if the issue is reproducible with the latest stable version of ele-next. 12 | 13 | **Reproduction link** 14 | Link to minimal reproduction 15 | 16 | **Steps to reproduce** 17 | What do we need to do after opening your repro in order to make the bug happen? Clear and concise reproduction instructions are important for us to be able to triage your issue in a timely manner. 18 | 19 | **What is expected?** 20 | Tell us what should happen 21 | 22 | **What is actually happening?** 23 | Tell us what happens instead 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **What problem does this feature solve?** 11 | Explain your use case, context, and rationale behind this feature request. More importantly, what is the end user experience you are trying to build that led to the need for this feature? 12 | 13 | **What does the proposed API look like?** 14 | Describe how you propose to solve the problem and provide code samples of how the API would work once implemented. 15 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Pull request checklist 2 | 3 | Please check if your PR fulfills the following requirements: 4 | - [ ] Tests for the changes have been added (for bug fixes / features) 5 | - [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features) 6 | - [ ] Build (`npm run build`) was run locally and any changes were pushed 7 | - [ ] Lint (`npm run lint`) has passed locally and any fixes were made for failures 8 | 9 | 10 | ## Pull request type 11 | 12 | 13 | 14 | 15 | 16 | Please check the type of change your PR introduces: 17 | - [ ] Bugfix 18 | - [ ] Feature 19 | - [ ] Code style update (formatting, renaming) 20 | - [ ] Refactoring (no functional changes, no api changes) 21 | - [ ] Build related changes 22 | - [ ] Documentation content changes 23 | - [ ] Other (please describe): 24 | 25 | 26 | ## What is the current behavior? 27 | 28 | 29 | Issue Number: N/A 30 | 31 | 32 | ## What is the new behavior? 33 | 34 | 35 | - 36 | - 37 | - 38 | 39 | ## Does this introduce a breaking change? 40 | 41 | - [ ] Yes 42 | - [ ] No 43 | 44 | 45 | 46 | 47 | ## Other information 48 | 49 | 50 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: 'Test' 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | pull_request: 7 | branches: [master] 8 | 9 | jobs: 10 | test: 11 | name: 'Run Test' 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: 'Use GitHub Actions' 15 | uses: actions/checkout@v1 16 | - name: 'Use Node.js 12.x' 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: 12.x 20 | - name: 'Install Package' 21 | run: 'yarn' 22 | - name: 'Run Test' 23 | run: 'npm run coverage' 24 | - name: Coverage Report 25 | uses: devmasx/coverage-check-action@v1.1.0 26 | with: 27 | type: lcov 28 | result_path: coverage/lcov.info 29 | min_coverage: 30 30 | token: ${{secrets.GITHUB_TOKEN}} 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | examples/element-ui 4 | yarn-error.log 5 | coverage -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | semi: false 2 | singleQuote: true 3 | printWidth: 80 4 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Jest", 9 | "type": "node", 10 | "request": "launch", 11 | "program": "${workspaceFolder}/node_modules/.bin/jest", 12 | "stopOnEntry": false, 13 | "args": [ 14 | "${fileBasename}", 15 | "--runInBand", 16 | "--detectOpenHandles", 17 | "--testTimeout", 18 | "60000" 19 | ], 20 | "cwd": "${workspaceFolder}", 21 | "preLaunchTask": null, 22 | "runtimeExecutable": null, 23 | "runtimeArgs": ["--nolazy"], 24 | "env": { 25 | "NODE_ENV": "development" 26 | }, 27 | "console": "integratedTerminal", 28 | "sourceMaps": true, 29 | "windows": { 30 | "program": "${workspaceFolder}/node_modules/jest/bin/jest" 31 | } 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "[typescript]": { 4 | "editor.defaultFormatter": "esbenp.prettier-vscode" 5 | }, 6 | "[javascript]": { 7 | "editor.defaultFormatter": "esbenp.prettier-vscode" 8 | }, 9 | "[json]": { 10 | "editor.defaultFormatter": "esbenp.prettier-vscode" 11 | }, 12 | "[vue]": { 13 | "editor.defaultFormatter": "octref.vetur" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-present ElemeFE 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ele-next 2 | 3 | # This repo is archived. Ongoing development on this project can be found in https://github.com/element-plus/element-plus/ 4 | 5 | ![Test](https://github.com/a631807682/ele-next/workflows/Test/badge.svg) 6 | 7 | > ElementUI for Vue 3 (alpha) 8 | 9 | ### TodoList 10 | 11 | - [x] Alert 12 | - [ ] Aside 13 | - [ ] Autocomplete 14 | - [x] Avatar 15 | - [x] Backtop 16 | - [x] Badge 17 | - [x] Breadcrumb 18 | - [x] BreadcrumbItem 19 | - [x] Button 20 | - [x] ButtonGroup 21 | - [ ] Calendar 22 | - [x] Card 23 | - [ ] Carousel 24 | - [ ] CarouselItem 25 | - [ ] Cascader 26 | - [ ] CascaderPanel 27 | - [ ] Checkbox 28 | - [ ] CheckboxButton 29 | - [ ] CheckboxGroup 30 | - [x] Col 31 | - [ ] Collapse 32 | - [ ] CollapseItem 33 | - [ ] CollapseTransition 34 | - [ ] ColorPicker 35 | - [ ] Container 36 | - [ ] DatePicker 37 | - [ ] Dialog 38 | - [x] Divider 39 | - [ ] Drawer 40 | - [ ] Dropdown 41 | - [ ] DropdownItem 42 | - [ ] DropdownMenu 43 | - [ ] Footer 44 | - [ ] Form 45 | - [ ] FormItem 46 | - [ ] Header 47 | - [x] Icon 48 | - [ ] Image 49 | - [ ] InfiniteScroll 50 | - [x] Input 51 | - [x] InputNumber 52 | - [x] Link 53 | - [ ] Loading 54 | - [ ] Main 55 | - [ ] Menu 56 | - [ ] MenuItem 57 | - [ ] MenuItemGroup 58 | - [ ] Message 59 | - [ ] MessageBox 60 | - [ ] Notification 61 | - [ ] Option 62 | - [ ] OptionGroup 63 | - [ ] PageHeader 64 | - [ ] Pagination 65 | - [ ] Popconfirm 66 | - [ ] Popover 67 | - [x] Progress 68 | - [ ] Radio 69 | - [ ] RadioButton 70 | - [ ] RadioGroup 71 | - [ ] Rate 72 | - [x] Row 73 | - [ ] Scrollbar 74 | - [ ] Select 75 | - [ ] Slider 76 | - [ ] Spinner 77 | - [ ] Step 78 | - [ ] Steps 79 | - [ ] Submenu 80 | - [ ] Switch 81 | - [ ] TabPane 82 | - [ ] Table 83 | - [ ] TableColumn 84 | - [ ] Tabs 85 | - [ ] Tag 86 | - [ ] TimePicker 87 | - [ ] TimeSelect 88 | - [x] Timeline 89 | - [x] TimelineItem 90 | - [ ] Tooltip 91 | - [ ] Transfer 92 | - [ ] Tree 93 | - [ ] Upload 94 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', 4 | { 5 | targets: { 6 | node: 'current' 7 | } 8 | } 9 | ] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /build/bin/build-entry.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const render = require('json-templater/string') 3 | const uppercamelcase = require('uppercamelcase') 4 | const path = require('path') 5 | const endOfLine = require('os').EOL 6 | const startOfLine = ' '.repeat(1) 7 | 8 | const OUTPUT_PATH = path.join(__dirname, '../../src/index.ts') 9 | const backlist = ['theme-chalk'] 10 | 11 | let packageNames = fs.readdirSync('./packages', 'utf-8') 12 | let components = packageNames 13 | .filter((pn) => !backlist.includes(pn)) 14 | .map((pn) => ({ 15 | name: uppercamelcase(pn), 16 | package: pn, 17 | })) 18 | 19 | const importComponents = components.map(({ name, package }) => { 20 | return `import { install as ${name} } from 'packages/${package}'` 21 | }) 22 | 23 | const exportComponents = components.map(({ name, package }) => { 24 | return `export * from 'packages/${package}'` 25 | }) 26 | 27 | const template = ` 28 | import { App } from 'vue' 29 | import { ElementUIOptions } from 'src/component' 30 | {{importComponents}} 31 | 32 | const components = [ 33 | {{components}} 34 | ] 35 | 36 | export const install = function (app: App, opts = {}) { 37 | components.forEach((comp)=>{ 38 | app.use(comp) 39 | }) 40 | 41 | ElementUIOptions.value = { 42 | ...ElementUIOptions.value, 43 | ...opts, 44 | } 45 | } 46 | 47 | export const version = '{{version}}' 48 | export * from 'src/component' 49 | {{exportComponents}} 50 | ` 51 | 52 | const code = render(template, { 53 | version: require('../../package.json').version, 54 | components: components.map((c) => c.name).join(',' + endOfLine + startOfLine), 55 | importComponents: importComponents.join(endOfLine), 56 | exportComponents: exportComponents.join(endOfLine), 57 | }) 58 | 59 | fs.writeFileSync(OUTPUT_PATH, code) 60 | // console.log('[build entry] DONE:', code) 61 | -------------------------------------------------------------------------------- /build/bin/gen-cssfile.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | var path = require('path') 3 | var themes = ['theme-chalk'] 4 | let packageNames = fs.readdirSync('./packages', 'utf-8') 5 | const backlist = ['theme-chalk'] 6 | packageNames = packageNames.filter((pn) => !backlist.includes(pn)) 7 | 8 | var basepath = path.resolve(__dirname, '../../packages/') 9 | 10 | function fileExists(filePath) { 11 | try { 12 | return fs.statSync(filePath).isFile() 13 | } catch (err) { 14 | return false 15 | } 16 | } 17 | 18 | themes.forEach((theme) => { 19 | var isSCSS = theme !== 'theme-default' 20 | var indexContent = isSCSS 21 | ? '@import "./base.scss";\n' 22 | : '@import "./base.css";\n' 23 | packageNames.forEach(function (key) { 24 | if (['icon', 'option', 'option-group'].indexOf(key) > -1) return 25 | var fileName = key + (isSCSS ? '.scss' : '.css') 26 | indexContent += '@import "./' + fileName + '";\n' 27 | var filePath = path.resolve(basepath, theme, 'src', fileName) 28 | if (!fileExists(filePath)) { 29 | fs.writeFileSync(filePath, '', 'utf8') 30 | console.log(theme, ' 创建遗漏的 ', fileName, ' 文件') 31 | } 32 | }) 33 | fs.writeFileSync( 34 | path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), 35 | indexContent 36 | ) 37 | }) 38 | -------------------------------------------------------------------------------- /build/bin/verifyCommit.js: -------------------------------------------------------------------------------- 1 | // Invoked on the commit-msg git hook by yorkie. 2 | 3 | const chalk = require('chalk') 4 | const msgPath = process.env.GIT_PARAMS 5 | const msg = require('fs') 6 | .readFileSync(msgPath, 'utf-8') 7 | .trim() 8 | 9 | const commitRE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/ 10 | 11 | if (!commitRE.test(msg)) { 12 | console.log() 13 | console.error( 14 | ` ${chalk.bgRed.white(' ERROR ')} ${chalk.red( 15 | `invalid commit message format.` 16 | )}\n\n` + 17 | chalk.red( 18 | ` Proper commit message format is required for automated changelog generation. Examples:\n\n` 19 | ) + 20 | ` ${chalk.green(`feat(button): add 'comments' option`)}\n` + 21 | ` ${chalk.green( 22 | `chore: fix changelog typo (close #28)` 23 | )}\n\n` + 24 | chalk.red(` See .github/commit-convention.md for more details.\n`) 25 | ) 26 | process.exit(1) 27 | } 28 | -------------------------------------------------------------------------------- /build/config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | exports.alias = { 4 | // this isn't technically needed, since the default `vue` entry for bundlers 5 | // is a simple `export * from '@vue/runtime-dom`. However having this 6 | // extra re-export somehow causes webpack to always invalidate the module 7 | // on the first HMR update and causes the page to reload. 8 | vue: "@vue/runtime-dom", 9 | src: path.resolve(__dirname, "../src"), 10 | packages: path.resolve(__dirname, "../packages"), 11 | examples: path.resolve(__dirname, "../examples"), 12 | "element-ui": path.resolve(__dirname, "../"), 13 | }; 14 | 15 | exports.jsexclude = /node_modules|test/; 16 | -------------------------------------------------------------------------------- /build/webpack.demo.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { VueLoaderPlugin } = require('vue-loader') 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | 6 | const config = require('./config') 7 | const isProd = process.env.NODE_ENV === 'production' 8 | 9 | module.exports = (env = {}) => ({ 10 | mode: isProd ? 'production' : 'development', 11 | devtool: isProd ? 'source-map' : 'cheap-module-eval-source-map', 12 | entry: path.resolve(process.cwd(), './examples/src/main.ts'), 13 | output: { 14 | path: path.resolve(process.cwd(), './examples/element-ui/'), 15 | publicPath: '', 16 | filename: '[name].[hash:7].js', 17 | chunkFilename: isProd ? '[name].[hash:7].js' : '[name].js', 18 | }, 19 | resolve: { 20 | extensions: ['.ts', '.tsx', '.js', '.vue', '.json'], 21 | alias: config.alias, 22 | }, 23 | module: { 24 | rules: [ 25 | { 26 | test: /\.vue$/, 27 | use: 'vue-loader', 28 | }, 29 | { 30 | test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/, 31 | use: { 32 | loader: 'url-loader', 33 | options: { limit: 8192 }, 34 | }, 35 | }, 36 | { 37 | test: /\.(scss|css)$/, 38 | use: [ 39 | isProd ? MiniCssExtractPlugin.loader : 'style-loader', 40 | 'css-loader', 41 | 'sass-loader', 42 | ], 43 | }, 44 | { 45 | test: /\.tsx?$/, 46 | exclude: config.jsexclude, 47 | use: [ 48 | 'babel-loader', 49 | { 50 | loader: 'ts-loader', 51 | options: { 52 | appendTsSuffixTo: [/\.vue$/], 53 | appendTsxSuffixTo: [/\.vue$/], 54 | }, 55 | }, 56 | ], 57 | }, 58 | ], 59 | }, 60 | plugins: [ 61 | new VueLoaderPlugin(), 62 | new MiniCssExtractPlugin({ 63 | filename: '[name].css', 64 | }), 65 | new HtmlWebpackPlugin({ 66 | template: './examples/index.html', 67 | }), 68 | ], 69 | optimization: { 70 | minimizer: [], 71 | }, 72 | devServer: { 73 | inline: true, 74 | hot: true, 75 | stats: 'minimal', 76 | publicPath: '/', 77 | overlay: true, 78 | }, 79 | }) 80 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | Element - The world's most popular Vue UI framework 9 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/src/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 58 | -------------------------------------------------------------------------------- /examples/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import * as Element from "src"; 4 | import "packages/theme-chalk/src/index.scss"; 5 | 6 | let VueApp = createApp(App); 7 | VueApp.use(Element, { 8 | // size: "mini", 9 | }); 10 | VueApp.mount("#app"); 11 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "ts-jest", 3 | watchPathIgnorePatterns: ["/node_modules/", "/dist/", "/.git/"], 4 | rootDir: __dirname, 5 | testMatch: ["/test/unit/specs/**/*spec.[jt]s?(x)"], 6 | testPathIgnorePatterns: ["/node_modules/"], 7 | moduleFileExtensions: ["ts", "tsx", "js", "json"], 8 | moduleNameMapper: { 9 | "^packages/(.*)$": "/packages/$1", 10 | "^src/(.*)$": "/src/$1", 11 | }, 12 | transform: { 13 | "^.+\\.js$": "/node_modules/babel-jest", 14 | "^.+\\.vue$": "/node_modules/vue-jest" 15 | }, 16 | coverageDirectory: 'coverage', 17 | coverageReporters: ['html', 'lcov', 'text'], 18 | collectCoverageFrom: [ 19 | 'packages/**/*.{ts,vue}', 20 | '!packages/theme-chalk/**', 21 | '!packages/icon/**', 22 | '!packages/button-group/**', 23 | '!packages/button/**/button-group.vue', 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build:file": "node build/bin/build-entry.js", 5 | "build:theme": "node build/bin/gen-cssfile", 6 | "dev": " npm run build:file & webpack-dev-server --config build/webpack.demo.js", 7 | "build": "webpack --env.prod", 8 | "test": "jest --runInBand test", 9 | "lint": "prettier --write \"packages/**/*.?(ts|vue)\"", 10 | "coverage": "jest --coverage" 11 | }, 12 | "version": "v0.0.0-alpha.0", 13 | "gitHooks": { 14 | "pre-commit": "lint-staged", 15 | "commit-msg": "node build/bin/verifyCommit.js" 16 | }, 17 | "lint-staged": { 18 | "*.js,*.json": [ 19 | "prettier --write", 20 | "git add" 21 | ], 22 | "*.ts?(x)": [ 23 | "prettier --parser=typescript --write", 24 | "git add" 25 | ], 26 | "*.vue": [ 27 | "prettier --parser=vue --write", 28 | "git add" 29 | ] 30 | }, 31 | "dependencies": { 32 | "throttle-debounce": "^2.2.1", 33 | "vue": "3.0.0-beta.20" 34 | }, 35 | "devDependencies": { 36 | "@babel/core": "^7.9.0", 37 | "@babel/preset-env": "^7.9.5", 38 | "@types/jest": "^25.2.1", 39 | "@types/mocha": "^7.0.2", 40 | "@vue/compiler-sfc": "3.0.0-beta.20", 41 | "@vue/test-utils": "2.0.0-alpha.6", 42 | "babel-jest": "^25.3.0", 43 | "babel-loader": "^8.1.0", 44 | "css-loader": "^3.5.2", 45 | "file-loader": "^6.0.0", 46 | "html-webpack-plugin": "^4.2.0", 47 | "jest": "^25.3.0", 48 | "jest-environment-jsdom-sixteen": "^1.0.3", 49 | "json-templater": "^1.2.0", 50 | "lint-staged": "^10.1.3", 51 | "mini-css-extract-plugin": "^0.9.0", 52 | "node-sass": "^4.13.1", 53 | "prettier": "^2.0.4", 54 | "sass-loader": "^8.0.2", 55 | "style-loader": "^1.1.4", 56 | "ts-jest": "^25.3.0", 57 | "ts-loader": "^7.0.0", 58 | "typescript": "^3.8.3", 59 | "uppercamelcase": "^3.0.0", 60 | "url-loader": "^4.1.0", 61 | "vue-jest": "^5.0.0-alpha.0", 62 | "vue-loader": "^16.0.0-alpha.3", 63 | "webpack": "^4.42.1", 64 | "webpack-cli": "^3.3.11", 65 | "webpack-dev-server": "^3.10.3", 66 | "yorkie": "^2.0.0", 67 | "vue-router": "^4.0.0-alpha.13" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /packages/alert/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/alert.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Alert = Comp 8 | export * from './src/type' 9 | -------------------------------------------------------------------------------- /packages/alert/src/alert.vue: -------------------------------------------------------------------------------- 1 | 42 | 122 | -------------------------------------------------------------------------------- /packages/alert/src/type.ts: -------------------------------------------------------------------------------- 1 | // *.vue files only export object-format components in v3 2 | // i couldn't find a way to export the type directly in 109 | -------------------------------------------------------------------------------- /packages/avatar/src/type.ts: -------------------------------------------------------------------------------- 1 | export type AvatarSize = number | 'large' | 'medium' | 'small' 2 | export type AvatarShape = 'circle' | 'square' 3 | export type AvatarFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' 4 | -------------------------------------------------------------------------------- /packages/backtop/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/backtop.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Backtop = Comp 8 | -------------------------------------------------------------------------------- /packages/backtop/src/backtop.vue: -------------------------------------------------------------------------------- 1 | 18 | 114 | -------------------------------------------------------------------------------- /packages/badge/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/badge.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Badge = Comp 8 | export * from './src/type' 9 | -------------------------------------------------------------------------------- /packages/badge/src/badge.vue: -------------------------------------------------------------------------------- 1 | 20 | 55 | -------------------------------------------------------------------------------- /packages/badge/src/type.ts: -------------------------------------------------------------------------------- 1 | export type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info' 2 | -------------------------------------------------------------------------------- /packages/breadcrumb-item/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from '../breadcrumb/src/breadcrumb-item.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const BreadcrumbItem = Comp 8 | -------------------------------------------------------------------------------- /packages/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/breadcrumb.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Breadcrumb = Comp 8 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/breadcrumb-item.vue: -------------------------------------------------------------------------------- 1 | 20 | 72 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 26 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/propsKey.ts: -------------------------------------------------------------------------------- 1 | export const propsSymbol = Symbol('props') 2 | -------------------------------------------------------------------------------- /packages/button-group/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from '../button/src/button-group.vue' 3 | export const install = function(app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const ButtonGroup = Comp 8 | -------------------------------------------------------------------------------- /packages/button/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/button.vue' 3 | export const install = function(app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Button = Comp 8 | export * from './src/type' 9 | -------------------------------------------------------------------------------- /packages/button/src/button-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /packages/button/src/button.vue: -------------------------------------------------------------------------------- 1 | 26 | 69 | -------------------------------------------------------------------------------- /packages/button/src/type.ts: -------------------------------------------------------------------------------- 1 | // *.vue files only export object-format components in v3 2 | // i couldn't find a way to export the type directly in 33 | -------------------------------------------------------------------------------- /packages/card/src/type.ts: -------------------------------------------------------------------------------- 1 | export type ShadowTrigger = 'always' | 'hover' | 'never' 2 | -------------------------------------------------------------------------------- /packages/col/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/col.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Col = Comp 8 | -------------------------------------------------------------------------------- /packages/col/src/col.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 88 | -------------------------------------------------------------------------------- /packages/divider/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/divider.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Divider = Comp 8 | export * from './src/type' 9 | -------------------------------------------------------------------------------- /packages/divider/src/divider.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 35 | -------------------------------------------------------------------------------- /packages/divider/src/type.ts: -------------------------------------------------------------------------------- 1 | export type dividerDirection = 'horizontal' | 'vertical' 2 | export type dividerContentPosition = 'left' | 'center' | 'right' 3 | -------------------------------------------------------------------------------- /packages/icon/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/icon.vue' 3 | export const install = function(app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Icon = Comp 8 | -------------------------------------------------------------------------------- /packages/icon/src/icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | -------------------------------------------------------------------------------- /packages/input-number/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/input-number.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const InputNumber = Comp 8 | // export * from './src/type' 9 | -------------------------------------------------------------------------------- /packages/input/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/input.vue' 3 | export const install = function(app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Input = Comp 8 | export * from './src/type' 9 | -------------------------------------------------------------------------------- /packages/input/src/calcTextareaHeight.ts: -------------------------------------------------------------------------------- 1 | let hiddenTextarea: HTMLTextAreaElement 2 | 3 | const HIDDEN_STYLE = ` 4 | height:0 !important; 5 | visibility:hidden !important; 6 | overflow:hidden !important; 7 | position:absolute !important; 8 | z-index:-1000 !important; 9 | top:0 !important; 10 | right:0 !important 11 | ` 12 | 13 | const CONTEXT_STYLE = [ 14 | 'letter-spacing', 15 | 'line-height', 16 | 'padding-top', 17 | 'padding-bottom', 18 | 'font-family', 19 | 'font-weight', 20 | 'font-size', 21 | 'text-rendering', 22 | 'text-transform', 23 | 'width', 24 | 'text-indent', 25 | 'padding-left', 26 | 'padding-right', 27 | 'border-width', 28 | 'box-sizing' 29 | ] 30 | 31 | function calculateNodeStyling( 32 | targetElement: HTMLInputElement | HTMLTextAreaElement 33 | ) { 34 | const style = window.getComputedStyle(targetElement) 35 | 36 | const boxSizing = style.getPropertyValue('box-sizing') 37 | 38 | const paddingSize = 39 | parseFloat(style.getPropertyValue('padding-bottom')) + 40 | parseFloat(style.getPropertyValue('padding-top')) 41 | 42 | const borderSize = 43 | parseFloat(style.getPropertyValue('border-bottom-width')) + 44 | parseFloat(style.getPropertyValue('border-top-width')) 45 | 46 | const contextStyle = CONTEXT_STYLE.map( 47 | name => `${name}:${style.getPropertyValue(name)}` 48 | ).join(';') 49 | 50 | return { contextStyle, paddingSize, borderSize, boxSizing } 51 | } 52 | 53 | export default function calcTextareaHeight( 54 | targetElement: HTMLInputElement | HTMLTextAreaElement | null, 55 | minRows: null | number = 1, 56 | maxRows: null | number = null 57 | ) { 58 | const result: { 59 | minHeight?: string 60 | height?: string 61 | } = {} 62 | 63 | if (!targetElement) return result 64 | if (!hiddenTextarea) { 65 | hiddenTextarea = document.createElement('textarea') 66 | document.body.appendChild(hiddenTextarea) 67 | } 68 | 69 | let { 70 | paddingSize, 71 | borderSize, 72 | boxSizing, 73 | contextStyle 74 | } = calculateNodeStyling(targetElement) 75 | 76 | hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`) 77 | hiddenTextarea.value = targetElement.value || targetElement.placeholder || '' 78 | 79 | let height = hiddenTextarea.scrollHeight 80 | 81 | if (boxSizing === 'border-box') { 82 | height = height + borderSize 83 | } else if (boxSizing === 'content-box') { 84 | height = height - paddingSize 85 | } 86 | 87 | hiddenTextarea.value = '' 88 | let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize 89 | 90 | if (minRows !== null) { 91 | let minHeight = singleRowHeight * minRows 92 | if (boxSizing === 'border-box') { 93 | minHeight = minHeight + paddingSize + borderSize 94 | } 95 | height = Math.max(minHeight, height) 96 | 97 | result.minHeight = `${minHeight}px` 98 | } 99 | if (maxRows !== null) { 100 | let maxHeight = singleRowHeight * maxRows 101 | if (boxSizing === 'border-box') { 102 | maxHeight = maxHeight + paddingSize + borderSize 103 | } 104 | height = Math.min(maxHeight, height) 105 | } 106 | result.height = `${height}px` 107 | hiddenTextarea.parentNode && 108 | hiddenTextarea.parentNode.removeChild(hiddenTextarea) 109 | hiddenTextarea = null 110 | return result 111 | } 112 | -------------------------------------------------------------------------------- /packages/input/src/type.ts: -------------------------------------------------------------------------------- 1 | export type Resizability = 'none' | 'both' | 'horizontal' | 'vertical' 2 | export type InputType = 'text' | 'textarea' 3 | /** Controls how el-input component automatically sets size */ 4 | export type AutoSize = { 5 | /** Minimum rows to show */ 6 | minRows: number 7 | 8 | /** Maximum rows to show */ 9 | maxRows: number 10 | } 11 | -------------------------------------------------------------------------------- /packages/link/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/link.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Link = Comp 8 | export * from './src/type' 9 | -------------------------------------------------------------------------------- /packages/link/src/link.vue: -------------------------------------------------------------------------------- 1 | 24 | 57 | -------------------------------------------------------------------------------- /packages/link/src/type.ts: -------------------------------------------------------------------------------- 1 | // *.vue files only export object-format components in v3 2 | // i couldn't find a way to export the type directly in 57 | -------------------------------------------------------------------------------- /packages/row/src/type.ts: -------------------------------------------------------------------------------- 1 | /** Justify type */ 2 | export type JustifyType = 3 | | 'start' 4 | | 'end' 5 | | 'center' 6 | | 'space-around' 7 | | 'space-between' 8 | 9 | /** Align type */ 10 | export type AlignType = 'top' | 'middle' | 'bottom' 11 | -------------------------------------------------------------------------------- /packages/theme-chalk/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | npm-debug* 4 | -------------------------------------------------------------------------------- /packages/theme-chalk/README.md: -------------------------------------------------------------------------------- 1 | # element-theme-chalk 2 | > element component chalk theme. 3 | 4 | 5 | ## Installation 6 | ```shell 7 | npm i element-theme-chalk -S 8 | ``` 9 | 10 | ## Usage 11 | 12 | Use Sass import 13 | ```css 14 | @import 'element-theme-chalk'; 15 | ``` 16 | 17 | Or Use webpack 18 | ```javascript 19 | import 'element-theme-chalk'; 20 | ``` 21 | 22 | Or 23 | ```html 24 | 25 | ``` 26 | 27 | ## Import on demand 28 | ```javascript 29 | import 'element-theme-chalk/lib/input.css'; 30 | import 'element-theme-chalk/lib/select.css'; 31 | 32 | // ... 33 | ``` 34 | -------------------------------------------------------------------------------- /packages/theme-chalk/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const { series, src, dest } = require('gulp'); 4 | const sass = require('gulp-sass'); 5 | const autoprefixer = require('gulp-autoprefixer'); 6 | const cssmin = require('gulp-cssmin'); 7 | 8 | function compile() { 9 | return src('./src/*.scss') 10 | .pipe(sass.sync()) 11 | .pipe(autoprefixer({ 12 | browsers: ['ie > 9', 'last 2 versions'], 13 | cascade: false 14 | })) 15 | .pipe(cssmin()) 16 | .pipe(dest('./lib')); 17 | } 18 | 19 | function copyfont() { 20 | return src('./src/fonts/**') 21 | .pipe(cssmin()) 22 | .pipe(dest('./lib/fonts')); 23 | } 24 | 25 | exports.build = series(compile, copyfont); 26 | -------------------------------------------------------------------------------- /packages/theme-chalk/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "element-theme-chalk", 3 | "version": "2.13.0", 4 | "description": "Element component chalk theme.", 5 | "main": "lib/index.css", 6 | "style": "lib/index.css", 7 | "files": [ 8 | "lib", 9 | "src" 10 | ], 11 | "scripts": { 12 | "build": "gulp build" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/ElementUI/theme-chalk.git" 17 | }, 18 | "keywords": [ 19 | "element", 20 | "theme" 21 | ], 22 | "author": "yi.shyang@ele.me", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/ElementUI/theme-chalk/issues" 26 | }, 27 | "homepage": "https://github.com/ElementUI/theme-chalk#readme", 28 | "devDependencies": { 29 | "gulp": "^3.9.1", 30 | "gulp-cssmin": "^0.1.7", 31 | "gulp-sass": "^3.1.0", 32 | "gulp-autoprefixer": "^4.0.0" 33 | }, 34 | "dependencies": {} 35 | } 36 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/alert.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(alert) { 5 | width: 100%; 6 | padding: $--alert-padding; 7 | margin: 0; 8 | box-sizing: border-box; 9 | border-radius: $--alert-border-radius; 10 | position: relative; 11 | background-color: $--color-white; 12 | overflow: hidden; 13 | opacity: 1; 14 | display: flex; 15 | align-items: center; 16 | transition: opacity .2s; 17 | 18 | @include when(light) { 19 | .el-alert__closebtn { 20 | color: $--color-text-placeholder; 21 | } 22 | } 23 | 24 | @include when(dark) { 25 | .el-alert__closebtn { 26 | color: $--color-white; 27 | } 28 | .el-alert__description { 29 | color: $--color-white; 30 | } 31 | } 32 | 33 | @include when(center) { 34 | justify-content: center; 35 | } 36 | 37 | @include m(success) { 38 | &.is-light { 39 | background-color: $--alert-success-color; 40 | color: $--color-success; 41 | 42 | .el-alert__description { 43 | color: $--color-success; 44 | } 45 | } 46 | 47 | &.is-dark { 48 | background-color: $--color-success; 49 | color: $--color-white; 50 | } 51 | } 52 | 53 | @include m(info) { 54 | &.is-light { 55 | background-color: $--alert-info-color; 56 | color: $--color-info; 57 | } 58 | 59 | &.is-dark { 60 | background-color: $--color-info; 61 | color: $--color-white; 62 | } 63 | 64 | .el-alert__description { 65 | color: $--color-info; 66 | } 67 | } 68 | 69 | @include m(warning) { 70 | &.is-light { 71 | background-color: $--alert-warning-color; 72 | color: $--color-warning; 73 | 74 | .el-alert__description { 75 | color: $--color-warning; 76 | } 77 | } 78 | 79 | &.is-dark { 80 | background-color: $--color-warning; 81 | color: $--color-white; 82 | } 83 | } 84 | 85 | @include m(error) { 86 | &.is-light { 87 | background-color: $--alert-danger-color; 88 | color: $--color-danger; 89 | 90 | .el-alert__description { 91 | color: $--color-danger; 92 | } 93 | } 94 | 95 | &.is-dark { 96 | background-color: $--color-danger; 97 | color: $--color-white; 98 | } 99 | } 100 | 101 | @include e(content) { 102 | display: table-cell; 103 | padding: 0 8px; 104 | } 105 | 106 | @include e(icon) { 107 | font-size: $--alert-icon-size; 108 | width: $--alert-icon-size; 109 | @include when(big) { 110 | font-size: $--alert-icon-large-size; 111 | width: $--alert-icon-large-size; 112 | } 113 | } 114 | 115 | @include e(title) { 116 | font-size: $--alert-title-font-size; 117 | line-height: 18px; 118 | @include when(bold) { 119 | font-weight: bold; 120 | } 121 | } 122 | 123 | & .el-alert__description { 124 | font-size: $--alert-description-font-size; 125 | margin: 5px 0 0 0; 126 | } 127 | 128 | @include e(closebtn) { 129 | font-size: $--alert-close-font-size; 130 | opacity: 1; 131 | position: absolute; 132 | top: 12px; 133 | right: 15px; 134 | cursor: pointer; 135 | 136 | @include when(customed) { 137 | font-style: normal; 138 | font-size: $--alert-close-customed-font-size; 139 | top: 9px; 140 | } 141 | } 142 | } 143 | 144 | .el-alert-fade-enter, 145 | .el-alert-fade-leave-active { 146 | opacity: 0; 147 | } 148 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/aside.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(aside) { 4 | overflow: auto; 5 | box-sizing: border-box; 6 | flex-shrink: 0; 7 | } 8 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/autocomplete.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/utils"; 3 | @import "common/var"; 4 | @import "./input.scss"; 5 | @import "./scrollbar.scss"; 6 | @import "./popper"; 7 | 8 | @include b(autocomplete) { 9 | position: relative; 10 | display: inline-block; 11 | } 12 | 13 | @include b(autocomplete-suggestion) { 14 | margin: 5px 0; 15 | box-shadow: $--box-shadow-light; 16 | border-radius: $--border-radius-base; 17 | border: 1px solid $--border-color-light; 18 | box-sizing: border-box; 19 | background-color: $--color-white; 20 | 21 | @include e(wrap) { 22 | max-height: 280px; 23 | padding: 10px 0; 24 | box-sizing: border-box; 25 | } 26 | 27 | @include e(list) { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | 32 | & li { 33 | padding: 0 20px; 34 | margin: 0; 35 | line-height: 34px; 36 | cursor: pointer; 37 | color: $--color-text-regular; 38 | font-size: $--font-size-base; 39 | list-style: none; 40 | white-space: nowrap; 41 | overflow: hidden; 42 | text-overflow: ellipsis; 43 | 44 | &:hover { 45 | background-color: $--select-option-hover-background; 46 | } 47 | 48 | &.highlighted { 49 | background-color: $--select-option-hover-background; 50 | } 51 | 52 | &.divider { 53 | margin-top: 6px; 54 | border-top: 1px solid $--color-black; 55 | } 56 | 57 | &.divider:last-child { 58 | margin-bottom: -6px; 59 | } 60 | } 61 | 62 | @include when(loading) { 63 | li { 64 | text-align: center; 65 | height: 100px; 66 | line-height: 100px; 67 | font-size: 20px; 68 | color: #999; 69 | @include utils-vertical-center; 70 | 71 | &:hover { 72 | background-color: $--color-white; 73 | } 74 | } 75 | 76 | & .el-icon-loading { 77 | vertical-align: middle; 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/avatar.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(avatar) { 5 | display: inline-block; 6 | box-sizing: border-box; 7 | text-align: center; 8 | overflow: hidden; 9 | color: $--avatar-font-color; 10 | background: $--avatar-background-color; 11 | width: $--avatar-large-size; 12 | height: $--avatar-large-size; 13 | line-height: $--avatar-large-size; 14 | font-size: $--avatar-text-font-size; 15 | 16 | >img { 17 | display: block; 18 | height: 100%; 19 | vertical-align: middle; 20 | } 21 | 22 | @include m(circle) { 23 | border-radius: 50%; 24 | } 25 | 26 | @include m(square) { 27 | border-radius: $--avatar-border-radius; 28 | } 29 | 30 | @include m(icon) { 31 | font-size: $--avatar-icon-font-size; 32 | } 33 | 34 | @include m(large) { 35 | width: $--avatar-large-size; 36 | height: $--avatar-large-size; 37 | line-height: $--avatar-large-size; 38 | } 39 | 40 | @include m(medium) { 41 | width: $--avatar-medium-size; 42 | height: $--avatar-medium-size; 43 | line-height: $--avatar-medium-size; 44 | } 45 | 46 | @include m(small) { 47 | width: $--avatar-small-size; 48 | height: $--avatar-small-size; 49 | line-height: $--avatar-small-size; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/backtop.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(backtop) { 5 | position: fixed; 6 | background-color: $--backtop-background-color; 7 | width: 40px; 8 | height: 40px; 9 | border-radius: 50%; 10 | color: $--backtop-font-color; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | font-size: 20px; 15 | box-shadow: 0 0 6px rgba(0,0,0, .12); 16 | cursor: pointer; 17 | z-index: 5; 18 | 19 | &:hover { 20 | background-color: $--backtop-hover-background-color 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/badge.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(badge) { 5 | position: relative; 6 | vertical-align: middle; 7 | display: inline-block; 8 | 9 | @include e(content) { 10 | background-color: $--badge-background-color; 11 | border-radius: $--badge-radius; 12 | color: $--color-white; 13 | display: inline-block; 14 | font-size: $--badge-font-size; 15 | height: $--badge-size; 16 | line-height: $--badge-size; 17 | padding: 0 $--badge-padding; 18 | text-align: center; 19 | white-space: nowrap; 20 | border: 1px solid $--color-white; 21 | 22 | @include when(fixed) { 23 | position: absolute; 24 | top: 0; 25 | right: #{1 + $--badge-size / 2}; 26 | transform: translateY(-50%) translateX(100%); 27 | 28 | @include when(dot) { 29 | right: 5px; 30 | } 31 | } 32 | 33 | @include when(dot) { 34 | height: 8px; 35 | width: 8px; 36 | padding: 0; 37 | right: 0; 38 | border-radius: 50%; 39 | } 40 | 41 | @each $type in (primary, success, warning, info, danger) { 42 | @include m($type) { 43 | @if $type == primary { 44 | background-color: $--color-primary; 45 | } @else if $type == success { 46 | background-color: $--color-success; 47 | } @else if $type == warning { 48 | background-color: $--color-warning; 49 | } @else if $type == info { 50 | background-color: $--color-info; 51 | } @else { 52 | background-color: $--color-danger; 53 | } 54 | } 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/base.scss: -------------------------------------------------------------------------------- 1 | @import "common/transition.scss"; 2 | @import "icon.scss"; 3 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/breadcrumb-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/breadcrumb-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/utils"; 3 | @import "common/var"; 4 | 5 | @include b(breadcrumb) { 6 | font-size: 14px; 7 | line-height: 1; 8 | @include utils-clearfix; 9 | 10 | @include e(separator) { 11 | margin: 0 9px; 12 | font-weight: bold; 13 | color: $--color-text-placeholder; 14 | 15 | &[class*=icon] { 16 | margin: 0 6px; 17 | font-weight: normal; 18 | } 19 | } 20 | 21 | @include e(item) { 22 | float: left; 23 | 24 | @include e(inner) { 25 | color: $--color-text-regular; 26 | 27 | &.is-link, & a { 28 | font-weight: bold; 29 | text-decoration: none; 30 | transition: $--color-transition-base; 31 | color: $--color-text-primary; 32 | 33 | &:hover { 34 | color: $--color-primary; 35 | cursor: pointer; 36 | } 37 | } 38 | } 39 | 40 | &:last-child { 41 | .el-breadcrumb__inner, 42 | .el-breadcrumb__inner a { 43 | &, &:hover { 44 | font-weight: normal; 45 | color: $--color-text-regular; 46 | cursor: text; 47 | } 48 | } 49 | 50 | .el-breadcrumb__separator { 51 | display: none; 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/button-group.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/button-group.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/calendar.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "button"; 4 | @import "button-group"; 5 | 6 | @include b(calendar) { 7 | background-color:#fff; 8 | 9 | @include e(header) { 10 | display: flex; 11 | justify-content: space-between; 12 | padding: 12px 20px; 13 | border-bottom: $--table-border; 14 | } 15 | 16 | @include e(title) { 17 | color: #000000; 18 | align-self: center; 19 | } 20 | 21 | @include e(body) { 22 | padding: 12px 20px 35px; 23 | } 24 | } 25 | 26 | @include b(calendar-table) { 27 | table-layout: fixed; 28 | width: 100%; 29 | 30 | thead th { 31 | padding: 12px 0; 32 | color: $--color-text-regular; 33 | font-weight: normal; 34 | } 35 | 36 | &:not(.is-range) { 37 | td.prev, 38 | td.next { 39 | color: $--color-text-placeholder; 40 | } 41 | } 42 | 43 | td { 44 | border-bottom: $--calendar-border; 45 | border-right: $--calendar-border; 46 | vertical-align: top; 47 | transition: background-color 0.2s ease; 48 | 49 | @include when(selected) { 50 | background-color: $--calendar-selected-background-color; 51 | } 52 | 53 | @include when(today) { 54 | color: $--color-primary; 55 | } 56 | } 57 | 58 | tr:first-child td { 59 | border-top: $--calendar-border; 60 | } 61 | 62 | tr td:first-child { 63 | border-left: $--calendar-border; 64 | } 65 | 66 | tr.el-calendar-table__row--hide-border td { 67 | border-top: none; 68 | } 69 | 70 | @include b(calendar-day) { 71 | box-sizing: border-box; 72 | padding: 8px; 73 | height: $--calendar-cell-width; 74 | &:hover { 75 | cursor: pointer; 76 | background-color: $--calendar-selected-background-color; 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/card.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(card) { 5 | border-radius: $--card-border-radius; 6 | border: 1px solid $--card-border-color; 7 | background-color: $--color-white; 8 | overflow: hidden; 9 | color: $--color-text-primary; 10 | transition: 0.3s; 11 | 12 | @include when(always-shadow) { 13 | box-shadow: $--box-shadow-light; 14 | } 15 | 16 | @include when(hover-shadow) { 17 | &:hover, 18 | &:focus { 19 | box-shadow: $--box-shadow-light; 20 | } 21 | } 22 | 23 | @include e(header) { 24 | padding: #{$--card-padding - 2 $--card-padding}; 25 | border-bottom: 1px solid $--card-border-color; 26 | box-sizing: border-box; 27 | } 28 | 29 | @include e(body) { 30 | padding: $--card-padding; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/carousel-item.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(carousel) { 5 | @include e(item) { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | height: 100%; 11 | display: inline-block; 12 | overflow: hidden; 13 | z-index: #{$--index-normal - 1}; 14 | 15 | @include when(active) { 16 | z-index: #{$--index-normal + 1}; 17 | } 18 | 19 | @include when(animating) { 20 | transition: transform .4s ease-in-out; 21 | } 22 | 23 | @include m(card) { 24 | width: 50%; 25 | transition: transform .4s ease-in-out; 26 | &.is-in-stage { 27 | cursor: pointer; 28 | z-index: $--index-normal; 29 | &:hover .el-carousel__mask, 30 | &.is-hover .el-carousel__mask { 31 | opacity: 0.12; 32 | } 33 | } 34 | &.is-active { 35 | z-index: #{$--index-normal + 1}; 36 | } 37 | } 38 | } 39 | 40 | @include e(mask) { 41 | position: absolute; 42 | width: 100%; 43 | height: 100%; 44 | top: 0; 45 | left: 0; 46 | background-color: $--color-white; 47 | opacity: 0.24; 48 | transition: .2s; 49 | } 50 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/cascader-panel.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "./checkbox"; 4 | @import "./radio"; 5 | @import "./scrollbar"; 6 | 7 | @include b(cascader-panel) { 8 | display: flex; 9 | border-radius: $--cascader-menu-radius; 10 | font-size: $--cascader-menu-font-size; 11 | 12 | @include when(bordered) { 13 | border: $--cascader-menu-border; 14 | border-radius: $--cascader-menu-radius; 15 | } 16 | } 17 | 18 | @include b(cascader-menu) { 19 | min-width: 180px; 20 | box-sizing: border-box; 21 | color: $--cascader-menu-font-color; 22 | border-right: $--cascader-menu-border; 23 | 24 | &:last-child { 25 | border-right: none; 26 | .el-cascader-node { 27 | padding-right: 20px; 28 | } 29 | } 30 | 31 | @include e(wrap) { 32 | height: 204px; 33 | } 34 | 35 | @include e(list) { 36 | position: relative; 37 | min-height: 100%; 38 | margin: 0; 39 | padding: 6px 0; 40 | list-style: none; 41 | box-sizing: border-box; 42 | } 43 | 44 | @include e(hover-zone) { 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | pointer-events: none; 51 | } 52 | 53 | @include e(empty-text) { 54 | position: absolute; 55 | top: 50%; 56 | left: 50%; 57 | transform: translate(-50%, -50%); 58 | text-align: center; 59 | color: $--cascader-color-empty; 60 | } 61 | } 62 | 63 | @include b(cascader-node) { 64 | position: relative; 65 | display: flex; 66 | align-items: center; 67 | padding: 0 30px 0 20px; 68 | height: 34px; 69 | line-height: 34px; 70 | outline: none; 71 | 72 | &.is-selectable.in-active-path { 73 | color: $--cascader-menu-font-color; 74 | } 75 | 76 | &.in-active-path, 77 | &.is-selectable.in-checked-path, 78 | &.is-active { 79 | color: $--cascader-menu-selected-font-color; 80 | font-weight: bold; 81 | } 82 | 83 | &:not(.is-disabled) { 84 | cursor: pointer; 85 | &:hover, &:focus { 86 | background: $--cascader-node-background-hover; 87 | } 88 | } 89 | 90 | @include when(disabled) { 91 | color: $--cascader-node-color-disabled; 92 | cursor: not-allowed; 93 | } 94 | 95 | @include e(prefix) { 96 | position: absolute; 97 | left: 10px; 98 | } 99 | 100 | @include e(postfix) { 101 | position: absolute; 102 | right: 10px; 103 | } 104 | 105 | @include e(label) { 106 | flex: 1; 107 | padding: 0 10px; 108 | white-space: nowrap; 109 | overflow: hidden; 110 | text-overflow: ellipsis; 111 | } 112 | 113 | > .el-radio { 114 | margin-right: 0; 115 | 116 | .el-radio__label { 117 | padding-left: 0; 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/checkbox-button.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/checkbox-button.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/checkbox-group.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/checkbox-group.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/col.scss: -------------------------------------------------------------------------------- 1 | @import "./common/var.scss"; 2 | @import "./mixins/mixins.scss"; 3 | 4 | [class*="el-col-"] { 5 | float: left; 6 | box-sizing: border-box; 7 | } 8 | 9 | .el-col-0 { 10 | display: none; 11 | } 12 | 13 | @for $i from 0 through 24 { 14 | .el-col-#{$i} { 15 | width: (1 / 24 * $i * 100) * 1%; 16 | } 17 | 18 | .el-col-offset-#{$i} { 19 | margin-left: (1 / 24 * $i * 100) * 1%; 20 | } 21 | 22 | .el-col-pull-#{$i} { 23 | position: relative; 24 | right: (1 / 24 * $i * 100) * 1%; 25 | } 26 | 27 | .el-col-push-#{$i} { 28 | position: relative; 29 | left: (1 / 24 * $i * 100) * 1%; 30 | } 31 | } 32 | 33 | @include res(xs) { 34 | .el-col-xs-0 { 35 | display: none; 36 | } 37 | @for $i from 0 through 24 { 38 | .el-col-xs-#{$i} { 39 | width: (1 / 24 * $i * 100) * 1%; 40 | } 41 | 42 | .el-col-xs-offset-#{$i} { 43 | margin-left: (1 / 24 * $i * 100) * 1%; 44 | } 45 | 46 | .el-col-xs-pull-#{$i} { 47 | position: relative; 48 | right: (1 / 24 * $i * 100) * 1%; 49 | } 50 | 51 | .el-col-xs-push-#{$i} { 52 | position: relative; 53 | left: (1 / 24 * $i * 100) * 1%; 54 | } 55 | } 56 | } 57 | 58 | @include res(sm) { 59 | .el-col-sm-0 { 60 | display: none; 61 | } 62 | @for $i from 0 through 24 { 63 | .el-col-sm-#{$i} { 64 | width: (1 / 24 * $i * 100) * 1%; 65 | } 66 | 67 | .el-col-sm-offset-#{$i} { 68 | margin-left: (1 / 24 * $i * 100) * 1%; 69 | } 70 | 71 | .el-col-sm-pull-#{$i} { 72 | position: relative; 73 | right: (1 / 24 * $i * 100) * 1%; 74 | } 75 | 76 | .el-col-sm-push-#{$i} { 77 | position: relative; 78 | left: (1 / 24 * $i * 100) * 1%; 79 | } 80 | } 81 | } 82 | 83 | @include res(md) { 84 | .el-col-md-0 { 85 | display: none; 86 | } 87 | @for $i from 0 through 24 { 88 | .el-col-md-#{$i} { 89 | width: (1 / 24 * $i * 100) * 1%; 90 | } 91 | 92 | .el-col-md-offset-#{$i} { 93 | margin-left: (1 / 24 * $i * 100) * 1%; 94 | } 95 | 96 | .el-col-md-pull-#{$i} { 97 | position: relative; 98 | right: (1 / 24 * $i * 100) * 1%; 99 | } 100 | 101 | .el-col-md-push-#{$i} { 102 | position: relative; 103 | left: (1 / 24 * $i * 100) * 1%; 104 | } 105 | } 106 | } 107 | 108 | @include res(lg) { 109 | .el-col-lg-0 { 110 | display: none; 111 | } 112 | @for $i from 0 through 24 { 113 | .el-col-lg-#{$i} { 114 | width: (1 / 24 * $i * 100) * 1%; 115 | } 116 | 117 | .el-col-lg-offset-#{$i} { 118 | margin-left: (1 / 24 * $i * 100) * 1%; 119 | } 120 | 121 | .el-col-lg-pull-#{$i} { 122 | position: relative; 123 | right: (1 / 24 * $i * 100) * 1%; 124 | } 125 | 126 | .el-col-lg-push-#{$i} { 127 | position: relative; 128 | left: (1 / 24 * $i * 100) * 1%; 129 | } 130 | } 131 | } 132 | 133 | @include res(xl) { 134 | .el-col-xl-0 { 135 | display: none; 136 | } 137 | @for $i from 0 through 24 { 138 | .el-col-xl-#{$i} { 139 | width: (1 / 24 * $i * 100) * 1%; 140 | } 141 | 142 | .el-col-xl-offset-#{$i} { 143 | margin-left: (1 / 24 * $i * 100) * 1%; 144 | } 145 | 146 | .el-col-xl-pull-#{$i} { 147 | position: relative; 148 | right: (1 / 24 * $i * 100) * 1%; 149 | } 150 | 151 | .el-col-xl-push-#{$i} { 152 | position: relative; 153 | left: (1 / 24 * $i * 100) * 1%; 154 | } 155 | } 156 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/collapse-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/collapse-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/collapse.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "common/transition"; 4 | 5 | @include b(collapse) { 6 | border-top: 1px solid $--collapse-border-color; 7 | border-bottom: 1px solid $--collapse-border-color; 8 | } 9 | @include b(collapse-item) { 10 | @include when(disabled) { 11 | .el-collapse-item__header { 12 | color: $--font-color-disabled-base; 13 | cursor: not-allowed; 14 | } 15 | } 16 | @include e(header) { 17 | display: flex; 18 | align-items: center; 19 | height: $--collapse-header-height; 20 | line-height: $--collapse-header-height; 21 | background-color: $--collapse-header-background-color; 22 | color: $--collapse-header-font-color; 23 | cursor: pointer; 24 | border-bottom: 1px solid $--collapse-border-color; 25 | font-size: $--collapse-header-font-size; 26 | font-weight: 500; 27 | transition: border-bottom-color .3s; 28 | outline: none; 29 | @include e(arrow) { 30 | margin: 0 8px 0 auto; 31 | transition: transform .3s; 32 | font-weight: 300; 33 | @include when(active) { 34 | transform: rotate(90deg); 35 | } 36 | } 37 | &.focusing:focus:not(:hover){ 38 | color: $--color-primary; 39 | } 40 | @include when(active) { 41 | border-bottom-color: transparent; 42 | } 43 | } 44 | 45 | @include e(wrap) { 46 | will-change: height; 47 | background-color: $--collapse-content-background-color; 48 | overflow: hidden; 49 | box-sizing: border-box; 50 | border-bottom: 1px solid $--collapse-border-color; 51 | } 52 | 53 | @include e(content) { 54 | padding-bottom: 25px; 55 | font-size: $--collapse-content-font-size; 56 | color: $--collapse-content-font-color; 57 | line-height: 1.769230769230769; 58 | } 59 | 60 | &:last-child { 61 | margin-bottom: -1px; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/common/popup.scss: -------------------------------------------------------------------------------- 1 | @import "./var.scss"; 2 | @import "../mixins/mixins"; 3 | 4 | .v-modal-enter { 5 | animation: v-modal-in .2s ease; 6 | } 7 | 8 | .v-modal-leave { 9 | animation: v-modal-out .2s ease forwards; 10 | } 11 | 12 | @keyframes v-modal-in { 13 | 0% { 14 | opacity: 0; 15 | } 16 | 100% { 17 | } 18 | } 19 | 20 | @keyframes v-modal-out { 21 | 0% { 22 | } 23 | 100% { 24 | opacity: 0; 25 | } 26 | } 27 | 28 | .v-modal { 29 | position: fixed; 30 | left: 0; 31 | top: 0; 32 | width: 100%; 33 | height: 100%; 34 | opacity: $--popup-modal-opacity; 35 | background: $--popup-modal-background-color; 36 | } 37 | 38 | @include b(popup-parent) { 39 | @include m(hidden) { 40 | overflow: hidden; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/common/transition.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | .fade-in-linear-enter-active, 4 | .fade-in-linear-leave-active { 5 | transition: $--fade-linear-transition; 6 | } 7 | .fade-in-linear-enter, 8 | .fade-in-linear-leave, 9 | .fade-in-linear-leave-active { 10 | opacity: 0; 11 | } 12 | 13 | .el-fade-in-linear-enter-active, 14 | .el-fade-in-linear-leave-active { 15 | transition: $--fade-linear-transition; 16 | } 17 | .el-fade-in-linear-enter, 18 | .el-fade-in-linear-leave, 19 | .el-fade-in-linear-leave-active { 20 | opacity: 0; 21 | } 22 | 23 | .el-fade-in-enter-active, 24 | .el-fade-in-leave-active { 25 | transition: all .3s cubic-bezier(.55,0,.1,1); 26 | } 27 | .el-fade-in-enter, 28 | .el-fade-in-leave-active { 29 | opacity: 0; 30 | } 31 | 32 | .el-zoom-in-center-enter-active, 33 | .el-zoom-in-center-leave-active { 34 | transition: all .3s cubic-bezier(.55,0,.1,1); 35 | } 36 | .el-zoom-in-center-enter, 37 | .el-zoom-in-center-leave-active { 38 | opacity: 0; 39 | transform: scaleX(0); 40 | } 41 | 42 | .el-zoom-in-top-enter-active, 43 | .el-zoom-in-top-leave-active { 44 | opacity: 1; 45 | transform: scaleY(1); 46 | transition: $--md-fade-transition; 47 | transform-origin: center top; 48 | } 49 | .el-zoom-in-top-enter, 50 | .el-zoom-in-top-leave-active { 51 | opacity: 0; 52 | transform: scaleY(0); 53 | } 54 | 55 | .el-zoom-in-bottom-enter-active, 56 | .el-zoom-in-bottom-leave-active { 57 | opacity: 1; 58 | transform: scaleY(1); 59 | transition: $--md-fade-transition; 60 | transform-origin: center bottom; 61 | } 62 | .el-zoom-in-bottom-enter, 63 | .el-zoom-in-bottom-leave-active { 64 | opacity: 0; 65 | transform: scaleY(0); 66 | } 67 | 68 | .el-zoom-in-left-enter-active, 69 | .el-zoom-in-left-leave-active { 70 | opacity: 1; 71 | transform: scale(1, 1); 72 | transition: $--md-fade-transition; 73 | transform-origin: top left; 74 | } 75 | .el-zoom-in-left-enter, 76 | .el-zoom-in-left-leave-active { 77 | opacity: 0; 78 | transform: scale(.45, .45); 79 | } 80 | 81 | .collapse-transition { 82 | transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; 83 | } 84 | .horizontal-collapse-transition { 85 | transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; 86 | } 87 | 88 | .el-list-enter-active, 89 | .el-list-leave-active { 90 | transition: all 1s; 91 | } 92 | .el-list-enter, .el-list-leave-active { 93 | opacity: 0; 94 | transform: translateY(-30px); 95 | } 96 | 97 | .el-opacity-transition { 98 | transition: opacity .3s cubic-bezier(.55,0,.1,1); 99 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/container.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(container) { 4 | display: flex; 5 | flex-direction: row; 6 | flex: 1; 7 | flex-basis: auto; 8 | box-sizing: border-box; 9 | min-width: 0; 10 | 11 | @include when(vertical) { 12 | flex-direction: column; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker.scss: -------------------------------------------------------------------------------- 1 | @import "./date-picker/date-table.scss"; 2 | @import "./date-picker/month-table.scss"; 3 | @import "./date-picker/year-table.scss"; 4 | @import "./date-picker/time-spinner.scss"; 5 | @import "./date-picker/picker.scss"; 6 | @import "./date-picker/date-picker.scss"; 7 | @import "./date-picker/date-range-picker.scss"; 8 | @import "./date-picker/time-range-picker.scss"; 9 | @import "./date-picker/time-picker.scss"; 10 | @import "./input.scss"; 11 | @import "./scrollbar.scss"; 12 | @import "./popper"; -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/date-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | @import "../mixins/mixins"; 3 | @import "./picker-panel.scss"; 4 | 5 | @include b(date-picker) { 6 | width: 322px; 7 | 8 | &.has-sidebar.has-time { 9 | width: 434px; 10 | } 11 | 12 | &.has-sidebar { 13 | width: 438px; 14 | } 15 | 16 | &.has-time .el-picker-panel__body-wrapper { 17 | position: relative; 18 | } 19 | 20 | .el-picker-panel__content { 21 | width: 292px; 22 | } 23 | 24 | table { 25 | table-layout: fixed; 26 | width: 100%; 27 | } 28 | 29 | @include e(editor-wrap) { 30 | position: relative; 31 | display: table-cell; 32 | padding: 0 5px; 33 | } 34 | 35 | @include e(time-header) { 36 | position: relative; 37 | border-bottom: 1px solid $--datepicker-inner-border-color; 38 | font-size: 12px; 39 | padding: 8px 5px 5px 5px; 40 | display: table; 41 | width: 100%; 42 | box-sizing: border-box; 43 | } 44 | 45 | @include e(header) { 46 | margin: 12px; 47 | text-align: center; 48 | 49 | @include m(bordered) { 50 | margin-bottom: 0; 51 | padding-bottom: 12px; 52 | border-bottom: solid 1px $--border-color-lighter; 53 | 54 | & + .el-picker-panel__content { 55 | margin-top: 0; 56 | } 57 | } 58 | } 59 | 60 | @include e(header-label) { 61 | font-size: 16px; 62 | font-weight: 500; 63 | padding: 0 5px; 64 | line-height: 22px; 65 | text-align: center; 66 | cursor: pointer; 67 | color: $--color-text-regular; 68 | 69 | &:hover { 70 | color: $--datepicker-hover-font-color; 71 | } 72 | 73 | &.active { 74 | color: $--datepicker-active-color; 75 | } 76 | } 77 | 78 | @include e(prev-btn) { 79 | float: left; 80 | } 81 | 82 | @include e(next-btn) { 83 | float: right; 84 | } 85 | 86 | @include e(time-wrap) { 87 | padding: 10px; 88 | text-align: center; 89 | } 90 | 91 | @include e(time-label) { 92 | float: left; 93 | cursor: pointer; 94 | line-height: 30px; 95 | margin-left: 10px; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/date-range-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(date-range-picker) { 4 | width: 646px; 5 | 6 | &.has-sidebar { 7 | width: 756px; 8 | } 9 | 10 | table { 11 | table-layout: fixed; 12 | width: 100%; 13 | } 14 | 15 | .el-picker-panel__body { 16 | min-width: 513px; 17 | } 18 | 19 | .el-picker-panel__content { 20 | margin: 0; 21 | } 22 | 23 | @include e(header) { 24 | position: relative; 25 | text-align: center; 26 | height: 28px; 27 | 28 | [class*=arrow-left] { 29 | float: left; 30 | } 31 | 32 | [class*=arrow-right] { 33 | float: right; 34 | } 35 | 36 | div { 37 | font-size: 16px; 38 | font-weight: 500; 39 | margin-right: 50px; 40 | } 41 | } 42 | 43 | @include e(content) { 44 | float: left; 45 | width: 50%; 46 | box-sizing: border-box; 47 | margin: 0; 48 | padding: 16px; 49 | 50 | @include when(left) { 51 | border-right: 1px solid $--datepicker-inner-border-color; 52 | } 53 | .el-date-range-picker__header { 54 | 55 | div { 56 | margin-left: 50px; 57 | margin-right: 50px; 58 | } 59 | } 60 | } 61 | 62 | @include e(editors-wrap) { 63 | box-sizing: border-box; 64 | display: table-cell; 65 | 66 | @include when(right) { 67 | text-align: right; 68 | } 69 | } 70 | 71 | @include e(time-header) { 72 | position: relative; 73 | border-bottom: 1px solid $--datepicker-inner-border-color; 74 | font-size: 12px; 75 | padding: 8px 5px 5px 5px; 76 | display: table; 77 | width: 100%; 78 | box-sizing: border-box; 79 | 80 | > .el-icon-arrow-right { 81 | font-size: 20px; 82 | vertical-align: middle; 83 | display: table-cell; 84 | color: $--datepicker-icon-color; 85 | } 86 | } 87 | 88 | @include e(time-picker-wrap) { 89 | position: relative; 90 | display: table-cell; 91 | padding: 0 5px; 92 | 93 | .el-picker-panel { 94 | position: absolute; 95 | top: 13px; 96 | right: 0; 97 | z-index: 1; 98 | background: $--color-white; 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/date-table.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | @import "../mixins/mixins"; 3 | 4 | @include b(date-table) { 5 | font-size: 12px; 6 | user-select: none; 7 | 8 | @include when(week-mode) { 9 | .el-date-table__row { 10 | &:hover { 11 | div { 12 | background-color: $--datepicker-inrange-background-color; 13 | } 14 | td.available:hover { 15 | color: $--datepicker-font-color; 16 | } 17 | td:first-child div { 18 | margin-left: 5px; 19 | border-top-left-radius: 15px; 20 | border-bottom-left-radius: 15px; 21 | } 22 | td:last-child div { 23 | margin-right: 5px; 24 | border-top-right-radius: 15px; 25 | border-bottom-right-radius: 15px; 26 | } 27 | } 28 | 29 | &.current div { 30 | background-color: $--datepicker-inrange-background-color; 31 | } 32 | } 33 | } 34 | 35 | td { 36 | width: 32px; 37 | height: 30px; 38 | padding: 4px 0; 39 | box-sizing: border-box; 40 | text-align: center; 41 | cursor: pointer; 42 | position: relative; 43 | 44 | & div { 45 | height: 30px; 46 | padding: 3px 0; 47 | box-sizing: border-box; 48 | } 49 | 50 | & span { 51 | width: 24px; 52 | height: 24px; 53 | display: block; 54 | margin: 0 auto; 55 | line-height: 24px; 56 | position: absolute; 57 | left: 50%; 58 | transform: translateX(-50%); 59 | border-radius: 50%; 60 | } 61 | 62 | &.next-month, 63 | &.prev-month { 64 | color: $--datepicker-off-font-color; 65 | } 66 | 67 | &.today { 68 | position: relative; 69 | span { 70 | color: $--color-primary; 71 | font-weight: bold; 72 | } 73 | &.start-date span, 74 | &.end-date span { 75 | color: $--color-white; 76 | } 77 | } 78 | 79 | &.available:hover { 80 | color: $--datepicker-hover-font-color; 81 | } 82 | 83 | &.in-range div { 84 | background-color: $--datepicker-inrange-background-color; 85 | &:hover { 86 | background-color: $--datepicker-inrange-hover-background-color; 87 | } 88 | } 89 | 90 | &.current:not(.disabled) span { 91 | color: $--color-white; 92 | background-color: $--datepicker-active-color; 93 | } 94 | &.start-date div, 95 | &.end-date div { 96 | color: $--color-white; 97 | } 98 | 99 | &.start-date span, 100 | &.end-date span { 101 | background-color: $--datepicker-active-color; 102 | } 103 | 104 | &.start-date div { 105 | margin-left: 5px; 106 | border-top-left-radius: 15px; 107 | border-bottom-left-radius: 15px; 108 | } 109 | 110 | &.end-date div { 111 | margin-right: 5px; 112 | border-top-right-radius: 15px; 113 | border-bottom-right-radius: 15px; 114 | } 115 | 116 | &.disabled div { 117 | background-color: $--background-color-base; 118 | opacity: 1; 119 | cursor: not-allowed; 120 | color: $--color-text-placeholder; 121 | } 122 | 123 | &.selected div { 124 | margin-left: 5px; 125 | margin-right: 5px; 126 | background-color: $--datepicker-inrange-background-color; 127 | border-radius: 15px; 128 | &:hover { 129 | background-color: $--datepicker-inrange-hover-background-color; 130 | } 131 | } 132 | 133 | &.selected span { 134 | background-color: $--datepicker-active-color; 135 | color: $--color-white; 136 | border-radius: 15px; 137 | } 138 | 139 | &.week { 140 | font-size: 80%; 141 | color: $--datepicker-header-font-color; 142 | } 143 | } 144 | 145 | th { 146 | padding: 5px; 147 | color: $--datepicker-header-font-color; 148 | font-weight: 400; 149 | border-bottom: solid 1px $--border-color-lighter; 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/month-table.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(month-table) { 4 | font-size: 12px; 5 | margin: -1px; 6 | border-collapse: collapse; 7 | 8 | td { 9 | text-align: center; 10 | padding: 8px 0px; 11 | cursor: pointer; 12 | & div { 13 | height: 48px; 14 | padding: 6px 0; 15 | box-sizing: border-box; 16 | } 17 | &.today { 18 | .cell { 19 | color: $--color-primary; 20 | font-weight: bold; 21 | } 22 | &.start-date .cell, 23 | &.end-date .cell { 24 | color: $--color-white; 25 | } 26 | } 27 | 28 | &.disabled .cell { 29 | background-color: $--background-color-base; 30 | cursor: not-allowed; 31 | color: $--color-text-placeholder; 32 | 33 | &:hover { 34 | color: $--color-text-placeholder; 35 | } 36 | } 37 | 38 | .cell { 39 | width: 60px; 40 | height: 36px; 41 | display: block; 42 | line-height: 36px; 43 | color: $--datepicker-font-color; 44 | margin: 0 auto; 45 | border-radius: 18px; 46 | &:hover { 47 | color: $--datepicker-hover-font-color; 48 | } 49 | } 50 | 51 | &.in-range div { 52 | background-color: $--datepicker-inrange-background-color; 53 | &:hover { 54 | background-color: $--datepicker-inrange-hover-background-color; 55 | } 56 | } 57 | &.start-date div, 58 | &.end-date div { 59 | color: $--color-white; 60 | } 61 | 62 | &.start-date .cell, 63 | &.end-date .cell { 64 | color: $--color-white; 65 | background-color: $--datepicker-active-color; 66 | } 67 | 68 | &.start-date div { 69 | border-top-left-radius: 24px; 70 | border-bottom-left-radius: 24px; 71 | } 72 | 73 | &.end-date div { 74 | border-top-right-radius: 24px; 75 | border-bottom-right-radius: 24px; 76 | } 77 | 78 | &.current:not(.disabled) .cell { 79 | color: $--datepicker-active-color; 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/picker-panel.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(picker-panel) { 4 | color: $--color-text-regular; 5 | border: 1px solid $--datepicker-border-color; 6 | box-shadow: $--box-shadow-light; 7 | background: $--color-white; 8 | border-radius: $--border-radius-base; 9 | line-height: 30px; 10 | margin: 5px 0; 11 | 12 | @include e((body, body-wrapper)) { 13 | &::after { 14 | content: ""; 15 | display: table; 16 | clear: both; 17 | } 18 | } 19 | 20 | @include e(content) { 21 | position: relative; 22 | margin: 15px; 23 | } 24 | 25 | @include e(footer) { 26 | border-top: 1px solid $--datepicker-inner-border-color; 27 | padding: 4px; 28 | text-align: right; 29 | background-color: $--color-white; 30 | position: relative; 31 | font-size: 0; 32 | } 33 | 34 | @include e(shortcut) { 35 | display: block; 36 | width: 100%; 37 | border: 0; 38 | background-color: transparent; 39 | line-height: 28px; 40 | font-size: 14px; 41 | color: $--datepicker-font-color; 42 | padding-left: 12px; 43 | text-align: left; 44 | outline: none; 45 | cursor: pointer; 46 | 47 | &:hover { 48 | color: $--datepicker-hover-font-color; 49 | } 50 | 51 | &.active { 52 | background-color: #e6f1fe; 53 | color: $--datepicker-active-color; 54 | } 55 | } 56 | 57 | @include e(btn) { 58 | border: 1px solid #dcdcdc; 59 | color: #333; 60 | line-height: 24px; 61 | border-radius: 2px; 62 | padding: 0 20px; 63 | cursor: pointer; 64 | background-color: transparent; 65 | outline: none; 66 | font-size: 12px; 67 | 68 | &[disabled] { 69 | color: #cccccc; 70 | cursor: not-allowed; 71 | } 72 | } 73 | 74 | @include e(icon-btn) { 75 | font-size: 12px; 76 | color: $--datepicker-icon-color; 77 | border: 0; 78 | background: transparent; 79 | cursor: pointer; 80 | outline: none; 81 | margin-top: 8px; 82 | 83 | &:hover { 84 | color: $--datepicker-hover-font-color; 85 | } 86 | 87 | @include when(disabled) { 88 | color: $--font-color-disabled-base; 89 | 90 | &:hover { 91 | cursor: not-allowed; 92 | } 93 | } 94 | } 95 | 96 | @include e(link-btn) { 97 | vertical-align: middle; 98 | } 99 | } 100 | 101 | .el-picker-panel *[slot=sidebar], 102 | .el-picker-panel__sidebar { 103 | position: absolute; 104 | top: 0; 105 | bottom: 0; 106 | width: 110px; 107 | border-right: 1px solid $--datepicker-inner-border-color; 108 | box-sizing: border-box; 109 | padding-top: 6px; 110 | background-color: $--color-white; 111 | overflow: auto; 112 | } 113 | 114 | .el-picker-panel *[slot=sidebar] + .el-picker-panel__body, 115 | .el-picker-panel__sidebar + .el-picker-panel__body { 116 | margin-left: 110px; 117 | } 118 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/time-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(time-panel) { 4 | margin: 5px 0; 5 | border: solid 1px $--datepicker-border-color; 6 | background-color: $--color-white; 7 | box-shadow: $--box-shadow-light; 8 | border-radius: 2px; 9 | position: absolute; 10 | width: 180px; 11 | left: 0; 12 | z-index: $--index-top; 13 | user-select: none; 14 | box-sizing: content-box; 15 | 16 | @include e(content) { 17 | font-size: 0; 18 | position: relative; 19 | overflow: hidden; 20 | 21 | &::after, &::before { 22 | content: ""; 23 | top: 50%; 24 | position: absolute; 25 | margin-top: -15px; 26 | height: 32px; 27 | z-index: -1; 28 | left: 0; 29 | right: 0; 30 | box-sizing: border-box; 31 | padding-top: 6px; 32 | text-align: left; 33 | border-top: 1px solid $--border-color-light; 34 | border-bottom: 1px solid $--border-color-light; 35 | } 36 | 37 | &::after { 38 | left: 50%; 39 | margin-left: 12%; 40 | margin-right: 12%; 41 | } 42 | 43 | &::before { 44 | padding-left: 50%; 45 | margin-right: 12%; 46 | margin-left: 12%; 47 | } 48 | 49 | &.has-seconds { 50 | &::after { 51 | left: calc(100% / 3 * 2); 52 | } 53 | 54 | &::before { 55 | padding-left: calc(100% / 3); 56 | } 57 | } 58 | } 59 | 60 | @include e(footer) { 61 | border-top: 1px solid $--datepicker-inner-border-color; 62 | padding: 4px; 63 | height: 36px; 64 | line-height: 25px; 65 | text-align: right; 66 | box-sizing: border-box; 67 | } 68 | 69 | @include e(btn) { 70 | border: none; 71 | line-height: 28px; 72 | padding: 0 5px; 73 | margin: 0 5px; 74 | cursor: pointer; 75 | background-color: transparent; 76 | outline: none; 77 | font-size: 12px; 78 | color: $--color-text-primary; 79 | 80 | &.confirm { 81 | font-weight: 800; 82 | color: $--datepicker-active-color; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/time-range-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(time-range-picker) { 4 | width: 354px; 5 | overflow: visible; 6 | 7 | @include e(content) { 8 | position: relative; 9 | text-align: center; 10 | padding: 10px; 11 | } 12 | 13 | @include e(cell) { 14 | box-sizing: border-box; 15 | margin: 0; 16 | padding: 4px 7px 7px; 17 | width: 50%; 18 | display: inline-block; 19 | } 20 | 21 | @include e(header) { 22 | margin-bottom: 5px; 23 | text-align: center; 24 | font-size: 14px; 25 | } 26 | 27 | @include e(body) { 28 | border-radius:2px; 29 | border: 1px solid $--datepicker-border-color; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/time-spinner.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(time-spinner) { 4 | &.has-seconds { 5 | .el-time-spinner__wrapper { 6 | width: 33.3%; 7 | } 8 | } 9 | 10 | @include e(wrapper) { 11 | max-height: 190px; 12 | overflow: auto; 13 | display: inline-block; 14 | width: 50%; 15 | vertical-align: top; 16 | position: relative; 17 | 18 | & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { 19 | padding-bottom: 15px; 20 | } 21 | 22 | @include when(arrow) { 23 | box-sizing: border-box; 24 | text-align: center; 25 | overflow: hidden; 26 | 27 | .el-time-spinner__list { 28 | transform: translateY(-32px); 29 | } 30 | 31 | .el-time-spinner__item:hover:not(.disabled):not(.active) { 32 | background: $--color-white; 33 | cursor: default; 34 | } 35 | } 36 | } 37 | 38 | @include e(arrow) { 39 | font-size: 12px; 40 | color: $--color-text-secondary; 41 | position: absolute; 42 | left: 0; 43 | width: 100%; 44 | z-index: $--index-normal; 45 | text-align: center; 46 | height: 30px; 47 | line-height: 30px; 48 | cursor: pointer; 49 | 50 | &:hover { 51 | color: $--color-primary; 52 | } 53 | 54 | &.el-icon-arrow-up { 55 | top: 10px; 56 | } 57 | 58 | &.el-icon-arrow-down { 59 | bottom: 10px; 60 | } 61 | } 62 | 63 | @include e(input) { 64 | &.el-input { 65 | width: 70%; 66 | 67 | .el-input__inner { 68 | padding: 0; 69 | text-align: center; 70 | } 71 | } 72 | } 73 | 74 | @include e(list) { 75 | padding: 0; 76 | margin: 0; 77 | list-style: none; 78 | text-align: center; 79 | 80 | &::after, 81 | &::before { 82 | content: ''; 83 | display: block; 84 | width: 100%; 85 | height: 80px; 86 | } 87 | } 88 | 89 | @include e(item) { 90 | height: 32px; 91 | line-height: 32px; 92 | font-size: 12px; 93 | color: $--color-text-regular; 94 | 95 | &:hover:not(.disabled):not(.active) { 96 | background: $--background-color-base; 97 | cursor: pointer; 98 | } 99 | 100 | &.active:not(.disabled) { 101 | color: $--color-text-primary; 102 | font-weight: bold; 103 | } 104 | 105 | &.disabled { 106 | color: $--color-text-placeholder; 107 | cursor: not-allowed; 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/date-picker/year-table.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | 3 | @include b(year-table) { 4 | font-size: 12px; 5 | margin: -1px; 6 | border-collapse: collapse; 7 | 8 | .el-icon { 9 | color: $--datepicker-icon-color; 10 | } 11 | 12 | td { 13 | text-align: center; 14 | padding: 20px 3px; 15 | cursor: pointer; 16 | 17 | &.today { 18 | .cell { 19 | color: $--color-primary; 20 | font-weight: bold; 21 | } 22 | } 23 | 24 | &.disabled .cell { 25 | background-color: $--background-color-base; 26 | cursor: not-allowed; 27 | color: $--color-text-placeholder; 28 | 29 | &:hover { 30 | color: $--color-text-placeholder; 31 | } 32 | } 33 | 34 | .cell { 35 | width: 48px; 36 | height: 32px; 37 | display: block; 38 | line-height: 32px; 39 | color: $--datepicker-font-color; 40 | margin: 0 auto; 41 | 42 | &:hover { 43 | color: $--datepicker-hover-font-color; 44 | } 45 | } 46 | 47 | &.current:not(.disabled) .cell { 48 | color: $--datepicker-active-color; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/dialog.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/utils"; 3 | @import "common/var"; 4 | @import "common/popup"; 5 | 6 | @include b(dialog) { 7 | position: relative; 8 | margin: 0 auto 50px; 9 | background: $--dialog-background-color; 10 | border-radius: $--border-radius-small; 11 | box-shadow: $--dialog-box-shadow; 12 | box-sizing: border-box; 13 | width: 50%; 14 | 15 | @include when(fullscreen) { 16 | width: 100%; 17 | margin-top: 0; 18 | margin-bottom: 0; 19 | height: 100%; 20 | overflow: auto; 21 | } 22 | 23 | @include e(wrapper) { 24 | position: fixed; 25 | top: 0; 26 | right: 0; 27 | bottom: 0; 28 | left: 0; 29 | overflow: auto; 30 | margin: 0; 31 | } 32 | 33 | @include e(header) { 34 | padding: $--dialog-padding-primary; 35 | padding-bottom: 10px; 36 | } 37 | 38 | @include e(headerbtn) { 39 | position: absolute; 40 | top: $--dialog-padding-primary; 41 | right: $--dialog-padding-primary; 42 | padding: 0; 43 | background: transparent; 44 | border: none; 45 | outline: none; 46 | cursor: pointer; 47 | font-size: $--message-close-size; 48 | 49 | .el-dialog__close { 50 | color: $--color-info; 51 | } 52 | 53 | &:focus, &:hover { 54 | .el-dialog__close { 55 | color: $--color-primary; 56 | } 57 | } 58 | } 59 | 60 | @include e(title) { 61 | line-height: $--dialog-font-line-height; 62 | font-size: $--dialog-title-font-size; 63 | color: $--color-text-primary; 64 | } 65 | 66 | @include e(body) { 67 | padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary; 68 | color: $--color-text-regular; 69 | font-size: $--dialog-content-font-size; 70 | word-break: break-all; 71 | } 72 | 73 | @include e(footer) { 74 | padding: $--dialog-padding-primary; 75 | padding-top: 10px; 76 | text-align: right; 77 | box-sizing: border-box; 78 | } 79 | 80 | // 内容居中布局 81 | @include m(center) { 82 | text-align: center; 83 | 84 | @include e(body) { 85 | text-align: initial; 86 | padding: 25px ($--dialog-padding-primary + 5px) 30px; 87 | } 88 | 89 | @include e(footer) { 90 | text-align: inherit; 91 | } 92 | } 93 | } 94 | 95 | .dialog-fade-enter-active { 96 | animation: dialog-fade-in .3s; 97 | } 98 | 99 | .dialog-fade-leave-active { 100 | animation: dialog-fade-out .3s; 101 | } 102 | 103 | @keyframes dialog-fade-in { 104 | 0% { 105 | transform: translate3d(0, -20px, 0); 106 | opacity: 0; 107 | } 108 | 100% { 109 | transform: translate3d(0, 0, 0); 110 | opacity: 1; 111 | } 112 | } 113 | 114 | @keyframes dialog-fade-out { 115 | 0% { 116 | transform: translate3d(0, 0, 0); 117 | opacity: 1; 118 | } 119 | 100% { 120 | transform: translate3d(0, -20px, 0); 121 | opacity: 0; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/display.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | @import "mixins/mixins"; 3 | 4 | .hidden { 5 | @each $break-point-name, $value in $--breakpoints-spec { 6 | &-#{$break-point-name} { 7 | @include res($break-point-name, $--breakpoints-spec) { 8 | display: none !important; 9 | } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/divider.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | @import "mixins/mixins"; 3 | 4 | @include b(divider) { 5 | background-color: $--border-color-base; 6 | position: relative; 7 | 8 | @include m(horizontal) { 9 | display: block; 10 | height: 1px; 11 | width: 100%; 12 | margin: 24px 0; 13 | } 14 | 15 | @include m(vertical) { 16 | display: inline-block; 17 | width: 1px; 18 | height: 1em; 19 | margin: 0 8px; 20 | vertical-align: middle; 21 | position: relative; 22 | } 23 | 24 | @include e(text) { 25 | position: absolute; 26 | background-color: $--color-white; 27 | padding: 0 20px; 28 | font-weight: 500; 29 | color: $--color-text-primary; 30 | font-size: 14px; 31 | 32 | @include when(left) { 33 | left: 20px; 34 | transform: translateY(-50%); 35 | } 36 | 37 | @include when(center) { 38 | left: 50%; 39 | transform: translateX(-50%) translateY(-50%); 40 | } 41 | 42 | @include when(right) { 43 | right: 20px; 44 | transform: translateY(-50%); 45 | } 46 | } 47 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/dropdown-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/dropdown-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/dropdown-menu.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/dropdown-menu.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/fonts/element-icons.ttf -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/fonts/element-icons.woff -------------------------------------------------------------------------------- /packages/theme-chalk/src/footer.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(footer) { 5 | padding: $--footer-padding; 6 | box-sizing: border-box; 7 | flex-shrink: 0; 8 | } 9 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/form-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/form-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/header.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(header) { 5 | padding: $--header-padding; 6 | box-sizing: border-box; 7 | flex-shrink: 0; 8 | } 9 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/image.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | %size { 5 | width: 100%; 6 | height: 100%; 7 | } 8 | 9 | @include b(image) { 10 | position: relative; 11 | display: inline-block; 12 | overflow: hidden; 13 | 14 | @include e(inner) { 15 | @extend %size; 16 | vertical-align: top; 17 | 18 | @include m(center) { 19 | position: relative; 20 | top: 50%; 21 | left: 50%; 22 | transform: translate(-50%, -50%); 23 | display: block; 24 | } 25 | } 26 | 27 | @include e(placeholder) { 28 | @extend %size; 29 | background: $--background-color-base; 30 | } 31 | 32 | @include e(error) { 33 | @extend %size; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | font-size: 14px; 38 | background: $--background-color-base; 39 | color: $--color-text-placeholder; 40 | vertical-align: middle; 41 | } 42 | 43 | @include e(preview) { 44 | cursor: pointer; 45 | } 46 | } 47 | 48 | 49 | @include b(image-viewer) { 50 | 51 | 52 | @include e(wrapper) { 53 | position: fixed; 54 | top: 0; 55 | right: 0; 56 | bottom: 0; 57 | left: 0; 58 | } 59 | 60 | @include e(btn) { 61 | position: absolute; 62 | z-index: 1; 63 | display: flex; 64 | align-items: center; 65 | justify-content: center; 66 | border-radius: 50%; 67 | opacity: .8; 68 | cursor: pointer; 69 | box-sizing: border-box; 70 | user-select: none; 71 | } 72 | 73 | @include e(close) { 74 | top: 40px; 75 | right: 40px; 76 | width: 40px; 77 | height: 40px; 78 | font-size: 40px; 79 | } 80 | 81 | @include e(canvas) { 82 | width: 100%; 83 | height: 100%; 84 | display: flex; 85 | justify-content: center; 86 | align-items: center; 87 | } 88 | 89 | @include e(actions) { 90 | left: 50%; 91 | bottom: 30px; 92 | transform: translateX(-50%); 93 | width: 282px; 94 | height: 44px; 95 | padding: 0 23px; 96 | background-color: #606266; 97 | border-color: #fff; 98 | border-radius: 22px; 99 | 100 | @include e(actions__inner) { 101 | width: 100%; 102 | height: 100%; 103 | text-align: justify; 104 | cursor: default; 105 | font-size: 23px; 106 | color: #fff; 107 | display: flex; 108 | align-items: center; 109 | justify-content: space-around; 110 | } 111 | } 112 | 113 | @include e(prev){ 114 | top: 50%; 115 | transform: translateY(-50%); 116 | width: 44px; 117 | height: 44px; 118 | font-size: 24px; 119 | color: #fff; 120 | background-color: #606266; 121 | border-color: #fff; 122 | left: 40px; 123 | } 124 | 125 | @include e(next){ 126 | top: 50%; 127 | transform: translateY(-50%); 128 | width: 44px; 129 | height: 44px; 130 | font-size: 24px; 131 | color: #fff; 132 | background-color: #606266; 133 | border-color: #fff; 134 | right: 40px; 135 | text-indent: 2px; 136 | } 137 | 138 | @include e(mask) { 139 | position: absolute; 140 | width: 100%; 141 | height: 100%; 142 | top: 0; 143 | left: 0; 144 | opacity: .5; 145 | background: #000; 146 | } 147 | } 148 | 149 | .viewer-fade-enter-active { 150 | animation: viewer-fade-in .3s; 151 | } 152 | 153 | .viewer-fade-leave-active { 154 | animation: viewer-fade-out .3s; 155 | } 156 | 157 | @keyframes viewer-fade-in { 158 | 0% { 159 | transform: translate3d(0, -20px, 0); 160 | opacity: 0; 161 | } 162 | 100% { 163 | transform: translate3d(0, 0, 0); 164 | opacity: 1; 165 | } 166 | } 167 | 168 | @keyframes viewer-fade-out { 169 | 0% { 170 | transform: translate3d(0, 0, 0); 171 | opacity: 1; 172 | } 173 | 100% { 174 | transform: translate3d(0, -20px, 0); 175 | opacity: 0; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base.scss"; 2 | @import "./alert.scss"; 3 | @import "./avatar.scss"; 4 | @import "./backtop.scss"; 5 | @import "./badge.scss"; 6 | @import "./breadcrumb.scss"; 7 | @import "./breadcrumb-item.scss"; 8 | @import "./button.scss"; 9 | @import "./button-group.scss"; 10 | @import "./card.scss"; 11 | @import "./col.scss"; 12 | @import "./divider.scss"; 13 | @import "./input.scss"; 14 | @import "./input-number.scss"; 15 | @import "./link.scss"; 16 | @import "./progress.scss"; 17 | @import "./row.scss"; 18 | @import "./timeline.scss"; 19 | @import "./timeline-item.scss"; 20 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/infinite-scroll.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/infinite-scroll.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/infiniteScroll.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/infiniteScroll.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/link.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | $typeMap: ( 5 | primary: $--link-primary-font-color, 6 | danger: $--link-danger-font-color, 7 | success: $--link-success-font-color, 8 | warning: $--link-warning-font-color, 9 | info: $--link-info-font-color); 10 | 11 | @include b(link) { 12 | display: inline-flex; 13 | flex-direction: row; 14 | align-items: center; 15 | justify-content: center; 16 | vertical-align: middle; 17 | position: relative; 18 | text-decoration: none; 19 | outline: none; 20 | cursor: pointer; 21 | padding: 0; 22 | font-size: $--link-font-size; 23 | font-weight: $--link-font-weight; 24 | 25 | @include when(underline) { 26 | &:hover:after { 27 | content: ""; 28 | position: absolute; 29 | left: 0; 30 | right: 0; 31 | height: 0; 32 | bottom: 0; 33 | border-bottom: 1px solid $--link-default-active-color 34 | } 35 | } 36 | 37 | @include when(disabled) { 38 | cursor: not-allowed; 39 | } 40 | 41 | & [class*="el-icon-"] { 42 | & + span { 43 | margin-left: 5px; 44 | } 45 | } 46 | 47 | 48 | &.el-link--default { 49 | color: $--link-default-font-color; 50 | &:hover { 51 | color: $--link-default-active-color 52 | } 53 | &:after { 54 | border-color: $--link-default-active-color 55 | } 56 | @include when(disabled) { 57 | color: $--link-disabled-font-color 58 | } 59 | } 60 | 61 | @each $type, $primaryColor in $typeMap { 62 | &.el-link--#{$type} { 63 | color: $primaryColor; 64 | &:hover { 65 | color: mix($primaryColor, $--color-white, 80%) 66 | } 67 | &:after { 68 | border-color: $primaryColor 69 | } 70 | @include when(disabled) { 71 | color: mix($primaryColor, $--color-white, 50%) 72 | } 73 | @include when(underline) { 74 | &:hover:after { 75 | border-color: $primaryColor 76 | } 77 | } 78 | } 79 | } 80 | 81 | } 82 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/loading.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(loading-parent) { 5 | @include m(relative) { 6 | position: relative !important; 7 | } 8 | 9 | @include m(hidden) { 10 | overflow: hidden !important; 11 | } 12 | } 13 | 14 | @include b(loading-mask) { 15 | position: absolute; 16 | z-index: 2000; 17 | background-color: rgba(255, 255, 255, .9); 18 | margin: 0; 19 | top: 0; 20 | right: 0; 21 | bottom: 0; 22 | left: 0; 23 | transition: opacity 0.3s; 24 | 25 | @include when(fullscreen) { 26 | position: fixed; 27 | 28 | .el-loading-spinner { 29 | margin-top: #{- $--loading-fullscreen-spinner-size / 2}; 30 | 31 | .circular { 32 | height: $--loading-fullscreen-spinner-size; 33 | width: $--loading-fullscreen-spinner-size; 34 | } 35 | } 36 | } 37 | } 38 | 39 | @include b(loading-spinner) { 40 | top: 50%; 41 | margin-top: #{- $--loading-spinner-size / 2}; 42 | width: 100%; 43 | text-align: center; 44 | position: absolute; 45 | 46 | .el-loading-text { 47 | color: $--color-primary; 48 | margin: 3px 0; 49 | font-size: 14px; 50 | } 51 | 52 | .circular { 53 | height: $--loading-spinner-size; 54 | width: $--loading-spinner-size; 55 | animation: loading-rotate 2s linear infinite; 56 | } 57 | 58 | .path { 59 | animation: loading-dash 1.5s ease-in-out infinite; 60 | stroke-dasharray: 90, 150; 61 | stroke-dashoffset: 0; 62 | stroke-width: 2; 63 | stroke: $--color-primary; 64 | stroke-linecap: round; 65 | } 66 | 67 | i { 68 | color: $--color-primary; 69 | } 70 | } 71 | 72 | .el-loading-fade-enter, 73 | .el-loading-fade-leave-active { 74 | opacity: 0; 75 | } 76 | 77 | @keyframes loading-rotate { 78 | 100% { 79 | transform: rotate(360deg); 80 | } 81 | } 82 | 83 | @keyframes loading-dash { 84 | 0% { 85 | stroke-dasharray: 1, 200; 86 | stroke-dashoffset: 0; 87 | } 88 | 50% { 89 | stroke-dasharray: 90, 150; 90 | stroke-dashoffset: -40px; 91 | } 92 | 100% { 93 | stroke-dasharray: 90, 150; 94 | stroke-dashoffset: -120px; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/main.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(main) { 5 | // IE11 supports the
element partially https://caniuse.com/#search=main 6 | display: block; 7 | flex: 1; 8 | flex-basis: auto; 9 | overflow: auto; 10 | box-sizing: border-box; 11 | padding: $--main-padding; 12 | } 13 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/menu-item-group.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/menu-item-group.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/menu-item.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/menu-item.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/message.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(message) { 5 | min-width: $--message-min-width; 6 | box-sizing: border-box; 7 | border-radius: $--border-radius-base; 8 | border-width: $--border-width-base; 9 | border-style: $--border-style-base; 10 | border-color: $--border-color-lighter; 11 | position: fixed; 12 | left: 50%; 13 | top: 20px; 14 | transform: translateX(-50%); 15 | background-color: $--message-background-color; 16 | transition: opacity 0.3s, transform .4s, top 0.4s; 17 | overflow: hidden; 18 | padding: $--message-padding; 19 | display: flex; 20 | align-items: center; 21 | 22 | @include when(center) { 23 | justify-content: center; 24 | } 25 | 26 | @include when(closable) { 27 | .el-message__content { 28 | padding-right: 16px; 29 | } 30 | } 31 | 32 | p { 33 | margin: 0; 34 | } 35 | 36 | @include m(info) { 37 | .el-message__content { 38 | color: $--message-info-font-color; 39 | } 40 | } 41 | 42 | @include m(success) { 43 | background-color: $--color-success-lighter; 44 | border-color: $--color-success-light; 45 | 46 | .el-message__content { 47 | color: $--message-success-font-color; 48 | } 49 | } 50 | 51 | @include m(warning) { 52 | background-color: $--color-warning-lighter; 53 | border-color: $--color-warning-light; 54 | 55 | .el-message__content { 56 | color: $--message-warning-font-color; 57 | } 58 | } 59 | 60 | @include m(error) { 61 | background-color: $--color-danger-lighter; 62 | border-color: $--color-danger-light; 63 | 64 | .el-message__content { 65 | color: $--message-danger-font-color; 66 | } 67 | } 68 | 69 | @include e(icon) { 70 | margin-right: 10px; 71 | } 72 | 73 | @include e(content) { 74 | padding: 0; 75 | font-size: 14px; 76 | line-height: 1; 77 | &:focus { 78 | outline-width: 0; 79 | } 80 | } 81 | 82 | @include e(closeBtn) { 83 | position: absolute; 84 | top: 50%; 85 | right: 15px; 86 | transform: translateY(-50%); 87 | cursor: pointer; 88 | color: $--message-close-icon-color; 89 | font-size: $--message-close-size; 90 | 91 | &:focus { 92 | outline-width: 0; 93 | } 94 | &:hover { 95 | color: $--message-close-hover-color; 96 | } 97 | } 98 | 99 | & .el-icon-success { 100 | color: $--message-success-font-color; 101 | } 102 | 103 | & .el-icon-error { 104 | color: $--message-danger-font-color; 105 | } 106 | 107 | & .el-icon-info { 108 | color: $--message-info-font-color; 109 | } 110 | 111 | & .el-icon-warning { 112 | color: $--message-warning-font-color; 113 | } 114 | } 115 | 116 | .el-message-fade-enter, 117 | .el-message-fade-leave-active { 118 | opacity: 0; 119 | transform: translate(-50%, -100%); 120 | } 121 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/_button.scss: -------------------------------------------------------------------------------- 1 | @import "../common/var"; 2 | @mixin button-plain($color) { 3 | color: $color; 4 | background: mix($--color-white, $color, 90%); 5 | border-color: mix($--color-white, $color, 60%); 6 | 7 | &:hover, 8 | &:focus { 9 | background: $color; 10 | border-color: $color; 11 | color: $--color-white; 12 | } 13 | 14 | &:active { 15 | background: mix($--color-black, $color, $--button-active-shade-percent); 16 | border-color: mix($--color-black, $color, $--button-active-shade-percent); 17 | color: $--color-white; 18 | outline: none; 19 | } 20 | 21 | &.is-disabled { 22 | &, 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | color: mix($--color-white, $color, 40%); 27 | background-color: mix($--color-white, $color, 90%); 28 | border-color: mix($--color-white, $color, 80%); 29 | } 30 | } 31 | } 32 | 33 | @mixin button-variant($color, $background-color, $border-color) { 34 | color: $color; 35 | background-color: $background-color; 36 | border-color: $border-color; 37 | 38 | &:hover, 39 | &:focus { 40 | background: mix($--color-white, $background-color, $--button-hover-tint-percent); 41 | border-color: mix($--color-white, $border-color, $--button-hover-tint-percent); 42 | color: $color; 43 | } 44 | 45 | &:active { 46 | background: mix($--color-black, $background-color, $--button-active-shade-percent); 47 | border-color: mix($--color-black, $border-color, $--button-active-shade-percent); 48 | color: $color; 49 | outline: none; 50 | } 51 | 52 | &.is-active { 53 | background: mix($--color-black, $background-color, $--button-active-shade-percent); 54 | border-color: mix($--color-black, $border-color, $--button-active-shade-percent); 55 | color: $color; 56 | } 57 | 58 | &.is-disabled { 59 | &, 60 | &:hover, 61 | &:focus, 62 | &:active { 63 | color: $--color-white; 64 | background-color: mix($background-color, $--color-white); 65 | border-color: mix($border-color, $--color-white); 66 | } 67 | } 68 | 69 | &.is-plain { 70 | @include button-plain($background-color); 71 | } 72 | } 73 | 74 | @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { 75 | padding: $padding-vertical $padding-horizontal; 76 | font-size: $font-size; 77 | border-radius: $border-radius; 78 | &.is-round { 79 | padding: $padding-vertical $padding-horizontal; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'el'; 2 | $element-separator: '__'; 3 | $modifier-separator: '--'; 4 | $state-prefix: 'is-'; 5 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/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 | } 45 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/utils.scss: -------------------------------------------------------------------------------- 1 | @mixin utils-user-select($value) { 2 | -moz-user-select: $value; 3 | -webkit-user-select: $value; 4 | -ms-user-select: $value; 5 | } 6 | 7 | @mixin utils-clearfix { 8 | $selector: &; 9 | 10 | @at-root { 11 | #{$selector}::before, 12 | #{$selector}::after { 13 | display: table; 14 | content: ""; 15 | } 16 | #{$selector}::after { 17 | clear: both 18 | } 19 | } 20 | } 21 | 22 | @mixin utils-vertical-center { 23 | $selector: &; 24 | 25 | @at-root { 26 | #{$selector}::after { 27 | display: inline-block; 28 | content: ""; 29 | height: 100%; 30 | vertical-align: middle 31 | } 32 | } 33 | } 34 | 35 | @mixin utils-ellipsis { 36 | overflow: hidden; 37 | text-overflow: ellipsis; 38 | white-space: nowrap; 39 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/notification.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(notification) { 5 | display: flex; 6 | width: $--notification-width; 7 | padding: $--notification-padding; 8 | border-radius: $--notification-radius; 9 | box-sizing: border-box; 10 | border: 1px solid $--notification-border-color; 11 | position: fixed; 12 | background-color: $--color-white; 13 | box-shadow: $--notification-shadow; 14 | transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s; 15 | overflow: hidden; 16 | 17 | &.right { 18 | right: 16px; 19 | } 20 | 21 | &.left { 22 | left: 16px; 23 | } 24 | 25 | @include e(group) { 26 | margin-left: $--notification-group-margin-left; 27 | margin-right: $--notification-group-margin-right; 28 | } 29 | 30 | @include e(title) { 31 | font-weight: bold; 32 | font-size: $--notification-title-font-size; 33 | color: $--notification-title-color; 34 | margin: 0; 35 | } 36 | 37 | @include e(content) { 38 | font-size: $--notification-content-font-size; 39 | line-height: 21px; 40 | margin: 6px 0 0 0; 41 | color: $--notification-content-color; 42 | text-align: justify; 43 | 44 | p { 45 | margin: 0; 46 | } 47 | } 48 | 49 | @include e(icon) { 50 | height: $--notification-icon-size; 51 | width: $--notification-icon-size; 52 | font-size: $--notification-icon-size; 53 | } 54 | 55 | @include e(closeBtn) { 56 | position: absolute; 57 | top: 18px; 58 | right: 15px; 59 | cursor: pointer; 60 | color: $--notification-close-color; 61 | font-size: $--notification-close-font-size; 62 | 63 | &:hover { 64 | color: $--notification-close-hover-color; 65 | } 66 | } 67 | 68 | .el-icon-success { 69 | color: $--notification-success-icon-color; 70 | } 71 | 72 | .el-icon-error { 73 | color: $--notification-danger-icon-color; 74 | } 75 | 76 | .el-icon-info { 77 | color: $--notification-info-icon-color; 78 | } 79 | 80 | .el-icon-warning { 81 | color: $--notification-warning-icon-color; 82 | } 83 | } 84 | 85 | .el-notification-fade-enter { 86 | &.right { 87 | right: 0; 88 | transform: translateX(100%); 89 | } 90 | 91 | &.left { 92 | left: 0; 93 | transform: translateX(-100%); 94 | } 95 | } 96 | 97 | .el-notification-fade-leave-active { 98 | opacity: 0; 99 | } 100 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/option-group.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(select-group) { 5 | $gap: 20px; 6 | 7 | margin: 0; 8 | padding: 0; 9 | 10 | @include e(wrap) { 11 | position: relative; 12 | list-style: none; 13 | margin: 0; 14 | padding: 0; 15 | 16 | &:not(:last-of-type) { 17 | padding-bottom: 24px; 18 | 19 | &::after { 20 | content: ''; 21 | position: absolute; 22 | display: block; 23 | left: $gap; 24 | right: $gap; 25 | bottom: 12px; 26 | height: 1px; 27 | background: $--border-color-light; 28 | } 29 | } 30 | } 31 | 32 | @include e(title) { 33 | padding-left: $gap; 34 | font-size: $--select-group-font-size; 35 | color: $--select-group-color; 36 | line-height: $--select-group-height; 37 | } 38 | 39 | & .el-select-dropdown__item { 40 | padding-left: $gap; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/option.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(select-dropdown) { 5 | @include e(item) { 6 | font-size: $--select-font-size; 7 | padding: 0 20px; 8 | position: relative; 9 | white-space: nowrap; 10 | overflow: hidden; 11 | text-overflow: ellipsis; 12 | color: $--select-option-color; 13 | height: $--select-option-height; 14 | line-height: $--select-option-height; 15 | box-sizing: border-box; 16 | cursor: pointer; 17 | 18 | @include when(disabled) { 19 | color: $--select-option-disabled-color; 20 | cursor: not-allowed; 21 | 22 | &:hover { 23 | background-color: $--color-white; 24 | } 25 | } 26 | 27 | &.hover, &:hover { 28 | background-color: $--select-option-hover-background; 29 | } 30 | 31 | &.selected { 32 | color: $--select-option-selected-font-color; 33 | font-weight: bold; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/page-header.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(page-header) { 5 | display: flex; 6 | line-height: 24px; 7 | 8 | @include e(left) { 9 | display: flex; 10 | cursor: pointer; 11 | margin-right: 40px; 12 | position: relative; 13 | 14 | &::after { 15 | content: ""; 16 | position: absolute; 17 | width: 1px; 18 | height: 16px; 19 | right: -20px; 20 | top: 50%; 21 | transform: translateY(-50%); 22 | background-color: $--border-color-base; 23 | } 24 | 25 | .el-icon-back { 26 | font-size: 18px; 27 | margin-right: 6px; 28 | align-self: center; 29 | } 30 | 31 | @include e(title) { 32 | font-size: 14px; 33 | font-weight: 500; 34 | } 35 | } 36 | 37 | @include e(content) { 38 | font-size: 18px; 39 | color: $--color-text-primary; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/popconfirm.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(popconfirm) { 5 | @include e(main) { 6 | display: flex; 7 | align-items: center; 8 | } 9 | @include e(icon) { 10 | margin-right: 5px; 11 | } 12 | @include e(action) { 13 | text-align: right; 14 | margin: 0 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/popover.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "./popper"; 4 | 5 | @include b(popover) { 6 | position: absolute; 7 | background: $--popover-background-color; 8 | min-width: 150px; 9 | border-radius: 4px; 10 | border: 1px solid $--popover-border-color; 11 | padding: $--popover-padding; 12 | z-index: $--index-popper; 13 | color: $--color-text-regular; 14 | line-height: 1.4; 15 | text-align: justify; 16 | font-size: $--popover-font-size; 17 | box-shadow: $--box-shadow-light; 18 | word-break: break-all; 19 | 20 | @include m(plain) { 21 | padding: $--popover-padding-large; 22 | } 23 | 24 | @include e(title) { 25 | color: $--popover-title-font-color; 26 | font-size: $--popover-title-font-size; 27 | line-height: 1; 28 | margin-bottom: 12px; 29 | } 30 | 31 | @include e(reference) { 32 | &:focus:not(.focusing), &:focus:hover { 33 | outline-width: 0; 34 | } 35 | } 36 | 37 | &:focus:active, &:focus { 38 | outline-width: 0; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/popper.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(popper) { 5 | .popper__arrow, 6 | .popper__arrow::after { 7 | position: absolute; 8 | display: block; 9 | width: 0; 10 | height: 0; 11 | border-color: transparent; 12 | border-style: solid; 13 | } 14 | 15 | .popper__arrow { 16 | border-width: $--popover-arrow-size; 17 | filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)) 18 | } 19 | 20 | .popper__arrow::after { 21 | content: " "; 22 | border-width: $--popover-arrow-size; 23 | } 24 | 25 | &[x-placement^="top"] { 26 | margin-bottom: #{$--popover-arrow-size + 6}; 27 | } 28 | 29 | &[x-placement^="top"] .popper__arrow { 30 | bottom: -$--popover-arrow-size; 31 | left: 50%; 32 | margin-right: #{$--tooltip-arrow-size / 2}; 33 | border-top-color: $--popover-border-color; 34 | border-bottom-width: 0; 35 | 36 | &::after { 37 | bottom: 1px; 38 | margin-left: -$--popover-arrow-size; 39 | border-top-color: $--popover-background-color; 40 | border-bottom-width: 0; 41 | } 42 | } 43 | 44 | &[x-placement^="bottom"] { 45 | margin-top: #{$--popover-arrow-size + 6}; 46 | } 47 | 48 | &[x-placement^="bottom"] .popper__arrow { 49 | top: -$--popover-arrow-size; 50 | left: 50%; 51 | margin-right: #{$--tooltip-arrow-size / 2}; 52 | border-top-width: 0; 53 | border-bottom-color: $--popover-border-color; 54 | 55 | &::after { 56 | top: 1px; 57 | margin-left: -$--popover-arrow-size; 58 | border-top-width: 0; 59 | border-bottom-color: $--popover-background-color; 60 | } 61 | } 62 | 63 | &[x-placement^="right"] { 64 | margin-left: #{$--popover-arrow-size + 6}; 65 | } 66 | 67 | &[x-placement^="right"] .popper__arrow { 68 | top: 50%; 69 | left: -$--popover-arrow-size; 70 | margin-bottom: #{$--tooltip-arrow-size / 2}; 71 | border-right-color: $--popover-border-color; 72 | border-left-width: 0; 73 | 74 | &::after { 75 | bottom: -$--popover-arrow-size; 76 | left: 1px; 77 | border-right-color: $--popover-background-color; 78 | border-left-width: 0; 79 | } 80 | } 81 | 82 | &[x-placement^="left"] { 83 | margin-right: #{$--popover-arrow-size + 6}; 84 | } 85 | 86 | &[x-placement^="left"] .popper__arrow { 87 | top: 50%; 88 | right: -$--popover-arrow-size; 89 | margin-bottom: #{$--tooltip-arrow-size / 2}; 90 | border-right-width: 0; 91 | border-left-color: $--popover-border-color; 92 | 93 | &::after { 94 | right: 1px; 95 | bottom: -$--popover-arrow-size; 96 | margin-left: -$--popover-arrow-size; 97 | border-right-width: 0; 98 | border-left-color: $--popover-background-color; 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/progress.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/utils"; 3 | @import "common/var"; 4 | 5 | @include b(progress) { 6 | position: relative; 7 | line-height: 1; 8 | 9 | @include e(text) { 10 | font-size:14px; 11 | color: $--color-text-regular; 12 | display: inline-block; 13 | vertical-align: middle; 14 | margin-left: 10px; 15 | line-height: 1; 16 | 17 | i { 18 | vertical-align: middle; 19 | display: block; 20 | } 21 | } 22 | 23 | @include m((circle,dashboard)) { 24 | display: inline-block; 25 | 26 | .el-progress__text { 27 | position: absolute; 28 | top: 50%; 29 | left: 0; 30 | width: 100%; 31 | text-align: center; 32 | margin: 0; 33 | transform: translate(0, -50%); 34 | 35 | i { 36 | vertical-align: middle; 37 | display: inline-block; 38 | } 39 | } 40 | } 41 | 42 | 43 | @include m(without-text) { 44 | .el-progress__text { 45 | display: none; 46 | } 47 | 48 | .el-progress-bar { 49 | padding-right: 0; 50 | margin-right: 0; 51 | display: block; 52 | } 53 | } 54 | 55 | @include m(text-inside) { 56 | .el-progress-bar { 57 | padding-right: 0; 58 | margin-right: 0; 59 | } 60 | } 61 | 62 | @include when(success) { 63 | .el-progress-bar__inner { 64 | background-color: $--color-success; 65 | } 66 | 67 | .el-progress__text { 68 | color: $--color-success; 69 | } 70 | } 71 | 72 | @include when(warning) { 73 | .el-progress-bar__inner { 74 | background-color: $--color-warning; 75 | } 76 | 77 | .el-progress__text { 78 | color: $--color-warning; 79 | } 80 | } 81 | 82 | @include when(exception) { 83 | .el-progress-bar__inner { 84 | background-color: $--color-danger; 85 | } 86 | 87 | .el-progress__text { 88 | color: $--color-danger; 89 | } 90 | } 91 | } 92 | 93 | @include b(progress-bar) { 94 | padding-right: 50px; 95 | display: inline-block; 96 | vertical-align: middle; 97 | width: 100%; 98 | margin-right: -55px; 99 | box-sizing: border-box; 100 | 101 | @include e(outer) { 102 | height: 6px; 103 | border-radius: 100px; 104 | background-color: $--border-color-lighter; 105 | overflow: hidden; 106 | position: relative; 107 | vertical-align: middle; 108 | } 109 | @include e(inner) { 110 | position: absolute; 111 | left: 0; 112 | top: 0; 113 | height: 100%; 114 | background-color: $--color-primary; 115 | text-align: right; 116 | border-radius: 100px; 117 | line-height: 1; 118 | white-space: nowrap; 119 | transition: width 0.6s ease; 120 | 121 | @include utils-vertical-center; 122 | } 123 | 124 | @include e(innerText) { 125 | display: inline-block; 126 | vertical-align: middle; 127 | color: $--color-white; 128 | font-size: 12px; 129 | margin: 0 5px; 130 | } 131 | } 132 | 133 | @keyframes progress { 134 | 0% { 135 | background-position: 0 0; 136 | } 137 | 138 | 100% { 139 | background-position: 32px 0; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/radio-button.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/_button"; 3 | @import "common/var"; 4 | 5 | @include b(radio-button) { 6 | position: relative; 7 | display: inline-block; 8 | outline: none; 9 | 10 | @include e(inner) { 11 | display: inline-block; 12 | line-height: 1; 13 | white-space: nowrap; 14 | vertical-align: middle; 15 | background: $--button-default-background-color; 16 | border: $--border-base; 17 | font-weight: $--button-font-weight; 18 | border-left: 0; 19 | color: $--button-default-font-color; 20 | -webkit-appearance: none; 21 | text-align: center; 22 | box-sizing: border-box; 23 | outline: none; 24 | margin: 0; 25 | position: relative; 26 | cursor: pointer; 27 | transition: $--all-transition; 28 | 29 | @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0); 30 | 31 | &:hover { 32 | color: $--color-primary; 33 | } 34 | 35 | & [class*="el-icon-"] { 36 | line-height: 0.9; 37 | 38 | & + span { 39 | margin-left: 5px; 40 | } 41 | } 42 | } 43 | 44 | &:first-child { 45 | .el-radio-button__inner { 46 | border-left: $--border-base; 47 | border-radius: $--border-radius-base 0 0 $--border-radius-base; 48 | box-shadow: none !important; 49 | } 50 | } 51 | 52 | @include e(orig-radio) { 53 | opacity: 0; 54 | outline: none; 55 | position: absolute; 56 | z-index: -1; 57 | 58 | &:checked { 59 | & + .el-radio-button__inner { 60 | color: $--radio-button-checked-font-color; 61 | background-color: $--radio-button-checked-background-color; 62 | border-color: $--radio-button-checked-border-color; 63 | box-shadow: -1px 0 0 0 $--radio-button-checked-border-color; 64 | } 65 | } 66 | 67 | &:disabled { 68 | & + .el-radio-button__inner { 69 | color: $--button-disabled-font-color; 70 | cursor: not-allowed; 71 | background-image: none; 72 | background-color: $--button-disabled-background-color; 73 | border-color: $--button-disabled-border-color; 74 | box-shadow: none; 75 | } 76 | &:checked + .el-radio-button__inner { 77 | background-color: $--radio-button-disabled-checked-fill; 78 | } 79 | } 80 | } 81 | 82 | &:last-child { 83 | .el-radio-button__inner { 84 | border-radius: 0 $--border-radius-base $--border-radius-base 0; 85 | } 86 | } 87 | 88 | &:first-child:last-child { 89 | .el-radio-button__inner { 90 | border-radius: $--border-radius-base; 91 | } 92 | } 93 | 94 | @include m(medium) { 95 | & .el-radio-button__inner { 96 | @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0); 97 | } 98 | } 99 | @include m(small) { 100 | & .el-radio-button__inner { 101 | @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0); 102 | } 103 | } 104 | @include m(mini) { 105 | & .el-radio-button__inner { 106 | @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0); 107 | } 108 | } 109 | 110 | &:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/ 111 | box-shadow: 0 0 2px 2px $--radio-button-checked-border-color; 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/radio-group.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(radio-group) { 5 | display: inline-block; 6 | line-height: 1; 7 | vertical-align: middle; 8 | font-size: 0; 9 | } 10 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/rate.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(rate) { 5 | height: $--rate-height; 6 | line-height: 1; 7 | 8 | &:focus, &:active { 9 | outline-width: 0; 10 | } 11 | 12 | @include e(item) { 13 | display: inline-block; 14 | position: relative; 15 | font-size: 0; 16 | vertical-align: middle; 17 | } 18 | 19 | @include e(icon) { 20 | position: relative; 21 | display: inline-block; 22 | font-size: $--rate-icon-size; 23 | margin-right: $--rate-icon-margin; 24 | color: $--rate-icon-color; 25 | transition: .3s; 26 | &.hover { 27 | transform: scale(1.15); 28 | } 29 | 30 | .path2 { 31 | position: absolute; 32 | left: 0; 33 | top: 0; 34 | } 35 | } 36 | 37 | @include e(decimal) { 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | display: inline-block; 42 | overflow: hidden; 43 | } 44 | 45 | @include e(text) { 46 | font-size: $--rate-font-size; 47 | vertical-align: middle; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/reset.scss: -------------------------------------------------------------------------------- 1 | @import 'common/var'; 2 | 3 | body { 4 | font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; 5 | font-weight: 400; 6 | font-size: $--font-size-base; 7 | color: $--color-black; 8 | -webkit-font-smoothing: antialiased; 9 | } 10 | 11 | a { 12 | color: $--color-primary; 13 | text-decoration: none; 14 | 15 | &:hover, 16 | &:focus { 17 | color: mix($--color-white, $--color-primary, $--button-hover-tint-percent); 18 | } 19 | 20 | &:active { 21 | color: mix($--color-black, $--color-primary, $--button-active-shade-percent); 22 | } 23 | } 24 | 25 | h1, h2, h3, h4, h5, h6 { 26 | color: $--color-text-regular; 27 | font-weight: inherit; 28 | 29 | &:first-child { 30 | margin-top: 0; 31 | } 32 | 33 | &:last-child { 34 | margin-bottom: 0; 35 | } 36 | } 37 | 38 | h1 { 39 | font-size: #{$--font-size-base + 6px}; 40 | } 41 | 42 | h2 { 43 | font-size: #{$--font-size-base + 4px}; 44 | } 45 | 46 | h3 { 47 | font-size: #{$--font-size-base + 2px}; 48 | } 49 | 50 | h4, h5, h6, p { 51 | font-size: inherit; 52 | } 53 | 54 | p { 55 | line-height: 1.8; 56 | 57 | &:first-child { 58 | margin-top: 0; 59 | } 60 | 61 | &:last-child { 62 | margin-bottom: 0; 63 | } 64 | } 65 | 66 | sup, sub { 67 | font-size: #{$--font-size-base - 1px}; 68 | } 69 | 70 | small { 71 | font-size: #{$--font-size-base - 2px}; 72 | } 73 | 74 | hr { 75 | margin-top: 20px; 76 | margin-bottom: 20px; 77 | border: 0; 78 | border-top: 1px solid #eeeeee; 79 | } 80 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/row.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | @import "mixins/mixins"; 3 | @import "mixins/utils"; 4 | 5 | @include b(row) { 6 | position: relative; 7 | box-sizing: border-box; 8 | @include utils-clearfix; 9 | 10 | @include m(flex) { 11 | display: flex; 12 | &:before, 13 | &:after { 14 | display: none; 15 | } 16 | 17 | @include when(justify-center) { 18 | justify-content: center; 19 | } 20 | @include when(justify-end) { 21 | justify-content: flex-end; 22 | } 23 | @include when(justify-space-between) { 24 | justify-content: space-between; 25 | } 26 | @include when(justify-space-around) { 27 | justify-content: space-around; 28 | } 29 | 30 | @include when(align-middle) { 31 | align-items: center; 32 | } 33 | @include when(align-bottom) { 34 | align-items: flex-end; 35 | } 36 | } 37 | 38 | } 39 | 40 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/scrollbar.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(scrollbar) { 5 | overflow: hidden; 6 | position: relative; 7 | 8 | &:hover, 9 | &:active, 10 | &:focus { 11 | > .el-scrollbar__bar { 12 | opacity: 1; 13 | transition: opacity 340ms ease-out; 14 | } 15 | } 16 | 17 | @include e(wrap) { 18 | overflow: scroll; 19 | height: 100%; 20 | 21 | @include m(hidden-default) { 22 | scrollbar-width: none; 23 | &::-webkit-scrollbar { 24 | width: 0; 25 | height: 0; 26 | } 27 | } 28 | } 29 | 30 | @include e(thumb) { 31 | position: relative; 32 | display: block; 33 | width: 0; 34 | height: 0; 35 | cursor: pointer; 36 | border-radius: inherit; 37 | background-color: $--scrollbar-background-color; 38 | transition: .3s background-color; 39 | 40 | &:hover { 41 | background-color: $--scrollbar-hover-background-color; 42 | } 43 | } 44 | 45 | @include e(bar) { 46 | position: absolute; 47 | right: 2px; 48 | bottom: 2px; 49 | z-index: 1; 50 | border-radius: 4px; 51 | opacity: 0; 52 | transition: opacity 120ms ease-out; 53 | 54 | @include when(vertical) { 55 | width: 6px; 56 | top: 2px; 57 | 58 | > div { 59 | width: 100%; 60 | } 61 | } 62 | 63 | @include when(horizontal) { 64 | height: 6px; 65 | left: 2px; 66 | 67 | > div { 68 | height: 100%; 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/select-dropdown.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "./popper"; 4 | 5 | @include b(select-dropdown) { 6 | position: absolute; 7 | z-index: #{$--index-top + 1}; 8 | border: $--select-dropdown-border; 9 | border-radius: $--border-radius-base; 10 | background-color: $--select-dropdown-background; 11 | box-shadow: $--select-dropdown-shadow; 12 | box-sizing: border-box; 13 | margin: 5px 0; 14 | 15 | @include when(multiple) { 16 | & .el-select-dropdown__item.selected { 17 | color: $--select-option-selected-font-color; 18 | background-color: $--select-dropdown-background; 19 | 20 | &.hover { 21 | background-color: $--select-option-hover-background; 22 | } 23 | 24 | &::after { 25 | position: absolute; 26 | right: 20px; 27 | font-family: 'element-icons'; 28 | content: "\e6da"; 29 | font-size: 12px; 30 | font-weight: bold; 31 | -webkit-font-smoothing: antialiased; 32 | -moz-osx-font-smoothing: grayscale; 33 | } 34 | } 35 | } 36 | 37 | .el-scrollbar.is-empty .el-select-dropdown__list{ 38 | padding: 0; 39 | } 40 | } 41 | 42 | @include b(select-dropdown__empty) { 43 | padding: $--select-dropdown-empty-padding; 44 | margin: 0; 45 | text-align: center; 46 | color: $--select-dropdown-empty-color; 47 | font-size: $--select-font-size; 48 | } 49 | 50 | @include b(select-dropdown__wrap) { 51 | max-height: $--select-dropdown-max-height; 52 | } 53 | 54 | @include b(select-dropdown__list) { 55 | list-style: none; 56 | padding: $--select-dropdown-padding; 57 | margin: 0; 58 | box-sizing: border-box; 59 | } 60 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/select.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "mixins/utils"; 3 | @import "common/var"; 4 | @import "select-dropdown"; 5 | @import "input"; 6 | @import "tag"; 7 | @import "option"; 8 | @import "option-group"; 9 | @import "scrollbar"; 10 | 11 | @include b(select) { 12 | display: inline-block; 13 | position: relative; 14 | 15 | .el-select__tags 16 | >span { 17 | display: contents; 18 | } 19 | 20 | &:hover { 21 | .el-input__inner { 22 | border-color: $--select-border-color-hover; 23 | } 24 | } 25 | 26 | .el-input__inner { 27 | cursor: pointer; 28 | padding-right: 35px; 29 | 30 | &:focus { 31 | border-color: $--select-input-focus-border-color; 32 | } 33 | } 34 | 35 | .el-input { 36 | & .el-select__caret { 37 | color: $--select-input-color; 38 | font-size: $--select-input-font-size; 39 | transition: transform .3s; 40 | transform: rotateZ(180deg); 41 | cursor: pointer; 42 | 43 | @include when(reverse) { 44 | transform: rotateZ(0deg); 45 | } 46 | 47 | @include when(show-close) { 48 | font-size: $--select-font-size; 49 | text-align: center; 50 | transform: rotateZ(180deg); 51 | border-radius: $--border-radius-circle; 52 | color: $--select-input-color; 53 | transition: $--color-transition-base; 54 | 55 | &:hover { 56 | color: $--select-close-hover-color; 57 | } 58 | } 59 | } 60 | 61 | &.is-disabled { 62 | & .el-input__inner { 63 | cursor: not-allowed; 64 | 65 | &:hover { 66 | border-color: $--select-disabled-border; 67 | } 68 | } 69 | } 70 | 71 | &.is-focus .el-input__inner { 72 | border-color: $--select-input-focus-border-color; 73 | } 74 | } 75 | 76 | > .el-input { 77 | display: block; 78 | } 79 | 80 | @include e(input) { 81 | border: none; 82 | outline: none; 83 | padding: 0; 84 | margin-left: 15px; 85 | color: $--select-multiple-input-color; 86 | font-size: $--select-font-size; 87 | appearance: none; 88 | height: 28px; 89 | background-color: transparent; 90 | @include when(mini) { 91 | height: 14px; 92 | } 93 | } 94 | 95 | @include e(close) { 96 | cursor: pointer; 97 | position: absolute; 98 | top: 8px; 99 | z-index: $--index-top; 100 | right: 25px; 101 | color: $--select-input-color; 102 | line-height: 18px; 103 | font-size: $--select-input-font-size; 104 | 105 | &:hover { 106 | color: $--select-close-hover-color; 107 | } 108 | } 109 | 110 | @include e(tags) { 111 | position: absolute; 112 | line-height: normal; 113 | white-space: normal; 114 | z-index: $--index-normal; 115 | top: 50%; 116 | transform: translateY(-50%); 117 | display: flex; 118 | align-items: center; 119 | flex-wrap: wrap; 120 | } 121 | 122 | .el-tag__close { 123 | margin-top: -2px; 124 | } 125 | 126 | .el-tag { 127 | box-sizing: border-box; 128 | border-color: transparent; 129 | margin: 2px 0 2px 6px; 130 | background-color: #f0f2f5; 131 | 132 | &__close.el-icon-close { 133 | background-color: $--color-text-placeholder; 134 | right: -7px; 135 | top: 0; 136 | color: $--color-white; 137 | 138 | &:hover { 139 | background-color: $--color-text-secondary; 140 | } 141 | 142 | &::before { 143 | display: block; 144 | transform: translate(0, .5px); 145 | } 146 | } 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/spinner.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(time-spinner) { 4 | width: 100%; 5 | white-space: nowrap; 6 | } 7 | 8 | @include b(spinner) { 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | @include b(spinner-inner) { 13 | animation: rotate 2s linear infinite; 14 | width: 50px; 15 | height: 50px; 16 | 17 | & .path { 18 | stroke: #ececec; 19 | stroke-linecap: round; 20 | animation: dash 1.5s ease-in-out infinite; 21 | } 22 | 23 | } 24 | 25 | @keyframes rotate { 26 | 100% { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | 31 | @keyframes dash { 32 | 0% { 33 | stroke-dasharray: 1, 150; 34 | stroke-dashoffset: 0; 35 | } 36 | 50% { 37 | stroke-dasharray: 90, 150; 38 | stroke-dashoffset: -35; 39 | } 40 | 100% { 41 | stroke-dasharray: 90, 150; 42 | stroke-dashoffset: -124; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/steps.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | 3 | @include b(steps) { 4 | display: flex; 5 | 6 | @include m(simple) { 7 | padding: 13px 8%; 8 | border-radius: 4px; 9 | background: $--background-color-base; 10 | } 11 | 12 | @include m(horizontal) { 13 | white-space: nowrap; 14 | } 15 | 16 | @include m(vertical) { 17 | height: 100%; 18 | flex-flow: column; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/submenu.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/submenu.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/switch.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(switch) { 5 | display: inline-flex; 6 | align-items: center; 7 | position: relative; 8 | font-size: $--switch-font-size; 9 | line-height: $--switch-height; 10 | height: $--switch-height; 11 | vertical-align: middle; 12 | @include when(disabled) { 13 | & .el-switch__core, 14 | & .el-switch__label { 15 | cursor: not-allowed; 16 | } 17 | } 18 | 19 | @include e(label) { 20 | transition: .2s; 21 | height: $--switch-height; 22 | display: inline-block; 23 | font-size: $--switch-font-size; 24 | font-weight: 500; 25 | cursor: pointer; 26 | vertical-align: middle; 27 | color: $--color-text-primary; 28 | 29 | @include when(active) { 30 | color: $--color-primary; 31 | } 32 | 33 | @include m(left) { 34 | margin-right: 10px; 35 | } 36 | @include m(right) { 37 | margin-left: 10px; 38 | } 39 | & * { 40 | line-height: 1; 41 | font-size: $--switch-font-size; 42 | display: inline-block; 43 | } 44 | } 45 | 46 | @include e(input) { 47 | position: absolute; 48 | width: 0; 49 | height: 0; 50 | opacity: 0; 51 | margin: 0; 52 | } 53 | 54 | @include e(core) { 55 | margin: 0; 56 | display: inline-block; 57 | position: relative; 58 | width: $--switch-width; 59 | height: $--switch-height; 60 | border: 1px solid $--switch-off-color; 61 | outline: none; 62 | border-radius: $--switch-core-border-radius; 63 | box-sizing: border-box; 64 | background: $--switch-off-color; 65 | cursor: pointer; 66 | transition: border-color .3s, background-color .3s; 67 | vertical-align: middle; 68 | 69 | &:after { 70 | content: ""; 71 | position: absolute; 72 | top: 1px; 73 | left: 1px; 74 | border-radius: $--border-radius-circle; 75 | transition: all .3s; 76 | width: $--switch-button-size; 77 | height: $--switch-button-size; 78 | background-color: $--color-white; 79 | } 80 | } 81 | 82 | @include when(checked) { 83 | .el-switch__core { 84 | border-color: $--switch-on-color; 85 | background-color: $--switch-on-color; 86 | &::after { 87 | left: 100%; 88 | margin-left: -$--switch-button-size - 1px; 89 | } 90 | } 91 | } 92 | 93 | @include when(disabled) { 94 | opacity: 0.6; 95 | } 96 | 97 | @include m(wide) { 98 | .el-switch__label { 99 | &.el-switch__label--left { 100 | span { 101 | left: 10px; 102 | } 103 | } 104 | &.el-switch__label--right { 105 | span { 106 | right: 10px; 107 | } 108 | } 109 | } 110 | } 111 | 112 | & .label-fade-enter, 113 | & .label-fade-leave-active { 114 | opacity: 0; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/tab-pane.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a631807682/ele-next/ec5d414bd0093a103dac7005fa51919de8e55b60/packages/theme-chalk/src/tab-pane.scss -------------------------------------------------------------------------------- /packages/theme-chalk/src/table-column.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "checkbox"; 3 | @import "tag"; 4 | @import "common/var"; 5 | 6 | @include b(table-column) { 7 | @include m(selection) { 8 | .cell { 9 | padding-left: 14px; 10 | padding-right: 14px; 11 | } 12 | } 13 | } 14 | 15 | @include b(table-filter) { 16 | border: solid 1px $--border-color-lighter; 17 | border-radius: 2px; 18 | background-color: $--color-white; 19 | box-shadow: $--dropdown-menu-box-shadow; 20 | box-sizing: border-box; 21 | margin: 2px 0; 22 | 23 | /** used for dropdown mode */ 24 | @include e(list) { 25 | padding: 5px 0; 26 | margin: 0; 27 | list-style: none; 28 | min-width: 100px; 29 | } 30 | 31 | @include e(list-item) { 32 | line-height: 36px; 33 | padding: 0 10px; 34 | cursor: pointer; 35 | font-size: $--font-size-base; 36 | 37 | &:hover { 38 | background-color: $--dropdown-menuItem-hover-fill; 39 | color: $--dropdown-menuItem-hover-color; 40 | } 41 | 42 | @include when(active) { 43 | background-color: $--color-primary; 44 | color: $--color-white; 45 | } 46 | } 47 | 48 | @include e(content) { 49 | min-width: 100px; 50 | } 51 | 52 | @include e(bottom) { 53 | border-top: 1px solid $--border-color-lighter; 54 | padding: 8px; 55 | 56 | button { 57 | background: transparent; 58 | border: none; 59 | color: $--color-text-regular; 60 | cursor: pointer; 61 | font-size: $--font-size-small; 62 | padding: 0 3px; 63 | 64 | &:hover { 65 | color: $--color-primary; 66 | } 67 | 68 | &:focus { 69 | outline: none; 70 | } 71 | 72 | &.is-disabled { 73 | color: $--disabled-color-base; 74 | cursor: not-allowed; 75 | } 76 | } 77 | } 78 | 79 | @include e(wrap) { 80 | max-height: 280px; 81 | } 82 | 83 | @include e(checkbox-group) { 84 | padding: 10px; 85 | 86 | label.el-checkbox { 87 | display: block; 88 | margin-right: 5px; 89 | margin-bottom: 8px; 90 | margin-left: 5px; 91 | } 92 | 93 | .el-checkbox:last-child { 94 | margin-bottom: 0; 95 | } 96 | } 97 | } -------------------------------------------------------------------------------- /packages/theme-chalk/src/time-picker.scss: -------------------------------------------------------------------------------- 1 | @import "./date-picker/picker.scss"; 2 | @import "./date-picker/picker-panel.scss"; 3 | @import "./date-picker/time-spinner.scss"; 4 | @import "./date-picker/time-picker.scss"; 5 | @import "./date-picker/time-range-picker.scss"; 6 | @import "./input.scss"; 7 | @import "./scrollbar.scss"; 8 | @import "./popper"; 9 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/time-select.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | @import "./date-picker/picker.scss"; 3 | @import "./date-picker/date-picker.scss"; 4 | @import "./scrollbar.scss"; 5 | @import "./popper"; 6 | 7 | .time-select { 8 | margin: 5px 0; 9 | min-width: 0; 10 | } 11 | 12 | .time-select .el-picker-panel__content { 13 | max-height: 200px; 14 | margin: 0; 15 | } 16 | 17 | .time-select-item { 18 | padding: 8px 10px; 19 | font-size: 14px; 20 | line-height: 20px; 21 | } 22 | 23 | .time-select-item.selected:not(.disabled) { 24 | color: $--color-primary; 25 | font-weight: bold; 26 | } 27 | 28 | .time-select-item.disabled { 29 | color: $--datepicker-border-color; 30 | cursor: not-allowed; 31 | } 32 | 33 | .time-select-item:hover { 34 | background-color: $--background-color-base; 35 | font-weight: bold; 36 | cursor: pointer; 37 | } 38 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/timeline-item.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(timeline-item) { 5 | position: relative; 6 | padding-bottom: 20px; 7 | 8 | @include e(wrapper) { 9 | position: relative; 10 | padding-left: 28px; 11 | top: -3px; 12 | } 13 | 14 | @include e(tail) { 15 | position: absolute; 16 | left: 4px; 17 | height: 100%; 18 | border-left: 2px solid $--timeline-node-color; 19 | } 20 | 21 | @include e(icon) { 22 | color: $--color-white; 23 | font-size: $--font-size-small; 24 | } 25 | 26 | @include e(node) { 27 | position: absolute; 28 | background-color: $--timeline-node-color; 29 | border-radius: 50%; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | 34 | @include m(normal) { 35 | left: -1px; 36 | width: $--timeline-node-size-normal; 37 | height: $--timeline-node-size-normal; 38 | } 39 | @include m(large) { 40 | left: -2px; 41 | width: $--timeline-node-size-large; 42 | height: $--timeline-node-size-large; 43 | } 44 | 45 | @include m(primary) { 46 | background-color: $--color-primary; 47 | } 48 | @include m(success) { 49 | background-color: $--color-success; 50 | } 51 | @include m(warning) { 52 | background-color: $--color-warning; 53 | } 54 | @include m(danger) { 55 | background-color: $--color-danger; 56 | } 57 | @include m(info) { 58 | background-color: $--color-info; 59 | } 60 | } 61 | 62 | @include e(dot) { 63 | position: absolute; 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | } 68 | 69 | @include e(content) { 70 | color: $--color-text-primary; 71 | } 72 | 73 | @include e(timestamp) { 74 | color: $--color-text-secondary; 75 | line-height: 1; 76 | font-size: $--font-size-small; 77 | 78 | @include when(top) { 79 | margin-bottom: 8px; 80 | padding-top: 4px; 81 | } 82 | @include when(bottom) { 83 | margin-top: 8px; 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/timeline.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(timeline) { 5 | margin: 0; 6 | font-size: $--font-size-base; 7 | list-style: none; 8 | 9 | & .el-timeline-item:last-child { 10 | & .el-timeline-item__tail { 11 | display: none; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/tooltip.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | 4 | @include b(tooltip) { 5 | &:focus:not(.focusing), &:focus:hover { 6 | outline-width: 0; 7 | } 8 | @include e(popper) { 9 | position: absolute; 10 | border-radius: 4px; 11 | padding: $--tooltip-padding; 12 | z-index: $--index-popper; 13 | font-size: $--tooltip-font-size; 14 | line-height: 1.2; 15 | min-width: 10px; 16 | word-wrap: break-word; 17 | 18 | .popper__arrow, 19 | .popper__arrow::after { 20 | position: absolute; 21 | display: block; 22 | width: 0; 23 | height: 0; 24 | border-color: transparent; 25 | border-style: solid; 26 | } 27 | 28 | .popper__arrow { 29 | border-width: $--tooltip-arrow-size; 30 | } 31 | 32 | .popper__arrow::after { 33 | content: " "; 34 | border-width: 5px; 35 | } 36 | 37 | &[x-placement^="top"] { 38 | margin-bottom: #{$--tooltip-arrow-size + 6px}; 39 | } 40 | 41 | &[x-placement^="top"] .popper__arrow { 42 | bottom: -$--tooltip-arrow-size; 43 | border-top-color: $--tooltip-border-color; 44 | border-bottom-width: 0; 45 | 46 | &::after { 47 | bottom: 1px; 48 | margin-left: -5px; 49 | border-top-color: $--tooltip-fill; 50 | border-bottom-width: 0; 51 | } 52 | } 53 | 54 | &[x-placement^="bottom"] { 55 | margin-top: #{$--tooltip-arrow-size + 6px}; 56 | } 57 | 58 | &[x-placement^="bottom"] .popper__arrow { 59 | top: -$--tooltip-arrow-size; 60 | border-top-width: 0; 61 | border-bottom-color: $--tooltip-border-color; 62 | 63 | &::after { 64 | top: 1px; 65 | margin-left: -5px; 66 | border-top-width: 0; 67 | border-bottom-color: $--tooltip-fill; 68 | } 69 | } 70 | 71 | &[x-placement^="right"] { 72 | margin-left: #{$--tooltip-arrow-size + 6px}; 73 | } 74 | 75 | &[x-placement^="right"] .popper__arrow { 76 | left: -$--tooltip-arrow-size; 77 | border-right-color: $--tooltip-border-color; 78 | border-left-width: 0; 79 | 80 | &::after { 81 | bottom: -5px; 82 | left: 1px; 83 | border-right-color: $--tooltip-fill; 84 | border-left-width: 0; 85 | } 86 | } 87 | 88 | &[x-placement^="left"] { 89 | margin-right: #{$--tooltip-arrow-size + 6px}; 90 | } 91 | 92 | &[x-placement^="left"] .popper__arrow { 93 | right: -$--tooltip-arrow-size; 94 | border-right-width: 0; 95 | border-left-color: $--tooltip-border-color; 96 | 97 | &::after { 98 | right: 1px; 99 | bottom: -5px; 100 | margin-left: -5px; 101 | border-right-width: 0; 102 | border-left-color: $--tooltip-fill; 103 | } 104 | } 105 | 106 | @include when(dark) { 107 | background: $--tooltip-fill; 108 | color: $--tooltip-color; 109 | } 110 | 111 | @include when(light) { 112 | background: $--tooltip-color; 113 | border: 1px solid $--tooltip-fill; 114 | 115 | &[x-placement^="top"] .popper__arrow { 116 | border-top-color: $--tooltip-fill; 117 | &::after { 118 | border-top-color: $--tooltip-color; 119 | } 120 | } 121 | &[x-placement^="bottom"] .popper__arrow { 122 | border-bottom-color: $--tooltip-fill; 123 | &::after { 124 | border-bottom-color: $--tooltip-color; 125 | } 126 | } 127 | &[x-placement^="left"] .popper__arrow { 128 | border-left-color: $--tooltip-fill; 129 | &::after { 130 | border-left-color: $--tooltip-color; 131 | } 132 | } 133 | &[x-placement^="right"] .popper__arrow { 134 | border-right-color: $--tooltip-fill; 135 | &::after { 136 | border-right-color: $--tooltip-color; 137 | } 138 | } 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/tree.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/mixins"; 2 | @import "common/var"; 3 | @import "common/transition"; 4 | @import "checkbox"; 5 | 6 | @include b(tree) { 7 | position: relative; 8 | cursor: default; 9 | background: $--color-white; 10 | color: $--tree-font-color; 11 | 12 | @include e(empty-block) { 13 | position: relative; 14 | min-height: 60px; 15 | text-align: center; 16 | width: 100%; 17 | height: 100%; 18 | } 19 | 20 | @include e(empty-text) { 21 | position: absolute; 22 | left: 50%; 23 | top: 50%; 24 | transform: translate(-50%, -50%); 25 | color: $--color-text-secondary; 26 | font-size: $--font-size-base; 27 | } 28 | 29 | @include e(drop-indicator) { 30 | position: absolute; 31 | left: 0; 32 | right: 0; 33 | height: 1px; 34 | background-color: $--color-primary; 35 | } 36 | } 37 | 38 | @include b(tree-node) { 39 | white-space: nowrap; 40 | outline: none; 41 | &:focus { /* focus */ 42 | > .el-tree-node__content { 43 | background-color: $--tree-node-hover-background-color; 44 | } 45 | } 46 | 47 | @include when(drop-inner) { 48 | > .el-tree-node__content .el-tree-node__label { 49 | background-color: $--color-primary; 50 | color: #fff; 51 | } 52 | } 53 | 54 | @include e(content) { 55 | display: flex; 56 | align-items: center; 57 | height: 26px; 58 | cursor: pointer; 59 | 60 | & > .el-tree-node__expand-icon { 61 | padding: 6px; 62 | } 63 | & > label.el-checkbox { 64 | margin-right: 8px; 65 | } 66 | &:hover { 67 | background-color: $--tree-node-hover-background-color; 68 | } 69 | 70 | .el-tree.is-dragging & { 71 | cursor: move; 72 | 73 | & * { 74 | pointer-events: none; 75 | } 76 | } 77 | 78 | .el-tree.is-dragging.is-drop-not-allow & { 79 | cursor: not-allowed; 80 | } 81 | } 82 | 83 | @include e(expand-icon) { 84 | cursor: pointer; 85 | color: $--tree-expand-icon-color; 86 | font-size: 12px; 87 | 88 | transform: rotate(0deg); 89 | transition: transform 0.3s ease-in-out; 90 | 91 | &.expanded { 92 | transform: rotate(90deg); 93 | } 94 | 95 | &.is-leaf { 96 | color: transparent; 97 | cursor: default; 98 | } 99 | } 100 | 101 | @include e(label) { 102 | font-size: $--font-size-base; 103 | } 104 | 105 | @include e(loading-icon) { 106 | margin-right: 8px; 107 | font-size: $--font-size-base; 108 | color: $--tree-expand-icon-color; 109 | } 110 | 111 | & > .el-tree-node__children { 112 | overflow: hidden; 113 | background-color: transparent; 114 | } 115 | 116 | &.is-expanded > .el-tree-node__children { 117 | display: block; 118 | } 119 | } 120 | 121 | .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { 122 | background-color: mix($--color-white, $--color-primary, 92%); 123 | } 124 | -------------------------------------------------------------------------------- /packages/timeline-item/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from '../timeline/src/timeline-item.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const TimelineItem = Comp 8 | -------------------------------------------------------------------------------- /packages/timeline/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import Comp from './src/timeline.vue' 3 | export const install = function (app: App) { 4 | app.component(Comp.name, Comp) 5 | } 6 | 7 | export const Timeline = Comp 8 | export * from './src/type' 9 | -------------------------------------------------------------------------------- /packages/timeline/src/timeline-item.vue: -------------------------------------------------------------------------------- 1 | 40 | 71 | -------------------------------------------------------------------------------- /packages/timeline/src/timeline.vue: -------------------------------------------------------------------------------- 1 | 78 | -------------------------------------------------------------------------------- /packages/timeline/src/type.ts: -------------------------------------------------------------------------------- 1 | export type TimelinePlacement = 'top' | 'bottom' 2 | 3 | export type TimelineType = 'primary' | 'success' | 'warning' | 'danger' | 'info' 4 | 5 | export type TimelineColor = 'hsl' | 'hsv' | 'hex' | 'rgb' 6 | 7 | export type TimelineSize = 'normal' | 'large' 8 | -------------------------------------------------------------------------------- /src/component.ts: -------------------------------------------------------------------------------- 1 | import { App, ref } from "vue"; 2 | 3 | /** ElementUI component common definition */ 4 | export declare class ElementUIComponent extends Plugin { 5 | /** Install component into Vue */ 6 | static install(app: App): void; 7 | } 8 | 9 | /** Component size definition for button, input, etc */ 10 | export type ElementUIComponentSize = "large" | "medium" | "small" | "mini"; 11 | 12 | /** Horizontal alignment */ 13 | export type ElementUIHorizontalAlignment = "left" | "center" | "right"; 14 | 15 | export type ElementUIProp = { 16 | size: ElementUIComponentSize | ""; 17 | zIndex: Number; 18 | }; 19 | 20 | export const ElementUIOptions = ref({ 21 | size: "", 22 | zIndex: 2000, 23 | }); 24 | -------------------------------------------------------------------------------- /src/directives/repeat-click.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from 'vue' 2 | import { once, on } from 'src/utils/dom' 3 | 4 | export default { 5 | beforeMount(el, binding) { 6 | let interval = null 7 | let startTime 8 | const handler = binding.value 9 | const clear = () => { 10 | if (Date.now() - startTime < 100) { 11 | handler() 12 | } 13 | clearInterval(interval) 14 | interval = null 15 | } 16 | on(el, 'mousedown', (e) => { 17 | if (e.button !== 0) return 18 | startTime = Date.now() 19 | once(document, 'mouseup', clear) 20 | clearInterval(interval) 21 | interval = setInterval(handler, 100) 22 | }) 23 | }, 24 | } as Directive 25 | -------------------------------------------------------------------------------- /src/hooks/focus.ts: -------------------------------------------------------------------------------- 1 | import { ref, getCurrentInstance, computed, Ref } from "vue"; 2 | export function useFocus() { 3 | // Ref<{ focus(): void; blur(): void } | null> 4 | const focusable = ref(null); 5 | const isFocused: Ref = ref(false); 6 | const { emit } = getCurrentInstance(); 7 | function focus() { 8 | if (!isFocused.value) { 9 | focusable.value?.focus(); 10 | isFocused.value = true; 11 | emit("focus"); 12 | } 13 | } 14 | function blur() { 15 | if (isFocused.value) { 16 | focusable.value?.blur(); 17 | isFocused.value = false; 18 | emit("blur"); 19 | } 20 | } 21 | return { 22 | focusable, 23 | focus, 24 | blur, 25 | isFocused: computed(() => isFocused.value), 26 | }; 27 | } 28 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import { ElementUIOptions } from 'src/component' 3 | import { install as Alert } from 'packages/alert' 4 | import { install as Avatar } from 'packages/avatar' 5 | import { install as Backtop } from 'packages/backtop' 6 | import { install as Badge } from 'packages/badge' 7 | import { install as Breadcrumb } from 'packages/breadcrumb' 8 | import { install as BreadcrumbItem } from 'packages/breadcrumb-item' 9 | import { install as Button } from 'packages/button' 10 | import { install as ButtonGroup } from 'packages/button-group' 11 | import { install as Card } from 'packages/card' 12 | import { install as Col } from 'packages/col' 13 | import { install as Divider } from 'packages/divider' 14 | import { install as Icon } from 'packages/icon' 15 | import { install as Input } from 'packages/input' 16 | import { install as InputNumber } from 'packages/input-number' 17 | import { install as Link } from 'packages/link' 18 | import { install as Progress } from 'packages/progress' 19 | import { install as Row } from 'packages/row' 20 | import { install as Timeline } from 'packages/timeline' 21 | import { install as TimelineItem } from 'packages/timeline-item' 22 | 23 | const components = [ 24 | Alert, 25 | Avatar, 26 | Backtop, 27 | Badge, 28 | Breadcrumb, 29 | BreadcrumbItem, 30 | Button, 31 | ButtonGroup, 32 | Card, 33 | Col, 34 | Divider, 35 | Icon, 36 | Input, 37 | InputNumber, 38 | Link, 39 | Progress, 40 | Row, 41 | Timeline, 42 | TimelineItem, 43 | ] 44 | 45 | export const install = function (app: App, opts = {}) { 46 | components.forEach((comp) => { 47 | app.use(comp) 48 | }) 49 | 50 | ElementUIOptions.value = { 51 | ...ElementUIOptions.value, 52 | ...opts, 53 | } 54 | } 55 | 56 | export const version = 'v0.0.0-alpha.0' 57 | export * from 'src/component' 58 | export * from 'packages/alert' 59 | export * from 'packages/avatar' 60 | export * from 'packages/backtop' 61 | export * from 'packages/badge' 62 | export * from 'packages/breadcrumb' 63 | export * from 'packages/breadcrumb-item' 64 | export * from 'packages/button' 65 | export * from 'packages/button-group' 66 | export * from 'packages/card' 67 | export * from 'packages/col' 68 | export * from 'packages/divider' 69 | export * from 'packages/icon' 70 | export * from 'packages/input' 71 | export * from 'packages/input-number' 72 | export * from 'packages/link' 73 | export * from 'packages/progress' 74 | export * from 'packages/row' 75 | export * from 'packages/timeline' 76 | export * from 'packages/timeline-item' 77 | -------------------------------------------------------------------------------- /src/utils/dom.ts: -------------------------------------------------------------------------------- 1 | const isServer = typeof window === 'undefined' 2 | /* istanbul ignore next */ 3 | export const on = (function () { 4 | if (!isServer && document.addEventListener) { 5 | return function (element, event, handler) { 6 | if (element && event && handler) { 7 | element.addEventListener(event, handler, false) 8 | } 9 | } 10 | } else { 11 | return function (element, event, handler) { 12 | if (element && event && handler) { 13 | element.attachEvent('on' + event, handler) 14 | } 15 | } 16 | } 17 | })() 18 | 19 | /* istanbul ignore next */ 20 | export const off = (function () { 21 | if (!isServer && document.removeEventListener) { 22 | return function (element, event, handler) { 23 | if (element && event) { 24 | element.removeEventListener(event, handler, false) 25 | } 26 | } 27 | } else { 28 | return function (element, event, handler) { 29 | if (element && event) { 30 | element.detachEvent('on' + event, handler) 31 | } 32 | } 33 | } 34 | })() 35 | 36 | /* istanbul ignore next */ 37 | export const once = function (el, event, fn) { 38 | var listener = function () { 39 | if (fn) { 40 | fn.apply(this, arguments) 41 | } 42 | off(el, event, listener) 43 | } 44 | on(el, event, listener) 45 | } 46 | -------------------------------------------------------------------------------- /src/utils/emitter.ts: -------------------------------------------------------------------------------- 1 | import { getCurrentInstance, ComponentOptions } from 'vue' 2 | 3 | export function dispatch( 4 | componentName: string, 5 | eventName: string, 6 | params: Array 7 | ) { 8 | const instance = getCurrentInstance() 9 | if (!instance) return 10 | 11 | let parent = instance.parent || instance.root 12 | let name = (parent.type as ComponentOptions).name 13 | 14 | while (parent && (!name || name !== componentName)) { 15 | parent = parent.parent 16 | 17 | if (parent) { 18 | name = (parent.type as ComponentOptions).name 19 | } 20 | } 21 | if (parent) { 22 | parent.emit.apply(parent, [eventName].concat(params)) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/utils/injection/form.ts: -------------------------------------------------------------------------------- 1 | import { provide, inject, computed } from 'vue' 2 | import { ElementUIOptions, ElementUIComponentSize } from 'src/component' 3 | 4 | const formSymbol = Symbol('elForm') 5 | const formItemSymbol = Symbol('elFormItem') 6 | 7 | export const provideForm = (form: any) => provide(formSymbol, form) 8 | 9 | export const provideFormItem = (formItem: any) => 10 | provide(formItemSymbol, formItem) 11 | 12 | export const useForm = ({ 13 | size, 14 | disabled, 15 | }: { 16 | size?: ElementUIComponentSize 17 | disabled?: Boolean 18 | }) => { 19 | const elForm = inject(formSymbol, {} as any) 20 | const elFormItem = inject(formItemSymbol, {} as any) 21 | 22 | const validateState = computed(() => { 23 | return elFormItem ? elFormItem.validateState : '' 24 | }) 25 | 26 | const _size = computed(() => { 27 | return size || elFormItem.elFormItemSize || ElementUIOptions.value.size 28 | }) 29 | 30 | const needStatusIcon = computed(() => { 31 | return elForm.statusIcon || false 32 | }) 33 | 34 | const _disabled = computed(() => { 35 | return disabled || elForm.disabled 36 | }) 37 | 38 | return { validateState, size: _size, needStatusIcon, disabled: _disabled } 39 | } 40 | -------------------------------------------------------------------------------- /src/utils/share.ts: -------------------------------------------------------------------------------- 1 | export const isNumber = (val: unknown): val is number => typeof val === 'number' 2 | export const isArray = Array.isArray 3 | export const isFunction = (val: unknown): val is Function => 4 | typeof val === 'function' 5 | export const isString = (val: unknown): val is string => typeof val === 'string' 6 | export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol' 7 | export const isObject = (val: unknown): val is Record => 8 | val !== null && typeof val === 'object' 9 | 10 | export const isPromise = (val: unknown): val is Promise => { 11 | return isObject(val) && isFunction(val.then) && isFunction(val.catch) 12 | } 13 | 14 | export const objectToString = Object.prototype.toString 15 | export const toTypeString = (value: unknown): string => 16 | objectToString.call(value) 17 | 18 | export const toRawType = (value: unknown): string => { 19 | return toTypeString(value).slice(8, -1) 20 | } 21 | 22 | export function isKorean(text) { 23 | const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi 24 | return reg.test(text) 25 | } 26 | -------------------------------------------------------------------------------- /test/unit/mocks/uri.ts: -------------------------------------------------------------------------------- 1 | export const IMAGE_SUCCESS = 2 | 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFmklEQVR4Xu2ba2wUVRTH/2cWtlaooFQwKpr4CkESTQBNUAkodGeaKFGD2u6WGPyAmmAEEZmpj1VhBghE/KKGBIztDIXAByWBnQ1oQREfARNiDDHiF1+ooBiksVt295hFiqSdxx3KdmcH5uv+z+3//O65c19TwgX+0AWePy4CuFgBISCQ3J6+DFLuVQKmg2k4gK3xuvwr6+9e+Xe57YViCCRttY1ALX2S/asIPLRB1jvLCSEUAFK2egKgYf0T5a6TxdhtmxqXfl8uCBUHMHfP4rqeE0OOeyS4w5T1hsgCmLNTvaWYp299EpxoyvpX5YBQ8QpotlvvkMBfeCbHvMpUjOejCSCjPSYROrySY/B+SzYmRRJA0tZWEfCcJwBGz81yvDZN6eL5hlDxIZCyta8BTPBLjIv5sVbjyp/8dEF/ryiAlL3kJkD6TsQ0STS5vWHZPhFtEE1FAYiUf28yBaZ7OpRle4IkJ6KtGIDZexfU1hyv/QXASBGjBeYpHYrxmYg2iKZiAFIZdSGIVouaLVJx0obE8v2ielFdRQA83pkemc/lDgE0StRopF6CSVuzCGgWTb6ku7T+aHztpLUng8SIaAe9ApJ265MEflvE3P8a/t2UjTHBYsTUgwqgKauOk4p0gAhxMXunVcwfmYpxX6AYQfGgAWjqTNdL3bndRDRe0NsZGYPXWLKxIGiciH5QAJye8r4UWfE5mWbCE1ZCXy+SUFBN2QEo2+fXjKK6zSDcH9Rcr55i0vj2mUsPnmu8V1xZAZxKXhq+G6A7z9U8Mx+zFOOKc433iysbgNKYj3XnNoHoXj8T3r/z+6ZsPDiwNtyjHQE07dTGSAU8QkX4LlSY6Ndh9UfWnT1Ht2QXjeZifC8INw7UOAMfE2MgB6NdhaFo65ih/+bkxRFAMqPuIaK7xM3zu6ZszO3Vt2S1CcwobXPD8TAfoZjU6LSb7AdgWmd6yLW5nqArrm5T1mtDC+A/Y3tNWe/XqY4VkLK1fwBcItp9DGZLNqQwA2DmgiUbQ0Hgs/NyBpBRD4PoqigBKOWSGxuv2XxruscXQNJWDxJoXJQAMPCnJev9XuouQ0D9PMjcXQ1DAIx9pqJP7tupLrOAZhMhEaUKAGOjqehNYgBsdSOBHo0UAOBlU9ZfFwOQUd8honmRAsA8y1SMrWIAbHUFgRZHCUCe6LqNiWU/igHIaCoR9KgAYMZRS9GvFF4Kp7LqU2B6KzoAeKulGLOEASRtrZkAK0IAVEsxlgsDaM6ojRLRtqgAIImntTcYu4UBpLKtU8D8aRQAMJD/uSZeu2t6Oi8MILldHU8SfRMFAG67wN7cHFeCcz5svaZ4koWvosO9FGbdlI1Wt850BNCSXTSMOX4iEhVAaDAT+o5AAEriVEYrgHBmj+8FI7QVwJzLjei+fPOUN0rnG46P66FoMqMdIUK9SBWEGIDvjZIrgFRGOyR6qBlWAMzQLEU3vDrRvQJsdR+BJlZzBYh8VuM1BHYSQehCMpwVwF1mwqjrewYotBk69RK0tS0AHq7eChC7UPEYAto6As6c9VfdLED8tJkwfL9DcH8J2upqgBZWbwXgalPWD/v59wCgvQTgNb8GSr+H7x3AB0zZuF3EuyuA5oz6jET0pkgjYQPAzEstxSh1oO/jVQFzALzn20IIK0CKFa5vm7niBxHvHgsh9QEQfSDSSP8KWDSaOe54GyvS3sA0vMuUjemibbgPgWzrVInZ8RChb+N9AQSdRkXNiul4qikbn4hp4f5/g7N3vDAiXpCOEcj/IwpG0VT02Nl/9NSOshjvGMinMaJJ9OqYeYulGLODxHkml7TVZ8GYT0Q3uDfKXQxaY8n6i06aZnvJDGKaB8JMAo0IYk5UW7r5BbAtNhRz22YYf4jGlXT+vRuktSrUXgRQhZ12Xi1f8BXwL38cy1+mrtJNAAAAAElFTkSuQmCC' 3 | 4 | export const IMAGE_FAIL = 'data:image/png;base64,fail' 5 | -------------------------------------------------------------------------------- /test/unit/specs/alert.spec.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom-sixteen 3 | */ 4 | import { mountWithProps, mountWithElement } from '../util' 5 | // import { mountWithElement, waitImmediate } from '../util' 6 | // import { ref } from 'vue' 7 | import { Alert } from 'packages/alert' 8 | 9 | describe('Alert', () => { 10 | it('create', async () => { 11 | const wrapper = mountWithProps(Alert, { 12 | title: 'create', 13 | }) 14 | expect(wrapper.classes('el-alert')).toBe(true) 15 | }) 16 | 17 | it('title', async () => { 18 | const title = 'test title' 19 | const wrapper = mountWithProps(Alert, { 20 | title, 21 | }) 22 | expect(wrapper.props('title')).toEqual(title) 23 | }) 24 | 25 | it('description', async () => { 26 | const description = 'test description' 27 | const wrapper = mountWithProps(Alert, { 28 | description, 29 | }) 30 | expect(wrapper.props('description')).toEqual(description) 31 | }) 32 | 33 | it('type', async () => { 34 | const type = 'warning' 35 | const wrapper = mountWithProps(Alert, { 36 | type, 37 | }) 38 | expect(wrapper.props('type')).toEqual(type) 39 | expect(wrapper.classes('el-alert--warning')).toBe(true) 40 | }) 41 | 42 | it('closable', async () => { 43 | const closable = false 44 | const wrapper = mountWithProps(Alert, { 45 | closable, 46 | }) 47 | expect(wrapper.props('closable')).toEqual(closable) 48 | const closeBtn = wrapper.find('.el-alert__closebtn') 49 | expect(closeBtn.exists()).toBe(true) 50 | }) 51 | 52 | it('closeText', async () => { 53 | const closeText = 'ok' 54 | const wrapper = mountWithProps(Alert, { 55 | closeText, 56 | }) 57 | expect(wrapper.props('closeText')).toEqual(closeText) 58 | const closeBtn = wrapper.find('.is-customed') 59 | expect(closeBtn.exists()).toBe(true) 60 | }) 61 | 62 | it('showIcon', async () => { 63 | const showIcon = true 64 | const wrapper = mountWithProps(Alert, { 65 | showIcon, 66 | }) 67 | expect(wrapper.props('showIcon')).toEqual(showIcon) 68 | const iconBtn = wrapper.find('.el-alert__icon') 69 | expect(iconBtn.exists()).toBe(true) 70 | }) 71 | 72 | it('center', async () => { 73 | const center = true 74 | const wrapper = mountWithProps(Alert, { 75 | center, 76 | }) 77 | expect(wrapper.props('center')).toEqual(center) 78 | const centrClass = wrapper.find('.is-center') 79 | expect(centrClass.exists()).toBe(true) 80 | }) 81 | 82 | it('effect', async () => { 83 | const effect = 'dark' 84 | const wrapper = mountWithProps(Alert, { 85 | effect, 86 | }) 87 | expect(wrapper.props('effect')).toEqual(effect) 88 | const darkClass = wrapper.find('.is-dark') 89 | expect(darkClass.exists()).toBe(true) 90 | }) 91 | 92 | it('close', async () => { 93 | const mockFn = jest.fn() 94 | 95 | const wrapper = mountWithElement({ 96 | template: ` 97 | 98 | `, 99 | setup() { 100 | return { 101 | mockFn, 102 | } 103 | }, 104 | }) 105 | 106 | const closeBtn = wrapper.find('.el-alert__closebtn') 107 | await closeBtn.trigger('click') 108 | expect(mockFn).toBeCalledTimes(1) 109 | }) 110 | }) 111 | -------------------------------------------------------------------------------- /test/unit/specs/backtop.spec.ts: -------------------------------------------------------------------------------- 1 | import { mountWithElement, wait } from '../util' 2 | 3 | describe('Backtop', () => { 4 | it('create', async () => { 5 | const outerNode = document.createElement('div') 6 | outerNode.setAttribute('class', 'test-scroll') 7 | outerNode.setAttribute('style', 'height: 100px; overflow: auto') 8 | 9 | document.body.appendChild(outerNode) 10 | 11 | const wrapper = mountWithElement( 12 | { 13 | template: ` 14 |
15 | 16 | test_up_text 17 | 18 |
19 | `, 20 | }, 21 | { 22 | attachTo: outerNode, 23 | } 24 | ) 25 | 26 | expect(wrapper.vm.$el).toBeTruthy() 27 | expect(wrapper.text()).toEqual('') 28 | outerNode.scrollTop = 2000 29 | outerNode.dispatchEvent(new Event('scroll')) 30 | 31 | await wait(300) 32 | expect(wrapper.text()).toEqual('test_up_text') 33 | }) 34 | }) 35 | -------------------------------------------------------------------------------- /test/unit/specs/badge.spec.ts: -------------------------------------------------------------------------------- 1 | import { mountWithProps, mountWithElement } from '../util' 2 | import { Badge } from 'packages/badge' 3 | 4 | describe('Badge', () => { 5 | it('value', async () => { 6 | const wrapper = mountWithProps(Badge, { 7 | value: 12, 8 | }) 9 | const vm = wrapper.vm as any 10 | expect(vm.content).toBe(12) 11 | }) 12 | 13 | it('is fixed', () => { 14 | const wrapper = mountWithElement({ 15 | template: ` 16 | 17 | 18 | 19 | `, 20 | }) 21 | expect( 22 | wrapper.find('.el-badge__content.is-fixed').exists() 23 | ).toBeTruthy() 24 | }) 25 | 26 | it('is dot', () => { 27 | const wrapper = mountWithElement({ 28 | template: ` 29 | 30 | 31 | 32 | `, 33 | }) 34 | expect( 35 | wrapper.find('.el-badge__content.is-dot').exists() 36 | ).toBeTruthy() 37 | }) 38 | 39 | it('larger than max', () => { 40 | const wrapper = mountWithProps(Badge, { 41 | value: 102, 42 | max: 99, 43 | }) 44 | const vm = wrapper.vm as any 45 | expect(vm.content).toBe('99+') 46 | }) 47 | 48 | it('smaller than max', () => { 49 | const wrapper = mountWithProps(Badge, { 50 | value: 80, 51 | max: 99, 52 | }) 53 | const vm = wrapper.vm as any 54 | expect(vm.content).toBe(80) 55 | }) 56 | }) 57 | -------------------------------------------------------------------------------- /test/unit/specs/breadcrumb.spec.ts: -------------------------------------------------------------------------------- 1 | import { mountWithElement, wait } from '../util' 2 | 3 | describe('Breadcrumb', () => { 4 | it('create', async () => { 5 | const wrapper = mountWithElement({ 6 | template: ` 7 | 8 | 首页 9 | 活动管理 10 | 活动列表 11 | 活动详情 12 | 13 | `, 14 | }) 15 | await wait() 16 | expect( 17 | wrapper.find('.el-breadcrumb__separator').text() 18 | ).toEqual('>') 19 | }) 20 | 21 | it('seperator-class', async () => { 22 | const wrapper = mountWithElement({ 23 | template: ` 24 | 25 | 首页 26 | 活动管理 27 | 活动列表 28 | 活动详情 29 | 30 | `, 31 | }) 32 | await wait() 33 | expect( 34 | wrapper.find('.el-breadcrumb__separator.el-icon-check') 35 | ).toBeTruthy() 36 | }) 37 | }) 38 | -------------------------------------------------------------------------------- /test/unit/specs/button.spec.ts: -------------------------------------------------------------------------------- 1 | import { mountWithProps, mountWithElement } from '../util' 2 | import { Button } from 'packages/button' 3 | 4 | describe('Button', () => { 5 | it('create', () => { 6 | const wrapper = mountWithProps(Button, { 7 | type: 'primary', 8 | }) 9 | expect(wrapper.classes('el-button--primary')).toBe(true) 10 | }) 11 | 12 | it('icon', () => { 13 | const wrapper = mountWithProps(Button, { 14 | icon: 'el-icon-search', 15 | }) 16 | expect(wrapper.find('.el-icon-search').exists()).toBe(true) 17 | }) 18 | 19 | it('nativeType', () => { 20 | const wrapper = mountWithProps(Button, { 21 | nativeType: 'submit', 22 | }) 23 | expect(wrapper.attributes('type')).toBe('submit') 24 | }) 25 | 26 | it('loading', () => { 27 | const wrapper = mountWithProps(Button, { 28 | loading: true, 29 | }) 30 | expect(wrapper.classes('is-loading')).toBe(true) 31 | expect(wrapper.find('.el-icon-loading').exists()).toBe(true) 32 | }) 33 | 34 | it('disabled', () => { 35 | const wrapper = mountWithProps(Button, { 36 | disabled: true, 37 | }) 38 | expect(wrapper.classes('is-disabled')).toBe(true) 39 | }) 40 | 41 | it('size', () => { 42 | const wrapper = mountWithProps(Button, { 43 | size: 'medium', 44 | }) 45 | 46 | expect(wrapper.classes('el-button--medium')).toBe(true) 47 | }) 48 | 49 | it('plain', () => { 50 | const wrapper = mountWithProps(Button, { 51 | plain: true, 52 | }) 53 | 54 | expect(wrapper.classes('is-plain')).toBe(true) 55 | }) 56 | 57 | it('round', () => { 58 | const wrapper = mountWithProps(Button, { 59 | round: true, 60 | }) 61 | 62 | expect(wrapper.classes('is-round')).toBe(true) 63 | }) 64 | 65 | it('circle', () => { 66 | const wrapper = mountWithProps(Button, { 67 | circle: true, 68 | }) 69 | 70 | expect(wrapper.classes('is-circle')).toBe(true) 71 | }) 72 | 73 | it('click', async () => { 74 | let result 75 | const Component = { 76 | template: ` 77 | 78 | `, 79 | setup() { 80 | return { 81 | handleClick(evt) { 82 | result = evt 83 | }, 84 | } 85 | }, 86 | } 87 | const wrapper = mountWithElement(Component) 88 | await wrapper.trigger('click') 89 | expect(result).toBeDefined() 90 | }) 91 | 92 | it('click inside', async () => { 93 | let result 94 | const wrapper = mountWithElement({ 95 | template: ` 96 | 97 | `, 98 | setup() { 99 | function handleClick(evt) { 100 | result = evt 101 | } 102 | return { 103 | handleClick, 104 | } 105 | }, 106 | }) 107 | const insideElement = wrapper.find('.inner-slot').element 108 | await insideElement.click() 109 | expect(result).toBeDefined() 110 | }) 111 | 112 | it('loading implies disabled', async () => { 113 | let result 114 | const wrapper = mountWithElement({ 115 | template: ` 116 | 117 | `, 118 | setup() { 119 | function handleClick(evt) { 120 | result = evt 121 | } 122 | return { 123 | handleClick, 124 | } 125 | }, 126 | }) 127 | await (wrapper.element as HTMLElement).click() 128 | expect(result).toBeUndefined() 129 | }) 130 | }) 131 | -------------------------------------------------------------------------------- /test/unit/specs/card.spec.ts: -------------------------------------------------------------------------------- 1 | import { mountWithProps, mountWithElement } from '../util' 2 | import { Card } from 'packages/card' 3 | 4 | describe('Card', () => { 5 | it('slot:header', async () => { 6 | const wrapper = mountWithElement({ 7 | template: ` 8 | 9 | 12 | 13 | `, 14 | }) 15 | expect(wrapper.find('.el-card__header').text()).toEqual( 16 | '二师兄叫我埋梗 啦啦啦' 17 | ) 18 | }) 19 | 20 | it('header', async () => { 21 | const wrapper = mountWithProps(Card, { 22 | header: '好烦', 23 | }) 24 | expect(wrapper.find('.el-card__header').text()).toEqual('好烦') 25 | }) 26 | 27 | it('bodyStyle', async () => { 28 | const wrapper = mountWithProps(Card, { 29 | bodyStyle: { padding: '10px' }, 30 | }) 31 | expect( 32 | wrapper.find('.el-card__body').element.style.padding 33 | ).toEqual('10px') 34 | }) 35 | 36 | it('shadow always', async () => { 37 | const wrapper = mountWithProps(Card, { 38 | shadow: 'always', 39 | }) 40 | expect(wrapper.classes('is-always-shadow')).toBe(true) 41 | }) 42 | 43 | it('shadow hover', async () => { 44 | const wrapper = mountWithProps(Card, { 45 | shadow: 'hover', 46 | }) 47 | expect(wrapper.classes('is-hover-shadow')).toBe(true) 48 | }) 49 | 50 | it('shadow never', async () => { 51 | const wrapper = mountWithProps(Card, { 52 | shadow: 'never', 53 | }) 54 | expect(wrapper.classes('is-never-shadow')).toBe(true) 55 | }) 56 | }) 57 | -------------------------------------------------------------------------------- /test/unit/specs/col.spec.ts: -------------------------------------------------------------------------------- 1 | import { mountWithProps, mountWithElement } from '../util' 2 | import { Col } from 'packages/col' 3 | 4 | describe('Col', () => { 5 | 6 | it('create', () => { 7 | const wrapper = mountWithProps(Col, { 8 | span: 12 9 | }) 10 | expect(wrapper.classes('el-col')).toBe(true) 11 | }) 12 | 13 | it('span', () => { 14 | const wrapper = mountWithProps(Col, { 15 | span: 12 16 | }) 17 | expect(wrapper.classes('el-col-12')).toBe(true) 18 | }) 19 | 20 | it('pull', () => { 21 | const wrapper = mountWithProps(Col, { 22 | span: 12, 23 | pull: 3 24 | }) 25 | expect(wrapper.classes('el-col-pull-3')).toBe(true) 26 | }) 27 | 28 | it('push', () => { 29 | const wrapper = mountWithProps(Col, { 30 | span: 12, 31 | push: 3 32 | }) 33 | expect(wrapper.classes('el-col-push-3')).toBe(true) 34 | }) 35 | 36 | it('gutter', () => { 37 | const wrapper = mountWithElement({ 38 | template: ` 39 | 40 | 41 | 42 | ` 43 | }) 44 | const { style } = wrapper.findComponent({ ref: 'col' }).vm as any 45 | 46 | expect(style.paddingLeft).toBe('10px') 47 | expect(style.paddingRight).toBe('10px') 48 | }) 49 | 50 | it('responsive', () => { 51 | const wrapper = mountWithElement({ 52 | template: ` 53 | 54 | 55 | 56 | 57 | ` 58 | }) 59 | const colElm = wrapper.findComponent({ ref: 'col' }) as any 60 | 61 | expect(colElm.classes('el-col-sm-4')).toBe(true) 62 | expect(colElm.classes('el-col-sm-offset-2')).toBe(true) 63 | expect(colElm.classes('el-col-lg-6')).toBe(true) 64 | expect(colElm.classes('el-col-lg-offset-3')).toBe(true) 65 | expect(colElm.classes('el-col-md-8')).toBe(true) 66 | }) 67 | 68 | }) 69 | -------------------------------------------------------------------------------- /test/unit/specs/divider.spec.ts: -------------------------------------------------------------------------------- 1 | import { mountWithElement } from '../util' 2 | 3 | describe('Divider', () => { 4 | it('content', () => { 5 | const wrapper = mountWithElement({ 6 | template: ` 7 | 我是一条完美分割线！ 8 | `, 9 | }) 10 | expect(wrapper.text()).toContain('我是一条完美分割线！') 11 | }) 12 | 13 | it('direction', () => { 14 | const wrapper = mountWithElement({ 15 | template: ` 16 | 我是一条完美分割线！ 17 | `, 18 | }) 19 | expect(wrapper.classes('el-divider--vertical')).toBe(true) 20 | }) 21 | 22 | it('apply class to divider', () => { 23 | const wrapper = mountWithElement({ 24 | template: ` 25 | 我是一条完美分割线！ 26 | `, 27 | }) 28 | expect(wrapper.classes('my-divider')).toBe(true) 29 | }) 30 | }) 31 | -------------------------------------------------------------------------------- /test/unit/specs/link.spec.ts: -------------------------------------------------------------------------------- 1 | import { mountWithProps, mountWithElement } from '../util' 2 | import { Link } from 'packages/link' 3 | 4 | describe('Link', () => { 5 | it('create', async () => { 6 | const wrapper = mountWithProps(Link, { 7 | type: 'primary', 8 | }) 9 | expect(wrapper.classes('el-link--primary')).toBeTruthy() 10 | }) 11 | 12 | it('icon', async () => { 13 | const wrapper = mountWithProps(Link, { 14 | icon: 'el-icon-search', 15 | }) 16 | expect(wrapper.find('.el-icon-search').exists()).toBeTruthy() 17 | }) 18 | 19 | it('href', async () => { 20 | const wrapper = mountWithProps(Link, { 21 | href: 'https://element.eleme.io/', 22 | }) 23 | expect(wrapper.attributes('href')).toEqual('https://element.eleme.io/') 24 | }) 25 | 26 | it('target', async () => { 27 | const wrapper = mountWithElement({ 28 | template: ` 29 | 30 | default 31 | 32 | `, 33 | }) 34 | expect(wrapper.attributes('target')).toBe('_blank') 35 | }) 36 | 37 | it('disabled', async () => { 38 | const wrapper = mountWithProps(Link, { 39 | disabled: true, 40 | }) 41 | expect(wrapper.classes('is-disabled')).toBeTruthy() 42 | }) 43 | 44 | it('click', async () => { 45 | const mockFn = jest.fn() 46 | 47 | const wrapper = mountWithElement({ 48 | template: ` 49 | 50 | `, 51 | setup() { 52 | return { 53 | mockFn, 54 | } 55 | }, 56 | }) 57 | await wrapper.trigger('click') 58 | expect(mockFn).toBeCalledTimes(3) 59 | }) 60 | }) 61 | -------------------------------------------------------------------------------- /test/unit/specs/row.spec.ts: -------------------------------------------------------------------------------- 1 | import { mountWithProps } from '../util' 2 | import { Row } from 'packages/row' 3 | 4 | describe('Row', () => { 5 | it('create', () => { 6 | const wrapper = mountWithProps(Row) 7 | expect(wrapper.classes('el-row')).toBe(true) 8 | }) 9 | 10 | it('gutter', () => { 11 | const wrapper = mountWithProps(Row, { 12 | gutter: 20, 13 | }) 14 | const { style } = wrapper.vm as any 15 | expect(style.marginLeft).toBe('-10px') 16 | expect(style.marginRight).toBe('-10px') 17 | }) 18 | 19 | it('type', () => { 20 | const wrapper = mountWithProps(Row, { 21 | type: 'flex', 22 | }) 23 | expect(wrapper.classes('el-row--flex')).toBe(true) 24 | }) 25 | 26 | it('justify', () => { 27 | const wrapper = mountWithProps(Row, { 28 | justify: 'end', 29 | }) 30 | expect(wrapper.classes('is-justify-end')).toBe(true) 31 | }) 32 | 33 | it('align', () => { 34 | const wrapper = mountWithProps(Row, { 35 | align: 'bottom', 36 | }) 37 | expect(wrapper.classes('is-align-bottom')).toBe(true) 38 | }) 39 | }) 40 | -------------------------------------------------------------------------------- /test/unit/util.ts: -------------------------------------------------------------------------------- 1 | import * as Element from 'src/index' 2 | import { mount } from '@vue/test-utils' 3 | import { 4 | ComponentOptions, 5 | ComponentPublicInstance, 6 | render, 7 | h, 8 | createApp, 9 | } from 'vue' 10 | 11 | // TODO: duplicate start 12 | 13 | export function createTest( 14 | Compo: new () => ComponentPublicInstance, 15 | propsData = {} 16 | ): Element { 17 | const root = document.createElement('div') 18 | render(h(Compo, propsData), root) 19 | return root.children[0] 20 | } 21 | 22 | export function createVue(option: ComponentOptions) { 23 | const root = document.createElement('div') 24 | const app = createApp(option) 25 | app.use(Element) 26 | app.mount(root) 27 | return root.children[0] 28 | } 29 | 30 | /** 31 | * 触发一个事件 32 | * mouseenter, mouseleave, mouseover, keyup, change, click 等 33 | * @param {Element} elm 34 | * @param {String} name 35 | * @param {*} opts 36 | */ 37 | export const triggerEvent = function (elm, name, ...opts) { 38 | let eventName 39 | 40 | if (/^mouse|click/.test(name)) { 41 | eventName = 'MouseEvents' 42 | } else if (/^key/.test(name)) { 43 | eventName = 'KeyboardEvent' 44 | } else { 45 | eventName = 'HTMLEvents' 46 | } 47 | const evt = document.createEvent(eventName) 48 | 49 | evt.initEvent(name, ...opts) 50 | elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt) 51 | 52 | return elm 53 | } 54 | 55 | // TODO: duplicate end 56 | 57 | /** 58 | * 等待 ms 毫秒，返回 Promise 59 | * @param {Number} ms 60 | */ 61 | export const wait = function (ms = 50) { 62 | return new Promise((resolve) => setTimeout(() => resolve(), ms)) 63 | } 64 | 65 | /** 66 | * 等待一个 Tick，代替 Vue.nextTick，返回 Promise 67 | */ 68 | export const waitImmediate = () => wait(0) 69 | 70 | export function mountWithProps( 71 | originalComponent: any, 72 | props?: Record 73 | ) { 74 | return mount(originalComponent, props ? { props: props } : {}) 75 | } 76 | 77 | export function mountWithElement(originalComponent: any, options?: object) { 78 | const ElementPluginOption = { 79 | global: { 80 | plugins: [Element], 81 | }, 82 | } 83 | 84 | return mount(originalComponent, { 85 | ...options, 86 | ...ElementPluginOption, 87 | }) 88 | } 89 | 90 | export function warn(...args) {} 91 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "outDir": "dist", 5 | "sourceMap": false, 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "allowJs": true, 9 | "strict": false, 10 | "noUnusedLocals": true, 11 | "experimentalDecorators": true, 12 | "resolveJsonModule": true, 13 | "esModuleInterop": true, 14 | "removeComments": false, 15 | "jsx": "preserve", 16 | "lib": ["esnext", "dom"], 17 | "types": ["jest", "node"], 18 | "rootDir": ".", 19 | "paths": { 20 | "src/*": ["src/*"], 21 | "packages/*": ["packages/*"], 22 | "examples/*": ["examples/*"], 23 | "element-ui": ["./*"] 24 | } 25 | }, 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | // vue-shim.d.ts 2 | declare module '*.vue' { 3 | import { ComponentPublicInstance } from '@vue/runtime-dom' 4 | const app: new () => ComponentPublicInstance 5 | export default app 6 | } 7 | --------------------------------------------------------------------------------