mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add design system repo

Browse source
This commit is contained in:
Mutasem 2021-08-09 11:29:11 +02:00
parent f775389312
commit b44163dd79
175 changed files with 19496 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/design-system/.browserslistrc Normal file
View file

@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

32
packages/design-system/.eslintrc.js Normal file
View file

@ -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,
},
},
],
};

40
packages/design-system/.github/workflows/deploy.yml vendored Normal file
View file

@ -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'

28
packages/design-system/.gitignore vendored Normal file
View file

@ -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

0
packages/design-system/.gitmodules vendored Normal file
View file

26
packages/design-system/.npmignore Normal file
View file

@ -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

166
packages/design-system/.storybook/font-awesome-icons.js Normal file
View file

@ -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);

1
packages/design-system/.storybook/fonts.scss Normal file
View file

@ -0,0 +1 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

46
packages/design-system/.storybook/main.js Normal file
View file

@ -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;
},
}

58
packages/design-system/.storybook/preview.js Normal file
View file

@ -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']
}
}
}

8
packages/design-system/.storybook/storybook.scss Normal file
View file

@ -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"

230
packages/design-system/LICENSE.md Normal file
View file

@ -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.

40
packages/design-system/README.md Normal file
View file

@ -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
```

3
packages/design-system/babel.config.js Normal file
View file

@ -0,0 +1,3 @@
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};

36
packages/design-system/gulpfile.js Normal file
View file

@ -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"));
}

3
packages/design-system/jest.config.js Normal file
View file

@ -0,0 +1,3 @@
module.exports = {
preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
};

78
packages/design-system/package.json Normal file
View file

@ -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"
}
}

123
packages/design-system/src/components/N8nButton/Button.stories.js Normal file
View file

@ -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: '<n8n-button v-bind="$props" @click="onClick" />',
methods,
});
export const Button = Template.bind({});
Button.args = {
label: "Button",
};
const ManyTemplate = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
N8nButton,
},
template:
'<div> <n8n-button v-bind="$props" size="lg" @click="onClick" /> <n8n-button v-bind="$props" size="md" @click="onClick" /> <n8n-button v-bind="$props" size="sm" @click="onClick" /> <n8n-button v-bind="$props" :loading="true" @click="onClick" /> <n8n-button v-bind="$props" :disabled="true" @click="onClick" /></div>',
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",
};

300
packages/design-system/src/components/N8nButton/Button.vue Normal file
View file

@ -0,0 +1,300 @@
<template functional>
<component
:is="$options.components.ElButton"
:plain="props.type === 'outline'"
:disabled="props.disabled"
:size="$options.mapToSize(props.size)"
:loading="props.loading"
:title="props.title || props.label"
:class="$style[$options.getClass(props)]"
:round="!props.circle"
:circle="props.circle"
:style="$options.styles(props)"
@click="listeners.click"
>
<span :class="$style.icon" v-if="props.loading || props.icon">
<component
:is="$options.components.N8nSpinner"
v-if="props.loading"
:size="props.iconSize"
/>
<component
:is="$options.components.N8nIcon"
v-else-if="props.icon"
:icon="props.icon"
:size="props.iconSize"
/>
</span>
<span v-if="props.label">{{ props.label }}</span>
</component>
</template>
<script lang="ts">
import N8nIcon from "../N8nIcon";
import N8nSpinner from "../N8nSpinner";
import ElButton from "element-ui/packages/button";
const sizeMap: { [size: string]: string } = {
sm: "small",
md: "medium",
lg: "",
};
export default {
name: "n8n-button",
props: {
label: {
type: String,
},
title: {
type: String,
},
type: {
type: String,
default: "primary",
validator: (value: string): boolean =>
["primary", "outline", "light", "text"].indexOf(value) !== -1,
},
theme: {
type: String,
validator: (value: string): boolean =>
["success", "warning", "danger"].indexOf(value) !== -1,
},
size: {
type: String,
default: "md",
validator: (value: string): boolean =>
["sm", "md", "lg"].indexOf(value) !== -1,
},
loading: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
icon: {
type: String,
},
iconSize: {
type: String,
},
circle: {
type: Boolean,
default: false,
},
float: {
type: String,
validator: (value: string): boolean =>
["left", "right"].indexOf(value) !== -1,
},
fullWidth: {
type: Boolean,
default: false,
},
},
components: {
ElButton,
N8nSpinner,
N8nIcon,
},
mapToSize: (size: string): string => sizeMap[size],
styles: (props: {
fullWidth?: boolean;
float?: string;
}): { float?: string; width?: string } => {
return {
...(props.float ? { float: props.float } : {}),
...(props.fullWidth ? { width: "100%" } : {}),
};
},
getClass(props: {type: string, theme?: string}) {
return props.type === 'text' ? 'text' : `${props.type}-${props.theme || 'primary'}`;
},
};
</script>
<style lang="scss" module>
@function lightness($h, $s, $l, $lightness) {
@return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}))
}
.button {
> i {
display: none;
}
> span {
display: flex;
justify-content: center;
align-items: center;
}
span + span {
margin-left: var(--spacing-3xs);
}
}
$active-shade-percent: 10%;
$color-primary-shade: lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
-($active-shade-percent)
);
$color-success-shade: lightness(
--color-success-h,
--color-success-s,
--color-success-l,
-($active-shade-percent)
);
$color-warning-shade: lightness(
--color-warning-h,
--color-warning-s,
--color-warning-l,
-($active-shade-percent)
);
$color-danger-shade: lightness(
--color-danger-h,
--color-danger-s,
--color-danger-l,
-($active-shade-percent)
);
.primary-primary {
composes: button;
}
.primary-success {
composes: button;
--button-background-color: var(--color-success);
--button-color: var(--color-text-xlight);
--button-border-color: var(--color-success);
--button-active-color: var(--color-text-xlight);
--button-active-border-color: #{$color-success-shade};
--button-active-background-color: #{$color-success-shade};
}
.primary-warning {
composes: button;
--button-background-color: var(--color-warning);
--button-color: var(--color-text-xlight);
--button-border-color: var(--color-warning);
--button-active-color: var(--color-text-xlight);
--button-active-border-color: #{$color-warning-shade};
--button-active-background-color: #{$color-warning-shade};
}
.primary-danger {
composes: button;
--button-background-color: var(--color-danger);
--button-color: var(--color-text-xlight);
--button-border-color: var(--color-danger);
--button-active-color: var(--color-text-xlight);
--button-active-border-color: #{$color-danger-shade};
--button-active-background-color: #{$color-danger-shade};
}
.outline {
--button-background-color: var(--color-foreground-xlight);
--button-disabled-background-color: var(--color-foreground-xlight);
--button-active-background-color: var(--color-foreground-xlight);
}
.outline-primary {
composes: button;
composes: outline;
--button-color: var(--color-primary);
--button-active-border-color: #{$color-primary-shade};
--button-active-color: #{$color-primary-shade};
}
.outline-success {
composes: button;
composes: outline;
--button-color: var(--color-success);
--button-border-color: var(--color-success);
--button-active-color: #{$color-success-shade};
--button-active-border-color: #{$color-success-shade};
}
.outline-warning {
composes: button;
composes: outline;
--button-color: var(--color-warning);
--button-border-color: var(--color-warning);
--button-active-color: #{$color-warning-shade};
--button-active-border-color: #{$color-warning-shade};
}
.outline-danger {
composes: button;
composes: outline;
--button-color: var(--color-danger);
--button-border-color: var(--color-danger);
--button-active-color: #{$color-danger-shade};
--button-active-border-color: #{$color-danger-shade};
}
.light-primary {
composes: button;
--button-color: var(--color-primary);
--button-border-color: var(--color-primary-tint-2);
--button-background-color: var(--color-primary-tint-2);
--button-active-background-color: var(--color-primary-tint-2);
--button-active-color: #{$color-primary-shade};
--button-active-border-color: #{$color-primary-shade};
}
.light-success {
composes: button;
--button-color: var(--color-success);
--button-border-color: var(--color-success-tint-1);
--button-background-color: var(--color-success-tint-1);
--button-active-background-color: var(--color-success-tint-1);
--button-active-color: #{$color-success-shade};
--button-active-border-color: #{$color-success-shade};
}
.light-warning {
composes: button;
--button-color: var(--color-warning);
--button-border-color: var(--color-warning-tint-2);
--button-background-color: var(--color-warning-tint-2);
--button-active-background-color: var(--color-warning-tint-2);
--button-active-color: #{$color-warning-shade};
--button-active-border-color: #{$color-warning-shade};
}
.light-danger {
composes: button;
--button-color: var(--color-danger);
--button-border-color: var(--color-danger-tint-1);
--button-background-color: var(--color-danger-tint-1);
--button-active-background-color: var(--color-danger-tint-1);
--button-active-color: #{$color-danger-shade};
--button-active-border-color: #{$color-danger-shade};
}
.text {
composes: button;
--button-color: var(--color-text-light);
--button-border-color: transparent;
--button-background-color: transparent;
--button-active-background-color: transparent;
--button-active-color: var(--color-primary);
--button-active-border-color: transparent;
}
.icon {
display: inline-flex;
svg {
display: block;
}
}
</style>

37
packages/design-system/src/components/N8nButton/index.d.ts vendored Normal file
View file

@ -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;
}

3
packages/design-system/src/components/N8nButton/index.js Normal file
View file

@ -0,0 +1,3 @@
import N8nButton from "./Button.vue";
export default N8nButton;

45
packages/design-system/src/components/N8nIcon/Icon.stories.js Normal file
View file

@ -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: '<n8n-icon v-bind="$props" />',
});
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",
};

56
packages/design-system/src/components/N8nIcon/Icon.vue Normal file
View file

@ -0,0 +1,56 @@
<template functional>
<component
:is="$options.components.FontAwesomeIcon"
:class="$style[`_${props.size}`]"
:icon="props.icon"
:spin="props.spin"
/>
</template>
<script lang="ts">
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
export default {
name: "n8n-icon",
components: {
FontAwesomeIcon,
},
props: {
icon: {
type: String,
required: true,
},
size: {
type: String,
default: "md",
validator: function (value: string): boolean {
return ["sm", "md", "lg"].indexOf(value) !== -1;
},
},
spin: {
type: Boolean,
default: false,
},
},
};
</script>
<style lang="scss" module>
._sm {
font-size: 0.85em;
height: 0.85em;
width: 0.85em !important;
}
._md {
font-size: .95em;
height: .95em;
width: .95em !important;
}
._lg {
font-size: 1.22em;
height: 1.22em;
width: 1.22em !important;
}
</style>

13
packages/design-system/src/components/N8nIcon/index.d.ts vendored Normal file
View file

@ -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;
}

3
packages/design-system/src/components/N8nIcon/index.js Normal file
View file

@ -0,0 +1,3 @@
import Icon from "./Icon.vue";
export default Icon;

98
packages/design-system/src/components/N8nIconButton/IconButton.stories.js Normal file
View file

@ -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: '<n8n-icon-button v-bind="$props" @click="onClick" />',
methods,
});
export const Button = Template.bind({});
Button.args = {
icon: "plus",
title: "my title",
};
const ManyTemplate = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
N8nIconButton,
},
template:
'<div> <n8n-icon-button v-bind="$props" size="lg" @click="onClick" /> <n8n-icon-button v-bind="$props" size="md" @click="onClick" /> <n8n-icon-button v-bind="$props" size="sm" @click="onClick" /> <n8n-icon-button v-bind="$props" :loading="true" @click="onClick" /> <n8n-icon-button v-bind="$props" :disabled="true" @click="onClick" /></div>',
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",
};

61
packages/design-system/src/components/N8nIconButton/IconButton.vue Normal file
View file

@ -0,0 +1,61 @@
<template functional>
<n8n-button
:type="props.type"
:disabled="props.disabled"
:size="props.size === 'xl' ? 'lg' : props.size"
:loading="props.loading"
:title="props.title"
:icon="props.icon"
:iconSize="$options.iconSizeMap[props.size]"
:theme="props.theme"
@click="(e) => listeners.click && listeners.click(e)"
circle
/>
</template>
<script lang="ts">
import Vue from "vue";
import N8nButton from "../N8nButton";
const iconSizeMap = {
sm: "sm",
md: "md",
lg: "md",
xl: "lg",
};
Vue.component("N8nButton", N8nButton);
export default {
name: "n8n-icon-button",
props: {
type: {
type: String,
},
title: {
type: String,
},
size: {
type: String,
validator: (value: string): boolean =>
["sm", "md", "lg", "xl"].indexOf(value) !== -1,
},
loading: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
icon: {
type: String,
required: true,
},
theme: {
type: String,
},
},
iconSizeMap,
};
</script>

22
packages/design-system/src/components/N8nIconButton/index.d.ts vendored Normal file
View file

@ -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;
}

3
packages/design-system/src/components/N8nIconButton/index.js Normal file
View file

@ -0,0 +1,3 @@
import IconButton from "./IconButton.vue";
export default IconButton;

24
packages/design-system/src/components/N8nSpinner/Spinner.stories.js Normal file
View file

@ -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: '<n8n-spinner v-bind="$props" />',
});
export const Spinner = Template.bind({});

27
packages/design-system/src/components/N8nSpinner/Spinner.vue Normal file
View file

@ -0,0 +1,27 @@
<template functional>
<component
:is="$options.components.N8nIcon"
icon="spinner"
:size="props.size"
spin
/>
</template>
<script lang="ts">
import N8nIcon from "../N8nIcon";
export default {
name: "n8n-spinner",
components: {
N8nIcon,
},
props: {
size: {
type: String,
validator: function (value: string): boolean {
return ["sm", "md", "lg"].indexOf(value) !== -1;
},
},
},
};
</script>

7
packages/design-system/src/components/N8nSpinner/index.d.ts vendored Normal file
View file

@ -0,0 +1,7 @@
import { N8nComponent, N8nComponentSize } from "../component";
/** Spinner Component */
export declare class N8nSpinner extends N8nComponent {
/** Icon size */
size: N8nComponentSize;
}

3
packages/design-system/src/components/N8nSpinner/index.js Normal file
View file

@ -0,0 +1,3 @@
import Spinner from "./Spinner.vue";
export default Spinner;

10
packages/design-system/src/components/component.d.ts vendored Normal file
View file

@ -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";

1
packages/design-system/src/components/index.d.ts vendored Normal file
View file

@ -0,0 +1 @@
declare module "./N8nButton";

6
packages/design-system/src/components/index.js Normal file
View file

@ -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 };

211
packages/design-system/src/docs/Introduction.stories.mdx Normal file
View file

@ -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';
<Meta title="Docs/Introduction" />
<style>{`
.subheading {
--mediumdark: '#999999';
font-weight: 900;
font-size: 13px;
color: #999;
letter-spacing: 6px;
line-height: 24px;
text-transform: uppercase;
margin-bottom: 12px;
margin-top: 40px;
}
.link-list {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 10px;
}
@media (min-width: 620px) {
.link-list {
row-gap: 20px;
column-gap: 20px;
grid-template-columns: 1fr 1fr;
}
}
@media all and (-ms-high-contrast:none) {
.link-list {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
}
}
.link-item {
display: block;
padding: 20px 30px 20px 15px;
border: 1px solid #00000010;
border-radius: 5px;
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
color: #333333;
display: flex;
align-items: flex-start;
}
.link-item:hover {
border-color: #1EA7FD50;
transform: translate3d(0, -3px, 0);
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
}
.link-item:active {
border-color: #1EA7FD;
transform: translate3d(0, 0, 0);
}
.link-item strong {
font-weight: 700;
display: block;
margin-bottom: 2px;
}
.link-item img {
height: 40px;
width: 40px;
margin-right: 15px;
flex: none;
}
.link-item span {
font-size: 14px;
line-height: 20px;
}
.tip {
display: inline-block;
border-radius: 1em;
font-size: 11px;
line-height: 12px;
font-weight: 700;
background: #E7FDD8;
color: #66BF3C;
padding: 4px 12px;
margin-right: 10px;
vertical-align: top;
}
.tip-wrapper {
font-size: 13px;
line-height: 20px;
margin-top: 40px;
margin-bottom: 40px;
}
.tip-wrapper code {
font-size: 12px;
display: inline-block;
}
`}</style>
# 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.
<div className="subheading">Configure</div>
<div className="link-list">
<a
className="link-item"
href="https://storybook.js.org/docs/react/addons/addon-types"
target="_blank"
>
<img src={Plugin} alt="plugin" />
<span>
<strong>Presets for popular tools</strong>
Easy setup for TypeScript, SCSS and more.
</span>
</a>
<a
className="link-item"
href="https://storybook.js.org/docs/react/configure/webpack"
target="_blank"
>
<img src={StackAlt} alt="Build" />
<span>
<strong>Build configuration</strong>
How to customize webpack and Babel
</span>
</a>
<a
className="link-item"
href="https://storybook.js.org/docs/react/configure/styling-and-css"
target="_blank"
>
<img src={Colors} alt="colors" />
<span>
<strong>Styling</strong>
How to load and configure CSS libraries
</span>
</a>
<a
className="link-item"
href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
target="_blank"
>
<img src={Flow} alt="flow" />
<span>
<strong>Data</strong>
Providers and mocking for data libraries
</span>
</a>
</div>
<div className="subheading">Learn</div>
<div className="link-list">
<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
<img src={Repo} alt="repo" />
<span>
<strong>Storybook documentation</strong>
Configure, customize, and extend
</span>
</a>
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
<img src={Direction} alt="direction" />
<span>
<strong>In-depth guides</strong>
Best practices from leading teams
</span>
</a>
<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
<img src={Code} alt="code" />
<span>
<strong>GitHub project</strong>
View the source and add issues
</span>
</a>
<a className="link-item" href="https://discord.gg/storybook" target="_blank">
<img src={Comments} alt="comments" />
<span>
<strong>Discord chat</strong>
Chat with maintainers and the community
</span>
</a>
</div>
<div className="tip-wrapper">
<span className="tip">Tip</span>Edit the Markdown in{' '}
<code>src/stories/Introduction.stories.mdx</code>
</div>

1
packages/design-system/src/docs/assets/code-brackets.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
packages/design-system/src/docs/assets/colors.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.3 KiB

1
packages/design-system/src/docs/assets/comments.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
packages/design-system/src/docs/assets/direction.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
packages/design-system/src/docs/assets/flow.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
packages/design-system/src/docs/assets/plugin.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

1
packages/design-system/src/docs/assets/repo.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
packages/design-system/src/docs/assets/stackalt.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
packages/design-system/src/main.d.ts vendored Normal file
View file

@ -0,0 +1 @@
declare module "n8n-design-system";

10
packages/design-system/src/main.js Normal file
View file

@ -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";

1
packages/design-system/src/shims-element-ui.d.ts vendored Normal file
View file

@ -0,0 +1 @@
declare module "element-ui/packages/button";

13
packages/design-system/src/shims-tsx.d.ts vendored Normal file
View file

@ -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;
}
}
}

4
packages/design-system/src/shims-vue.d.ts vendored Normal file
View file

@ -0,0 +1,4 @@
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}

129
packages/design-system/src/styleguide/ColorCircles.vue Normal file
View file

@ -0,0 +1,129 @@
<template>
<div :class="$style.section">
<div v-for="color in colors" :key="color" :class="$style.container">
<div
:class="$style.circle"
:style="{ backgroundColor: `var(${color})` }"
></div>
<span>{{ color }}</span>
<span :class="$style.hsl">{{ hsl[color] }}</span>
<span :class="$style.color">{{ getHexValue(color) }}</span>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
function hslToHex(h: number, s: number, l: number): string {
l /= 100;
const a = (s * Math.min(l, 1 - l)) / 100;
const f = (n: number) => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color)
.toString(16)
.padStart(2, "0"); // convert to Hex and prefix "0" if needed
};
return `#${f(0)}${f(8)}${f(4)}`;
}
function getHex(hsl: string): string {
const colors = hsl
.replace("hsl(", "")
.replace(")", "")
.replace(/%/g, "")
.split(",")
.map((n: string) => parseFloat(n));
return hslToHex(colors[0], colors[1], colors[2]);
}
export default Vue.extend({
name: "color-circles",
data() {
return {
observer: null as null | MutationObserver,
hsl: {} as { [color: string]: string },
};
},
props: {
colors: {
type: Array,
required: true,
},
},
created() {
const setColors = () => {
(this.colors as string[]).forEach((color: string) => {
const style = getComputedStyle(document.body);
Vue.set(this.hsl, color, style.getPropertyValue(color));
});
};
setColors();
// when theme class is added or removed, reset color values
this.observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "attributes") {
setColors();
}
}
});
const body = document.querySelector("body");
if (body) {
this.observer.observe(body, { attributes: true });
}
},
destroyed() {
if (this.observer) {
this.observer.disconnect();
}
},
methods: {
getHexValue(color: string) {
return getHex(this.hsl[color]);
},
},
});
</script>
<style lang="scss" module>
.section {
display: flex;
}
.name {
align-self: center;
}
.container {
width: 140px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
align-self: flex-start;
padding: 5px;
color: var(--color-text-dark);
}
.circle {
border-radius: 50%;
height: 80px;
width: 80px;
margin-bottom: 5px;
border: 1px solid lightgray;
}
.color {
font-size: 0.8em;
}
.hsl {
composes: color;
content: var(--color-primary);
}
</style>

