diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 830a3b6ae5..286cf7a98e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -37,6 +37,7 @@ The most important directories: - [/packages/core](/packages/core) - Core code which handles workflow execution, active webhooks and workflows + - [/packages/design-system](/packages/design-system) - Vue frontend components - [/packages/editor-ui](/packages/editor-ui) - Vue frontend workflow editor - [/packages/node-dev](/packages/node-dev) - CLI to create new n8n-nodes - [/packages/nodes-base](/packages/nodes-base) - Base n8n nodes diff --git a/docker/images/n8n-custom/Dockerfile b/docker/images/n8n-custom/Dockerfile index 9136e15b17..8b39df673f 100644 --- a/docker/images/n8n-custom/Dockerfile +++ b/docker/images/n8n-custom/Dockerfile @@ -14,6 +14,7 @@ COPY lerna.json . COPY package.json . COPY packages/cli/ ./packages/cli/ COPY packages/core/ ./packages/core/ +COPY packages/design-system/ ./packages/design-system/ COPY packages/editor-ui/ ./packages/editor-ui/ COPY packages/nodes-base/ ./packages/nodes-base/ COPY packages/workflow/ ./packages/workflow/ diff --git a/packages/design-system/.browserslistrc b/packages/design-system/.browserslistrc new file mode 100644 index 0000000000..9dee646463 --- /dev/null +++ b/packages/design-system/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not ie <= 8 diff --git a/packages/design-system/.editorconfig b/packages/design-system/.editorconfig new file mode 100644 index 0000000000..9e24325d41 --- /dev/null +++ b/packages/design-system/.editorconfig @@ -0,0 +1,15 @@ +root = true + +[*] +charset = utf-8 +indent_style = tab +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[package.json] +indent_style = space +indent_size = 2 + +[*.ts] +quote_type = single diff --git a/packages/design-system/.eslintrc.js b/packages/design-system/.eslintrc.js new file mode 100644 index 0000000000..3d4832a690 --- /dev/null +++ b/packages/design-system/.eslintrc.js @@ -0,0 +1,19 @@ +module.exports = { + root: true, + env: { + node: true, + }, + extends: ['plugin:vue/essential', '@vue/typescript'], + rules: { + 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', + 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', + semi: [2, 'always'], + indent: ['error', 'tab'], + 'comma-dangle': ['error', 'always-multiline'], + 'no-tabs': 0, + 'no-labels': 0, + }, + parserOptions: { + parser: '@typescript-eslint/parser', + }, +}; diff --git a/packages/design-system/.npmignore b/packages/design-system/.npmignore new file mode 100644 index 0000000000..15ceddfd7f --- /dev/null +++ b/packages/design-system/.npmignore @@ -0,0 +1,26 @@ +.DS_Store +storybook-static + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*.md +*.stories.js +*.mdx diff --git a/packages/design-system/.storybook/font-awesome-icons.js b/packages/design-system/.storybook/font-awesome-icons.js new file mode 100644 index 0000000000..ca24a7f7a8 --- /dev/null +++ b/packages/design-system/.storybook/font-awesome-icons.js @@ -0,0 +1,169 @@ +/** + * These icons are only defined for storybook build + * Editor icons are defined seperately + */ +import { library } from '@fortawesome/fontawesome-svg-core'; +import { + faAngleDoubleLeft, + faAngleDown, + faAngleRight, + faAngleUp, + faArrowLeft, + faArrowRight, + faAt, + faBook, + faBug, + faCalendar, + faCheck, + faChevronDown, + faChevronUp, + faCode, + faCodeBranch, + faCog, + faCogs, + faClone, + faCloud, + faCloudDownloadAlt, + faCopy, + faCut, + faDotCircle, + faEdit, + faEnvelope, + faEye, + faExclamationTriangle, + faExpand, + faExternalLinkAlt, + faExchangeAlt, + faFile, + faFileArchive, + faFileCode, + faFileDownload, + faFileExport, + faFileImport, + faFilePdf, + faFolderOpen, + faGift, + faHdd, + faHome, + faHourglass, + faImage, + faInbox, + faInfo, + faInfoCircle, + faKey, + faMapSigns, + faNetworkWired, + faPause, + faPen, + faPlay, + faPlayCircle, + faPlus, + faPlusCircle, + faQuestion, + faQuestionCircle, + faRedo, + faRss, + faSave, + faSearch, + faSearchMinus, + faSearchPlus, + faServer, + faSignInAlt, + faSlidersH, + faSpinner, + faStop, + faSun, + faSync, + faSyncAlt, + faTable, + faTasks, + faTerminal, + faThLarge, + faTimes, + faTrash, + faUndo, + faUsers, + faClock, +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; + +library.add(faAngleDoubleLeft); +library.add(faAngleDown); +library.add(faAngleRight); +library.add(faAngleUp); +library.add(faArrowLeft); +library.add(faArrowRight); +library.add(faAt); +library.add(faBook); +library.add(faBug); +library.add(faCalendar); +library.add(faCheck); +library.add(faChevronDown); +library.add(faChevronUp); +library.add(faCode); +library.add(faCodeBranch); +library.add(faCog); +library.add(faCogs); +library.add(faClone); +library.add(faCloud); +library.add(faCloudDownloadAlt); +library.add(faCopy); +library.add(faCut); +library.add(faDotCircle); +library.add(faEdit); +library.add(faEnvelope); +library.add(faEye); +library.add(faExclamationTriangle); +library.add(faExpand); +library.add(faExternalLinkAlt); +library.add(faExchangeAlt); +library.add(faFile); +library.add(faFileArchive); +library.add(faFileCode); +library.add(faFileDownload); +library.add(faFileExport); +library.add(faFileImport); +library.add(faFilePdf); +library.add(faFolderOpen); +library.add(faGift); +library.add(faHdd); +library.add(faHome); +library.add(faHourglass); +library.add(faImage); +library.add(faInbox); +library.add(faInfo); +library.add(faInfoCircle); +library.add(faKey); +library.add(faMapSigns); +library.add(faNetworkWired); +library.add(faPause); +library.add(faPen); +library.add(faPlay); +library.add(faPlayCircle); +library.add(faPlus); +library.add(faPlusCircle); +library.add(faQuestion); +library.add(faQuestionCircle); +library.add(faRedo); +library.add(faRss); +library.add(faSave); +library.add(faSearch); +library.add(faSearchMinus); +library.add(faSearchPlus); +library.add(faServer); +library.add(faSignInAlt); +library.add(faSlidersH); +library.add(faSpinner); +library.add(faStop); +library.add(faSun); +library.add(faSync); +library.add(faSyncAlt); +library.add(faTable); +library.add(faTasks); +library.add(faTerminal); +library.add(faThLarge); +library.add(faTimes); +library.add(faTrash); +library.add(faUndo); +library.add(faUsers); +library.add(faClock); diff --git a/packages/design-system/.storybook/fonts.scss b/packages/design-system/.storybook/fonts.scss new file mode 100644 index 0000000000..e6e5ab65d6 --- /dev/null +++ b/packages/design-system/.storybook/fonts.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js new file mode 100644 index 0000000000..9cd8b91c03 --- /dev/null +++ b/packages/design-system/.storybook/main.js @@ -0,0 +1,38 @@ +const path = require('path'); + +module.exports = { + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + 'storybook-addon-designs', + 'storybook-addon-themes', + ], + webpackFinal: async (config, { configType }) => { + config.module.rules.push({ + test: /\.scss$/, + oneOf: [ + { + resourceQuery: /module/, + use: [ + 'vue-style-loader', + { + loader: 'css-loader', + options: { + modules: true, + }, + }, + 'sass-loader', + ], + include: path.resolve(__dirname, '../'), + }, + { + use: ['vue-style-loader', 'css-loader', 'sass-loader'], + include: path.resolve(__dirname, '../'), + }, + ], + }); + + return config; + }, +}; diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js new file mode 100644 index 0000000000..e914e03921 --- /dev/null +++ b/packages/design-system/.storybook/preview.js @@ -0,0 +1,65 @@ +import './font-awesome-icons'; +import './storybook.scss'; + +import lang from 'element-ui/lib/locale/lang/en'; +import locale from 'element-ui/lib/locale'; + +import Vue from 'vue'; + +locale.use(lang); + +// https://github.com/storybookjs/storybook/issues/6153 +Vue.prototype.toJSON = function () { + return this; +}; + +export const parameters = { + actions: { + argTypesRegex: '^on[A-Z].*', + }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + backgrounds: { + default: '--color-background-xlight', + values: [ + { + name: '--color-background-dark', + value: 'var(--color-background-dark)', + }, + { + name: '--color-background-base', + value: 'var(--color-background-base)', + }, + { + name: '--color-background-light', + value: 'var(--color-background-light)', + }, + { + name: '--color-background-lighter', + value: 'var(--color-background-lighter)', + }, + { + name: '--color-background-xlight', + value: 'var(--color-background-xlight)', + }, + ], + }, + themes: { + list: [ + { + name: 'dark', + class: 'theme-dark', + color: '#000', + }, + ], + }, + options: { + storySort: { + order: ['Docs', 'Styleguide', 'Atoms'], + }, + }, +}; diff --git a/packages/design-system/.storybook/storybook.scss b/packages/design-system/.storybook/storybook.scss new file mode 100644 index 0000000000..604fe53985 --- /dev/null +++ b/packages/design-system/.storybook/storybook.scss @@ -0,0 +1,12 @@ +@use "./fonts.scss"; + +@use "~/theme/src/base.scss" with ( + $font-path: '~element-ui/lib/theme-chalk/fonts', +); + +@use "~/theme/src/reset.scss"; +@use "~/theme/src/index.scss"; + +.multi-container > * { + margin-bottom: 10px; +} diff --git a/packages/design-system/LICENSE.md b/packages/design-system/LICENSE.md new file mode 100644 index 0000000000..3c24ea75af --- /dev/null +++ b/packages/design-system/LICENSE.md @@ -0,0 +1,228 @@ +“Commons Clause” License Condition v1.0 + +The Software is provided to you by the Licensor under the +License, as defined below, subject to the following condition. + +Without limiting other conditions in the License, the grant +of rights under the License will not include, and the License +does not grant to you, the right to Sell the Software. + +For purposes of the foregoing, “Sell” means practicing any or +all of the rights granted to you under the License to provide +to third parties, for a fee or other consideration (including +without limitation fees for hosting or consulting/ support +services related to the Software), a product or service whose +value derives, entirely or substantially, from the functionality +of the Software. Any license notice or attribution required by +the License must also include this Commons Clause License +Condition notice. + +Software: n8n + +License: Apache 2.0 with Commons Clause + +Licensor: n8n GmbH + +--- + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright 2021 n8n GmbH + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/design-system/README.md b/packages/design-system/README.md new file mode 100644 index 0000000000..044b67facd --- /dev/null +++ b/packages/design-system/README.md @@ -0,0 +1,45 @@ +# n8n-design-system + +A component system for [n8n](https://n8n.io) using Storybook to preview. + +## Project setup + +``` +npm install +``` + +### Compiles and hot-reloads for development + +``` +npm run storybook +``` + +### Build static pages + +``` +npm run build:storybook +``` + +### Run your unit tests + +``` +npm run test:unit +``` + +### Lints and fixes files + +``` +npm run lint +``` + +### Build css files + +``` +npm run build:theme +``` + +### Monitor theme files and build any changes + +``` +npm run watch:theme +``` diff --git a/packages/design-system/babel.config.js b/packages/design-system/babel.config.js new file mode 100644 index 0000000000..7a1252c310 --- /dev/null +++ b/packages/design-system/babel.config.js @@ -0,0 +1,6 @@ +module.exports = { + presets: ['@vue/cli-plugin-babel/preset'], + plugins: [ + ['@babel/plugin-proposal-private-property-in-object', { loose: true }], + ], +}; diff --git a/packages/design-system/gulpfile.js b/packages/design-system/gulpfile.js new file mode 100644 index 0000000000..b3da277cd9 --- /dev/null +++ b/packages/design-system/gulpfile.js @@ -0,0 +1,36 @@ +'use strict'; + +const gulp = require('gulp'); +const sass = require('gulp-dart-sass'); +const autoprefixer = require('gulp-autoprefixer'); +const cleanCSS = require('gulp-clean-css'); + +gulp.task('build:theme', gulp.series([compileTheme, copyThemeFonts])); + +gulp.task( + 'watch:theme', + gulp.series([ + 'build:theme', + () => { + gulp.watch('./theme/src/**/*.scss', gulp.series(['build:theme'])); + }, + ]), +); + +function compileTheme() { + return gulp + .src('./theme/src/index.scss') + .pipe(sass.sync()) + .pipe( + autoprefixer({ + browsers: ['ie > 9', 'last 2 versions'], + cascade: false, + }), + ) + .pipe(cleanCSS()) + .pipe(gulp.dest('./theme/dist')); +} + +function copyThemeFonts() { + return gulp.src('./theme/src/fonts/**').pipe(gulp.dest('./theme/dist/fonts')); +} diff --git a/packages/design-system/jest.config.js b/packages/design-system/jest.config.js new file mode 100644 index 0000000000..ce8dfc33cd --- /dev/null +++ b/packages/design-system/jest.config.js @@ -0,0 +1,3 @@ +module.exports = { + preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', +}; diff --git a/packages/design-system/package.json b/packages/design-system/package.json new file mode 100644 index 0000000000..399ab82047 --- /dev/null +++ b/packages/design-system/package.json @@ -0,0 +1,81 @@ +{ + "name": "n8n-design-system", + "version": "0.1.0", + "license": "SEE LICENSE IN LICENSE.md", + "homepage": "https://n8n.io", + "author": { + "name": "Mutasem Aldmour", + "email": "mutasem@n8n.io" + }, + "main": "src/main.js", + "repository": { + "type": "git", + "url": "git+https://github.com/n8n-io/n8n.git" + }, + "scripts": { + "build": "npm run build:theme", + "build:vue": "vue-cli-service build --target lib ./src/main.js --report", + "dev": "npm run watch:theme", + "test": "npm run test:unit", + "build:storybook": "build-storybook", + "storybook": "start-storybook -p 6006", + "test:unit": "vue-cli-service test:unit --passWithNoTests", + "lint": "vue-cli-service lint", + "build:theme": "gulp build:theme", + "watch:theme": "gulp watch:theme", + "tslint": "tslint -p tsconfig.json -c tslint.json", + "tslintfix": "tslint --fix -p tsconfig.json -c tslint.json" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "1.x", + "@fortawesome/free-solid-svg-icons": "5.x", + "@fortawesome/vue-fontawesome": "2.x", + "core-js": "3.x", + "element-ui": "2.13.x" + }, + "devDependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-solid-svg-icons": "^5.15.3", + "@fortawesome/vue-fontawesome": "^2.0.2", + "core-js": "^3.6.5", + "element-ui": "~2.13.0", + "storybook-addon-themes": "^6.1.0", + "vue": "^2.6.11", + "vue-class-component": "^7.2.3", + "vue-property-decorator": "^9.1.2", + "@babel/core": "^7.14.6", + "@storybook/addon-actions": "^6.3.6", + "@storybook/addon-essentials": "^6.3.6", + "@storybook/addon-links": "^6.3.6", + "@storybook/vue": "^6.3.6", + "@types/jest": "^26.0.13", + "@typescript-eslint/eslint-plugin": "^4.18.0", + "@typescript-eslint/parser": "^4.18.0", + "@vue/cli-plugin-babel": "~4.5.0", + "@vue/cli-plugin-eslint": "~4.5.0", + "@vue/cli-plugin-typescript": "~4.5.0", + "@vue/cli-plugin-unit-jest": "~4.5.0", + "@vue/cli-service": "~4.5.0", + "@vue/eslint-config-prettier": "^6.0.0", + "@vue/eslint-config-typescript": "^7.0.0", + "@vue/test-utils": "^1.0.3", + "babel-loader": "^8.2.2", + "eslint": "^6.8.0", + "eslint-plugin-prettier": "^3.3.1", + "eslint-plugin-vue": "^6.2.2", + "fibers": "^5.0.0", + "gulp": "^4.0.0", + "prettier": "^2.2.1", + "sass": "^1.26.5", + "sass-loader": "^8.0.2", + "storybook-addon-designs": "^6.0.1", + "typescript": "~3.9.7", + "vue-loader": "^15.9.7", + "vue-template-compiler": "^2.6.11", + "gulp-autoprefixer": "^4.0.0", + "gulp-clean-css": "^4.3.0", + "gulp-dart-sass": "^1.0.2", + "node-notifier": ">=8.0.1", + "trim": ">=0.0.3" + } +} diff --git a/packages/design-system/src/components/N8nButton/Button.stories.js b/packages/design-system/src/components/N8nButton/Button.stories.js new file mode 100644 index 0000000000..504ea1af38 --- /dev/null +++ b/packages/design-system/src/components/N8nButton/Button.stories.js @@ -0,0 +1,122 @@ +import N8nButton from './Button.vue'; +import { action } from '@storybook/addon-actions'; + +export default { + title: 'Atoms/Button', + component: N8nButton, + argTypes: { + label: { + control: 'text', + }, + title: { + control: 'text', + }, + type: { + control: 'select', + options: ['primary', 'outline', 'light', 'text'], + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'], + }, + }, + loading: { + control: { + type: 'boolean', + }, + }, + icon: { + control: { + type: 'text', + }, + }, + iconSize: { + control: { + type: 'select', + options: ['small', 'medium', 'large'], + }, + }, + circle: { + control: { + type: 'boolean', + }, + }, + fullWidth: { + type: 'boolean', + }, + theme: { + type: 'select', + options: ['success', 'danger', 'warning'], + }, + float: { + type: 'select', + options: ['left', 'right'], + }, + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147', + }, + }, +}; + +const methods = { + onClick: action('click'), +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nButton, + }, + template: '', + methods, +}); + +export const Button = Template.bind({}); +Button.args = { + label: 'Button', +}; + +const ManyTemplate = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nButton, + }, + template: + '
', + methods, +}); + +export const Primary = ManyTemplate.bind({}); +Primary.args = { + type: 'primary', + label: 'Button', +}; + +export const Outline = ManyTemplate.bind({}); +Outline.args = { + type: 'outline', + label: 'Button', +}; + +export const Light = ManyTemplate.bind({}); +Light.args = { + type: 'light', + label: 'Button', +}; + +export const WithIcon = ManyTemplate.bind({}); +WithIcon.args = { + label: 'Button', + icon: 'plus-circle', +}; + +export const Text = ManyTemplate.bind({}); +Text.args = { + type: 'text', + label: 'Button', + icon: 'plus-circle', +}; diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue new file mode 100644 index 0000000000..fc10624442 --- /dev/null +++ b/packages/design-system/src/components/N8nButton/Button.vue @@ -0,0 +1,299 @@ + + + + + diff --git a/packages/design-system/src/components/N8nButton/index.d.ts b/packages/design-system/src/components/N8nButton/index.d.ts new file mode 100644 index 0000000000..b70b0b8418 --- /dev/null +++ b/packages/design-system/src/components/N8nButton/index.d.ts @@ -0,0 +1,46 @@ +import { N8nComponent, N8nComponentSize } from '../component'; + +/** Button type */ +export type ButtonType = 'primary' | 'outline' | 'light' | 'text'; + +/** Button themes */ +export type ButtonTheme = 'success' | 'warning' | 'danger'; + +/** Button Component */ +export declare class N8nButton extends N8nComponent { + /** Button text */ + label: string; + + /** Button title on hover */ + title: string; + + /** Color scheme */ + theme: ButtonTheme; + + /** Button size */ + size: N8nComponentSize; + + /** Button type */ + type: ButtonType; + + /** Determine whether it's a circular button */ + circle: boolean; + + /** Determine whether it's loading */ + loading: boolean; + + /** Disable the button */ + disabled: boolean; + + /** Button icon, accepts an icon name of font awesome icon component */ + icon: string; + + /** Size of icon */ + iconSize: N8nComponentSize; + + /** Full width */ + fullWidth: boolean; + + /** Float left or right */ + float: boolean; +} diff --git a/packages/design-system/src/components/N8nButton/index.js b/packages/design-system/src/components/N8nButton/index.js new file mode 100644 index 0000000000..f477689bf3 --- /dev/null +++ b/packages/design-system/src/components/N8nButton/index.js @@ -0,0 +1,3 @@ +import N8nButton from './Button.vue'; + +export default N8nButton; diff --git a/packages/design-system/src/components/N8nIcon/Icon.stories.js b/packages/design-system/src/components/N8nIcon/Icon.stories.js new file mode 100644 index 0000000000..0b626a5768 --- /dev/null +++ b/packages/design-system/src/components/N8nIcon/Icon.stories.js @@ -0,0 +1,45 @@ +import N8nIcon from './Icon.vue'; + +export default { + title: 'Atoms/Icon', + component: N8nIcon, + argTypes: { + icon: { + control: 'text', + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'], + }, + }, + spin: { + control: { + type: 'boolean', + }, + }, + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nIcon, + }, + template: '', +}); + +export const Clock = Template.bind({}); +Clock.args = { + icon: 'clock', +}; + +export const Plus = Template.bind({}); +Plus.args = { + icon: 'plus', +}; + +export const Stop = Template.bind({}); +Stop.args = { + icon: 'stop', +}; diff --git a/packages/design-system/src/components/N8nIcon/Icon.vue b/packages/design-system/src/components/N8nIcon/Icon.vue new file mode 100644 index 0000000000..52457db0ac --- /dev/null +++ b/packages/design-system/src/components/N8nIcon/Icon.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/packages/design-system/src/components/N8nIcon/index.d.ts b/packages/design-system/src/components/N8nIcon/index.d.ts new file mode 100644 index 0000000000..62181a33b6 --- /dev/null +++ b/packages/design-system/src/components/N8nIcon/index.d.ts @@ -0,0 +1,13 @@ +import { N8nComponent, N8nComponentSize } from '../component'; + +/** Button Component */ +export declare class N8nIcon extends N8nComponent { + /** icon name, accepts an icon name of font awesome icon component */ + icon: string; + + /** Size of icon */ + size: N8nComponentSize; + + /** Whether icon should be spinning */ + spin: boolean; +} diff --git a/packages/design-system/src/components/N8nIcon/index.js b/packages/design-system/src/components/N8nIcon/index.js new file mode 100644 index 0000000000..aeb12bb638 --- /dev/null +++ b/packages/design-system/src/components/N8nIcon/index.js @@ -0,0 +1,3 @@ +import Icon from './Icon.vue'; + +export default Icon; diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.stories.js b/packages/design-system/src/components/N8nIconButton/IconButton.stories.js new file mode 100644 index 0000000000..fe99328783 --- /dev/null +++ b/packages/design-system/src/components/N8nIconButton/IconButton.stories.js @@ -0,0 +1,98 @@ +import N8nIconButton from './IconButton.vue'; +import { action } from '@storybook/addon-actions'; + +export default { + title: 'Atoms/Icon Button', + component: N8nIconButton, + argTypes: { + type: { + control: 'select', + options: ['primary', 'outline', 'light', 'text'], + }, + title: { + control: 'text', + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large', 'xlarge'], + }, + }, + loading: { + control: { + type: 'boolean', + }, + }, + icon: { + control: { + type: 'text', + }, + }, + theme: { + control: { + type: 'select', + options: ['success', 'warning', 'danger'], + }, + }, + }, + parameters: { + backgrounds: { default: '--color-background-light' }, + }, +}; + +const methods = { + onClick: action('click'), +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nIconButton, + }, + template: '', + methods, +}); + +export const Button = Template.bind({}); +Button.args = { + icon: 'plus', + title: 'my title', +}; + +const ManyTemplate = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nIconButton, + }, + template: + '
', + methods, +}); + +export const Primary = ManyTemplate.bind({}); +Primary.args = { + icon: 'plus', + title: 'my title', + type: 'primary', +}; + +export const Outline = ManyTemplate.bind({}); +Outline.args = { + icon: 'plus', + title: 'my title', + type: 'outline', +}; + +export const Light = ManyTemplate.bind({}); +Light.args = { + icon: 'plus', + title: 'my title', + type: 'light', +}; + +export const Text = ManyTemplate.bind({}); +Text.args = { + icon: 'plus', + title: 'my title', + type: 'text', +}; diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue new file mode 100644 index 0000000000..0ace9defb8 --- /dev/null +++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue @@ -0,0 +1,60 @@ + + + diff --git a/packages/design-system/src/components/N8nIconButton/index.d.ts b/packages/design-system/src/components/N8nIconButton/index.d.ts new file mode 100644 index 0000000000..d939a7e040 --- /dev/null +++ b/packages/design-system/src/components/N8nIconButton/index.d.ts @@ -0,0 +1,29 @@ +import { N8nComponent, N8nComponentSize } from '../component'; +import { ButtonTheme, ButtonType } from '../N8nButton'; + +/** Icon Button Component */ +export declare class N8nIconButton extends N8nComponent { + /** Button type */ + type: ButtonType; + + /** Button title on hover */ + title: string; + + /** Button size */ + size: N8nComponentSize | 'xlarge'; + + /** icon size */ + iconSize: N8nComponentSize; + + /** Determine whether it's loading */ + loading: boolean; + + /** Disable the button */ + disabled: boolean; + + /** Button icon, accepts an icon name of font awesome icon component */ + icon: string; + + /** Button theme */ + theme: ButtonTheme; +} diff --git a/packages/design-system/src/components/N8nIconButton/index.js b/packages/design-system/src/components/N8nIconButton/index.js new file mode 100644 index 0000000000..bcad6cbea7 --- /dev/null +++ b/packages/design-system/src/components/N8nIconButton/index.js @@ -0,0 +1,3 @@ +import IconButton from './IconButton.vue'; + +export default IconButton; diff --git a/packages/design-system/src/components/N8nInput/Input.stories.js b/packages/design-system/src/components/N8nInput/Input.stories.js new file mode 100644 index 0000000000..ee8c637f9a --- /dev/null +++ b/packages/design-system/src/components/N8nInput/Input.stories.js @@ -0,0 +1,122 @@ +import N8nInput from './Input.vue'; +import N8nIcon from '../N8nIcon'; +import { action } from '@storybook/addon-actions'; + +export default { + title: 'Atoms/Input', + component: N8nInput, + argTypes: { + type: { + control: 'select', + options: ['text', 'textarea'], + }, + placeholder: { + control: 'text', + }, + disabled: { + control: { + type: 'boolean', + }, + }, + size: { + control: 'select', + options: ['xlarge', 'large', 'medium', 'small', 'mini'], + }, + }, + parameters: { + backgrounds: { default: '--color-background-light' }, + }, +}; + +const methods = { + onInput: action('input'), + onFocus: action('input'), + onChange: action('input'), +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nInput, + }, + template: '', + data() { + return { + val: '', + }; + }, + methods, +}); + +export const Input = Template.bind({}); +Input.args = { + placeholder: 'placeholder...', +}; + +const ManyTemplate = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nInput, + }, + template: + '
', + methods, + data() { + return { + val: '', + }; + }, +}); + +export const Text = ManyTemplate.bind({}); +Text.args = { + type: 'text', + placeholder: 'placeholder...', +}; + +export const TextArea = ManyTemplate.bind({}); +TextArea.args = { + type: 'textarea', + placeholder: 'placeholder...', +}; + + +const WithPrefix = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nIcon, + N8nInput, + }, + template: '', + data() { + return { + val: '', + }; + }, + methods, +}); + +export const WithPrefixIcon = WithPrefix.bind({}); +WithPrefixIcon.args = { + placeholder: 'placeholder...', +}; + +const WithSuffix = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nIcon, + N8nInput, + }, + template: '', + data() { + return { + val: '', + }; + }, + methods, +}); + +export const WithSuffixIcon = WithSuffix.bind({}); +WithSuffixIcon.args = { + placeholder: 'placeholder...', +}; diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue new file mode 100644 index 0000000000..50734fcdee --- /dev/null +++ b/packages/design-system/src/components/N8nInput/Input.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/packages/design-system/src/components/N8nInput/index.js b/packages/design-system/src/components/N8nInput/index.js new file mode 100644 index 0000000000..bbd9777415 --- /dev/null +++ b/packages/design-system/src/components/N8nInput/index.js @@ -0,0 +1,3 @@ +import N8nInput from './Input.vue'; + +export default N8nInput; diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.js b/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.js new file mode 100644 index 0000000000..828d22b113 --- /dev/null +++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.js @@ -0,0 +1,27 @@ +import N8nInputLabel from './InputLabel.vue'; +import N8nInput from '../N8nInput'; + +export default { + title: 'Atoms/Input Label', + component: N8nInputLabel, + argTypes: {}, + parameters: { + backgrounds: { default: '--color-background-light' }, + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nInputLabel, + N8nInput, + }, + template: + '
', +}); + +export const InputLabel = Template.bind({}); +InputLabel.args = { + label: 'input label', + tooltipText: 'more info...', +}; diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue new file mode 100644 index 0000000000..c800f73de8 --- /dev/null +++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/packages/design-system/src/components/N8nInputLabel/index.js b/packages/design-system/src/components/N8nInputLabel/index.js new file mode 100644 index 0000000000..0b6438a472 --- /dev/null +++ b/packages/design-system/src/components/N8nInputLabel/index.js @@ -0,0 +1,3 @@ +import N8nInputLabel from './InputLabel.vue'; + +export default N8nInputLabel; diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.js b/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.js new file mode 100644 index 0000000000..aec44f1838 --- /dev/null +++ b/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.js @@ -0,0 +1,94 @@ +import N8nInputNumber from './InputNumber.vue'; +import { action } from '@storybook/addon-actions'; + +export default { + title: 'Atoms/Input Number', + component: N8nInputNumber, + argTypes: { + placeholder: { + control: 'text', + }, + disabled: { + control: { + type: 'boolean', + }, + }, + controls: { + control: { + type: 'boolean', + }, + }, + precision: { + control: { + type: 'number', + }, + }, + min: { + control: { + type: 'number', + }, + }, + max: { + control: { + type: 'number', + }, + }, + step: { + control: { + type: 'number', + }, + }, + title: { + control: 'text', + }, + }, + parameters: { + backgrounds: { default: '--color-background-light' }, + }, +}; + +const methods = { + onInput: action('input'), +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nInputNumber, + }, + template: '', + data() { + return { + val: null, + }; + }, + methods, +}); + +export const Input = Template.bind({}); +Input.args = { + placeholder: 'placeholder...', + controls: false, +}; + +const ManyTemplate = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nInputNumber, + }, + template: + '
', + methods, + data() { + return { + val: '', + }; + }, +}); + +export const Sizes = ManyTemplate.bind({}); +Sizes.args = { + placeholder: 'placeholder...', + controls: false, +}; + diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue new file mode 100644 index 0000000000..b2ac52b2c8 --- /dev/null +++ b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue @@ -0,0 +1,7 @@ + diff --git a/packages/design-system/src/components/N8nInputNumber/index.js b/packages/design-system/src/components/N8nInputNumber/index.js new file mode 100644 index 0000000000..187d727e0e --- /dev/null +++ b/packages/design-system/src/components/N8nInputNumber/index.js @@ -0,0 +1,3 @@ +import N8nInputNumber from './InputNumber.vue'; + +export default N8nInputNumber; diff --git a/packages/design-system/src/components/N8nOption/Option.vue b/packages/design-system/src/components/N8nOption/Option.vue new file mode 100644 index 0000000000..f7e0ef8a49 --- /dev/null +++ b/packages/design-system/src/components/N8nOption/Option.vue @@ -0,0 +1,7 @@ + diff --git a/packages/design-system/src/components/N8nOption/index.js b/packages/design-system/src/components/N8nOption/index.js new file mode 100644 index 0000000000..c4c5c93ec8 --- /dev/null +++ b/packages/design-system/src/components/N8nOption/index.js @@ -0,0 +1,3 @@ +import N8nOption from './Option.vue'; + +export default N8nOption; diff --git a/packages/design-system/src/components/N8nSelect/Select.stories.js b/packages/design-system/src/components/N8nSelect/Select.stories.js new file mode 100644 index 0000000000..824c858ace --- /dev/null +++ b/packages/design-system/src/components/N8nSelect/Select.stories.js @@ -0,0 +1,138 @@ +import N8nSelect from './Select.vue'; +import N8nOption from '../N8nOption'; +import { action } from '@storybook/addon-actions'; + +export default { + title: 'Atoms/Select', + component: N8nSelect, + argTypes: { + disabled: { + control: { + type: 'boolean', + }, + }, + size: { + control: { + type: 'select', + options: ['large', 'medium', 'small', 'mini'], + }, + }, + loading: { + control: { + type: 'boolean', + }, + }, + filterable: { + control: { + type: 'boolean', + }, + }, + defaultFirstOption: { + control: { + type: 'boolean', + }, + }, + }, + parameters: { + backgrounds: { default: '--color-background-light' }, + }, +}; + +const methods = { + onInput: action('input'), + onChange: action('change'), +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nSelect, + N8nOption, + }, + template: 'op1op2', + data() { + return { + val: '', + }; + }, + methods, +}); + +export const Input = Template.bind({}); + +export const Filterable = Template.bind({}); +Filterable.args = { + filterable: true, + defaultFirstOption: true, +}; + +const selects = ['large', 'medium', 'small', 'mini'].map((size) => `op1op2`).join(''); + +const ManyTemplate = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nSelect, + N8nOption, + }, + template: `
${selects}
`, + methods, + data() { + return { + val: '', + }; + }, +}); + +export const Sizes = ManyTemplate.bind({}); +Sizes.args = { + type: 'text', + label: 'text input:', + placeholder: 'placeholder...', +}; + +const selectsWithIcon = ['xlarge', 'large', 'medium', 'small', 'mini'].map((size) => `op1op2`).join(''); + +const ManyTemplateWithIcon = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nSelect, + N8nOption, + }, + template: `
${selectsWithIcon}
`, + methods, + data() { + return { + val: '', + }; + }, +}); + +export const WithIcon = ManyTemplateWithIcon.bind({}); +WithIcon.args = { + type: 'text', + label: 'text input:', + placeholder: 'placeholder...', +}; + + +const LimitedWidthTemplate = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nSelect, + N8nOption, + }, + template: '
op1op2 test very long ipsum lipsum test jskdfjsld kjfdslk jfdslkfj lksdjf
', + data() { + return { + val: '', + }; + }, + methods, +}); + +export const LimitedWidth = LimitedWidthTemplate.bind({}); +LimitedWidth.args = { + type: 'text', + label: 'text input:', + placeholder: 'placeholder...', +}; diff --git a/packages/design-system/src/components/N8nSelect/Select.vue b/packages/design-system/src/components/N8nSelect/Select.vue new file mode 100644 index 0000000000..4646cbc8ea --- /dev/null +++ b/packages/design-system/src/components/N8nSelect/Select.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/packages/design-system/src/components/N8nSelect/index.js b/packages/design-system/src/components/N8nSelect/index.js new file mode 100644 index 0000000000..a9f34a52ee --- /dev/null +++ b/packages/design-system/src/components/N8nSelect/index.js @@ -0,0 +1,3 @@ +import N8nSelect from './Select.vue'; + +export default N8nSelect; diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.stories.js b/packages/design-system/src/components/N8nSpinner/Spinner.stories.js new file mode 100644 index 0000000000..82b6436412 --- /dev/null +++ b/packages/design-system/src/components/N8nSpinner/Spinner.stories.js @@ -0,0 +1,24 @@ +import N8nSpinner from './Spinner.vue'; + +export default { + title: 'Atoms/Spinner', + component: N8nSpinner, + argTypes: { + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'], + }, + }, + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nSpinner, + }, + template: '', +}); + +export const Spinner = Template.bind({}); diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.vue b/packages/design-system/src/components/N8nSpinner/Spinner.vue new file mode 100644 index 0000000000..a39a3c5679 --- /dev/null +++ b/packages/design-system/src/components/N8nSpinner/Spinner.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/design-system/src/components/N8nSpinner/index.d.ts b/packages/design-system/src/components/N8nSpinner/index.d.ts new file mode 100644 index 0000000000..d2a0ce12f5 --- /dev/null +++ b/packages/design-system/src/components/N8nSpinner/index.d.ts @@ -0,0 +1,7 @@ +import { N8nComponent, N8nComponentSize } from '../component'; + +/** Spinner Component */ +export declare class N8nSpinner extends N8nComponent { + /** Icon size */ + size: N8nComponentSize; +} diff --git a/packages/design-system/src/components/N8nSpinner/index.js b/packages/design-system/src/components/N8nSpinner/index.js new file mode 100644 index 0000000000..b6dadd9b52 --- /dev/null +++ b/packages/design-system/src/components/N8nSpinner/index.js @@ -0,0 +1,3 @@ +import Spinner from './Spinner.vue'; + +export default Spinner; diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.stories.js b/packages/design-system/src/components/N8nTooltip/Tooltip.stories.js new file mode 100644 index 0000000000..60c2a410e4 --- /dev/null +++ b/packages/design-system/src/components/N8nTooltip/Tooltip.stories.js @@ -0,0 +1,49 @@ +import N8nTooltip from './Tooltip.vue'; + +export default { + title: 'Atoms/Tooltip', + component: N8nTooltip, + argTypes: { + effect: { + control: 'select', + options: ['dark', 'light'], + }, + placement: { + control: 'select', + options: [ + 'top', + 'top-start', + 'top-end', + 'bottom', + 'bottom-start', + 'bottom-end', + 'left', + 'left-start', + 'left-end', + 'right', + 'right-start', + 'right-end', + ], + }, + disabled: { + control: { type: 'boolean' }, + }, + }, + parameters: { + backgrounds: { default: '--color-background-light' }, + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { + N8nTooltip, + }, + template: + '
yo
', +}); + +export const Tooltip = Template.bind({}); +Tooltip.args = { + content: '...', +}; diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue new file mode 100644 index 0000000000..123be53762 --- /dev/null +++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue @@ -0,0 +1,7 @@ + diff --git a/packages/design-system/src/components/N8nTooltip/index.js b/packages/design-system/src/components/N8nTooltip/index.js new file mode 100644 index 0000000000..1b31abd702 --- /dev/null +++ b/packages/design-system/src/components/N8nTooltip/index.js @@ -0,0 +1,3 @@ +import N8nTooltip from './Tooltip.vue'; + +export default N8nTooltip; diff --git a/packages/design-system/src/components/component.d.ts b/packages/design-system/src/components/component.d.ts new file mode 100644 index 0000000000..006d5a85ec --- /dev/null +++ b/packages/design-system/src/components/component.d.ts @@ -0,0 +1,10 @@ +import Vue from 'vue'; + +/** N8n component common definition */ +export declare class N8nComponent extends Vue { + /** Install component into Vue */ + static install(vue: typeof Vue): void; +} + +/** Component size definition for button, input, etc */ +export type N8nComponentSize = 'large' | 'medium' | 'small'; diff --git a/packages/design-system/src/components/index.d.ts b/packages/design-system/src/components/index.d.ts new file mode 100644 index 0000000000..19b518d8ae --- /dev/null +++ b/packages/design-system/src/components/index.d.ts @@ -0,0 +1 @@ +declare module './N8nButton'; diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js new file mode 100644 index 0000000000..fea7b995ac --- /dev/null +++ b/packages/design-system/src/components/index.js @@ -0,0 +1,23 @@ +import N8nButton from './N8nButton'; +import N8nIcon from './N8nIcon'; +import N8nIconButton from './N8nIconButton'; +import N8nInput from './N8nInput'; +import N8nInputLabel from './N8nInputLabel'; +import N8nInputNumber from './N8nInputNumber'; +import N8nOption from './N8nOption'; +import N8nSelect from './N8nSelect'; +import N8nSpinner from './N8nSpinner'; +import N8nTooltip from './N8nTooltip'; + +export { + N8nButton, + N8nIcon, + N8nIconButton, + N8nInput, + N8nInputLabel, + N8nInputNumber, + N8nOption, + N8nSelect, + N8nSpinner, + N8nTooltip, +}; diff --git a/packages/design-system/src/docs/Introduction.stories.mdx b/packages/design-system/src/docs/Introduction.stories.mdx new file mode 100644 index 0000000000..961486cf9e --- /dev/null +++ b/packages/design-system/src/docs/Introduction.stories.mdx @@ -0,0 +1,5 @@ + + +# Welcome to n8n Storybook + +This project includes components that make up n8n editor. diff --git a/packages/design-system/src/main.d.ts b/packages/design-system/src/main.d.ts new file mode 100644 index 0000000000..ed730c2988 --- /dev/null +++ b/packages/design-system/src/main.d.ts @@ -0,0 +1 @@ +declare module 'n8n-design-system'; diff --git a/packages/design-system/src/main.js b/packages/design-system/src/main.js new file mode 100644 index 0000000000..a214d84b97 --- /dev/null +++ b/packages/design-system/src/main.js @@ -0,0 +1,10 @@ +import * as components from './components'; + +for (const key in components) { + const component = components[key]; + component.install = function (Vue) { + Vue.component(component.name, component); + }; +} + +export * from './components'; diff --git a/packages/design-system/src/shims-element-ui.d.ts b/packages/design-system/src/shims-element-ui.d.ts new file mode 100644 index 0000000000..6af21baf4b --- /dev/null +++ b/packages/design-system/src/shims-element-ui.d.ts @@ -0,0 +1,7 @@ +declare module 'element-ui/lib/button'; +declare module 'element-ui/lib/input'; +declare module 'element-ui/lib/tooltip'; +declare module 'element-ui/lib/input-number'; +declare module 'element-ui/lib/select'; +declare module 'element-ui/lib/option'; + diff --git a/packages/design-system/src/shims-tsx.d.ts b/packages/design-system/src/shims-tsx.d.ts new file mode 100644 index 0000000000..f92b1fd7e3 --- /dev/null +++ b/packages/design-system/src/shims-tsx.d.ts @@ -0,0 +1,13 @@ +import Vue, { VNode } from 'vue'; + +declare global { + namespace JSX { + // tslint:disable no-empty-interface + interface Element extends VNode {} + // tslint:disable no-empty-interface + interface ElementClass extends Vue {} + interface IntrinsicElements { + [elem: string]: any; + } + } +} diff --git a/packages/design-system/src/shims-vue.d.ts b/packages/design-system/src/shims-vue.d.ts new file mode 100644 index 0000000000..b3a21c6cdb --- /dev/null +++ b/packages/design-system/src/shims-vue.d.ts @@ -0,0 +1,4 @@ +declare module '*.vue' { + import Vue from 'vue'; + export default Vue; +} diff --git a/packages/design-system/src/styleguide/ColorCircles.vue b/packages/design-system/src/styleguide/ColorCircles.vue new file mode 100644 index 0000000000..3fc46b3b71 --- /dev/null +++ b/packages/design-system/src/styleguide/ColorCircles.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/packages/design-system/src/styleguide/Sizes.vue b/packages/design-system/src/styleguide/Sizes.vue new file mode 100644 index 0000000000..373d6f7a26 --- /dev/null +++ b/packages/design-system/src/styleguide/Sizes.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/packages/design-system/src/styleguide/TextClasses.vue b/packages/design-system/src/styleguide/TextClasses.vue new file mode 100644 index 0000000000..0948ebfab9 --- /dev/null +++ b/packages/design-system/src/styleguide/TextClasses.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/design-system/src/styleguide/VariableTable.vue b/packages/design-system/src/styleguide/VariableTable.vue new file mode 100644 index 0000000000..6f7c48dd4f --- /dev/null +++ b/packages/design-system/src/styleguide/VariableTable.vue @@ -0,0 +1,80 @@ + + + + + diff --git a/packages/design-system/src/styleguide/border.stories.mdx b/packages/design-system/src/styleguide/border.stories.mdx new file mode 100644 index 0000000000..d5a83e064d --- /dev/null +++ b/packages/design-system/src/styleguide/border.stories.mdx @@ -0,0 +1,49 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import VariableTable from './VariableTable.vue'; + + + +# Border Radius + + + + {{ + template: ``, + components: { + VariableTable, + }, + }} + + + +# Border Width + + + + {{ + template: ``, + components: { + VariableTable, + }, + }} + + + + + + {{ + template: ``, + components: { + VariableTable, + }, + }} + + diff --git a/packages/design-system/src/styleguide/colors.stories.mdx b/packages/design-system/src/styleguide/colors.stories.mdx new file mode 100644 index 0000000000..16e372bcd3 --- /dev/null +++ b/packages/design-system/src/styleguide/colors.stories.mdx @@ -0,0 +1,131 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import ColorCircles from './ColorCircles.vue'; + + + +# Colors + +## Primary + + + + {{ + template: ``, + components: { + ColorCircles, + }, + }} + + + +## Outline + + + + {{ + template: ``, + components: { + ColorCircles, + }, + }} + + + +## Success + + + + {{ + template: ``, + components: { + ColorCircles, + }, + }} + + + +## Warning + + + + {{ + template: ``, + components: { + ColorCircles, + }, + }} + + + +## Danger + + + + {{ + template: ``, + components: { + ColorCircles, + }, + }} + + + +## Info + + + + {{ + template: ``, + components: { + ColorCircles, + }, + }} + + + +## Text + + + + {{ + template: ``, + components: { + ColorCircles, + }, + }} + + + +## Foreground + + + + {{ + template: ``, + components: { + ColorCircles, + }, + }} + + + +## Background + + + + {{ + template: ``, + components: { + ColorCircles, + }, + }} + + diff --git a/packages/design-system/src/styleguide/fonts.stories.mdx b/packages/design-system/src/styleguide/fonts.stories.mdx new file mode 100644 index 0000000000..ebf468b385 --- /dev/null +++ b/packages/design-system/src/styleguide/fonts.stories.mdx @@ -0,0 +1,59 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import Sizes from './Sizes.vue'; +import VariableTable from './VariableTable.vue'; + + + +# Font + +## Font Sizes + + + + {{ + template: ``, + components: { + Sizes, + }, + }} + + + +## Line Heights + + + + {{ + template: ``, + components: { + VariableTable, + }, + }} + + + +## Font Weights + + + + {{ + template: ``, + components: { + VariableTable, + }, + }} + + + +## Font Family + + + + {{ + template: ``, + components: { + VariableTable, + }, + }} + + diff --git a/packages/design-system/src/styleguide/spacing.stories.mdx b/packages/design-system/src/styleguide/spacing.stories.mdx new file mode 100644 index 0000000000..bd604fe1d8 --- /dev/null +++ b/packages/design-system/src/styleguide/spacing.stories.mdx @@ -0,0 +1,26 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import Sizes from './Sizes.vue'; +import TextClasses from './TextClasses.vue'; + + + +# Spacing + + + + {{ + template: ``, + components: { + Sizes, + }, + }} + + diff --git a/packages/design-system/src/styleguide/text.stories.mdx b/packages/design-system/src/styleguide/text.stories.mdx new file mode 100644 index 0000000000..f48680afc4 --- /dev/null +++ b/packages/design-system/src/styleguide/text.stories.mdx @@ -0,0 +1,38 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import TextClasses from './TextClasses.vue'; + + + +# Regular + + + + {{ + template: ``, + components: { + TextClasses, + }, + }} + + + +# Bold + + + + {{ + template: ``, + components: { + TextClasses, + }, + }} + + diff --git a/packages/design-system/theme/preview/docs.min.css b/packages/design-system/theme/preview/docs.min.css new file mode 100644 index 0000000000..2c8df6b64d --- /dev/null +++ b/packages/design-system/theme/preview/docs.min.css @@ -0,0 +1,2373 @@ +.color-wrap { + padding: 20px; +} +.box-card-header { + display: flex; + justify-content: space-between; + align-items: center; +} +.demo-line { + margin: 15px 0; +} +.component-preview h4 { + font-size: 20px; + margin: 40px 0 20px; + color: #909399; +} +.demo-block { + border: 1px solid #ebebeb; + border-radius: 3px; + transition: 0.2s; +} +.demo-block.hover { + box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), + 0 2px 4px 0 rgba(232, 237, 250, 0.5); +} +.demo-block code { + font-family: Menlo, Monaco, Consolas, Courier, monospace; +} +.demo-block .demo-button { + float: right; +} +.demo-block .source { + padding: 24px; +} +.demo-block .meta { + background-color: #fafafa; + border-top: 1px solid #eaeefb; + overflow: hidden; + height: 0; + transition: height 0.2s; +} +.demo-block .description { + padding: 20px; + box-sizing: border-box; + border: 1px solid #ebebeb; + border-radius: 3px; + font-size: 14px; + line-height: 22px; + color: #666; + word-break: break-word; + margin: 10px; + background-color: #fff; +} +.demo-block .description p { + margin: 0; + line-height: 26px; +} +.demo-block .description code { + color: #5e6d82; + background-color: #e6effb; + margin: 0 4px; + display: inline-block; + padding: 1px 5px; + font-size: 12px; + border-radius: 3px; + height: 18px; + line-height: 18px; +} +.demo-block .highlight pre { + margin: 0; +} +.demo-block .highlight code.hljs { + margin: 0; + border: none; + max-height: none; + border-radius: 0; +} +.demo-block .highlight code.hljs:before { + content: none; +} +.demo-block .demo-block-control { + border-top: 1px solid #eaeefb; + height: 44px; + box-sizing: border-box; + background-color: #fff; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + text-align: center; + margin-top: -1px; + color: #d3dce6; + cursor: pointer; + position: relative; +} +.demo-block .demo-block-control.is-fixed { + position: fixed; + bottom: 0; + width: 868px; +} +.demo-block .demo-block-control i { + font-size: 16px; + line-height: 44px; + transition: 0.3s; +} +.demo-block .demo-block-control i.hovering { + transform: translateX(-40px); +} +.demo-block .demo-block-control > span { + position: absolute; + transform: translateX(-30px); + font-size: 14px; + line-height: 44px; + transition: 0.3s; + display: inline-block; +} +.demo-block .demo-block-control:hover { + color: #409eff; + background-color: #f9fafc; +} +.demo-block .demo-block-control .text-slide-enter, +.demo-block .demo-block-control .text-slide-leave-active { + opacity: 0; + transform: translateX(10px); +} +.demo-block .demo-block-control .control-button { + line-height: 26px; + position: absolute; + top: 0; + right: 0; + font-size: 14px; + padding-left: 5px; + padding-right: 25px; +} +.footer { + background-color: #f7fbfd; + width: 100%; + padding: 40px 150px; + margin-top: -340px; + box-sizing: border-box; + height: 340px; +} +.footer .container { + box-sizing: border-box; + width: auto; +} +.footer .footer-main { + font-size: 0; + display: inline-block; + vertical-align: top; + margin-right: 110px; +} +.footer .footer-main h4 { + font-size: 18px; + color: #333; + line-height: 1; + margin: 0 0 15px; +} +.footer .footer-main .footer-main-link { + display: block; + margin: 0; + line-height: 2; + font-size: 14px; + color: #666; +} +.footer .footer-main .footer-main-link:hover { + color: #333; +} +.footer .footer-social { + float: right; + text-align: right; +} +.footer .footer-social .footer-social-title { + color: #666; + font-size: 18px; + line-height: 1; + margin: 0 0 20px; + padding: 0; + font-weight: 700; +} +.footer .footer-social .elementdoc { + transition: 0.3s; + display: inline-block; + line-height: 32px; + text-align: center; + color: #c8d6e8; + background-color: transparent; + size: 32px; + font-size: 32px; + vertical-align: middle; + margin-right: 20px; +} +.footer .footer-social .elementdoc:hover { + transform: scale(1.2); + color: #8d99ab; +} +.footer .footer-social .doc-icon-gitter { + margin-right: 0; +} +.el-popover.footer-popover { + padding: 0; + min-width: 120px; + line-height: normal; + box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24); +} +.el-popover.footer-popover .footer-popover-title { + border-bottom: 1px solid #eaeefb; + height: 30px; + line-height: 30px; + text-align: center; + color: #99a9bf; + background-color: #f8f9fe; +} +.el-popover.footer-popover img { + size: 100px; + margin: 10px; +} +@media (max-width: 1140px) { + .footer { + height: auto; + } +} +@media (max-width: 1000px) { + .footer-social { + display: none; + } +} +@media (max-width: 768px) { + .footer .footer-main { + margin-bottom: 30px; + } +} +.theme-picker { + height: 80px; + display: inline-block; +} +.theme-picker .el-color-picker__trigger { + vertical-align: middle; +} +.theme-picker-dropdown .el-color-dropdown__link-btn { + display: none; +} +.algolia-search { + width: 450px !important; +} +.algolia-search.is-empty .el-autocomplete-suggestion__list { + padding-bottom: 0; +} +.algolia-search .el-autocomplete-suggestion__list { + position: static !important; + padding-bottom: 28px; +} +.algolia-search li { + border-bottom: 1px solid #ebebeb; +} +.algolia-search li:last-child { + border-bottom: none; +} +.algolia-search .algolia-highlight { + color: #409eff; + font-weight: 700; +} +.algolia-search .algolia-search-title { + font-size: 14px; + margin: 6px 0; + line-height: 1.8; +} +.algolia-search .algolia-search-separator { + padding: 0 6px; +} +.algolia-search .algolia-search-content { + font-size: 12px; + margin: 6px 0; + line-height: 2.4; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.algolia-search .algolia-search-link { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding-right: 20px; + background-color: #e4e7ed; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + box-sizing: border-box; + text-align: right; +} +.algolia-search .algolia-search-link:hover { + background-color: #e4e7ed; +} +.algolia-search .algolia-search-link img { + display: inline-block; + height: 17px; + margin-top: 10px; +} +.algolia-search .algolia-search-empty { + margin: 5px 0; + text-align: center; + color: #999; +} +.progress[data-v-3285c94c] { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 2px; + width: 0; + transition: width 0.2s, opacity 0.4s; + opacity: 1; + z-index: 999999; +} +.loadingClass { + z-index: 0 !important; +} +.loadingClass .el-loading-spinner { + top: 0; + margin-top: 30%; +} +.headerWrapper[data-v-70469f40] { + height: 80px; +} +#v3-banner[data-v-70469f40] { + background-color: #409eff; + min-height: 30px; + padding: 5px 60px; + z-index: 19; + box-sizing: border-box; + text-align: center; + color: #eee; +} +#v3-banner a[data-v-70469f40] { + color: #fff; + font-weight: 700; +} +.header[data-v-70469f40] { + height: 80px; + background-color: #fff; + color: #fff; + top: 0; + left: 0; + width: 100%; + line-height: 80px; + z-index: 100; + position: relative; +} +.header .container[data-v-70469f40] { + height: 100%; + box-sizing: border-box; + border-bottom: 1px solid #dcdfe6; +} +.header .nav-lang-spe[data-v-70469f40] { + color: #888; +} +.header h1[data-v-70469f40] { + margin: 0; + float: left; + font-size: 32px; + font-weight: 400; +} +.header h1 a[data-v-70469f40] { + color: #333; + text-decoration: none; + display: block; +} +.header h1 span[data-v-70469f40] { + font-size: 12px; + display: inline-block; + width: 34px; + height: 18px; + border: 1px solid hsla(0, 0%, 100%, 0.5); + text-align: center; + line-height: 18px; + vertical-align: middle; + margin-left: 10px; + border-radius: 3px; +} +.header .nav[data-v-70469f40] { + float: right; + height: 100%; + line-height: 80px; + background: transparent; + padding: 0; + margin: 0; +} +.header .nav[data-v-70469f40]:after, +.header .nav[data-v-70469f40]:before { + display: table; + content: ''; +} +.header .nav[data-v-70469f40]:after { + clear: both; +} +.header .nav-gap[data-v-70469f40] { + position: relative; + width: 1px; + height: 80px; + padding: 0 20px; +} +.header .nav-gap[data-v-70469f40]:before { + content: ''; + position: absolute; + top: calc(50% - 8px); + width: 1px; + height: 16px; + background: #ebebeb; +} +.header .nav-logo-small[data-v-70469f40], +.header .nav-logo[data-v-70469f40] { + vertical-align: sub; +} +.header .nav-logo-small[data-v-70469f40] { + display: none; +} +.header .nav-item[data-v-70469f40] { + margin: 0; + float: left; + list-style: none; + position: relative; + cursor: pointer; +} +.header .nav-item.nav-algolia-search[data-v-70469f40] { + cursor: default; +} +.header .nav-item.lang-item[data-v-70469f40], +.header .nav-item[data-v-70469f40]:last-child { + cursor: default; + margin-left: 34px; +} +.header .nav-item.lang-item span[data-v-70469f40], +.header .nav-item:last-child span[data-v-70469f40] { + opacity: 0.8; +} +.header .nav-item.lang-item .nav-lang[data-v-70469f40], +.header .nav-item:last-child .nav-lang[data-v-70469f40] { + cursor: pointer; + display: inline-block; + height: 100%; + color: #888; +} +.header .nav-item.lang-item .nav-lang[data-v-70469f40]:hover, +.header .nav-item:last-child .nav-lang[data-v-70469f40]:hover { + color: #409eff; +} +.header .nav-item.lang-item .nav-lang.active[data-v-70469f40], +.header .nav-item:last-child .nav-lang.active[data-v-70469f40] { + font-weight: 700; + color: #409eff; +} +.header .nav-item a[data-v-70469f40] { + text-decoration: none; + color: #1989fa; + opacity: 0.5; + display: block; + padding: 0 22px; +} +.header .nav-item a.active[data-v-70469f40], +.header .nav-item a[data-v-70469f40]:hover { + opacity: 1; +} +.header .nav-item a.active[data-v-70469f40]:after { + content: ''; + display: inline-block; + position: absolute; + bottom: 0; + left: calc(50% - 15px); + width: 30px; + height: 2px; + background: #409eff; +} +.nav-dropdown[data-v-70469f40] { + margin-bottom: 6px; + padding-left: 18px; + width: 100%; +} +.nav-dropdown span[data-v-70469f40] { + display: block; + width: 100%; + font-size: 16px; + color: #888; + line-height: 40px; + transition: 0.2s; + padding-bottom: 6px; + user-select: none; +} +.nav-dropdown span[data-v-70469f40]:hover { + cursor: pointer; +} +.nav-dropdown i[data-v-70469f40] { + transition: 0.2s; + font-size: 12px; + color: #979797; + transform: translateY(-2px); +} +.nav-dropdown .is-active i[data-v-70469f40], +.nav-dropdown .is-active span[data-v-70469f40] { + color: #409eff; +} +.nav-dropdown .is-active i[data-v-70469f40] { + transform: rotate(180deg) translateY(3px); +} +.nav-dropdown:hover i[data-v-70469f40], +.nav-dropdown:hover span[data-v-70469f40] { + color: #409eff; +} +.nav-dropdown-list[data-v-70469f40] { + width: auto; +} +@media (max-width: 850px) { + .header .nav-logo[data-v-70469f40] { + display: none; + } + .header .nav-logo-small[data-v-70469f40] { + display: inline-block; + } + .header .nav-item[data-v-70469f40] { + margin-left: 6px; + } + .header .nav-item.lang-item[data-v-70469f40], + .header .nav-item[data-v-70469f40]:last-child { + margin-left: 10px; + } + .header .nav-item a[data-v-70469f40] { + padding: 0 5px; + } + .header .nav-algolia-search[data-v-70469f40], + .header .nav-theme-switch[data-v-70469f40] { + display: none; + } +} +@media (max-width: 700px) { + .header .container[data-v-70469f40] { + padding: 0 12px; + } + .header .nav-item a[data-v-70469f40] { + font-size: 12px; + vertical-align: top; + } + .header .nav-item.lang-item[data-v-70469f40] { + height: 100%; + } + .header .nav-item.lang-item .nav-lang[data-v-70469f40] { + display: flex; + align-items: center; + } + .header .nav-item.lang-item .nav-lang span[data-v-70469f40] { + padding-bottom: 0; + } + .header .nav-dropdown[data-v-70469f40] { + padding: 0; + } + .header .nav-dropdown span[data-v-70469f40] { + font-size: 12px; + } + .header .nav-gap[data-v-70469f40] { + padding: 0 8px; + } + .header .nav-versions[data-v-70469f40] { + display: none; + } +} +.side-nav { + width: 100%; + box-sizing: border-box; + padding-right: 30px; + transition: opacity 0.3s; +} +.side-nav.is-fade { + transition: opacity 3s; +} +.side-nav li { + list-style: none; +} +.side-nav ul { + padding: 0; + margin: 0; + overflow: hidden; +} +.side-nav > ul > .nav-item > a { + margin-top: 15px; +} +.side-nav > ul > .nav-item:nth-child(-n + 4) > a { + margin-top: 0; +} +.side-nav .nav-item a { + font-size: 16px; + color: #333; + line-height: 40px; + height: 40px; + margin: 0; + padding: 0; + text-decoration: none; + display: block; + position: relative; + transition: 0.15s ease-out; + font-weight: 700; +} +.side-nav .nav-item a.active { + color: #409eff; +} +.side-nav .nav-item .nav-item a { + display: block; + height: 40px; + color: #444; + line-height: 40px; + font-size: 14px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-weight: 400; +} +.side-nav .nav-item .nav-item a.active, +.side-nav .nav-item .nav-item a:hover { + color: #409eff; +} +.side-nav .nav-item.sponsors > .sub-nav { + margin-top: -10px; +} +.side-nav .nav-item.sponsors > a { + color: #777; + font-weight: 300; + font-size: 14px; +} +.side-nav .nav-item.sponsors .nav-item { + display: inline-block; +} +.side-nav .nav-item.sponsors .nav-item a { + height: auto; + display: inline-block; + vertical-align: middle; + margin: 8px 12px 12px 0; +} +.side-nav .nav-item.sponsors .nav-item a img { + width: 42px; +} +.side-nav .nav-item.sponsors .nav-item:first-child a img { + width: 36px; +} +.side-nav .nav-group__title { + font-size: 12px; + color: #999; + line-height: 26px; + margin-top: 15px; +} +.side-nav #code-sponsor-widget { + margin: 0 0 0 -20px; +} +.nav-dropdown-list { + width: 120px; + margin-top: -8px; +} +.footer-nav, +.nav-dropdown-list li { + font-size: 14px; +} +.footer-nav { + padding: 40px 0; + color: #333; +} +.footer-nav:after { + content: ''; + display: block; + clear: both; +} +.footer-nav i { + transition: 0.3s; + color: #999; + vertical-align: baseline; +} +.footer-nav-link { + cursor: pointer; + transition: 0.3s; +} +.footer-nav-link:hover, +.footer-nav-link:hover i { + color: #409eff; +} +.footer-nav-left { + float: left; + margin-left: -4px; +} +.footer-nav-right { + float: right; + margin-right: -4px; +} +.demo-block.demo-alert .el-alert { + margin: 20px 0 0; +} +.demo-block.demo-alert .el-alert:first-child { + margin: 0; +} +.demo-badge.demo-block .el-dropdown { + vertical-align: middle; +} +.demo-badge.demo-block .share-button { + width: 36px; + padding: 10px; +} +.demo-badge.demo-block .mark { + margin-top: 8px; + line-height: 1; + float: right; +} +.demo-badge.demo-block .item { + margin-right: 40px; +} +.demo-border .text { + width: 15%; +} +.demo-border .line { + width: 70%; +} +.demo-border .line div { + width: 100%; + height: 0; + border-top: 1px solid #eee; +} +.demo-border .line .dashed { + border-top: 2px dashed #eee; +} +.demo-shadow { + height: 100px; + width: 50%; + border: 1px solid #eee; +} +.demo-shadow-text { + line-height: 50px; + color: #666; + font-size: 14px; +} +.demo-radius .title { + color: #666; + font-size: 18px; + margin: 10px 0; +} +.demo-radius .value { + color: #333; + font-size: 16px; + margin: 10px 0; +} +.demo-radius .radius { + height: 60px; + width: 70%; + border: 1px solid #d7dae2; + border-radius: 0; + margin-top: 20px; +} +.demo-radius .radius-30 { + border-radius: 30px; +} +.demo-block.demo-button .el-row { + margin-bottom: 20px; +} +.demo-block.demo-button .el-row:last-child { + margin-bottom: 0; +} +.demo-block.demo-button .el-button + .el-button { + margin-left: 10px; +} +.demo-block.demo-button .el-button-group .el-button + .el-button { + margin-left: 0; +} +.demo-block.demo-button .el-button-group + .el-button-group { + margin-left: 10px; +} +.demo-calendar.demo-block .is-selected { + color: #1989fa; +} +.demo-block.demo-card .text { + font-size: 14px; +} +.demo-block.demo-card .time { + font-size: 13px; + color: #999; +} +.demo-block.demo-card .bottom { + margin-top: 13px; + line-height: 12px; +} +.demo-block.demo-card .item { + margin-bottom: 18px; +} +.demo-block.demo-card .button { + padding: 0; + float: right; +} +.demo-block.demo-card .image { + width: 100%; + display: block; +} +.demo-block.demo-card .box-card { + width: 480px; +} +.demo-carousel .block { + padding: 30px; + text-align: center; + border-right: 1px solid #eff2f6; + display: inline-block; + width: 49%; + box-sizing: border-box; +} +.demo-carousel .block:last-child { + border-right: none; +} +.demo-carousel .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} +.demo-carousel .el-carousel__container { + text-align: center; +} +.demo-carousel .el-carousel__item h3 { + color: #fff; + font-size: 18px; + line-height: 300px; + margin: 0; +} +.demo-carousel .el-carousel__item h3.small { + font-size: 14px; + line-height: 150px; +} +.demo-carousel .el-carousel__item h3.medium { + font-size: 14px; + line-height: 200px; +} +.demo-carousel .el-carousel__item:nth-child(2n) { + background-color: #99a9bf; +} +.demo-carousel .el-carousel__item:nth-child(odd) { + background-color: #d3dce6; +} +.demo-cascader .el-cascader { + width: 222px; +} +.demo-cascader-size .el-cascader { + vertical-align: top; + margin-right: 15px; +} +.demo-cascader .source > div { + display: flex; +} +.demo-cascader .block { + padding: 30px 0; + text-align: center; + border-right: 1px solid #eff2f6; + width: 50%; + box-sizing: border-box; +} +.demo-cascader .block:last-child { + border-right: none; +} +.demo-cascader .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} +.demo-collapse .el-collapse-item__header .header-icon { + margin-left: 5px; +} +.demo-color-picker .block { + padding: 30px 0; + text-align: center; + border-right: 1px solid #eff2f6; + display: inline-block; + width: 50%; + box-sizing: border-box; +} +.demo-color-picker .block:last-child { + border-right: none; +} +.demo-color-picker .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} +.demo-color-picker .el-color-picker + .el-color-picker { + margin-left: 20px; +} +.demo-color-box { + position: relative; + border-radius: 4px; + padding: 20px; + margin: 5px 0; + height: 114px; + box-sizing: border-box; + color: #fff; + font-size: 14px; +} +.demo-color-box .value { + font-size: 12px; + opacity: 0.69; + line-height: 24px; +} +.demo-color-box-other { + height: 74px; + margin: 10px 0 !important; + border-radius: 4px 4px 4px 4px !important; + padding: 15px 20px; +} +.demo-color-box-group .demo-color-box { + border-radius: 0; + margin: 0; +} +.demo-color-box-group .demo-color-box:first-child { + border-radius: 4px 4px 0 0; +} +.bg-color-sub, +.demo-color-box-group .demo-color-box:last-child { + border-radius: 0 0 4px 4px; +} +.bg-color-sub { + width: 100%; + height: 40px; + left: 0; + bottom: 0; + position: absolute; +} +.bg-blue-sub-item { + width: 11.1111111%; + height: 100%; + display: inline-block; +} +.bg-blue-sub-item:first-child { + border-radius: 0 0 0 4px; +} +.bg-success-sub-item { + width: 50%; + height: 100%; + display: inline-block; +} +.bg-success-sub-item:first-child { + border-radius: 0 0 0 4px; +} +.bg-success-sub-item:last-child { + border-radius: 0 0 4px 0; +} +.bg-transparent { + border: 1px solid #fcc3c3; + color: #303133; + background: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: 50%; + background-size: 100% 100%, auto; +} +.demo-color-box-lite { + color: #303133; +} +.el-footer, +.el-header { + background-color: #b3c0d1; + color: #333; + line-height: 60px; +} +.el-aside { + color: #333; +} +#chang-jian-ye-mian-bu-ju + .demo-container .el-footer, +#chang-jian-ye-mian-bu-ju + .demo-container .el-header { + text-align: center; +} +#chang-jian-ye-mian-bu-ju + .demo-container .el-aside { + background-color: #d3dce6; + text-align: center; + line-height: 200px; +} +#chang-jian-ye-mian-bu-ju + .demo-container .el-main { + background-color: #e9eef3; + color: #333; + text-align: center; + line-height: 160px; +} +#chang-jian-ye-mian-bu-ju + .demo-container > .source > .el-container { + margin-bottom: 40px; +} +#chang-jian-ye-mian-bu-ju + + .demo-container + > .source + > .el-container:nth-child(5) + .el-aside, +#chang-jian-ye-mian-bu-ju + + .demo-container + > .source + > .el-container:nth-child(6) + .el-aside { + line-height: 260px; +} +#chang-jian-ye-mian-bu-ju + + .demo-container + > .source + > .el-container:nth-child(7) + .el-aside { + line-height: 320px; +} +.demo-block.demo-date-picker .source > div { + padding: 0; + display: flex; + flex-wrap: wrap; +} +.demo-date-picker .block { + padding: 30px 0; + text-align: center; + border-right: 1px solid #eff2f6; + flex: 1; +} +.demo-date-picker .block:last-child { + border-right: none; +} +.demo-date-picker .container { + flex: 1; + border-right: 1px solid #eff2f6; +} +.demo-date-picker .container .block { + border-right: none; +} +.demo-date-picker .container .block:last-child { + border-top: 1px solid #eff2f6; +} +.demo-date-picker .container:last-child { + border-right: none; +} +.demo-date-picker .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} +.demo-block.demo-datetime-picker .source > div { + padding: 0; + display: flex; +} +.demo-datetime-picker .block { + padding: 30px 0; + text-align: center; + border-right: 1px solid #eff2f6; + flex: 1; +} +.demo-datetime-picker .block:last-child { + border-right: none; +} +.demo-datetime-picker .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} +.demo-block.demo-dialog .dialog-footer button:first-child { + margin-right: 10px; +} +.demo-block.demo-dialog .full-image { + width: 100%; +} +.demo-block.demo-dialog .el-dialog__wrapper { + margin: 0; +} +.demo-block.demo-dialog .el-input, +.demo-block.demo-dialog .el-select { + width: 300px; +} +.demo-block.demo-dialog .el-button--text { + margin-right: 15px; +} +.demo-block .el-dropdown { + vertical-align: top; +} +.demo-block .el-dropdown + .el-dropdown { + margin-left: 15px; +} +.demo-block .el-dropdown-link { + cursor: pointer; + color: #409eff; +} +.demo-block .el-icon-arrow-down { + font-size: 12px; +} +.block-col-2 { + margin: -24px; +} +.block-col-2 .el-col { + padding: 30px 0; + text-align: center; + border-right: 1px solid #eff2f6; +} +.block-col-2 .el-col:last-child { + border-right: 0; +} +.demo-dropdown .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} +.demo-form .el-select .el-input { + width: 380px; +} +.demo-form .el-form { + width: 460px; +} +.demo-form .line { + text-align: center; +} +.demo-form .el-checkbox-group { + width: 320px; + margin: 0; + padding: 0; + list-style: none; +} +.demo-form .el-checkbox-group:after, +.demo-form .el-checkbox-group:before { + content: ' '; + display: table; +} +.demo-form .el-checkbox-group:after { + clear: both; + visibility: hidden; + font-size: 0; + height: 0; +} +.demo-form .el-checkbox-group .el-checkbox { + float: left; + width: 160px; + margin: 0; + padding: 0; +} +.demo-form .el-checkbox-group .el-checkbox + .el-checkbox { + margin-left: 0; +} +.demo-form .demo-form-normal { + width: 460px; +} +.demo-form .demo-form-inline { + width: auto; +} +.demo-form .demo-form-inline .el-input { + width: 150px; +} +.demo-form .demo-form-inline > * { + margin-right: 10px; +} +.demo-form .demo-ruleForm { + width: 460px; +} +.demo-form .demo-ruleForm .el-select .el-input { + width: 360px; +} +.demo-form .demo-dynamic .el-input { + margin-right: 10px; + width: 270px; + vertical-align: top; +} +.demo-form .fr { + float: right; +} +ul.language-list { + color: #5e6d82; + font-size: 14px; + padding-left: 20px; +} +ul.language-list li { + line-height: 1.8; +} +.demo-icon .source > div > i { + color: #606266; + margin: 0 20px; + font-size: 1.5em; + vertical-align: middle; +} +.demo-icon .source button { + margin: 0 20px; +} +.page-component .content > ul.icon-list { + overflow: hidden; + list-style: none; + padding: 0 !important; + border: 1px solid #eaeefb; + border-radius: 4px; +} +.icon-list li { + float: left; + width: 16.66%; + text-align: center; + height: 120px; + line-height: 120px; + color: #666; + font-size: 13px; + border-right: 1px solid #eee; + border-bottom: 1px solid #eee; + margin-right: -1px; + margin-bottom: -1px; +} +.icon-list li:after { + content: ''; + height: 100%; +} +.icon-list li:after, +.icon-list li span { + display: inline-block; + vertical-align: middle; +} +.icon-list li span { + line-height: normal; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, + Microsoft YaHei, SimSun, sans-serif; + color: #99a9bf; + transition: color 0.15s linear; +} +.icon-list li i { + display: block; + font-size: 32px; + margin-bottom: 15px; + color: #606266; + transition: color 0.15s linear; +} +.icon-list li .icon-name { + display: inline-block; + padding: 0 3px; + height: 1em; +} +.icon-list li:hover i, +.icon-list li:hover span { + color: #5cb6ff; +} +.demo-block.demo-input-number .el-input-number + .el-input-number { + margin-left: 10px; +} +.demo-input .el-select .el-input { + width: 130px; +} +.demo-input .el-input { + width: 180px; +} +.demo-input .el-textarea { + width: 414px; +} +.demo-input .el-input-group { + width: 100%; +} +.demo-input .demo-input-size .el-input { + vertical-align: top; + margin: 0 10px 10px 0; +} +.demo-input .input-with-select .el-input-group__prepend { + background-color: #fff; +} +.demo-input .demo-autocomplete { + text-align: center; +} +.demo-input .demo-autocomplete .sub-title { + margin-bottom: 10px; + font-size: 14px; + color: #8492a6; +} +.demo-input .demo-autocomplete .el-col:not(:last-child) { + border-right: 1px solid rgba(224, 230, 237, 0.5); +} +.demo-input .demo-autocomplete .el-autocomplete { + text-align: left; +} +.el-autocomplete-suggestion.my-autocomplete li { + line-height: normal; + padding-top: 7px; + padding-bottom: 7px; +} +.el-autocomplete-suggestion.my-autocomplete li .name { + text-overflow: ellipsis; + overflow: hidden; +} +.el-autocomplete-suggestion.my-autocomplete li .addr { + font-size: 12px; + color: #b4b4b4; +} +.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr { + color: #ddd; +} +.demo-input-suffix { + margin-bottom: 15px; +} +.demo-input-suffix .el-input { + margin-right: 15px; +} +.demo-layout .el-row { + margin-bottom: 20px; +} +.demo-layout .el-row:last-child { + margin-bottom: 0; +} +.demo-layout .el-col { + border-radius: 4px; +} +.demo-layout .bg-purple-dark { + background: #99a9bf; +} +.demo-layout .bg-purple { + background: #d3dce6; +} +.demo-layout .bg-purple-light { + background: #e5e9f2; +} +.demo-layout .grid-content { + border-radius: 4px; + min-height: 36px; +} +.demo-layout .row-bg { + padding: 10px 0; + background-color: #f9fafc; +} +.demo-loading .el-table { + border: none; +} +.demo-block.demo-menu .el-menu-demo { + padding-left: 55px; +} +.demo-block.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse) { + width: 240px; + min-height: 400px; +} +.demo-block.demo-menu .line { + height: 1px; + background-color: #e0e6ed; + margin: 35px -24px; +} +.demo-block.demo-menu h5 { + font-size: 14px; + color: #8492a6; + margin-top: 10px; +} +.demo-block.demo-menu .tac { + text-align: center; +} +.demo-block.demo-menu .tac .el-menu-vertical-demo { + display: inline-block; + text-align: left; +} +.demo-pagination .source.first { + padding: 0; +} +.demo-pagination .first .block { + padding: 30px 0; + text-align: center; + border-right: 1px solid #eff2f6; + display: inline-block; + width: 50%; + box-sizing: border-box; +} +.demo-pagination .first .block:last-child { + border-right: none; +} +.demo-pagination .first .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} +.demo-pagination .source.last { + padding: 0; +} +.demo-pagination .last .block { + padding: 30px 24px; + border-bottom: 1px solid #eff2f6; +} +.demo-pagination .last .block:last-child { + border-bottom: none; +} +.demo-pagination .last .demonstration { + font-size: 14px; + color: #8492a6; + line-height: 44px; +} +.demo-pagination .last .demonstration + .el-pagination { + width: 70%; + margin: 5px 20px 0 0; +} +.demo-block.demo-popover .el-popover + .el-popover { + margin-left: 10px; +} +.demo-block.demo-popover .el-input { + width: 360px; +} +.demo-block.demo-popover .el-button { + margin-left: 10px; +} +.demo-block.demo-progress .el-progress--line { + margin-bottom: 15px; + width: 350px; +} +.demo-block.demo-progress .el-progress--circle { + margin-right: 15px; +} +.demo-rate .block { + padding: 30px 0; + text-align: center; + border-right: 1px solid #eff2f6; + display: inline-block; + width: 49%; + box-sizing: border-box; +} +.demo-rate .block:last-child { + border-right: none; +} +.demo-rate .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} +.demo-select .el-select { + width: 240px; +} +.demo-block.demo-slider .source { + padding: 0; +} +.demo-block.demo-slider .block { + padding: 30px 24px; + overflow: hidden; + border-bottom: 1px solid #eff2f6; +} +.demo-block.demo-slider .block:last-child { + border-bottom: none; +} +.demo-block.demo-slider .demonstration { + font-size: 14px; + color: #8492a6; + line-height: 44px; +} +.demo-block.demo-slider .demonstration + .el-slider { + float: right; + width: 70%; + margin-right: 20px; +} +.demo-block.demo-switch .el-switch { + margin: 20px 20px 20px 0; +} +.el-table .warning-row { + background: #fdf5e6; +} +.el-table .success-row { + background: #f0f9eb; +} +.demo-table .name-wrapper { + display: inline-block; +} +.demo-table .demo-table-expand label { + width: 90px; + color: #99a9bf; +} +.demo-table .demo-table-expand .el-form-item { + margin-right: 0; + margin-bottom: 0; + width: 50%; +} +.demo-block.demo-tag .el-tag + .el-tag { + margin-left: 10px; +} +.demo-block.demo-tag .button-new-tag { + margin-left: 10px; + height: 32px; + line-height: 30px; + padding-top: 0; + padding-bottom: 0; +} +.demo-block.demo-tag .input-new-tag { + width: 90px; + margin-left: 10px; + vertical-align: bottom; +} +.demo-block.demo-tag .tag-group { + display: flex; + align-items: center; +} +.demo-block.demo-tag .tag-group__title { + width: 45px; + font-size: 14px; + color: #606266; +} +.demo-block.demo-tag .tag-group + .tag-group { + margin-top: 10px; +} +.demo-block .el-date-editor + .el-date-editor { + margin-left: 10px; +} +.demo-timeline .source .radio { + margin-bottom: 20px; +} +.demo-timeline .source .radio .el-radio-group { + margin-left: 20px; +} +.demo-tooltip .el-tooltip + .el-tooltip { + margin-left: 15px; +} +.demo-tooltip .box { + width: 400px; +} +.demo-tooltip .box .top { + text-align: center; +} +.demo-tooltip .box .left { + float: left; + width: 60px; +} +.demo-tooltip .box .right { + float: right; + width: 60px; +} +.demo-tooltip .box .bottom { + clear: both; + text-align: center; +} +.demo-tooltip .box .item { + margin: 4px; +} +.demo-tooltip .box .left .el-tooltip__popper, +.demo-tooltip .box .right .el-tooltip__popper { + padding: 8px 10px; +} +.demo-tooltip .box .el-tooltip { + margin-left: 0; +} +.demo-transition .transition-box { + margin-bottom: 10px; + width: 200px; + height: 100px; + border-radius: 4px; + background-color: #409eff; + text-align: center; + color: #fff; + padding: 40px 20px; + margin-right: 20px; + box-sizing: border-box; +} +.demo-transfer .transfer-footer { + margin-left: 15px; + padding: 6px 5px; +} +.demo-tree .leaf { + width: 20px; + background: #ddd; +} +.demo-tree .folder { + width: 20px; + background: #888; +} +.demo-tree .buttons, +.demo-tree .filter-tree { + margin-top: 20px; +} +.demo-tree .custom-tree-container { + display: flex; + margin: -24px; +} +.demo-tree .block { + flex: 1; + padding: 8px 24px 24px; +} +.demo-tree .block:first-child { + border-right: 1px solid #eff2f6; +} +.demo-tree .block > p { + text-align: center; + margin: 0; + line-height: 4; +} +.demo-tree .custom-tree-node { + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 14px; + padding-right: 8px; +} +.demo-typo-size .color-dark-light { + color: #99a9bf; +} +.demo-term-box img { + width: 24%; + margin: 0 4% 20px 0; +} +.lineH-left { + display: inline-block; + height: 80px; +} +.lineH-right { + display: inline-block; + list-style: none; + padding: 0 0 0 90px; + margin: 0; + vertical-align: top; +} +.lineH-right li { + font-size: 13px; + color: #666; + height: 20px; + line-height: 20px; +} +.lineH-right li span { + padding-left: 40px; +} +.upload-tip { + color: #8492a6; + font-size: 12px; + margin-top: 7px; +} +.demo-block { + margin-bottom: 24px; +} +.demo-block .upload-demo { + width: 360px; +} +.demo-block .avatar-uploader .el-upload { + border: 1px dashed #d9d9d9; + border-radius: 6px; + cursor: pointer; + position: relative; + overflow: hidden; +} +.demo-block .avatar-uploader .el-upload:focus, +.demo-block .avatar-uploader .el-upload:hover { + border-color: #409eff; +} +.demo-block .avatar-uploader .avatar-uploader-icon { + font-size: 28px; + color: #8c939d; + width: 178px; + height: 178px; + line-height: 178px; + text-align: center; +} +.demo-block .avatar-uploader .avatar { + width: 178px; + height: 178px; + display: block; +} +.demo-divider-container-1 { + display: inline-block; + width: 33%; +} +.demo-divider-container-2 { + display: inline-block; + width: 50%; +} +@keyframes dot { + 0% { + width: 0; + margin-right: 1em; + } + to { + width: 1em; + margin-right: 0; + } +} +.demo-image .block, +.demo-image__error .block, +.demo-image__placeholder .block { + padding: 30px 0; + text-align: center; + border-right: 1px solid #eff2f6; + display: inline-block; + width: 20%; + box-sizing: border-box; + vertical-align: top; +} +.demo-image .block:last-child, +.demo-image__error .block:last-child, +.demo-image__placeholder .block:last-child { + border-right: none; +} +.demo-image .demonstration, +.demo-image__error .demonstration, +.demo-image__placeholder .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; +} +.demo-image__error .block, +.demo-image__placeholder .block { + width: 49%; +} +.demo-image__error .el-image, +.demo-image__placeholder .el-image { + width: 300px; + height: 200px; +} +.demo-image__error .image-slot, +.demo-image__placeholder .image-slot { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + background: #f5f7fa; + color: #909399; + font-size: 14px; +} +.demo-image__placeholder .dot { + animation: dot 2s steps(3, start) infinite; + overflow: hidden; +} +.demo-image__error .image-slot { + font-size: 30px; +} +.demo-image__lazy { + height: 400px; + overflow-y: auto; +} +.demo-image__lazy .el-image { + display: block; + min-height: 200px; + margin-bottom: 10px; +} +.demo-image__lazy .el-image:last-child { + margin-bottom: 0; +} +.infinite-list { + height: 300px; + padding: 0; + margin: 0; + list-style: none; +} +.infinite-list .infinite-list-item { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + background: #e8f3fe; + margin: 10px; + color: #7dbcfc; +} +.infinite-list .infinite-list-item + .list-item { + margin-top: 10px; +} +.infinite-list-wrapper { + height: 300px; + text-align: center; +} +.infinite-list-wrapper .list { + padding: 0; + margin: 0; + list-style: none; +} +.infinite-list-wrapper .list-item { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + background: #fff6f6; + color: #ff8484; +} +.infinite-list-wrapper .list-item + .list-item { + margin-top: 10px; +} +.demo-avatar.demo-basic { + text-align: center; +} +.demo-avatar.demo-basic .demo-basic--circle, +.demo-avatar.demo-basic .demo-basic--square { + display: flex; + justify-content: space-between; + align-items: center; +} +.demo-avatar.demo-basic .demo-basic--circle .block, +.demo-avatar.demo-basic .demo-basic--square .block { + flex: 1; +} +.demo-avatar.demo-basic .demo-basic--circle .block:not(:last-child), +.demo-avatar.demo-basic .demo-basic--square .block:not(:last-child) { + border-right: 1px solid rgba(224, 230, 237, 0.5); +} +.demo-avatar .sub-title { + margin-bottom: 10px; + font-size: 14px; + color: #8492a6; +} +.demo-avatar .el-col:not(:last-child) { + border-right: 1px solid rgba(224, 230, 237, 0.5); +} +.demo-avatar .demo-type { + display: flex; +} +.demo-avatar .demo-type > div { + flex: 1; + text-align: center; +} +.demo-avatar .demo-type > div:not(:last-child) { + border-right: 1px solid rgba(224, 230, 237, 0.5); +} +.demo-avatar .demo-fit { + display: flex; + text-align: center; + justify-content: space-between; +} +.demo-avatar .demo-fit .block { + flex: 1; + display: flex; + flex-direction: column; + flex-grow: 0; +} +.demo-avatar .demo-fit .title { + margin-bottom: 10px; + font-size: 14px; + color: #8492a6; +} +.demo-drawer__content { + display: flex; + flex-direction: column; + height: 100%; +} +.demo-drawer__content form { + flex: 1; +} +.demo-drawer__footer { + display: flex; +} +.demo-drawer__footer button { + flex: 1; +} +.el-drawer__body { + padding: 20px; +} +body, +html { + margin: 0; + padding: 0; + height: 100%; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, + Microsoft YaHei, SimSun, sans-serif; + font-weight: 400; + -webkit-font-smoothing: antialiased; + -webkit-tap-highlight-color: transparent; +} +body.is-component, +html.is-component { + overflow: hidden; +} +#app { + height: 100%; +} +#app.is-component { + overflow-y: hidden; +} +#app.is-component .main-cnt { + padding: 0; + margin-top: 0; + height: 100%; + min-height: auto; +} +#app.is-component .headerWrapper { + position: fixed; + width: 100%; + left: 0; + top: 0; + z-index: 1500; +} +#app.is-component .headerWrapper .container { + padding: 0; +} +a { + color: #409eff; + text-decoration: none; +} +code { + background-color: #f9fafc; + padding: 0 4px; + border: 1px solid #eaeefb; + border-radius: 4px; +} +button, +input, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: inherit; +} +.hljs { + line-height: 1.8; + font-family: Menlo, Monaco, Consolas, Courier, monospace; + font-size: 12px; + padding: 18px 24px; + background-color: #fafafa; + border: 1px solid #eaeefb; + margin-bottom: 25px; + border-radius: 4px; + -webkit-font-smoothing: auto; +} +.main-cnt { + margin-top: -80px; + padding: 80px 0 340px; + box-sizing: border-box; + min-height: 100%; +} +.container, +.page-container { + width: 1140px; + padding: 0; + margin: 0 auto; +} +.page-container { + padding-top: 55px; +} +.page-container h2 { + font-size: 28px; + color: #1f2d3d; + margin: 0; +} +.page-container h3 { + font-size: 22px; +} +.page-container h2, +.page-container h3, +.page-container h4, +.page-container h5 { + font-weight: 400; + color: #1f2f3d; +} +.page-container h2:hover a, +.page-container h3:hover a, +.page-container h4:hover a, +.page-container h5:hover a { + opacity: 0.4; +} +.page-container h2 a, +.page-container h3 a, +.page-container h4 a, +.page-container h5 a { + float: left; + margin-left: -20px; + opacity: 0; + cursor: pointer; +} +.page-container h2 a:hover, +.page-container h3 a:hover, +.page-container h4 a:hover, +.page-container h5 a:hover { + opacity: 0.4; +} +.page-container p { + font-size: 14px; + color: #5e6d82; + line-height: 1.5em; +} +.page-container .tip { + padding: 8px 16px; + background-color: #ecf8ff; + border-radius: 4px; + border-left: 5px solid #50bfff; + margin: 20px 0; +} +.page-container .tip code { + background-color: hsla(0, 0%, 100%, 0.7); + color: #445368; +} +.page-container .warning { + padding: 8px 16px; + background-color: #fff6f7; + border-radius: 4px; + border-left: 5px solid #fe6c6f; + margin: 20px 0; +} +.page-container .warning code { + background-color: hsla(0, 0%, 100%, 0.7); + color: #445368; +} +.demo { + margin: 20px 0; +} +@media (max-width: 1140px) { + .container, + .page-container { + width: 100%; + } +} +@media (max-width: 768px) { + .container, + .page-container { + padding: 0 20px; + } + #app.is-component .headerWrapper .container { + padding: 0 12px; + } +} +@font-face { + font-family: icomoon; + src: url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=); + src: url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=#iefix) + format('embedded-opentype'), + url(data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsdxmDoAAAF4AAAD1GhlYWQK1CI1AAAFTAAAADZoaGVhB8IDyQAABYQAAAAkaG10eBYAAAAAAAWoAAAAIGxvY2EDFAH+AAAFyAAAABJtYXhwAA4AbwAABdwAAAAgbmFtZZlKCfsAAAX8AAABhnBvc3QAAwAAAAAHhAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFAAD/wAQAA8AAEwAnADUAQwBRAAATND4CMzIeAhUUDgIjIi4CJTQuAiMiDgIVFB4CMzI+AiU0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUBIgYVFBYzITI2NTQmIwBQi7tqaruLUFCLu2pqu4tQA7NEdp9aWp92RER2n1pan3ZE/XMeFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBEBwGq7i1BQi7tqaruLUFCLu2pan3ZERHafWlqfdkREdp/nFR4eFTMWHh4WMxUeHhUzFh4eFv8AGRERGRkRERkAAAAEAAD/wAQAA8AAEwAhAC8ATwAAASIOAhUUHgIzMj4CNTQuAgE0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUTJy4BIyIGDwEOASMiJjU0NjcnNz4BMzIWFx4BFRQGJwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR5EBCpaLzBbKgQBBQIQFQYGAQoyazU2aTMJChwTA8BQi7tqaruLUFCLu2pqu4tQ/o0VHh4VMxYeHhYzFR4eFTMWHh4W/psBFRUVFQEBARgRCA8GAwUYGhkaBRMMExoGAAAEAAD/wAQAA8AAEwAhAC8APQAABSIuAjU0PgIzMh4CFRQOAgEVFBYzMjY9ATQmIyIGBRUUFjMyNj0BNCYjIgYBIgYVFBYzITI2NTQmIwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBFAUIu7amq7i1BQi7tqaruLUAKNMxYeHhYzFR4eFTMWHh4WMxUeHv64GRERGRkRERkAAAQAAP/ABAADwAATAFAAXgBsAAABIg4CFRQeAjMyPgI1NC4CExQGFQ4BFQ4DIzgBMTgBMSIuAic0Jic0JjUuATU0Njc+ATMyFhcxHgEzMjY3MT4BMzIWFx4BFRQGBwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUCAGq7i1BQi7tqaruLUFCLu8cBAQEVP01bMjJbTT8VAQEBAQECAgUVDAwVBSB4S0t4IAUVDAwVBQICAQG+HhUWHh4WFR7+sx4WFR4eFRYeA8BQi7tqaruLUFCLu2pqu4tQ/XICAgEBAgEpQjAbGzBCKQECAQECAgIGAwUJBAsMDAs9TEw9CwwMCwQJBQMGAgEbFR4eFTMWHh4WMxUeHhUzFh4eFgAAAAEAAAAAAADYdr5rXw889QALBAAAAAAA09ru3AAAAADT2u7cAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4AkAECAVoB6gAAAAEAAAAIAG0ABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) + format('truetype'), + url(data:font/woff;base64,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) + format('woff'), + url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmb250IGlkPSJpY29tb29uIiBob3Jpei1hZHYteD0iMTAyNCI+PGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiLz48Z2x5cGggaG9yaXotYWR2LXg9IjUxMiIvPjxnbHlwaCB1bmljb2RlPSLupIAiIGdseXBoLW5hbWU9InJhdGUtZmFjZS1vZmYiIGQ9Ik0wIDQ0OGMwIDI4Mi43NjYgMjI5LjIzNCA1MTIgNTEyIDUxMnM1MTItMjI5LjIzNCA1MTItNTEyYzAtMjgyLjc2Ni0yMjkuMjM0LTUxMi01MTItNTEyUzAgMTY1LjIzNCAwIDQ0OHptOTQ3LjIgMGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMlM3Ni44IDY4OC4zNTEgNzYuOCA0NDggMjcxLjY0OSAxMi44IDUxMiAxMi44IDk0Ny4yIDIwNy42NDkgOTQ3LjIgNDQ4ek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek0zNjEuMTQzIDI4MS42QzMzOC40MzIgMjgxLjYgMzIwIDI2Mi45NjMgMzIwIDI0MHMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0QzY4NS41NjggMTk4LjQgNzA0IDIxNy4wMzcgNzA0IDI0MHMtMTguNDMyIDQxLjYtNDEuMTQzIDQxLjZIMzYxLjE0M3oiLz48Z2x5cGggdW5pY29kZT0i7qSBIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMSIgZD0iTTUxMi4wMDEgOTYwQzIyOS4yMyA5NjAgMCA3MzAuNzcgMCA0NDcuOTk4IDAgMTY1LjIyOCAyMjkuMjMtNjQgNTEyLjAwMS02NCA3OTQuNzctNjQgMTAyNCAxNjUuMjI3IDEwMjQgNDQ3Ljk5OFM3OTQuNzcgOTYwIDUxMi4wMDEgOTYwek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em02Ny4zMjktNDA3LjY1NmwtMy40MjIgMS4yMTZjLTU2LjE1IDI3Ljg3Mi0xMTYuMzg4IDQyLjA0Ny0xNzguODgyIDQyLjA0Ny02NC41NTYgMC0xMjUuNjExLTE0LjMxNi0xODEuNTE1LTQyLjQ1bC0zLjM4Mi0xLjEzMmMtMi4xMDItLjYyOC00Ljk0NS0xLjUyOS04LjQ4OS0xLjUyOS0yMC41NTQgMC0zNy4yMzkgMTguMjktMzcuMjM5IDQwLjczNCAwIDEwLjY1NSA0LjU3MSAyMS4zNjEgMTIuMTE0IDI5LjM5OWwtLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiLz48Z2x5cGggdW5pY29kZT0i7qSCIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMiIgZD0iTTUxMi02NEMyMjkuMjM0LTY0IDAgMTY1LjIzNCAwIDQ0OHMyMjkuMjM0IDUxMiA1MTIgNTEyYzI4Mi43NjYgMCA1MTItMjI5LjIzNCA1MTItNTEyUzc5NC43NjYtNjQgNTEyLTY0ek0yOTQuNCA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3ptMzMyLjggMHYtNTEuMzA3YzAtMjguNDgyIDIyLjkyMy01MS4xNDcgNTEuMi01MS4xNDcgMjguNDc0IDAgNTEuMiAyMi44OTkgNTEuMiA1MS4xNDd2NTEuMzA3YzAgMjguNDgyLTIyLjkyMyA1MS4xNDctNTEuMiA1MS4xNDctMjguNDc0IDAtNTEuMi0yMi44OTktNTEuMi01MS4xNDd6TTM2MS4xNDMgMjgxLjZDMzM4LjQzMiAyODEuNiAzMjAgMjYyLjk2MyAzMjAgMjQwczE4LjQzMi00MS42IDQxLjE0My00MS42aDMwMS43MTRDNjg1LjU2OCAxOTguNCA3MDQgMjE3LjAzNyA3MDQgMjQwcy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNkgzNjEuMTQzeiIvPjxnbHlwaCB1bmljb2RlPSLupIMiIGdseXBoLW5hbWU9InJhdGUtZmFjZS0zIiBkPSJNNTEyLjAwMSA5NjBDMjI5LjIzMSA5NjAgMCA3MzAuNzcgMCA0NDguMDAxUzIyOS4yMy02NCA1MTIuMDAxLTY0Qzc5NC43NzEtNjQgMTAyNCAxNjUuMjMgMTAyNCA0NDcuOTk5Uzc5NC43NzEgOTYwIDUxMi4wMDEgOTYwem0zMDUuNDk0LTY1NC40MzVhNDAuNDA2IDQwLjQwNiAwIDAgMC0xLjU2OS00LjM1IDQwLjg1IDQwLjg1IDAgMCAwLTIuMzE3LTQuNTU2Qzc1Ny45NzggMTg5LjA0NiA2NDQuMDkxIDExNS4yIDUxMi4yODYgMTE1LjJsLS4yODYuMDAyLS4yODYtLjAwMmMtMTMxLjgwNCAwLTI0NS42OTMgNzMuODQ1LTMwMS4zMjMgMTgxLjQ1OWE0MC44NSA0MC44NSAwIDAgMC0yLjMxNyA0LjU1NiA0MC4zMjggNDAuMzI4IDAgMCAwLTEuNTY5IDQuMzUgNDAuMzE3IDQwLjMxNyAwIDAgMC0xLjcwNSAxMS41OTcgNDAuMzE0IDQwLjMxNCAwIDAgMCA0LjM3MiAxOC4yODJjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWguNjc2QzMyNi45MDQgMjUzLjk5MSA0MTIuNjI0IDE5Ny45IDUxMiAxOTcuNzkyYzk5LjM3NS4xMDggMTg1LjA5NSA1Ni4yIDIyNi41MDcgMTM3LjY1MmguNjc2YzYuODk3IDEzLjYwMSAyMS4yMzkgMjIuOTU1IDM3LjgyMyAyMi45NTVzMzAuOTI3LTkuMzU1IDM3LjgyMi0yMi45NTVhNDAuMjk4IDQwLjI5OCAwIDAgMCA0LjM3Mi0xOC4yODJjMC00LjAyOS0uNjAyLTcuOTE4LTEuNzA1LTExLjU5N3pNNjI3LjIgNTg4Ljg1M0M2MjcuMiA2MTcuMSA2NDkuOTI2IDY0MCA2NzguNCA2NDBjMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3ptLTMzMi44IDBDMjk0LjQgNjE3LjEgMzE3LjEyNiA2NDAgMzQ1LjYgNjQwYzI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6Ii8+PC9mb250PjwvZGVmcz48L3N2Zz4=) + format('svg'); + font-weight: 400; + font-style: normal; +} +[class*=' icon-'], +[class^='icon-'] { + font-family: icomoon !important; + speak: none; + font-style: normal; + font-weight: 400; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.icon-rate-face-off:before { + content: '\e900'; +} +.icon-rate-face-1:before { + content: '\e901'; +} +.icon-rate-face-2:before { + content: '\e902'; +} +.icon-rate-face-3:before { + content: '\e903'; +} + +.config { + padding: 5px 0; +} +.config-label { + color: #606266; + font-size: 14px; + padding-bottom: 8px; + position: relative; +} +.content-80 { + box-sizing: border-box; + display: inline-block; + width: 80%; +} +.content-20 { + width: 20%; +} +.content-10, +.content-20 { + box-sizing: border-box; + display: inline-block; + vertical-align: bottom; +} +.content-10 { + width: 10%; +} +.content-15 { + box-sizing: border-box; + display: inline-block; + width: 15%; + vertical-align: bottom; +} +input { + cursor: pointer; +} +.colorPicker { + margin-left: 10px; + vertical-align: bottom; +} +.select { + width: 100%; +} +.plus-button[data-v-98c1688e] { + position: absolute; + left: 90%; + margin-top: 4px; +} +.colorPicker[data-v-98c1688e] { + margin-left: 0; +} +.content-20 .el-input__suffix-inner span[data-v-98c1688e] { + line-height: 28px; +} +.content-20[data-v-98c1688e] { + padding: 0 3px; +} +.content-10[data-v-98c1688e] { + vertical-align: top; +} +.content-tip[data-v-98c1688e] { + color: #909399; + font-size: 12px; +} +.config-content[data-v-98c1688e] { + padding: 5px 0; +} +.el-button--mini.is-round[data-v-98c1688e] { + padding: 3px; +} +.editor-main { + padding: 0 18px 15px; + overflow-y: auto; +} +.category-name { + color: #c0c4cc; + font-size: 18px; + display: block; + margin: 13px 0 3px; +} +.configurator-action { + padding: 15px 18px 0; +} +.configurator-action .action-group { + padding: 5px 0; +} +.configurator-action .action-group img { + cursor: not-allowed; + width: 16px; + height: 16px; + padding: 7px 0; + margin-left: 5px; + opacity: 0.5; +} +.configurator-action .action-group img.active { + opacity: 1; + cursor: pointer; +} +.configurator-action .action-group img:last-of-type { + margin-left: 10px; +} +.configurator-action .action-group .button-group { + float: right; +} +.configurator-action .action-group .button-group .el-button { + padding: 6px 15px; +} +.configurator-action .action-group .button-group .el-button.is-disabled { + color: #c0c4cc; + background-color: #fff; + border-color: #ebeef5; +} +.configurator-action .action-group .button-group .reset { + background: #e6f1fc; + color: #1989fa; + border-color: #a2cffc; +} +.configurator-action .action-group .button-group .download { + background: #1989fa; + color: #fff; + border-color: #1989fa; +} +.configurator-action .selector { + width: 100%; +} +.configurator-action .selector input { + background: #f5f7fa; + border: none; + font-size: 18px; + padding-left: 0; + color: #606266; +} +.configurator-action .line { + width: 100%; + height: 0; + border-bottom: 1px solid #dcdfe6; +} +.main-configurator { + height: 100%; + display: flex; + flex-direction: column; +} +.component-preview { + padding-right: 10px; +} +.component-preview:last-of-type { + padding-bottom: 20px; +} +.component-preview h4 { + font-size: 20px; + margin: 40px 0 20px; + color: #909399; +} +.component-preview .demo-item { + margin-top: 10px; + margin-right: 40px; +} +.component-preview .demo-line { + margin: 15px 0; +} +.component-preview .el-carousel__item:nth-child(2n) { + background-color: #99a9bf; +} +.component-preview .el-carousel__item:nth-child(odd) { + background-color: #d3dce6; +} +.component-preview .el-avatar:not(:last-child) { + margin-right: 20px; +} +.component-preview .avatar-demo { + display: flex; + align-items: center; +} +.component-preview .heading > div { + margin-bottom: 15px; +} +.component-preview .title { + font-size: 18px; + font-weight: 400; + padding: 0 20px; +} +.component-preview .paragraph { + padding: 0 20px; +} +.component-preview .demo-color-box { + margin: 0; +} +.component-preview .color { + margin-right: -12%; +} +.theme-card-item { + user-select: none; + border-radius: 4px; + overflow: hidden; + background: #fff; + height: 90%; + margin: 25px 0; + box-shadow: 0 0 1px 0 #666; +} +.theme-card-item.is-hidden { + opacity: 0; + height: 0; +} +.theme-card-item .upload { + cursor: pointer; + background: #f5f7fa; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.theme-card-item .upload .upload-action { + width: 40%; + margin: 0 auto; + text-align: center; + color: #606266; +} +.theme-card-item .upload .upload-action img { + display: block; + margin: 0 auto; +} +.theme-card-item .upload .upload-action span { + display: block; + font-size: 14px; + margin-top: 8px; +} +.theme-card-item .preview { + position: relative; + height: 70%; + width: 100%; +} +.theme-card-item .preview .line { + height: 50%; +} +.theme-card-item .preview .line-2 { + width: 50%; + height: 100%; + display: inline-block; +} +.theme-card-item .preview .line-4 { + width: 25%; + height: 100%; + display: inline-block; +} +.theme-card-item .preview .action { + transition: all 0.3s; + position: absolute; + opacity: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.theme-card-item .preview .action .action-mask { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #000; + opacity: 0.4; +} +.theme-card-item .preview .action .action-block { + position: absolute; + width: 50%; + height: 50%; + left: 25%; + top: 25%; +} +.theme-card-item .preview .action .action-item { + cursor: pointer; + display: inline-block; + height: 100%; + width: 30%; + color: #eee; +} +.theme-card-item .preview .action .action-item:hover { + color: #fff; +} +.theme-card-item .preview .action .action-item:hover .circle { + border-color: #fff; +} +.theme-card-item .preview .action .action-item .icon { + height: 50%; + font-size: 22px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} +.theme-card-item .preview .action .action-item .icon img { + width: 130%; +} +.theme-card-item .preview .action .action-item .name { + font-size: 12px; + height: 50%; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + margin-top: 4px; +} +.theme-card-item .preview .action .action-item-right { + margin-left: 40%; +} +.theme-card-item .info { + height: 30%; + line-height: 16px; + display: flex; + align-items: center; +} +.theme-card-item .info .info-center { + width: 100%; +} +.theme-card-item .info .title { + font-weight: 700; + font-size: 16px; + color: #303133; + padding: 0 12px; + justify-content: space-between; +} +.theme-card-item .info .right { + float: right; + font-weight: 400; + font-size: 14px; + color: #909399; +} +.theme-card-item .info .more { + font-size: 16px; + cursor: pointer; +} +.theme-card-item .info .description { + padding: 0 12px; + font-size: 14px; + color: #606266; + margin-top: 10px; +} +.theme-card-item.is-upload { + box-shadow: none; + border: 1px dashed #dcdfe6; +} +.theme-card-item.is-upload:hover { + box-shadow: none; +} +.theme-card-item:hover { + box-shadow: 0 0 10px 0 #999; +} +.theme-card-item:hover .action { + opacity: 1; +} diff --git a/packages/design-system/theme/preview/index.html b/packages/design-system/theme/preview/index.html new file mode 100644 index 0000000000..6a76f97ee1 --- /dev/null +++ b/packages/design-system/theme/preview/index.html @@ -0,0 +1,1525 @@ + + + + + + + Deprecated - Element UI Theme CSS Variable + + + + + + +
+ + + +
+

Color

+
+ + +
+ {{color}} +
{{dataProxy(color)}}
+
+
+
+
+ + + + +
+ Primary Text +
{{color_text_primary}}
+
+ + +
+ Regular Text +
{{color_text_regular}}
+
+ + +
+ Secondary Text +
{{color_text_secondary}}
+
+ + +
+ Placeholder +
{{color_text_placeholder}}
+
+ + + + + +
+ Border Base +
{{border_color_base}}
+
+ + +
+ Border Light +
{{border_color_light}}
+
+ + +
+ Border Lighter +
{{border_color_lighter}}
+
+ + +
+ Border Extralight +
{{border_color_extra_light}}
+
+ + + + + +
+ Background B +
{{color_black}}
+
+ + +
+ Background W +
{{color_white}}
+
+ + +
+ Background +
Transparent
+
+ + +
+ +

Typography

+ + +
+ Heading1 +
+
Heading2
+
Heading3
+
Heading4
+
Heading5
+
+ Heading6 +
+ + +
Example body text
+

+ With MySpace becoming more popular every day, there is the + constant need to be different. There are millions of users. + If MySpace layouts are chosen well, then you can enhance + your profile a great deal. +

+ + +
Example small text
+

+ Computers have become ubiquitous in almost every facet of + our lives. At work, desk jockeys spend hours in front of + their desktops, while delivery people scan bar codes with + handhelds and workers in the field stay in touch with the + central office via their notebooks. Computer hardware weaves + itself through the fabric of our lives. +

+ + + +

Button

+ + Default + Primary + Success + Info + Warning + Danger + + + Default + Primary + Success + Info + Warning + Danger + + + Plain + Primary + Success + Info + Warning + Danger + + + Plain + Primary + Success + Info + Warning + Danger + + + Round + Primary + Success + Info + Warning + Danger + + + + + + + + + + + Default + Medium + Small + Mini + + + 文字按钮 + 文字按钮 + +

Radio

+ + Option A + Option B + + + + + + + + + + + Option A + Option B + +

Checkbox

+ + Option + + + + {{city}} + + + + + +

Input

+ + + +

InputNumber

+ + + +

Select

+ + + + + + +

Cascader

+ + + +

Switch

+ + + + + +

Slider

+ + + +

DatePicker

+ + + +

Rate

+ + + + + +

Transfer

+ + + Operation + Operation + + +

Table

+ + + + + + + +

Tag

+ + Tag One + Tag Two + Tag Three + Tag Four + Tag Five + +

Progress

+ + + + + +

Tree

+ + + +

Pagination

+ + + +

Badge

+ + + comments + + + replies + + + comments + + + replies + + +

Alert

+ + + + + + + +

Loading

+ + + + + + + +

Message

+ + + + + + +

MessageBox

+ +
+
+
+ Warning +
+ +
+
+
+
+

This will permanently delete the file. Continue?

+
+ +
+
+ +
+
+ +

Notification

+ + + +

Menu

+ + + Processing Center + + + item one + item two + item three + + + item one + item two + item three + + + Info + + Orders + + + + + + + item one + item one + + + item three + + + + item one + + + + + Navigator Two + + + + Navigator Three + + + + Navigator Four + + + +

Tabs

+ + + User + Config + Role + Task + + + User + Config + Role + Task + + +

Dialog

+ + + +

Tooltip

+ + + + +

Popover

+ + + +

Card

+ + +
+ Card name +
+ + +

Carousel

+ + + +

{{ item }}

+ + + +

Collapse

+ + + +
+ Consistent with real life: in line with the process and + logic of real life, and comply with languages and habits + that the users are used to; +
+ + +
+ Operation feedback: enable the users to clearly perceive + their operations by style updates and interactive effects; +
+ + + +

Avatar

+ + + avatar + + large + medium + small + +

Tree

+ + + +
+ + + +
+ +
+ Color + 复制变量 +
+ +

color-primary 主题色

+ + + + + + + + + +

color-success 成功题色

+ + + + + + + + + +

color-warning 警告题色

+ + + + + + + + + +

color-danger 危险题色

+ + + + + + + + + +

color-info 信息题色

+ + + + + + + + + +

color-text-primary 主要文字颜色

+ + + + + + + + + +

color-text-regular 常规文字颜色

+ + + + + + + + + +

color-text-secondary 次要文字颜色

+ + + + + + + + + +

color-text-placeholder 占位文字颜色

+ + + + + + + + + +

border-color-base 一级边框颜色

+ + + + + + + + + +

border-color-light 二级边框颜色

+ + + + + + + + + +

border-color-lighter 三级边框颜色

+ + + + + + + + + +

border-color-xlight 四级边框颜色

+ + + + + + + + +
+ + + 
{{ cssVariables}}
+ 使用方式：将上面的代码通过style属性添加到项目的html标签上 + + + +
+ + + + + + + + diff --git a/packages/design-system/theme/src/_tokens.dark.scss b/packages/design-system/theme/src/_tokens.dark.scss new file mode 100644 index 0000000000..5cf77596b2 --- /dev/null +++ b/packages/design-system/theme/src/_tokens.dark.scss @@ -0,0 +1,260 @@ +@mixin theme { + --color-primary-h: 7; + --color-primary-s: 100%; + --color-primary-l: 68%; + --color-primary: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-l) + ); + + --color-primary-tint-1-l: 18%; + --color-primary-tint-1: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-tint-1-l) + ); + + --color-primary-tint-2-l: 9%; + --color-primary-tint-2: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-tint-2-l) + ); + + --color-primary-tint-3-l: 3%; + --color-primary-tint-3: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-tint-3-l) + ); + + --color-primary-shade-1-l: 89%; + --color-primary-shade-1: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-shade-1-l) + ); + + --color-secondary-h: 247; + --color-secondary-s: 100%; + --color-secondary-l: 35%; + --color-secondary: hsl( + var(--color-secondary-h), + var(--color-secondary-s), + var(--color-secondary-l) + ); + + --color-success-h: 150; + --color-success-s: 74%; + --color-success-l: 60%; + --color-success: hsl( + var(--color-success-h), + var(--color-success-s), + var(--color-success-l) + ); + + --color-success-tint-1-l: 12%; + --color-success-tint-1: hsl( + var(--color-success-h), + var(--color-success-s), + var(--color-success-tint-1-l) + ); + + --color-success-tint-2-l: 3%; + --color-success-tint-2: hsl( + var(--color-success-h), + var(--color-success-s), + var(--color-success-tint-2-l) + ); + + --color-warning-h: 36; + --color-warning-s: 77%; + --color-warning-l: 43%; + --color-warning: hsl( + var(--color-warning-h), + var(--color-warning-s), + var(--color-warning-l) + ); + + --color-warning-tint-1-l: 12%; + --color-warning-tint-1: hsl( + var(--color-warning-h), + var(--color-warning-s), + var(--color-warning-tint-1-l) + ); + + --color-warning-tint-2-l: 4%; + --color-warning-tint-2: hsl( + var(--color-warning-h), + var(--color-warning-s), + var(--color-warning-tint-2-l) + ); + + --color-danger-h: 0; + --color-danger-s: 88%; + --color-danger-l: 35%; + --color-danger: hsl( + var(--color-danger-h), + var(--color-danger-s), + var(--color-danger-l) + ); + + --color-danger-tint-1-l: 8%; + --color-danger-tint-1: hsl( + var(--color-danger-h), + var(--color-danger-s), + var(--color-danger-tint-1-l) + ); + + --color-danger-tint-2-l: 3%; + --color-danger-tint-2: hsl( + var(--color-danger-h), + var(--color-danger-s), + var(--color-danger-tint-2-l) + ); + + --color-info-h: 220; + --color-info-s: 4%; + --color-info-l: 42%; + --color-info: hsl( + var(--color-info-h), + var(--color-info-s), + var(--color-info-l) + ); + + --color-info-tint-1-l: 12%; + --color-info-tint-1: hsl( + var(--color-info-h), + var(--color-info-s), + var(--color-info-tint-1-l) + ); + + --color-info-tint-2-l: 4%; + --color-info-tint-2: hsl( + var(--color-info-h), + var(--color-info-s), + var(--color-info-tint-2-l) + ); + + --color-text-dark-h: 0; + --color-text-dark-s: 0%; + --color-text-dark-l: 100%; + --color-text-dark: hsl( + var(--color-text-dark-h), + var(--color-text-dark-s), + var(--color-text-dark-l) + ); + + --color-text-base-h: 240; + --color-text-base-s: 4%; + --color-text-base-l: 49%; + --color-text-base: hsl( + var(--color-text-base-h), + var(--color-text-base-s), + var(--color-text-base-l) + ); + + --color-text-light-h: 220; + --color-text-light-s: 4%; + --color-text-light-l: 42%; + --color-text-light: hsl( + var(--color-text-light-h), + var(--color-text-light-s), + var(--color-text-light-l) + ); + + --color-text-lighter-h: 222; + --color-text-lighter-s: 17%; + --color-text-lighter-l: 12%; + --color-text-lighter: hsl( + var(--color-text-lighter-h), + var(--color-text-lighter-s), + var(--color-text-lighter-l) + ); + + --color-text-xlight-h: 0; + --color-text-xlight-s: 0%; + --color-text-xlight-l: 100%; + --color-text-xlight: hsl( + var(--color-text-xlight-h), + var(--color-text-xlight-s), + var(--color-text-xlight-l) + ); + + --color-foreground-base-h: 220; + --color-foreground-base-s: 20%; + --color-foreground-base-l: 12%; + --color-foreground-base: hsl( + var(--color-foreground-base-h), + var(--color-foreground-base-s), + var(--color-foreground-base-l) + ); + + --color-foreground-light-h: 0; + --color-foreground-light-s: 0%; + --color-foreground-light-l: 7%; + --color-foreground-light: hsl( + var(--color-foreground-light-h), + var(--color-foreground-light-s), + var(--color-foreground-light-l) + ); + + --color-foreground-xlight-h: 0; + --color-foreground-xlight-s: 0%; + --color-foreground-xlight-l: 0%; + --color-foreground-xlight: hsl( + var(--color-foreground-xlight-h), + var(--color-foreground-xlight-s), + var(--color-foreground-xlight-l) + ); + + --color-background-dark-h: 0; + --color-background-dark-s: 0%; + --color-background-dark-l: 100%; + --color-background-dark: hsl( + var(--color-background-dark-h), + var(--color-background-dark-s), + var(--color-background-dark-l) + ); + + --color-background-base-h: 252; + --color-background-base-s: 71%; + --color-background-base-l: 99%; + --color-background-base: hsl( + var(--color-background-base-h), + var(--color-background-base-s), + var(--color-background-base-l) + ); + + --color-background-light-h: 220; + --color-background-light-s: 27%; + --color-background-light-l: 98%; + --color-background-light: hsl( + var(--color-background-light-h), + var(--color-background-light-s), + var(--color-background-light-l) + ); + + --color-background-lighter-h: 220; + --color-background-lighter-s: 30%; + --color-background-lighter-l: 96%; + --color-background-lighter: hsl( + var(--color-background-lighter-h), + var(--color-background-lighter-s), + var(--color-background-lighter-l) + ); + + --color-background-xlight-h: 240; + --color-background-xlight-s: 4%; + --color-background-xlight-l: 19%; + --color-background-xlight: hsl( + var(--color-background-xlight-h), + var(--color-background-xlight-s), + var(--color-background-xlight-l) + ); +} + +body.theme-dark { + @include theme; +} diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss new file mode 100644 index 0000000000..8206e42095 --- /dev/null +++ b/packages/design-system/theme/src/_tokens.scss @@ -0,0 +1,307 @@ +@mixin theme { + --color-primary-h: 6.9; + --color-primary-s: 100%; + --color-primary-l: 67.6%; + --color-primary: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-l) + ); + + --color-primary-tint-1-l: 88%; + --color-primary-tint-1: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-tint-1-l) + ); + + --color-primary-tint-2-l: 94.5%; + --color-primary-tint-2: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-tint-2-l) + ); + + --color-primary-tint-3-l: 96.9%; + --color-primary-tint-3: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-tint-3-l) + ); + + --color-primary-shade-1-l: 57.6%; + --color-primary-shade-1: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-shade-1-l) + ); + + --color-primary-shade-2-l: 23%; + --color-primary-shade-2: hsl( + var(--color-primary-h), + var(--color-primary-s), + var(--color-primary-shade-2-l) + ); + + --color-secondary-h: 247; + --color-secondary-s: 49%; + --color-secondary-l: 53%; + --color-secondary: hsl( + var(--color-secondary-h), + var(--color-secondary-s), + var(--color-secondary-l) + ); + + --color-success-h: 150.4; + --color-success-s: 73.8%; + --color-success-l: 40.4%; + --color-success: hsl( + var(--color-success-h), + var(--color-success-s), + var(--color-success-l) + ); + + --color-success-tint-1-l: 90%; + --color-success-tint-1: hsl( + var(--color-success-h), + var(--color-success-s), + var(--color-success-tint-1-l) + ); + + --color-success-tint-2-l: 94.9%; + --color-success-tint-2: hsl( + var(--color-success-h), + var(--color-success-s), + var(--color-success-tint-2-l) + ); + + --color-warning-h: 36; + --color-warning-s: 77%; + --color-warning-l: 57%; + --color-warning: hsl( + var(--color-warning-h), + var(--color-warning-s), + var(--color-warning-l) + ); + + --color-warning-tint-1-l: 88%; + --color-warning-tint-1: hsl( + var(--color-warning-h), + var(--color-warning-s), + var(--color-warning-tint-1-l) + ); + + --color-warning-tint-2-l: 96%; + --color-warning-tint-2: hsl( + var(--color-warning-h), + var(--color-warning-s), + var(--color-warning-tint-2-l) + ); + + --color-danger-h: 0; + --color-danger-s: 87.6%; + --color-danger-l: 65.3%; + --color-danger: hsl( + var(--color-danger-h), + var(--color-danger-s), + var(--color-danger-l) + ); + + --color-danger-tint-1-l: 93.9%; + --color-danger-tint-1: hsl( + var(--color-danger-h), + var(--color-danger-s), + var(--color-danger-tint-1-l) + ); + --color-danger-tint-2-l: 96.9%; + --color-danger-tint-2: hsl( + var(--color-danger-h), + var(--color-danger-s), + var(--color-danger-tint-2-l) + ); + + --color-info-h: 220; + --color-info-s: 4%; + --color-info-l: 58%; + --color-info: hsl( + var(--color-info-h), + var(--color-info-s), + var(--color-info-l) + ); + + --color-info-tint-1-l: 88%; + --color-info-tint-1: hsl( + var(--color-info-h), + var(--color-info-s), + var(--color-info-tint-1-l) + ); + --color-info-tint-2-l: 96%; + --color-info-tint-2: hsl( + var(--color-info-h), + var(--color-info-s), + var(--color-info-tint-2-l) + ); + + --color-text-dark-h: 0; + --color-text-dark-s: 0%; + --color-text-dark-l: 33.3%; + --color-text-dark: hsl( + var(--color-text-dark-h), + var(--color-text-dark-s), + var(--color-text-dark-l) + ); + + --color-text-base-h: 240; + --color-text-base-s: 4%; + --color-text-base-l: 51%; + --color-text-base: hsl( + var(--color-text-base-h), + var(--color-text-base-s), + var(--color-text-base-l) + ); + + --color-text-light-h: 220; + --color-text-light-s: 4.2%; + --color-text-light-l: 58.2%; + --color-text-light: hsl( + var(--color-text-light-h), + var(--color-text-light-s), + var(--color-text-light-l) + ); + + --color-text-lighter-h: 222; + --color-text-lighter-s: 16.7%; + --color-text-lighter-l: 88.2%; + --color-text-lighter: hsl( + var(--color-text-lighter-h), + var(--color-text-lighter-s), + var(--color-text-lighter-l) + ); + + --color-text-xlight-h: 0; + --color-text-xlight-s: 0%; + --color-text-xlight-l: 100%; + --color-text-xlight: hsl( + var(--color-text-xlight-h), + var(--color-text-xlight-s), + var(--color-text-xlight-l) + ); + + --color-foreground-base-h: 220; + --color-foreground-base-s: 20%; + --color-foreground-base-l: 88.2%; + --color-foreground-base: hsl( + var(--color-foreground-base-h), + var(--color-foreground-base-s), + var(--color-foreground-base-l) + ); + + --color-foreground-light-h: 0; + --color-foreground-light-s: 0%; + --color-foreground-light-l: 93.3%; + --color-foreground-light: hsl( + var(--color-foreground-light-h), + var(--color-foreground-light-s), + var(--color-foreground-light-l) + ); + + --color-foreground-xlight-h: 0; + --color-foreground-xlight-s: 0%; + --color-foreground-xlight-l: 100%; + --color-foreground-xlight: hsl( + var(--color-foreground-xlight-h), + var(--color-foreground-xlight-s), + var(--color-foreground-xlight-l) + ); + + --color-background-dark-h: 240; + --color-background-dark-s: 4.2%; + --color-background-dark-l: 18.8%; + --color-background-dark: hsl( + var(--color-background-dark-h), + var(--color-background-dark-s), + var(--color-background-dark-l) + ); + + --color-background-base-h: 220; + --color-background-base-s: 30%; + --color-background-base-l: 96.1%; + --color-background-base: hsl( + var(--color-background-base-h), + var(--color-background-base-s), + var(--color-background-base-l) + ); + + --color-background-light-h: 220; + --color-background-light-s: 27.3%; + --color-background-light-l: 97.8%; + --color-background-light: hsl( + var(--color-background-light-h), + var(--color-background-light-s), + var(--color-background-light-l) + ); + + --color-background-lighter-h: 252; + --color-background-lighter-s: 71.4%; + --color-background-lighter-l: 98.6%; + --color-background-lighter: hsl( + var(--color-background-lighter-h), + var(--color-background-lighter-s), + var(--color-background-lighter-l) + ); + + --color-background-xlight-h: 0; + --color-background-xlight-s: 0%; + --color-background-xlight-l: 100%; + --color-background-xlight: hsl( + var(--color-background-xlight-h), + var(--color-background-xlight-s), + var(--color-background-xlight-l) + ); + + --border-radius-base: 4px; + --border-radius-small: 2px; + --border-color-base: var(--color-foreground-base); + --border-color-light: var(--color-foreground-light); + + --border-style-base: solid; + --border-width-base: 1px; + --border-base: var(--border-width-base) var(--border-style-base) + var(--color-foreground-base); + + --font-size-2xs: 0.75rem; + --font-size-xs: 0.8125rem; + --font-size-s: 0.875rem; + --font-size-m: 1rem; + --font-size-l: 1.125rem; + --font-size-xl: 1.25rem; + --font-size-2xl: 1.75rem; + + --font-line-height-compact: 1.25; + --font-line-height-regular: 1.3; + --font-line-height-loose: 1.35; + --font-line-height-xloose: 1.5; + + --font-weight-regular: 400; + --font-weight-semi-bold: 500; + --font-weight-bold: 600; + --font-family: 'Open Sans', sans-serif; + + --spacing-5xs: 0.125rem; + --spacing-4xs: 0.25rem; + --spacing-3xs: 0.375rem; + --spacing-2xs: 0.5rem; + --spacing-xs: 0.75rem; + --spacing-s: 1rem; + --spacing-m: 1.25rem; + --spacing-l: 1.5rem; + --spacing-xl: 2rem; + --spacing-2xl: 3rem; + --spacing-3xl: 4rem; + --spacing-4xl: 8rem; + --spacing-5xl: 16rem; +} + +:root { + @include theme; +} diff --git a/packages/design-system/theme/src/alert.scss b/packages/design-system/theme/src/alert.scss new file mode 100644 index 0000000000..5ebaf3b9eb --- /dev/null +++ b/packages/design-system/theme/src/alert.scss @@ -0,0 +1,147 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(alert) { + width: 100%; + padding: var.$alert-padding; + margin: 0; + box-sizing: border-box; + border-radius: var.$alert-border-radius; + position: relative; + background-color: var.$color-white; + overflow: hidden; + opacity: 1; + display: flex; + align-items: center; + transition: opacity 0.2s; + + @include mixins.when(light) { + .el-alert__closebtn { + color: var(--color-text-lighter); + } + } + + @include mixins.when(dark) { + .el-alert__closebtn { + color: var.$color-white; + } + .el-alert__description { + color: var.$color-white; + } + } + + @include mixins.when(center) { + justify-content: center; + } + + @include mixins.m(success) { + &.is-light { + background-color: var.$alert-success-color; + color: var(--color-success); + + .el-alert__description { + color: var(--color-success); + } + } + + &.is-dark { + background-color: var(--color-success); + color: var.$color-white; + } + } + + @include mixins.m(info) { + &.is-light { + background-color: var.$alert-info-color; + color: var(--color-info); + } + + &.is-dark { + background-color: var(--color-info); + color: var.$color-white; + } + + .el-alert__description { + color: var(--color-info); + } + } + + @include mixins.m(warning) { + &.is-light { + background-color: var.$alert-warning-color; + color: var(--color-warning); + + .el-alert__description { + color: var(--color-warning); + } + } + + &.is-dark { + background-color: var(--color-warning); + color: var.$color-white; + } + } + + @include mixins.m(error) { + &.is-light { + background-color: var.$alert-danger-color; + color: var(--color-danger); + + .el-alert__description { + color: var(--color-danger); + } + } + + &.is-dark { + background-color: var(--color-danger); + color: var.$color-white; + } + } + + @include mixins.e(content) { + display: table-cell; + padding: 0 8px; + } + + @include mixins.e(icon) { + font-size: var.$alert-icon-size; + width: var.$alert-icon-size; + @include mixins.when(big) { + font-size: var.$alert-icon-large-size; + width: var.$alert-icon-large-size; + } + } + + @include mixins.e(title) { + font-size: var.$alert-title-font-size; + line-height: 18px; + @include mixins.when(bold) { + font-weight: bold; + } + } + + & .el-alert__description { + font-size: var.$alert-description-font-size; + margin: 5px 0 0 0; + } + + @include mixins.e(closebtn) { + font-size: var.$alert-close-font-size; + opacity: 1; + position: absolute; + top: 12px; + right: 15px; + cursor: pointer; + + @include mixins.when(customed) { + font-style: normal; + font-size: var.$alert-close-customed-font-size; + top: 9px; + } + } +} + +.el-alert-fade-enter, +.el-alert-fade-leave-active { + opacity: 0; +} diff --git a/packages/design-system/theme/src/aside.scss b/packages/design-system/theme/src/aside.scss new file mode 100644 index 0000000000..d89d63ff73 --- /dev/null +++ b/packages/design-system/theme/src/aside.scss @@ -0,0 +1,7 @@ +@use "mixins/mixins"; + +@include mixins.b(aside) { + overflow: auto; + box-sizing: border-box; + flex-shrink: 0; +} diff --git a/packages/design-system/theme/src/autocomplete.scss b/packages/design-system/theme/src/autocomplete.scss new file mode 100644 index 0000000000..8918538677 --- /dev/null +++ b/packages/design-system/theme/src/autocomplete.scss @@ -0,0 +1,80 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "./common/var"; +@use "./input.scss"; +@use "./scrollbar.scss"; +@use "./popper"; + +@include mixins.b(autocomplete) { + position: relative; + display: inline-block; +} + +@include mixins.b(autocomplete-suggestion) { + margin: 5px 0; + box-shadow: var.$box-shadow-light; + border-radius: var(--border-radius-base); + border: 1px solid var(--border-color-base); + box-sizing: border-box; + background-color: var.$color-white; + + @include mixins.e(wrap) { + max-height: 280px; + padding: 10px 0; + box-sizing: border-box; + } + + @include mixins.e(list) { + margin: 0; + padding: 0; + } + + & li { + padding: 0 20px; + margin: 0; + line-height: 34px; + cursor: pointer; + color: var(--color-text-dark); + font-size: var.$font-size-base; + list-style: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + background-color: var.$select-option-hover-background; + } + + &.highlighted { + background-color: var.$select-option-hover-background; + } + + &.divider { + margin-top: 6px; + border-top: 1px solid var.$color-black; + } + + &.divider:last-child { + margin-bottom: -6px; + } + } + + @include mixins.when(loading) { + li { + text-align: center; + height: 100px; + line-height: 100px; + font-size: 20px; + color: #999; + @include utils.utils-vertical-center; + + &:hover { + background-color: var.$color-white; + } + } + + & .el-icon-loading { + vertical-align: middle; + } + } +} diff --git a/packages/design-system/theme/src/avatar.scss b/packages/design-system/theme/src/avatar.scss new file mode 100644 index 0000000000..120b0cccb3 --- /dev/null +++ b/packages/design-system/theme/src/avatar.scss @@ -0,0 +1,51 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(avatar) { + display: inline-block; + box-sizing: border-box; + text-align: center; + overflow: hidden; + color: var.$avatar-font-color; + background: var.$avatar-background-color; + width: var.$avatar-large-size; + height: var.$avatar-large-size; + line-height: var.$avatar-large-size; + font-size: var.$avatar-text-font-size; + + > img { + display: block; + height: 100%; + vertical-align: middle; + } + + @include mixins.m(circle) { + border-radius: 50%; + } + + @include mixins.m(square) { + border-radius: var.$avatar-border-radius; + } + + @include mixins.m(icon) { + font-size: var.$avatar-icon-font-size; + } + + @include mixins.m(large) { + width: var.$avatar-large-size; + height: var.$avatar-large-size; + line-height: var.$avatar-large-size; + } + + @include mixins.m(medium) { + width: var.$avatar-medium-size; + height: var.$avatar-medium-size; + line-height: var.$avatar-medium-size; + } + + @include mixins.m(small) { + width: var.$avatar-small-size; + height: var.$avatar-small-size; + line-height: var.$avatar-small-size; + } +} diff --git a/packages/design-system/theme/src/backtop.scss b/packages/design-system/theme/src/backtop.scss new file mode 100644 index 0000000000..9813ef2028 --- /dev/null +++ b/packages/design-system/theme/src/backtop.scss @@ -0,0 +1,22 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(backtop) { + position: fixed; + background-color: var.$backtop-background-color; + width: 40px; + height: 40px; + border-radius: 50%; + color: var.$backtop-font-color; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); + cursor: pointer; + z-index: 5; + + &:hover { + background-color: var.$backtop-hover-background-color; + } +} diff --git a/packages/design-system/theme/src/badge.scss b/packages/design-system/theme/src/badge.scss new file mode 100644 index 0000000000..c1b1f474a0 --- /dev/null +++ b/packages/design-system/theme/src/badge.scss @@ -0,0 +1,58 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(badge) { + position: relative; + vertical-align: middle; + display: inline-block; + + @include mixins.e(content) { + background-color: var.$badge-background-color; + border-radius: var.$badge-radius; + color: var.$color-white; + display: inline-block; + font-size: var.$badge-font-size; + height: var.$badge-size; + line-height: var.$badge-size; + padding: 0 var.$badge-padding; + text-align: center; + white-space: nowrap; + border: 1px solid var.$color-white; + box-sizing: content-box; + + @include mixins.when(fixed) { + position: absolute; + top: 0; + right: #{1 + var.$badge-size * 0.5}; + transform: translateY(-50%) translateX(100%); + + @include mixins.when(dot) { + right: 5px; + } + } + + @include mixins.when(dot) { + height: 8px; + width: 8px; + padding: 0; + right: 0; + border-radius: 50%; + } + + @each $type in (primary, success, warning, info, danger) { + @include mixins.m($type) { + @if $type == primary { + background-color: var(--color-primary); + } @else if $type == success { + background-color: var(--color-success); + } @else if $type == warning { + background-color: var(--color-warning); + } @else if $type == info { + background-color: var(--color-info); + } @else { + background-color: var(--color-danger); + } + } + } + } +} diff --git a/packages/design-system/theme/src/base.scss b/packages/design-system/theme/src/base.scss new file mode 100644 index 0000000000..8557d05fb0 --- /dev/null +++ b/packages/design-system/theme/src/base.scss @@ -0,0 +1,3 @@ +@forward "common/var.scss"; +@use "common/transition.scss"; +@use "icon.scss"; diff --git a/packages/design-system/theme/src/breadcrumb-item.scss b/packages/design-system/theme/src/breadcrumb-item.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/breadcrumb.scss b/packages/design-system/theme/src/breadcrumb.scss new file mode 100644 index 0000000000..b571a6c3b2 --- /dev/null +++ b/packages/design-system/theme/src/breadcrumb.scss @@ -0,0 +1,57 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "./common/var"; + +@include mixins.b(breadcrumb) { + font-size: 14px; + line-height: 1; + @include utils.utils-clearfix; + + @include mixins.e(separator) { + margin: 0 9px; + font-weight: bold; + color: var(--color-text-lighter); + + &[class*='icon'] { + margin: 0 6px; + font-weight: normal; + } + } + + @include mixins.e(item) { + float: left; + + @include mixins.e(inner) { + color: var(--color-text-dark); + + &.is-link, + & a { + font-weight: bold; + text-decoration: none; + transition: var.$color-transition-base; + color: var(--color-text-dark); + + &:hover { + color: var(--color-primary); + cursor: pointer; + } + } + } + + &:last-child { + .el-breadcrumb__inner, + .el-breadcrumb__inner a { + &, + &:hover { + font-weight: normal; + color: var(--color-text-dark); + cursor: text; + } + } + + .el-breadcrumb__separator { + display: none; + } + } + } +} diff --git a/packages/design-system/theme/src/button-group.scss b/packages/design-system/theme/src/button-group.scss new file mode 100644 index 0000000000..25b280a51a --- /dev/null +++ b/packages/design-system/theme/src/button-group.scss @@ -0,0 +1,84 @@ +@charset "UTF-8"; +@use 'common/var'; +@use 'mixins/button'; +@use 'mixins/mixins'; +@use 'mixins/utils'; +@use 'mixins/function'; + +@include mixins.b(button-group) { + @include utils.utils-clearfix; + display: inline-block; + vertical-align: middle; + + & > .el-button { + float: left; + position: relative; + & + .el-button { + margin-left: 0; + } + &.is-disabled { + z-index: 1; + } + &:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + &:first-child:last-child { + border-top-right-radius: var(--border-radius-base); + border-bottom-right-radius: var(--border-radius-base); + border-top-left-radius: var(--border-radius-base); + border-bottom-left-radius: var(--border-radius-base); + + &.is-round { + border-radius: 20px; + } + + &.is-circle { + border-radius: 50%; + } + } + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:not(:last-child) { + margin-right: -1px; + } + + &:hover, + &:focus, + &:active { + z-index: 1; + } + + @include mixins.when(active) { + z-index: 1; + } + } + + & > .el-dropdown { + & > .el-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-color: rgba(var.$color-white, 0.5); + } + } + + @each $type in (primary, success, warning, danger, info) { + .el-button--#{$type} { + &:first-child { + border-right-color: rgba(var.$color-white, 0.5); + } + &:last-child { + border-left-color: rgba(var.$color-white, 0.5); + } + &:not(:first-child):not(:last-child) { + border-left-color: rgba(var.$color-white, 0.5); + border-right-color: rgba(var.$color-white, 0.5); + } + } + } +} diff --git a/packages/design-system/theme/src/button.scss b/packages/design-system/theme/src/button.scss new file mode 100644 index 0000000000..c16e720b5d --- /dev/null +++ b/packages/design-system/theme/src/button.scss @@ -0,0 +1,107 @@ +@charset "UTF-8"; +@use 'mixins/mixins'; +@use 'mixins/utils'; +@use 'mixins/function'; +@use 'common/var'; + +$disabled-border-color: var(--color-foreground-base); + +$loading-overlay-background-color: rgba(255, 255, 255, 0.35); + +@include mixins.b(button) { + display: inline-block; + line-height: 1; + white-space: nowrap; + cursor: pointer; + + border: var(--border-width-base) var.$button-border-color + var(--border-style-base); + color: var.$button-font-color; + background-color: var.$button-background-color; + font-weight: var(--font-weight-bold); + border-radius: var.$button-border-radius; + padding: var.$button-padding-vertical var.$button-padding-horizontal; + font-size: var.$button-font-size; + + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: none; + margin: 0; + transition: 0.1s; + + @include utils.utils-user-select(none); + + &:active { + color: var.$button-active-color; + border-color: var.$button-active-border-color; + background-color: var.$button-active-background-color; + outline: none; + } + + &::-moz-focus-inner { + border: 0; + } + + @include mixins.when(loading) { + position: relative; + pointer-events: none; + + &:before { + pointer-events: none; + content: ''; + position: absolute; + left: -1px; + top: -1px; + right: -1px; + bottom: -1px; + border-radius: inherit; + background-color: $loading-overlay-background-color; + } + } + + @include mixins.when(disabled) { + &, + &:hover, + &:active, + &:focus { + cursor: not-allowed; + background-image: none; + color: var.$button-disabled-font-color; + background-color: var.$button-disabled-background-color; + border-color: var.$button-disabled-border-color; + } + } + + @include mixins.when(round) { + --button-border-radius: 20px; + } + + @include mixins.when(circle) { + --button-padding-vertical: var(--spacing-xs); + --button-padding-horizontal: var(--spacing-xs); + --button-border-radius: 50%; + } + + @include mixins.m(small) { + --button-padding-vertical: var(--spacing-3xs); + --button-padding-horizontal: var(--spacing-xs); + --button-font-size: var(--font-size-2xs); + + @include mixins.when(circle) { + --button-padding-vertical: var(--spacing-3xs); + --button-padding-horizontal: var(--spacing-3xs); + } + } + + @include mixins.m(medium) { + --button-padding-vertical: var(--spacing-2xs); + --button-padding-horizontal: var(--spacing-xs); + --button-font-size: var(--font-size-2xs); + + @include mixins.when(circle) { + --button-padding-vertical: var(--spacing-2xs); + --button-padding-horizontal: var(--spacing-2xs); + } + } +} diff --git a/packages/design-system/theme/src/calendar.scss b/packages/design-system/theme/src/calendar.scss new file mode 100644 index 0000000000..d06e915090 --- /dev/null +++ b/packages/design-system/theme/src/calendar.scss @@ -0,0 +1,79 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "button"; +@use "button-group"; + +@include mixins.b(calendar) { + background-color: #fff; + + @include mixins.e(header) { + display: flex; + justify-content: space-between; + padding: 12px 20px; + border-bottom: var.$table-border; + } + + @include mixins.e(title) { + color: #000000; + align-self: center; + } + + @include mixins.e(body) { + padding: 12px 20px 35px; + } +} + +@include mixins.b(calendar-table) { + table-layout: fixed; + width: 100%; + + thead th { + padding: 12px 0; + color: var(--color-text-dark); + font-weight: normal; + } + + &:not(.is-range) { + td.prev, + td.next { + color: var(--color-text-lighter); + } + } + + td { + border-bottom: var.$calendar-border; + border-right: var.$calendar-border; + vertical-align: top; + transition: background-color 0.2s ease; + + @include mixins.when(selected) { + background-color: var.$calendar-selected-background-color; + } + + @include mixins.when(today) { + color: var(--color-primary); + } + } + + tr:first-child td { + border-top: var.$calendar-border; + } + + tr td:first-child { + border-left: var.$calendar-border; + } + + tr.el-calendar-table__row--hide-border td { + border-top: none; + } + + @include mixins.b(calendar-day) { + box-sizing: border-box; + padding: 8px; + height: var.$calendar-cell-width; + &:hover { + cursor: pointer; + background-color: var.$calendar-selected-background-color; + } + } +} diff --git a/packages/design-system/theme/src/card.scss b/packages/design-system/theme/src/card.scss new file mode 100644 index 0000000000..8cca8fe2e4 --- /dev/null +++ b/packages/design-system/theme/src/card.scss @@ -0,0 +1,32 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(card) { + border-radius: var.$card-border-radius; + border: 1px solid var.$card-border-color; + background-color: var.$color-white; + overflow: hidden; + color: var(--color-text-dark); + transition: 0.3s; + + @include mixins.when(always-shadow) { + box-shadow: var.$box-shadow-light; + } + + @include mixins.when(hover-shadow) { + &:hover, + &:focus { + box-shadow: var.$box-shadow-light; + } + } + + @include mixins.e(header) { + padding: #{var.$card-padding - 2 var.$card-padding}; + border-bottom: 1px solid var.$card-border-color; + box-sizing: border-box; + } + + @include mixins.e(body) { + padding: var.$card-padding; + } +} diff --git a/packages/design-system/theme/src/carousel-item.scss b/packages/design-system/theme/src/carousel-item.scss new file mode 100644 index 0000000000..5ebd254baf --- /dev/null +++ b/packages/design-system/theme/src/carousel-item.scss @@ -0,0 +1,50 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(carousel) { + @include mixins.e(item) { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: inline-block; + overflow: hidden; + z-index: #{var.$index-normal - 1}; + + @include mixins.when(active) { + z-index: #{var.$index-normal + 1}; + } + + @include mixins.when(animating) { + transition: transform 0.4s ease-in-out; + } + + @include mixins.m(card) { + width: 50%; + transition: transform 0.4s ease-in-out; + &.is-in-stage { + cursor: pointer; + z-index: var.$index-normal; + &:hover .el-carousel__mask, + &.is-hover .el-carousel__mask { + opacity: 0.12; + } + } + &.is-active { + z-index: #{var.$index-normal + 1}; + } + } + } + + @include mixins.e(mask) { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: var.$color-white; + opacity: 0.24; + transition: 0.2s; + } +} diff --git a/packages/design-system/theme/src/carousel.scss b/packages/design-system/theme/src/carousel.scss new file mode 100644 index 0000000000..fa1f93f75a --- /dev/null +++ b/packages/design-system/theme/src/carousel.scss @@ -0,0 +1,164 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(carousel) { + position: relative; + + @include mixins.m(horizontal) { + overflow-x: hidden; + } + + @include mixins.m(vertical) { + overflow-y: hidden; + } + + @include mixins.e(container) { + position: relative; + height: 300px; + } + + @include mixins.e(arrow) { + border: none; + outline: none; + padding: 0; + margin: 0; + height: var.$carousel-arrow-size; + width: var.$carousel-arrow-size; + cursor: pointer; + transition: 0.3s; + border-radius: 50%; + background-color: var.$carousel-arrow-background; + color: var.$color-white; + position: absolute; + top: 50%; + z-index: 10; + transform: translateY(-50%); + text-align: center; + font-size: var.$carousel-arrow-font-size; + + @include mixins.m(left) { + left: 16px; + } + + @include mixins.m(right) { + right: 16px; + } + + &:hover { + background-color: var.$carousel-arrow-hover-background; + } + + & i { + cursor: pointer; + } + } + + @include mixins.e(indicators) { + position: absolute; + list-style: none; + margin: 0; + padding: 0; + z-index: #{var.$index-normal + 1}; + + @include mixins.m(horizontal) { + bottom: 0; + left: 50%; + transform: translateX(-50%); + } + + @include mixins.m(vertical) { + right: 0; + top: 50%; + transform: translateY(-50%); + } + + @include mixins.m(outside) { + bottom: #{var.$carousel-indicator-height + + var.$carousel-indicator-padding-vertical * 2}; + text-align: center; + position: static; + transform: none; + .el-carousel__indicator:hover button { + opacity: 0.64; + } + button { + background-color: var.$carousel-indicator-out-color; + opacity: 0.24; + } + } + + @include mixins.m(labels) { + left: 0; + right: 0; + transform: none; + text-align: center; + + .el-carousel__button { + height: auto; + width: auto; + padding: 2px 18px; + font-size: 12px; + } + + .el-carousel__indicator { + padding: 6px 4px; + } + } + } + + @include mixins.e(indicator) { + background-color: transparent; + cursor: pointer; + + &:hover button { + opacity: 0.72; + } + + @include mixins.m(horizontal) { + display: inline-block; + padding: var.$carousel-indicator-padding-vertical + var.$carousel-indicator-padding-horizontal; + } + + @include mixins.m(vertical) { + padding: var.$carousel-indicator-padding-horizontal + var.$carousel-indicator-padding-vertical; + .el-carousel__button { + width: var.$carousel-indicator-height; + height: #{var.$carousel-indicator-width * 0.5}; + } + } + + @include mixins.when(active) { + button { + opacity: 1; + } + } + } + + @include mixins.e(button) { + display: block; + opacity: 0.48; + width: var.$carousel-indicator-width; + height: var.$carousel-indicator-height; + background-color: var.$color-white; + border: none; + outline: none; + padding: 0; + margin: 0; + cursor: pointer; + transition: 0.3s; + } +} + +.carousel-arrow-left-enter, +.carousel-arrow-left-leave-active { + transform: translateY(-50%) translateX(-10px); + opacity: 0; +} + +.carousel-arrow-right-enter, +.carousel-arrow-right-leave-active { + transform: translateY(-50%) translateX(10px); + opacity: 0; +} diff --git a/packages/design-system/theme/src/cascader-panel.scss b/packages/design-system/theme/src/cascader-panel.scss new file mode 100644 index 0000000000..74a85d47cc --- /dev/null +++ b/packages/design-system/theme/src/cascader-panel.scss @@ -0,0 +1,121 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "./checkbox"; +@use "./radio"; +@use "./scrollbar"; + +@include mixins.b(cascader-panel) { + display: flex; + border-radius: var.$cascader-menu-radius; + font-size: var.$cascader-menu-font-size; + + @include mixins.when(bordered) { + border: var.$cascader-menu-border; + border-radius: var.$cascader-menu-radius; + } +} + +@include mixins.b(cascader-menu) { + min-width: 180px; + box-sizing: border-box; + color: var.$cascader-menu-font-color; + border-right: var.$cascader-menu-border; + + &:last-child { + border-right: none; + .el-cascader-node { + padding-right: 20px; + } + } + + @include mixins.e(wrap) { + height: 204px; + } + + @include mixins.e(list) { + position: relative; + min-height: 100%; + margin: 0; + padding: 6px 0; + list-style: none; + box-sizing: border-box; + } + + @include mixins.e(hover-zone) { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + + @include mixins.e(empty-text) { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: var.$cascader-color-empty; + } +} + +@include mixins.b(cascader-node) { + position: relative; + display: flex; + align-items: center; + padding: 0 30px 0 20px; + height: 34px; + line-height: 34px; + outline: none; + + &.is-selectable.in-active-path { + color: var.$cascader-menu-font-color; + } + + &.in-active-path, + &.is-selectable.in-checked-path, + &.is-active { + color: var.$cascader-menu-selected-font-color; + font-weight: bold; + } + + &:not(.is-disabled) { + cursor: pointer; + &:hover, + &:focus { + background: var.$cascader-node-background-hover; + } + } + + @include mixins.when(disabled) { + color: var.$cascader-node-color-disabled; + cursor: not-allowed; + } + + @include mixins.e(prefix) { + position: absolute; + left: 10px; + } + + @include mixins.e(postfix) { + position: absolute; + right: 10px; + } + + @include mixins.e(label) { + flex: 1; + padding: 0 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + > .el-radio { + margin-right: 0; + + .el-radio__label { + padding-left: 0; + } + } +} diff --git a/packages/design-system/theme/src/cascader.scss b/packages/design-system/theme/src/cascader.scss new file mode 100644 index 0000000000..7d0aac273e --- /dev/null +++ b/packages/design-system/theme/src/cascader.scss @@ -0,0 +1,183 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "./input"; +@use "./popper"; +@use "./tag"; +@use "./cascader-panel"; + +@include mixins.b(cascader) { + display: inline-block; + position: relative; + font-size: var.$font-size-base; + line-height: var.$input-height; + + &:not(.is-disabled):hover { + .el-input__inner { + cursor: pointer; + border-color: var.$input-hover-border; + } + } + + .el-input { + cursor: pointer; + + .el-input__inner { + text-overflow: ellipsis; + + &:focus { + border-color: var.$input-focus-border; + } + } + + .el-icon-arrow-down { + transition: transform 0.3s; + font-size: 14px; + + @include mixins.when(reverse) { + transform: rotateZ(180deg); + } + } + + .el-icon-circle-close:hover { + color: var.$input-clear-hover-color; + } + + @include mixins.when(focus) { + .el-input__inner { + border-color: var.$input-focus-border; + } + } + } + + @include mixins.m(medium) { + font-size: var.$input-medium-font-size; + line-height: var.$input-medium-height; + } + + @include mixins.m(small) { + font-size: var.$input-small-font-size; + line-height: var.$input-small-height; + } + + @include mixins.m(mini) { + font-size: var.$input-mini-font-size; + line-height: var.$input-mini-height; + } + + @include mixins.when(disabled) { + .el-cascader__label { + z-index: #{var.$index-normal + 1}; + color: var.$disabled-color-base; + } + } + + @include mixins.e(dropdown) { + margin: 5px 0; + font-size: var.$cascader-menu-font-size; + background: var.$cascader-menu-fill; + border: var.$cascader-menu-border; + border-radius: var.$cascader-menu-radius; + box-shadow: var.$cascader-menu-shadow; + } + + @include mixins.e(tags) { + position: absolute; + left: 0; + right: 30px; + top: 50%; + transform: translateY(-50%); + display: flex; + flex-wrap: wrap; + line-height: normal; + text-align: left; + box-sizing: border-box; + + .el-tag { + display: inline-flex; + align-items: center; + max-width: 100%; + margin: 2px 0 2px 6px; + text-overflow: ellipsis; + background: var.$cascader-tag-background; + + &:not(.is-hit) { + border-color: transparent; + } + + > span { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + } + + .el-icon-close { + flex: none; + background-color: var(--color-text-lighter); + color: var.$color-white; + + &:hover { + background-color: var(--color-text-light); + } + } + } + } + + @include mixins.e(suggestion-panel) { + border-radius: var.$cascader-menu-radius; + } + + @include mixins.e(suggestion-list) { + max-height: 204px; + margin: 0; + padding: 6px 0; + font-size: var.$font-size-base; + color: var.$cascader-menu-font-color; + text-align: center; + } + + @include mixins.e(suggestion-item) { + display: flex; + justify-content: space-between; + align-items: center; + height: 34px; + padding: 0 15px; + text-align: left; + outline: none; + cursor: pointer; + + &:hover, + &:focus { + background: var.$cascader-node-background-hover; + } + + &.is-checked { + color: var.$cascader-menu-selected-font-color; + font-weight: bold; + } + + > span { + margin-right: 10px; + } + } + + @include mixins.e(empty-text) { + margin: 10px 0; + color: var.$cascader-color-empty; + } + + @include mixins.e(search-input) { + flex: 1; + height: 24px; + min-width: 60px; + margin: 2px 0 2px 15px; + padding: 0; + color: var.$cascader-menu-font-color; + border: none; + outline: none; + box-sizing: border-box; + + &::placeholder { + color: var(--color-text-lighter); + } + } +} diff --git a/packages/design-system/theme/src/checkbox-button.scss b/packages/design-system/theme/src/checkbox-button.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/checkbox-group.scss b/packages/design-system/theme/src/checkbox-group.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/checkbox.scss b/packages/design-system/theme/src/checkbox.scss new file mode 100644 index 0000000000..a699b7e39c --- /dev/null +++ b/packages/design-system/theme/src/checkbox.scss @@ -0,0 +1,380 @@ +@use "./common/var"; +@use "mixins/mixins"; +@use "mixins/_button"; +@use "mixins/utils"; + +@include mixins.b(checkbox) { + color: var.$checkbox-font-color; + font-weight: var.$checkbox-font-weight; + font-size: var.$font-size-base; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + user-select: none; + margin-right: 30px; + + @include mixins.when(bordered) { + padding: var.$checkbox-bordered-padding; + border-radius: var(--border-radius-base); + border: var(--border-base); + box-sizing: border-box; + line-height: normal; + height: var.$checkbox-bordered-height; + + &.is-checked { + border-color: var(--color-primary); + } + + &.is-disabled { + border-color: var(--border-color-light); + cursor: not-allowed; + } + + & + .el-checkbox.is-bordered { + margin-left: 10px; + } + + &.el-checkbox--medium { + padding: var.$checkbox-bordered-medium-padding; + border-radius: var.$button-medium-border-radius; + height: var.$checkbox-bordered-medium-height; + + .el-checkbox__label { + line-height: 17px; + font-size: var.$button-medium-font-size; + } + + .el-checkbox__inner { + height: var.$checkbox-bordered-medium-input-height; + width: var.$checkbox-bordered-medium-input-width; + } + } + + &.el-checkbox--small { + padding: var.$checkbox-bordered-small-padding; + border-radius: var.$button-small-border-radius; + height: var.$checkbox-bordered-small-height; + + .el-checkbox__label { + line-height: 15px; + font-size: var.$button-small-font-size; + } + + .el-checkbox__inner { + height: var.$checkbox-bordered-small-input-height; + width: var.$checkbox-bordered-small-input-width; + + &::after { + height: 6px; + width: 2px; + } + } + } + + &.el-checkbox--mini { + padding: var.$checkbox-bordered-mini-padding; + border-radius: var.$button-mini-border-radius; + height: var.$checkbox-bordered-mini-height; + + .el-checkbox__label { + line-height: 12px; + font-size: var.$button-mini-font-size; + } + + .el-checkbox__inner { + height: var.$checkbox-bordered-mini-input-height; + width: var.$checkbox-bordered-mini-input-width; + &::after { + height: 6px; + width: 2px; + } + } + } + } + + @include mixins.e(input) { + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + line-height: 1; + position: relative; + vertical-align: middle; + + @include mixins.when(disabled) { + .el-checkbox__inner { + background-color: var.$checkbox-disabled-input-fill; + border-color: var.$checkbox-disabled-border-color; + cursor: not-allowed; + + &::after { + cursor: not-allowed; + border-color: var.$checkbox-disabled-icon-color; + } + + & + .el-checkbox__label { + cursor: not-allowed; + } + } + + &.is-checked { + .el-checkbox__inner { + background-color: var.$checkbox-disabled-checked-input-fill; + border-color: var.$checkbox-disabled-checked-input-border-color; + + &::after { + border-color: var.$checkbox-disabled-checked-icon-color; + } + } + } + + &.is-indeterminate { + .el-checkbox__inner { + background-color: var.$checkbox-disabled-checked-input-fill; + border-color: var.$checkbox-disabled-checked-input-border-color; + + &::before { + background-color: var.$checkbox-disabled-checked-icon-color; + border-color: var.$checkbox-disabled-checked-icon-color; + } + } + } + + & + span.el-checkbox__label { + color: var.$disabled-color-base; + cursor: not-allowed; + } + } + + @include mixins.when(checked) { + .el-checkbox__inner { + background-color: var.$checkbox-checked-background-color; + border-color: var.$checkbox-checked-input-border-color; + + &::after { + transform: rotate(45deg) scaleY(1); + } + } + + & + .el-checkbox__label { + color: var.$checkbox-checked-font-color; + } + } + @include mixins.when(focus) { + /*focus时 视觉上区分*/ + .el-checkbox__inner { + border-color: var.$checkbox-input-border-color-hover; + } + } + @include mixins.when(indeterminate) { + .el-checkbox__inner { + background-color: var.$checkbox-checked-background-color; + border-color: var.$checkbox-checked-input-border-color; + + &::before { + content: ''; + position: absolute; + display: block; + background-color: var.$checkbox-checked-icon-color; + height: 2px; + transform: scale(0.5); + left: 0; + right: 0; + top: 5px; + } + + &::after { + display: none; + } + } + } + } + @include mixins.e(inner) { + display: inline-block; + position: relative; + border: var.$checkbox-input-border; + border-radius: var.$checkbox-border-radius; + box-sizing: border-box; + width: var.$checkbox-input-width; + height: var.$checkbox-input-height; + background-color: var.$checkbox-background-color; + z-index: var.$index-normal; + transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), + background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46); + + &:hover { + border-color: var.$checkbox-input-border-color-hover; + } + + &::after { + box-sizing: content-box; + content: ''; + border: 1px solid var.$checkbox-checked-icon-color; + border-left: 0; + border-top: 0; + height: 7px; + left: 4px; + position: absolute; + top: 1px; + transform: rotate(45deg) scaleY(0); + width: 3px; + transition: transform 0.15s ease-in 0.05s; + transform-origin: center; + } + } + + @include mixins.e(original) { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + width: 0; + height: 0; + z-index: -1; + } + + @include mixins.e(label) { + display: inline-block; + padding-left: 10px; + line-height: 19px; + font-size: var.$checkbox-font-size; + } + + &:last-of-type { + margin-right: 0; + } +} + +@include mixins.b(checkbox-button) { + position: relative; + display: inline-block; + + @include mixins.e(inner) { + display: inline-block; + line-height: 1; + font-weight: var.$checkbox-font-weight; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + background: var.$button-default-background-color; + border: var(--border-base); + border-left: 0; + color: var.$button-default-font-color; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: none; + margin: 0; + position: relative; + transition: var.$all-transition; + border-radius: 0; + @include utils.utils-user-select(none); + + @include button.button-size( + var.$button-padding-vertical, + var.$button-padding-horizontal, + var.$button-font-size + ); + + &:hover { + color: var(--color-primary); + } + + & [class*='el-icon-'] { + line-height: 0.9; + + & + span { + margin-left: 5px; + } + } + } + + @include mixins.e(original) { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + z-index: -1; + } + + &.is-checked { + & .el-checkbox-button__inner { + color: var.$checkbox-button-checked-font-color; + background-color: var.$checkbox-button-checked-background-color; + border-color: var.$checkbox-button-checked-border-color; + box-shadow: -1px 0 0 0 var.$color-primary-light-4; + } + &:first-child .el-checkbox-button__inner { + border-left-color: var.$checkbox-button-checked-border-color; + } + } + + &.is-disabled { + & .el-checkbox-button__inner { + color: var.$button-disabled-font-color; + cursor: not-allowed; + background-image: none; + background-color: var.$button-disabled-background-color; + border-color: var.$button-disabled-border-color; + box-shadow: none; + } + &:first-child .el-checkbox-button__inner { + border-left-color: var.$button-disabled-border-color; + } + } + + &:first-child { + .el-checkbox-button__inner { + border-left: var(--border-base); + border-radius: var(--border-radius-base) 0 0 var(--border-radius-base); + box-shadow: none !important; + } + } + + &.is-focus { + & .el-checkbox-button__inner { + border-color: var.$checkbox-button-checked-border-color; + } + } + + &:last-child { + .el-checkbox-button__inner { + border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; + } + } + @include mixins.m(medium) { + .el-checkbox-button__inner { + border-radius: 0; + @include button.button-size( + var.$button-medium-padding-vertical, + var.$button-medium-padding-horizontal, + var.$button-medium-font-size + ); + } + } + @include mixins.m(small) { + .el-checkbox-button__inner { + border-radius: 0; + @include button.button-size( + var.$button-small-padding-vertical, + var.$button-small-padding-horizontal, + var.$button-small-font-size + ); + } + } + @include mixins.m(mini) { + .el-checkbox-button__inner { + border-radius: 0; + @include button.button-size( + var.$button-mini-padding-vertical, + var.$button-mini-padding-horizontal, + var.$button-mini-font-size + ); + } + } +} + +@include mixins.b(checkbox-group) { + font-size: 0; +} diff --git a/packages/design-system/theme/src/col.scss b/packages/design-system/theme/src/col.scss new file mode 100644 index 0000000000..85610c14c5 --- /dev/null +++ b/packages/design-system/theme/src/col.scss @@ -0,0 +1,158 @@ +@use "sass:math"; + +@use "./common/var.scss"; +@use "./mixins/mixins.scss"; + +[class*='el-col-'] { + float: left; + box-sizing: border-box; +} + +.el-col-0 { + display: none; +} + +@for $i from 0 through 24 { + .el-col-#{$i} { + width: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-offset-#{$i} { + margin-left: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-pull-#{$i} { + position: relative; + right: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-push-#{$i} { + position: relative; + left: (math.div(1, 24) * $i * 100) * 1%; + } +} + +@include mixins.res(xs) { + .el-col-xs-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-xs-#{$i} { + width: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-xs-offset-#{$i} { + margin-left: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-xs-pull-#{$i} { + position: relative; + right: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-xs-push-#{$i} { + position: relative; + left: (math.div(1, 24) * $i * 100) * 1%; + } + } +} + +@include mixins.res(sm) { + .el-col-sm-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-sm-#{$i} { + width: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-sm-offset-#{$i} { + margin-left: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-sm-pull-#{$i} { + position: relative; + right: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-sm-push-#{$i} { + position: relative; + left: (math.div(1, 24) * $i * 100) * 1%; + } + } +} + +@include mixins.res(md) { + .el-col-md-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-md-#{$i} { + width: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-md-offset-#{$i} { + margin-left: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-md-pull-#{$i} { + position: relative; + right: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-md-push-#{$i} { + position: relative; + left: (math.div(1, 24) * $i * 100) * 1%; + } + } +} + +@include mixins.res(lg) { + .el-col-lg-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-lg-#{$i} { + width: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-lg-offset-#{$i} { + margin-left: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-lg-pull-#{$i} { + position: relative; + right: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-lg-push-#{$i} { + position: relative; + left: (math.div(1, 24) * $i * 100) * 1%; + } + } +} + +@include mixins.res(xl) { + .el-col-xl-0 { + display: none; + } + @for $i from 0 through 24 { + .el-col-xl-#{$i} { + width: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-xl-offset-#{$i} { + margin-left: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-xl-pull-#{$i} { + position: relative; + right: (math.div(1, 24) * $i * 100) * 1%; + } + + .el-col-xl-push-#{$i} { + position: relative; + left: (math.div(1, 24) * $i * 100) * 1%; + } + } +} diff --git a/packages/design-system/theme/src/collapse-item.scss b/packages/design-system/theme/src/collapse-item.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/collapse.scss b/packages/design-system/theme/src/collapse.scss new file mode 100644 index 0000000000..eded66efd0 --- /dev/null +++ b/packages/design-system/theme/src/collapse.scss @@ -0,0 +1,63 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "common/transition"; + +@include mixins.b(collapse) { + border-top: 1px solid var.$collapse-border-color; + border-bottom: 1px solid var.$collapse-border-color; +} +@include mixins.b(collapse-item) { + @include mixins.when(disabled) { + .el-collapse-item__header { + color: var.$font-color-disabled-base; + cursor: not-allowed; + } + } + @include mixins.e(header) { + display: flex; + align-items: center; + height: var.$collapse-header-height; + line-height: var.$collapse-header-height; + background-color: var.$collapse-header-background-color; + color: var.$collapse-header-font-color; + cursor: pointer; + border-bottom: 1px solid var.$collapse-border-color; + font-size: var.$collapse-header-font-size; + font-weight: 500; + transition: border-bottom-color 0.3s; + outline: none; + @include mixins.e(arrow) { + margin: 0 8px 0 auto; + transition: transform 0.3s; + font-weight: 300; + @include mixins.when(active) { + transform: rotate(90deg); + } + } + &.focusing:focus:not(:hover) { + color: var(--color-primary); + } + @include mixins.when(active) { + border-bottom-color: transparent; + } + } + + @include mixins.e(wrap) { + will-change: height; + background-color: var.$collapse-content-background-color; + overflow: hidden; + box-sizing: border-box; + border-bottom: 1px solid var.$collapse-border-color; + } + + @include mixins.e(content) { + padding-bottom: 25px; + font-size: var.$collapse-content-font-size; + color: var.$collapse-content-font-color; + line-height: 1.769230769230769; + } + + &:last-child { + margin-bottom: -1px; + } +} diff --git a/packages/design-system/theme/src/color-picker.scss b/packages/design-system/theme/src/color-picker.scss new file mode 100644 index 0000000000..3c4b114f95 --- /dev/null +++ b/packages/design-system/theme/src/color-picker.scss @@ -0,0 +1,382 @@ +@use "mixins/mixins"; +@use "mixins/button"; +@use "./common/var"; + +@include mixins.b(color-predefine) { + display: flex; + font-size: 12px; + margin-top: 8px; + width: 280px; + + @include mixins.e(colors) { + display: flex; + flex: 1; + flex-wrap: wrap; + } + + @include mixins.e(color-selector) { + margin: 0 0 8px 8px; + width: 20px; + height: 20px; + border-radius: 4px; + cursor: pointer; + + &:nth-child(10n + 1) { + margin-left: 0; + } + + &.selected { + box-shadow: 0 0 3px 2px var(--color-primary); + } + + > div { + display: flex; + height: 100%; + border-radius: 3px; + } + + @include mixins.when(alpha) { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); + } + } +} + +@include mixins.b(color-hue-slider) { + position: relative; + box-sizing: border-box; + width: 280px; + height: 12px; + background-color: #f00; + padding: 0 2px; + + @include mixins.e(bar) { + position: relative; + background: linear-gradient( + to right, + #f00 0%, + #ff0 17%, + #0f0 33%, + #0ff 50%, + #00f 67%, + #f0f 83%, + #f00 100% + ); + height: 100%; + } + + @include mixins.e(thumb) { + position: absolute; + cursor: pointer; + box-sizing: border-box; + left: 0; + top: 0; + width: 4px; + height: 100%; + border-radius: 1px; + background: #fff; + border: 1px solid #f0f0f0; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); + z-index: 1; + } + + @include mixins.when(vertical) { + width: 12px; + height: 180px; + padding: 2px 0; + + .el-color-hue-slider__bar { + background: linear-gradient( + to bottom, + #f00 0%, + #ff0 17%, + #0f0 33%, + #0ff 50%, + #00f 67%, + #f0f 83%, + #f00 100% + ); + } + + .el-color-hue-slider__thumb { + left: 0; + top: 0; + width: 100%; + height: 4px; + } + } +} + +@include mixins.b(color-svpanel) { + position: relative; + width: 280px; + height: 180px; + + @include mixins.e(('white', 'black')) { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + @include mixins.e('white') { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + } + + @include mixins.e('black') { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); + } + + @include mixins.e(cursor) { + position: absolute; + + > div { + cursor: head; + width: 4px; + height: 4px; + box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), + 0 0 1px 2px rgba(0, 0, 0, 0.4); + border-radius: 50%; + transform: translate(-2px, -2px); + } + } +} + +@include mixins.b(color-alpha-slider) { + position: relative; + box-sizing: border-box; + width: 280px; + height: 12px; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); + + @include mixins.e(bar) { + position: relative; + background: linear-gradient( + to right, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 100% + ); + height: 100%; + } + + @include mixins.e(thumb) { + position: absolute; + cursor: pointer; + box-sizing: border-box; + left: 0; + top: 0; + width: 4px; + height: 100%; + border-radius: 1px; + background: #fff; + border: 1px solid #f0f0f0; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); + z-index: 1; + } + + @include mixins.when(vertical) { + width: 20px; + height: 180px; + + .el-color-alpha-slider__bar { + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 100% + ); + } + + .el-color-alpha-slider__thumb { + left: 0; + top: 0; + width: 100%; + height: 4px; + } + } +} + +@include mixins.b(color-dropdown) { + width: 300px; + + @include mixins.e(main-wrapper) { + margin-bottom: 6px; + + &::after { + content: ''; + display: table; + clear: both; + } + } + + @include mixins.e(btns) { + margin-top: 6px; + text-align: right; + } + + @include mixins.e(value) { + float: left; + line-height: 26px; + font-size: 12px; + color: var.$color-black; + width: 160px; + } + + @include mixins.e(btn) { + @include button.button-round(); + @include button.button-small(); + @include button.button-just-primary(); + } + + @include mixins.e(link-btn) { + @include button.button-round(); + @include button.button-outline(); + @include button.button-small(); + + margin-right: var(--spacing-2xs); + } +} + +@include mixins.b(color-picker) { + display: inline-block; + position: relative; + line-height: normal; + height: 40px; + + @include mixins.when(disabled) { + .el-color-picker__trigger { + cursor: not-allowed; + } + } + + @include mixins.m(medium) { + height: 36px; + + .el-color-picker__trigger { + height: 36px; + width: 36px; + } + + .el-color-picker__mask { + height: 34px; + width: 34px; + } + } + + @include mixins.m(small) { + height: 32px; + + .el-color-picker__trigger { + height: 32px; + width: 32px; + } + + .el-color-picker__mask { + height: 30px; + width: 30px; + } + + .el-color-picker__icon, + .el-color-picker__empty { + transform: translate3d(-50%, -50%, 0) scale(0.8); + } + } + + @include mixins.m(mini) { + height: 28px; + + .el-color-picker__trigger { + height: 28px; + width: 28px; + } + + .el-color-picker__mask { + height: 26px; + width: 26px; + } + + .el-color-picker__icon, + .el-color-picker__empty { + transform: translate3d(-50%, -50%, 0) scale(0.8); + } + } + + @include mixins.e(mask) { + height: 38px; + width: 38px; + border-radius: 4px; + position: absolute; + top: 1px; + left: 1px; + z-index: 1; + cursor: not-allowed; + background-color: rgba(255, 255, 255, 0.7); + } + + @include mixins.e(trigger) { + display: inline-block; + box-sizing: border-box; + height: 40px; + width: 40px; + padding: 4px; + border: 1px solid #e6e6e6; + border-radius: 4px; + font-size: 0; + position: relative; + cursor: pointer; + } + + @include mixins.e(color) { + position: relative; + display: block; + box-sizing: border-box; + border: 1px solid #999; + border-radius: var(--border-radius-small); + width: 100%; + height: 100%; + text-align: center; + + @include mixins.when(alpha) { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); + } + } + + @include mixins.e(color-inner) { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + @include mixins.e(empty) { + font-size: 12px; + color: #999; + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + } + + @include mixins.e(icon) { + display: inline-block; + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + color: var.$color-white; + text-align: center; + font-size: 12px; + } + + @include mixins.e(panel) { + position: absolute; + z-index: 10; + padding: 6px; + box-sizing: content-box; + background-color: var.$color-white; + border: 1px solid var(--border-color-light); + border-radius: var(--border-radius-base); + box-shadow: var.$dropdown-menu-box-shadow; + } +} diff --git a/packages/design-system/theme/src/common/popup.scss b/packages/design-system/theme/src/common/popup.scss new file mode 100644 index 0000000000..a26c3eea96 --- /dev/null +++ b/packages/design-system/theme/src/common/popup.scss @@ -0,0 +1,42 @@ +@use "./var.scss"; +@use "../mixins/mixins"; + +.v-modal-enter { + animation: v-modal-in 0.2s ease; +} + +.v-modal-leave { + animation: v-modal-out 0.2s ease forwards; +} + +@keyframes v-modal-in { + 0% { + opacity: 0; + } + 100% { + } +} + +@keyframes v-modal-out { + 0% { + } + 100% { + opacity: 0; + } +} + +.v-modal { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: var.$popup-modal-opacity; + background: var.$popup-modal-background-color; +} + +@include mixins.b(popup-parent) { + @include mixins.m(hidden) { + overflow: hidden; + } +} diff --git a/packages/design-system/theme/src/common/transition.scss b/packages/design-system/theme/src/common/transition.scss new file mode 100644 index 0000000000..576f8f8339 --- /dev/null +++ b/packages/design-system/theme/src/common/transition.scss @@ -0,0 +1,102 @@ +@use "./var"; + +.fade-in-linear-enter-active, +.fade-in-linear-leave-active { + transition: var.$fade-linear-transition; +} +.fade-in-linear-enter, +.fade-in-linear-leave, +.fade-in-linear-leave-active { + opacity: 0; +} + +.el-fade-in-linear-enter-active, +.el-fade-in-linear-leave-active { + transition: var.$fade-linear-transition; +} +.el-fade-in-linear-enter, +.el-fade-in-linear-leave, +.el-fade-in-linear-leave-active { + opacity: 0; +} + +.el-fade-in-enter-active, +.el-fade-in-leave-active { + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); +} +.el-fade-in-enter, +.el-fade-in-leave-active { + opacity: 0; +} + +.el-zoom-in-center-enter-active, +.el-zoom-in-center-leave-active { + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); +} +.el-zoom-in-center-enter, +.el-zoom-in-center-leave-active { + opacity: 0; + transform: scaleX(0); +} + +.el-zoom-in-top-enter-active, +.el-zoom-in-top-leave-active { + opacity: 1; + transform: scaleY(1); + transition: var.$md-fade-transition; + transform-origin: center top; +} +.el-zoom-in-top-enter, +.el-zoom-in-top-leave-active { + opacity: 0; + transform: scaleY(0); +} + +.el-zoom-in-bottom-enter-active, +.el-zoom-in-bottom-leave-active { + opacity: 1; + transform: scaleY(1); + transition: var.$md-fade-transition; + transform-origin: center bottom; +} +.el-zoom-in-bottom-enter, +.el-zoom-in-bottom-leave-active { + opacity: 0; + transform: scaleY(0); +} + +.el-zoom-in-left-enter-active, +.el-zoom-in-left-leave-active { + opacity: 1; + transform: scale(1, 1); + transition: var.$md-fade-transition; + transform-origin: top left; +} +.el-zoom-in-left-enter, +.el-zoom-in-left-leave-active { + opacity: 0; + transform: scale(0.45, 0.45); +} + +.collapse-transition { + transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, + 0.3s padding-bottom ease-in-out; +} +.horizontal-collapse-transition { + transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, + 0.3s padding-right ease-in-out; +} + +.el-list-enter-active, +.el-list-leave-active { + transition: all 1s; +} +.el-list-enter, +.el-list-leave-active { + opacity: 0; + transform: translateY(-30px); +} + +.el-opacity-transition { + transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); +} diff --git a/packages/design-system/theme/src/common/typography.scss b/packages/design-system/theme/src/common/typography.scss new file mode 100644 index 0000000000..db5365d67c --- /dev/null +++ b/packages/design-system/theme/src/common/typography.scss @@ -0,0 +1,66 @@ +%bold { + font-weight: var(--font-weight-bold); +} + +.heading1 { + font-size: var(--font-size-2xl); + line-height: var(--font-line-height-compact); +} + +.heading1-bold { + @extend %bold, .heading1; +} + +.heading2 { + font-size: var(--font-size-xl); + line-height: var(--font-line-height-loose); +} + +.heading2-bold { + @extend %bold, .heading2; +} + +.heading3 { + font-size: var(--font-size-m); + line-height: var(--font-line-height-loose); +} + +.heading3-bold { + @extend %bold, .heading3; +} + +.heading4 { + font-size: var(--font-size-s); + line-height: var(--font-line-height-regular); +} + +.heading4-bold { + @extend %bold, .heading4; +} + +.body-large { + font-size: var(--font-size-m); + line-height: var(--font-line-height-xloose); +} + +.body-large-bold { + @extend %bold, .body-large; +} + +.body-medium { + font-size: var(--font-size-s); + line-height: var(--font-line-height-loose); +} + +.body-medium-bold { + @extend %bold, .body-medium; +} + +.body-small { + font-size: var(--font-size-2xs); + line-height: var(--font-line-height-loose); +} + +.body-small-bold { + @extend %bold, .body-small; +} diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss new file mode 100644 index 0000000000..fc009d8af6 --- /dev/null +++ b/packages/design-system/theme/src/common/var.scss @@ -0,0 +1,1191 @@ +@use "sass:math"; +@use "../mixins/function.scss"; + +// Special comment for theme configurator +// type|skipAutoTranslation|Category|Order +// skipAutoTranslation 1 + +/* Transition +-------------------------- */ +$all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); +$fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); +$fade-linear-transition: opacity 200ms linear; +$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), + opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); +$border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); +$color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + +/* Color +-------------------------- */ +$color-white: #ffffff; +$color-black: #000000; + +$color-primary-light-1: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 4% +); +$color-primary-light-2: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 8% +); +$color-primary-light-3: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 12% +); +$color-primary-light-4: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 16% +); +$color-primary-light-5: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 20% +); +$color-primary-light-6: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 24% +); +$color-primary-light-7: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 28% +); +$color-primary-light-8: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 32% +); +$color-primary-light-9: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 36% +); +$color-primary-light: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 30% +); +$color-primary-lighter: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 34% +); + +$color-primary-shade-1: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + -(10) +); + +$color-success-light-1: function.lightness( + --color-success-h, + --color-success-s, + --color-success-l, + 4% +); +$color-success-light-3: function.lightness( + --color-success-h, + --color-success-s, + --color-success-l, + 12% +); +$color-success-light-5: function.lightness( + --color-success-h, + --color-success-s, + --color-success-l, + 20% +); +$color-success-light: function.lightness( + --color-success-h, + --color-success-s, + --color-success-l, + 41% +); +$color-success-lighter: function.lightness( + --color-success-h, + --color-success-s, + --color-success-l, + 48% +); + +$color-warning-light-1: function.lightness( + --color-warning-h, + --color-warning-s, + --color-warning-l, + 4% +); +$color-warning-light-3: function.lightness( + --color-warning-h, + --color-warning-s, + --color-warning-l, + 12% +); +$color-warning-light-5: function.lightness( + --color-warning-h, + --color-warning-s, + --color-warning-l, + 20% +); +$color-warning-light: function.lightness( + --color-warning-h, + --color-warning-s, + --color-warning-l, + 34% +); +$color-warning-lighter: function.lightness( + --color-warning-h, + --color-warning-s, + --color-warning-l, + 40% +); + +$color-danger-light-1: function.lightness( + --color-danger-h, + --color-danger-s, + --color-danger-l, + 4% +); +$color-danger-light-3: function.lightness( + --color-danger-h, + --color-danger-s, + --color-danger-l, + 12% +); +$color-danger-light-5: function.lightness( + --color-danger-h, + --color-danger-s, + --color-danger-l, + 20% +); +$color-danger-light: function.lightness( + --color-danger-h, + --color-danger-s, + --color-danger-l, + 24% +); +$color-danger-lighter: var(--color-danger-tint-2); + +$color-info-light-1: function.lightness( + --color-info-h, + --color-info-s, + --color-info-l, + 4% +); +$color-info-light-3: function.lightness( + --color-info-h, + --color-info-s, + --color-info-l, + 12% +); +$color-info-light-5: function.lightness( + --color-info-h, + --color-info-s, + --color-info-l, + 20% +); +$color-info-lighter: function.lightness( + --color-info-h, + --color-info-s, + --color-info-l, + 39% +); + +// Background +/// color|1|Background Color|4 +$background-color-base: var(--color-background-base); + +/* Link +-------------------------- */ +$link-color: $color-primary-light-2; +$link-hover-color: var(--color-primary); + +/* Border +-------------------------- */ +$border-color-hover: var(--color-text-lighter); +/// borderRadius|1|Radius|0 +$border-radius-circle: 100%; + +// Box-shadow +/// boxShadow|1|Shadow|1 +$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); +// boxShadow|1|Shadow|1 +$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12); +/// boxShadow|1|Shadow|1 +$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + +/* Fill +-------------------------- */ +$fill-base: $color-white; + +/* Typography +-------------------------- */ +$font-path: 'fonts' !default; +$font-display: 'auto'; +/// fontSize|1|Font Size|0 +$font-size-extra-large: var(--font-size-xl); +/// fontSize|1|Font Size|0 +$font-size-large: var(--font-size-l); +/// fontSize|1|Font Size|0 +$font-size-medium: var(--font-size-m); +/// fontSize|1|Font Size|0 +$font-size-base: var(--font-size-s); +/// fontSize|1|Font Size|0 +$font-size-small: var(--font-size-xs); +/// fontSize|1|Font Size|0 +$font-size-extra-small: var(--font-size-2xs); +/// fontWeight|1|Font Weight|1 +$font-weight-primary: var(--font-weight-semi-bold); +/// fontLineHeight|1|Line Height|2 +$font-line-height-primary: 24px; +$font-color-disabled-base: #bbb; + +/* z-index +-------------------------- */ +$index-normal: 1; +$index-top: 1000; +$index-popper: 2000; + +/* Disable base +-------------------------- */ +$disabled-fill-base: var(--disabled-fill, var(--color-background-light)); +$disabled-color-base: var(--disabled-color, var(--color-text-base)); +$disabled-border-base: var(--disabled-border, var(--border-color-base)); + +/* Icon +-------------------------- */ +$icon-color: #666; +$icon-color-base: var(--color-info); + +/* Checkbox +-------------------------- */ +/// fontSize||Font|1 +$checkbox-font-size: 14px; +/// fontWeight||Font|1 +$checkbox-font-weight: $font-weight-primary; +/// color||Color|0 +$checkbox-font-color: var(--color-text-dark); +$checkbox-input-height: 14px; +$checkbox-input-width: 14px; +/// borderRadius||Border|2 +$checkbox-border-radius: var(--border-radius-small); +/// color||Color|0 +$checkbox-background-color: $color-white; +$checkbox-input-border: var(--border-base); + +/// color||Color|0 +$checkbox-disabled-border-color: var(--border-color-base); +$checkbox-disabled-input-fill: #edf2fc; +$checkbox-disabled-icon-color: var(--color-text-lighter); + +$checkbox-disabled-checked-input-fill: var(--border-color-light); +$checkbox-disabled-checked-input-border-color: var(--border-color-base); +$checkbox-disabled-checked-icon-color: var(--color-text-lighter); + +/// color||Color|0 +$checkbox-checked-font-color: var(--color-primary); +$checkbox-checked-input-border-color: var(--color-primary); +/// color||Color|0 +$checkbox-checked-background-color: var(--color-primary); +$checkbox-checked-icon-color: $fill-base; + +$checkbox-input-border-color-hover: var(--color-primary); +/// height||Other|4 +$checkbox-bordered-height: 40px; +/// padding||Spacing|3 +$checkbox-bordered-padding: 9px 20px 9px 10px; +/// padding||Spacing|3 +$checkbox-bordered-medium-padding: 7px 20px 7px 10px; +/// padding||Spacing|3 +$checkbox-bordered-small-padding: 5px 15px 5px 10px; +/// padding||Spacing|3 +$checkbox-bordered-mini-padding: 3px 15px 3px 10px; +$checkbox-bordered-medium-input-height: 14px; +$checkbox-bordered-medium-input-width: 14px; +/// height||Other|4 +$checkbox-bordered-medium-height: 36px; +$checkbox-bordered-small-input-height: 12px; +$checkbox-bordered-small-input-width: 12px; +/// height||Other|4 +$checkbox-bordered-small-height: 32px; +$checkbox-bordered-mini-input-height: 12px; +$checkbox-bordered-mini-input-width: 12px; +/// height||Other|4 +$checkbox-bordered-mini-height: 28px; + +/// color||Color|0 +$checkbox-button-checked-background-color: var(--color-primary); +/// color||Color|0 +$checkbox-button-checked-font-color: $color-white; +/// color||Color|0 +$checkbox-button-checked-border-color: var(--color-primary); + +/* Radio +-------------------------- */ +/// fontSize||Font|1 +$radio-font-size: $font-size-base; +/// fontWeight||Font|1 +$radio-font-weight: $font-weight-primary; +/// color||Color|0 +$radio-font-color: var(--color-text-dark); +$radio-input-height: 14px; +$radio-input-width: 14px; +/// borderRadius||Border|2 +$radio-input-border-radius: $border-radius-circle; +/// color||Color|0 +$radio-input-background-color: $color-white; +$radio-input-border: var(--border-base); +/// color||Color|0 +$radio-input-border-color: var(--border-color-base); +/// color||Color|0 +$radio-icon-color: $color-white; + +$radio-disabled-input-border-color: $disabled-border-base; +$radio-disabled-input-fill: $disabled-fill-base; +$radio-disabled-icon-color: $disabled-fill-base; + +$radio-disabled-checked-input-border-color: $disabled-border-base; +$radio-disabled-checked-input-fill: $disabled-fill-base; +$radio-disabled-checked-icon-color: var(--color-text-lighter); + +/// color||Color|0 +$radio-checked-font-color: var(--color-primary); +/// color||Color|0 +$radio-checked-input-border-color: var(--color-primary); +/// color||Color|0 +$radio-checked-input-background-color: $color-white; +/// color||Color|0 +$radio-checked-icon-color: var(--color-primary); + +$radio-input-border-color-hover: var(--color-primary); + +$radio-bordered-height: 40px; +$radio-bordered-padding: 12px 20px 0 10px; +$radio-bordered-medium-padding: 10px 20px 0 10px; +$radio-bordered-small-padding: 8px 15px 0 10px; +$radio-bordered-mini-padding: 6px 15px 0 10px; +$radio-bordered-medium-input-height: 14px; +$radio-bordered-medium-input-width: 14px; +$radio-bordered-medium-height: 36px; +$radio-bordered-small-input-height: 12px; +$radio-bordered-small-input-width: 12px; +$radio-bordered-small-height: 32px; +$radio-bordered-mini-input-height: 12px; +$radio-bordered-mini-input-width: 12px; +$radio-bordered-mini-height: 28px; + +/// fontSize||Font|1 +$radio-button-font-size: $font-size-base; +/// color||Color|0 +$radio-button-checked-background-color: var(--color-primary); +/// color||Color|0 +$radio-button-checked-font-color: $color-white; +/// color||Color|0 +$radio-button-checked-border-color: var(--color-primary); +$radio-button-disabled-checked-fill: var(--border-color-light); + +/* Select +-------------------------- */ +$select-border-color-hover: $border-color-hover; +$select-disabled-border: $disabled-border-base; +/// fontSize||Font|1 +$select-font-size: $font-size-base; +$select-close-hover-color: var(--color-text-light); + +$select-input-color: var(--color-text-lighter); +$select-multiple-input-color: #666; +/// color||Color|0 +$select-input-focus-border-color: var(--color-secondary); +/// fontSize||Font|1 +$select-input-font-size: 14px; + +$select-option-color: var(--color-text-dark); +$select-option-disabled-color: var(--color-text-lighter); +$select-option-disabled-background: $color-white; +/// height||Other|4 +$select-option-height: 34px; +$select-option-hover-background: $background-color-base; +/// color||Color|0 +$select-option-selected-font-color: var(--color-primary); +$select-option-selected-hover: $background-color-base; + +$select-group-color: var(--color-info); +$select-group-height: 30px; +$select-group-font-size: 12px; + +$select-dropdown-background: $color-white; +$select-dropdown-shadow: $box-shadow-light; +$select-dropdown-empty-color: #999; +/// height||Other|4 +$select-dropdown-max-height: 274px; +$select-dropdown-padding: 6px 0; +$select-dropdown-empty-padding: 10px 0; +$select-dropdown-border: solid 1px var(--border-color-base); + +/* Alert +-------------------------- */ +$alert-padding: 8px 16px; +/// borderRadius||Border|2 +$alert-border-radius: var(--border-radius-base); +/// fontSize||Font|1 +$alert-title-font-size: 13px; +/// fontSize||Font|1 +$alert-description-font-size: 12px; +/// fontSize||Font|1 +$alert-close-font-size: 12px; +/// fontSize||Font|1 +$alert-close-customed-font-size: 13px; + +$alert-success-color: $color-success-lighter; +$alert-info-color: $color-info-lighter; +$alert-warning-color: $color-warning-lighter; +$alert-danger-color: $color-danger-lighter; + +/// height||Other|4 +$alert-icon-size: 16px; +/// height||Other|4 +$alert-icon-large-size: 28px; + +/* MessageBox +-------------------------- */ +/// color||Color|0 +$messagebox-title-color: var(--color-text-dark); +$msgbox-width: 420px; +$msgbox-border-radius: 4px; +/// fontSize||Font|1 +$messagebox-font-size: $font-size-large; +/// fontSize||Font|1 +$messagebox-content-font-size: $font-size-base; +/// color||Color|0 +$messagebox-content-color: var(--color-text-dark); +/// fontSize||Font|1 +$messagebox-error-font-size: 12px; +$msgbox-padding-primary: 15px; +/// color||Color|0 +$messagebox-success-color: var(--color-success); +/// color||Color|0 +$messagebox-info-color: var(--color-info); +/// color||Color|0 +$messagebox-warning-color: var(--color-warning); +/// color||Color|0 +$messagebox-danger-color: var(--color-danger); + +/* Message +-------------------------- */ +$message-shadow: $box-shadow-base; +$message-min-width: 380px; +$message-background-color: #edf2fc; +$message-padding: 15px 15px 15px 20px; +/// color||Color|0 +$message-close-icon-color: var(--color-text-lighter); +/// height||Other|4 +$message-close-size: 16px; +/// color||Color|0 +$message-close-hover-color: var(--color-text-light); + +/// color||Color|0 +$message-success-font-color: var(--color-success); +/// color||Color|0 +$message-info-font-color: var(--color-info); +/// color||Color|0 +$message-warning-font-color: var(--color-warning); +/// color||Color|0 +$message-danger-font-color: var(--color-danger); + +/* Notification +-------------------------- */ +$notification-width: 330px; +/// padding||Spacing|3 +$notification-padding: 14px 26px 14px 13px; +$notification-radius: 8px; +$notification-shadow: $box-shadow-light; +/// color||Color|0 +$notification-border-color: var(--border-color-light); +$notification-icon-size: 24px; +$notification-close-font-size: $message-close-size; +$notification-group-margin-left: 13px; +$notification-group-margin-right: 8px; +/// fontSize||Font|1 +$notification-content-font-size: $font-size-base; +/// color||Color|0 +$notification-content-color: var(--color-text-dark); +/// fontSize||Font|1 +$notification-title-font-size: 16px; +/// color||Color|0 +$notification-title-color: var(--color-text-dark); + +/// color||Color|0 +$notification-close-color: var(--color-text-light); +/// color||Color|0 +$notification-close-hover-color: var(--color-text-dark); + +/// color||Color|0 +$notification-success-icon-color: var(--color-success); +/// color||Color|0 +$notification-info-icon-color: var(--color-info); +/// color||Color|0 +$notification-warning-icon-color: var(--color-warning); +/// color||Color|0 +$notification-danger-icon-color: var(--color-danger); + +/* Input +-------------------------- */ +$input-placeholder-color: var(--input-placeholder-color, var(--color-text-light)); +$input-focus-border: var(--input-focus-border-color, var(--color-secondary)); +$input-border-color: var(--input-border-color, var(--border-color-base)); +$input-border-style: var(--input-border-style, var(--border-style-base)); +$input-border-width: var(--border-width-base); +$input-border: $input-border-color $input-border-style $input-border-width; + +$input-font-size: var(--input-font-size, var(--font-size-s)); +/// color||Color|0 +$input-font-color: var(--input-font-color, var(--color-text-dark)); +/// height||Other|4 +$input-width: 140px; +/// height||Other|4 +$input-height: 40px; +/// borderRadius||Border|2 +$input-border-radius: var(--input-border-radius, var(--border-radius-base)); +$input-border-color-hover: $border-color-hover; +/// color||Color|0 +$input-background-color: var(--input-background-color, var(--color-foreground-xlight)); +$input-fill-disabled: $disabled-fill-base; +$input-color-disabled: $font-color-disabled-base; +/// color||Color|0 +$input-icon-color: var(--color-text-lighter); +/// color||Color|0 + +$input-hover-border: $border-color-hover; +$input-clear-color: var(--color-text-light); +$input-clear-hover-color: var(--color-text-base); + +$input-disabled-fill: $disabled-fill-base; +$input-disabled-border: $disabled-border-base; +$input-disabled-color: $disabled-color-base; +$input-disabled-placeholder-color: var(--color-text-lighter); + +/// fontSize||Font|1 +$input-medium-font-size: var(--input-font-size, 14px); +/// height||Other|4 +$input-medium-height: 36px; +/// fontSize||Font|1 +$input-small-font-size: 12px !default; +/// height||Other|4 +$input-small-height: 30px !default; +/// fontSize||Font|1 +$input-mini-font-size: 12px; +/// height||Other|4 +$input-mini-height: 26px !default; + +/* Cascader +-------------------------- */ +/// color||Color|0 +$cascader-menu-font-color: var(--color-text-dark); +/// color||Color|0 +$cascader-menu-selected-font-color: var(--color-primary); +$cascader-menu-fill: $fill-base; +$cascader-menu-font-size: $font-size-base; +$cascader-menu-radius: var(--border-radius-base); +$cascader-menu-border: solid 1px var(--border-color-base); +$cascader-menu-shadow: $box-shadow-light; +$cascader-node-background-hover: $background-color-base; +$cascader-node-color-disabled: var(--color-text-lighter); +$cascader-color-empty: var(--color-text-lighter); +$cascader-tag-background: #f0f2f5; + +/* Group +-------------------------- */ +$group-option-flex: 0 0 (math.div(1, 5)) * 100%; +$group-option-offset-bottom: 12px; +$group-option-fill-hover: rgba($color-black, 0.06); +$group-title-color: $color-black; +$group-title-font-size: $font-size-base; +$group-title-width: 66px; + +/* Tab +-------------------------- */ +$tab-font-size: $font-size-base; +$tab-border-line: 1px solid #e4e4e4; +$tab-header-color-active: var(--color-text-light); +$tab-header-color-hover: var(--color-text-dark); +$tab-header-color: var(--color-text-dark); +$tab-header-fill-active: rgba($color-black, 0.06); +$tab-header-fill-hover: rgba($color-black, 0.06); +$tab-vertical-header-width: 90px; +$tab-vertical-header-count-color: $color-white; +$tab-vertical-header-count-fill: var(--color-text-light); + +/* Button +-------------------------- */ +$button-font-size: var(--button-font-size, var(--font-size-s)); + +$button-padding-vertical: var(--button-padding-vertical, var(--spacing-xs)); +$button-padding-horizontal: var(--button-padding-horizontal, var(--spacing-m)); + +$button-border-radius: var(--button-border-radius, 4px); + +$button-border-color: var(--button-border-color, var(--color-primary)); + +/// fontSize||Font|1 +$button-medium-font-size: $font-size-base; +/// borderRadius||Border|2 +$button-medium-border-radius: var(--border-radius-base); +/// padding||Spacing|3 +$button-medium-padding-vertical: 10px; +/// padding||Spacing|3 +$button-medium-padding-horizontal: 20px; + +/// fontSize||Font|1 +$button-small-font-size: 12px; +$button-small-border-radius: #{var(--border-radius-base) - 1}; +/// padding||Spacing|3 +$button-small-padding-vertical: 9px; +/// padding||Spacing|3 +$button-small-padding-horizontal: 15px; +/// fontSize||Font|1 +$button-mini-font-size: 12px; +$button-mini-border-radius: #{var(--border-radius-base) - 1}; +/// padding||Spacing|3 +$button-mini-padding-vertical: 7px; +/// padding||Spacing|3 +$button-mini-padding-horizontal: 15px; + +$button-font-color: var(--button-color, var(--color-text-xlight)); +$button-background-color: var(--button-background-color, var(--color-primary)); +$button-active-color: var(--button-active-color, var(--color-text-xlight)); +$button-active-border-color: var( + --button-active-border-color, + var(--color-primary-shade-1) +); +$button-active-background-color: var( + --button-active-background-color, + var(--color-primary-shade-1) +); + +/// color||Color|0 +$button-default-font-color: var(--color-text-dark); +/// color||Color|0 +$button-default-background-color: $color-white; +/// color||Color|0 +$button-default-border-color: var(--border-color-base); + +/// color||Color|0 +$button-disabled-font-color: var(--color-text-light); +/// color||Color|0 +$button-disabled-background-color: var( + --button-disabled-background-color, + var(--color-foreground-base) +); +/// color||Color|0 +$button-disabled-border-color: var(--border-color-base); + +/// color||Color|0 +$button-primary-border-color: var(--color-primary); +/// color||Color|0 +$button-primary-font-color: $color-white; +/// color||Color|0 +$button-primary-background-color: var(--color-primary); +/// color||Color|0 +$button-success-border-color: var(--color-success); +/// color||Color|0 +$button-success-font-color: $color-white; +/// color||Color|0 +$button-success-background-color: var(--color-success); +/// color||Color|0 +$button-warning-border-color: var(--color-warning); +/// color||Color|0 +$button-warning-font-color: $color-white; +/// color||Color|0 +$button-warning-background-color: var(--color-warning); +/// color||Color|0 +$button-danger-border-color: var(--color-danger); +/// color||Color|0 +$button-danger-font-color: $color-white; +/// color||Color|0 +$button-danger-background-color: var(--color-danger); +/// color||Color|0 +$button-info-border-color: var(--color-info); +/// color||Color|0 +$button-info-font-color: $color-white; +/// color||Color|0 +$button-info-background-color: var(--color-info); + +$button-hover-tint-percent: 10%; +$button-light-tint-percent: 30%; +$button-active-shade-percent: 10%; + +/* cascader +-------------------------- */ +$cascader-height: 200px; + +/* Switch +-------------------------- */ +/// color||Color|0 +$switch-on-color: var(--color-primary); +/// color||Color|0 +$switch-off-color: var(--color-text-light); +/// fontSize||Font|1 +$switch-font-size: $font-size-base; +$switch-core-border-radius: 10px; +// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义 +$switch-width: 40px; +// height||Other|4 +$switch-height: 20px; +// height||Other|4 +$switch-button-size: 16px; + +/* Dialog +-------------------------- */ +$dialog-background-color: $color-white; +$dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +/// fontSize||Font|1 +$dialog-title-font-size: $font-size-large; +/// fontSize||Font|1 +$dialog-content-font-size: 14px; +/// fontLineHeight||LineHeight|2 +$dialog-font-line-height: $font-line-height-primary; +/// padding||Spacing|3 +$dialog-padding-primary: 20px; + +/* Table +-------------------------- */ +/// color||Color|0 +$table-border-color: var(--border-color-light); +$table-border: 1px solid $table-border-color; +/// color||Color|0 +$table-font-color: var(--color-text-dark); +/// color||Color|0 +$table-header-font-color: var(--color-text-light); +/// color||Color|0 +$table-row-hover-background-color: $background-color-base; +$table-current-row-background-color: $color-primary-light-9; +/// color||Color|0 +$table-header-background-color: $color-white; +$table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12); + +/* Pagination +-------------------------- */ +/// fontSize||Font|1 +$pagination-font-size: 13px; +/// color||Color|0 +$pagination-background-color: $color-white; +/// color||Color|0 +$pagination-font-color: var(--color-text-dark); +$pagination-border-radius: 3px; +/// color||Color|0 +$pagination-button-color: var(--color-text-dark); +/// height||Other|4 +$pagination-button-width: 35.5px; +/// height||Other|4 +$pagination-button-height: 28px; +/// color||Color|0 +$pagination-button-disabled-color: var(--color-text-lighter); +/// color||Color|0 +$pagination-button-disabled-background-color: $color-white; +/// color||Color|0 +$pagination-hover-color: var(--color-primary); + +/* Popup +-------------------------- */ +/// color||Color|0 +$popup-modal-background-color: $color-black; +/// opacity||Other|1 +$popup-modal-opacity: 0.5; + +/* Popover +-------------------------- */ +/// color||Color|0 +$popover-background-color: $color-white; +/// fontSize||Font|1 +$popover-font-size: $font-size-base; +/// color||Color|0 +$popover-border-color: var(--border-color-light); +$popover-arrow-size: 6px; +/// padding||Spacing|3 +$popover-padding: 12px; +$popover-padding-large: 18px 20px; +/// fontSize||Font|1 +$popover-title-font-size: 16px; +/// color||Color|0 +$popover-title-font-color: var(--color-text-dark); + +/* Tooltip +-------------------------- */ +/// color|1|Color|0 +$tooltip-fill: var(--color-text-dark); +/// color|1|Color|0 +$tooltip-color: $color-white; +/// fontSize||Font|1 +$tooltip-font-size: 12px; +/// color||Color|0 +$tooltip-border-color: var(--color-text-dark); +$tooltip-arrow-size: 6px; +/// padding||Spacing|3 +$tooltip-padding: 10px; + +/* Tag +-------------------------- */ +/// color||Color|0 +$tag-info-color: var(--color-info); +/// color||Color|0 +$tag-primary-color: var(--color-primary); +/// color||Color|0 +$tag-success-color: var(--color-success); +/// color||Color|0 +$tag-warning-color: var(--color-warning); +/// color||Color|0 +$tag-danger-color: var(--color-danger); +/// fontSize||Font|1 +$tag-font-size: 12px; +$tag-border-radius: 4px; +$tag-padding: 0 10px; + +/* Tree +-------------------------- */ +/// color||Color|0 +$tree-node-hover-background-color: $background-color-base; +/// color||Color|0 +$tree-font-color: var(--color-text-dark); +/// color||Color|0 +$tree-expand-icon-color: var(--color-text-lighter); + +/* Dropdown +-------------------------- */ +$dropdown-menu-box-shadow: $box-shadow-light; +$dropdown-menuItem-hover-fill: $color-primary-light-9; +$dropdown-menuItem-hover-color: $link-color; + +/* Badge +-------------------------- */ +/// color||Color|0 +$badge-background-color: var(--color-danger); +$badge-radius: 10px; +/// fontSize||Font|1 +$badge-font-size: 12px; +/// padding||Spacing|3 +$badge-padding: 6px; +/// height||Other|4 +$badge-size: 18px; + +/* Card +--------------------------*/ +/// color||Color|0 +$card-border-color: var(--border-color-light); +$card-border-radius: 4px; +/// padding||Spacing|3 +$card-padding: 20px; + +/* Slider +--------------------------*/ +/// color||Color|0 +$slider-main-background-color: var(--color-primary); +/// color||Color|0 +$slider-runway-background-color: var(--border-color-base); +$slider-button-hover-color: function.saturation( + --color-primary-h, + --color-primary-s, + --color-primary-l, + 8% +); +$slider-stop-background-color: $color-white; +$slider-disable-color: var(--color-text-lighter); +$slider-margin: 16px 0; +$slider-border-radius: 3px; +/// height|1|Other|4 +$slider-height: 6px; +/// height||Other|4 +$slider-button-size: 16px; +$slider-button-wrapper-size: 36px; +$slider-button-wrapper-offset: -15px; + +/* Steps +--------------------------*/ +$steps-border-color: $disabled-border-base; +$steps-border-radius: 4px; +$steps-padding: 20px; + +/* Menu +--------------------------*/ +/// fontSize||Font|1 +$menu-item-font-size: $font-size-base; +/// color||Color|0 +$menu-item-font-color: var(--color-text-dark); +/// color||Color|0 +$menu-background-color: $color-white; +$menu-item-hover-fill: $color-primary-light-9; + +/* Rate +--------------------------*/ +$rate-height: 20px; +/// fontSize||Font|1 +$rate-font-size: $font-size-base; +/// height||Other|3 +$rate-icon-size: 18px; +/// margin||Spacing|2 +$rate-icon-margin: 6px; +$rate-icon-color: var(--color-text-lighter); + +/* DatePicker +--------------------------*/ +$datepicker-font-color: var(--color-text-dark); +/// color|1|Color|0 +$datepicker-off-font-color: var(--color-text-lighter); +/// color||Color|0 +$datepicker-header-font-color: var(--color-text-dark); +$datepicker-icon-color: var(--color-text-dark); +$datepicker-border-color: $disabled-border-base; +$datepicker-inner-border-color: #e4e4e4; +/// color||Color|0 +$datepicker-inrange-background-color: var(--border-color-light); +/// color||Color|0 +$datepicker-inrange-hover-background-color: var(--border-color-light); +/// color||Color|0 +$datepicker-active-color: var(--color-primary); +/// color||Color|0 +$datepicker-hover-font-color: var(--color-primary); +$datepicker-cell-hover-color: #fff; + +/* Loading +--------------------------*/ +/// height||Other|4 +$loading-spinner-size: 42px; +/// height||Other|4 +$loading-fullscreen-spinner-size: 50px; + +/* Scrollbar +--------------------------*/ +$scrollbar-background-color: hsla( + var(#{--color-text-light-h}), + var(#{--color-text-light-s}), + var(#{--color-text-light-l}), + 0.3 +); +$scrollbar-hover-background-color: hsla( + var(#{--color-text-light-h}), + var(#{--color-text-light-s}), + var(#{--color-text-light-l}), + 0.5 +); + +/* Carousel +--------------------------*/ +/// fontSize||Font|1 +$carousel-arrow-font-size: 12px; +$carousel-arrow-size: 36px; +$carousel-arrow-background: rgba(31, 45, 61, 0.11); +$carousel-arrow-hover-background: rgba(31, 45, 61, 0.23); +/// width||Other|4 +$carousel-indicator-width: 30px; +/// height||Other|4 +$carousel-indicator-height: 2px; +$carousel-indicator-padding-horizontal: 4px; +$carousel-indicator-padding-vertical: 12px; +$carousel-indicator-out-color: $border-color-hover; + +/* Collapse +--------------------------*/ +/// color||Color|0 +$collapse-border-color: var(--border-color-light); +/// height||Other|4 +$collapse-header-height: 48px; +/// color||Color|0 +$collapse-header-background-color: $color-white; +/// color||Color|0 +$collapse-header-font-color: var(--color-text-dark); +/// fontSize||Font|1 +$collapse-header-font-size: 13px; +/// color||Color|0 +$collapse-content-background-color: $color-white; +/// fontSize||Font|1 +$collapse-content-font-size: 13px; +/// color||Color|0 +$collapse-content-font-color: var(--color-text-dark); + +/* Transfer +--------------------------*/ +$transfer-border-color: var(--border-color-light); +$transfer-border-radius: var(--border-radius-base); +/// height||Other|4 +$transfer-panel-width: 200px; +/// height||Other|4 +$transfer-panel-header-height: 40px; +/// color||Color|0 +$transfer-panel-header-background-color: $background-color-base; +/// height||Other|4 +$transfer-panel-footer-height: 40px; +/// height||Other|4 +$transfer-panel-body-height: 246px; +/// height||Other|4 +$transfer-item-height: 30px; +/// height||Other|4 +$transfer-filter-height: 32px; + +/* Header + --------------------------*/ +$header-padding: 0 20px; + +/* Footer +--------------------------*/ +$footer-padding: 0 20px; + +/* Main +--------------------------*/ +$main-padding: 20px; + +/* Timeline +--------------------------*/ +$timeline-node-size-normal: 12px; +$timeline-node-size-large: 14px; +$timeline-node-color: var(--border-color-base); + +/* Backtop +--------------------------*/ +/// color||Color|0 +$backtop-background-color: $color-white; +/// color||Color|0 +$backtop-font-color: var(--color-primary); +/// color||Color|0 +$backtop-hover-background-color: var(--border-color-light); + +/* Link +--------------------------*/ +/// fontSize||Font|1 +$link-font-size: $font-size-base; +/// fontWeight||Font|1 +$link-font-weight: $font-weight-primary; +/// color||Color|0 +$link-default-font-color: var(--color-text-dark); +/// color||Color|0 +$link-default-active-color: var(--color-primary); +/// color||Color|0 +$link-disabled-font-color: var(--color-text-lighter); +/// color||Color|0 +$link-primary-font-color: var(--color-primary); +/// color||Color|0 +$link-success-font-color: var(--color-success); +/// color||Color|0 +$link-warning-font-color: var(--color-warning); +/// color||Color|0 +$link-danger-font-color: var(--color-danger); +/// color||Color|0 +$link-info-font-color: var(--color-info); +/* Calendar +--------------------------*/ +/// border||Other|4 +$calendar-border: $table-border; +/// color||Other|4 +$calendar-selected-background-color: #f2f8fe; +$calendar-cell-width: 85px; + +/* Form +-------------------------- */ +/// fontSize||Font|1 +$form-label-font-size: $font-size-base; + +/* Avatar +--------------------------*/ +/// color||Color|0 +$avatar-font-color: #fff; +/// color||Color|0 +$avatar-background-color: #c0c4cc; +/// fontSize||Font Size|1 +$avatar-text-font-size: 14px; +/// fontSize||Font Size|1 +$avatar-icon-font-size: 18px; +/// borderRadius||Border|2 +$avatar-border-radius: var(--border-radius-base); +/// size|1|Avatar Size|3 +$avatar-large-size: 40px; +/// size|1|Avatar Size|3 +$avatar-medium-size: 36px; +/// size|1|Avatar Size|3 +$avatar-small-size: 28px; + +/* Break-point +--------------------------*/ +$sm: 768px; +$md: 992px; +$lg: 1200px; +$xl: 1920px; + +$breakpoints: ( + 'xs': ( + max-width: $sm - 1, + ), + 'sm': ( + min-width: $sm, + ), + 'md': ( + min-width: $md, + ), + 'lg': ( + min-width: $lg, + ), + 'xl': ( + min-width: $xl, + ), +); + +$breakpoints-spec: ( + 'xs-only': ( + max-width: $sm - 1, + ), + 'sm-and-up': ( + min-width: $sm, + ), + 'sm-only': ( + min-width: #{$sm}, + ) + and + ( + max-width: #{$md - 1}, + ), + 'sm-and-down': ( + max-width: $md - 1, + ), + 'md-and-up': ( + min-width: $md, + ), + 'md-only': ( + min-width: #{$md}, + ) + and + ( + max-width: #{$lg - 1}, + ), + 'md-and-down': ( + max-width: $lg - 1, + ), + 'lg-and-up': ( + min-width: $lg, + ), + 'lg-only': ( + min-width: #{$lg}, + ) + and + ( + max-width: #{$xl - 1}, + ), + 'lg-and-down': ( + max-width: $xl - 1, + ), + 'xl-only': ( + min-width: $xl, + ), +); diff --git a/packages/design-system/theme/src/container.scss b/packages/design-system/theme/src/container.scss new file mode 100644 index 0000000000..0565ec8412 --- /dev/null +++ b/packages/design-system/theme/src/container.scss @@ -0,0 +1,14 @@ +@use "mixins/mixins"; + +@include mixins.b(container) { + display: flex; + flex-direction: row; + flex: 1; + flex-basis: auto; + box-sizing: border-box; + min-width: 0; + + @include mixins.when(vertical) { + flex-direction: column; + } +} diff --git a/packages/design-system/theme/src/date-picker.scss b/packages/design-system/theme/src/date-picker.scss new file mode 100644 index 0000000000..6060427914 --- /dev/null +++ b/packages/design-system/theme/src/date-picker.scss @@ -0,0 +1,12 @@ +@use "./date-picker/date-table.scss"; +@use "./date-picker/month-table.scss"; +@use "./date-picker/year-table.scss"; +@use "./date-picker/time-spinner.scss"; +@use "./date-picker/picker.scss"; +@use "./date-picker/date-picker.scss"; +@use "./date-picker/date-range-picker.scss"; +@use "./date-picker/time-range-picker.scss"; +@use "./date-picker/time-picker.scss"; +@use "./input.scss"; +@use "./scrollbar.scss"; +@use "./popper"; diff --git a/packages/design-system/theme/src/date-picker/date-picker.scss b/packages/design-system/theme/src/date-picker/date-picker.scss new file mode 100644 index 0000000000..361758c91b --- /dev/null +++ b/packages/design-system/theme/src/date-picker/date-picker.scss @@ -0,0 +1,97 @@ +@use "../common/var"; +@use "../mixins/mixins"; +@use "./picker-panel.scss"; + +@include mixins.b(date-picker) { + width: 322px; + + &.has-sidebar.has-time { + width: 434px; + } + + &.has-sidebar { + width: 438px; + } + + &.has-time .el-picker-panel__body-wrapper { + position: relative; + } + + .el-picker-panel__content { + width: 292px; + } + + table { + table-layout: fixed; + width: 100%; + } + + @include mixins.e(editor-wrap) { + position: relative; + display: table-cell; + padding: 0 5px; + } + + @include mixins.e(time-header) { + position: relative; + border-bottom: 1px solid var.$datepicker-inner-border-color; + font-size: 12px; + padding: 8px 5px 5px 5px; + display: table; + width: 100%; + box-sizing: border-box; + } + + @include mixins.e(header) { + margin: 12px; + text-align: center; + + @include mixins.m(bordered) { + margin-bottom: 0; + padding-bottom: 12px; + border-bottom: solid 1px var(--border-color-light); + + & + .el-picker-panel__content { + margin-top: 0; + } + } + } + + @include mixins.e(header-label) { + font-size: 16px; + font-weight: 500; + padding: 0 5px; + line-height: 22px; + text-align: center; + cursor: pointer; + color: var(--color-text-dark); + + &:hover { + color: var.$datepicker-hover-font-color; + } + + &.active { + color: var.$datepicker-active-color; + } + } + + @include mixins.e(prev-btn) { + float: left; + } + + @include mixins.e(next-btn) { + float: right; + } + + @include mixins.e(time-wrap) { + padding: 10px; + text-align: center; + } + + @include mixins.e(time-label) { + float: left; + cursor: pointer; + line-height: 30px; + margin-left: 10px; + } +} diff --git a/packages/design-system/theme/src/date-picker/date-range-picker.scss b/packages/design-system/theme/src/date-picker/date-range-picker.scss new file mode 100644 index 0000000000..fc6746b782 --- /dev/null +++ b/packages/design-system/theme/src/date-picker/date-range-picker.scss @@ -0,0 +1,101 @@ +@use "../common/var"; +@use "../mixins/mixins"; + +@include mixins.b(date-range-picker) { + width: 646px; + + &.has-sidebar { + width: 756px; + } + + table { + table-layout: fixed; + width: 100%; + } + + .el-picker-panel__body { + min-width: 513px; + } + + .el-picker-panel__content { + margin: 0; + } + + @include mixins.e(header) { + position: relative; + text-align: center; + height: 28px; + + [class*='arrow-left'] { + float: left; + } + + [class*='arrow-right'] { + float: right; + } + + div { + font-size: 16px; + font-weight: 500; + margin-right: 50px; + } + } + + @include mixins.e(content) { + float: left; + width: 50%; + box-sizing: border-box; + margin: 0; + padding: 16px; + + @include mixins.when(left) { + border-right: 1px solid var.$datepicker-inner-border-color; + } + .el-date-range-picker__header { + div { + margin-left: 50px; + margin-right: 50px; + } + } + } + + @include mixins.e(editors-wrap) { + box-sizing: border-box; + display: table-cell; + + @include mixins.when(right) { + text-align: right; + } + } + + @include mixins.e(time-header) { + position: relative; + border-bottom: 1px solid var.$datepicker-inner-border-color; + font-size: 12px; + padding: 8px 5px 5px 5px; + display: table; + width: 100%; + box-sizing: border-box; + + > .el-icon-arrow-right { + font-size: 20px; + vertical-align: middle; + display: table-cell; + color: var.$datepicker-icon-color; + } + } + + @include mixins.e(time-picker-wrap) { + position: relative; + display: table-cell; + padding: 0 5px; + + .el-picker-panel { + position: absolute; + top: 13px; + right: 0; + z-index: 1; + background: var.$color-white; + } + } +} diff --git a/packages/design-system/theme/src/date-picker/date-table.scss b/packages/design-system/theme/src/date-picker/date-table.scss new file mode 100644 index 0000000000..5e0dc82928 --- /dev/null +++ b/packages/design-system/theme/src/date-picker/date-table.scss @@ -0,0 +1,151 @@ +@use "../common/var"; +@use "../mixins/mixins"; + +@include mixins.b(date-table) { + font-size: 12px; + user-select: none; + + @include mixins.when(week-mode) { + .el-date-table__row { + &:hover { + div { + background-color: var.$datepicker-inrange-background-color; + } + td.available:hover { + color: var.$datepicker-font-color; + } + td:first-child div { + margin-left: 5px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + } + td:last-child div { + margin-right: 5px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + } + } + + &.current div { + background-color: var.$datepicker-inrange-background-color; + } + } + } + + td { + width: 32px; + height: 30px; + padding: 4px 0; + box-sizing: border-box; + text-align: center; + cursor: pointer; + position: relative; + + & div { + height: 30px; + padding: 3px 0; + box-sizing: border-box; + } + + & span { + width: 24px; + height: 24px; + display: block; + margin: 0 auto; + line-height: 24px; + position: absolute; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } + + &.next-month, + &.prev-month { + color: var.$datepicker-off-font-color; + } + + &.today { + position: relative; + span { + color: var(--color-primary); + font-weight: bold; + } + &.start-date span, + &.end-date span { + color: var.$color-white; + } + } + + &.available:hover { + color: var.$datepicker-hover-font-color; + } + + &.in-range div { + background-color: var.$datepicker-inrange-background-color; + &:hover { + background-color: var.$datepicker-inrange-hover-background-color; + } + } + + &.current:not(.disabled) span { + color: var.$color-white; + background-color: var.$datepicker-active-color; + } + &.start-date div, + &.end-date div { + color: var.$color-white; + } + + &.start-date span, + &.end-date span { + background-color: var.$datepicker-active-color; + } + + &.start-date div { + margin-left: 5px; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + } + + &.end-date div { + margin-right: 5px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + } + + &.disabled div { + background-color: var.$background-color-base; + opacity: 1; + cursor: not-allowed; + color: var(--color-text-lighter); + } + + &.selected div { + margin-left: 5px; + margin-right: 5px; + background-color: var.$datepicker-inrange-background-color; + border-radius: 15px; + &:hover { + background-color: var.$datepicker-inrange-hover-background-color; + } + } + + &.selected span { + background-color: var.$datepicker-active-color; + color: var.$color-white; + border-radius: 15px; + } + + &.week { + font-size: 80%; + color: var.$datepicker-header-font-color; + } + } + + th { + padding: 5px; + color: var.$datepicker-header-font-color; + font-weight: 400; + border-bottom: solid 1px var(--border-color-light); + } +} diff --git a/packages/design-system/theme/src/date-picker/month-table.scss b/packages/design-system/theme/src/date-picker/month-table.scss new file mode 100644 index 0000000000..fba6f41a03 --- /dev/null +++ b/packages/design-system/theme/src/date-picker/month-table.scss @@ -0,0 +1,83 @@ +@use "../common/var"; +@use "../mixins/mixins"; + +@include mixins.b(month-table) { + font-size: 12px; + margin: -1px; + border-collapse: collapse; + + td { + text-align: center; + padding: 8px 0px; + cursor: pointer; + & div { + height: 48px; + padding: 6px 0; + box-sizing: border-box; + } + &.today { + .cell { + color: var(--color-primary); + font-weight: bold; + } + &.start-date .cell, + &.end-date .cell { + color: var.$color-white; + } + } + + &.disabled .cell { + background-color: var.$background-color-base; + cursor: not-allowed; + color: var(--color-text-lighter); + + &:hover { + color: var(--color-text-lighter); + } + } + + .cell { + width: 60px; + height: 36px; + display: block; + line-height: 36px; + color: var.$datepicker-font-color; + margin: 0 auto; + border-radius: 18px; + &:hover { + color: var.$datepicker-hover-font-color; + } + } + + &.in-range div { + background-color: var.$datepicker-inrange-background-color; + &:hover { + background-color: var.$datepicker-inrange-hover-background-color; + } + } + &.start-date div, + &.end-date div { + color: var.$color-white; + } + + &.start-date .cell, + &.end-date .cell { + color: var.$color-white; + background-color: var.$datepicker-active-color; + } + + &.start-date div { + border-top-left-radius: 24px; + border-bottom-left-radius: 24px; + } + + &.end-date div { + border-top-right-radius: 24px; + border-bottom-right-radius: 24px; + } + + &.current:not(.disabled) .cell { + color: var.$datepicker-active-color; + } + } +} diff --git a/packages/design-system/theme/src/date-picker/picker-panel.scss b/packages/design-system/theme/src/date-picker/picker-panel.scss new file mode 100644 index 0000000000..fbf001a78a --- /dev/null +++ b/packages/design-system/theme/src/date-picker/picker-panel.scss @@ -0,0 +1,128 @@ +@use "../common/var"; +@use "../mixins/mixins"; +@use "../mixins/button"; + +@include mixins.b(picker-panel) { + color: var(--color-text-dark); + border: 1px solid var.$datepicker-border-color; + box-shadow: var.$box-shadow-light; + background: var.$color-white; + border-radius: var(--border-radius-base); + line-height: 30px; + margin: 5px 0; + + @include mixins.e((body, body-wrapper)) { + &::after { + content: ''; + display: table; + clear: both; + } + } + + @include mixins.e(content) { + position: relative; + margin: 15px; + } + + @include mixins.e(footer) { + border-top: 1px solid var.$datepicker-inner-border-color; + padding: 4px; + text-align: right; + background-color: var.$color-white; + position: relative; + font-size: 0; + } + + @include mixins.e(shortcut) { + display: block; + width: 100%; + border: 0; + background-color: transparent; + line-height: 28px; + font-size: 14px; + color: var.$datepicker-font-color; + padding-left: 12px; + text-align: left; + outline: none; + cursor: pointer; + + &:hover { + color: var.$datepicker-hover-font-color; + } + + &.active { + background-color: #e6f1fe; + color: var.$datepicker-active-color; + } + } + + @include mixins.e(btn) { + border: 1px solid #dcdcdc; + color: #333; + line-height: 24px; + border-radius: 2px; + padding: 0 20px; + cursor: pointer; + background-color: transparent; + outline: none; + font-size: 12px; + + &[disabled] { + color: #cccccc; + cursor: not-allowed; + } + } + + @include mixins.e(icon-btn) { + font-size: 12px; + color: var.$datepicker-icon-color; + border: 0; + background: transparent; + cursor: pointer; + outline: none; + margin-top: 8px; + + &:hover { + color: var.$datepicker-hover-font-color; + } + + @include mixins.when(disabled) { + color: var.$font-color-disabled-base; + + &:hover { + cursor: not-allowed; + } + } + } + + @include mixins.e(link-btn) { + @include button.button-outline(); + @include button.button-small(); + @include button.button-round(); + + vertical-align: middle; + margin-left: var(--spacing-2xs); + + &.is-plain { + @include button.button-just-primary(); + } + } +} + +.el-picker-panel *[slot='sidebar'], +.el-picker-panel__sidebar { + position: absolute; + top: 0; + bottom: 0; + width: 110px; + border-right: 1px solid var.$datepicker-inner-border-color; + box-sizing: border-box; + padding-top: 6px; + background-color: var.$color-white; + overflow: auto; +} + +.el-picker-panel *[slot='sidebar'] + .el-picker-panel__body, +.el-picker-panel__sidebar + .el-picker-panel__body { + margin-left: 110px; +} diff --git a/packages/design-system/theme/src/date-picker/picker.scss b/packages/design-system/theme/src/date-picker/picker.scss new file mode 100644 index 0000000000..28613ff103 --- /dev/null +++ b/packages/design-system/theme/src/date-picker/picker.scss @@ -0,0 +1,198 @@ +@use "../mixins/mixins"; +@use "../common/var"; +@use "../common/transition"; + +@include mixins.b(date-editor) { + position: relative; + display: inline-block; + text-align: left; + + &.el-input, + &.el-input__inner { + width: 100%; + } + + @include mixins.m((monthrange)) { + &.el-input, + &.el-input__inner { + width: 300px; + } + } + + @include mixins.m((daterange, timerange)) { + &.el-input, + &.el-input__inner { + width: 350px; + } + } + + @include mixins.m(datetimerange) { + &.el-input, + &.el-input__inner { + width: 400px; + } + } + + @include mixins.m(dates) { + .el-input__inner { + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .el-icon-circle-close { + cursor: pointer; + } + + .el-range__icon { + font-size: 14px; + margin-left: -5px; + color: var(--color-text-lighter); + float: left; + line-height: 32px; + } + + .el-range-input { + appearance: none; + border: none; + outline: none; + display: inline-block; + height: 100%; + margin: 0; + padding: 0; + width: 39%; + text-align: center; + font-size: var.$font-size-base; + color: var(--color-text-dark); + + &::placeholder { + color: var(--color-text-lighter); + } + } + + .el-range-separator { + display: inline-block; + height: 100%; + padding: 0 5px; + margin: 0; + text-align: center; + line-height: 32px; + font-size: 14px; + width: 5%; + color: var(--color-text-dark); + } + + .el-range__close-icon { + font-size: 14px; + color: var(--color-text-lighter); + width: 25px; + display: inline-block; + float: right; + line-height: 32px; + } +} + +@include mixins.b(range-editor) { + &.el-input__inner { + display: inline-flex; + align-items: center; + padding: 3px 10px; + } + + .el-range-input { + line-height: 1; + } + + @include mixins.when(active) { + border-color: var(--color-primary); + + &:hover { + border-color: var(--color-primary); + } + } + + @include mixins.m(medium) { + &.el-input__inner { + height: var.$input-medium-height; + } + + .el-range-separator { + line-height: 28px; + font-size: var.$input-medium-font-size; + } + + .el-range-input { + font-size: var.$input-medium-font-size; + } + + .el-range__icon, + .el-range__close-icon { + line-height: 28px; + } + } + + @include mixins.m(small) { + &.el-input__inner { + height: var.$input-small-height; + } + + .el-range-separator { + line-height: 24px; + font-size: var.$input-small-font-size; + } + + .el-range-input { + font-size: var.$input-small-font-size; + } + + .el-range__icon, + .el-range__close-icon { + line-height: 24px; + } + } + + @include mixins.m(mini) { + &.el-input__inner { + height: var.$input-mini-height; + } + + .el-range-separator { + line-height: 20px; + font-size: var.$input-mini-font-size; + } + + .el-range-input { + font-size: var.$input-mini-font-size; + } + + .el-range__icon, + .el-range__close-icon { + line-height: 20px; + } + } + + @include mixins.when(disabled) { + background-color: var.$input-disabled-fill; + border-color: var.$input-disabled-border; + color: var.$input-disabled-color; + cursor: not-allowed; + + &:hover, + &:focus { + border-color: var.$input-disabled-border; + } + + input { + background-color: var.$input-disabled-fill; + color: var.$input-disabled-color; + cursor: not-allowed; + &::placeholder { + color: var.$input-disabled-placeholder-color; + } + } + + .el-range-separator { + color: var.$input-disabled-color; + } + } +} diff --git a/packages/design-system/theme/src/date-picker/time-picker.scss b/packages/design-system/theme/src/date-picker/time-picker.scss new file mode 100644 index 0000000000..5588de5e8b --- /dev/null +++ b/packages/design-system/theme/src/date-picker/time-picker.scss @@ -0,0 +1,87 @@ +@use "../common/var"; +@use "../mixins/mixins"; + +@include mixins.b(time-panel) { + margin: 5px 0; + border: solid 1px var.$datepicker-border-color; + background-color: var.$color-white; + box-shadow: var.$box-shadow-light; + border-radius: 2px; + position: absolute; + width: 180px; + left: 0; + z-index: var.$index-top; + user-select: none; + box-sizing: content-box; + + @include mixins.e(content) { + font-size: 0; + position: relative; + overflow: hidden; + + &::after, + &::before { + content: ''; + top: 50%; + position: absolute; + margin-top: -15px; + height: 32px; + z-index: -1; + left: 0; + right: 0; + box-sizing: border-box; + padding-top: 6px; + text-align: left; + border-top: 1px solid var(--border-color-base); + border-bottom: 1px solid var(--border-color-base); + } + + &::after { + left: 50%; + margin-left: 12%; + margin-right: 12%; + } + + &::before { + padding-left: 50%; + margin-right: 12%; + margin-left: 12%; + } + + &.has-seconds { + &::after { + left: calc(100% / 3 * 2); + } + + &::before { + padding-left: calc(100% / 3); + } + } + } + + @include mixins.e(footer) { + border-top: 1px solid var.$datepicker-inner-border-color; + padding: 4px; + height: 36px; + line-height: 25px; + text-align: right; + box-sizing: border-box; + } + + @include mixins.e(btn) { + border: none; + line-height: 28px; + padding: 0 5px; + margin: 0 5px; + cursor: pointer; + background-color: transparent; + outline: none; + font-size: 12px; + color: var(--color-text-dark); + + &.confirm { + font-weight: 800; + color: var.$datepicker-active-color; + } + } +} diff --git a/packages/design-system/theme/src/date-picker/time-range-picker.scss b/packages/design-system/theme/src/date-picker/time-range-picker.scss new file mode 100644 index 0000000000..7f4a94a6dd --- /dev/null +++ b/packages/design-system/theme/src/date-picker/time-range-picker.scss @@ -0,0 +1,32 @@ +@use "../common/var"; +@use "../mixins/mixins"; + +@include mixins.b(time-range-picker) { + width: 354px; + overflow: visible; + + @include mixins.e(content) { + position: relative; + text-align: center; + padding: 10px; + } + + @include mixins.e(cell) { + box-sizing: border-box; + margin: 0; + padding: 4px 7px 7px; + width: 50%; + display: inline-block; + } + + @include mixins.e(header) { + margin-bottom: 5px; + text-align: center; + font-size: 14px; + } + + @include mixins.e(body) { + border-radius: 2px; + border: 1px solid var.$datepicker-border-color; + } +} diff --git a/packages/design-system/theme/src/date-picker/time-spinner.scss b/packages/design-system/theme/src/date-picker/time-spinner.scss new file mode 100644 index 0000000000..f08660a41a --- /dev/null +++ b/packages/design-system/theme/src/date-picker/time-spinner.scss @@ -0,0 +1,110 @@ +@use "../common/var"; +@use "../mixins/mixins"; + +@include mixins.b(time-spinner) { + &.has-seconds { + .el-time-spinner__wrapper { + width: 33.3%; + } + } + + @include mixins.e(wrapper) { + max-height: 190px; + display: inline-block; + width: 50%; + vertical-align: top; + position: relative; + + & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { + padding-bottom: 15px; + } + + @include mixins.when(arrow) { + box-sizing: border-box; + text-align: center; + overflow: hidden; + + .el-time-spinner__list { + transform: translateY(-32px); + } + + .el-time-spinner__item:hover:not(.disabled):not(.active) { + background: var.$color-white; + cursor: default; + } + } + } + + @include mixins.e(arrow) { + font-size: 12px; + color: var(--color-text-light); + position: absolute; + left: 0; + width: 100%; + z-index: var.$index-normal; + text-align: center; + height: 30px; + line-height: 30px; + cursor: pointer; + + &:hover { + color: var(--color-primary); + } + + &.el-icon-arrow-up { + top: 10px; + } + + &.el-icon-arrow-down { + bottom: 10px; + } + } + + @include mixins.e(input) { + &.el-input { + width: 70%; + + .el-input__inner { + padding: 0; + text-align: center; + } + } + } + + @include mixins.e(list) { + padding: 0; + margin: 0; + list-style: none; + text-align: center; + + &::after, + &::before { + content: ''; + display: block; + width: 100%; + height: 80px; + } + } + + @include mixins.e(item) { + height: 32px; + line-height: 32px; + font-size: 12px; + color: var(--color-text-dark); + + &:hover:not(.disabled):not(.active) { + background: var.$background-color-base; + cursor: pointer; + } + + &.active:not(.disabled) { + color: var(--color-text-dark); + font-weight: bold; + } + + &.disabled { + color: var(--color-text-lighter); + cursor: not-allowed; + } + } +} diff --git a/packages/design-system/theme/src/date-picker/year-table.scss b/packages/design-system/theme/src/date-picker/year-table.scss new file mode 100644 index 0000000000..ee81a75220 --- /dev/null +++ b/packages/design-system/theme/src/date-picker/year-table.scss @@ -0,0 +1,52 @@ +@use "../common/var"; +@use "../mixins/mixins"; + +@include mixins.b(year-table) { + font-size: 12px; + margin: -1px; + border-collapse: collapse; + + .el-icon { + color: var.$datepicker-icon-color; + } + + td { + text-align: center; + padding: 20px 3px; + cursor: pointer; + + &.today { + .cell { + color: var(--color-primary); + font-weight: bold; + } + } + + &.disabled .cell { + background-color: var.$background-color-base; + cursor: not-allowed; + color: var(--color-text-lighter); + + &:hover { + color: var(--color-text-lighter); + } + } + + .cell { + width: 48px; + height: 32px; + display: block; + line-height: 32px; + color: var.$datepicker-font-color; + margin: 0 auto; + + &:hover { + color: var.$datepicker-hover-font-color; + } + } + + &.current:not(.disabled) .cell { + color: var.$datepicker-active-color; + } + } +} diff --git a/packages/design-system/theme/src/dialog.scss b/packages/design-system/theme/src/dialog.scss new file mode 100644 index 0000000000..087d35b97a --- /dev/null +++ b/packages/design-system/theme/src/dialog.scss @@ -0,0 +1,124 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "./common/var"; +@use "common/popup"; + +@include mixins.b(dialog) { + position: relative; + margin: 0 auto 50px; + background: var.$dialog-background-color; + border-radius: var(--border-radius-small); + box-shadow: var.$dialog-box-shadow; + box-sizing: border-box; + width: 50%; + + @include mixins.when(fullscreen) { + width: 100%; + margin-top: 0; + margin-bottom: 0; + height: 100%; + overflow: auto; + } + + @include mixins.e(wrapper) { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + margin: 0; + } + + @include mixins.e(header) { + padding: var.$dialog-padding-primary; + padding-bottom: 10px; + } + + @include mixins.e(headerbtn) { + position: absolute; + top: var.$dialog-padding-primary; + right: var.$dialog-padding-primary; + padding: 0; + background: transparent; + border: none; + outline: none; + cursor: pointer; + font-size: var.$message-close-size; + + .el-dialog__close { + color: var(--color-info); + } + + &:focus, + &:hover { + .el-dialog__close { + color: var(--color-primary); + } + } + } + + @include mixins.e(title) { + line-height: var.$dialog-font-line-height; + font-size: var.$dialog-title-font-size; + color: var(--color-text-dark); + } + + @include mixins.e(body) { + padding: (var.$dialog-padding-primary + 10px) var.$dialog-padding-primary; + color: var(--color-text-dark); + font-size: var.$dialog-content-font-size; + word-break: break-all; + } + + @include mixins.e(footer) { + padding: var.$dialog-padding-primary; + padding-top: 10px; + text-align: right; + box-sizing: border-box; + } + + // 内容居中布局 + @include mixins.m(center) { + text-align: center; + + @include mixins.e(body) { + text-align: initial; + padding: 25px (var.$dialog-padding-primary + 5px) 30px; + } + + @include mixins.e(footer) { + text-align: inherit; + } + } +} + +.dialog-fade-enter-active { + animation: dialog-fade-in 0.3s; +} + +.dialog-fade-leave-active { + animation: dialog-fade-out 0.3s; +} + +@keyframes dialog-fade-in { + 0% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } + 100% { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes dialog-fade-out { + 0% { + transform: translate3d(0, 0, 0); + opacity: 1; + } + 100% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } +} diff --git a/packages/design-system/theme/src/display.scss b/packages/design-system/theme/src/display.scss new file mode 100644 index 0000000000..5b983376c0 --- /dev/null +++ b/packages/design-system/theme/src/display.scss @@ -0,0 +1,12 @@ +@use "./common/var" as var; +@use "mixins/mixins"; + +.hidden { + @each $break-point-name, $value in var.$breakpoints-spec { + &-#{$break-point-name} { + @include mixins.res($break-point-name, var.$breakpoints-spec) { + display: none !important; + } + } + } +} diff --git a/packages/design-system/theme/src/divider.scss b/packages/design-system/theme/src/divider.scss new file mode 100644 index 0000000000..fbcb831f67 --- /dev/null +++ b/packages/design-system/theme/src/divider.scss @@ -0,0 +1,47 @@ +@use "./common/var"; +@use "mixins/mixins"; + +@include mixins.b(divider) { + background-color: var(--border-color-base); + position: relative; + + @include mixins.m(horizontal) { + display: block; + height: 1px; + width: 100%; + margin: 24px 0; + } + + @include mixins.m(vertical) { + display: inline-block; + width: 1px; + height: 1em; + margin: 0 8px; + vertical-align: middle; + position: relative; + } + + @include mixins.e(text) { + position: absolute; + background-color: var.$color-white; + padding: 0 20px; + font-weight: 500; + color: var(--color-text-dark); + font-size: 14px; + + @include mixins.when(left) { + left: 20px; + transform: translateY(-50%); + } + + @include mixins.when(center) { + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + + @include mixins.when(right) { + right: 20px; + transform: translateY(-50%); + } + } +} diff --git a/packages/design-system/theme/src/drawer.scss b/packages/design-system/theme/src/drawer.scss new file mode 100644 index 0000000000..993ab4ff2d --- /dev/null +++ b/packages/design-system/theme/src/drawer.scss @@ -0,0 +1,217 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@keyframes el-drawer-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@mixin drawer-animation($direction) { + @keyframes #{$direction}-drawer-in { + 0% { + @if $direction == ltr { + transform: translate(-100%, 0px); + } + + @if $direction == rtl { + transform: translate(100%, 0px); + } + + @if $direction == ttb { + transform: translate(0px, -100%); + } + + @if $direction == btt { + transform: translate(0px, 100%); + } + } + + 100% { + @if $direction == ltr { + transform: translate(0px, 0px); + } + + @if $direction == rtl { + transform: translate(0px, 0px); + } + + @if $direction == ttb { + transform: translate(0px, 0px); + } + + @if $direction == btt { + transform: translate(0px, 0px); + } + } + } + + @keyframes #{$direction}-drawer-out { + 0% { + @if $direction == ltr { + transform: translate(0px, 0px); + } + + @if $direction == rtl { + transform: translate(0px, 0px); + } + + @if $direction == ttb { + transform: translate(0px, 0px); + } + + @if $direction == btt { + transform: translate(0px, 0); + } + } + + 100% { + @if $direction == ltr { + transform: translate(-100%, 0px); + } + + @if $direction == rtl { + transform: translate(100%, 0px); + } + + @if $direction == ttb { + transform: translate(0px, -100%); + } + + @if $direction == btt { + transform: translate(0px, 100%); + } + } + } +} + +@mixin animation-in($direction) { + .el-drawer__open &.#{$direction} { + animation: #{$direction}-drawer-in 0.3s 1ms; + } +} + +@mixin animation-out($direction) { + &.#{$direction} { + animation: #{$direction}-drawer-out 0.3s; + } +} + +@include drawer-animation(rtl); +@include drawer-animation(ltr); +@include drawer-animation(ttb); +@include drawer-animation(btt); + +$directions: rtl, ltr, ttb, btt; + +@include mixins.b(drawer) { + position: absolute; + box-sizing: border-box; + background-color: var.$dialog-background-color; + display: flex; + flex-direction: column; + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), + 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12); + overflow: hidden; + outline: 0; + + @each $direction in $directions { + @include animation-out($direction); + @include animation-in($direction); + } + + &__wrapper { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + margin: 0; + } + + &__header { + align-items: center; + color: rgb(114, 118, 123); + display: flex; + margin-bottom: 32px; + padding: var.$dialog-padding-primary; + padding-bottom: 0; + & > :first-child { + flex: 1; + } + } + + &__title { + margin: 0; + flex: 1; + line-height: inherit; + font-size: 1rem; + } + + &__close-btn { + border: none; + cursor: pointer; + font-size: var.$font-size-extra-large; + color: inherit; + background-color: transparent; + } + + &__body { + flex: 1; + & > * { + box-sizing: border-box; + } + } + + &.ltr, + &.rtl { + height: 100%; + top: 0; + bottom: 0; + } + + &.ttb, + &.btt { + width: 100%; + left: 0; + right: 0; + } + + &.ltr { + left: 0; + } + + &.rtl { + right: 0; + } + + &.ttb { + top: 0; + } + + &.btt { + bottom: 0; + } +} + +.el-drawer__container { + position: relative; + left: 0; + right: 0; + top: 0; + bottom: 0; + height: 100%; + width: 100%; +} + +.el-drawer-fade-enter-active { + animation: el-drawer-fade-in 0.3s; +} + +.el-drawer-fade-leave-active { + animation: el-drawer-fade-in 0.3s reverse; +} diff --git a/packages/design-system/theme/src/dropdown-item.scss b/packages/design-system/theme/src/dropdown-item.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/dropdown-menu.scss b/packages/design-system/theme/src/dropdown-menu.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/dropdown.scss b/packages/design-system/theme/src/dropdown.scss new file mode 100644 index 0000000000..b7195809bf --- /dev/null +++ b/packages/design-system/theme/src/dropdown.scss @@ -0,0 +1,185 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "button"; +@use "./popper"; + +@include mixins.b(dropdown) { + display: inline-block; + position: relative; + color: var(--color-text-dark); + font-size: var.$font-size-base; + + .el-button-group { + display: block; + .el-button { + float: none; + } + } + + & .el-dropdown__caret-button { + padding-left: 5px; + padding-right: 5px; + position: relative; + border-left: none; + + &::before { + $gap: 5px; + + content: ''; + position: absolute; + display: block; + width: 1px; + top: $gap; + bottom: $gap; + left: 0; + background: rgba(var.$color-white, 0.5); + } + + &.el-button--default::before { + background: hsla( + var(#{--button-default-border-color-h}), + var(#{--button-default-border-color-s}), + var(#{--button-default-border-color-l}), + 0.5 + ); + } + + &:hover { + &::before { + top: 0; + bottom: 0; + } + } + + & .el-dropdown__icon { + padding-left: 0; + } + } + @include mixins.e(icon) { + font-size: 12px; + margin: 0 3px; + } + + .el-dropdown-selfdefine { + // 自定义 + &:focus:active, + &:focus:not(.focusing) { + outline-width: 0; + } + } +} + +@include mixins.b(dropdown-menu) { + position: absolute; + top: 0; + left: 0; + z-index: 10; + padding: 10px 0; + margin: 5px 0; + background-color: var.$color-white; + border: 1px solid var(--border-color-light); + border-radius: var(--border-radius-base); + box-shadow: var.$dropdown-menu-box-shadow; + + @include mixins.e(item) { + list-style: none; + line-height: 36px; + padding: 0 20px; + margin: 0; + font-size: var.$font-size-base; + color: var(--color-text-dark); + cursor: pointer; + outline: none; + &:not(.is-disabled):hover, + &:focus { + background-color: var.$dropdown-menuItem-hover-fill; + color: var.$dropdown-menuItem-hover-color; + } + + i { + margin-right: 5px; + } + + @include mixins.m(divided) { + $divided-offset: 6px; + + position: relative; + margin-top: $divided-offset; + border-top: 1px solid var(--border-color-light); + + &:before { + content: ''; + height: $divided-offset; + display: block; + margin: 0 -20px; + background-color: var.$color-white; + } + } + + @include mixins.when(disabled) { + cursor: default; + color: var.$font-color-disabled-base; + pointer-events: none; + } + } + + @include mixins.m(medium) { + padding: 6px 0; + + @include mixins.e(item) { + line-height: 30px; + padding: 0 17px; + font-size: 14px; + + &.el-dropdown-menu__item--divided { + $divided-offset: 6px; + margin-top: $divided-offset; + + &:before { + height: $divided-offset; + margin: 0 -17px; + } + } + } + } + + @include mixins.m(small) { + padding: 6px 0; + + @include mixins.e(item) { + line-height: 27px; + padding: 0 15px; + font-size: 13px; + + &.el-dropdown-menu__item--divided { + $divided-offset: 4px; + margin-top: $divided-offset; + + &:before { + height: $divided-offset; + margin: 0 -15px; + } + } + } + } + + @include mixins.m(mini) { + padding: 3px 0; + + @include mixins.e(item) { + line-height: 24px; + padding: 0 10px; + font-size: 12px; + + &.el-dropdown-menu__item--divided { + $divided-offset: 3px; + margin-top: $divided-offset; + + &:before { + height: $divided-offset; + margin: 0 -10px; + } + } + } + } +} diff --git a/packages/design-system/theme/src/fonts/element-icons.ttf b/packages/design-system/theme/src/fonts/element-icons.ttf new file mode 100644 index 0000000000..91b74de367 Binary files /dev/null and b/packages/design-system/theme/src/fonts/element-icons.ttf differ diff --git a/packages/design-system/theme/src/fonts/element-icons.woff b/packages/design-system/theme/src/fonts/element-icons.woff new file mode 100644 index 0000000000..02b9a2539e Binary files /dev/null and b/packages/design-system/theme/src/fonts/element-icons.woff differ diff --git a/packages/design-system/theme/src/footer.scss b/packages/design-system/theme/src/footer.scss new file mode 100644 index 0000000000..c111279008 --- /dev/null +++ b/packages/design-system/theme/src/footer.scss @@ -0,0 +1,8 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(footer) { + padding: var.$footer-padding; + box-sizing: border-box; + flex-shrink: 0; +} diff --git a/packages/design-system/theme/src/form-item.scss b/packages/design-system/theme/src/form-item.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/form.scss b/packages/design-system/theme/src/form.scss new file mode 100644 index 0000000000..598ec6bff3 --- /dev/null +++ b/packages/design-system/theme/src/form.scss @@ -0,0 +1,168 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "./common/var"; + +@include mixins.b(form) { + @include mixins.m(label-left) { + & .el-form-item__label { + text-align: left; + } + } + @include mixins.m(label-top) { + & .el-form-item__label { + float: none; + display: inline-block; + text-align: left; + padding: 0 0 10px 0; + } + } + @include mixins.m(inline) { + & .el-form-item { + display: inline-block; + margin-right: 10px; + vertical-align: top; + } + & .el-form-item__label { + float: none; + display: inline-block; + } + & .el-form-item__content { + display: inline-block; + vertical-align: top; + } + &.el-form--label-top .el-form-item__content { + display: block; + } + } +} +@include mixins.b(form-item) { + margin-bottom: 22px; + @include utils.utils-clearfix; + + & .el-form-item { + margin-bottom: 0; + } + + & .el-input__validateIcon { + display: none; + } + + @include mixins.m(medium) { + .el-form-item__label { + line-height: 36px; + } + .el-form-item__content { + line-height: 36px; + } + } + @include mixins.m(small) { + .el-form-item__label { + line-height: 32px; + } + .el-form-item__content { + line-height: 32px; + } + &.el-form-item { + margin-bottom: 18px; + } + .el-form-item__error { + padding-top: 2px; + } + } + @include mixins.m(mini) { + .el-form-item__label { + line-height: 28px; + } + .el-form-item__content { + line-height: 28px; + } + &.el-form-item { + margin-bottom: 18px; + } + .el-form-item__error { + padding-top: 1px; + } + } + + @include mixins.e(label-wrap) { + float: left; + .el-form-item__label { + display: inline-block; + float: none; + } + } + + @include mixins.e(label) { + text-align: right; + vertical-align: middle; + float: left; + font-size: var.$form-label-font-size; + color: var(--color-text-dark); + line-height: 40px; + padding: 0 12px 0 0; + box-sizing: border-box; + } + @include mixins.e(content) { + line-height: 40px; + position: relative; + font-size: 14px; + @include utils.utils-clearfix; + + .el-input-group { + vertical-align: top; + } + } + @include mixins.e(error) { + color: var(--color-danger); + font-size: 12px; + line-height: 1; + padding-top: 4px; + position: absolute; + top: 100%; + left: 0; + + @include mixins.m(inline) { + position: relative; + top: auto; + left: auto; + display: inline-block; + margin-left: 10px; + } + } + + @include mixins.when(required) { + @include mixins.pseudo('not(.is-no-asterisk)') { + & > .el-form-item__label:before, + & .el-form-item__label-wrap > .el-form-item__label:before { + content: '*'; + color: var(--color-danger); + margin-right: 4px; + } + } + } + + @include mixins.when(error) { + & .el-input__inner, + & .el-textarea__inner { + &, + &:focus { + border-color: var(--color-danger); + } + } + & .el-input-group__append, + & .el-input-group__prepend { + & .el-input__inner { + border-color: transparent; + } + } + .el-input__validateIcon { + color: var(--color-danger); + } + } + + @include mixins.m(feedback) { + .el-input__validateIcon { + display: inline-block; + } + } +} diff --git a/packages/design-system/theme/src/header.scss b/packages/design-system/theme/src/header.scss new file mode 100644 index 0000000000..a37a759f1e --- /dev/null +++ b/packages/design-system/theme/src/header.scss @@ -0,0 +1,8 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(header) { + padding: var.$header-padding; + box-sizing: border-box; + flex-shrink: 0; +} diff --git a/packages/design-system/theme/src/icon.scss b/packages/design-system/theme/src/icon.scss new file mode 100644 index 0000000000..261561d424 --- /dev/null +++ b/packages/design-system/theme/src/icon.scss @@ -0,0 +1,1169 @@ +@use "./common/var"; + +@font-face { + font-family: 'element-icons'; + src: url('#{var.$font-path}/element-icons.woff') format('woff'), + /* chrome, firefox */ url('#{var.$font-path}/element-icons.ttf') + format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + font-weight: normal; + font-display: var.$font-display; + font-style: normal; +} + +[class^='el-icon-'], +[class*=' el-icon-'] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'element-icons' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + vertical-align: baseline; + display: inline-block; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.el-icon-ice-cream-round:before { + content: '\e6a0'; +} + +.el-icon-ice-cream-square:before { + content: '\e6a3'; +} + +.el-icon-lollipop:before { + content: '\e6a4'; +} + +.el-icon-potato-strips:before { + content: '\e6a5'; +} + +.el-icon-milk-tea:before { + content: '\e6a6'; +} + +.el-icon-ice-drink:before { + content: '\e6a7'; +} + +.el-icon-ice-tea:before { + content: '\e6a9'; +} + +.el-icon-coffee:before { + content: '\e6aa'; +} + +.el-icon-orange:before { + content: '\e6ab'; +} + +.el-icon-pear:before { + content: '\e6ac'; +} + +.el-icon-apple:before { + content: '\e6ad'; +} + +.el-icon-cherry:before { + content: '\e6ae'; +} + +.el-icon-watermelon:before { + content: '\e6af'; +} + +.el-icon-grape:before { + content: '\e6b0'; +} + +.el-icon-refrigerator:before { + content: '\e6b1'; +} + +.el-icon-goblet-square-full:before { + content: '\e6b2'; +} + +.el-icon-goblet-square:before { + content: '\e6b3'; +} + +.el-icon-goblet-full:before { + content: '\e6b4'; +} + +.el-icon-goblet:before { + content: '\e6b5'; +} + +.el-icon-cold-drink:before { + content: '\e6b6'; +} + +.el-icon-coffee-cup:before { + content: '\e6b8'; +} + +.el-icon-water-cup:before { + content: '\e6b9'; +} + +.el-icon-hot-water:before { + content: '\e6ba'; +} + +.el-icon-ice-cream:before { + content: '\e6bb'; +} + +.el-icon-dessert:before { + content: '\e6bc'; +} + +.el-icon-sugar:before { + content: '\e6bd'; +} + +.el-icon-tableware:before { + content: '\e6be'; +} + +.el-icon-burger:before { + content: '\e6bf'; +} + +.el-icon-knife-fork:before { + content: '\e6c1'; +} + +.el-icon-fork-spoon:before { + content: '\e6c2'; +} + +.el-icon-chicken:before { + content: '\e6c3'; +} + +.el-icon-food:before { + content: '\e6c4'; +} + +.el-icon-dish-1:before { + content: '\e6c5'; +} + +.el-icon-dish:before { + content: '\e6c6'; +} + +.el-icon-moon-night:before { + content: '\e6ee'; +} + +.el-icon-moon:before { + content: '\e6f0'; +} + +.el-icon-cloudy-and-sunny:before { + content: '\e6f1'; +} + +.el-icon-partly-cloudy:before { + content: '\e6f2'; +} + +.el-icon-cloudy:before { + content: '\e6f3'; +} + +.el-icon-sunny:before { + content: '\e6f6'; +} + +.el-icon-sunset:before { + content: '\e6f7'; +} + +.el-icon-sunrise-1:before { + content: '\e6f8'; +} + +.el-icon-sunrise:before { + content: '\e6f9'; +} + +.el-icon-heavy-rain:before { + content: '\e6fa'; +} + +.el-icon-lightning:before { + content: '\e6fb'; +} + +.el-icon-light-rain:before { + content: '\e6fc'; +} + +.el-icon-wind-power:before { + content: '\e6fd'; +} + +.el-icon-baseball:before { + content: '\e712'; +} + +.el-icon-soccer:before { + content: '\e713'; +} + +.el-icon-football:before { + content: '\e715'; +} + +.el-icon-basketball:before { + content: '\e716'; +} + +.el-icon-ship:before { + content: '\e73f'; +} + +.el-icon-truck:before { + content: '\e740'; +} + +.el-icon-bicycle:before { + content: '\e741'; +} + +.el-icon-mobile-phone:before { + content: '\e6d3'; +} + +.el-icon-service:before { + content: '\e6d4'; +} + +.el-icon-key:before { + content: '\e6e2'; +} + +.el-icon-unlock:before { + content: '\e6e4'; +} + +.el-icon-lock:before { + content: '\e6e5'; +} + +.el-icon-watch:before { + content: '\e6fe'; +} + +.el-icon-watch-1:before { + content: '\e6ff'; +} + +.el-icon-timer:before { + content: '\e702'; +} + +.el-icon-alarm-clock:before { + content: '\e703'; +} + +.el-icon-map-location:before { + content: '\e704'; +} + +.el-icon-delete-location:before { + content: '\e705'; +} + +.el-icon-add-location:before { + content: '\e706'; +} + +.el-icon-location-information:before { + content: '\e707'; +} + +.el-icon-location-outline:before { + content: '\e708'; +} + +.el-icon-location:before { + content: '\e79e'; +} + +.el-icon-place:before { + content: '\e709'; +} + +.el-icon-discover:before { + content: '\e70a'; +} + +.el-icon-first-aid-kit:before { + content: '\e70b'; +} + +.el-icon-trophy-1:before { + content: '\e70c'; +} + +.el-icon-trophy:before { + content: '\e70d'; +} + +.el-icon-medal:before { + content: '\e70e'; +} + +.el-icon-medal-1:before { + content: '\e70f'; +} + +.el-icon-stopwatch:before { + content: '\e710'; +} + +.el-icon-mic:before { + content: '\e711'; +} + +.el-icon-copy-document:before { + content: '\e718'; +} + +.el-icon-full-screen:before { + content: '\e719'; +} + +.el-icon-switch-button:before { + content: '\e71b'; +} + +.el-icon-aim:before { + content: '\e71c'; +} + +.el-icon-crop:before { + content: '\e71d'; +} + +.el-icon-odometer:before { + content: '\e71e'; +} + +.el-icon-time:before { + content: '\e71f'; +} + +.el-icon-bangzhu:before { + content: '\e724'; +} + +.el-icon-close-notification:before { + content: '\e726'; +} + +.el-icon-microphone:before { + content: '\e727'; +} + +.el-icon-turn-off-microphone:before { + content: '\e728'; +} + +.el-icon-position:before { + content: '\e729'; +} + +.el-icon-postcard:before { + content: '\e72a'; +} + +.el-icon-message:before { + content: '\e72b'; +} + +.el-icon-chat-line-square:before { + content: '\e72d'; +} + +.el-icon-chat-dot-square:before { + content: '\e72e'; +} + +.el-icon-chat-dot-round:before { + content: '\e72f'; +} + +.el-icon-chat-square:before { + content: '\e730'; +} + +.el-icon-chat-line-round:before { + content: '\e731'; +} + +.el-icon-chat-round:before { + content: '\e732'; +} + +.el-icon-set-up:before { + content: '\e733'; +} + +.el-icon-turn-off:before { + content: '\e734'; +} + +.el-icon-open:before { + content: '\e735'; +} + +.el-icon-connection:before { + content: '\e736'; +} + +.el-icon-link:before { + content: '\e737'; +} + +.el-icon-cpu:before { + content: '\e738'; +} + +.el-icon-thumb:before { + content: '\e739'; +} + +.el-icon-female:before { + content: '\e73a'; +} + +.el-icon-male:before { + content: '\e73b'; +} + +.el-icon-guide:before { + content: '\e73c'; +} + +.el-icon-news:before { + content: '\e73e'; +} + +.el-icon-price-tag:before { + content: '\e744'; +} + +.el-icon-discount:before { + content: '\e745'; +} + +.el-icon-wallet:before { + content: '\e747'; +} + +.el-icon-coin:before { + content: '\e748'; +} + +.el-icon-money:before { + content: '\e749'; +} + +.el-icon-bank-card:before { + content: '\e74a'; +} + +.el-icon-box:before { + content: '\e74b'; +} + +.el-icon-present:before { + content: '\e74c'; +} + +.el-icon-sell:before { + content: '\e6d5'; +} + +.el-icon-sold-out:before { + content: '\e6d6'; +} + +.el-icon-shopping-bag-2:before { + content: '\e74d'; +} + +.el-icon-shopping-bag-1:before { + content: '\e74e'; +} + +.el-icon-shopping-cart-2:before { + content: '\e74f'; +} + +.el-icon-shopping-cart-1:before { + content: '\e750'; +} + +.el-icon-shopping-cart-full:before { + content: '\e751'; +} + +.el-icon-smoking:before { + content: '\e752'; +} + +.el-icon-no-smoking:before { + content: '\e753'; +} + +.el-icon-house:before { + content: '\e754'; +} + +.el-icon-table-lamp:before { + content: '\e755'; +} + +.el-icon-school:before { + content: '\e756'; +} + +.el-icon-office-building:before { + content: '\e757'; +} + +.el-icon-toilet-paper:before { + content: '\e758'; +} + +.el-icon-notebook-2:before { + content: '\e759'; +} + +.el-icon-notebook-1:before { + content: '\e75a'; +} + +.el-icon-files:before { + content: '\e75b'; +} + +.el-icon-collection:before { + content: '\e75c'; +} + +.el-icon-receiving:before { + content: '\e75d'; +} + +.el-icon-suitcase-1:before { + content: '\e760'; +} + +.el-icon-suitcase:before { + content: '\e761'; +} + +.el-icon-film:before { + content: '\e763'; +} + +.el-icon-collection-tag:before { + content: '\e765'; +} + +.el-icon-data-analysis:before { + content: '\e766'; +} + +.el-icon-pie-chart:before { + content: '\e767'; +} + +.el-icon-data-board:before { + content: '\e768'; +} + +.el-icon-data-line:before { + content: '\e76d'; +} + +.el-icon-reading:before { + content: '\e769'; +} + +.el-icon-magic-stick:before { + content: '\e76a'; +} + +.el-icon-coordinate:before { + content: '\e76b'; +} + +.el-icon-mouse:before { + content: '\e76c'; +} + +.el-icon-brush:before { + content: '\e76e'; +} + +.el-icon-headset:before { + content: '\e76f'; +} + +.el-icon-umbrella:before { + content: '\e770'; +} + +.el-icon-scissors:before { + content: '\e771'; +} + +.el-icon-mobile:before { + content: '\e773'; +} + +.el-icon-attract:before { + content: '\e774'; +} + +.el-icon-monitor:before { + content: '\e775'; +} + +.el-icon-search:before { + content: '\e778'; +} + +.el-icon-takeaway-box:before { + content: '\e77a'; +} + +.el-icon-paperclip:before { + content: '\e77d'; +} + +.el-icon-printer:before { + content: '\e77e'; +} + +.el-icon-document-add:before { + content: '\e782'; +} + +.el-icon-document:before { + content: '\e785'; +} + +.el-icon-document-checked:before { + content: '\e786'; +} + +.el-icon-document-copy:before { + content: '\e787'; +} + +.el-icon-document-delete:before { + content: '\e788'; +} + +.el-icon-document-remove:before { + content: '\e789'; +} + +.el-icon-tickets:before { + content: '\e78b'; +} + +.el-icon-folder-checked:before { + content: '\e77f'; +} + +.el-icon-folder-delete:before { + content: '\e780'; +} + +.el-icon-folder-remove:before { + content: '\e781'; +} + +.el-icon-folder-add:before { + content: '\e783'; +} + +.el-icon-folder-opened:before { + content: '\e784'; +} + +.el-icon-folder:before { + content: '\e78a'; +} + +.el-icon-edit-outline:before { + content: '\e764'; +} + +.el-icon-edit:before { + content: '\e78c'; +} + +.el-icon-date:before { + content: '\e78e'; +} + +.el-icon-c-scale-to-original:before { + content: '\e7c6'; +} + +.el-icon-view:before { + content: '\e6ce'; +} + +.el-icon-loading:before { + content: '\e6cf'; +} + +.el-icon-rank:before { + content: '\e6d1'; +} + +.el-icon-sort-down:before { + content: '\e7c4'; +} + +.el-icon-sort-up:before { + content: '\e7c5'; +} + +.el-icon-sort:before { + content: '\e6d2'; +} + +.el-icon-finished:before { + content: '\e6cd'; +} + +.el-icon-refresh-left:before { + content: '\e6c7'; +} + +.el-icon-refresh-right:before { + content: '\e6c8'; +} + +.el-icon-refresh:before { + content: '\e6d0'; +} + +.el-icon-video-play:before { + content: '\e7c0'; +} + +.el-icon-video-pause:before { + content: '\e7c1'; +} + +.el-icon-d-arrow-right:before { + content: '\e6dc'; +} + +.el-icon-d-arrow-left:before { + content: '\e6dd'; +} + +.el-icon-arrow-up:before { + content: '\e6e1'; +} + +.el-icon-arrow-down:before { + content: '\e6df'; +} + +.el-icon-arrow-right:before { + content: '\e6e0'; +} + +.el-icon-arrow-left:before { + content: '\e6de'; +} + +.el-icon-top-right:before { + content: '\e6e7'; +} + +.el-icon-top-left:before { + content: '\e6e8'; +} + +.el-icon-top:before { + content: '\e6e6'; +} + +.el-icon-bottom:before { + content: '\e6eb'; +} + +.el-icon-right:before { + content: '\e6e9'; +} + +.el-icon-back:before { + content: '\e6ea'; +} + +.el-icon-bottom-right:before { + content: '\e6ec'; +} + +.el-icon-bottom-left:before { + content: '\e6ed'; +} + +.el-icon-caret-top:before { + content: '\e78f'; +} + +.el-icon-caret-bottom:before { + content: '\e790'; +} + +.el-icon-caret-right:before { + content: '\e791'; +} + +.el-icon-caret-left:before { + content: '\e792'; +} + +.el-icon-d-caret:before { + content: '\e79a'; +} + +.el-icon-share:before { + content: '\e793'; +} + +.el-icon-menu:before { + content: '\e798'; +} + +.el-icon-s-grid:before { + content: '\e7a6'; +} + +.el-icon-s-check:before { + content: '\e7a7'; +} + +.el-icon-s-data:before { + content: '\e7a8'; +} + +.el-icon-s-opportunity:before { + content: '\e7aa'; +} + +.el-icon-s-custom:before { + content: '\e7ab'; +} + +.el-icon-s-claim:before { + content: '\e7ad'; +} + +.el-icon-s-finance:before { + content: '\e7ae'; +} + +.el-icon-s-comment:before { + content: '\e7af'; +} + +.el-icon-s-flag:before { + content: '\e7b0'; +} + +.el-icon-s-marketing:before { + content: '\e7b1'; +} + +.el-icon-s-shop:before { + content: '\e7b4'; +} + +.el-icon-s-open:before { + content: '\e7b5'; +} + +.el-icon-s-management:before { + content: '\e7b6'; +} + +.el-icon-s-ticket:before { + content: '\e7b7'; +} + +.el-icon-s-release:before { + content: '\e7b8'; +} + +.el-icon-s-home:before { + content: '\e7b9'; +} + +.el-icon-s-promotion:before { + content: '\e7ba'; +} + +.el-icon-s-operation:before { + content: '\e7bb'; +} + +.el-icon-s-unfold:before { + content: '\e7bc'; +} + +.el-icon-s-fold:before { + content: '\e7a9'; +} + +.el-icon-s-platform:before { + content: '\e7bd'; +} + +.el-icon-s-order:before { + content: '\e7be'; +} + +.el-icon-s-cooperation:before { + content: '\e7bf'; +} + +.el-icon-bell:before { + content: '\e725'; +} + +.el-icon-message-solid:before { + content: '\e799'; +} + +.el-icon-video-camera:before { + content: '\e772'; +} + +.el-icon-video-camera-solid:before { + content: '\e796'; +} + +.el-icon-camera:before { + content: '\e779'; +} + +.el-icon-camera-solid:before { + content: '\e79b'; +} + +.el-icon-download:before { + content: '\e77c'; +} + +.el-icon-upload2:before { + content: '\e77b'; +} + +.el-icon-upload:before { + content: '\e7c3'; +} + +.el-icon-picture-outline-round:before { + content: '\e75f'; +} + +.el-icon-picture-outline:before { + content: '\e75e'; +} + +.el-icon-picture:before { + content: '\e79f'; +} + +.el-icon-close:before { + content: '\e6db'; +} + +.el-icon-check:before { + content: '\e6da'; +} + +.el-icon-plus:before { + content: '\e6d9'; +} + +.el-icon-minus:before { + content: '\e6d8'; +} + +.el-icon-help:before { + content: '\e73d'; +} + +.el-icon-s-help:before { + content: '\e7b3'; +} + +.el-icon-circle-close:before { + content: '\e78d'; +} + +.el-icon-circle-check:before { + content: '\e720'; +} + +.el-icon-circle-plus-outline:before { + content: '\e723'; +} + +.el-icon-remove-outline:before { + content: '\e722'; +} + +.el-icon-zoom-out:before { + content: '\e776'; +} + +.el-icon-zoom-in:before { + content: '\e777'; +} + +.el-icon-error:before { + content: '\e79d'; +} + +.el-icon-success:before { + content: '\e79c'; +} + +.el-icon-circle-plus:before { + content: '\e7a0'; +} + +.el-icon-remove:before { + content: '\e7a2'; +} + +.el-icon-info:before { + content: '\e7a1'; +} + +.el-icon-question:before { + content: '\e7a4'; +} + +.el-icon-warning-outline:before { + content: '\e6c9'; +} + +.el-icon-warning:before { + content: '\e7a3'; +} + +.el-icon-goods:before { + content: '\e7c2'; +} + +.el-icon-s-goods:before { + content: '\e7b2'; +} + +.el-icon-star-off:before { + content: '\e717'; +} + +.el-icon-star-on:before { + content: '\e797'; +} + +.el-icon-more-outline:before { + content: '\e6cc'; +} + +.el-icon-more:before { + content: '\e794'; +} + +.el-icon-phone-outline:before { + content: '\e6cb'; +} + +.el-icon-phone:before { + content: '\e795'; +} + +.el-icon-user:before { + content: '\e6e3'; +} + +.el-icon-user-solid:before { + content: '\e7a5'; +} + +.el-icon-setting:before { + content: '\e6ca'; +} + +.el-icon-s-tools:before { + content: '\e7ac'; +} + +.el-icon-delete:before { + content: '\e6d7'; +} + +.el-icon-delete-solid:before { + content: '\e7c9'; +} + +.el-icon-eleme:before { + content: '\e7c7'; +} + +.el-icon-platform-eleme:before { + content: '\e7ca'; +} + +.el-icon-loading { + animation: rotating 2s linear infinite; +} + +.el-icon--right { + margin-left: 5px; +} +.el-icon--left { + margin-right: 5px; +} + +@keyframes rotating { + 0% { + transform: rotateZ(0deg); + } + 100% { + transform: rotateZ(360deg); + } +} diff --git a/packages/design-system/theme/src/image.scss b/packages/design-system/theme/src/image.scss new file mode 100644 index 0000000000..a60c853beb --- /dev/null +++ b/packages/design-system/theme/src/image.scss @@ -0,0 +1,176 @@ +@use "mixins/mixins"; +@use "./common/var"; + +%size { + width: 100%; + height: 100%; +} + +@include mixins.b(image) { + position: relative; + display: inline-block; + overflow: hidden; + + @include mixins.e(inner) { + @extend %size; + vertical-align: top; + + @include mixins.m(center) { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: block; + } + } + + @include mixins.e(placeholder) { + @extend %size; + background: var.$background-color-base; + } + + @include mixins.e(error) { + @extend %size; + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + background: var.$background-color-base; + color: var(--color-text-lighter); + vertical-align: middle; + } + + @include mixins.e(preview) { + cursor: pointer; + } +} + +@include mixins.b(image-viewer) { + @include mixins.e(wrapper) { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + @include mixins.e(btn) { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + opacity: 0.8; + cursor: pointer; + box-sizing: border-box; + user-select: none; + } + + @include mixins.e(close) { + top: 40px; + right: 40px; + width: 40px; + height: 40px; + font-size: 24px; + color: #fff; + background-color: #606266; + } + + @include mixins.e(canvas) { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + @include mixins.e(actions) { + left: 50%; + bottom: 30px; + transform: translateX(-50%); + width: 282px; + height: 44px; + padding: 0 23px; + background-color: #606266; + border-color: #fff; + border-radius: 22px; + + @include mixins.e(actions__inner) { + width: 100%; + height: 100%; + text-align: justify; + cursor: default; + font-size: 23px; + color: #fff; + display: flex; + align-items: center; + justify-content: space-around; + } + } + + @include mixins.e(prev) { + top: 50%; + transform: translateY(-50%); + width: 44px; + height: 44px; + font-size: 24px; + color: #fff; + background-color: #606266; + border-color: #fff; + left: 40px; + } + + @include mixins.e(next) { + top: 50%; + transform: translateY(-50%); + width: 44px; + height: 44px; + font-size: 24px; + color: #fff; + background-color: #606266; + border-color: #fff; + right: 40px; + text-indent: 2px; + } + + @include mixins.e(mask) { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + opacity: 0.5; + background: #000; + } +} + +.viewer-fade-enter-active { + animation: viewer-fade-in 0.3s; +} + +.viewer-fade-leave-active { + animation: viewer-fade-out 0.3s; +} + +@keyframes viewer-fade-in { + 0% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } + 100% { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes viewer-fade-out { + 0% { + transform: translate3d(0, 0, 0); + opacity: 1; + } + 100% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } +} diff --git a/packages/design-system/theme/src/index.scss b/packages/design-system/theme/src/index.scss new file mode 100644 index 0000000000..353317e1c3 --- /dev/null +++ b/packages/design-system/theme/src/index.scss @@ -0,0 +1,83 @@ +@use "./tokens.scss"; +@use "./tokens.dark.scss" as dark; +@use "./reset.scss"; +@use "./base.scss"; +// @use "./pagination.scss"; +@use "./dialog.scss"; +// @use "./autocomplete.scss"; +@use "./dropdown.scss"; +@use "./dropdown-menu.scss"; +@use "./dropdown-item.scss"; +@use "./menu.scss"; +@use "./submenu.scss"; +@use "./menu-item.scss"; +// @use "./menu-item-group.scss"; +@use "./input.scss"; +@use "./input-number.scss"; +@use "./radio.scss"; +@use "./radio-group.scss"; +@use "./radio-button.scss"; +@use "./checkbox.scss"; +// @use "./checkbox-button.scss"; +// @use "./checkbox-group.scss"; +@use "./switch.scss"; +@use "./select.scss"; +@use "./button.scss"; +// @use "./button-group.scss"; +@use "./table.scss"; +@use "./table-column.scss"; +@use "./date-picker.scss"; +// @use "./time-select.scss"; +// @use "./time-picker.scss"; +@use "./popover.scss"; +@use "./tooltip.scss"; +@use "./message-box.scss"; +// @use "./breadcrumb.scss"; +// @use "./breadcrumb-item.scss"; +@use "./form.scss"; +@use "./form-item.scss"; +@use "./tabs.scss"; +@use "./tab-pane.scss"; +@use "./tag.scss"; +// @use "./tree.scss"; +@use "./alert.scss"; +@use "./notification.scss"; +// @use "./slider.scss"; +@use "./loading.scss"; +@use "./row.scss"; +@use "./col.scss"; +// @use "./upload.scss"; +// @use "./progress.scss"; +// @use "./spinner.scss"; +// @use "./message.scss"; +@use "./badge.scss"; +@use "./card.scss"; +// @use "./rate.scss"; +// @use "./steps.scss"; +// @use "./step.scss"; +// @use "./carousel.scss"; +// @use "./scrollbar.scss"; +// @use "./carousel-item.scss"; +// @use "./collapse.scss"; +// @use "./collapse-item.scss"; +// @use "./cascader.scss"; +@use "./color-picker.scss"; +@use "./transfer.scss"; +@use "./container.scss"; +// @use "./header.scss"; +// @use "./aside.scss"; +// @use "./main.scss"; +// @use "./footer.scss"; +// @use "./timeline.scss"; +// @use "./timeline-item.scss"; +// @use "./link.scss"; +// @use "./divider.scss"; +// @use "./image.scss"; +// @use "./calendar.scss"; +// @use "./backtop.scss"; +// @use "./infinite-scroll.scss"; +// @use "./page-header.scss"; +// @use "./cascader-panel.scss"; +// @use "./avatar.scss"; +@use "./drawer.scss"; +// @use "./popconfirm.scss"; diff --git a/packages/design-system/theme/src/infinite-scroll.scss b/packages/design-system/theme/src/infinite-scroll.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/infiniteScroll.scss b/packages/design-system/theme/src/infiniteScroll.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/input-number.scss b/packages/design-system/theme/src/input-number.scss new file mode 100644 index 0000000000..9509f77681 --- /dev/null +++ b/packages/design-system/theme/src/input-number.scss @@ -0,0 +1,181 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "input"; + +@include mixins.b(input-number) { + position: relative; + display: inline-block; + line-height: #{var.$input-height - 2}; + width: 100%; + + .el-input { + display: block; + + &__inner { + -webkit-appearance: none; + padding-left: #{var.$input-height + 10}; + padding-right: #{var.$input-height + 10}; + text-align: center; + } + } + + @include mixins.e((increase, decrease)) { + position: absolute; + z-index: 1; + top: 1px; + width: var.$input-height; + height: auto; + text-align: center; + background: var.$background-color-base; + color: var(--color-text-dark); + cursor: pointer; + font-size: 13px; + + &:hover { + color: var(--color-primary); + + &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) { + border-color: var.$input-focus-border; + } + } + + &.is-disabled { + color: var.$disabled-color-base; + cursor: not-allowed; + } + } + + @include mixins.e(increase) { + right: 1px; + border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; + border-left: var(--border-base); + } + + @include mixins.e(decrease) { + left: 1px; + border-radius: var(--border-radius-base) 0 0 var(--border-radius-base); + border-right: var(--border-base); + } + + @include mixins.when(disabled) { + @include mixins.e((increase, decrease)) { + border-color: var.$disabled-border-base; + color: var.$disabled-border-base; + + &:hover { + color: var.$disabled-border-base; + cursor: not-allowed; + } + } + } + + @include mixins.m(medium) { + line-height: #{var.$input-medium-height - 2}; + + @include mixins.e((increase, decrease)) { + width: var.$input-medium-height; + font-size: var.$input-medium-font-size; + } + + .el-input__inner { + padding-left: #{var.$input-medium-height + 7}; + padding-right: #{var.$input-medium-height + 7}; + } + } + + @include mixins.m(small) { + line-height: #{var.$input-small-height - 2}; + + @include mixins.e((increase, decrease)) { + width: var.$input-small-height; + font-size: var.$input-small-font-size; + + [class*='el-icon'] { + transform: scale(0.9); + } + } + + .el-input__inner { + padding-left: #{var.$input-small-height + 7}; + padding-right: #{var.$input-small-height + 7}; + } + } + + @include mixins.m(mini) { + line-height: #{var.$input-mini-height - 2}; + + @include mixins.e((increase, decrease)) { + width: var.$input-mini-height; + font-size: var.$input-mini-font-size; + + [class*='el-icon'] { + transform: scale(0.8); + } + } + + .el-input__inner { + padding-left: #{var.$input-mini-height + 7}; + padding-right: #{var.$input-mini-height + 7}; + } + } + + @include mixins.when(without-controls) { + .el-input__inner { + text-align: left; + padding-left: 12px; + padding-right: 12px; + } + } + + @include mixins.when(controls-right) { + .el-input__inner { + padding-left: 15px; + padding-right: #{var.$input-height + 10}; + } + + @include mixins.e((increase, decrease)) { + height: auto; + line-height: #{(var.$input-height - 2) * 0.5}; + + [class*='el-icon'] { + transform: scale(0.8); + } + } + + @include mixins.e(increase) { + border-radius: 0 var(--border-radius-base) 0 0; + border-bottom: var(--border-base); + } + + @include mixins.e(decrease) { + right: 1px; + bottom: 1px; + top: auto; + left: auto; + border-right: none; + border-left: var(--border-base); + border-radius: 0 0 var(--border-radius-base) 0; + } + + &[class*='medium'] { + [class*='increase'], + [class*='decrease'] { + line-height: #{(var.$input-medium-height - 2) * 0.5}; + } + } + + &[class*='small'] { + [class*='increase'], + [class*='decrease'] { + line-height: #{(var.$input-small-height - 2) * 0.5}; + } + } + + &[class*='mini'] { + [class*='increase'], + [class*='decrease'] { + line-height: #{(var.$input-mini-height - 2) * 0.5}; + } + } + } +} diff --git a/packages/design-system/theme/src/input.scss b/packages/design-system/theme/src/input.scss new file mode 100644 index 0000000000..1264833936 --- /dev/null +++ b/packages/design-system/theme/src/input.scss @@ -0,0 +1,356 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(textarea) { + position: relative; + display: inline-block; + width: 100%; + vertical-align: bottom; + font-size: var.$font-size-base; + + @include mixins.e(inner) { + display: block; + resize: vertical; + padding: 8px 12px 5px 12px; + line-height: 1.5; + box-sizing: border-box; + width: 100%; + font-size: inherit; + color: var.$input-font-color; + background-color: var.$input-background-color; + background-image: none; + border-radius: var.$input-border-radius; + transition: var.$border-transition-base; + + &, + &:hover { + border: var.$input-border; + } + + &::placeholder { + color: var.$input-placeholder-color; + } + + &:focus { + outline: none; + border-color: var.$input-focus-border; + } + } + + & .el-input__count { + color: var(--color-info); + background: var.$color-white; + position: absolute; + font-size: 12px; + bottom: 5px; + right: 10px; + } + + @include mixins.when(disabled) { + .el-textarea__inner { + background-color: var.$input-disabled-fill; + border-color: var.$input-disabled-border; + color: var.$input-disabled-color; + cursor: not-allowed; + + &::placeholder { + color: var.$input-disabled-placeholder-color; + } + } + } + + @include mixins.when(exceed) { + .el-textarea__inner { + border-color: var(--color-danger); + } + + .el-input__count { + color: var(--color-danger); + } + } +} + +@include mixins.b(input) { + position: relative; + font-size: var.$input-font-size; + display: inline-block; + width: 100%; + @include mixins.scroll-bar; + + & .el-input__clear { + color: var.$input-clear-color; + font-size: var.$input-font-size; + cursor: pointer; + transition: var.$color-transition-base; + + &:hover { + color: var.$input-clear-hover-color; + } + } + + & .el-input__count { + height: 100%; + display: inline-flex; + align-items: center; + color: var(--color-info); + font-size: 12px; + + .el-input__count-inner { + background: var.$color-white; + line-height: initial; + display: inline-block; + padding: 0 5px; + } + } + + @include mixins.e(inner) { + -webkit-appearance: none; + background-color: var.$input-background-color; + background-image: none; + border-radius: var.$input-border-radius; + border: var.$input-border; + box-sizing: border-box; + color: var.$input-font-color; + display: inline-block; + font-size: inherit; + height: var.$input-height; + line-height: var.$input-height; + outline: none; + padding: 0 var(--spacing-xs); + transition: var.$border-transition-base; + width: 100%; + + &::placeholder { + color: var.$input-placeholder-color; + } + + &:focus { + outline: none; + border-color: var.$input-focus-border; + } + } + + @include mixins.e(suffix) { + position: absolute; + height: 100%; + right: 10px; + top: 0; + text-align: center; + color: var(--color-text-light); + transition: all 0.3s; + pointer-events: none; + display: flex; + align-items: center; + } + + @include mixins.e(suffix-inner) { + pointer-events: all; + } + + @include mixins.e(prefix) { + position: absolute; + height: 100%; + left: 14px; + top: 0; + text-align: center; + color: var.$input-icon-color; + transition: all 0.3s; + display: flex; + align-items: center; + } + + @include mixins.e(icon) { + height: 100%; + text-align: center; + transition: all 0.3s; + line-height: var.$input-height; + + &:after { + content: ''; + height: 100%; + width: 0; + display: inline-block; + vertical-align: middle; + } + } + + @include mixins.e(validateIcon) { + pointer-events: none; + } + + @include mixins.when(active) { + .el-input__inner { + outline: none; + border-color: var.$input-focus-border; + } + } + + @include mixins.when(disabled) { + .el-input__inner { + background-color: var.$input-disabled-fill; + border-color: var.$input-disabled-border; + color: var.$input-disabled-color; + cursor: not-allowed; + + &::placeholder { + color: var.$input-disabled-placeholder-color; + } + } + + .el-input__icon { + cursor: not-allowed; + } + } + + @include mixins.when(exceed) { + .el-input__inner { + border-color: var(--color-danger); + } + + .el-input__suffix { + .el-input__count { + color: var(--color-danger); + } + } + } + + @include mixins.m(suffix) { + .el-input__inner { + padding-right: 30px; + } + } + + @include mixins.m(prefix) { + .el-input__inner { + padding-left: 37px; + } + } + + @include mixins.m(medium) { + font-size: var.$input-medium-font-size; + + @include mixins.e(inner) { + height: var.$input-medium-height; + line-height: var.$input-medium-height; + } + + .el-input__icon { + line-height: var.$input-medium-height; + } + } + @include mixins.m(small) { + font-size: var.$input-small-font-size; + + @include mixins.e(inner) { + height: var.$input-small-height; + line-height: var.$input-small-height; + } + + .el-input__icon { + line-height: var.$input-small-height; + } + } + @include mixins.m(mini) { + font-size: var.$input-mini-font-size; + + @include mixins.e(inner) { + height: var.$input-mini-height; + line-height: var.$input-mini-height; + } + + .el-input__icon { + line-height: var.$input-mini-height; + } + } +} + +@include mixins.b(input-group) { + line-height: normal; + display: inline-table; + width: 100%; + border-collapse: separate; + border-spacing: 0; + + > .el-input__inner { + vertical-align: middle; + display: table-cell; + } + + @include mixins.e((append, prepend)) { + background-color: var.$background-color-base; + color: var(--color-info); + vertical-align: middle; + display: table-cell; + position: relative; + border: var(--border-base); + border-radius: var.$input-border-radius; + padding: 0 10px; + width: 1px; + white-space: nowrap; + font-weight: var(--font-weight-regular); + + &:focus { + outline: none; + } + + .el-select, + .el-button { + display: inline-block; + margin: -10px -20px; + } + + button.el-button, + div.el-select .el-input__inner, + div.el-select:hover .el-input__inner { + border-color: transparent; + background-color: transparent; + color: inherit; + border-top: 0; + border-bottom: 0; + } + + .el-button, + .el-input { + font-size: inherit; + } + } + + @include mixins.e(prepend) { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + @include mixins.e(append) { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + @include mixins.m(prepend) { + .el-input__inner { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; + } + } + + @include mixins.m(append) { + .el-input__inner { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .el-select .el-input.is-focus .el-input__inner { + border-color: transparent; + } + } +} + +/** disalbe default clear on IE */ +.el-input__inner::-ms-clear { + display: none; + width: 0; + height: 0; +} diff --git a/packages/design-system/theme/src/link.scss b/packages/design-system/theme/src/link.scss new file mode 100644 index 0000000000..44051a781e --- /dev/null +++ b/packages/design-system/theme/src/link.scss @@ -0,0 +1,80 @@ +@use "mixins/mixins"; +@use "./common/var"; + +$typeMap: ( + primary: var.$link-primary-font-color, + danger: var.$link-danger-font-color, + success: var.$link-success-font-color, + warning: var.$link-warning-font-color, + info: var.$link-info-font-color, +); + +@include mixins.b(link) { + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; + vertical-align: middle; + position: relative; + text-decoration: none; + outline: none; + cursor: pointer; + padding: 0; + font-size: var.$link-font-size; + font-weight: var.$link-font-weight; + + @include mixins.when(underline) { + &:hover:after { + content: ''; + position: absolute; + left: 0; + right: 0; + height: 0; + bottom: 0; + border-bottom: 1px solid var.$link-default-active-color; + } + } + + @include mixins.when(disabled) { + cursor: not-allowed; + } + + & [class*='el-icon-'] { + & + span { + margin-left: 5px; + } + } + + &.el-link--default { + color: var.$link-default-font-color; + &:hover { + color: var.$link-default-active-color; + } + &:after { + border-color: var.$link-default-active-color; + } + @include mixins.when(disabled) { + color: var.$link-disabled-font-color; + } + } + + @each $type, $primaryColor in $typeMap { + &.el-link--#{$type} { + color: $primaryColor; + &:hover { + color: var.$color-primary-light-3; + } + &:after { + border-color: $primaryColor; + } + @include mixins.when(disabled) { + color: var.$color-primary-light-6; + } + @include mixins.when(underline) { + &:hover:after { + border-color: $primaryColor; + } + } + } + } +} diff --git a/packages/design-system/theme/src/loading.scss b/packages/design-system/theme/src/loading.scss new file mode 100644 index 0000000000..2bf4e20d78 --- /dev/null +++ b/packages/design-system/theme/src/loading.scss @@ -0,0 +1,96 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(loading-parent) { + @include mixins.m(relative) { + position: relative !important; + } + + @include mixins.m(hidden) { + overflow: hidden !important; + } +} + +@include mixins.b(loading-mask) { + position: absolute; + z-index: 2000; + background-color: rgba(255, 255, 255, 0.9); + margin: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + transition: opacity 0.3s; + + @include mixins.when(fullscreen) { + position: fixed; + + .el-loading-spinner { + margin-top: #{- var.$loading-fullscreen-spinner-size * 0.5}; + + .circular { + height: var.$loading-fullscreen-spinner-size; + width: var.$loading-fullscreen-spinner-size; + } + } + } +} + +@include mixins.b(loading-spinner) { + top: 50%; + margin-top: #{- var.$loading-spinner-size * 0.5}; + width: 100%; + text-align: center; + position: absolute; + + .el-loading-text { + color: var(--color-primary); + margin: 3px 0; + font-size: 14px; + } + + .circular { + height: var.$loading-spinner-size; + width: var.$loading-spinner-size; + animation: loading-rotate 2s linear infinite; + } + + .path { + animation: loading-dash 1.5s ease-in-out infinite; + stroke-dasharray: 90, 150; + stroke-dashoffset: 0; + stroke-width: 2; + stroke: var(--color-primary); + stroke-linecap: round; + } + + i { + color: var(--color-primary); + } +} + +.el-loading-fade-enter, +.el-loading-fade-leave-active { + opacity: 0; +} + +@keyframes loading-rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes loading-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -40px; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -120px; + } +} diff --git a/packages/design-system/theme/src/main.scss b/packages/design-system/theme/src/main.scss new file mode 100644 index 0000000000..ad71cd7f03 --- /dev/null +++ b/packages/design-system/theme/src/main.scss @@ -0,0 +1,12 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(main) { + // IE11 supports the
element partially https://caniuse.com/#search=main + display: block; + flex: 1; + flex-basis: auto; + overflow: auto; + box-sizing: border-box; + padding: var.$main-padding; +} diff --git a/packages/design-system/theme/src/menu-item-group.scss b/packages/design-system/theme/src/menu-item-group.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/menu-item.scss b/packages/design-system/theme/src/menu-item.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/menu.scss b/packages/design-system/theme/src/menu.scss new file mode 100644 index 0000000000..24fc102549 --- /dev/null +++ b/packages/design-system/theme/src/menu.scss @@ -0,0 +1,289 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "./common/var"; +@use "common/transition"; + +@mixin menu-item { + height: 56px; + line-height: 56px; + font-size: var.$menu-item-font-size; + color: var.$menu-item-font-color; + padding: 0 20px; + list-style: none; + cursor: pointer; + position: relative; + transition: border-color 0.3s, background-color 0.3s, color 0.3s; + box-sizing: border-box; + white-space: nowrap; + + * { + vertical-align: middle; + } + + i { + color: var(--color-text-light); + } + + &:hover, + &:focus { + outline: none; + background-color: var.$menu-item-hover-fill; + } + + @include mixins.when(disabled) { + opacity: 0.25; + cursor: not-allowed; + background: none !important; + } +} + +@include mixins.b(menu) { + border-right: solid 1px #e6e6e6; + list-style: none; + position: relative; + margin: 0; + padding-left: 0; + background-color: var.$menu-background-color; + @include utils.utils-clearfix; + &.el-menu--horizontal { + border-bottom: solid 1px #e6e6e6; + } + + @include mixins.m(horizontal) { + border-right: none; + & > .el-menu-item { + float: left; + height: 60px; + line-height: 60px; + margin: 0; + border-bottom: 2px solid transparent; + color: var(--color-text-light); + + a, + a:hover { + color: inherit; + } + + &:not(.is-disabled):hover, + &:not(.is-disabled):focus { + background-color: #fff; + } + } + & > .el-submenu { + float: left; + + &:focus, + &:hover { + outline: none; + .el-submenu__title { + color: var(--color-text-dark); + } + } + + &.is-active { + .el-submenu__title { + border-bottom: 2px solid var(--color-primary); + color: var(--color-text-dark); + } + } + + & .el-submenu__title { + height: 60px; + line-height: 60px; + border-bottom: 2px solid transparent; + color: var(--color-text-light); + + &:hover { + background-color: #fff; + } + } + & .el-submenu__icon-arrow { + position: static; + vertical-align: middle; + margin-left: 8px; + margin-top: -3px; + } + } + & .el-menu { + & .el-menu-item, + & .el-submenu__title { + background-color: var.$color-white; + float: none; + height: 36px; + line-height: 36px; + padding: 0 10px; + color: var(--color-text-light); + } + & .el-menu-item.is-active, + & .el-submenu.is-active > .el-submenu__title { + color: var(--color-text-dark); + } + } + & .el-menu-item:not(.is-disabled):hover, + & .el-menu-item:not(.is-disabled):focus { + outline: none; + color: var(--color-text-dark); + } + & > .el-menu-item.is-active { + border-bottom: 2px solid var(--color-primary); + color: var(--color-text-dark); + } + } + @include mixins.m(collapse) { + width: 64px; + + > .el-menu-item, + > .el-submenu > .el-submenu__title { + [class^='el-icon-'] { + margin: 0; + vertical-align: middle; + width: 24px; + text-align: center; + } + .el-submenu__icon-arrow { + display: none; + } + span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + + > .el-menu-item.is-active i { + color: inherit; + } + + .el-menu .el-submenu { + min-width: 200px; + } + + .el-submenu { + position: relative; + & .el-menu { + position: absolute; + margin-left: 5px; + top: 0; + left: 100%; + z-index: 10; + border: 1px solid var(--border-color-base); + border-radius: var(--border-radius-small); + box-shadow: var.$box-shadow-light; + } + + &.is-opened { + > .el-submenu__title .el-submenu__icon-arrow { + transform: none; + } + } + } + } + @include mixins.m(popup) { + z-index: 100; + min-width: 200px; + border: none; + padding: 5px 0; + border-radius: var(--border-radius-small); + box-shadow: var.$box-shadow-light; + + &-bottom-start { + margin-top: 5px; + } + &-right-start { + margin-left: 5px; + margin-right: 5px; + } + } +} +@include mixins.b(menu-item) { + @include menu-item; + + & [class^='el-icon-'] { + margin-right: 5px; + width: 24px; + text-align: center; + font-size: 18px; + vertical-align: middle; + } + @include mixins.when(active) { + color: var(--color-primary); + i { + color: inherit; + } + } +} + +@include mixins.b(submenu) { + list-style: none; + margin: 0; + padding-left: 0; + + @include mixins.e(title) { + @include menu-item; + + &:hover { + background-color: var.$menu-item-hover-fill; + } + } + & .el-menu { + border: none; + } + & .el-menu-item { + height: 50px; + line-height: 50px; + padding: 0 45px; + min-width: 200px; + } + @include mixins.e(icon-arrow) { + position: absolute; + top: 50%; + right: 20px; + margin-top: -7px; + transition: transform 0.3s; + font-size: 12px; + } + @include mixins.when(active) { + .el-submenu__title { + border-bottom-color: var(--color-primary); + } + } + @include mixins.when(opened) { + > .el-submenu__title .el-submenu__icon-arrow { + transform: rotateZ(180deg); + } + } + @include mixins.when(disabled) { + .el-submenu__title, + .el-menu-item { + opacity: 0.25; + cursor: not-allowed; + background: none !important; + } + } + [class^='el-icon-'] { + vertical-align: middle; + margin-right: 5px; + width: 24px; + text-align: center; + font-size: 18px; + } +} + +@include mixins.b(menu-item-group) { + > ul { + padding: 0; + } + @include mixins.e(title) { + padding: 7px 0 7px 20px; + line-height: normal; + font-size: 12px; + color: var(--color-text-light); + } +} + +.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow { + transition: 0.2s; + opacity: 0; +} diff --git a/packages/design-system/theme/src/message-box.scss b/packages/design-system/theme/src/message-box.scss new file mode 100644 index 0000000000..06b83ab885 --- /dev/null +++ b/packages/design-system/theme/src/message-box.scss @@ -0,0 +1,237 @@ +@use "mixins/mixins"; +@use "mixins/button"; +@use "./common/var"; +@use "common/popup"; +@use "button" as buttons; +@use "input"; + +@include mixins.b(message-box) { + display: inline-block; + width: var.$msgbox-width; + padding-bottom: 10px; + vertical-align: middle; + background-color: var.$color-white; + border-radius: var.$msgbox-border-radius; + border: 1px solid var(--border-color-light); + font-size: var.$messagebox-font-size; + box-shadow: var.$box-shadow-light; + text-align: left; + overflow: hidden; + backface-visibility: hidden; + + @include mixins.e(wrapper) { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + text-align: center; + + &::after { + content: ''; + display: inline-block; + height: 100%; + width: 0; + vertical-align: middle; + } + } + + @include mixins.e(header) { + position: relative; + padding: var.$msgbox-padding-primary; + padding-bottom: 10px; + } + + @include mixins.e(title) { + padding-left: 0; + margin-bottom: 0; + font-size: var.$messagebox-font-size; + line-height: 1; + color: var.$messagebox-title-color; + } + + @include mixins.e(headerbtn) { + position: absolute; + top: var.$msgbox-padding-primary; + right: var.$msgbox-padding-primary; + padding: 0; + border: none; + outline: none; + background: transparent; + font-size: var.$message-close-size; + cursor: pointer; + + .el-message-box__close { + color: var(--color-info); + } + + &:focus, + &:hover { + .el-message-box__close { + color: var(--color-primary); + } + } + } + + @include mixins.e(content) { + padding: 10px var.$msgbox-padding-primary; + color: var.$messagebox-content-color; + font-size: var.$messagebox-content-font-size; + } + + @include mixins.e(container) { + position: relative; + } + + @include mixins.e(input) { + padding-top: 15px; + + & input.invalid { + border-color: var(--color-danger); + &:focus { + border-color: var(--color-danger); + } + } + } + + @include mixins.e(status) { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 24px !important; + + &::before { + // 防止图标切割 + padding-left: 1px; + } + + + .el-message-box__message { + padding-left: 36px; + padding-right: 12px; + } + + &.el-icon-success { + color: var.$messagebox-success-color; + } + + &.el-icon-info { + color: var.$messagebox-info-color; + } + + &.el-icon-warning { + color: var.$messagebox-warning-color; + } + + &.el-icon-error { + color: var.$messagebox-danger-color; + } + } + + @include mixins.e(message) { + margin: 0; + + & p { + margin: 0; + line-height: 24px; + } + } + + @include mixins.e(errormsg) { + color: var(--color-danger); + font-size: var.$messagebox-error-font-size; + min-height: 18px; + margin-top: 2px; + } + + @include mixins.e(btns) { + padding: 5px 15px 0; + text-align: right; + + & button { + margin-left: 10px; + } + + & .btn--confirm { + @include button.button-just-primary(); + @include button.button-medium(); + } + + & .btn--cancel { + @include button.button-outline(); + @include button.button-medium(); + } + } + + @include mixins.e(btns-reverse) { + flex-direction: row-reverse; + } + + // centerAlign 布局 + @include mixins.m(center) { + padding-bottom: 30px; + + @include mixins.e(header) { + padding-top: 30px; + } + + @include mixins.e(title) { + position: relative; + display: flex; + align-items: center; + justify-content: center; + } + + @include mixins.e(status) { + position: relative; + top: auto; + padding-right: 5px; + text-align: center; + transform: translateY(-1px); + } + + @include mixins.e(message) { + margin-left: 0; + } + + @include mixins.e((btns, content)) { + text-align: center; + } + + @include mixins.e(content) { + $padding-horizontal: var.$msgbox-padding-primary + 12px; + + padding-left: $padding-horizontal; + padding-right: $padding-horizontal; + } + } +} + +.msgbox-fade-enter-active { + animation: msgbox-fade-in 0.3s; +} + +.msgbox-fade-leave-active { + animation: msgbox-fade-out 0.3s; +} + +@keyframes msgbox-fade-in { + 0% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } + 100% { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes msgbox-fade-out { + 0% { + transform: translate3d(0, 0, 0); + opacity: 1; + } + 100% { + transform: translate3d(0, -20px, 0); + opacity: 0; + } +} diff --git a/packages/design-system/theme/src/message.scss b/packages/design-system/theme/src/message.scss new file mode 100644 index 0000000000..0ecffb84e7 --- /dev/null +++ b/packages/design-system/theme/src/message.scss @@ -0,0 +1,120 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(message) { + min-width: var.$message-min-width; + box-sizing: border-box; + border-radius: var(--border-radius-base); + border-width: var(--border-width-base); + border-style: var(--border-style-base); + border-color: var(--border-color-light); + position: fixed; + left: 50%; + top: 20px; + transform: translateX(-50%); + background-color: var.$message-background-color; + transition: opacity 0.3s, transform 0.4s, top 0.4s; + overflow: hidden; + padding: var.$message-padding; + display: flex; + align-items: center; + + @include mixins.when(center) { + justify-content: center; + } + + @include mixins.when(closable) { + .el-message__content { + padding-right: 16px; + } + } + + p { + margin: 0; + } + + @include mixins.m(info) { + .el-message__content { + color: var.$message-info-font-color; + } + } + + @include mixins.m(success) { + background-color: var.$color-success-lighter; + border-color: var.$color-success-light; + + .el-message__content { + color: var.$message-success-font-color; + } + } + + @include mixins.m(warning) { + background-color: var.$color-warning-lighter; + border-color: var.$color-warning-light; + + .el-message__content { + color: var.$message-warning-font-color; + } + } + + @include mixins.m(error) { + background-color: var.$color-danger-lighter; + border-color: var.$color-danger-light; + + .el-message__content { + color: var.$message-danger-font-color; + } + } + + @include mixins.e(icon) { + margin-right: 10px; + } + + @include mixins.e(content) { + padding: 0; + font-size: 14px; + line-height: 1; + &:focus { + outline-width: 0; + } + } + + @include mixins.e(closeBtn) { + position: absolute; + top: 50%; + right: 15px; + transform: translateY(-50%); + cursor: pointer; + color: var.$message-close-icon-color; + font-size: var.$message-close-size; + + &:focus { + outline-width: 0; + } + &:hover { + color: var.$message-close-hover-color; + } + } + + & .el-icon-success { + color: var.$message-success-font-color; + } + + & .el-icon-error { + color: var.$message-danger-font-color; + } + + & .el-icon-info { + color: var.$message-info-font-color; + } + + & .el-icon-warning { + color: var.$message-warning-font-color; + } +} + +.el-message-fade-enter, +.el-message-fade-leave-active { + opacity: 0; + transform: translate(-50%, -100%); +} diff --git a/packages/design-system/theme/src/mixins/_button.scss b/packages/design-system/theme/src/mixins/_button.scss new file mode 100644 index 0000000000..35e7d8af6c --- /dev/null +++ b/packages/design-system/theme/src/mixins/_button.scss @@ -0,0 +1,170 @@ +@use "../common/var"; +@use './mixins'; +@use "function"; + +@mixin button-plain($color, $h, $s, $l) { + &, + &:focus, + &:hover { + color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); + background-color: var(--color-foreground-xlight); + border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); + } + + @include mixins.when(loading) { + color: function.lightness($h, $s, $l, var.$button-hover-tint-percent); + background-color: var(--color-foreground-xlight); + border-color: function.lightness( + $h, + $s, + $l, + var.$button-hover-tint-percent + ); + } + + &:active { + border-color: function.lightness( + $h, + $s, + $l, + -(var.$button-active-shade-percent) + ); + background-color: var(--color-foreground-xlight); + color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent)); + outline: none; + } + + &.is-disabled { + &, + &:hover, + &:focus, + &:active { + color: var(--color-text-light); + background-color: var(--color-foreground-xlight); + border-color: var(--color-foreground-base); + } + } +} + +@mixin button-variant( + $color, + $background-color, + $border-color, + $h, + $s, + $l, + $t, + $plain: true +) { + color: $color; + background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); + border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); + + &:active { + background: function.lightness( + $h, + $s, + $l, + -(var.$button-active-shade-percent) + ); + border-color: function.lightness( + $h, + $s, + $l, + -(var.$button-active-shade-percent) + ); + color: $color; + outline: none; + } + + &.is-active { + background: function.lightness( + $h, + $s, + $l, + -(var.$button-active-shade-percent) + ); + border-color: function.lightness( + $h, + $s, + $l, + -(var.$button-active-shade-percent) + ); + color: $color; + } + + &.is-light { + color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); + background-color: hsl(var(#{$h}), var(#{$s}), var(#{$t})); + border-color: hsl(var(#{$h}), var(#{$s}), var(#{$t})); + } + + &.is-disabled { + &, + &:hover, + &:focus, + &:active { + color: var(--color-text-light); + background-color: var(--color-foreground-base); + border-color: var(--color-foreground-base); + } + } + + @if $plain { + &.is-plain { + @include button-plain($background-color, $h, $s, $l); + } + } +} + +@mixin button-size($padding-vertical, $padding-horizontal, $font-size) { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + + &.is-round { + padding: $padding-vertical $padding-horizontal; + } +} + +@mixin button-round() { + --button-border-radius: 20px; +} + +// ignore plain overrides +@mixin button-just-primary() { + @include button-variant( + var.$button-primary-font-color, + var.$button-primary-background-color, + var.$button-primary-border-color, + --color-primary-h, + --color-primary-s, + --color-primary-l, + --color-primary-tint-2-l, + $plain: false + ); +} + +@mixin button-outline() { + @include button-plain( + var.$button-primary-background-color, + --color-primary-h, + --color-primary-s, + --color-primary-l + ); +} + +@mixin button-small() { + @include button-size( + var(--spacing-3xs), + var(--spacing-xs), + var(--font-size-2xs) + ); +} + +@mixin button-medium() { + @include button-size( + var(--spacing-2xs), + var(--spacing-xs), + var(--font-size-2xs) + ); +} diff --git a/packages/design-system/theme/src/mixins/config.scss b/packages/design-system/theme/src/mixins/config.scss new file mode 100644 index 0000000000..87e29b458c --- /dev/null +++ b/packages/design-system/theme/src/mixins/config.scss @@ -0,0 +1,4 @@ +$namespace: 'el'; +$element-separator: '__'; +$modifier-separator: '--'; +$state-prefix: 'is-'; diff --git a/packages/design-system/theme/src/mixins/function.scss b/packages/design-system/theme/src/mixins/function.scss new file mode 100644 index 0000000000..388f28d1ac --- /dev/null +++ b/packages/design-system/theme/src/mixins/function.scss @@ -0,0 +1,54 @@ +@use "sass:meta"; +@use "sass:string"; +@use "config"; + +/* BEM support Func + -------------------------- */ +@function selectorToString($selector) { + $selector: meta.inspect($selector); + $selector: string.slice($selector, 2, -2); + @return $selector; +} + +@function containsModifier($selector) { + $selector: selectorToString($selector); + + @if string.index($selector, config.$modifier-separator) { + @return true; + } @else { + @return false; + } +} + +@function containWhenFlag($selector) { + $selector: selectorToString($selector); + + @if string.index($selector, '.' + config.$state-prefix) { + @return true; + } @else { + @return false; + } +} + +@function containPseudoClass($selector) { + $selector: selectorToString($selector); + + @if string.index($selector, ':') { + @return true; + } @else { + @return false; + } +} + +@function hitAllSpecialNestRule($selector) { + @return containsModifier($selector) or containWhenFlag($selector) or + containPseudoClass($selector); +} + +@function lightness($h, $s, $l, $lightness) { + @return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness})); +} + +@function saturation($h, $s, $l, $saturation) { + @return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l})); +} diff --git a/packages/design-system/theme/src/mixins/mixins.scss b/packages/design-system/theme/src/mixins/mixins.scss new file mode 100644 index 0000000000..b13964a0bd --- /dev/null +++ b/packages/design-system/theme/src/mixins/mixins.scss @@ -0,0 +1,209 @@ +@use "sass:map"; +@use "sass:meta"; +@use "function"; +@use "../common/var"; +@use "config"; + +/* Break-points + -------------------------- */ +@mixin res($key, $map: var.$breakpoints) { + // 循环断点Map，如果存在则返回 + @if map.has-key($map, $key) { + @media only screen and #{meta.inspect(map.get($map, $key))} { + @content; + } + } @else { + @warn "Undefeined points: `#{$map}`"; + } +} + +/* Scrollbar + -------------------------- */ +@mixin scroll-bar { + $scrollbar-thumb-background: #b4bccc; + $scrollbar-track-background: #fff; + + &::-webkit-scrollbar { + z-index: 11; + width: 6px; + + &:horizontal { + height: 6px; + } + + &-thumb { + border-radius: 5px; + width: 6px; + background: $scrollbar-thumb-background; + } + + &-corner { + background: $scrollbar-track-background; + } + + &-track { + background: $scrollbar-track-background; + + &-piece { + background: $scrollbar-track-background; + width: 6px; + } + } + } +} + +/* Placeholder + -------------------------- */ +@mixin placeholder { + &::-webkit-input-placeholder { + @content; + } + + &::-moz-placeholder { + @content; + } + + &:-ms-input-placeholder { + @content; + } +} + +/* BEM + -------------------------- */ +@mixin b($block) { + $B: config.$namespace + '-' + $block !global; + + .#{$B} { + @content; + } +} + +@mixin e($element) { + $E: $element !global; + $selector: &; + $currentSelector: ''; + @each $unit in $element { + $currentSelector: #{$currentSelector + + '.' + + $B + + config.$element-separator + + $unit + + ','}; + } + + @if function.hitAllSpecialNestRule($selector) { + @at-root { + #{$selector} { + #{$currentSelector} { + @content; + } + } + } + } @else { + @at-root { + #{$currentSelector} { + @content; + } + } + } +} + +@mixin m($modifier) { + $selector: &; + $currentSelector: ''; + @each $unit in $modifier { + $currentSelector: #{$currentSelector + + & + + config.$modifier-separator + + $unit + + ','}; + } + + @at-root { + #{$currentSelector} { + @content; + } + } +} + +@mixin configurable-m($modifier, $E-flag: false) { + $selector: &; + $interpolation: ''; + + @if $E-flag { + $interpolation: config.$element-separator + $E-flag; + } + + @at-root { + #{$selector} { + .#{$B + $interpolation + config.$modifier-separator + $modifier} { + @content; + } + } + } +} + +@mixin spec-selector( + $specSelector: '', + $element: $E, + $modifier: false, + $block: $B +) { + $modifierCombo: ''; + + @if $modifier { + $modifierCombo: config.$modifier-separator + $modifier; + } + + @at-root { + #{&}#{$specSelector}.#{$block + + config.$element-separator + + $element + + $modifierCombo} { + @content; + } + } +} + +@mixin meb($modifier: false, $element: $E, $block: $B) { + $selector: &; + $modifierCombo: ''; + + @if $modifier { + $modifierCombo: config.$modifier-separator + $modifier; + } + + @at-root { + #{$selector} { + .#{$block + config.$element-separator + $element + $modifierCombo} { + @content; + } + } + } +} + +@mixin when($state) { + @at-root { + &.#{config.$state-prefix + $state} { + @content; + } + } +} + +@mixin extend-rule($name) { + @extend #{'%shared-' + $name}; +} + +@mixin share-rule($name) { + $rule-name: '%shared-' + $name; + + @at-root #{$rule-name} { + @content; + } +} + +@mixin pseudo($pseudo) { + @at-root #{&}#{':#{$pseudo}'} { + @content; + } +} diff --git a/packages/design-system/theme/src/mixins/utils.scss b/packages/design-system/theme/src/mixins/utils.scss new file mode 100644 index 0000000000..e86ede1e4a --- /dev/null +++ b/packages/design-system/theme/src/mixins/utils.scss @@ -0,0 +1,39 @@ +@mixin utils-user-select($value) { + -moz-user-select: $value; + -webkit-user-select: $value; + -ms-user-select: $value; +} + +@mixin utils-clearfix { + $selector: &; + + @at-root { + #{$selector}::before, + #{$selector}::after { + display: table; + content: ''; + } + #{$selector}::after { + clear: both; + } + } +} + +@mixin utils-vertical-center { + $selector: &; + + @at-root { + #{$selector}::after { + display: inline-block; + content: ''; + height: 100%; + vertical-align: middle; + } + } +} + +@mixin utils-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/packages/design-system/theme/src/notification.scss b/packages/design-system/theme/src/notification.scss new file mode 100644 index 0000000000..e1d851664b --- /dev/null +++ b/packages/design-system/theme/src/notification.scss @@ -0,0 +1,100 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(notification) { + display: flex; + width: var.$notification-width; + padding: var.$notification-padding; + border-radius: var.$notification-radius; + box-sizing: border-box; + border: 1px solid var.$notification-border-color; + position: fixed; + background-color: var.$color-white; + box-shadow: var.$notification-shadow; + transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, + bottom 0.3s; + overflow: hidden; + + &.right { + right: 16px; + } + + &.left { + left: 16px; + } + + @include mixins.e(group) { + margin-left: var.$notification-group-margin-left; + margin-right: var.$notification-group-margin-right; + } + + @include mixins.e(title) { + font-weight: bold; + font-size: var.$notification-title-font-size; + color: var.$notification-title-color; + margin: 0; + } + + @include mixins.e(content) { + font-size: var.$notification-content-font-size; + line-height: 21px; + margin: 6px 0 0 0; + color: var.$notification-content-color; + text-align: justify; + + p { + margin: 0; + } + } + + @include mixins.e(icon) { + height: var.$notification-icon-size; + width: var.$notification-icon-size; + font-size: var.$notification-icon-size; + } + + @include mixins.e(closeBtn) { + position: absolute; + top: 18px; + right: 15px; + cursor: pointer; + color: var.$notification-close-color; + font-size: var.$notification-close-font-size; + + &:hover { + color: var.$notification-close-hover-color; + } + } + + .el-icon-success { + color: var.$notification-success-icon-color; + } + + .el-icon-error { + color: var.$notification-danger-icon-color; + } + + .el-icon-info { + color: var.$notification-info-icon-color; + } + + .el-icon-warning { + color: var.$notification-warning-icon-color; + } +} + +.el-notification-fade-enter { + &.right { + right: 0; + transform: translateX(100%); + } + + &.left { + left: 0; + transform: translateX(-100%); + } +} + +.el-notification-fade-leave-active { + opacity: 0; +} diff --git a/packages/design-system/theme/src/option-group.scss b/packages/design-system/theme/src/option-group.scss new file mode 100644 index 0000000000..84c37badf5 --- /dev/null +++ b/packages/design-system/theme/src/option-group.scss @@ -0,0 +1,42 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(select-group) { + $gap: 20px; + + margin: 0; + padding: 0; + + @include mixins.e(wrap) { + position: relative; + list-style: none; + margin: 0; + padding: 0; + + &:not(:last-of-type) { + padding-bottom: 24px; + + &::after { + content: ''; + position: absolute; + display: block; + left: $gap; + right: $gap; + bottom: 12px; + height: 1px; + background: var(--border-color-base); + } + } + } + + @include mixins.e(title) { + padding-left: $gap; + font-size: var.$select-group-font-size; + color: var.$select-group-color; + line-height: var.$select-group-height; + } + + & .el-select-dropdown__item { + padding-left: $gap; + } +} diff --git a/packages/design-system/theme/src/option.scss b/packages/design-system/theme/src/option.scss new file mode 100644 index 0000000000..97d16f59fc --- /dev/null +++ b/packages/design-system/theme/src/option.scss @@ -0,0 +1,40 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(select-dropdown) { + @include mixins.e(item) { + font-size: var.$select-font-size; + padding: 0 20px; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var.$select-option-color; + min-height: var.$select-option-height; + height: auto; + line-height: var.$select-option-height; + box-sizing: border-box; + cursor: pointer; + display: flex; + align-items: center; + + @include mixins.when(disabled) { + color: var.$select-option-disabled-color; + cursor: not-allowed; + + &:hover { + background-color: var.$color-white; + } + } + + &.hover, + &:hover { + background-color: var.$select-option-hover-background; + } + + &.selected { + color: var.$select-option-selected-font-color; + font-weight: bold; + } + } +} diff --git a/packages/design-system/theme/src/page-header.scss b/packages/design-system/theme/src/page-header.scss new file mode 100644 index 0000000000..e15c6728fd --- /dev/null +++ b/packages/design-system/theme/src/page-header.scss @@ -0,0 +1,41 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(page-header) { + display: flex; + line-height: 24px; + + @include mixins.e(left) { + display: flex; + cursor: pointer; + margin-right: 40px; + position: relative; + + &::after { + content: ''; + position: absolute; + width: 1px; + height: 16px; + right: -20px; + top: 50%; + transform: translateY(-50%); + background-color: var(--border-color-base); + } + + .el-icon-back { + font-size: 18px; + margin-right: 6px; + align-self: center; + } + + @include mixins.e(title) { + font-size: 14px; + font-weight: 500; + } + } + + @include mixins.e(content) { + font-size: 18px; + color: var(--color-text-dark); + } +} diff --git a/packages/design-system/theme/src/pagination.scss b/packages/design-system/theme/src/pagination.scss new file mode 100644 index 0000000000..0bc3c1352d --- /dev/null +++ b/packages/design-system/theme/src/pagination.scss @@ -0,0 +1,296 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "./common/var"; +@use "select"; + +@include mixins.b(pagination) { + white-space: nowrap; + padding: 2px 5px; + color: var.$pagination-font-color; + font-weight: bold; + @include utils.utils-clearfix; + + span:not([class*='suffix']), + button { + display: inline-block; + font-size: var.$pagination-font-size; + min-width: var.$pagination-button-width; + height: var.$pagination-button-height; + line-height: var.$pagination-button-height; + vertical-align: top; + box-sizing: border-box; + } + + .el-input__inner { + text-align: center; + -moz-appearance: textfield; + line-height: normal; + } + + // pagesize 的下拉 icon + .el-input__suffix { + right: 0; + transform: scale(0.8); + } + + .el-select .el-input { + width: 100px; + margin: 0 5px; + + .el-input__inner { + padding-right: 25px; + border-radius: var.$pagination-border-radius; + } + } + + button { + border: none; + padding: 0 6px; + background: transparent; + + &:focus { + outline: none; + } + + &:hover { + color: var.$pagination-hover-color; + } + + &:disabled { + color: var.$pagination-button-disabled-color; + background-color: var.$pagination-button-disabled-background-color; + cursor: not-allowed; + } + } + + .btn-prev, + .btn-next { + background: center center no-repeat; + background-size: 16px; + background-color: var.$pagination-background-color; + cursor: pointer; + margin: 0; + color: var.$pagination-button-color; + + .el-icon { + display: block; + font-size: 12px; + font-weight: bold; + } + } + + .btn-prev { + padding-right: 12px; + } + + .btn-next { + padding-left: 12px; + } + + .el-pager li.disabled { + color: var(--color-text-lighter); + cursor: not-allowed; + } + + @include mixins.m(small) { + .btn-prev, + .btn-next, + .el-pager li, + .el-pager li.btn-quicknext, + .el-pager li.btn-quickprev, + .el-pager li:last-child { + border-color: transparent; + font-size: 12px; + line-height: 22px; + height: 22px; + min-width: 22px; + } + + .arrow.disabled { + visibility: hidden; + } + + .more::before, + li.more::before { + line-height: 24px; + } + + span:not([class*='suffix']), + button { + height: 22px; + line-height: 22px; + } + + @include mixins.e(editor) { + height: 22px; + &.el-input .el-input__inner { + height: 22px; + } + } + } + + @include mixins.e(sizes) { + margin: 0 10px 0 0; + font-weight: normal; + color: var(--color-text-dark); + + .el-input .el-input__inner { + font-size: var.$pagination-font-size; + padding-left: 8px; + + &:hover { + border-color: var.$pagination-hover-color; + } + } + } + + @include mixins.e(total) { + margin-right: 10px; + font-weight: normal; + color: var(--color-text-dark); + } + + @include mixins.e(jump) { + margin-left: 24px; + font-weight: normal; + color: var(--color-text-dark); + + .el-input__inner { + padding: 0 3px; + } + } + + @include mixins.e(rightwrapper) { + float: right; + } + + @include mixins.e(editor) { + line-height: 18px; + padding: 0 2px; + height: var.$pagination-button-height; + + text-align: center; + margin: 0 2px; + box-sizing: border-box; + border-radius: var.$pagination-border-radius; + + &.el-input { + width: 50px; + } + + &.el-input .el-input__inner { + height: var.$pagination-button-height; + } + + .el-input__inner::-webkit-inner-spin-button, + .el-input__inner::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + } + + @include mixins.when(background) { + .btn-prev, + .btn-next, + .el-pager li { + margin: 0 5px; + background-color: var.$color-info-lighter; + color: var(--color-text-dark); + min-width: 30px; + border-radius: 2px; + + &.disabled { + color: var(--color-text-lighter); + } + } + + .btn-prev, + .btn-next { + padding: 0; + + &:disabled { + color: var(--color-text-lighter); + } + } + + .el-pager li:not(.disabled) { + &:hover { + color: var.$pagination-hover-color; + } + + &.active { + background-color: var(--color-primary); + color: var.$color-white; + } + } + + &.el-pagination--small { + .btn-prev, + .btn-next, + .el-pager li { + margin: 0 3px; + min-width: 22px; + } + } + } +} + +@include mixins.b(pager) { + user-select: none; + list-style: none; + display: inline-block; + vertical-align: top; + font-size: 0; + padding: 0; + margin: 0; + + .more::before { + line-height: 30px; + } + + li { + padding: 0 4px; + background: var.$pagination-background-color; + vertical-align: top; + display: inline-block; + font-size: var.$pagination-font-size; + min-width: var.$pagination-button-width; + height: var.$pagination-button-height; + line-height: var.$pagination-button-height; + cursor: pointer; + box-sizing: border-box; + text-align: center; + margin: 0; + + &.btn-quicknext, + &.btn-quickprev { + line-height: 28px; + color: var.$pagination-button-color; + + &.disabled { + color: var(--color-text-lighter); + } + } + + &.btn-quickprev:hover { + cursor: pointer; + } + + &.btn-quicknext:hover { + cursor: pointer; + } + + &.active + li { + border-left: 0; + } + + &:hover { + color: var.$pagination-hover-color; + } + + &.active { + color: var.$pagination-hover-color; + cursor: default; + } + } +} diff --git a/packages/design-system/theme/src/popconfirm.scss b/packages/design-system/theme/src/popconfirm.scss new file mode 100644 index 0000000000..7f63e94f5f --- /dev/null +++ b/packages/design-system/theme/src/popconfirm.scss @@ -0,0 +1,16 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(popconfirm) { + @include mixins.e(main) { + display: flex; + align-items: center; + } + @include mixins.e(icon) { + margin-right: 5px; + } + @include mixins.e(action) { + text-align: right; + margin: 0; + } +} diff --git a/packages/design-system/theme/src/popover.scss b/packages/design-system/theme/src/popover.scss new file mode 100644 index 0000000000..f8dc582ab3 --- /dev/null +++ b/packages/design-system/theme/src/popover.scss @@ -0,0 +1,42 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "./popper"; + +@include mixins.b(popover) { + position: absolute; + background: var.$popover-background-color; + min-width: 150px; + border-radius: 4px; + border: 1px solid var.$popover-border-color; + padding: var.$popover-padding; + z-index: var.$index-popper; + color: var(--color-text-dark); + line-height: 1.4; + text-align: justify; + font-size: var.$popover-font-size; + box-shadow: var.$box-shadow-light; + word-break: break-all; + + @include mixins.m(plain) { + padding: var.$popover-padding-large; + } + + @include mixins.e(title) { + color: var.$popover-title-font-color; + font-size: var.$popover-title-font-size; + line-height: 1; + margin-bottom: 12px; + } + + @include mixins.e(reference) { + &:focus:not(.focusing), + &:focus:hover { + outline-width: 0; + } + } + + &:focus:active, + &:focus { + outline-width: 0; + } +} diff --git a/packages/design-system/theme/src/popper.scss b/packages/design-system/theme/src/popper.scss new file mode 100644 index 0000000000..f1e1fc1e88 --- /dev/null +++ b/packages/design-system/theme/src/popper.scss @@ -0,0 +1,101 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(popper) { + .popper__arrow, + .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + .popper__arrow { + border-width: var.$popover-arrow-size; + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); + } + + .popper__arrow::after { + content: ' '; + border-width: var.$popover-arrow-size; + } + + &[x-placement^='top'] { + margin-bottom: #{var.$popover-arrow-size + 6}; + } + + &[x-placement^='top'] .popper__arrow { + bottom: -(var.$popover-arrow-size); + left: 50%; + margin-right: #{var.$tooltip-arrow-size * 0.5}; + border-top-color: var.$popover-border-color; + border-bottom-width: 0; + + &::after { + bottom: 1px; + margin-left: -(var.$popover-arrow-size); + border-top-color: var.$popover-background-color; + border-bottom-width: 0; + } + } + + &[x-placement^='bottom'] { + margin-top: #{var.$popover-arrow-size + 6}; + } + + &[x-placement^='bottom'] .popper__arrow { + top: -(var.$popover-arrow-size); + left: 50%; + margin-right: #{var.$tooltip-arrow-size * 0.5}; + border-top-width: 0; + border-bottom-color: var.$popover-border-color; + + &::after { + top: 1px; + margin-left: -(var.$popover-arrow-size); + border-top-width: 0; + border-bottom-color: var.$popover-background-color; + } + } + + &[x-placement^='right'] { + margin-left: #{var.$popover-arrow-size + 6}; + } + + &[x-placement^='right'] .popper__arrow { + top: 50%; + left: -(var.$popover-arrow-size); + margin-bottom: #{var.$tooltip-arrow-size * 0.5}; + border-right-color: var.$popover-border-color; + border-left-width: 0; + + &::after { + bottom: -(var.$popover-arrow-size); + left: 1px; + border-right-color: var.$popover-background-color; + border-left-width: 0; + } + } + + &[x-placement^='left'] { + margin-right: #{var.$popover-arrow-size + 6}; + } + + &[x-placement^='left'] .popper__arrow { + top: 50%; + right: -(var.$popover-arrow-size); + margin-bottom: #{var.$tooltip-arrow-size * 0.5}; + border-right-width: 0; + border-left-color: var.$popover-border-color; + + &::after { + right: 1px; + bottom: -(var.$popover-arrow-size); + margin-left: -(var.$popover-arrow-size); + border-right-width: 0; + border-left-color: var.$popover-background-color; + } + } +} diff --git a/packages/design-system/theme/src/progress.scss b/packages/design-system/theme/src/progress.scss new file mode 100644 index 0000000000..94d51eb70d --- /dev/null +++ b/packages/design-system/theme/src/progress.scss @@ -0,0 +1,140 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "./common/var"; + +@include mixins.b(progress) { + position: relative; + line-height: 1; + + @include mixins.e(text) { + font-size: 14px; + color: var(--color-text-dark); + display: inline-block; + vertical-align: middle; + margin-left: 10px; + line-height: 1; + + i { + vertical-align: middle; + display: block; + } + } + + @include mixins.m((circle, dashboard)) { + display: inline-block; + + .el-progress__text { + position: absolute; + top: 50%; + left: 0; + width: 100%; + text-align: center; + margin: 0; + transform: translate(0, -50%); + + i { + vertical-align: middle; + display: inline-block; + } + } + } + + @include mixins.m(without-text) { + .el-progress__text { + display: none; + } + + .el-progress-bar { + padding-right: 0; + margin-right: 0; + display: block; + } + } + + @include mixins.m(text-inside) { + .el-progress-bar { + padding-right: 0; + margin-right: 0; + } + } + + @include mixins.when(success) { + .el-progress-bar__inner { + background-color: var(--color-success); + } + + .el-progress__text { + color: var(--color-success); + } + } + + @include mixins.when(warning) { + .el-progress-bar__inner { + background-color: var(--color-warning); + } + + .el-progress__text { + color: var(--color-warning); + } + } + + @include mixins.when(exception) { + .el-progress-bar__inner { + background-color: var(--color-danger); + } + + .el-progress__text { + color: var(--color-danger); + } + } +} + +@include mixins.b(progress-bar) { + padding-right: 50px; + display: inline-block; + vertical-align: middle; + width: 100%; + margin-right: -55px; + box-sizing: border-box; + + @include mixins.e(outer) { + height: 6px; + border-radius: 100px; + background-color: var(--border-color-light); + overflow: hidden; + position: relative; + vertical-align: middle; + } + @include mixins.e(inner) { + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: var(--color-primary); + text-align: right; + border-radius: 100px; + line-height: 1; + white-space: nowrap; + transition: width 0.6s ease; + + @include utils.utils-vertical-center; + } + + @include mixins.e(innerText) { + display: inline-block; + vertical-align: middle; + color: var.$color-white; + font-size: 12px; + margin: 0 5px; + } +} + +@keyframes progress { + 0% { + background-position: 0 0; + } + + 100% { + background-position: 32px 0; + } +} diff --git a/packages/design-system/theme/src/radio-button.scss b/packages/design-system/theme/src/radio-button.scss new file mode 100644 index 0000000000..93ff04745d --- /dev/null +++ b/packages/design-system/theme/src/radio-button.scss @@ -0,0 +1,134 @@ +@use "mixins/mixins"; +@use "mixins/_button"; +@use "./common/var"; + +@include mixins.b(radio-button) { + position: relative; + display: inline-block; + outline: none; + + @include mixins.e(inner) { + display: inline-block; + line-height: 1; + white-space: nowrap; + vertical-align: middle; + background: var.$button-default-background-color; + border: var(--border-base); + font-weight: var(--font-weight-bold); + border-left: 0; + color: var.$button-default-font-color; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: none; + margin: 0; + position: relative; + cursor: pointer; + transition: var.$all-transition; + border-radius: 0; + + @include button.button-size( + var.$button-padding-vertical, + var.$button-padding-horizontal, + var.$button-font-size + ); + + &:hover { + color: var(--color-primary); + } + + & [class*='el-icon-'] { + line-height: 0.9; + + & + span { + margin-left: 5px; + } + } + } + + &:first-child { + .el-radio-button__inner { + border-left: var(--border-base); + border-radius: var(--border-radius-base) 0 0 var(--border-radius-base); + box-shadow: none !important; + } + } + + @include mixins.e(orig-radio) { + opacity: 0; + outline: none; + position: absolute; + z-index: -1; + + &:checked { + & + .el-radio-button__inner { + color: var.$radio-button-checked-font-color; + background-color: var.$radio-button-checked-background-color; + border-color: var.$radio-button-checked-border-color; + box-shadow: -1px 0 0 0 var.$radio-button-checked-border-color; + } + } + + &:disabled { + & + .el-radio-button__inner { + color: var.$button-disabled-font-color; + cursor: not-allowed; + background-image: none; + background-color: var.$button-disabled-background-color; + border-color: var.$button-disabled-border-color; + box-shadow: none; + } + &:checked + .el-radio-button__inner { + background-color: var.$radio-button-disabled-checked-fill; + } + } + } + + &:last-child { + .el-radio-button__inner { + border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; + } + } + + &:first-child:last-child { + .el-radio-button__inner { + border-radius: var(--border-radius-base); + } + } + + @include mixins.m(medium) { + & .el-radio-button__inner { + border-radius: 0; + @include button.button-size( + var.$button-medium-padding-vertical, + var.$button-medium-padding-horizontal, + var.$button-medium-font-size + ); + } + } + @include mixins.m(small) { + & .el-radio-button__inner { + border-radius: 0; + @include button.button-size( + var.$button-small-padding-vertical, + var.$button-small-padding-horizontal, + var.$button-small-font-size + ); + } + } + @include mixins.m(mini) { + & .el-radio-button__inner { + border-radius: 0; + @include button.button-size( + var.$button-mini-padding-vertical, + var.$button-mini-padding-horizontal, + var.$button-mini-font-size + ); + } + } + + &:focus:not(.is-focus):not(:active):not(.is-disabled) { + /*获得焦点时 样式提醒*/ + box-shadow: 0 0 2px 2px var.$radio-button-checked-border-color; + } +} diff --git a/packages/design-system/theme/src/radio-group.scss b/packages/design-system/theme/src/radio-group.scss new file mode 100644 index 0000000000..86358b848d --- /dev/null +++ b/packages/design-system/theme/src/radio-group.scss @@ -0,0 +1,9 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(radio-group) { + display: inline-block; + line-height: 1; + vertical-align: middle; + font-size: 0; +} diff --git a/packages/design-system/theme/src/radio.scss b/packages/design-system/theme/src/radio.scss new file mode 100644 index 0000000000..fe173efbbf --- /dev/null +++ b/packages/design-system/theme/src/radio.scss @@ -0,0 +1,200 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use 'mixins/button'; +@use "./common/var"; + +@include mixins.b(radio) { + color: var.$radio-font-color; + font-weight: var.$radio-font-weight; + line-height: 1; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + outline: none; + font-size: var.$font-size-base; + margin-right: 30px; + @include utils.utils-user-select(none); + + @include mixins.when(bordered) { + padding: var.$radio-bordered-padding; + border-radius: var(--border-radius-base); + border: var(--border-base); + box-sizing: border-box; + height: var.$radio-bordered-height; + + &.is-checked { + border-color: var(--color-primary); + } + + &.is-disabled { + cursor: not-allowed; + border-color: var(--border-color-light); + } + + & + .el-radio.is-bordered { + margin-left: 10px; + } + } + + @include mixins.m(medium) { + &.is-bordered { + padding: var.$radio-bordered-medium-padding; + border-radius: var.$button-medium-border-radius; + height: var.$radio-bordered-medium-height; + .el-radio__label { + font-size: var.$button-medium-font-size; + } + .el-radio__inner { + height: var.$radio-bordered-medium-input-height; + width: var.$radio-bordered-medium-input-width; + } + } + } + @include mixins.m(small) { + &.is-bordered { + padding: var.$radio-bordered-small-padding; + border-radius: var.$button-small-border-radius; + height: var.$radio-bordered-small-height; + .el-radio__label { + font-size: var.$button-small-font-size; + } + .el-radio__inner { + height: var.$radio-bordered-small-input-height; + width: var.$radio-bordered-small-input-width; + } + } + } + @include mixins.m(mini) { + &.is-bordered { + padding: var.$radio-bordered-mini-padding; + border-radius: var.$button-mini-border-radius; + height: var.$radio-bordered-mini-height; + .el-radio__label { + font-size: var.$button-mini-font-size; + } + .el-radio__inner { + height: var.$radio-bordered-mini-input-height; + width: var.$radio-bordered-mini-input-width; + } + } + } + + &:last-child { + margin-right: 0; + } + + @include mixins.e(input) { + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + line-height: 1; + position: relative; + vertical-align: middle; + + @include mixins.when(disabled) { + .el-radio__inner { + background-color: var.$radio-disabled-input-fill; + border-color: var.$radio-disabled-input-border-color; + cursor: not-allowed; + + &::after { + cursor: not-allowed; + background-color: var.$radio-disabled-icon-color; + } + + & + .el-radio__label { + cursor: not-allowed; + } + } + &.is-checked { + .el-radio__inner { + background-color: var.$radio-disabled-checked-input-fill; + border-color: var.$radio-disabled-checked-input-border-color; + + &::after { + background-color: var.$radio-disabled-checked-icon-color; + } + } + } + & + span.el-radio__label { + color: var(--color-text-lighter); + cursor: not-allowed; + } + } + + @include mixins.when(checked) { + .el-radio__inner { + border-color: var.$radio-checked-input-border-color; + background: var.$radio-checked-icon-color; + + &::after { + transform: translate(-50%, -50%) scale(1); + } + } + + & + .el-radio__label { + color: var.$radio-checked-font-color; + } + } + + @include mixins.when(focus) { + .el-radio__inner { + border-color: var.$radio-input-border-color-hover; + } + } + } + @include mixins.e(inner) { + border: var.$radio-input-border; + border-radius: var.$radio-input-border-radius; + width: var.$radio-input-width; + height: var.$radio-input-height; + background-color: var.$radio-input-background-color; + position: relative; + cursor: pointer; + display: inline-block; + box-sizing: border-box; + + &:hover { + border-color: var.$radio-input-border-color-hover; + } + + &::after { + width: 4px; + height: 4px; + border-radius: var.$radio-input-border-radius; + background-color: var.$color-white; + content: ''; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0); + transition: transform 0.15s ease-in; + } + } + + @include mixins.e(original) { + opacity: 0; + outline: none; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 0; + } + + &:focus:not(.is-focus):not(:active):not(.is-disabled) { + /*获得焦点时 样式提醒*/ + .el-radio__inner { + box-shadow: 0 0 2px 2px var.$radio-input-border-color-hover; + } + } + + @include mixins.e(label) { + font-size: var.$radio-font-size; + padding-left: 10px; + } +} diff --git a/packages/design-system/theme/src/rate.scss b/packages/design-system/theme/src/rate.scss new file mode 100644 index 0000000000..1a37308539 --- /dev/null +++ b/packages/design-system/theme/src/rate.scss @@ -0,0 +1,50 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(rate) { + height: var.$rate-height; + line-height: 1; + + &:focus, + &:active { + outline-width: 0; + } + + @include mixins.e(item) { + display: inline-block; + position: relative; + font-size: 0; + vertical-align: middle; + } + + @include mixins.e(icon) { + position: relative; + display: inline-block; + font-size: var.$rate-icon-size; + margin-right: var.$rate-icon-margin; + color: var.$rate-icon-color; + transition: 0.3s; + &.hover { + transform: scale(1.15); + } + + .path2 { + position: absolute; + left: 0; + top: 0; + } + } + + @include mixins.e(decimal) { + position: absolute; + top: 0; + left: 0; + display: inline-block; + overflow: hidden; + } + + @include mixins.e(text) { + font-size: var.$rate-font-size; + vertical-align: middle; + } +} diff --git a/packages/design-system/theme/src/reset.scss b/packages/design-system/theme/src/reset.scss new file mode 100644 index 0000000000..1a0e69a4c2 --- /dev/null +++ b/packages/design-system/theme/src/reset.scss @@ -0,0 +1,241 @@ +@use "mixins/function"; +@use 'common/var'; + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + overscroll-behavior-x: none; + line-height: 1; + font-size: var(--font-size-m); + font-weight: 300; + color: var(--color-text-dark); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body, +button, +input { + font-family: var(--font-family); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +input { + font-weight: var(--font-weight-regular); +} + +button { + font-weight: var(--font-weight-bold); +} + +html, +body, +div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + vertical-align: baseline; + background: transparent; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +nav ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +a { + margin: 0; + padding: 0; + color: var(--color-primary); + text-decoration: none; + font-size: 100%; + vertical-align: baseline; + background: transparent; + cursor: pointer; + + &:active { + color: function.saturation( + --color-primary-h, + --color-primary-s, + --color-primary-l, + -(var.$button-active-shade-percent) + ); + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--color-text-dark); + font-weight: inherit; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } +} + +h4, +h5, +h6, +p { + font-size: inherit; +} + +p { + line-height: 1.8; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } +} + +ins { + background-color: var(--color-success); + color: var(--color-text-dark); + text-decoration: none; +} + +mark { + background-color: var(--color-warning); + color: var(--color-text-dark); + font-style: italic; + font-weight: bold; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted; + cursor: help; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid var(--color-foreground-light); + margin: 1em 0; + padding: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +input, +select { + vertical-align: middle; +} diff --git a/packages/design-system/theme/src/row.scss b/packages/design-system/theme/src/row.scss new file mode 100644 index 0000000000..99b3035591 --- /dev/null +++ b/packages/design-system/theme/src/row.scss @@ -0,0 +1,37 @@ +@use "./common/var"; +@use "mixins/mixins"; +@use "mixins/utils"; + +@include mixins.b(row) { + position: relative; + box-sizing: border-box; + @include utils.utils-clearfix; + + @include mixins.m(flex) { + display: flex; + &:before, + &:after { + display: none; + } + + @include mixins.when(justify-center) { + justify-content: center; + } + @include mixins.when(justify-end) { + justify-content: flex-end; + } + @include mixins.when(justify-space-between) { + justify-content: space-between; + } + @include mixins.when(justify-space-around) { + justify-content: space-around; + } + + @include mixins.when(align-middle) { + align-items: center; + } + @include mixins.when(align-bottom) { + align-items: flex-end; + } + } +} diff --git a/packages/design-system/theme/src/scrollbar.scss b/packages/design-system/theme/src/scrollbar.scss new file mode 100644 index 0000000000..bd19aa6868 --- /dev/null +++ b/packages/design-system/theme/src/scrollbar.scss @@ -0,0 +1,72 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(scrollbar) { + overflow: hidden; + position: relative; + + &:hover, + &:active, + &:focus { + > .el-scrollbar__bar { + opacity: 1; + transition: opacity 340ms ease-out; + } + } + + @include mixins.e(wrap) { + overflow: scroll; + height: 100%; + + @include mixins.m(hidden-default) { + scrollbar-width: none; + &::-webkit-scrollbar { + width: 0; + height: 0; + } + } + } + + @include mixins.e(thumb) { + position: relative; + display: block; + width: 0; + height: 0; + cursor: pointer; + border-radius: inherit; + background-color: var.$scrollbar-background-color; + transition: 0.3s background-color; + + &:hover { + background-color: var.$scrollbar-hover-background-color; + } + } + + @include mixins.e(bar) { + position: absolute; + right: 2px; + bottom: 2px; + z-index: 1; + border-radius: 4px; + opacity: 0; + transition: opacity 120ms ease-out; + + @include mixins.when(vertical) { + width: 6px; + top: 2px; + + > div { + width: 100%; + } + } + + @include mixins.when(horizontal) { + height: 6px; + left: 2px; + + > div { + height: 100%; + } + } + } +} diff --git a/packages/design-system/theme/src/select-dropdown.scss b/packages/design-system/theme/src/select-dropdown.scss new file mode 100644 index 0000000000..6d2f370ad8 --- /dev/null +++ b/packages/design-system/theme/src/select-dropdown.scss @@ -0,0 +1,59 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "./popper"; + +@include mixins.b(select-dropdown) { + position: absolute; + z-index: #{var.$index-top + 1}; + border: var.$select-dropdown-border; + border-radius: var(--border-radius-base); + background-color: var.$select-dropdown-background; + box-shadow: var.$select-dropdown-shadow; + box-sizing: border-box; + margin: 5px 0; + + @include mixins.when(multiple) { + & .el-select-dropdown__item.selected { + color: var.$select-option-selected-font-color; + background-color: var.$select-dropdown-background; + + &.hover { + background-color: var.$select-option-hover-background; + } + + &::after { + position: absolute; + right: 20px; + font-family: 'element-icons'; + content: '\e6da'; + font-size: 12px; + font-weight: bold; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + } + + .el-scrollbar.is-empty .el-select-dropdown__list { + padding: 0; + } +} + +@include mixins.b(select-dropdown__empty) { + padding: var.$select-dropdown-empty-padding; + margin: 0; + text-align: center; + color: var.$select-dropdown-empty-color; + font-size: var.$select-font-size; +} + +@include mixins.b(select-dropdown__wrap) { + max-height: var.$select-dropdown-max-height; +} + +@include mixins.b(select-dropdown__list) { + list-style: none; + padding: var.$select-dropdown-padding; + margin: 0; + box-sizing: border-box; +} diff --git a/packages/design-system/theme/src/select.scss b/packages/design-system/theme/src/select.scss new file mode 100644 index 0000000000..b667c7eadc --- /dev/null +++ b/packages/design-system/theme/src/select.scss @@ -0,0 +1,158 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "./common/var"; +@use "select-dropdown"; +@use "input"; +@use "tag"; +@use "option"; +@use "option-group"; +@use "scrollbar"; + +@include mixins.b(select) { + display: inline-block; + position: relative; + width: 100%; + + .el-select__tags { + overflow-x: scroll; + } + + .el-select__tags > span { + display: contents; + } + + .el-select__tags + .el-input { + input { + box-sizing: content-box; + padding: 0; + text-indent: var(--spacing-xs); + width: calc(100% - 2px); + } + } + + .el-input__inner { + cursor: pointer; + padding-right: 35px; + + &:focus { + border-color: var.$select-input-focus-border-color; + } + } + + .el-input { + & .el-select__caret { + font-size: var.$select-input-font-size; + transition: transform 0.3s; + transform: rotateZ(180deg); + cursor: pointer; + + @include mixins.when(reverse) { + transform: rotateZ(0deg); + } + + @include mixins.when(show-close) { + font-size: var.$select-font-size; + text-align: center; + transform: rotateZ(180deg); + border-radius: var.$border-radius-circle; + color: var.$select-input-color; + transition: var.$color-transition-base; + + &:hover { + color: var.$select-close-hover-color; + } + } + } + + &.is-disabled { + & .el-input__inner { + cursor: not-allowed; + + &:hover { + border-color: var.$select-disabled-border; + } + } + } + + &.is-focus .el-input__inner { + border-color: var.$select-input-focus-border-color; + } + } + + > .el-input { + display: block; + } + + @include mixins.e(input) { + border: none; + outline: none; + padding: 0; + margin-left: 15px; + color: var.$select-multiple-input-color; + font-size: var.$select-font-size; + appearance: none; + height: 28px; + background-color: transparent; + @include mixins.when(mini) { + height: 14px; + } + } + + @include mixins.e(close) { + cursor: pointer; + position: absolute; + top: 8px; + z-index: var.$index-top; + right: 25px; + color: var.$select-input-color; + line-height: 18px; + font-size: var.$select-input-font-size; + + &:hover { + color: var.$select-close-hover-color; + } + } + + @include mixins.e(tags) { + position: absolute; + line-height: normal; + white-space: normal; + z-index: var.$index-normal; + top: 50%; + transform: translateY(-50%); + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .el-tag__close { + margin-top: -2px; + } + + .el-tag { + box-sizing: border-box; + margin: 2px 0 2px 6px; + border-color: var(--color-foreground-base); + background-color: var(--color-foreground-base); + color: var(--color-text-dark); + border-radius: 20px; + font-weight: 400; + + &__close.el-icon-close { + background-color: var(--color-text-light); + right: -7px; + top: 0; + color: var.$color-white; + margin-right: 6px; + + &:hover { + background-color: var(--color-text-base); + } + + &::before { + display: block; + transform: translate(0, 0.5px); + } + } + } +} diff --git a/packages/design-system/theme/src/slider.scss b/packages/design-system/theme/src/slider.scss new file mode 100644 index 0000000000..3d1cc5e04d --- /dev/null +++ b/packages/design-system/theme/src/slider.scss @@ -0,0 +1,246 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "input-number"; +@use "tooltip"; +@use "./common/var"; + +@include mixins.b(slider) { + @include utils.utils-clearfix; + + @include mixins.e(runway) { + width: 100%; + height: var.$slider-height; + margin: var.$slider-margin; + background-color: var.$slider-runway-background-color; + border-radius: var.$slider-border-radius; + position: relative; + cursor: pointer; + vertical-align: middle; + + &.show-input { + margin-right: 160px; + width: auto; + } + + &.disabled { + cursor: default; + + .el-slider__bar { + background-color: var.$slider-disable-color; + } + + .el-slider__button { + border-color: var.$slider-disable-color; + } + + .el-slider__button-wrapper { + &:hover, + &.hover { + cursor: not-allowed; + } + + &.dragging { + cursor: not-allowed; + } + } + + .el-slider__button { + &:hover, + &.hover, + &.dragging { + transform: scale(1); + } + + &:hover, + &.hover { + cursor: not-allowed; + } + + &.dragging { + cursor: not-allowed; + } + } + } + } + + @include mixins.e(input) { + float: right; + margin-top: 3px; + width: 130px; + + &.el-input-number--mini { + margin-top: 5px; + } + + &.el-input-number--medium { + margin-top: 0; + } + + &.el-input-number--large { + margin-top: -2px; + } + } + + @include mixins.e(bar) { + height: var.$slider-height; + background-color: var.$slider-main-background-color; + border-top-left-radius: var.$slider-border-radius; + border-bottom-left-radius: var.$slider-border-radius; + position: absolute; + } + + @include mixins.e(button-wrapper) { + height: var.$slider-button-wrapper-size; + width: var.$slider-button-wrapper-size; + position: absolute; + z-index: 1001; + top: var.$slider-button-wrapper-offset; + transform: translateX(-50%); + background-color: transparent; + text-align: center; + user-select: none; + line-height: normal; + @include utils.utils-vertical-center; + + .el-tooltip { + vertical-align: middle; + display: inline-block; + } + + &:hover, + &.hover { + cursor: grab; + } + + &.dragging { + cursor: grabbing; + } + } + + @include mixins.e(button) { + width: var.$slider-button-size; + height: var.$slider-button-size; + border: solid 2px var.$slider-main-background-color; + background-color: var.$color-white; + border-radius: 50%; + transition: 0.2s; + user-select: none; + + &:hover, + &.hover, + &.dragging { + transform: scale(1.2); + } + + &:hover, + &.hover { + cursor: grab; + } + + &.dragging { + cursor: grabbing; + } + } + + @include mixins.e(stop) { + position: absolute; + height: var.$slider-height; + width: var.$slider-height; + border-radius: var.$border-radius-circle; + background-color: var.$slider-stop-background-color; + transform: translateX(-50%); + } + + @include mixins.e(marks) { + top: 0; + left: 12px; + width: 18px; + height: 100%; + + @include mixins.e(marks-text) { + position: absolute; + transform: translateX(-50%); + font-size: 14px; + color: var(--color-info); + margin-top: 15px; + } + } + + @include mixins.when(vertical) { + position: relative; + .el-slider__runway { + width: var.$slider-height; + height: 100%; + margin: 0 16px; + } + .el-slider__bar { + width: var.$slider-height; + height: auto; + border-radius: 0 0 3px 3px; + } + .el-slider__button-wrapper { + top: auto; + left: var.$slider-button-wrapper-offset; + transform: translateY(50%); + } + .el-slider__stop { + transform: translateY(50%); + } + &.el-slider--with-input { + padding-bottom: #{var.$input-medium-height + 22px}; + .el-slider__input { + overflow: visible; + float: none; + position: absolute; + bottom: 22px; + width: 36px; + margin-top: 15px; + .el-input__inner { + text-align: center; + padding-left: 5px; + padding-right: 5px; + } + .el-input-number__decrease, + .el-input-number__increase { + top: var.$input-small-height; + margin-top: -1px; + border: var.$input-border; + line-height: 20px; + box-sizing: border-box; + transition: var.$border-transition-base; + } + .el-input-number__decrease { + width: 18px; + right: 18px; + border-bottom-left-radius: var.$input-border-radius; + } + .el-input-number__increase { + width: 19px; + border-bottom-right-radius: var.$input-border-radius; + & ~ .el-input .el-input__inner { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } + &:hover { + .el-input-number__decrease, + .el-input-number__increase { + border-color: var.$input-hover-border; + } + } + &:active { + .el-input-number__decrease, + .el-input-number__increase { + border-color: var.$input-focus-border; + } + } + } + } + + @include mixins.e(marks-text) { + margin-top: 0; + left: 15px; + transform: translateY(50%); + } + } +} diff --git a/packages/design-system/theme/src/spinner.scss b/packages/design-system/theme/src/spinner.scss new file mode 100644 index 0000000000..b5b8126805 --- /dev/null +++ b/packages/design-system/theme/src/spinner.scss @@ -0,0 +1,43 @@ +@use "mixins/mixins"; + +@include mixins.b(time-spinner) { + width: 100%; + white-space: nowrap; +} + +@include mixins.b(spinner) { + display: inline-block; + vertical-align: middle; +} +@include mixins.b(spinner-inner) { + animation: rotate 2s linear infinite; + width: 50px; + height: 50px; + + & .path { + stroke: #ececec; + stroke-linecap: round; + animation: dash 1.5s ease-in-out infinite; + } +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} diff --git a/packages/design-system/theme/src/step.scss b/packages/design-system/theme/src/step.scss new file mode 100644 index 0000000000..85e45c569b --- /dev/null +++ b/packages/design-system/theme/src/step.scss @@ -0,0 +1,316 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(step) { + position: relative; + flex-shrink: 1; + + @include mixins.pseudo(last-of-type) { + @include mixins.e(line) { + display: none; + } + + // 只有未设置 space 的情况下才自适应宽度 + @include mixins.when(flex) { + flex-basis: auto !important; + flex-shrink: 0; + flex-grow: 0; + } + + @include mixins.e((main, description)) { + padding-right: 0; + } + } + + @include mixins.e(head) { + position: relative; + width: 100%; + + @include mixins.when(process) { + color: var(--color-text-dark); + border-color: var(--color-text-dark); + } + + @include mixins.when(wait) { + color: var(--color-text-lighter); + border-color: var(--color-text-lighter); + } + + @include mixins.when(success) { + color: var(--color-success); + border-color: var(--color-success); + } + + @include mixins.when(error) { + color: var(--color-danger); + border-color: var(--color-danger); + } + + @include mixins.when(finish) { + color: var(--color-primary); + border-color: var(--color-primary); + } + } + + @include mixins.e(icon) { + position: relative; + z-index: 1; + display: inline-flex; + justify-content: center; + align-items: center; + width: 24px; + height: 24px; + font-size: 14px; + box-sizing: border-box; + background: var.$color-white; + transition: 0.15s ease-out; + + @include mixins.when(text) { + border-radius: 50%; + border: 2px solid; + border-color: inherit; + } + + @include mixins.when(icon) { + width: 40px; + } + } + + @include mixins.e(icon-inner) { + display: inline-block; + user-select: none; + text-align: center; + font-weight: bold; + line-height: 1; + color: inherit; + + &[class*='el-icon']:not(.is-status) { + font-size: 25px; + font-weight: normal; + } + + // 组件自身表示状态的图标 + @include mixins.when(status) { + transform: translateY(1px); + } + } + + @include mixins.e(line) { + position: absolute; + border-color: inherit; + background-color: var(--color-text-lighter); + } + + @include mixins.e(line-inner) { + display: block; + border-width: 1px; + border-style: solid; + border-color: inherit; + transition: 0.15s ease-out; + box-sizing: border-box; + width: 0; + height: 0; + } + + @include mixins.e(main) { + white-space: normal; + text-align: left; + } + + @include mixins.e(title) { + font-size: 16px; + line-height: 38px; + + @include mixins.when(process) { + font-weight: bold; + color: var(--color-text-dark); + } + + @include mixins.when(wait) { + color: var(--color-text-lighter); + } + + @include mixins.when(success) { + color: var(--color-success); + } + + @include mixins.when(error) { + color: var(--color-danger); + } + + @include mixins.when(finish) { + color: var(--color-primary); + } + } + + @include mixins.e(description) { + padding-right: 10%; + margin-top: -5px; + font-size: 12px; + line-height: 20px; + font-weight: normal; + + @include mixins.when(process) { + color: var(--color-text-dark); + } + + @include mixins.when(wait) { + color: var(--color-text-lighter); + } + + @include mixins.when(success) { + color: var(--color-success); + } + + @include mixins.when(error) { + color: var(--color-danger); + } + + @include mixins.when(finish) { + color: var(--color-primary); + } + } + + @include mixins.when(horizontal) { + display: inline-block; + + @include mixins.e(line) { + height: 2px; + top: 11px; + left: 0; + right: 0; + } + } + + @include mixins.when(vertical) { + display: flex; + + @include mixins.e(head) { + flex-grow: 0; + width: 24px; + } + + @include mixins.e(main) { + padding-left: 10px; + flex-grow: 1; + } + + @include mixins.e(title) { + line-height: 24px; + padding-bottom: 8px; + } + + @include mixins.e(line) { + width: 2px; + top: 0; + bottom: 0; + left: 11px; + } + + @include mixins.e(icon) { + @include mixins.when(icon) { + width: 24px; + } + } + } + + @include mixins.when(center) { + @include mixins.e(head) { + text-align: center; + } + + @include mixins.e(main) { + text-align: center; + } + + @include mixins.e(description) { + padding-left: 20%; + padding-right: 20%; + } + + @include mixins.e(line) { + left: 50%; + right: -50%; + } + } + + @include mixins.when(simple) { + display: flex; + align-items: center; + + @include mixins.e(head) { + width: auto; + font-size: 0; + padding-right: 10px; + } + + @include mixins.e(icon) { + background: transparent; + width: 16px; + height: 16px; + font-size: 12px; + } + + @include mixins.e(icon-inner) { + &[class*='el-icon']:not(.is-status) { + font-size: 18px; + } + + &.is-status { + transform: scale(0.8) translateY(1px); + } + } + + @include mixins.e(main) { + position: relative; + display: flex; + align-items: stretch; + flex-grow: 1; + } + + @include mixins.e(title) { + font-size: 16px; + line-height: 20px; + } + + @include mixins.pseudo('not(:last-of-type)') { + @include mixins.e(title) { + max-width: 50%; + word-break: break-all; + } + } + + @include mixins.e(arrow) { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + height: 15px; + width: 1px; + background: var(--color-text-lighter); + } + + &::before { + transform: rotate(-45deg) translateY(-4px); + transform-origin: 0 0; + } + + &::after { + transform: rotate(45deg) translateY(4px); + transform-origin: 100% 100%; + } + } + + @include mixins.pseudo(last-of-type) { + @include mixins.e(arrow) { + display: none; + } + } + } +} diff --git a/packages/design-system/theme/src/steps.scss b/packages/design-system/theme/src/steps.scss new file mode 100644 index 0000000000..70afd39409 --- /dev/null +++ b/packages/design-system/theme/src/steps.scss @@ -0,0 +1,21 @@ +@use "mixins/mixins"; +@use "common/var"; + +@include mixins.b(steps) { + display: flex; + + @include mixins.m(simple) { + padding: 13px 8%; + border-radius: 4px; + background: var.$background-color-base; + } + + @include mixins.m(horizontal) { + white-space: nowrap; + } + + @include mixins.m(vertical) { + height: 100%; + flex-flow: column; + } +} diff --git a/packages/design-system/theme/src/submenu.scss b/packages/design-system/theme/src/submenu.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/switch.scss b/packages/design-system/theme/src/switch.scss new file mode 100644 index 0000000000..b6d6429317 --- /dev/null +++ b/packages/design-system/theme/src/switch.scss @@ -0,0 +1,116 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(switch) { + display: inline-flex; + align-items: center; + position: relative; + font-size: var.$switch-font-size; + line-height: var.$switch-height; + height: var.$switch-height; + vertical-align: middle; + @include mixins.when(disabled) { + & .el-switch__core, + & .el-switch__label { + cursor: not-allowed; + } + } + + @include mixins.e(label) { + transition: 0.2s; + height: var.$switch-height; + display: inline-block; + font-size: var.$switch-font-size; + font-weight: 500; + cursor: pointer; + vertical-align: middle; + color: var(--color-text-dark); + + @include mixins.when(active) { + color: var(--color-primary); + } + + @include mixins.m(left) { + margin-right: 10px; + } + @include mixins.m(right) { + margin-left: 10px; + } + & * { + line-height: 1; + font-size: var.$switch-font-size; + display: inline-block; + } + } + + @include mixins.e(input) { + position: absolute; + width: 0; + height: 0; + opacity: 0; + margin: 0; + } + + @include mixins.e(core) { + margin: 0; + display: inline-block; + position: relative; + width: var.$switch-width; + height: var.$switch-height; + border: 1px solid var.$switch-off-color; + outline: none; + border-radius: var.$switch-core-border-radius; + box-sizing: border-box; + background: var.$switch-off-color; + cursor: pointer; + transition: border-color 0.1s, background-color 0.1s; + vertical-align: middle; + + &:after { + content: ''; + position: absolute; + top: 1px; + left: 1px; + border-radius: var.$border-radius-circle; + transition: all 0.1s; + width: var.$switch-button-size; + height: var.$switch-button-size; + background-color: var.$color-white; + } + } + + @include mixins.when(checked) { + .el-switch__core { + border-color: var.$switch-on-color; + background-color: var.$switch-on-color; + &::after { + left: 100%; + margin-left: -(var.$switch-button-size) - 1px; + } + } + } + + @include mixins.when(disabled) { + opacity: 0.6; + } + + @include mixins.m(wide) { + .el-switch__label { + &.el-switch__label--left { + span { + left: 10px; + } + } + &.el-switch__label--right { + span { + right: 10px; + } + } + } + } + + & .label-fade-enter, + & .label-fade-leave-active { + opacity: 0; + } +} diff --git a/packages/design-system/theme/src/tab-pane.scss b/packages/design-system/theme/src/tab-pane.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/design-system/theme/src/table-column.scss b/packages/design-system/theme/src/table-column.scss new file mode 100644 index 0000000000..1ca87502ef --- /dev/null +++ b/packages/design-system/theme/src/table-column.scss @@ -0,0 +1,97 @@ +@use "mixins/mixins"; +@use "checkbox"; +@use "tag"; +@use "./common/var"; + +@include mixins.b(table-column) { + @include mixins.m(selection) { + .cell { + padding-left: 14px; + padding-right: 14px; + } + } +} + +@include mixins.b(table-filter) { + border: solid 1px var(--border-color-light); + border-radius: 2px; + background-color: var.$color-white; + box-shadow: var.$dropdown-menu-box-shadow; + box-sizing: border-box; + margin: 2px 0; + + /** used for dropdown mode */ + @include mixins.e(list) { + padding: 5px 0; + margin: 0; + list-style: none; + min-width: 100px; + } + + @include mixins.e(list-item) { + line-height: 36px; + padding: 0 10px; + cursor: pointer; + font-size: var.$font-size-base; + + &:hover { + background-color: var.$dropdown-menuItem-hover-fill; + color: var.$dropdown-menuItem-hover-color; + } + + @include mixins.when(active) { + background-color: var(--color-primary); + color: var.$color-white; + } + } + + @include mixins.e(content) { + min-width: 100px; + } + + @include mixins.e(bottom) { + border-top: 1px solid var(--border-color-light); + padding: 8px; + + button { + background: transparent; + border: none; + color: var(--color-text-dark); + cursor: pointer; + font-size: var.$font-size-small; + padding: 0 3px; + + &:hover { + color: var(--color-primary); + } + + &:focus { + outline: none; + } + + &.is-disabled { + color: var.$disabled-color-base; + cursor: not-allowed; + } + } + } + + @include mixins.e(wrap) { + max-height: 280px; + } + + @include mixins.e(checkbox-group) { + padding: 10px; + + label.el-checkbox { + display: block; + margin-right: 5px; + margin-bottom: 8px; + margin-left: 5px; + } + + .el-checkbox:last-child { + margin-bottom: 0; + } + } +} diff --git a/packages/design-system/theme/src/table.scss b/packages/design-system/theme/src/table.scss new file mode 100644 index 0000000000..55f37a3d8d --- /dev/null +++ b/packages/design-system/theme/src/table.scss @@ -0,0 +1,572 @@ +@use "mixins/mixins"; +@use "checkbox"; +@use "tag"; +@use "tooltip"; +@use "./common/var"; + +@include mixins.b(table) { + position: relative; + overflow: hidden; + box-sizing: border-box; + flex: 1; + width: 100%; + max-width: 100%; + background-color: var.$color-white; + font-size: 14px; + color: var.$table-font-color; + + // 数据为空 + @include mixins.e(empty-block) { + min-height: 60px; + text-align: center; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + @include mixins.e(empty-text) { + // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items + // set empty text line height up to contrainer min-height as workaround. + line-height: 60px; + width: 50%; + color: var(--color-text-light); + } + + // 展开行 + @include mixins.e(expand-column) { + .cell { + padding: 0; + text-align: center; + } + } + + @include mixins.e(expand-icon) { + position: relative; + cursor: pointer; + color: #666; + font-size: 12px; + transition: transform 0.2s ease-in-out; + height: 20px; + + @include mixins.m(expanded) { + transform: rotate(90deg); + } + + > .el-icon { + position: absolute; + left: 50%; + top: 50%; + margin-left: -5px; + margin-top: -5px; + } + } + + @include mixins.e(expanded-cell) { + background-color: var.$color-white; + + // 纯属为了增加权重 + &[class*='cell'] { + padding: 20px 50px; + } + + &:hover { + background-color: transparent !important; + } + } + + @include mixins.e(placeholder) { + display: inline-block; + width: 20px; + } + + @include mixins.e(append-wrapper) { + // 避免外边距重合 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing + overflow: hidden; + } + + @include mixins.m(fit) { + border-right: 0; + border-bottom: 0; + + th.gutter, + td.gutter { + border-right-width: 1px; + } + } + + @include mixins.m(scrollable-x) { + .el-table__body-wrapper { + overflow-x: auto; + } + } + + @include mixins.m(scrollable-y) { + .el-table__body-wrapper { + overflow-y: auto; + } + } + + thead { + color: var.$table-header-font-color; + font-weight: 500; + + &.is-group { + th { + background: var.$background-color-base; + } + } + } + + th, + td { + padding: 12px 0; + min-width: 0; + box-sizing: border-box; + text-overflow: ellipsis; + vertical-align: middle; + position: relative; + text-align: left; + + @include mixins.when(center) { + text-align: center; + } + + @include mixins.when(right) { + text-align: right; + } + + &.gutter { + width: 15px; + border-right-width: 0; + border-bottom-width: 0; + padding: 0; + } + + &.is-hidden { + > * { + visibility: hidden; + } + } + } + + @include mixins.m(medium) { + th, + td { + padding: 10px 0; + } + } + + @include mixins.m(small) { + font-size: 12px; + th, + td { + padding: 8px 0; + } + } + + @include mixins.m(mini) { + font-size: 12px; + th, + td { + padding: 6px 0; + } + } + + tr { + background-color: var.$color-white; + + input[type='checkbox'] { + margin: 0; + } + } + + th.is-leaf, + td { + border-bottom: var.$table-border; + } + + th.is-sortable { + cursor: pointer; + } + + th { + overflow: hidden; + user-select: none; + background-color: var.$table-header-background-color; + + > .cell { + display: inline-block; + box-sizing: border-box; + position: relative; + vertical-align: middle; + padding-left: 10px; + padding-right: 10px; + width: 100%; + + &.highlight { + color: var(--color-primary); + } + } + + &.required > div::before { + display: inline-block; + content: ''; + width: 8px; + height: 8px; + border-radius: 50%; + background: #ff4d51; + margin-right: 5px; + vertical-align: middle; + } + } + + td { + div { + box-sizing: border-box; + } + + &.gutter { + width: 0; + } + } + + .cell { + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + word-break: break-all; + line-height: 23px; + padding-left: 10px; + padding-right: 10px; + + &.el-tooltip { + white-space: nowrap; + min-width: 50px; + } + } + + // 拥有多级表头 + @include mixins.m((group, border)) { + border: var.$table-border; + + @include mixins.share-rule(border-pseudo) { + content: ''; + position: absolute; + background-color: var.$table-border-color; + z-index: 1; + } + + // 表格右部伪 border + &::after { + @include mixins.extend-rule(border-pseudo); + top: 0; + right: 0; + width: 1px; + height: 100%; + } + } + + // 表格底部伪 border，总是有的 + &::before { + @include mixins.extend-rule(border-pseudo); + left: 0; + bottom: 0; + width: 100%; + height: 1px; + } + + // table--border + @include mixins.m(border) { + border-right: none; + border-bottom: none; + + &.el-loading-parent--relative { + border-color: transparent; + } + + th, + td { + border-right: var.$table-border; + + &:first-child .cell { + padding-left: 10px; + } + } + + th.gutter:last-of-type { + border-bottom: var.$table-border; + border-bottom-width: 1px; + } + + & th { + border-bottom: var.$table-border; + } + } + + @include mixins.m(hidden) { + visibility: hidden; + } + + @include mixins.e((fixed, fixed-right)) { + position: absolute; + top: 0; + left: 0; + overflow-x: hidden; + overflow-y: hidden; + box-shadow: var.$table-fixed-box-shadow; + + &::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background-color: var(--border-color-light); + z-index: 4; + } + } + + @include mixins.e(fixed-right-patch) { + position: absolute; + top: -1px; + right: 0; + background-color: var.$color-white; + border-bottom: var.$table-border; + } + + @include mixins.e(fixed-right) { + top: 0; + left: auto; + right: 0; + + .el-table__fixed-header-wrapper, + .el-table__fixed-body-wrapper, + .el-table__fixed-footer-wrapper { + left: auto; + right: 0; + } + } + + @include mixins.e(fixed-header-wrapper) { + position: absolute; + left: 0; + top: 0; + z-index: 3; + } + + @include mixins.e(fixed-footer-wrapper) { + position: absolute; + left: 0; + bottom: 0; + z-index: 3; + + & tbody td { + border-top: var.$table-border; + background-color: var.$table-row-hover-background-color; + color: var.$table-font-color; + } + } + + @include mixins.e(fixed-body-wrapper) { + position: absolute; + left: 0; + top: 37px; + overflow: hidden; + z-index: 3; + } + + @include mixins.e((header-wrapper, body-wrapper, footer-wrapper)) { + width: 100%; + } + + @include mixins.e(footer-wrapper) { + margin-top: -1px; + td { + border-top: var.$table-border; + } + } + + @include mixins.e((header, body, footer)) { + table-layout: fixed; + border-collapse: separate; + } + + @include mixins.e((header-wrapper, footer-wrapper)) { + overflow: hidden; + + & tbody td { + background-color: var.$table-row-hover-background-color; + color: var.$table-font-color; + } + } + + @include mixins.e(body-wrapper) { + overflow: hidden; + position: relative; + + @include mixins.when(scrolling-none) { + ~ .el-table__fixed, + ~ .el-table__fixed-right { + box-shadow: none; + } + } + + @include mixins.when(scrolling-left) { + ~ .el-table__fixed { + box-shadow: none; + } + } + + @include mixins.when(scrolling-right) { + ~ .el-table__fixed-right { + box-shadow: none; + } + } + + .el-table--border { + @include mixins.when(scrolling-right) { + ~ .el-table__fixed-right { + border-left: var.$table-border; + } + } + + @include mixins.when(scrolling-left) { + ~ .el-table__fixed { + border-right: var.$table-border; + } + } + } + } + + .caret-wrapper { + display: inline-flex; + flex-direction: column; + align-items: center; + height: 34px; + width: 24px; + vertical-align: middle; + cursor: pointer; + overflow: initial; + position: relative; + } + + .sort-caret { + width: 0; + height: 0; + border: solid 5px transparent; + position: absolute; + left: 7px; + + &.ascending { + border-bottom-color: var(--color-text-lighter); + top: 5px; + } + + &.descending { + border-top-color: var(--color-text-lighter); + bottom: 7px; + } + } + + .ascending .sort-caret.ascending { + border-bottom-color: var(--color-primary); + } + + .descending .sort-caret.descending { + border-top-color: var(--color-primary); + } + + .hidden-columns { + visibility: hidden; + position: absolute; + z-index: -1; + } + + @include mixins.m(striped) { + & .el-table__body { + & tr.el-table__row--striped { + td { + background: #fafafa; + } + + &.current-row td { + background-color: var.$table-current-row-background-color; + } + } + } + } + + @include mixins.e(body) { + tr.hover-row { + &, + &.el-table__row--striped { + &, + &.current-row { + > td { + background-color: var.$table-row-hover-background-color; + } + } + } + } + + tr.current-row > td { + background-color: var.$table-current-row-background-color; + } + } + + @include mixins.e(column-resize-proxy) { + position: absolute; + left: 200px; + top: 0; + bottom: 0; + width: 0; + border-left: var.$table-border; + z-index: 10; + } + + @include mixins.e(column-filter-trigger) { + display: inline-block; + line-height: 34px; + cursor: pointer; + + & i { + color: var(--color-info); + font-size: 12px; + transform: scale(0.75); + } + } + + @include mixins.m(enable-row-transition) { + .el-table__body td { + transition: background-color 0.25s ease; + } + } + + @include mixins.m(enable-row-hover) { + .el-table__body tr:hover > td { + background-color: var.$table-row-hover-background-color; + } + } + + @include mixins.m(fluid-height) { + .el-table__fixed, + .el-table__fixed-right { + bottom: 0; + overflow: hidden; + } + } + + [class*='el-table__row--level'] { + .el-table__expand-icon { + display: inline-block; + width: 20px; + line-height: 20px; + height: 20px; + text-align: center; + margin-right: 3px; + } + } +} diff --git a/packages/design-system/theme/src/tabs.scss b/packages/design-system/theme/src/tabs.scss new file mode 100644 index 0000000000..47adcd305b --- /dev/null +++ b/packages/design-system/theme/src/tabs.scss @@ -0,0 +1,606 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(tabs) { + @include mixins.e(header) { + padding: 0; + position: relative; + margin: 0 0 15px; + } + @include mixins.e(active-bar) { + position: absolute; + bottom: 0; + left: 0; + height: 2px; + background-color: var(--color-primary); + z-index: 1; + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + list-style: none; + } + @include mixins.e(new-tab) { + float: right; + border: 1px solid #d3dce6; + height: 18px; + width: 18px; + line-height: 18px; + margin: 12px 0 9px 10px; + border-radius: 3px; + text-align: center; + font-size: 12px; + color: #d3dce6; + cursor: pointer; + transition: all 0.15s; + + .el-icon-plus { + transform: scale(0.8, 0.8); + } + + &:hover { + color: var(--color-primary); + } + } + @include mixins.e(nav-wrap) { + overflow: hidden; + margin-bottom: -1px; + position: relative; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background-color: var(--border-color-base); + z-index: var.$index-normal; + } + + @include mixins.when(scrollable) { + padding: 0 20px; + box-sizing: border-box; + } + } + @include mixins.e(nav-scroll) { + overflow: hidden; + } + @include mixins.e((nav-next, nav-prev)) { + position: absolute; + cursor: pointer; + line-height: 44px; + font-size: 12px; + color: var(--color-text-light); + } + @include mixins.e(nav-next) { + right: 0; + } + @include mixins.e(nav-prev) { + left: 0; + } + @include mixins.e(nav) { + white-space: nowrap; + position: relative; + transition: transform 0.3s; + float: left; + z-index: #{var.$index-normal + 1}; + + @include mixins.when(stretch) { + min-width: 100%; + display: flex; + & > * { + flex: 1; + text-align: center; + } + } + } + @include mixins.e(item) { + padding: 0 20px; + height: 40px; + box-sizing: border-box; + line-height: 40px; + display: inline-block; + list-style: none; + font-size: 14px; + font-weight: 500; + color: var(--color-text-dark); + position: relative; + + &:focus, + &:focus:active { + outline: none; + } + + &:focus.is-active.is-focus:not(:active) { + box-shadow: 0 0 2px 2px var(--color-primary) inset; + border-radius: 3px; + } + + & .el-icon-close { + border-radius: 50%; + text-align: center; + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + margin-left: 5px; + &:before { + transform: scale(0.9); + display: inline-block; + } + + &:hover { + background-color: var(--color-text-lighter); + color: var.$color-white; + } + } + + @include mixins.when(active) { + color: var(--color-primary); + } + + &:hover { + color: var(--color-primary); + cursor: pointer; + } + + @include mixins.when(disabled) { + color: var.$disabled-color-base; + cursor: default; + } + } + @include mixins.e(content) { + overflow: hidden; + position: relative; + } + @include mixins.m(card) { + > .el-tabs__header { + border-bottom: 1px solid var(--border-color-base); + } + > .el-tabs__header .el-tabs__nav-wrap::after { + content: none; + } + > .el-tabs__header .el-tabs__nav { + border: 1px solid var(--border-color-base); + border-bottom: none; + border-radius: 4px 4px 0 0; + box-sizing: border-box; + } + > .el-tabs__header .el-tabs__active-bar { + display: none; + } + > .el-tabs__header .el-tabs__item .el-icon-close { + position: relative; + font-size: 12px; + width: 0; + height: 14px; + vertical-align: middle; + line-height: 15px; + overflow: hidden; + top: -1px; + right: -2px; + transform-origin: 100% 50%; + } + > .el-tabs__header .el-tabs__item { + border-bottom: 1px solid transparent; + border-left: 1px solid var(--border-color-base); + transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), + padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + &:first-child { + border-left: none; + } + &.is-closable { + &:hover { + padding-left: 13px; + padding-right: 13px; + + & .el-icon-close { + width: 14px; + } + } + } + &.is-active { + border-bottom-color: var.$color-white; + + &.is-closable { + padding-left: 20px; + padding-right: 20px; + + .el-icon-close { + width: 14px; + } + } + } + } + } + @include mixins.m(border-card) { + background: var.$color-white; + border: 1px solid var(--border-color-base); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); + + > .el-tabs__content { + padding: 15px; + } + > .el-tabs__header { + background-color: var.$background-color-base; + border-bottom: 1px solid var(--border-color-base); + margin: 0; + } + > .el-tabs__header .el-tabs__nav-wrap::after { + content: none; + } + > .el-tabs__header .el-tabs__item { + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + border: 1px solid transparent; + margin-top: -1px; + color: var(--color-text-light); + + &:first-child { + margin-left: -1px; + } + + & + .el-tabs__item { + margin-left: -1px; + } + + &.is-active { + color: var(--color-primary); + background-color: var.$color-white; + border-right-color: var(--border-color-base); + border-left-color: var(--border-color-base); + } + &:not(.is-disabled):hover { + color: var(--color-primary); + } + &.is-disabled { + color: var.$disabled-color-base; + } + } + + > .el-tabs__header .is-scrollable .el-tabs__item:first-child { + margin-left: 0; + } + } + @include mixins.m((top, bottom)) { + .el-tabs__item.is-top:nth-child(2), + .el-tabs__item.is-bottom:nth-child(2) { + padding-left: 0; + } + .el-tabs__item.is-top:last-child, + .el-tabs__item.is-bottom:last-child { + padding-right: 0; + } + + &.el-tabs--border-card, + &.el-tabs--card, + .el-tabs--left, + .el-tabs--right { + > .el-tabs__header { + .el-tabs__item:nth-child(2) { + padding-left: 20px; + } + .el-tabs__item:last-child { + padding-right: 20px; + } + } + } + } + @include mixins.m(bottom) { + .el-tabs__header.is-bottom { + margin-bottom: 0; + margin-top: 10px; + } + &.el-tabs--border-card { + .el-tabs__header.is-bottom { + border-bottom: 0; + border-top: 1px solid var(--border-color-base); + } + .el-tabs__nav-wrap.is-bottom { + margin-top: -1px; + margin-bottom: 0; + } + .el-tabs__item.is-bottom:not(.is-active) { + border: 1px solid transparent; + } + .el-tabs__item.is-bottom { + margin: 0 -1px -1px -1px; + } + } + } + @include mixins.m((left, right)) { + overflow: hidden; + + .el-tabs__header.is-left, + .el-tabs__header.is-right, + .el-tabs__nav-wrap.is-left, + .el-tabs__nav-wrap.is-right, + .el-tabs__nav-scroll { + height: 100%; + } + + .el-tabs__active-bar.is-left, + .el-tabs__active-bar.is-right { + top: 0; + bottom: auto; + width: 2px; + height: auto; + } + + .el-tabs__nav-wrap.is-left, + .el-tabs__nav-wrap.is-right { + margin-bottom: 0; + + > .el-tabs__nav-prev, + > .el-tabs__nav-next { + height: 30px; + line-height: 30px; + width: 100%; + text-align: center; + cursor: pointer; + + i { + transform: rotateZ(90deg); + } + } + > .el-tabs__nav-prev { + left: auto; + top: 0; + } + > .el-tabs__nav-next { + right: auto; + bottom: 0; + } + + &.is-scrollable { + padding: 30px 0; + } + + &::after { + height: 100%; + width: 2px; + bottom: auto; + top: 0; + } + } + + .el-tabs__nav.is-left, + .el-tabs__nav.is-right { + float: none; + } + .el-tabs__item.is-left, + .el-tabs__item.is-right { + display: block; + } + } + @include mixins.m(left) { + .el-tabs__header.is-left { + float: left; + margin-bottom: 0; + margin-right: 10px; + } + .el-tabs__nav-wrap.is-left { + margin-right: -1px; + &::after { + left: auto; + right: 0; + } + } + .el-tabs__active-bar.is-left { + right: 0; + left: auto; + } + .el-tabs__item.is-left { + text-align: right; + } + + &.el-tabs--card { + .el-tabs__active-bar.is-left { + display: none; + } + .el-tabs__item.is-left { + border-left: none; + border-right: 1px solid var(--border-color-base); + border-bottom: none; + border-top: 1px solid var(--border-color-base); + text-align: left; + } + .el-tabs__item.is-left:first-child { + border-right: 1px solid var(--border-color-base); + border-top: none; + } + .el-tabs__item.is-left.is-active { + border: 1px solid var(--border-color-base); + border-right-color: #fff; + border-left: none; + border-bottom: none; + + &:first-child { + border-top: none; + } + &:last-child { + border-bottom: none; + } + } + + .el-tabs__nav { + border-radius: 4px 0 0 4px; + border-bottom: 1px solid var(--border-color-base); + border-right: none; + } + + .el-tabs__new-tab { + float: none; + } + } + + &.el-tabs--border-card { + .el-tabs__header.is-left { + border-right: 1px solid #dfe4ed; + } + .el-tabs__item.is-left { + border: 1px solid transparent; + margin: -1px 0 -1px -1px; + + &.is-active { + border-color: transparent; + border-top-color: rgb(209, 219, 229); + border-bottom-color: rgb(209, 219, 229); + } + } + } + } + @include mixins.m(right) { + .el-tabs__header.is-right { + float: right; + margin-bottom: 0; + margin-left: 10px; + } + + .el-tabs__nav-wrap.is-right { + margin-left: -1px; + &::after { + left: 0; + right: auto; + } + } + + .el-tabs__active-bar.is-right { + left: 0; + } + + &.el-tabs--card { + .el-tabs__active-bar.is-right { + display: none; + } + .el-tabs__item.is-right { + border-bottom: none; + border-top: 1px solid var(--border-color-base); + } + .el-tabs__item.is-right:first-child { + border-left: 1px solid var(--border-color-base); + border-top: none; + } + .el-tabs__item.is-right.is-active { + border: 1px solid var(--border-color-base); + border-left-color: #fff; + border-right: none; + border-bottom: none; + + &:first-child { + border-top: none; + } + &:last-child { + border-bottom: none; + } + } + + .el-tabs__nav { + border-radius: 0 4px 4px 0; + border-bottom: 1px solid var(--border-color-base); + border-left: none; + } + } + &.el-tabs--border-card { + .el-tabs__header.is-right { + border-left: 1px solid #dfe4ed; + } + .el-tabs__item.is-right { + border: 1px solid transparent; + margin: -1px -1px -1px 0; + + &.is-active { + border-color: transparent; + border-top-color: rgb(209, 219, 229); + border-bottom-color: rgb(209, 219, 229); + } + } + } + } +} + +.slideInRight-transition, +.slideInLeft-transition { + display: inline-block; +} +.slideInRight-enter { + animation: slideInRight-enter 0.3s; +} +.slideInRight-leave { + position: absolute; + left: 0; + right: 0; + animation: slideInRight-leave 0.3s; +} +.slideInLeft-enter { + animation: slideInLeft-enter 0.3s; +} +.slideInLeft-leave { + position: absolute; + left: 0; + right: 0; + animation: slideInLeft-leave 0.3s; +} + +@keyframes slideInRight-enter { + 0% { + opacity: 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + + to { + opacity: 1; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes slideInRight-leave { + 0% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); + opacity: 0; + } +} +@keyframes slideInLeft-enter { + 0% { + opacity: 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } + + to { + opacity: 1; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes slideInLeft-leave { + 0% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; + } +} diff --git a/packages/design-system/theme/src/tag.scss b/packages/design-system/theme/src/tag.scss new file mode 100644 index 0000000000..2a2a81893e --- /dev/null +++ b/packages/design-system/theme/src/tag.scss @@ -0,0 +1,163 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@mixin genTheme() { + background-color: var.$color-primary-lighter; + border-color: var.$color-primary-light-5; + color: var.$color-primary-light-1; + + @include mixins.when(hit) { + border-color: var.$tag-primary-color; + } + + .el-tag__close { + color: var.$color-primary-light-1; + &:hover { + color: var.$color-white; + background-color: var.$color-primary-light-1; + } + } + + &.el-tag--info { + background-color: var.$color-info-lighter; + border-color: var.$color-info-light-5; + color: var.$color-info-light-3; + + @include mixins.when(hit) { + border-color: var.$tag-info-color; + } + + .el-tag__close { + color: var.$color-info-light-1; + &:hover { + color: var.$color-white; + background-color: var.$color-info-light-1; + } + } + } + + &.el-tag--success { + background-color: var.$color-success-lighter; + border-color: var.$color-success-light-5; + color: var.$color-success-light-3; + + @include mixins.when(hit) { + border-color: var.$tag-success-color; + } + + .el-tag__close { + color: var.$color-success-light-1; + &:hover { + color: var.$color-white; + background-color: var.$color-success-light-1; + } + } + } + + &.el-tag--warning { + background-color: var.$color-warning-lighter; + border-color: var.$color-warning-light-5; + color: var.$color-warning-light-3; + + @include mixins.when(hit) { + border-color: var.$tag-warning-color; + } + + .el-tag__close { + color: var.$color-warning-light-1; + &:hover { + color: var.$color-white; + background-color: var.$color-warning-light-1; + } + } + } + + &.el-tag--danger { + background-color: var.$color-danger-lighter; + border-color: var.$color-danger-light-5; + color: var.$color-danger-light-3; + + @include mixins.when(hit) { + border-color: var.$tag-danger-color; + } + + .el-tag__close { + color: var.$color-danger-light-1; + &:hover { + color: var.$color-white; + background-color: var.$color-danger-light-1; + } + } + } +} + +@include mixins.b(tag) { + @include genTheme(); + display: inline-block; + height: 32px; + padding: var.$tag-padding; + line-height: 30px; + font-size: var.$tag-font-size; + color: var.$tag-primary-color; + border-width: 1px; + border-style: solid; + border-radius: var.$tag-border-radius; + box-sizing: border-box; + white-space: nowrap; + + .el-icon-close { + border-radius: 50%; + text-align: center; + position: relative; + cursor: pointer; + font-size: 12px; + height: 16px; + width: 16px; + line-height: 16px; + vertical-align: middle; + top: -1px; + right: -5px; + + &::before { + display: block; + } + } + + @include mixins.m(dark) { + @include genTheme(); + } + + @include mixins.m(plain) { + @include genTheme(); + } + + @include mixins.m(medium) { + height: 28px; + line-height: 26px; + + .el-icon-close { + transform: scale(0.8); + } + } + + @include mixins.m(small) { + height: 24px; + padding: 0 8px; + line-height: 22px; + + .el-icon-close { + transform: scale(0.8); + } + } + + @include mixins.m(mini) { + height: 20px; + padding: 0 5px; + line-height: 18px; + + .el-icon-close { + margin-left: -3px; + transform: scale(0.7); + } + } +} diff --git a/packages/design-system/theme/src/time-picker.scss b/packages/design-system/theme/src/time-picker.scss new file mode 100644 index 0000000000..de273215de --- /dev/null +++ b/packages/design-system/theme/src/time-picker.scss @@ -0,0 +1,8 @@ +@use "./date-picker/picker.scss"; +@use "./date-picker/picker-panel.scss"; +@use "./date-picker/time-spinner.scss"; +@use "./date-picker/time-picker.scss"; +@use "./date-picker/time-range-picker.scss"; +@use "./input.scss"; +@use "./scrollbar.scss"; +@use "./popper"; diff --git a/packages/design-system/theme/src/time-select.scss b/packages/design-system/theme/src/time-select.scss new file mode 100644 index 0000000000..8f4f239218 --- /dev/null +++ b/packages/design-system/theme/src/time-select.scss @@ -0,0 +1,37 @@ +@use "./common/var"; +@use "./date-picker/picker.scss"; +@use "./date-picker/date-picker.scss"; +@use "./scrollbar.scss"; +@use "./popper"; + +.time-select { + margin: 5px 0; + min-width: 0; +} + +.time-select .el-picker-panel__content { + max-height: 200px; + margin: 0; +} + +.time-select-item { + padding: 8px 10px; + font-size: 14px; + line-height: 20px; +} + +.time-select-item.selected:not(.disabled) { + color: var(--color-primary); + font-weight: bold; +} + +.time-select-item.disabled { + color: var.$datepicker-border-color; + cursor: not-allowed; +} + +.time-select-item:hover { + background-color: var.$background-color-base; + font-weight: bold; + cursor: pointer; +} diff --git a/packages/design-system/theme/src/timeline-item.scss b/packages/design-system/theme/src/timeline-item.scss new file mode 100644 index 0000000000..3e83bf6361 --- /dev/null +++ b/packages/design-system/theme/src/timeline-item.scss @@ -0,0 +1,86 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(timeline-item) { + position: relative; + padding-bottom: 20px; + + @include mixins.e(wrapper) { + position: relative; + padding-left: 28px; + top: -3px; + } + + @include mixins.e(tail) { + position: absolute; + left: 4px; + height: 100%; + border-left: 2px solid var.$timeline-node-color; + } + + @include mixins.e(icon) { + color: var.$color-white; + font-size: var.$font-size-small; + } + + @include mixins.e(node) { + position: absolute; + background-color: var.$timeline-node-color; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + @include mixins.m(normal) { + left: -1px; + width: var.$timeline-node-size-normal; + height: var.$timeline-node-size-normal; + } + @include mixins.m(large) { + left: -2px; + width: var.$timeline-node-size-large; + height: var.$timeline-node-size-large; + } + + @include mixins.m(primary) { + background-color: var(--color-primary); + } + @include mixins.m(success) { + background-color: var(--color-success); + } + @include mixins.m(warning) { + background-color: var(--color-warning); + } + @include mixins.m(danger) { + background-color: var(--color-danger); + } + @include mixins.m(info) { + background-color: var(--color-info); + } + } + + @include mixins.e(dot) { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + } + + @include mixins.e(content) { + color: var(--color-text-dark); + } + + @include mixins.e(timestamp) { + color: var(--color-text-light); + line-height: 1; + font-size: var.$font-size-small; + + @include mixins.when(top) { + margin-bottom: 8px; + padding-top: 4px; + } + @include mixins.when(bottom) { + margin-top: 8px; + } + } +} diff --git a/packages/design-system/theme/src/timeline.scss b/packages/design-system/theme/src/timeline.scss new file mode 100644 index 0000000000..635d7038da --- /dev/null +++ b/packages/design-system/theme/src/timeline.scss @@ -0,0 +1,14 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(timeline) { + margin: 0; + font-size: var.$font-size-base; + list-style: none; + + & .el-timeline-item:last-child { + & .el-timeline-item__tail { + display: none; + } + } +} diff --git a/packages/design-system/theme/src/tooltip.scss b/packages/design-system/theme/src/tooltip.scss new file mode 100644 index 0000000000..cbcc3c7c08 --- /dev/null +++ b/packages/design-system/theme/src/tooltip.scss @@ -0,0 +1,147 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(tooltip) { + &:focus:not(.focusing), + &:focus:hover { + outline-width: 0; + } + + a { + font-weight: var(--font-weight-bold); + } + + @include mixins.e(popper) { + position: absolute; + border-radius: 4px; + padding: var.$tooltip-padding; + z-index: var.$index-popper; + font-size: var.$tooltip-font-size; + line-height: 1.2; + min-width: 10px; + word-wrap: break-word; + + .popper__arrow, + .popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + .popper__arrow { + border-width: var.$tooltip-arrow-size; + } + + .popper__arrow::after { + content: ' '; + border-width: 5px; + } + + &[x-placement^='top'] { + margin-bottom: #{var.$tooltip-arrow-size + 6px}; + } + + &[x-placement^='top'] .popper__arrow { + bottom: -(var.$tooltip-arrow-size); + border-top-color: var.$tooltip-border-color; + border-bottom-width: 0; + + &::after { + bottom: 1px; + margin-left: -5px; + border-top-color: var.$tooltip-fill; + border-bottom-width: 0; + } + } + + &[x-placement^='bottom'] { + margin-top: #{var.$tooltip-arrow-size + 6px}; + } + + &[x-placement^='bottom'] .popper__arrow { + top: -(var.$tooltip-arrow-size); + border-top-width: 0; + border-bottom-color: var.$tooltip-border-color; + + &::after { + top: 1px; + margin-left: -5px; + border-top-width: 0; + border-bottom-color: var.$tooltip-fill; + } + } + + &[x-placement^='right'] { + margin-left: #{var.$tooltip-arrow-size + 6px}; + } + + &[x-placement^='right'] .popper__arrow { + left: -(var.$tooltip-arrow-size); + border-right-color: var.$tooltip-border-color; + border-left-width: 0; + + &::after { + bottom: -5px; + left: 1px; + border-right-color: var.$tooltip-fill; + border-left-width: 0; + } + } + + &[x-placement^='left'] { + margin-right: #{var.$tooltip-arrow-size + 6px}; + } + + &[x-placement^='left'] .popper__arrow { + right: -(var.$tooltip-arrow-size); + border-right-width: 0; + border-left-color: var.$tooltip-border-color; + + &::after { + right: 1px; + bottom: -5px; + margin-left: -5px; + border-right-width: 0; + border-left-color: var.$tooltip-fill; + } + } + + @include mixins.when(dark) { + background: var.$tooltip-fill; + color: var.$tooltip-color; + } + + @include mixins.when(light) { + background: var.$tooltip-color; + border: 1px solid var.$tooltip-fill; + + &[x-placement^='top'] .popper__arrow { + border-top-color: var.$tooltip-fill; + &::after { + border-top-color: var.$tooltip-color; + } + } + &[x-placement^='bottom'] .popper__arrow { + border-bottom-color: var.$tooltip-fill; + &::after { + border-bottom-color: var.$tooltip-color; + } + } + &[x-placement^='left'] .popper__arrow { + border-left-color: var.$tooltip-fill; + &::after { + border-left-color: var.$tooltip-color; + } + } + &[x-placement^='right'] .popper__arrow { + border-right-color: var.$tooltip-fill; + &::after { + border-right-color: var.$tooltip-color; + } + } + } + } +} diff --git a/packages/design-system/theme/src/transfer.scss b/packages/design-system/theme/src/transfer.scss new file mode 100644 index 0000000000..28d6037953 --- /dev/null +++ b/packages/design-system/theme/src/transfer.scss @@ -0,0 +1,229 @@ +@use "mixins/mixins"; +@use "mixins/utils"; +@use "./common/var"; +@use "input"; +@use "button"; +@use "checkbox"; +@use "checkbox-group"; + +@include mixins.b(transfer) { + font-size: var.$font-size-base; + + @include mixins.e(buttons) { + display: inline-block; + vertical-align: middle; + padding: 0 30px; + } + + @include mixins.e(button) { + display: block; + margin: 0 auto; + padding: 10px; + border-radius: 50%; + color: var.$color-white; + background-color: var(--color-primary); + font-size: 0; + + @include mixins.when(with-texts) { + border-radius: var(--border-radius-base); + } + + @include mixins.when(disabled) { + border: var(--border-base); + background-color: var.$background-color-base; + color: var(--color-text-lighter); + + &:hover { + border: var(--border-base); + background-color: var.$background-color-base; + color: var(--color-text-lighter); + } + } + + &:first-child { + margin-bottom: 10px; + } + + &:nth-child(2) { + margin: 0; + } + + i, + span { + font-size: 14px; + } + + & [class*='el-icon-'] + span { + margin-left: 0; + } + } +} + +@include mixins.b(transfer-panel) { + border: 1px solid var.$transfer-border-color; + border-radius: var.$transfer-border-radius; + overflow: hidden; + background: var.$color-white; + display: inline-block; + vertical-align: middle; + width: var.$transfer-panel-width; + max-height: 100%; + box-sizing: border-box; + position: relative; + + @include mixins.e(body) { + height: var.$transfer-panel-body-height; + + @include mixins.when(with-footer) { + padding-bottom: var.$transfer-panel-footer-height; + } + } + + @include mixins.e(list) { + margin: 0; + padding: 6px 0; + list-style: none; + height: var.$transfer-panel-body-height; + overflow: auto; + box-sizing: border-box; + + @include mixins.when(filterable) { + height: #{var.$transfer-panel-body-height - var.$transfer-filter-height - + 20px}; + padding-top: 0; + } + } + + @include mixins.e(item) { + height: var.$transfer-item-height; + line-height: var.$transfer-item-height; + padding-left: 15px; + display: block !important; + + & + .el-transfer-panel__item { + margin-left: 0; + } + + &.el-checkbox { + color: var(--color-text-dark); + } + + &:hover { + color: var(--color-primary); + } + + &.el-checkbox .el-checkbox__label { + width: 100%; + @include utils.utils-ellipsis; + display: block; + box-sizing: border-box; + padding-left: 24px; + line-height: var.$transfer-item-height; + } + + .el-checkbox__input { + position: absolute; + top: 8px; + } + } + + @include mixins.e(filter) { + text-align: center; + margin: 15px; + box-sizing: border-box; + display: block; + width: auto; + + .el-input__inner { + height: var.$transfer-filter-height; + width: 100%; + font-size: 12px; + display: inline-block; + box-sizing: border-box; + border-radius: #{var.$transfer-filter-height * 0.5}; + padding-right: 10px; + padding-left: 30px; + } + + .el-input__icon { + margin-left: 5px; + } + + .el-icon-circle-close { + cursor: pointer; + } + } + + .el-transfer-panel__header { + height: var.$transfer-panel-header-height; + line-height: var.$transfer-panel-header-height; + background: var.$transfer-panel-header-background-color; + margin: 0; + padding-left: 15px; + border-bottom: 1px solid var.$transfer-border-color; + box-sizing: border-box; + color: var.$color-black; + + .el-checkbox { + display: block; + line-height: 40px; + + .el-checkbox__label { + font-size: 16px; + color: var(--color-text-dark); + font-weight: normal; + + span { + position: absolute; + right: 15px; + color: var(--color-text-light); + font-size: 12px; + font-weight: normal; + } + } + } + } + + .el-transfer-panel__footer { + height: var.$transfer-panel-footer-height; + background: var.$color-white; + margin: 0; + padding: 0; + border-top: 1px solid var.$transfer-border-color; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: var.$index-normal; + @include utils.utils-vertical-center; + + .el-checkbox { + padding-left: 20px; + color: var(--color-text-dark); + } + } + + .el-transfer-panel__empty { + margin: 0; + height: var.$transfer-item-height; + line-height: var.$transfer-item-height; + padding: 6px 15px 0; + color: var(--color-text-light); + text-align: center; + } + + .el-checkbox__label { + padding-left: 8px; + } + + .el-checkbox__inner { + height: 14px; + width: 14px; + border-radius: 3px; + &::after { + height: 6px; + width: 3px; + left: 4px; + } + } +} diff --git a/packages/design-system/theme/src/tree.scss b/packages/design-system/theme/src/tree.scss new file mode 100644 index 0000000000..eea1c38453 --- /dev/null +++ b/packages/design-system/theme/src/tree.scss @@ -0,0 +1,124 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "common/transition"; +@use "checkbox"; + +@include mixins.b(tree) { + position: relative; + cursor: default; + background: var.$color-white; + color: var.$tree-font-color; + + @include mixins.e(empty-block) { + position: relative; + min-height: 60px; + text-align: center; + width: 100%; + height: 100%; + } + + @include mixins.e(empty-text) { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: var(--color-text-light); + font-size: var.$font-size-base; + } + + @include mixins.e(drop-indicator) { + position: absolute; + left: 0; + right: 0; + height: 1px; + background-color: var(--color-primary); + } +} + +@include mixins.b(tree-node) { + white-space: nowrap; + outline: none; + &:focus { + /* focus */ + > .el-tree-node__content { + background-color: var.$tree-node-hover-background-color; + } + } + + @include mixins.when(drop-inner) { + > .el-tree-node__content .el-tree-node__label { + background-color: var(--color-primary); + color: #fff; + } + } + + @include mixins.e(content) { + display: flex; + align-items: center; + height: 26px; + cursor: pointer; + + & > .el-tree-node__expand-icon { + padding: 6px; + } + & > label.el-checkbox { + margin-right: 8px; + } + &:hover { + background-color: var.$tree-node-hover-background-color; + } + + .el-tree.is-dragging & { + cursor: move; + + & * { + pointer-events: none; + } + } + + .el-tree.is-dragging.is-drop-not-allow & { + cursor: not-allowed; + } + } + + @include mixins.e(expand-icon) { + cursor: pointer; + color: var.$tree-expand-icon-color; + font-size: 12px; + + transform: rotate(0deg); + transition: transform 0.3s ease-in-out; + + &.expanded { + transform: rotate(90deg); + } + + &.is-leaf { + color: transparent; + cursor: default; + } + } + + @include mixins.e(label) { + font-size: var.$font-size-base; + } + + @include mixins.e(loading-icon) { + margin-right: 8px; + font-size: var.$font-size-base; + color: var.$tree-expand-icon-color; + } + + & > .el-tree-node__children { + overflow: hidden; + background-color: transparent; + } + + &.is-expanded > .el-tree-node__children { + display: block; + } +} + +.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + background-color: var.$color-primary-lighter; +} diff --git a/packages/design-system/theme/src/upload.scss b/packages/design-system/theme/src/upload.scss new file mode 100644 index 0000000000..8f5ee22656 --- /dev/null +++ b/packages/design-system/theme/src/upload.scss @@ -0,0 +1,609 @@ +@use "mixins/mixins"; +@use "progress"; +@use "./common/var"; +@use "mixins/utils"; + +@include mixins.b(upload) { + display: inline-block; + text-align: center; + cursor: pointer; + outline: none; + @include mixins.e(input) { + display: none; + } + + @include mixins.e(tip) { + font-size: 12px; + color: var(--color-text-dark); + margin-top: 7px; + } + + iframe { + position: absolute; + z-index: -1; + top: 0; + left: 0; + opacity: 0; + filter: alpha(opacity=0); + } + + /* 照片墙模式 */ + @include mixins.m(picture-card) { + background-color: #fbfdff; + border: 1px dashed #c0ccda; + border-radius: 6px; + box-sizing: border-box; + width: 148px; + height: 148px; + cursor: pointer; + line-height: 146px; + vertical-align: top; + + i { + font-size: 28px; + color: #8c939d; + } + + &:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + } + &:focus { + border-color: var(--color-primary); + color: var(--color-primary); + + .el-upload-dragger { + border-color: var(--color-primary); + } + } +} + +@include mixins.b(upload-dragger) { + background-color: #fff; + border: 1px dashed #d9d9d9; + border-radius: 6px; + box-sizing: border-box; + width: 360px; + height: 180px; + text-align: center; + cursor: pointer; + position: relative; + overflow: hidden; + + .el-icon-upload { + font-size: 67px; + color: var(--color-text-lighter); + margin: 40px 0 16px; + line-height: 50px; + } + + + .el-upload__tip { + text-align: center; + } + + ~ .el-upload__files { + border-top: var(--border-base); + margin-top: 7px; + padding-top: 5px; + } + + .el-upload__text { + color: var(--color-text-dark); + font-size: 14px; + text-align: center; + + em { + color: var(--color-primary); + font-style: normal; + } + } + + &:hover { + border-color: var(--color-primary); + } + + @include mixins.when(dragover) { + background-color: rgba(32, 159, 255, 0.06); + border: 2px dashed var(--color-primary); + } +} + +@include mixins.b(upload-list) { + margin: 0; + padding: 0; + list-style: none; + + @include mixins.e(item) { + transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); + font-size: 14px; + color: var(--color-text-dark); + line-height: 1.8; + margin-top: 5px; + position: relative; + box-sizing: border-box; + border-radius: 4px; + width: 100%; + + .el-progress { + position: absolute; + top: 20px; + width: 100%; + } + + .el-progress__text { + position: absolute; + right: 0; + top: -13px; + } + + .el-progress-bar { + margin-right: 0; + padding-right: 0; + } + + &:first-child { + margin-top: 10px; + } + + & .el-icon-upload-success { + color: var(--color-success); + } + + .el-icon-close { + display: none; + position: absolute; + top: 5px; + right: 5px; + cursor: pointer; + opacity: 0.75; + color: var(--color-text-dark); + //transform: scale(.7); + + &:hover { + opacity: 1; + } + } + + & .el-icon-close-tip { + display: none; + position: absolute; + top: 5px; + right: 5px; + font-size: 12px; + cursor: pointer; + opacity: 1; + color: var(--color-primary); + } + + &:hover { + background-color: var.$background-color-base; + + .el-icon-close { + display: inline-block; + } + + .el-progress__text { + display: none; + } + } + + @include mixins.when(success) { + .el-upload-list__item-status-label { + display: block; + } + + .el-upload-list__item-name:hover, + .el-upload-list__item-name:focus { + color: var.$link-hover-color; + cursor: pointer; + } + + &:focus:not(:hover) { + /* 键盘focus */ + .el-icon-close-tip { + display: inline-block; + } + } + + &:not(.focusing):focus, + &:active { + /* click时 */ + outline-width: 0; + .el-icon-close-tip { + display: none; + } + } + + &:hover, + &:focus { + .el-upload-list__item-status-label { + display: none; + } + } + } + } + + @include mixins.when(disabled) { + .el-upload-list__item:hover .el-upload-list__item-status-label { + display: block; + } + } + + @include mixins.e(item-name) { + color: var(--color-text-dark); + display: block; + margin-right: 40px; + overflow: hidden; + padding-left: 4px; + text-overflow: ellipsis; + transition: color 0.3s; + white-space: nowrap; + + [class^='el-icon'] { + height: 100%; + margin-right: 7px; + color: var(--color-text-light); + line-height: inherit; + } + } + + @include mixins.e(item-status-label) { + position: absolute; + right: 5px; + top: 0; + line-height: inherit; + display: none; + } + + @include mixins.e(item-delete) { + position: absolute; + right: 10px; + top: 0; + font-size: 12px; + color: var(--color-text-dark); + display: none; + + &:hover { + color: var(--color-primary); + } + } + + @include mixins.m(picture-card) { + margin: 0; + display: inline; + vertical-align: top; + + .el-upload-list__item { + overflow: hidden; + background-color: #fff; + border: 1px solid #c0ccda; + border-radius: 6px; + box-sizing: border-box; + width: 148px; + height: 148px; + margin: 0 8px 8px 0; + display: inline-block; + + .el-icon-check, + .el-icon-circle-check { + color: var.$color-white; + } + + .el-icon-close { + display: none; + } + &:hover { + .el-upload-list__item-status-label { + display: none; + } + + .el-progress__text { + display: block; + } + } + } + + .el-upload-list__item-name { + display: none; + } + + .el-upload-list__item-thumbnail { + width: 100%; + height: 100%; + } + + .el-upload-list__item-status-label { + position: absolute; + right: -15px; + top: -6px; + width: 40px; + height: 24px; + background: #13ce66; + text-align: center; + transform: rotate(45deg); + box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); + + i { + font-size: 12px; + margin-top: 11px; + transform: rotate(-45deg); + } + } + + .el-upload-list__item-actions { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + cursor: default; + text-align: center; + color: #fff; + opacity: 0; + font-size: 20px; + background-color: rgba(0, 0, 0, 0.5); + transition: opacity 0.3s; + &::after { + display: inline-block; + content: ''; + height: 100%; + vertical-align: middle; + } + + span { + display: none; + cursor: pointer; + } + + span + span { + margin-left: 15px; + } + + .el-upload-list__item-delete { + position: static; + font-size: inherit; + color: inherit; + } + + &:hover { + opacity: 1; + span { + display: inline-block; + } + } + } + + .el-progress { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + bottom: auto; + width: 126px; + + .el-progress__text { + top: 50%; + } + } + } + + @include mixins.m(picture) { + .el-upload-list__item { + overflow: hidden; + z-index: 0; + background-color: #fff; + border: 1px solid #c0ccda; + border-radius: 6px; + box-sizing: border-box; + margin-top: 10px; + padding: 10px 10px 10px 90px; + height: 92px; + + .el-icon-check, + .el-icon-circle-check { + color: var.$color-white; + } + + &:hover { + .el-upload-list__item-status-label { + background: transparent; + box-shadow: none; + top: -2px; + right: -12px; + } + + .el-progress__text { + display: block; + } + } + + &.is-success { + .el-upload-list__item-name { + line-height: 70px; + margin-top: 0; + i { + display: none; + } + } + } + } + + .el-upload-list__item-thumbnail { + vertical-align: middle; + display: inline-block; + width: 70px; + height: 70px; + float: left; + position: relative; + z-index: 1; + margin-left: -80px; + background-color: var.$color-white; + } + + .el-upload-list__item-name { + display: block; + margin-top: 20px; + + i { + font-size: 70px; + line-height: 1; + position: absolute; + left: 9px; + top: 10px; + } + } + + .el-upload-list__item-status-label { + position: absolute; + right: -17px; + top: -7px; + width: 46px; + height: 26px; + background: #13ce66; + text-align: center; + transform: rotate(45deg); + box-shadow: 0 1px 1px #ccc; + + i { + font-size: 12px; + margin-top: 12px; + transform: rotate(-45deg); + } + } + + .el-progress { + position: relative; + top: -7px; + } + } +} + +@include mixins.b(upload-cover) { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 10; + cursor: default; + @include utils.utils-vertical-center; + + img { + display: block; + width: 100%; + height: 100%; + } + + @include mixins.e(label) { + position: absolute; + right: -15px; + top: -6px; + width: 40px; + height: 24px; + background: #13ce66; + text-align: center; + transform: rotate(45deg); + box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); + + i { + font-size: 12px; + margin-top: 11px; + transform: rotate(-45deg); + color: #fff; + } + } + + @include mixins.e(progress) { + display: inline-block; + vertical-align: middle; + position: static; + width: 243px; + + + .el-upload__inner { + opacity: 0; + } + } + + @include mixins.e(content) { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + @include mixins.e(interact) { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(#000, 0.72); + text-align: center; + + .btn { + display: inline-block; + color: var.$color-white; + font-size: 14px; + cursor: pointer; + vertical-align: middle; + transition: var.$md-fade-transition; + margin-top: 60px; + + i { + margin-top: 0; + } + + span { + opacity: 0; + transition: opacity 0.15s linear; + } + + &:not(:first-child) { + margin-left: 35px; + } + + &:hover { + transform: translateY(-13px); + + span { + opacity: 1; + } + } + + i { + color: var.$color-white; + display: block; + font-size: 24px; + line-height: inherit; + margin: 0 auto 5px; + } + } + } + + @include mixins.e(title) { + position: absolute; + bottom: 0; + left: 0; + background-color: var.$color-white; + height: 36px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: normal; + text-align: left; + padding: 0 10px; + margin: 0; + line-height: 36px; + font-size: 14px; + color: var(--color-text-dark); + } + + + .el-upload__inner { + opacity: 0; + position: relative; + z-index: 1; + } +} diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json new file mode 100644 index 0000000000..91298452c5 --- /dev/null +++ b/packages/design-system/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "strict": true, + "jsx": "preserve", + "importHelpers": true, + "moduleResolution": "node", + "experimentalDecorators": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "sourceMap": true, + "baseUrl": ".", + "types": ["webpack-env", "jest"], + "paths": { + "@/*": ["src/*"] + }, + "lib": ["esnext", "dom", "dom.iterable", "scripthost"] + }, + "include": [ + "src/**/*.ts", + "src/**/*.tsx", + "src/**/*.vue", + "tests/**/*.ts", + "tests/**/*.tsx" + ], + "exclude": ["node_modules"] +} diff --git a/packages/design-system/tslint.json b/packages/design-system/tslint.json new file mode 100644 index 0000000000..0442c6446e --- /dev/null +++ b/packages/design-system/tslint.json @@ -0,0 +1,80 @@ +{ + "linterOptions": { + "exclude": ["node_modules/**/*", "../../node_modules/**/*"] + }, + "defaultSeverity": "error", + "jsRules": {}, + "rules": { + "array-type": [true, "array-simple"], + "arrow-return-shorthand": true, + "ban": [ + true, + { + "name": "Array", + "message": "tsstyle#array-constructor" + } + ], + "ban-types": [ + true, + ["Object", "Use {} instead."], + ["String", "Use 'string' instead."], + ["Number", "Use 'number' instead."], + ["Boolean", "Use 'boolean' instead."] + ], + "class-name": true, + "curly": [true, "ignore-same-line"], + "forin": true, + "jsdoc-format": true, + "label-position": true, + "indent": [true, "tabs", 2], + "member-access": [true, "no-public"], + "new-parens": true, + "no-angle-bracket-type-assertion": true, + "no-any": true, + "no-arg": true, + "no-conditional-assignment": true, + "no-construct": true, + "no-debugger": true, + // "no-default-export": true, + "no-duplicate-variable": true, + "no-inferrable-types": true, + "no-namespace": [true, "allow-declarations"], + "no-reference": true, + "no-string-throw": true, + "no-unused-expression": true, + "no-var-keyword": true, + "object-literal-shorthand": true, + "only-arrow-functions": [ + true, + "allow-declarations", + "allow-named-functions" + ], + "prefer-const": true, + "radix": true, + "semicolon": [true, "always", "ignore-bound-class-methods"], + "switch-default": true, + "trailing-comma": [ + true, + { + "multiline": { + "objects": "always", + "arrays": "always", + "functions": "always", + "typeLiterals": "ignore" + }, + "esSpecCompliant": true + } + ], + "triple-equals": [true, "allow-null-check"], + "use-isnan": true, + "quotes": ["error", "single"], + "variable-name": [ + true, + "check-format", + "ban-keywords", + "allow-leading-underscore", + "allow-trailing-underscore" + ] + }, + "rulesDirectory": [] +} diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json index 7757447075..1b4f190d98 100644 --- a/packages/editor-ui/package.json +++ b/packages/editor-ui/package.json @@ -25,15 +25,16 @@ "test:unit": "vue-cli-service test:unit" }, "dependencies": { + "n8n-design-system": "~0.1.0", "timeago.js": "^4.0.2", "v-click-outside": "^3.1.2", "vue-fragment": "^1.5.2" }, "devDependencies": { "@beyonk/google-fonts-webpack-plugin": "^1.5.0", - "@fortawesome/fontawesome-svg-core": "^1.2.19", - "@fortawesome/free-solid-svg-icons": "^5.9.0", - "@fortawesome/vue-fontawesome": "^0.1.6", + "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-solid-svg-icons": "^5.15.3", + "@fortawesome/vue-fontawesome": "^2.0.2", "@types/dateformat": "^3.0.0", "@types/express": "^4.17.6", "@types/file-saver": "^2.0.1", @@ -43,16 +44,16 @@ "@types/node": "^14.14.40", "@types/quill": "^2.0.1", "@types/uuid": "^8.3.0", - "@typescript-eslint/eslint-plugin": "^2.13.0", - "@typescript-eslint/parser": "^2.13.0", - "@vue/cli-plugin-babel": "^4.1.2", - "@vue/cli-plugin-eslint": "^4.1.2", - "@vue/cli-plugin-typescript": "~4.5.6", - "@vue/cli-plugin-unit-jest": "^4.1.2", - "@vue/cli-service": "^3.11.0", + "@typescript-eslint/eslint-plugin": "^4.18.0", + "@typescript-eslint/parser": "^4.18.0", + "@vue/cli-plugin-babel": "~4.5.0", + "@vue/cli-plugin-eslint": "~4.5.0", + "@vue/cli-plugin-typescript": "~4.5.0", + "@vue/cli-plugin-unit-jest": "~4.5.0", + "@vue/cli-service": "~4.5.0", "@vue/eslint-config-standard": "^5.0.1", - "@vue/eslint-config-typescript": "~5.0.1", - "@vue/test-utils": "^1.0.0-beta.24", + "@vue/eslint-config-typescript": "^7.0.0", + "@vue/test-utils": "^1.0.3", "axios": "^0.21.1", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.0.1", @@ -61,7 +62,7 @@ "element-ui": "~2.13.0", "eslint": "^6.8.0", "eslint-plugin-import": "^2.19.1", - "eslint-plugin-vue": "^6.1.1", + "eslint-plugin-vue": "^6.2.2", "file-saver": "^2.0.2", "flatted": "^2.0.0", "jquery": "^3.4.1", @@ -71,23 +72,23 @@ "lodash.get": "^4.4.2", "lodash.set": "^4.3.2", "n8n-workflow": "~0.65.0", - "node-sass": "^4.12.0", + "sass": "^1.26.5", "normalize-wheel": "^1.0.1", "prismjs": "^1.17.1", "quill": "^2.0.0-dev.3", "quill-autoformat": "^0.1.1", - "sass-loader": "^8.0.0", + "sass-loader": "^8.0.2", "string-template-parser": "^1.2.6", "ts-jest": "^26.3.0", "tslint": "^6.1.2", "typescript": "~3.9.7", "uuid": "^8.3.0", - "vue": "^2.6.9", + "vue": "^2.6.11", "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0", "vue-json-pretty": "1.7.1", "vue-prism-editor": "^0.3.0", "vue-router": "^3.0.6", - "vue-template-compiler": "^2.5.17", + "vue-template-compiler": "^2.6.11", "vue-typed-mixins": "^0.2.0", "vue2-touch-events": "^3.2.1", "vuex": "^3.1.1" diff --git a/packages/editor-ui/src/components/About.vue b/packages/editor-ui/src/components/About.vue index 8b2e901f81..a9bb49f323 100644 --- a/packages/editor-ui/src/components/About.vue +++ b/packages/editor-ui/src/components/About.vue @@ -28,9 +28,7 @@
- - Close - +
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue index 3a737c1f0f..3945a356ba 100644 --- a/packages/editor-ui/src/components/BinaryDataDisplay.vue +++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue @@ -1,14 +1,13 @@ @@ -123,3 +125,11 @@ export default mixins(showMessage, workflowHelpers).extend({ }, }); + + diff --git a/packages/editor-ui/src/components/Error/NodeViewError.vue b/packages/editor-ui/src/components/Error/NodeViewError.vue index 4c86eb2571..2f0243f3d9 100644 --- a/packages/editor-ui/src/components/Error/NodeViewError.vue +++ b/packages/editor-ui/src/components/Error/NodeViewError.vue @@ -37,9 +37,9 @@ Data below may contain sensitive information. Proceed with caution when sharing.
- - - +
+ +
- + Filters: - - - + + - - + + -   - - - - + + - - + + -   - - + Auto refresh @@ -39,7 +35,7 @@
Selected: {{numSelected}} / ~{{finishedExecutionsCount}} - +
@@ -76,10 +72,10 @@ - + diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue index 42b25b29bd..db3aaa6629 100644 --- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue +++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue @@ -77,10 +77,6 @@ export default mixins( &.expanded { padding-left: $--sidebar-expanded-width; } - - * { - box-sizing: border-box; - } } .top-menu { diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue index f214802765..4ca6233512 100644 --- a/packages/editor-ui/src/components/MainSidebar.vue +++ b/packages/editor-ui/src/components/MainSidebar.vue @@ -492,7 +492,7 @@ export default mixins( diff --git a/packages/editor-ui/src/components/MultipleParameter.vue b/packages/editor-ui/src/components/MultipleParameter.vue index 2aeef6df26..36f2570d04 100644 --- a/packages/editor-ui/src/components/MultipleParameter.vue +++ b/packages/editor-ui/src/components/MultipleParameter.vue @@ -3,10 +3,10 @@
{{parameter.displayName}}: - -
+ +
- +
@@ -21,7 +21,7 @@
- +
@@ -29,7 +29,7 @@
Currently no items exist
- {{ addButtonText }} +
@@ -141,10 +141,6 @@ export default mixins(genericHelpers) margin: 0.5em 0 0em 2em; } -.add-item { - width: 100%; -} - .delete-item { display: none; position: absolute; diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 99a53d15e7..4955b5c13b 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -2,18 +2,18 @@
- +
- +
- +
- +
@@ -218,6 +218,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext height: 100px; .node-description { + line-height: 1.5; position: absolute; bottom: -55px; left: -50px; @@ -307,7 +308,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext .node-info-icon { position: absolute; - top: -18px; + top: -14px; right: 12px; z-index: 11; @@ -350,9 +351,8 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext text-align: center; .option { - width: 20px; + width: 28px; display: inline-block; - padding: 0 0.3em; &.touch { display: none; diff --git a/packages/editor-ui/src/components/NodeCreator/MainPanel.vue b/packages/editor-ui/src/components/NodeCreator/MainPanel.vue index bd7f665dbd..c6475d3695 100644 --- a/packages/editor-ui/src/components/NodeCreator/MainPanel.vue +++ b/packages/editor-ui/src/components/NodeCreator/MainPanel.vue @@ -279,15 +279,15 @@ export default mixins(externalHooks).extend({ diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue index b15c002674..f1779dd1ba 100644 --- a/packages/editor-ui/src/components/ParameterInputFull.vue +++ b/packages/editor-ui/src/components/ParameterInputFull.vue @@ -1,14 +1,14 @@ @@ -74,7 +74,12 @@ export default Vue \ No newline at end of file + +.saved { + color: $--custom-font-very-light; + font-size: 12px; + font-weight: 600; + line-height: 12px; + text-align: center; + padding: var(--spacing-2xs) var(--spacing-xs); +} + diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue index 98b673f054..26e5674e3a 100644 --- a/packages/editor-ui/src/components/TagsDropdown.vue +++ b/packages/editor-ui/src/components/TagsDropdown.vue @@ -1,6 +1,6 @@ @@ -235,31 +236,12 @@ export default mixins(showMessage).extend({ \ No newline at end of file + diff --git a/packages/editor-ui/src/components/TagsManager/TagsManager.vue b/packages/editor-ui/src/components/TagsManager/TagsManager.vue index 8bb3fead02..1ba310a3db 100644 --- a/packages/editor-ui/src/components/TagsManager/TagsManager.vue +++ b/packages/editor-ui/src/components/TagsManager/TagsManager.vue @@ -24,7 +24,7 @@ diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue index 6afb3b6e0d..b47df283ba 100644 --- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue +++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue @@ -13,13 +13,13 @@ diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue index e92322d2a1..2014108221 100644 --- a/packages/editor-ui/src/components/WorkflowSettings.vue +++ b/packages/editor-ui/src/components/WorkflowSettings.vue @@ -1,133 +1,132 @@