diff --git a/packages/design-system/.browserslistrc b/packages/design-system/.browserslistrc new file mode 100644 index 0000000000..214388fe43 --- /dev/null +++ b/packages/design-system/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not dead diff --git a/packages/design-system/.eslintrc.js b/packages/design-system/.eslintrc.js new file mode 100644 index 0000000000..d7c3e18490 --- /dev/null +++ b/packages/design-system/.eslintrc.js @@ -0,0 +1,32 @@ +module.exports = { + root: true, + env: { + node: true, + }, + extends: [ + "plugin:vue/essential", + "eslint:recommended", + "@vue/typescript/recommended", + "@vue/prettier", + "@vue/prettier/@typescript-eslint", + ], + parserOptions: { + ecmaVersion: 2020, + }, + rules: { + "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", + "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", + }, + ignorePatterns: ["gulpfile.js"], + overrides: [ + { + files: [ + "**/__tests__/*.{j,t}s?(x)", + "**/tests/unit/**/*.spec.{j,t}s?(x)", + ], + env: { + jest: true, + }, + }, + ], +}; diff --git a/packages/design-system/.github/workflows/deploy.yml b/packages/design-system/.github/workflows/deploy.yml new file mode 100644 index 0000000000..0bd6d45ece --- /dev/null +++ b/packages/design-system/.github/workflows/deploy.yml @@ -0,0 +1,40 @@ +name: Deploy Docs + +on: + push: + branches: + - main + +jobs: + build: + runs-on: ubuntu-latest + env: + NODE_OPTIONS: '--max_old_space_size=4096' + steps: + - uses: actions/checkout@v2 + - name: Build and deploy + uses: actions/setup-node@v1 + with: + node-version: 14.x + persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token + fetch-depth: 0 # otherwise, you will failed to push refs to dest repo + - name: build + run: | + npm install + npm run build:storybook + cd storybook-static + - name: commit + run: | + cd storybook-static + git init + git config --local user.email "github-actions@users.noreply.github.com" + git config --local user.name "github-actions" + git add -A + git commit -m "Deploy" -a + - name: push + uses: ad-m/github-push-action@master + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + branch: gh-pages + force: true + directory: 'storybook-static' diff --git a/packages/design-system/.gitignore b/packages/design-system/.gitignore new file mode 100644 index 0000000000..498f7b11d5 --- /dev/null +++ b/packages/design-system/.gitignore @@ -0,0 +1,28 @@ +.DS_Store +node_modules +/dist +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? + +theme/dist/* +!theme/dist/fonts +!theme/dist/index.css diff --git a/packages/design-system/.gitmodules b/packages/design-system/.gitmodules new file mode 100644 index 0000000000..e69de29bb2 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..fd895b51a8 --- /dev/null +++ b/packages/design-system/.storybook/font-awesome-icons.js @@ -0,0 +1,166 @@ + +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..3f8b0d5005 --- /dev/null +++ b/packages/design-system/.storybook/main.js @@ -0,0 +1,46 @@ +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; + }, +} \ No newline at end of file diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js new file mode 100644 index 0000000000..e0931629d9 --- /dev/null +++ b/packages/design-system/.storybook/preview.js @@ -0,0 +1,58 @@ +import './font-awesome-icons'; +import './storybook.scss'; + +import Vue from 'vue'; + +// 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'] + } + } +} \ No newline at end of file diff --git a/packages/design-system/.storybook/storybook.scss b/packages/design-system/.storybook/storybook.scss new file mode 100644 index 0000000000..97b6afaa65 --- /dev/null +++ b/packages/design-system/.storybook/storybook.scss @@ -0,0 +1,8 @@ +@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" diff --git a/packages/design-system/LICENSE.md b/packages/design-system/LICENSE.md new file mode 100644 index 0000000000..3dd835dee5 --- /dev/null +++ b/packages/design-system/LICENSE.md @@ -0,0 +1,230 @@ +“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 2020 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..f52c891ca0 --- /dev/null +++ b/packages/design-system/README.md @@ -0,0 +1,40 @@ +# n8n-design-system + +A component system for [n8n](https://n8n.io) using Storybook to preview. + +You can [preview project here](https://n8n-io.github.io/n8n-design-system/index.html). + +## 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 +``` \ No newline at end of file diff --git a/packages/design-system/babel.config.js b/packages/design-system/babel.config.js new file mode 100644 index 0000000000..162a3ea97c --- /dev/null +++ b/packages/design-system/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ["@vue/cli-plugin-babel/preset"], +}; diff --git a/packages/design-system/gulpfile.js b/packages/design-system/gulpfile.js new file mode 100644 index 0000000000..6ca1de24d2 --- /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/*.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..f9d5bfe80e --- /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..e684620c0b --- /dev/null +++ b/packages/design-system/package.json @@ -0,0 +1,78 @@ +{ + "name": "n8n-design-system", + "version": "0.1.0", + "private": true, + "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-design-system.git" + }, + "scripts": { + "build": "vue-cli-service build --target lib ./src/main.js --report", + "build:storybook": "build-storybook", + "storybook": "start-storybook -p 6006", + "test:unit": "vue-cli-service test:unit", + "lint": "vue-cli-service lint", + "build:theme": "gulp build:theme", + "watch:theme": "gulp watch:theme", + "prepare": "gulp build:theme; npm run build" + }, + "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": "^24.0.19", + "@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.7.2", + "eslint-plugin-prettier": "^3.3.1", + "eslint-plugin-vue": "^6.2.2", + "fibers": "^5.0.0", + "gulp": "^4.0.2", + "prettier": "^2.2.1", + "sass": "^1.26.5", + "sass-loader": "^8.0.2", + "storybook-addon-designs": "^6.0.1", + "typescript": "~4.1.5", + "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..cc005d314d --- /dev/null +++ b/packages/design-system/src/components/N8nButton/Button.stories.js @@ -0,0 +1,123 @@ +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: ["sm", "md", "lg"], + }, + }, + loading: { + control: { + type: "boolean", + }, + }, + icon: { + control: { + type: "text", + }, + }, + iconSize: { + control: { + type: "select", + options: ["sm", "md", "lg"], + }, + }, + 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..41564fd474 --- /dev/null +++ b/packages/design-system/src/components/N8nButton/Button.vue @@ -0,0 +1,300 @@ + + + + + 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..48e238c7df --- /dev/null +++ b/packages/design-system/src/components/N8nButton/index.d.ts @@ -0,0 +1,37 @@ +import { N8nComponent, N8nComponentSize } from "../component"; + +/** Button type */ +export type ButtonType = "primary" | "outline" | "light"; + +/** Button Component */ +export declare class N8nButton extends N8nComponent { + /** Button text */ + label: string; + + /** Button title on hover */ + title: string; + + /** 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; +} 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..e4c0ab2f2c --- /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..76f279463b --- /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: ["sm", "md", "lg"], + }, + }, + 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..0351ba4d0b --- /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..9135c281b2 --- /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..3da00c9b7a --- /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..75bb8c13cc --- /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: ["sm", "md", "lg", "xl"], + }, + }, + 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..e15d675486 --- /dev/null +++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue @@ -0,0 +1,61 @@ + + + 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..131ec8b46e --- /dev/null +++ b/packages/design-system/src/components/N8nIconButton/index.d.ts @@ -0,0 +1,22 @@ +import { N8nComponent, N8nComponentSize } from "../component"; + +/** Icon Button Component */ +export declare class N8nIconButton extends N8nComponent { + /** Button title on hover */ + title: string; + + /** Button size */ + size: N8nComponentSize | "xl"; + + /** 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; +} 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..1e618378d0 --- /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/N8nSpinner/Spinner.stories.js b/packages/design-system/src/components/N8nSpinner/Spinner.stories.js new file mode 100644 index 0000000000..a835f64c08 --- /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: ["sm", "md", "lg"], + }, + }, + }, +}; + +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..374407e4b8 --- /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..c07959d4c8 --- /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..8e47ef9a10 --- /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/component.d.ts b/packages/design-system/src/components/component.d.ts new file mode 100644 index 0000000000..70a036bd28 --- /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 = "lg" | "md" | "sm"; 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..dee4c7c617 --- /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..001d3019e3 --- /dev/null +++ b/packages/design-system/src/components/index.js @@ -0,0 +1,6 @@ +import N8nButton from "./N8nButton"; +import N8nIcon from "./N8nIcon"; +import N8nIconButton from "./N8nIconButton"; +import N8nSpinner from "./N8nSpinner"; + +export { N8nButton, N8nIcon, N8nIconButton, N8nSpinner }; 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..60205b0a0a --- /dev/null +++ b/packages/design-system/src/docs/Introduction.stories.mdx @@ -0,0 +1,211 @@ +import { Meta } from '@storybook/addon-docs'; +import Code from './assets/code-brackets.svg'; +import Colors from './assets/colors.svg'; +import Comments from './assets/comments.svg'; +import Direction from './assets/direction.svg'; +import Flow from './assets/flow.svg'; +import Plugin from './assets/plugin.svg'; +import Repo from './assets/repo.svg'; +import StackAlt from './assets/stackalt.svg'; + + + + + +# Welcome to Storybook + +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + +Browse example stories now by navigating to them in the sidebar. +View their code in the `src/stories` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. + +
Configure
+ +
+ + plugin + + Presets for popular tools + Easy setup for TypeScript, SCSS and more. + + + + Build + + Build configuration + How to customize webpack and Babel + + + + colors + + Styling + How to load and configure CSS libraries + + + + flow + + Data + Providers and mocking for data libraries + + +
+ +
Learn
+ +
+ + repo + + Storybook documentation + Configure, customize, and extend + + + + direction + + In-depth guides + Best practices from leading teams + + + + code + + GitHub project + View the source and add issues + + + + comments + + Discord chat + Chat with maintainers and the community + + +
+ +
+ TipEdit the Markdown in{' '} + src/stories/Introduction.stories.mdx +
diff --git a/packages/design-system/src/docs/assets/code-brackets.svg b/packages/design-system/src/docs/assets/code-brackets.svg new file mode 100644 index 0000000000..73de947760 --- /dev/null +++ b/packages/design-system/src/docs/assets/code-brackets.svg @@ -0,0 +1 @@ +illustration/code-brackets \ No newline at end of file diff --git a/packages/design-system/src/docs/assets/colors.svg b/packages/design-system/src/docs/assets/colors.svg new file mode 100644 index 0000000000..17d58d516e --- /dev/null +++ b/packages/design-system/src/docs/assets/colors.svg @@ -0,0 +1 @@ +illustration/colors \ No newline at end of file diff --git a/packages/design-system/src/docs/assets/comments.svg b/packages/design-system/src/docs/assets/comments.svg new file mode 100644 index 0000000000..6493a139f5 --- /dev/null +++ b/packages/design-system/src/docs/assets/comments.svg @@ -0,0 +1 @@ +illustration/comments \ No newline at end of file diff --git a/packages/design-system/src/docs/assets/direction.svg b/packages/design-system/src/docs/assets/direction.svg new file mode 100644 index 0000000000..65676ac272 --- /dev/null +++ b/packages/design-system/src/docs/assets/direction.svg @@ -0,0 +1 @@ +illustration/direction \ No newline at end of file diff --git a/packages/design-system/src/docs/assets/flow.svg b/packages/design-system/src/docs/assets/flow.svg new file mode 100644 index 0000000000..8ac27db403 --- /dev/null +++ b/packages/design-system/src/docs/assets/flow.svg @@ -0,0 +1 @@ +illustration/flow \ No newline at end of file diff --git a/packages/design-system/src/docs/assets/plugin.svg b/packages/design-system/src/docs/assets/plugin.svg new file mode 100644 index 0000000000..29e5c690c0 --- /dev/null +++ b/packages/design-system/src/docs/assets/plugin.svg @@ -0,0 +1 @@ +illustration/plugin \ No newline at end of file diff --git a/packages/design-system/src/docs/assets/repo.svg b/packages/design-system/src/docs/assets/repo.svg new file mode 100644 index 0000000000..f386ee902c --- /dev/null +++ b/packages/design-system/src/docs/assets/repo.svg @@ -0,0 +1 @@ +illustration/repo \ No newline at end of file diff --git a/packages/design-system/src/docs/assets/stackalt.svg b/packages/design-system/src/docs/assets/stackalt.svg new file mode 100644 index 0000000000..9b7ad27435 --- /dev/null +++ b/packages/design-system/src/docs/assets/stackalt.svg @@ -0,0 +1 @@ +illustration/stackalt \ No newline at end of file diff --git a/packages/design-system/src/main.d.ts b/packages/design-system/src/main.d.ts new file mode 100644 index 0000000000..2cfd2b2c43 --- /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..77de41c558 --- /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..bb2c199ccb --- /dev/null +++ b/packages/design-system/src/shims-element-ui.d.ts @@ -0,0 +1 @@ +declare module "element-ui/packages/button"; 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..2bcdf9fbcb --- /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..0660bd67a5 --- /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..1d6aa5136e --- /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..a77e6e1afa --- /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..1ca6fe9cde --- /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..6c52b3759f --- /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..36cccb88a6 --- /dev/null +++ b/packages/design-system/src/styleguide/border.stories.mdx @@ -0,0 +1,50 @@ +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..3e5c80e666 --- /dev/null +++ b/packages/design-system/src/styleguide/colors.stories.mdx @@ -0,0 +1,132 @@ +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, + } + }} + + \ No newline at end of file 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..0aeed2a26e --- /dev/null +++ b/packages/design-system/src/styleguide/fonts.stories.mdx @@ -0,0 +1,62 @@ +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..2e167d4b5f --- /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..e07eac296f --- /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, + } + }} + + \ No newline at end of file diff --git a/packages/design-system/theme/README.md b/packages/design-system/theme/README.md new file mode 100644 index 0000000000..9ba4301353 --- /dev/null +++ b/packages/design-system/theme/README.md @@ -0,0 +1,39 @@ +# element-theme-n8n +> element component chalk theme by css variable. + +[Online preview](https://n8n-io.github.io/element-theme-n8n/) + +## Compatibility + +CSS Variable +https://caniuse.com/css-variables + +## Installation +```shell +npm i element-theme-n8n -S +``` + +## Usage + +Use Sass import +```css +@import 'element-theme-n8n'; +``` + +Or Use webpack +```javascript +import 'element-theme-n8n'; +``` + +Or +```html + +``` + +## Import on demand +```javascript +import 'element-theme-n8n/dist/input.css'; +import 'element-theme-n8n/dist/select.css'; + +// ... +``` diff --git a/packages/design-system/theme/docs.css b/packages/design-system/theme/docs.css new file mode 100644 index 0000000000..2cd2b7eb05 --- /dev/null +++ b/packages/design-system/theme/docs.css @@ -0,0 +1,1935 @@ +.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:.2s +} +.demo-block.hover { + box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.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 .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:.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:.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:.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,.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 .2s,opacity .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%,.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:.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:.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:.2s; + padding-bottom:6px; + user-select:none +} +.nav-dropdown span[data-v-70469f40]:hover { + cursor:pointer +} +.nav-dropdown i[data-v-70469f40] { + transition:.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 .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:.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:.3s; + color:#999; + vertical-align:baseline +} +.footer-nav-link { + cursor:pointer; + transition:.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:.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 .15s linear +} +.icon-list li i { + display:block; + font-size:32px; + margin-bottom:15px; + color:#606266; + transition:color .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,.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,.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,.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,.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:.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:.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%,.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%,.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:.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 .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:.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} \ No newline at end of file diff --git a/packages/design-system/theme/index.html b/packages/design-system/theme/index.html new file mode 100644 index 0000000000..9595598fc4 --- /dev/null +++ b/packages/design-system/theme/index.html @@ -0,0 +1,1126 @@ + + + + + + + + + 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标签上 + + + +
+ + + + + + + + + \ No newline at end of file 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..e5acd4425c --- /dev/null +++ b/packages/design-system/theme/src/_tokens.dark.scss @@ -0,0 +1,139 @@ +/** + * Do not edit directly + * Generated on Fri, 23 Jul 2021 08:38:28 GMT + */ + +@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 } \ No newline at end of file diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss new file mode 100644 index 0000000000..bc8686617c --- /dev/null +++ b/packages/design-system/theme/src/_tokens.scss @@ -0,0 +1,180 @@ +/** + * Do not edit directly + * Generated on Fri, 23 Jul 2021 10:40:15 GMT + */ + +@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: 23%; + --color-primary-shade-1: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-shade-1-l)); + + --color-secondary-h: 247.4; + --color-secondary-s: 100%; + --color-secondary-l: 65.1%; + --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)); + + // todo placeholder color - hsl(222,16.7%,88.2%) - change after roll out inputs + --color-text-lighter-h: 220; + --color-text-lighter-s: 10.5%; + --color-text-lighter-l: 77.6%; + --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-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; + + --button-radius-default: 20px; + --button-shade-active: 10%; +} + +:root { @include theme } \ No newline at end of file diff --git a/packages/design-system/theme/src/alert.scss b/packages/design-system/theme/src/alert.scss new file mode 100644 index 0000000000..658ccd22b8 --- /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 .2s; + + @include mixins.when(light) { + .el-alert__closebtn { + color: var.$color-text-placeholder; + } + } + + @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..a20e547b24 --- /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..519ae85f99 --- /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-light; + 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-primary; + 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..20eb7fd221 --- /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..e134a49eb7 --- /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, .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..0945461ed5 --- /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..0994f99c30 --- /dev/null +++ b/packages/design-system/theme/src/breadcrumb.scss @@ -0,0 +1,55 @@ +@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-placeholder; + + &[class*=icon] { + margin: 0 6px; + font-weight: normal; + } + } + + @include mixins.e(item) { + float: left; + + @include mixins.e(inner) { + color: var.$color-text-primary; + + &.is-link, & a { + font-weight: bold; + text-decoration: none; + transition: var.$color-transition-base; + color: var.$color-text-primary; + + &:hover { + color: var(--color-primary); + cursor: pointer; + } + } + } + + &:last-child { + .el-breadcrumb__inner, + .el-breadcrumb__inner a { + &, &:hover { + font-weight: normal; + color: var.$color-text-primary; + 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..4c24a5d7d8 --- /dev/null +++ b/packages/design-system/theme/src/button-group.scss @@ -0,0 +1,85 @@ +@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); + } + } + } + } + \ No newline at end of file diff --git a/packages/design-system/theme/src/button.scss b/packages/design-system/theme/src/button.scss new file mode 100644 index 0000000000..705f86f397 --- /dev/null +++ b/packages/design-system/theme/src/button.scss @@ -0,0 +1,130 @@ +@charset "UTF-8"; +@use 'mixins/mixins'; +@use 'mixins/utils'; +@use 'mixins/function'; + +$active-shade-percent: 10%; +$color-primary-shade: function.lightness( + --color-primary-h, + --color-primary-s, + --color-primary-l, + -($active-shade-percent) +); + +$font-weight: var(--font-weight-bold); +$font-size: var(--button-font-size, var(--font-size-s)); + +$padding-vertical: var(--button-padding-vertical, var(--spacing-xs)); +$padding-horizontal: var(--button-padding-horizontal, var(--spacing-m)); + +$border-width: var(--border-width-base); +$border-style: var(--border-style-base); +$border-radius: var(--button-border-radius, 20px); +$border-color: var(--button-border-color, var(--color-primary)); + +$color: var(--button-color, var(--color-text-xlight)); +$background-color: var(--button-background-color, var(--color-primary)); + +$active-color: var(--button-active-color, var(--color-text-xlight)); +$active-border-color: var(--button-active-border-color, $color-primary-shade); +$active-background-color: var(--button-active-background-color, $color-primary-shade); + +$disabled-color: var(--color-text-light); +$disabled-background-color: var(--button-disabled-background-color, var(--color-foreground-base)); +$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: $border-width $border-color $border-style; + color: $color; + background-color: $background-color; + font-weight: $font-weight; + border-radius: $border-radius; + padding: $padding-vertical $padding-horizontal; + font-size: $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: $active-color; + border-color: $active-border-color; + background-color: $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: $disabled-color; + background-color: $disabled-background-color; + border-color: $disabled-border-color; + } + } + + @include mixins.when(circle) { + border-radius: 50%; + + --button-padding-vertical: var(--spacing-xs); + --button-padding-horizontal: var(--spacing-xs); + } + + @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..96c077466e --- /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-primary; + font-weight: normal; + } + + &:not(.is-range) { + td.prev, + td.next { + color: var.$color-text-placeholder; + } + } + + 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..aa9be8d717 --- /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-primary; + 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..13a5fb3d66 --- /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 .4s ease-in-out; + } + + @include mixins.m(card) { + width: 50%; + transition: transform .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: .2s; + } +} \ No newline at end of file diff --git a/packages/design-system/theme/src/carousel.scss b/packages/design-system/theme/src/carousel.scss new file mode 100644 index 0000000000..2e43d33218 --- /dev/null +++ b/packages/design-system/theme/src/carousel.scss @@ -0,0 +1,161 @@ +@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: .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: .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..1e0255c7e5 --- /dev/null +++ b/packages/design-system/theme/src/cascader-panel.scss @@ -0,0 +1,120 @@ +@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..10f3d702fb --- /dev/null +++ b/packages/design-system/theme/src/cascader.scss @@ -0,0 +1,182 @@ +@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 .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-placeholder; + color: var.$color-white; + + &:hover { + background-color: var.$color-text-secondary; + } + } + } + } + + @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-placeholder; + } + } +} 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..22d105735b --- /dev/null +++ b/packages/design-system/theme/src/checkbox.scss @@ -0,0 +1,363 @@ +@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-lighter; + 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 .25s cubic-bezier(.71,-.46,.29,1.46), + background-color .25s cubic-bezier(.71,-.46,.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 .15s ease-in .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..a53ca1286c --- /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%; + } + } +} \ No newline at end of file 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..50523b231a --- /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 .3s; + outline: none; + @include mixins.e(arrow) { + margin: 0 8px 0 auto; + transition: transform .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..215b817f09 --- /dev/null +++ b/packages/design-system/theme/src/color-picker.scss @@ -0,0 +1,365 @@ +@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-small(); + @include button.button-just-primary(); + } + + @include mixins.e(link-btn) { + @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, .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-lighter; + 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..7c22218fa4 --- /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 .2s ease; +} + +.v-modal-leave { + animation: v-modal-out .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..22c6127237 --- /dev/null +++ b/packages/design-system/theme/src/common/transition.scss @@ -0,0 +1,99 @@ +@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 .3s cubic-bezier(.55,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 .3s cubic-bezier(.55,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(.45, .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 .3s cubic-bezier(.55,0,.1,1); +} \ No newline at end of file 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..a071012b51 --- /dev/null +++ b/packages/design-system/theme/src/common/typography.scss @@ -0,0 +1,67 @@ +%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..a41b31be86 --- /dev/null +++ b/packages/design-system/theme/src/common/var.scss @@ -0,0 +1,980 @@ +@use "sass:math"; +@use "../mixins/function.scss"; + +// Special comment for theme configurator +// type|skipAutoTranslation|Category|Order +// skipAutoTranslation 1 + +/* Transition +-------------------------- */ +$all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default; +$fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; +$fade-linear-transition: opacity 200ms linear !default; +$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; +$border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default; +$color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; + +/* Color +-------------------------- */ +$color-white: #FFFFFF !default; +$color-black: #000000 !default; + +$color-primary-light-1: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 4%) !default; +$color-primary-light-2: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 8%) !default; +$color-primary-light-3: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 12%) !default; +$color-primary-light-4: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 16%) !default; +$color-primary-light-5: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 20%) !default; +$color-primary-light-6: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 24%) !default; +$color-primary-light-7: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 28%) !default; +$color-primary-light-8: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 32%) !default; +$color-primary-light-9: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 36%) !default; +$color-primary-light: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 30%) !default; +$color-primary-lighter: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 34%) !default; + +$color-success-light-1: function.lightness(--color-success-h, --color-success-s, --color-success-l, 4%) !default; +$color-success-light-3: function.lightness(--color-success-h, --color-success-s, --color-success-l, 12%) !default; +$color-success-light-5: function.lightness(--color-success-h, --color-success-s, --color-success-l, 20%) !default; +$color-success-light: function.lightness(--color-success-h, --color-success-s, --color-success-l, 41%) !default; +$color-success-lighter: function.lightness(--color-success-h, --color-success-s, --color-success-l, 48%) !default; + +$color-warning-light-1: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 4%) !default; +$color-warning-light-3: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 12%) !default; +$color-warning-light-5: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 20%) !default; +$color-warning-light: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 34%) !default; +$color-warning-lighter: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 40%) !default; + +$color-danger-light-1: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 4%) !default; +$color-danger-light-3: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 12%) !default; +$color-danger-light-5: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 20%) !default; +$color-danger-light: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 24%) !default; +$color-danger-lighter: var(--color-danger-tint-2); + +$color-info-light-1: function.lightness(--color-info-h, --color-info-s, --color-info-l, 4%) !default; +$color-info-light-3: function.lightness(--color-info-h, --color-info-s, --color-info-l, 12%) !default; +$color-info-light-5: function.lightness(--color-info-h, --color-info-s, --color-info-l, 20%) !default; +$color-info-lighter: function.lightness(--color-info-h, --color-info-s, --color-info-l, 39%) !default; + +/// color|1|Font Color|2 +$color-text-primary: var(--color-text-dark) !default; +/// color|1|Font Color|2 +$color-text-regular: var(--color-text-base) !default; +/// color|1|Font Color|2 +$color-text-secondary: var(--color-text-light) !default; +/// color|1|Font Color|2 +$color-text-placeholder: var(--color-text-lighter) !default; +/// color|1|Border Color|3 +$border-color-base: var(--color-foreground-base) !default; +/// color|1|Border Color|3 +$border-color-light: var(--color-foreground-base) !default; +/// color|1|Border Color|3 +$border-color-lighter: var(--color-foreground-light) !default; +/// color|1|Border Color|3 +$border-color-xlight: var(--color-foreground-light) !default; + +// Background +/// color|1|Background Color|4 +$background-color-base: var(--color-background-base) !default; + +/* Link +-------------------------- */ +$link-color: $color-primary-light-2 !default; +$link-hover-color: var(--color-primary) !default; + +/* Border +-------------------------- */ +$border-color-hover: $color-text-placeholder !default; +/// borderRadius|1|Radius|0 +$border-radius-circle: 100% !default; + +// Box-shadow +/// boxShadow|1|Shadow|1 +$box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default; +// boxShadow|1|Shadow|1 +$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default; +/// boxShadow|1|Shadow|1 +$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default; + +/* Fill +-------------------------- */ +$fill-base: $color-white !default; + +/* Typography +-------------------------- */ +$font-path: 'fonts' !default; +$font-display: 'auto' !default; +/// fontSize|1|Font Size|0 +$font-size-extra-large: var(--font-size-xl) !default; +/// fontSize|1|Font Size|0 +$font-size-large: var(--font-size-l) !default; +/// fontSize|1|Font Size|0 +$font-size-medium: var(--font-size-m) !default; +/// fontSize|1|Font Size|0 +$font-size-base: var(--font-size-s) !default; +/// fontSize|1|Font Size|0 +$font-size-small: var(--font-size-xs) !default; +/// fontSize|1|Font Size|0 +$font-size-extra-small: var(--font-size-2xs) !default; +/// fontWeight|1|Font Weight|1 +$font-weight-primary: var(--font-weight-semi-bold) !default; +/// fontLineHeight|1|Line Height|2 +$font-line-height-primary: 24px !default; +$font-color-disabled-base: #bbb !default; + +/* z-index +-------------------------- */ +$index-normal: 1 !default; +$index-top: 1000 !default; +$index-popper: 2000 !default; + +/* Disable base +-------------------------- */ +$disabled-fill-base: $background-color-base !default; +$disabled-color-base: $color-text-placeholder !default; +$disabled-border-base: $border-color-light !default; + +/* Icon +-------------------------- */ +$icon-color: #666 !default; +$icon-color-base: var(--color-info) !default; + +/* Checkbox +-------------------------- */ +/// fontSize||Font|1 +$checkbox-font-size: 14px !default; +/// fontWeight||Font|1 +$checkbox-font-weight: $font-weight-primary !default; +/// color||Color|0 +$checkbox-font-color: $color-text-primary !default; +$checkbox-input-height: 14px !default; +$checkbox-input-width: 14px !default; +/// borderRadius||Border|2 +$checkbox-border-radius: var(--border-radius-small); +/// color||Color|0 +$checkbox-background-color: $color-white !default; +$checkbox-input-border: var(--border-base) !default; + +/// color||Color|0 +$checkbox-disabled-border-color: $border-color-base !default; +$checkbox-disabled-input-fill: #edf2fc !default; +$checkbox-disabled-icon-color: $color-text-placeholder !default; + +$checkbox-disabled-checked-input-fill: $border-color-xlight !default; +$checkbox-disabled-checked-input-border-color: $border-color-base !default; +$checkbox-disabled-checked-icon-color: $color-text-placeholder !default; + +/// color||Color|0 +$checkbox-checked-font-color: var(--color-primary) !default; +$checkbox-checked-input-border-color: var(--color-primary) !default; +/// color||Color|0 +$checkbox-checked-background-color: var(--color-primary) !default; +$checkbox-checked-icon-color: $fill-base !default; + +$checkbox-input-border-color-hover: var(--color-primary) !default; +/// height||Other|4 +$checkbox-bordered-height: 40px !default; +/// padding||Spacing|3 +$checkbox-bordered-padding: 9px 20px 9px 10px !default; +/// padding||Spacing|3 +$checkbox-bordered-medium-padding: 7px 20px 7px 10px !default; +/// padding||Spacing|3 +$checkbox-bordered-small-padding: 5px 15px 5px 10px !default; +/// padding||Spacing|3 +$checkbox-bordered-mini-padding: 3px 15px 3px 10px !default; +$checkbox-bordered-medium-input-height: 14px !default; +$checkbox-bordered-medium-input-width: 14px !default; +/// height||Other|4 +$checkbox-bordered-medium-height: 36px !default; +$checkbox-bordered-small-input-height: 12px !default; +$checkbox-bordered-small-input-width: 12px !default; +/// height||Other|4 +$checkbox-bordered-small-height: 32px !default; +$checkbox-bordered-mini-input-height: 12px !default; +$checkbox-bordered-mini-input-width: 12px !default; +/// height||Other|4 +$checkbox-bordered-mini-height: 28px !default; + +/// color||Color|0 +$checkbox-button-checked-background-color: var(--color-primary) !default; +/// color||Color|0 +$checkbox-button-checked-font-color: $color-white !default; +/// color||Color|0 +$checkbox-button-checked-border-color: var(--color-primary) !default; + +/* Radio +-------------------------- */ +/// fontSize||Font|1 +$radio-font-size: $font-size-base !default; +/// fontWeight||Font|1 +$radio-font-weight: $font-weight-primary !default; +/// color||Color|0 +$radio-font-color: $color-text-primary !default; +$radio-input-height: 14px !default; +$radio-input-width: 14px !default; +/// borderRadius||Border|2 +$radio-input-border-radius: $border-radius-circle !default; +/// color||Color|0 +$radio-input-background-color: $color-white !default; +$radio-input-border: var(--border-base) !default; +/// color||Color|0 +$radio-input-border-color: $border-color-base !default; +/// color||Color|0 +$radio-icon-color: $color-white !default; + +$radio-disabled-input-border-color: $disabled-border-base !default; +$radio-disabled-input-fill: $disabled-fill-base !default; +$radio-disabled-icon-color: $disabled-fill-base !default; + +$radio-disabled-checked-input-border-color: $disabled-border-base !default; +$radio-disabled-checked-input-fill: $disabled-fill-base !default; +$radio-disabled-checked-icon-color: $color-text-placeholder !default; + +/// color||Color|0 +$radio-checked-font-color: var(--color-primary) !default; +/// color||Color|0 +$radio-checked-input-border-color: var(--color-primary) !default; +/// color||Color|0 +$radio-checked-input-background-color: $color-white !default; +/// color||Color|0 +$radio-checked-icon-color: var(--color-primary) !default; + +$radio-input-border-color-hover: var(--color-primary) !default; + +$radio-bordered-height: 40px !default; +$radio-bordered-padding: 12px 20px 0 10px !default; +$radio-bordered-medium-padding: 10px 20px 0 10px !default; +$radio-bordered-small-padding: 8px 15px 0 10px !default; +$radio-bordered-mini-padding: 6px 15px 0 10px !default; +$radio-bordered-medium-input-height: 14px !default; +$radio-bordered-medium-input-width: 14px !default; +$radio-bordered-medium-height: 36px !default; +$radio-bordered-small-input-height: 12px !default; +$radio-bordered-small-input-width: 12px !default; +$radio-bordered-small-height: 32px !default; +$radio-bordered-mini-input-height: 12px !default; +$radio-bordered-mini-input-width: 12px !default; +$radio-bordered-mini-height: 28px !default; + +/// fontSize||Font|1 +$radio-button-font-size: $font-size-base !default; +/// color||Color|0 +$radio-button-checked-background-color: var(--color-primary) !default; +/// color||Color|0 +$radio-button-checked-font-color: $color-white !default; +/// color||Color|0 +$radio-button-checked-border-color: var(--color-primary) !default; +$radio-button-disabled-checked-fill: $border-color-xlight !default; + +/* Select +-------------------------- */ +$select-border-color-hover: $border-color-hover !default; +$select-disabled-border: $disabled-border-base !default; +/// fontSize||Font|1 +$select-font-size: $font-size-base !default; +$select-close-hover-color: $color-text-secondary !default; + +$select-input-color: $color-text-placeholder !default; +$select-multiple-input-color: #666 !default; +/// color||Color|0 +$select-input-focus-border-color: var(--color-primary) !default; +/// fontSize||Font|1 +$select-input-font-size: 14px !default; + +$select-option-color: $color-text-primary !default; +$select-option-disabled-color: $color-text-placeholder !default; +$select-option-disabled-background: $color-white !default; +/// height||Other|4 +$select-option-height: 34px !default; +$select-option-hover-background: $background-color-base !default; +/// color||Color|0 +$select-option-selected-font-color: var(--color-primary) !default; +$select-option-selected-hover: $background-color-base !default; + +$select-group-color: var(--color-info) !default; +$select-group-height: 30px !default; +$select-group-font-size: 12px !default; + +$select-dropdown-background: $color-white !default; +$select-dropdown-shadow: $box-shadow-light !default; +$select-dropdown-empty-color: #999 !default; +/// height||Other|4 +$select-dropdown-max-height: 274px !default; +$select-dropdown-padding: 6px 0 !default; +$select-dropdown-empty-padding: 10px 0 !default; +$select-dropdown-border: solid 1px $border-color-light !default; + +/* Alert +-------------------------- */ +$alert-padding: 8px 16px !default; +/// borderRadius||Border|2 +$alert-border-radius: var(--border-radius-base) !default; +/// fontSize||Font|1 +$alert-title-font-size: 13px !default; +/// fontSize||Font|1 +$alert-description-font-size: 12px !default; +/// fontSize||Font|1 +$alert-close-font-size: 12px !default; +/// fontSize||Font|1 +$alert-close-customed-font-size: 13px !default; + +$alert-success-color: $color-success-lighter !default; +$alert-info-color: $color-info-lighter !default; +$alert-warning-color: $color-warning-lighter !default; +$alert-danger-color: $color-danger-lighter !default; + +/// height||Other|4 +$alert-icon-size: 16px !default; +/// height||Other|4 +$alert-icon-large-size: 28px !default; + +/* MessageBox +-------------------------- */ +/// color||Color|0 +$messagebox-title-color: $color-text-primary !default; +$msgbox-width: 420px !default; +$msgbox-border-radius: 4px !default; +/// fontSize||Font|1 +$messagebox-font-size: $font-size-large !default; +/// fontSize||Font|1 +$messagebox-content-font-size: $font-size-base !default; +/// color||Color|0 +$messagebox-content-color: $color-text-primary !default; +/// fontSize||Font|1 +$messagebox-error-font-size: 12px !default; +$msgbox-padding-primary: 15px !default; +/// color||Color|0 +$messagebox-success-color: var(--color-success) !default; +/// color||Color|0 +$messagebox-info-color: var(--color-info) !default; +/// color||Color|0 +$messagebox-warning-color: var(--color-warning) !default; +/// color||Color|0 +$messagebox-danger-color: var(--color-danger) !default; + +/* Message +-------------------------- */ +$message-shadow: $box-shadow-base !default; +$message-min-width: 380px !default; +$message-background-color: #edf2fc !default; +$message-padding: 15px 15px 15px 20px !default; +/// color||Color|0 +$message-close-icon-color: $color-text-placeholder !default; +/// height||Other|4 +$message-close-size: 16px !default; +/// color||Color|0 +$message-close-hover-color: $color-text-secondary !default; + +/// color||Color|0 +$message-success-font-color: var(--color-success) !default; +/// color||Color|0 +$message-info-font-color: var(--color-info) !default; +/// color||Color|0 +$message-warning-font-color: var(--color-warning) !default; +/// color||Color|0 +$message-danger-font-color: var(--color-danger) !default; + +/* Notification +-------------------------- */ +$notification-width: 330px !default; +/// padding||Spacing|3 +$notification-padding: 14px 26px 14px 13px !default; +$notification-radius: 8px !default; +$notification-shadow: $box-shadow-light !default; +/// color||Color|0 +$notification-border-color: $border-color-lighter !default; +$notification-icon-size: 24px !default; +$notification-close-font-size: $message-close-size !default; +$notification-group-margin-left: 13px !default; +$notification-group-margin-right: 8px !default; +/// fontSize||Font|1 +$notification-content-font-size: $font-size-base !default; +/// color||Color|0 +$notification-content-color: $color-text-primary !default; +/// fontSize||Font|1 +$notification-title-font-size: 16px !default; +/// color||Color|0 +$notification-title-color: $color-text-primary !default; + +/// color||Color|0 +$notification-close-color: $color-text-secondary !default; +/// color||Color|0 +$notification-close-hover-color: $color-text-primary !default; + +/// color||Color|0 +$notification-success-icon-color: var(--color-success) !default; +/// color||Color|0 +$notification-info-icon-color: var(--color-info) !default; +/// color||Color|0 +$notification-warning-icon-color: var(--color-warning) !default; +/// color||Color|0 +$notification-danger-icon-color: var(--color-danger) !default; + +/* Input +-------------------------- */ +$input-font-size: $font-size-base !default; +/// color||Color|0 +$input-font-color: $color-text-primary !default; +/// height||Other|4 +$input-width: 140px !default; +/// height||Other|4 +$input-height: 40px !default; +$input-border: var(--border-base) !default; +$input-border-color: $border-color-base !default; +/// borderRadius||Border|2 +$input-border-radius: var(--border-radius-base) !default; +$input-border-color-hover: $border-color-hover !default; +/// color||Color|0 +$input-background-color: $color-white !default; +$input-fill-disabled: $disabled-fill-base !default; +$input-color-disabled: $font-color-disabled-base !default; +/// color||Color|0 +$input-icon-color: $color-text-placeholder !default; +/// color||Color|0 +$input-placeholder-color: $color-text-placeholder !default; +$input-max-width: 314px !default; + +$input-hover-border: $border-color-hover !default; +$input-clear-hover-color: $color-text-secondary !default; + +$input-focus-border: var(--color-primary) !default; +$input-focus-fill: $color-white !default; + +$input-disabled-fill: $disabled-fill-base !default; +$input-disabled-border: $disabled-border-base !default; +$input-disabled-color: $disabled-color-base !default; +$input-disabled-placeholder-color: $color-text-placeholder !default; + +/// fontSize||Font|1 +$input-medium-font-size: 14px !default; +/// height||Other|4 +$input-medium-height: 36px !default; +/// fontSize||Font|1 +$input-small-font-size: 13px !default; +/// height||Other|4 +$input-small-height: 32px !default; +/// fontSize||Font|1 +$input-mini-font-size: 12px !default; +/// height||Other|4 +$input-mini-height: 28px !default; + +/* Cascader +-------------------------- */ +/// color||Color|0 +$cascader-menu-font-color: $color-text-primary !default; +/// color||Color|0 +$cascader-menu-selected-font-color: var(--color-primary) !default; +$cascader-menu-fill: $fill-base !default; +$cascader-menu-font-size: $font-size-base !default; +$cascader-menu-radius: var(--border-radius-base) !default; +$cascader-menu-border: solid 1px $border-color-light !default; +$cascader-menu-shadow: $box-shadow-light !default; +$cascader-node-background-hover: $background-color-base !default; +$cascader-node-color-disabled:$color-text-placeholder !default; +$cascader-color-empty:$color-text-placeholder !default; +$cascader-tag-background: #f0f2f5; + +/* Group +-------------------------- */ +$group-option-flex: 0 0 (math.div(1, 5)) * 100% !default; +$group-option-offset-bottom: 12px !default; +$group-option-fill-hover: rgba($color-black, 0.06) !default; +$group-title-color: $color-black !default; +$group-title-font-size: $font-size-base !default; +$group-title-width: 66px !default; + +/* Tab +-------------------------- */ +$tab-font-size: $font-size-base !default; +$tab-border-line: 1px solid #e4e4e4 !default; +$tab-header-color-active: $color-text-secondary !default; +$tab-header-color-hover: $color-text-primary !default; +$tab-header-color: $color-text-primary !default; +$tab-header-fill-active: rgba($color-black, 0.06) !default; +$tab-header-fill-hover: rgba($color-black, 0.06) !default; +$tab-vertical-header-width: 90px !default; +$tab-vertical-header-count-color: $color-white !default; +$tab-vertical-header-count-fill: $color-text-secondary !default; + +/* Button +-------------------------- */ +/// fontSize||Font|1 +$button-font-size: $font-size-base !default; +/// borderRadius||Border|2 +/// padding||Spacing|3 +$button-padding-vertical: 12px !default; +/// padding||Spacing|3 +$button-padding-horizontal: 20px !default; + +/// fontSize||Font|1 +$button-medium-font-size: $font-size-base !default; +/// borderRadius||Border|2 +$button-medium-border-radius: var(--border-radius-base) !default; +/// padding||Spacing|3 +$button-medium-padding-vertical: 10px !default; +/// padding||Spacing|3 +$button-medium-padding-horizontal: 20px !default; + +/// fontSize||Font|1 +$button-small-font-size: 12px !default; +$button-small-border-radius: #{var(--border-radius-base) - 1} !default; +/// padding||Spacing|3 +$button-small-padding-vertical: 9px !default; +/// padding||Spacing|3 +$button-small-padding-horizontal: 15px !default; +/// fontSize||Font|1 +$button-mini-font-size: 12px !default; +$button-mini-border-radius: #{var(--border-radius-base) - 1} !default; +/// padding||Spacing|3 +$button-mini-padding-vertical: 7px !default; +/// padding||Spacing|3 +$button-mini-padding-horizontal: 15px !default; + +/// color||Color|0 +$button-default-font-color: $color-text-primary !default; +/// color||Color|0 +$button-default-background-color: $color-white !default; +/// color||Color|0 +$button-default-border-color: $border-color-base !default; + +/// color||Color|0 +$button-disabled-font-color: $color-text-placeholder !default; +/// color||Color|0 +$button-disabled-background-color: $color-white !default; +/// color||Color|0 +$button-disabled-border-color: $border-color-lighter !default; + +/// color||Color|0 +$button-primary-border-color: var(--color-primary) !default; +/// color||Color|0 +$button-primary-font-color: $color-white !default; +/// color||Color|0 +$button-primary-background-color: var(--color-primary) !default; +/// color||Color|0 +$button-success-border-color: var(--color-success) !default; +/// color||Color|0 +$button-success-font-color: $color-white !default; +/// color||Color|0 +$button-success-background-color: var(--color-success) !default; +/// color||Color|0 +$button-warning-border-color: var(--color-warning) !default; +/// color||Color|0 +$button-warning-font-color: $color-white !default; +/// color||Color|0 +$button-warning-background-color: var(--color-warning) !default; +/// color||Color|0 +$button-danger-border-color: var(--color-danger) !default; +/// color||Color|0 +$button-danger-font-color: $color-white !default; +/// color||Color|0 +$button-danger-background-color: var(--color-danger) !default; +/// color||Color|0 +$button-info-border-color: var(--color-info) !default; +/// color||Color|0 +$button-info-font-color: $color-white !default; +/// color||Color|0 +$button-info-background-color: var(--color-info) !default; + +$button-hover-tint-percent: 10% !default; +$button-light-tint-percent: 30% !default; +$button-active-shade-percent: 10% !default; + + +/* cascader +-------------------------- */ +$cascader-height: 200px !default; + +/* Switch +-------------------------- */ +/// color||Color|0 +$switch-on-color: var(--color-primary) !default; +/// color||Color|0 +$switch-off-color: $border-color-base !default; +/// fontSize||Font|1 +$switch-font-size: $font-size-base !default; +$switch-core-border-radius: 10px !default; +// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义 +$switch-width: 40px !default; +// height||Other|4 +$switch-height: 20px !default; +// height||Other|4 +$switch-button-size: 16px !default; + +/* Dialog +-------------------------- */ +$dialog-background-color: $color-white !default; +$dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; +/// fontSize||Font|1 +$dialog-title-font-size: $font-size-large !default; +/// fontSize||Font|1 +$dialog-content-font-size: 14px !default; +/// fontLineHeight||LineHeight|2 +$dialog-font-line-height: $font-line-height-primary !default; +/// padding||Spacing|3 +$dialog-padding-primary: 20px !default; + +/* Table +-------------------------- */ +/// color||Color|0 +$table-border-color: $border-color-lighter !default; +$table-border: 1px solid $table-border-color !default; +/// color||Color|0 +$table-font-color: $color-text-primary !default; +/// color||Color|0 +$table-header-font-color: $color-text-secondary !default; +/// color||Color|0 +$table-row-hover-background-color: $background-color-base !default; +$table-current-row-background-color: $color-primary-light-9 !default; +/// color||Color|0 +$table-header-background-color: $color-white !default; +$table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default; + +/* Pagination +-------------------------- */ +/// fontSize||Font|1 +$pagination-font-size: 13px !default; +/// color||Color|0 +$pagination-background-color: $color-white !default; +/// color||Color|0 +$pagination-font-color: $color-text-primary !default; +$pagination-border-radius: 3px !default; +/// color||Color|0 +$pagination-button-color: $color-text-primary !default; +/// height||Other|4 +$pagination-button-width: 35.5px !default; +/// height||Other|4 +$pagination-button-height: 28px !default; +/// color||Color|0 +$pagination-button-disabled-color: $color-text-placeholder !default; +/// color||Color|0 +$pagination-button-disabled-background-color: $color-white !default; +/// color||Color|0 +$pagination-hover-color: var(--color-primary) !default; + +/* Popup +-------------------------- */ +/// color||Color|0 +$popup-modal-background-color: $color-black !default; +/// opacity||Other|1 +$popup-modal-opacity: 0.5 !default; + +/* Popover +-------------------------- */ +/// color||Color|0 +$popover-background-color: $color-white !default; +/// fontSize||Font|1 +$popover-font-size: $font-size-base !default; +/// color||Color|0 +$popover-border-color: $border-color-lighter !default; +$popover-arrow-size: 6px !default; +/// padding||Spacing|3 +$popover-padding: 12px !default; +$popover-padding-large: 18px 20px !default; +/// fontSize||Font|1 +$popover-title-font-size: 16px !default; +/// color||Color|0 +$popover-title-font-color: $color-text-primary !default; + +/* Tooltip +-------------------------- */ +/// color|1|Color|0 +$tooltip-fill: $color-text-primary !default; +/// color|1|Color|0 +$tooltip-color: $color-white !default; +/// fontSize||Font|1 +$tooltip-font-size: 12px !default; +/// color||Color|0 +$tooltip-border-color: $color-text-primary !default; +$tooltip-arrow-size: 6px !default; +/// padding||Spacing|3 +$tooltip-padding: 10px !default; + +/* Tag +-------------------------- */ +/// color||Color|0 +$tag-info-color: var(--color-info) !default; +/// color||Color|0 +$tag-primary-color: var(--color-primary) !default; +/// color||Color|0 +$tag-success-color: var(--color-success) !default; +/// color||Color|0 +$tag-warning-color: var(--color-warning) !default; +/// color||Color|0 +$tag-danger-color: var(--color-danger) !default; +/// fontSize||Font|1 +$tag-font-size: 12px !default; +$tag-border-radius: 4px !default; +$tag-padding: 0 10px !default; + +/* Tree +-------------------------- */ +/// color||Color|0 +$tree-node-hover-background-color: $background-color-base !default; +/// color||Color|0 +$tree-font-color: $color-text-primary !default; +/// color||Color|0 +$tree-expand-icon-color: $color-text-placeholder !default; + +/* Dropdown +-------------------------- */ +$dropdown-menu-box-shadow: $box-shadow-light !default; +$dropdown-menuItem-hover-fill: $color-primary-light-9 !default; +$dropdown-menuItem-hover-color: $link-color !default; + +/* Badge +-------------------------- */ +/// color||Color|0 +$badge-background-color: var(--color-danger) !default; +$badge-radius: 10px !default; +/// fontSize||Font|1 +$badge-font-size: 12px !default; +/// padding||Spacing|3 +$badge-padding: 6px !default; +/// height||Other|4 +$badge-size: 18px !default; + +/* Card +--------------------------*/ +/// color||Color|0 +$card-border-color: $border-color-lighter !default; +$card-border-radius: 4px !default; +/// padding||Spacing|3 +$card-padding: 20px !default; + +/* Slider +--------------------------*/ +/// color||Color|0 +$slider-main-background-color: var(--color-primary) !default; +/// color||Color|0 +$slider-runway-background-color: $border-color-light !default; +$slider-button-hover-color: function.saturation(--color-primary-h, --color-primary-s, --color-primary-l, 8%) !default; +$slider-stop-background-color: $color-white !default; +$slider-disable-color: $color-text-placeholder !default; +$slider-margin: 16px 0 !default; +$slider-border-radius: 3px !default; +/// height|1|Other|4 +$slider-height: 6px !default; +/// height||Other|4 +$slider-button-size: 16px !default; +$slider-button-wrapper-size: 36px !default; +$slider-button-wrapper-offset: -15px !default; + +/* Steps +--------------------------*/ +$steps-border-color: $disabled-border-base !default; +$steps-border-radius: 4px !default; +$steps-padding: 20px !default; + +/* Menu +--------------------------*/ +/// fontSize||Font|1 +$menu-item-font-size: $font-size-base !default; +/// color||Color|0 +$menu-item-font-color: $color-text-primary !default; +/// color||Color|0 +$menu-background-color: $color-white !default; +$menu-item-hover-fill: $color-primary-light-9 !default; + +/* Rate +--------------------------*/ +$rate-height: 20px !default; +/// fontSize||Font|1 +$rate-font-size: $font-size-base !default; +/// height||Other|3 +$rate-icon-size: 18px !default; +/// margin||Spacing|2 +$rate-icon-margin: 6px !default; +$rate-icon-color: $color-text-placeholder !default; + +/* DatePicker +--------------------------*/ +$datepicker-font-color: $color-text-primary !default; +/// color|1|Color|0 +$datepicker-off-font-color: $color-text-placeholder !default; +/// color||Color|0 +$datepicker-header-font-color: $color-text-primary !default; +$datepicker-icon-color: $color-text-primary !default; +$datepicker-border-color: $disabled-border-base !default; +$datepicker-inner-border-color: #e4e4e4 !default; +/// color||Color|0 +$datepicker-inrange-background-color: $border-color-xlight !default; +/// color||Color|0 +$datepicker-inrange-hover-background-color: $border-color-xlight !default; +/// color||Color|0 +$datepicker-active-color: var(--color-primary) !default; +/// color||Color|0 +$datepicker-hover-font-color: var(--color-primary) !default; +$datepicker-cell-hover-color: #fff !default; + +/* Loading +--------------------------*/ +/// height||Other|4 +$loading-spinner-size: 42px !default; +/// height||Other|4 +$loading-fullscreen-spinner-size: 50px !default; + +/* Scrollbar +--------------------------*/ +$scrollbar-background-color: hsla(var(#{--color-text-light-h}), var(#{--color-text-light-s}), var(#{--color-text-light-l}), .3) !default; +$scrollbar-hover-background-color: hsla(var(#{--color-text-light-h}), var(#{--color-text-light-s}), var(#{--color-text-light-l}), .5) !default; + +/* Carousel +--------------------------*/ +/// fontSize||Font|1 +$carousel-arrow-font-size: 12px !default; +$carousel-arrow-size: 36px !default; +$carousel-arrow-background: rgba(31, 45, 61, 0.11) !default; +$carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default; +/// width||Other|4 +$carousel-indicator-width: 30px !default; +/// height||Other|4 +$carousel-indicator-height: 2px !default; +$carousel-indicator-padding-horizontal: 4px !default; +$carousel-indicator-padding-vertical: 12px !default; +$carousel-indicator-out-color: $border-color-hover !default; + +/* Collapse +--------------------------*/ +/// color||Color|0 +$collapse-border-color: $border-color-lighter !default; +/// height||Other|4 +$collapse-header-height: 48px !default; +/// color||Color|0 +$collapse-header-background-color: $color-white !default; +/// color||Color|0 +$collapse-header-font-color: $color-text-primary !default; +/// fontSize||Font|1 +$collapse-header-font-size: 13px !default; +/// color||Color|0 +$collapse-content-background-color: $color-white !default; +/// fontSize||Font|1 +$collapse-content-font-size: 13px !default; +/// color||Color|0 +$collapse-content-font-color: $color-text-primary !default; + +/* Transfer +--------------------------*/ +$transfer-border-color: $border-color-lighter !default; +$transfer-border-radius: var(--border-radius-base) !default; +/// height||Other|4 +$transfer-panel-width: 200px !default; +/// height||Other|4 +$transfer-panel-header-height: 40px !default; +/// color||Color|0 +$transfer-panel-header-background-color: $background-color-base !default; +/// height||Other|4 +$transfer-panel-footer-height: 40px !default; +/// height||Other|4 +$transfer-panel-body-height: 246px !default; +/// height||Other|4 +$transfer-item-height: 30px !default; +/// height||Other|4 +$transfer-filter-height: 32px !default; + +/* Header + --------------------------*/ +$header-padding: 0 20px !default; + +/* Footer +--------------------------*/ +$footer-padding: 0 20px !default; + +/* Main +--------------------------*/ +$main-padding: 20px !default; + +/* Timeline +--------------------------*/ +$timeline-node-size-normal: 12px !default; +$timeline-node-size-large: 14px !default; +$timeline-node-color: $border-color-light !default; + +/* Backtop +--------------------------*/ +/// color||Color|0 +$backtop-background-color: $color-white !default; +/// color||Color|0 +$backtop-font-color: var(--color-primary) !default; +/// color||Color|0 +$backtop-hover-background-color: $border-color-xlight !default; + +/* Link +--------------------------*/ +/// fontSize||Font|1 +$link-font-size: $font-size-base !default; +/// fontWeight||Font|1 +$link-font-weight: $font-weight-primary !default; +/// color||Color|0 +$link-default-font-color: $color-text-primary !default; +/// color||Color|0 +$link-default-active-color: var(--color-primary) !default; +/// color||Color|0 +$link-disabled-font-color: $color-text-placeholder !default; +/// color||Color|0 +$link-primary-font-color: var(--color-primary) !default; +/// color||Color|0 +$link-success-font-color: var(--color-success) !default; +/// color||Color|0 +$link-warning-font-color: var(--color-warning) !default; +/// color||Color|0 +$link-danger-font-color: var(--color-danger) !default; +/// color||Color|0 +$link-info-font-color: var(--color-info) !default; +/* Calendar +--------------------------*/ +/// border||Other|4 +$calendar-border: $table-border !default; +/// color||Other|4 +$calendar-selected-background-color: #F2F8FE !default; +$calendar-cell-width: 85px !default; + +/* Form +-------------------------- */ +/// fontSize||Font|1 +$form-label-font-size: $font-size-base !default; + +/* Avatar +--------------------------*/ +/// color||Color|0 +$avatar-font-color: #fff !default; +/// color||Color|0 +$avatar-background-color: #C0C4CC !default; +/// fontSize||Font Size|1 +$avatar-text-font-size: 14px !default; +/// fontSize||Font Size|1 +$avatar-icon-font-size: 18px !default; +/// borderRadius||Border|2 +$avatar-border-radius: var(--border-radius-base) !default; +/// size|1|Avatar Size|3 +$avatar-large-size: 40px !default; +/// size|1|Avatar Size|3 +$avatar-medium-size: 36px !default; +/// size|1|Avatar Size|3 +$avatar-small-size: 28px !default; + +/* Break-point +--------------------------*/ +$sm: 768px !default; +$md: 992px !default; +$lg: 1200px !default; +$xl: 1920px !default; + +$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..0f74c8dc86 --- /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..65367e7640 --- /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"; \ No newline at end of file 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..abb86bfddc --- /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-lighter; + + & + .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-primary; + + &: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..088a43e564 --- /dev/null +++ b/packages/design-system/theme/src/date-picker/date-range-picker.scss @@ -0,0 +1,102 @@ +@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..777d7a6b7c --- /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-placeholder; + } + + &.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-lighter; + } +} 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..fe67cc5170 --- /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-placeholder; + + &:hover { + color: var.$color-text-placeholder; + } + } + + .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..6b0bbc3e10 --- /dev/null +++ b/packages/design-system/theme/src/date-picker/picker-panel.scss @@ -0,0 +1,127 @@ +@use "../common/var"; +@use "../mixins/mixins"; +@use "../mixins/button"; + +@include mixins.b(picker-panel) { + color: var.$color-text-primary; + 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(); + + 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..7f3bb04594 --- /dev/null +++ b/packages/design-system/theme/src/date-picker/picker.scss @@ -0,0 +1,197 @@ +@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: 220px; + } + + @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-placeholder; + 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-primary; + + &::placeholder { + color: var.$color-text-placeholder; + } + } + + .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-primary; + } + + .el-range__close-icon { + font-size: 14px; + color: var.$color-text-placeholder; + 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..b8f4bb513d --- /dev/null +++ b/packages/design-system/theme/src/date-picker/time-picker.scss @@ -0,0 +1,86 @@ +@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-light; + border-bottom: 1px solid var.$border-color-light; + } + + &::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-primary; + + &.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..5474dd27ee --- /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..1962de41b5 --- /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-secondary; + 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-primary; + + &:hover:not(.disabled):not(.active) { + background: var.$background-color-base; + cursor: pointer; + } + + &.active:not(.disabled) { + color: var.$color-text-primary; + font-weight: bold; + } + + &.disabled { + color: var.$color-text-placeholder; + 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..ce9b9e0ba9 --- /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-placeholder; + + &:hover { + color: var.$color-text-placeholder; + } + } + + .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..f40b0fcfb7 --- /dev/null +++ b/packages/design-system/theme/src/dialog.scss @@ -0,0 +1,123 @@ +@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-primary; + } + + @include mixins.e(body) { + padding: (var.$dialog-padding-primary + 10px) var.$dialog-padding-primary; + color: var.$color-text-primary; + 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 .3s; +} + +.dialog-fade-leave-active { + animation: dialog-fade-out .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..d8cde567cd --- /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..3e63ea95a8 --- /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-primary; + 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%); + } + } +} \ No newline at end of file diff --git a/packages/design-system/theme/src/drawer.scss b/packages/design-system/theme/src/drawer.scss new file mode 100644 index 0000000000..beb7131a0d --- /dev/null +++ b/packages/design-system/theme/src/drawer.scss @@ -0,0 +1,218 @@ +@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 .3s 1ms; + } +} + +@mixin animation-out($direction) { + &.#{$direction} { + animation: #{$direction}-drawer-out .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 .3s; +} + +.el-drawer-fade-leave-active { + animation: el-drawer-fade-in .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..9f3340385a --- /dev/null +++ b/packages/design-system/theme/src/dropdown.scss @@ -0,0 +1,177 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "button"; +@use "./popper"; + +@include mixins.b(dropdown) { + display: inline-block; + position: relative; + color: var.$color-text-primary; + 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, .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}), .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-lighter; + 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-primary; + 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-lighter; + + &: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..0ab793ff0b --- /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..d1ad325ff0 --- /dev/null +++ b/packages/design-system/theme/src/form.scss @@ -0,0 +1,167 @@ +@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-primary; + 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..621dd86acb --- /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..69b608b2e7 --- /dev/null +++ b/packages/design-system/theme/src/icon.scss @@ -0,0 +1,1167 @@ +@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..049969b7e6 --- /dev/null +++ b/packages/design-system/theme/src/image.scss @@ -0,0 +1,179 @@ +@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-placeholder; + 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: .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: .5; + background: #000; + } +} + +.viewer-fade-enter-active { + animation: viewer-fade-in .3s; +} + +.viewer-fade-leave-active { + animation: viewer-fade-out .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..d260a36ed7 --- /dev/null +++ b/packages/design-system/theme/src/input-number.scss @@ -0,0 +1,180 @@ +@use "mixins/mixins"; +@use "./common/var"; +@use "input"; + +@include mixins.b(input-number) { + position: relative; + display: inline-block; + width: 180px; + line-height: #{var.$input-height - 2}; + + .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-primary; + 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) { + width: 200px; + 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) { + width: 130px; + 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(.9); + } + } + + .el-input__inner { + padding-left: #{var.$input-small-height + 7}; + padding-right: #{var.$input-small-height + 7}; + } + } + + @include mixins.m(mini) { + width: 130px; + 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(.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 { + padding-left: 15px; + padding-right: 15px; + } + } + + @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(.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..c19aed970b --- /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: 5px 15px; + 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: var.$input-border; + border-radius: var.$input-border-radius; + transition: var.$border-transition-base; + + &::placeholder { + color: var.$input-placeholder-color; + } + + &:hover { + border-color: var.$input-hover-border; + } + + &: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.$font-size-base; + display: inline-block; + width: 100%; + @include mixins.scroll-bar; + + & .el-input__clear { + color: var.$input-icon-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 15px; + transition: var.$border-transition-base; + width: 100%; + + &::placeholder { + color: var.$input-placeholder-color; + } + + &:hover { + border-color: var.$input-hover-border; + } + + &:focus { + outline: none; + border-color: var.$input-focus-border; + } + } + + @include mixins.e(suffix) { + position: absolute; + height: 100%; + right: 5px; + top: 0; + text-align: center; + color: var.$input-icon-color; + transition: all .3s; + pointer-events: none; + } + + @include mixins.e(suffix-inner) { + pointer-events: all; + } + + @include mixins.e(prefix) { + position: absolute; + height: 100%; + left: 5px; + top: 0; + text-align: center; + color: var.$input-icon-color; + transition: all .3s; + } + + @include mixins.e(icon) { + height: 100%; + width: 25px; + text-align: center; + transition: all .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: 30px; + } + } + + @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 20px; + width: 1px; + white-space: nowrap; + + &: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..9b685dc455 --- /dev/null +++ b/packages/design-system/theme/src/link.scss @@ -0,0 +1,81 @@ +@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..962f36bcee --- /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, .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..23c22e71ed --- /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..8ea093683b --- /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 .3s, background-color .3s, color .3s; + box-sizing: border-box; + white-space: nowrap; + + * { + vertical-align: middle; + } + + i { + color: var.$color-text-secondary; + } + + &: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-secondary; + + 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-primary; + } + } + + &.is-active { + .el-submenu__title { + border-bottom: 2px solid var(--color-primary); + color: var.$color-text-primary; + } + } + + & .el-submenu__title { + height: 60px; + line-height: 60px; + border-bottom: 2px solid transparent; + color: var.$color-text-secondary; + + &: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-secondary; + } + & .el-menu-item.is-active, + & .el-submenu.is-active > .el-submenu__title { + color: var.$color-text-primary; + } + } + & .el-menu-item:not(.is-disabled):hover, + & .el-menu-item:not(.is-disabled):focus { + outline: none; + color: var.$color-text-primary; + } + & > .el-menu-item.is-active { + border-bottom: 2px solid var(--color-primary); + color: var.$color-text-primary; + } + } + @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-light; + 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 .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-secondary; + } +} + +.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow { + transition: .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..70a80367ff --- /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-lighter; + 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 .3s; +} + +.msgbox-fade-leave-active { + animation: msgbox-fade-out .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..14c97ad368 --- /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-lighter; + position: fixed; + left: 50%; + top: 20px; + transform: translateX(-50%); + background-color: var.$message-background-color; + transition: opacity 0.3s, transform .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..04641eeaea --- /dev/null +++ b/packages/design-system/theme/src/mixins/_button.scss @@ -0,0 +1,123 @@ +@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; + } +} + +// 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..ca2c39ebee --- /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..06bb5d83c9 --- /dev/null +++ b/packages/design-system/theme/src/mixins/mixins.scss @@ -0,0 +1,193 @@ +@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..a642326638 --- /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; +} \ No newline at end of file diff --git a/packages/design-system/theme/src/notification.scss b/packages/design-system/theme/src/notification.scss new file mode 100644 index 0000000000..93a501d9bb --- /dev/null +++ b/packages/design-system/theme/src/notification.scss @@ -0,0 +1,99 @@ +@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 .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .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..619ab76dc4 --- /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-light; + } + } + } + + @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..658281e1ce --- /dev/null +++ b/packages/design-system/theme/src/option.scss @@ -0,0 +1,36 @@ +@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; + height: var.$select-option-height; + line-height: var.$select-option-height; + box-sizing: border-box; + cursor: pointer; + + @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..c4709fb455 --- /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-primary; + } +} diff --git a/packages/design-system/theme/src/pagination.scss b/packages/design-system/theme/src/pagination.scss new file mode 100644 index 0000000000..8a8d9c5f6c --- /dev/null +++ b/packages/design-system/theme/src/pagination.scss @@ -0,0 +1,295 @@ +@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(.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-placeholder; + 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-primary; + + .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-primary; + } + + @include mixins.e(jump) { + margin-left: 24px; + font-weight: normal; + color: var.$color-text-primary; + + .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-primary; + min-width: 30px; + border-radius: 2px; + + &.disabled { + color: var.$color-text-placeholder; + } + } + + .btn-prev, .btn-next { + padding: 0; + + &:disabled { + color: var.$color-text-placeholder; + } + } + + .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-placeholder; + } + } + + &.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..57a2570817 --- /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..bb77c1a67f --- /dev/null +++ b/packages/design-system/theme/src/popover.scss @@ -0,0 +1,40 @@ +@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-primary; + 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..3dd5000b67 --- /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; + } + } +} \ No newline at end of file diff --git a/packages/design-system/theme/src/progress.scss b/packages/design-system/theme/src/progress.scss new file mode 100644 index 0000000000..f288a60da2 --- /dev/null +++ b/packages/design-system/theme/src/progress.scss @@ -0,0 +1,141 @@ +@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-primary; + 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-lighter; + 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..194d6af438 --- /dev/null +++ b/packages/design-system/theme/src/radio-button.scss @@ -0,0 +1,117 @@ +@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..8fb5f139af --- /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..e270e7caa2 --- /dev/null +++ b/packages/design-system/theme/src/radio.scss @@ -0,0 +1,199 @@ +@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-lighter; + } + + & + .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-placeholder; + 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 .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..b316b89eb4 --- /dev/null +++ b/packages/design-system/theme/src/rate.scss @@ -0,0 +1,49 @@ +@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: .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..037ed390d2 --- /dev/null +++ b/packages/design-system/theme/src/reset.scss @@ -0,0 +1,148 @@ +@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); + color: var(--color-text-dark); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body, button, input { + font-family: var(--font-family); + 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-primary; + 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..a441847b03 --- /dev/null +++ b/packages/design-system/theme/src/row.scss @@ -0,0 +1,39 @@ +@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..3ac68fcf62 --- /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: .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..d673399a32 --- /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..e808e8aed7 --- /dev/null +++ b/packages/design-system/theme/src/select.scss @@ -0,0 +1,148 @@ +@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; + + .el-select__tags + >span { + display: contents; + } + + &:hover { + .el-input__inner { + border-color: var.$select-border-color-hover; + } + } + + .el-input__inner { + cursor: pointer; + padding-right: 35px; + + &:focus { + border-color: var.$select-input-focus-border-color; + } + } + + .el-input { + & .el-select__caret { + color: var.$select-input-color; + font-size: var.$select-input-font-size; + transition: transform .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; + border-color: transparent; + margin: 2px 0 2px 6px; + background-color: #f0f2f5; + + &__close.el-icon-close { + background-color: var.$color-text-placeholder; + right: -7px; + top: 0; + color: var.$color-white; + + &:hover { + background-color: var.$color-text-secondary; + } + + &::before { + display: block; + transform: translate(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..c3afd52ca1 --- /dev/null +++ b/packages/design-system/theme/src/slider.scss @@ -0,0 +1,250 @@ +@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: .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..6b93c43701 --- /dev/null +++ b/packages/design-system/theme/src/spinner.scss @@ -0,0 +1,44 @@ +@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..a606ab36ce --- /dev/null +++ b/packages/design-system/theme/src/step.scss @@ -0,0 +1,317 @@ +@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-primary; + border-color: var.$color-text-primary; + } + + @include mixins.when(wait) { + color: var.$color-text-placeholder; + border-color: var.$color-text-placeholder; + } + + @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: .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-placeholder; + } + + @include mixins.e(line-inner) { + display: block; + border-width: 1px; + border-style: solid; + border-color: inherit; + transition: .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-primary; + } + + @include mixins.when(wait) { + color: var.$color-text-placeholder; + } + + @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-primary; + } + + @include mixins.when(wait) { + color: var.$color-text-placeholder; + } + + @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(.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-placeholder; + } + + &::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..6ea6b41d58 --- /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..e828ce7fc4 --- /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: .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-primary; + + @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 .3s, background-color .3s; + vertical-align: middle; + + &:after { + content: ""; + position: absolute; + top: 1px; + left: 1px; + border-radius: var.$border-radius-circle; + transition: all .3s; + 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..e776237d75 --- /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-lighter; + 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-lighter; + padding: 8px; + + button { + background: transparent; + border: none; + color: var.$color-text-primary; + 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; + } + } +} \ No newline at end of file diff --git a/packages/design-system/theme/src/table.scss b/packages/design-system/theme/src/table.scss new file mode 100644 index 0000000000..7f4d8b5d7a --- /dev/null +++ b/packages/design-system/theme/src/table.scss @@ -0,0 +1,563 @@ +@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-secondary; + } + + // 展开行 + @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-lighter; + 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-placeholder; + top: 5px; + } + + &.descending { + border-top-color: var.$color-text-placeholder; + 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(.75); + } + } + + @include mixins.m(enable-row-transition) { + .el-table__body td { + transition: background-color .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..ad20dc4c23 --- /dev/null +++ b/packages/design-system/theme/src/tabs.scss @@ -0,0 +1,602 @@ +@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 .3s cubic-bezier(.645,.045,.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 .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-light; + 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-secondary; + } + @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 .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-primary; + 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 .3s cubic-bezier(.645,.045,.355,1); + margin-left: 5px; + &:before { + transform: scale(.9); + display: inline-block; + } + + &:hover { + background-color: var.$color-text-placeholder; + 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-light; + } + > .el-tabs__header .el-tabs__nav-wrap::after { + content: none; + } + > .el-tabs__header .el-tabs__nav { + border: 1px solid var.$border-color-light; + 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-light; + transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.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-light; + margin: 0; + } + > .el-tabs__header .el-tabs__nav-wrap::after { + content: none; + } + > .el-tabs__header .el-tabs__item { + transition: all .3s cubic-bezier(.645,.045,.355,1); + border: 1px solid transparent; + margin-top: -1px; + color: var.$color-text-secondary; + + &: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-light; + border-bottom: none; + border-top: 1px solid var.$border-color-light; + text-align: left; + } + .el-tabs__item.is-left:first-child { + border-right: 1px solid var.$border-color-light; + border-top: none; + } + .el-tabs__item.is-left.is-active { + border: 1px solid var.$border-color-light; + 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-light; + 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-light; + } + .el-tabs__item.is-right:first-child { + border-left: 1px solid var.$border-color-light; + border-top: none; + } + .el-tabs__item.is-right.is-active { + border: 1px solid var.$border-color-light; + 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-light; + 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 .3s; +} +.slideInRight-leave { + position: absolute; + left: 0; + right: 0; + animation: slideInRight-leave .3s; +} +.slideInLeft-enter { + animation: slideInLeft-enter .3s; +} +.slideInLeft-leave { + position: absolute; + left: 0; + right: 0; + animation: slideInLeft-leave .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..6fe1050c2c --- /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(.8); + } + } + + @include mixins.m(small) { + height: 24px; + padding: 0 8px; + line-height: 22px; + + .el-icon-close { + transform: scale(.8); + } + } + + @include mixins.m(mini) { + height: 20px; + padding: 0 5px; + line-height: 19px; + + .el-icon-close { + margin-left: -3px; + transform: scale(.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..a70892f5a6 --- /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..9df0f95e12 --- /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-primary; + } + + @include mixins.e(timestamp) { + color: var.$color-text-secondary; + 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..ce9aae2b2f --- /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..6d78ce0f6f --- /dev/null +++ b/packages/design-system/theme/src/tooltip.scss @@ -0,0 +1,141 @@ +@use "mixins/mixins"; +@use "./common/var"; + +@include mixins.b(tooltip) { + &:focus:not(.focusing), &:focus:hover { + outline-width: 0; + } + @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..a99cfbe7b8 --- /dev/null +++ b/packages/design-system/theme/src/transfer.scss @@ -0,0 +1,227 @@ +@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-placeholder; + + &:hover { + border: var(--border-base); + background-color: var.$background-color-base; + color: var.$color-text-placeholder; + } + } + + &: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-primary; + } + + &: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-primary; + font-weight: normal; + + span { + position: absolute; + right: 15px; + color: var.$color-text-secondary; + 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-primary; + } + } + + .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-secondary; + 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..71390829eb --- /dev/null +++ b/packages/design-system/theme/src/tree.scss @@ -0,0 +1,123 @@ +@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-secondary; + 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..dc91a5b812 --- /dev/null +++ b/packages/design-system/theme/src/upload.scss @@ -0,0 +1,604 @@ +@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-primary; + 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-placeholder; + 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-primary; + 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, .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 .5s cubic-bezier(.55,0,.1,1); + font-size: 14px; + color: var.$color-text-primary; + 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: .75; + color: var.$color-text-primary; + //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-primary; + display: block; + margin-right: 40px; + overflow: hidden; + padding-left: 4px; + text-overflow: ellipsis; + transition: color .3s; + white-space: nowrap; + + [class^="el-icon"] { + height: 100%; + margin-right: 7px; + color: var.$color-text-secondary; + 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-primary; + 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, .5); + transition: opacity .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, .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 .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-primary; + } + + + .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..5c6ed5aa81 --- /dev/null +++ b/packages/design-system/tsconfig.json @@ -0,0 +1,41 @@ +{ + "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" + ] +}