83
packages/design-system/src/styleguide/Sizes.vue Normal file
View file

@ -0,0 +1,83 @@
<template>
<table :class="$style.table">
<tr>
<th :class="$style.row">Name</th>
<th :class="$style.row">rem</th>
<th :class="$style.row">px</th>
</tr>
<tr
v-for="variable in variables"
:key="variable"
:style="attr ? { [attr]: `var(${variable})` } : {}"
>
<td>{{ variable }}</td>
<td>{{ sizes[variable].rem }}</td>
<td>{{ sizes[variable].px }}</td>
</tr>
</table>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "sizes",
data() {
return {
observer: null as null | MutationObserver,
sizes: {},
};
},
props: {
variables: {
type: Array,
required: true,
},
attr: {
type: String,
},
},
created() {
const setSizes = () => {
(this.variables as string[]).forEach((variable: string) => {
const style = getComputedStyle(document.body);
const rem = style.getPropertyValue(variable);
const px = parseFloat(rem.replace("rem", "")) * 16;
Vue.set(this.sizes, variable, { rem, px });
});
};
setSizes();
// when theme class is added or removed, reset color values
this.observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "attributes") {
setSizes();
}
}
});
const body = document.querySelector("body");
if (body) {
this.observer.observe(body, { attributes: true });
}
},
destroyed() {
if (this.observer) {
this.observer.disconnect();
}
},
});
</script>
<style lang="scss" module>
.table {
text-align: center;
color: var(--color-text-dark);
}
.row {
min-width: 150px;
}
</style>

49
packages/design-system/src/styleguide/TextClasses.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<table :class="$style.table">
<tr v-for="c in classes" :key="c">
<td>.{{ c }}{{ postfix ? postfix : "" }}</td>
<td :class="$style[`${c}${postfix ? postfix : ''}`]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in
luctus sapien, a suscipit neque.
</td>
</tr>
</table>
</template>
<script lang="ts">
export default {
name: "text-classes",
data(): { observer: null | MutationObserver; classes: string[] } {
return {
observer: null as null | MutationObserver,
classes: [
"heading1",
"heading2",
"heading3",
"heading4",
"body-large",
"body-medium",
"body-small",
],
};
},
props: {
postfix: {
type: String,
},
},
};
</script>
<style lang="scss" module>
@use "~/theme/src/common/typography.scss";
.table {
text-align: center;
color: var(--color-text-dark);
* {
padding-bottom: 1em;
}
}
</style>

80
packages/design-system/src/styleguide/VariableTable.vue Normal file
View file

@ -0,0 +1,80 @@
<template>
<table :class="$style.table">
<tr>
<th :class="$style.row">Name</th>
<th :class="$style.row">Value</th>
</tr>
<tr
v-for="variable in variables"
:key="variable"
:style="attr ? { [attr]: `var(${variable})` } : {}"
>
<td>{{ variable }}</td>
<td>{{ values[variable] }}</td>
</tr>
</table>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "variable-table",
data() {
return {
observer: null as null | MutationObserver,
values: {},
};
},
props: {
variables: {
type: Array,
required: true,
},
attr: {
type: String,
},
},
created() {
const setValues = () => {
(this.variables as string[]).forEach((variable: string) => {
const style = getComputedStyle(document.body);
const value = style.getPropertyValue(variable);
Vue.set(this.values, variable, value);
});
};
setValues();
// when theme class is added or removed, reset color values
this.observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "attributes") {
setValues();
}
}
});
const body = document.querySelector("body");
if (body) {
this.observer.observe(body, { attributes: true });
}
},
destroyed() {
if (this.observer) {
this.observer.disconnect();
}
},
});
</script>
<style lang="scss" module>
.table {
text-align: center;
color: var(--color-text-dark);
}
.row {
min-width: 150px;
}
</style>

50
packages/design-system/src/styleguide/border.stories.mdx Normal file
View file

@ -0,0 +1,50 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import VariableTable from './VariableTable.vue'
<Meta
title="Styleguide/Border"
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898'
}
}}
/>
# Border Radius
<Canvas>
<Story name="border-radius">
{{
template: `<variable-table :variables="['--border-radius-small','--border-radius-base']" />`,
components: {
VariableTable,
}
}}
</Story>
</Canvas>
# Border Width
<Canvas>
<Story name="border-width">
{{
template: `<variable-table :variables="['--border-width-base']" />`,
components: {
VariableTable,
}
}}
</Story>
</Canvas>
<Canvas>
<Story name="border-style">
{{
template: `<variable-table :variables="['--border-style-base']" />`,
components: {
VariableTable,
}
}}
</Story>
</Canvas>

132
packages/design-system/src/styleguide/colors.stories.mdx Normal file
View file

@ -0,0 +1,132 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import ColorCircles from './ColorCircles.vue';
<Meta
title="Styleguide/Colors"
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23'
}
}}
/>
# Colors
## Primary
<Canvas>
<Story name="primary">
{{
template: `<color-circles :colors="['--color-primary-shade-1', '--color-primary', '--color-primary-tint-1', '--color-primary-tint-2', '--color-primary-tint-3']" />`,
components: {
ColorCircles,
}
}}
</Story>
</Canvas>
## Outline
<Canvas>
<Story name="secondary">
{{
template: `<color-circles :colors="['--color-secondary']" />`,
components: {
ColorCircles,
}
}}
</Story>
</Canvas>
## Success
<Canvas>
<Story name="success">
{{
template: `<color-circles :colors="['--color-success', '--color-success-tint-1', '--color-success-tint-2']" />`,
components: {
ColorCircles,
}
}}
</Story>
</Canvas>
## Warning
<Canvas>
<Story name="warning">
{{
template: `<color-circles :colors="['--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
components: {
ColorCircles,
}
}}
</Story>
</Canvas>
## Danger
<Canvas>
<Story name="danger">
{{
template: `<color-circles :colors="['--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
components: {
ColorCircles,
}
}}
</Story>
</Canvas>
## Info
<Canvas>
<Story name="info">
{{
template: `<color-circles :colors="['--color-info', '--color-info-tint-1', '--color-info-tint-2']" />`,
components: {
ColorCircles,
}
}}
</Story>
</Canvas>
## Text
<Canvas>
<Story name="text">
{{
template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight']" />`,
components: {
ColorCircles,
}
}}
</Story>
</Canvas>
## Foreground
<Canvas>
<Story name="foreground">
{{
template: `<color-circles :colors="['--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
components: {
ColorCircles,
}
}}
</Story>
</Canvas>
## Background
<Canvas>
<Story name="background">
{{
template: `<color-circles :colors="['--color-background-dark', '--color-background-base', '--color-background-light', '--color-background-lighter', '--color-background-xlight']" />`,
components: {
ColorCircles,
}
}}
</Story>
</Canvas>

62
packages/design-system/src/styleguide/fonts.stories.mdx Normal file
View file

@ -0,0 +1,62 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Sizes from './Sizes.vue';
import VariableTable from './VariableTable.vue'
<Meta
title="Styleguide/Font"
/>
# Font
## Font Sizes
<Canvas>
<Story name="font-size">
{{
template: `<sizes :variables="['--font-size-2xs','--font-size-xs','--font-size-s','--font-size-m','--font-size-l','--font-size-xl','--font-size-2xl']" attr="font-size" />`,
components: {
Sizes,
}
}}
</Story>
</Canvas>
## Line Heights
<Canvas>
<Story name="line-height">
{{
template: `<variable-table :variables="['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']" />`,
components: {
VariableTable,
}
}}
</Story>
</Canvas>
## Font Weights
<Canvas>
<Story name="font-weight">
{{
template: `<variable-table :variables="['--font-weight-regular','--font-weight-bold']" attr="font-weight" />`,
components: {
VariableTable,
}
}}
</Story>
</Canvas>
## Font Family
<Canvas>
<Story name="font-family">
{{
template: `<variable-table :variables="['--font-family']" attr="font-family" />`,
components: {
VariableTable,
}
}}
</Story>
</Canvas>

26
packages/design-system/src/styleguide/spacing.stories.mdx Normal file
View file

@ -0,0 +1,26 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Sizes from './Sizes.vue';
import TextClasses from './TextClasses.vue';
<Meta
title="Styleguide/Spacing"
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898'
}
}}
/>
# Spacing
<Canvas>
<Story name="spacing">
{{
template: `<sizes :variables="['--spacing-5xs','--spacing-4xs','--spacing-3xs','--spacing-2xs','--spacing-xs','--spacing-s','--spacing-m','--spacing-l','--spacing-xl','--spacing-2xl','--spacing-3xl','--spacing-4xl','--spacing-5xl']" />`,
components: {
Sizes,
}
}}
</Story>
</Canvas>

38
packages/design-system/src/styleguide/text.stories.mdx Normal file
View file

@ -0,0 +1,38 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import TextClasses from './TextClasses.vue';
<Meta
title="Styleguide/Text"
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898'
}
}}
/>
# Regular
<Canvas>
<Story name="regular">
{{
template: `<text-classes />`,
components: {
TextClasses,
}
}}
</Story>
</Canvas>
# Bold
<Canvas>
<Story name="bold">
{{
template: `<text-classes postfix="-bold" />`,
components: {
TextClasses,
}
}}
</Story>
</Canvas>

39
packages/design-system/theme/README.md Normal file
View file

@ -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
<link rel="stylesheet" href="path/to/node_modules/element-theme-chalk/css-variable/lib/index.css">
```
## Import on demand
```javascript
import 'element-theme-n8n/dist/input.css';
import 'element-theme-n8n/dist/select.css';
// ...
```

1935
packages/design-system/theme/docs.css Normal file
View file

File diff suppressed because one or more lines are too long

1126
packages/design-system/theme/index.html Normal file
View file

File diff suppressed because it is too large Load diff

139
packages/design-system/theme/src/_tokens.dark.scss Normal file
View file

@ -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 }

180
packages/design-system/theme/src/_tokens.scss Normal file
View file

@ -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 }

147
packages/design-system/theme/src/alert.scss Normal file
View file

@ -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;
}

7
packages/design-system/theme/src/aside.scss Normal file
View file

@ -0,0 +1,7 @@
@use "mixins/mixins";
@include mixins.b(aside) {
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
}

80
packages/design-system/theme/src/autocomplete.scss Normal file
View file

@ -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;
}
}
}

51
packages/design-system/theme/src/avatar.scss Normal file
View file

@ -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;
}
}

22
packages/design-system/theme/src/backtop.scss Normal file
View file

@ -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
}
}

58
packages/design-system/theme/src/badge.scss Normal file
View file

@ -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);
}
}
}
}
}

3
packages/design-system/theme/src/base.scss Normal file
View file

@ -0,0 +1,3 @@
@forward "common/var.scss";
@use "common/transition.scss";
@use "icon.scss";

0
packages/design-system/theme/src/breadcrumb-item.scss Normal file
View file

55
packages/design-system/theme/src/breadcrumb.scss Normal file
View file

@ -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;
}
}
}
}

85
packages/design-system/theme/src/button-group.scss Normal file
View file

@ -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);
}
}
}
}

130
packages/design-system/theme/src/button.scss Normal file
View file

@ -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);
}
}
}

79
packages/design-system/theme/src/calendar.scss Normal file
View file

@ -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;
}
}
}

32
packages/design-system/theme/src/card.scss Normal file
View file

@ -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;
}
}

50
packages/design-system/theme/src/carousel-item.scss Normal file
View file

@ -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;
}
}

161
packages/design-system/theme/src/carousel.scss Normal file
View file

@ -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;
}

120
packages/design-system/theme/src/cascader-panel.scss Normal file
View file

@ -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;
}
}
}

182
packages/design-system/theme/src/cascader.scss Normal file
View file

@ -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;
}
}
}

0
packages/design-system/theme/src/checkbox-button.scss Normal file
View file

0
packages/design-system/theme/src/checkbox-group.scss Normal file
View file

363
packages/design-system/theme/src/checkbox.scss Normal file
View file

@ -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;
}

158
packages/design-system/theme/src/col.scss Normal file
View file

@ -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%;
}
}
}

0
packages/design-system/theme/src/collapse-item.scss Normal file
View file

63
packages/design-system/theme/src/collapse.scss Normal file
View file

@ -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;
}
}

365
packages/design-system/theme/src/color-picker.scss Normal file
View file

@ -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;
}
}

42
packages/design-system/theme/src/common/popup.scss Normal file
View file

@ -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;
}
}

99
packages/design-system/theme/src/common/transition.scss Normal file
View file

@ -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);
}

67
packages/design-system/theme/src/common/typography.scss Normal file
View file

@ -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;
}

980
packages/design-system/theme/src/common/var.scss Normal file
View file

@ -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),
);

14
packages/design-system/theme/src/container.scss Normal file
View file

@ -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;
}
}

12
packages/design-system/theme/src/date-picker.scss Normal file
View file

@ -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";

97
packages/design-system/theme/src/date-picker/date-picker.scss Normal file
View file

@ -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;
}
}

102
packages/design-system/theme/src/date-picker/date-range-picker.scss Normal file
View file

@ -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;
}
}
}

151
packages/design-system/theme/src/date-picker/date-table.scss Normal file
View file

@ -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;
}
}

83
packages/design-system/theme/src/date-picker/month-table.scss Normal file
View file

@ -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;
}
}
}

127
packages/design-system/theme/src/date-picker/picker-panel.scss Normal file
View file

@ -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;
}

197
packages/design-system/theme/src/date-picker/picker.scss Normal file
View file

@ -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;
}
}
}

Some files were not shown because too many files have changed in this diff Show more