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

apply editor config prettier

Browse source
This commit is contained in:
Mutasem 2021-08-09 12:22:21 +02:00
parent b120d0345f
commit 3eded4cb1d
105 changed files with 5108 additions and 3573 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@ jobs:
build:
runs-on: ubuntu-latest
env:
NODE_OPTIONS: '--max_old_space_size=4096'
NODE_OPTIONS: "--max_old_space_size=4096"
steps:
- uses: actions/checkout@v2
- name: Build and deploy
@ -37,4 +37,4 @@ jobs:
github_token: ${{ secrets.GITHUB_TOKEN }}
branch: gh-pages
force: true
directory: 'storybook-static'
directory: "storybook-static"

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

@ -1,5 +1,4 @@
import { library } from '@fortawesome/fontawesome-svg-core';
import { library } from "@fortawesome/fontawesome-svg-core";
import {
faAngleDoubleLeft,
faAngleDown,
@ -81,8 +80,8 @@ import {
faUndo,
faUsers,
faClock,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(faAngleDoubleLeft);
library.add(faAngleDown);

2
packages/design-system/.storybook/fonts.scss
View file

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

44
packages/design-system/.storybook/main.js
View file

@ -1,46 +1,38 @@
const path = require('path');
const path = require("path");
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
'storybook-addon-designs',
'storybook-addon-themes'
"storybook-addon-designs",
"storybook-addon-themes",
],
webpackFinal: async (config, {
configType
}) => {
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.scss$/,
oneOf: [{
oneOf: [
{
resourceQuery: /module/,
use: [
'vue-style-loader',
"vue-style-loader",
{
loader: 'css-loader',
loader: "css-loader",
options: {
modules: true
}
modules: true,
},
'sass-loader',
},
"sass-loader",
],
include: path.resolve(__dirname, '../'),
include: path.resolve(__dirname, "../"),
},
{
use: [
'vue-style-loader',
'css-loader',
'sass-loader',
use: ["vue-style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../"),
},
],
include: path.resolve(__dirname, '../'),
}
]
});
return config;
},
}
};

54
packages/design-system/.storybook/preview.js
View file

@ -1,7 +1,7 @@
import './font-awesome-icons';
import './storybook.scss';
import "./font-awesome-icons";
import "./storybook.scss";
import Vue from 'vue';
import Vue from "vue";
// https://github.com/storybookjs/storybook/issues/6153
Vue.prototype.toJSON = function () {
@ -10,7 +10,7 @@ Vue.prototype.toJSON = function () {
export const parameters = {
actions: {
argTypesRegex: "^on[A-Z].*"
argTypesRegex: "^on[A-Z].*",
},
controls: {
matchers: {
@ -19,40 +19,42 @@ export const parameters = {
},
},
backgrounds: {
default: '--color-background-xlight',
values: [{
name: '--color-background-dark',
value: 'var(--color-background-dark)',
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-base",
value: "var(--color-background-base)",
},
{
name: '--color-background-light',
value: 'var(--color-background-light)'
name: "--color-background-light",
value: "var(--color-background-light)",
},
{
name: '--color-background-lighter',
value: 'var(--color-background-lighter)'
name: "--color-background-lighter",
value: "var(--color-background-lighter)",
},
{
name: '--color-background-xlight',
value: 'var(--color-background-xlight)'
}
name: "--color-background-xlight",
value: "var(--color-background-xlight)",
},
],
},
themes: {
list: [{
name: 'dark',
class: 'theme-dark',
color: '#000'
}
list: [
{
name: "dark",
class: "theme-dark",
color: "#000",
},
],
},
options: {
storySort: {
order: ['Docs', 'Styleguide', 'Atoms']
}
}
}
order: ["Docs", "Styleguide", "Atoms"],
},
},
};

2
packages/design-system/.storybook/storybook.scss
View file

@ -5,4 +5,4 @@
);
@use "~/theme/src/reset.scss";
@use "~/theme/src/index.scss"
@use "~/theme/src/index.scss";

7
packages/design-system/README.md
View file

@ -5,36 +5,43 @@ 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
```

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

@ -120,4 +120,3 @@ Text.args = {
label: "Button",
icon: "plus-circle",
};

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

@ -109,15 +109,17 @@ export default {
...(props.fullWidth ? { width: "100%" } : {}),
};
},
getClass(props: {type: string, theme?: string}) {
return props.type === 'text' ? 'text' : `${props.type}-${props.theme || 'primary'}`;
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}))
@return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}));
}
.button {

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

@ -1,7 +1,7 @@
import { N8nComponent, N8nComponentSize } from "../component";
import { N8nComponent, N8nComponentSize } from '../component';
/** Button type */
export type ButtonType = "primary" | "outline" | "light";
export type ButtonType = 'primary' | 'outline' | 'light';
/** Button Component */
export declare class N8nButton extends N8nComponent {

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

@ -43,9 +43,9 @@ export default {
}
._md {
font-size: .95em;
height: .95em;
width: .95em !important;
font-size: 0.95em;
height: 0.95em;
width: 0.95em !important;
}
._lg {

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

@ -1,4 +1,4 @@
import { N8nComponent, N8nComponentSize } from "../component";
import { N8nComponent, N8nComponentSize } from '../component';
/** Button Component */
export declare class N8nIcon extends N8nComponent {

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

@ -1,4 +1,4 @@
import { N8nComponent, N8nComponentSize } from "../component";
import { N8nComponent, N8nComponentSize } from '../component';
/** Icon Button Component */
export declare class N8nIconButton extends N8nComponent {
@ -6,7 +6,7 @@ export declare class N8nIconButton extends N8nComponent {
title: string;
/** Button size */
size: N8nComponentSize | "xl";
size: N8nComponentSize | 'xl';
/** icon size */
iconSize: N8nComponentSize;

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

@ -1,4 +1,4 @@
import { N8nComponent, N8nComponentSize } from "../component";
import { N8nComponent, N8nComponentSize } from '../component';
/** Spinner Component */
export declare class N8nSpinner extends N8nComponent {

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

@ -1,4 +1,4 @@
import Vue from "vue";
import Vue from 'vue';
/** N8n component common definition */
export declare class N8nComponent extends Vue {
@ -7,4 +7,4 @@ export declare class N8nComponent extends Vue {
}
/** Component size definition for button, input, etc */
export type N8nComponentSize = "lg" | "md" | "sm";
export type N8nComponentSize = 'lg' | 'md' | 'sm';

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

@ -1 +1 @@
declare module "./N8nButton";
declare module './N8nButton';

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

@ -1,12 +1,12 @@
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';
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" />
@ -182,14 +182,22 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
Configure, customize, and extend
</span>
</a>
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
<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">
<a
className="link-item"
href="https://github.com/storybookjs/storybook"
target="_blank"
>
<img src={Code} alt="code" />
<span>
<strong>GitHub project</strong>
@ -206,6 +214,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
</div>
<div className="tip-wrapper">
<span className="tip">Tip</span>Edit the Markdown in{' '}
<span className="tip">Tip</span>Edit the Markdown in{" "}
<code>src/stories/Introduction.stories.mdx</code>
</div>

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

@ -1 +1 @@
declare module "n8n-design-system";
declare module 'n8n-design-system';

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

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

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

@ -1,4 +1,4 @@
import Vue, { VNode } from "vue";
import Vue, { VNode } from 'vue';
declare global {
namespace JSX {

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

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

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

@ -1,13 +1,13 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import VariableTable from './VariableTable.vue'
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'
}
type: "figma",
url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
},
}}
/>
@ -19,7 +19,7 @@ import VariableTable from './VariableTable.vue'
template: `<variable-table :variables="['--border-radius-small','--border-radius-base']" />`,
components: {
VariableTable,
}
},
}}
</Story>
</Canvas>
@ -32,7 +32,7 @@ import VariableTable from './VariableTable.vue'
template: `<variable-table :variables="['--border-width-base']" />`,
components: {
VariableTable,
}
},
}}
</Story>
</Canvas>
@ -43,8 +43,7 @@ import VariableTable from './VariableTable.vue'
template: `<variable-table :variables="['--border-style-base']" />`,
components: {
VariableTable,
}
},
}}
</Story>
</Canvas>

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

@ -1,13 +1,13 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import ColorCircles from './ColorCircles.vue';
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'
}
type: "figma",
url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23",
},
}}
/>
@ -21,7 +21,7 @@ import ColorCircles from './ColorCircles.vue';
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>
@ -34,7 +34,7 @@ import ColorCircles from './ColorCircles.vue';
template: `<color-circles :colors="['--color-secondary']" />`,
components: {
ColorCircles,
}
},
}}
</Story>
</Canvas>
@ -47,12 +47,11 @@ import ColorCircles from './ColorCircles.vue';
template: `<color-circles :colors="['--color-success', '--color-success-tint-1', '--color-success-tint-2']" />`,
components: {
ColorCircles,
}
},
}}
</Story>
</Canvas>
## Warning
<Canvas>
@ -61,7 +60,7 @@ import ColorCircles from './ColorCircles.vue';
template: `<color-circles :colors="['--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
components: {
ColorCircles,
}
},
}}
</Story>
</Canvas>
@ -74,7 +73,7 @@ import ColorCircles from './ColorCircles.vue';
template: `<color-circles :colors="['--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
components: {
ColorCircles,
}
},
}}
</Story>
</Canvas>
@ -87,7 +86,7 @@ import ColorCircles from './ColorCircles.vue';
template: `<color-circles :colors="['--color-info', '--color-info-tint-1', '--color-info-tint-2']" />`,
components: {
ColorCircles,
}
},
}}
</Story>
</Canvas>
@ -100,7 +99,7 @@ import ColorCircles from './ColorCircles.vue';
template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight']" />`,
components: {
ColorCircles,
}
},
}}
</Story>
</Canvas>
@ -113,7 +112,7 @@ import ColorCircles from './ColorCircles.vue';
template: `<color-circles :colors="['--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
components: {
ColorCircles,
}
},
}}
</Story>
</Canvas>
@ -126,7 +125,7 @@ import ColorCircles from './ColorCircles.vue';
template: `<color-circles :colors="['--color-background-dark', '--color-background-base', '--color-background-light', '--color-background-lighter', '--color-background-xlight']" />`,
components: {
ColorCircles,
}
},
}}
</Story>
</Canvas>

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

@ -1,10 +1,8 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Sizes from './Sizes.vue';
import VariableTable from './VariableTable.vue'
import { Meta, Story, Canvas } from "@storybook/addon-docs";
import Sizes from "./Sizes.vue";
import VariableTable from "./VariableTable.vue";
<Meta
title="Styleguide/Font"
/>
<Meta title="Styleguide/Font" />
# Font
@ -16,7 +14,7 @@ import VariableTable from './VariableTable.vue'
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>
@ -29,7 +27,7 @@ import VariableTable from './VariableTable.vue'
template: `<variable-table :variables="['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']" />`,
components: {
VariableTable,
}
},
}}
</Story>
</Canvas>
@ -42,7 +40,7 @@ import VariableTable from './VariableTable.vue'
template: `<variable-table :variables="['--font-weight-regular','--font-weight-bold']" attr="font-weight" />`,
components: {
VariableTable,
}
},
}}
</Story>
</Canvas>
@ -55,8 +53,7 @@ import VariableTable from './VariableTable.vue'
template: `<variable-table :variables="['--font-family']" attr="font-family" />`,
components: {
VariableTable,
}
},
}}
</Story>
</Canvas>

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

@ -1,14 +1,14 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Sizes from './Sizes.vue';
import TextClasses from './TextClasses.vue';
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'
}
type: "figma",
url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
},
}}
/>
@ -20,7 +20,7 @@ import TextClasses from './TextClasses.vue';
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>

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

@ -1,13 +1,13 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import TextClasses from './TextClasses.vue';
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'
}
type: "figma",
url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
},
}}
/>
@ -19,7 +19,7 @@ import TextClasses from './TextClasses.vue';
template: `<text-classes />`,
components: {
TextClasses,
}
},
}}
</Story>
</Canvas>
@ -32,7 +32,7 @@ import TextClasses from './TextClasses.vue';
template: `<text-classes postfix="-bold" />`,
components: {
TextClasses,
}
},
}}
</Story>
</Canvas>

19
packages/design-system/theme/README.md
View file

@ -1,4 +1,5 @@
# element-theme-n8n
> element component chalk theme by css variable.
[Online preview](https://n8n-io.github.io/element-theme-n8n/)
@ -9,6 +10,7 @@ CSS Variable
https://caniuse.com/css-variables
## Installation
```shell
npm i element-theme-n8n -S
```
@ -16,24 +18,31 @@ npm i element-theme-n8n -S
## Usage
Use Sass import
```css
@import 'element-theme-n8n';
@import "element-theme-n8n";
```
Or Use webpack
```javascript
import 'element-theme-n8n';
import "element-theme-n8n";
```
Or
```html
<link rel="stylesheet" href="path/to/node_modules/element-theme-chalk/css-variable/lib/index.css">
<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';
import "element-theme-n8n/dist/input.css";
import "element-theme-n8n/dist/select.css";
// ...
```

1444
packages/design-system/theme/docs.css
View file

File diff suppressed because one or more lines are too long

1140
packages/design-system/theme/index.html
View file

File diff suppressed because it is too large Load diff

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

@ -7,133 +7,259 @@
--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: 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-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-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-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-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-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: 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-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-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: 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-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-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: 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-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-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: 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-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-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-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-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-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-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-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-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-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-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-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-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-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-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));
--color-background-xlight: hsl(
var(--color-background-xlight-h),
var(--color-background-xlight-s),
var(--color-background-xlight-l)
);
}
body.theme-dark { @include theme }
body.theme-dark {
@include theme;
}

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

@ -7,139 +7,264 @@
--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: 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-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-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-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-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-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: 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-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-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: 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-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-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: 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-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-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: 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-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-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-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-base: hsl(
var(--color-text-base-h),
var(--color-text-base-s),
var(--color-text-base-l)
);
--color-text-light-h: 220;
--color-text-light-s: 4.2%;
--color-text-light-l: 58.2%;
--color-text-light: hsl(var(--color-text-light-h), var(--color-text-light-s), var(--color-text-light-l));
--color-text-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-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-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-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-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-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-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-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-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-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));
--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);
--border-base: var(--border-width-base) var(--border-style-base)
var(--color-foreground-base);
--font-size-2xs: 0.75rem;
--font-size-xs: 0.8125rem;
@ -157,7 +282,7 @@
--font-weight-regular: 400;
--font-weight-semi-bold: 500;
--font-weight-bold: 600;
--font-family: 'Open Sans',sans-serif;
--font-family: "Open Sans", sans-serif;
--spacing-5xs: 0.125rem;
--spacing-4xs: 0.25rem;
@ -177,4 +302,6 @@
--button-shade-active: 10%;
}
:root { @include theme }
:root {
@include theme;
}

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

@ -13,7 +13,7 @@
opacity: 1;
display: flex;
align-items: center;
transition: opacity .2s;
transition: opacity 0.2s;
@include mixins.when(light) {
.el-alert__closebtn {

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

@ -12,11 +12,11 @@
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 0 6px rgba(0,0,0, .12);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
cursor: pointer;
z-index: 5;
&:hover {
background-color: var.$backtop-hover-background-color
background-color: var.$backtop-hover-background-color;
}
}

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

@ -12,7 +12,7 @@
font-weight: bold;
color: var.$color-text-placeholder;
&[class*=icon] {
&[class*="icon"] {
margin: 0 6px;
font-weight: normal;
}
@ -24,7 +24,8 @@
@include mixins.e(inner) {
color: var.$color-text-primary;
&.is-link, & a {
&.is-link,
& a {
font-weight: bold;
text-decoration: none;
transition: var.$color-transition-base;
@ -40,7 +41,8 @@
&:last-child {
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
&, &:hover {
&,
&:hover {
font-weight: normal;
color: var.$color-text-primary;
cursor: text;

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

@ -82,4 +82,3 @@
}
}
}

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

@ -27,10 +27,16 @@ $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);
$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-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);
@ -75,7 +81,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
&:before {
pointer-events: none;
content: '';
content: "";
position: absolute;
left: -1px;
top: -1px;

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

@ -17,12 +17,12 @@
}
@include mixins.when(animating) {
transition: transform .4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
@include mixins.m(card) {
width: 50%;
transition: transform .4s ease-in-out;
transition: transform 0.4s ease-in-out;
&.is-in-stage {
cursor: pointer;
z-index: var.$index-normal;
@ -45,6 +45,6 @@
left: 0;
background-color: var.$color-white;
opacity: 0.24;
transition: .2s;
transition: 0.2s;
}
}

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

@ -25,7 +25,7 @@
height: var.$carousel-arrow-size;
width: var.$carousel-arrow-size;
cursor: pointer;
transition: .3s;
transition: 0.3s;
border-radius: 50%;
background-color: var.$carousel-arrow-background;
color: var.$color-white;
@ -73,7 +73,8 @@
}
@include mixins.m(outside) {
bottom: #{var.$carousel-indicator-height + var.$carousel-indicator-padding-vertical * 2};
bottom: #{var.$carousel-indicator-height +
var.$carousel-indicator-padding-vertical * 2};
text-align: center;
position: static;
transform: none;
@ -115,11 +116,13 @@
@include mixins.m(horizontal) {
display: inline-block;
padding: var.$carousel-indicator-padding-vertical var.$carousel-indicator-padding-horizontal;
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;
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};
@ -144,7 +147,7 @@
padding: 0;
margin: 0;
cursor: pointer;
transition: .3s;
transition: 0.3s;
}
}

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

@ -82,7 +82,8 @@
&:not(.is-disabled) {
cursor: pointer;
&:hover, &:focus {
&:hover,
&:focus {
background: var.$cascader-node-background-hover;
}
}

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

@ -30,7 +30,7 @@
}
.el-icon-arrow-down {
transition: transform .3s;
transition: transform 0.3s;
font-size: 14px;
@include mixins.when(reverse) {
@ -145,7 +145,8 @@
outline: none;
cursor: pointer;
&:hover, &:focus {
&:hover,
&:focus {
background: var.$cascader-node-background-hover;
}

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

@ -161,7 +161,8 @@
color: var.$checkbox-checked-font-color;
}
}
@include mixins.when(focus) { /*focus时 视觉上区分*/
@include mixins.when(focus) {
/*focus时 视觉上区分*/
.el-checkbox__inner {
border-color: var.$checkbox-input-border-color-hover;
}
@ -172,7 +173,7 @@
border-color: var.$checkbox-checked-input-border-color;
&::before {
content: '';
content: "";
position: absolute;
display: block;
background-color: var.$checkbox-checked-icon-color;
@ -199,8 +200,8 @@
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);
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
&:hover {
border-color: var.$checkbox-input-border-color-hover;
@ -218,7 +219,7 @@
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 3px;
transition: transform .15s ease-in .05s;
transition: transform 0.15s ease-in 0.05s;
transform-origin: center;
}
}
@ -270,7 +271,11 @@
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,);
@include button.button-size(
var.$button-padding-vertical,
var.$button-padding-horizontal,
var.$button-font-size
);
&:hover {
color: var(--color-primary);
@ -341,19 +346,31 @@
@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 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 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 button.button-size(
var.$button-mini-padding-vertical,
var.$button-mini-padding-horizontal,
var.$button-mini-font-size
);
}
}
}

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

@ -24,11 +24,11 @@
border-bottom: 1px solid var.$collapse-border-color;
font-size: var.$collapse-header-font-size;
font-weight: 500;
transition: border-bottom-color .3s;
transition: border-bottom-color 0.3s;
outline: none;
@include mixins.e(arrow) {
margin: 0 8px 0 auto;
transition: transform .3s;
transition: transform 0.3s;
font-weight: 300;
@include mixins.when(active) {
transform: rotate(90deg);

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

@ -52,10 +52,15 @@
@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%);
to right,
#f00 0%,
#ff0 17%,
#0f0 33%,
#0ff 50%,
#00f 67%,
#f0f 83%,
#f00 100%
);
height: 100%;
}
@ -81,10 +86,15 @@
.el-color-hue-slider__bar {
background: linear-gradient(
to bottom, #f00 0%,
#ff0 17%, #0f0 33%,
#0ff 50%, #00f 67%,
#f0f 83%, #f00 100%);
to bottom,
#f00 0%,
#ff0 17%,
#0f0 33%,
#0ff 50%,
#00f 67%,
#f0f 83%,
#f00 100%
);
}
.el-color-hue-slider__thumb {
@ -101,7 +111,7 @@
width: 280px;
height: 180px;
@include mixins.e(('white', 'black')) {
@include mixins.e(("white", "black")) {
position: absolute;
top: 0;
left: 0;
@ -109,11 +119,11 @@
bottom: 0;
}
@include mixins.e('white') {
@include mixins.e("white") {
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
@include mixins.e('black') {
@include mixins.e("black") {
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
@ -124,7 +134,8 @@
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);
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);
}
@ -141,8 +152,10 @@
@include mixins.e(bar) {
position: relative;
background: linear-gradient(
to right, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
height: 100%;
}
@ -167,8 +180,10 @@
.el-color-alpha-slider__bar {
background: linear-gradient(
to bottom, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.el-color-alpha-slider__thumb {
@ -292,7 +307,7 @@
left: 1px;
z-index: 1;
cursor: not-allowed;
background-color: rgba(255, 255, 255, .7);
background-color: rgba(255, 255, 255, 0.7);
}
@include mixins.e(trigger) {

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

@ -2,11 +2,11 @@
@use "../mixins/mixins";
.v-modal-enter {
animation: v-modal-in .2s ease;
animation: v-modal-in 0.2s ease;
}
.v-modal-leave {
animation: v-modal-out .2s ease forwards;
animation: v-modal-out 0.2s ease forwards;
}
@keyframes v-modal-in {

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

@ -22,7 +22,7 @@
.el-fade-in-enter-active,
.el-fade-in-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.el-fade-in-enter,
.el-fade-in-leave-active {
@ -31,7 +31,7 @@
.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.el-zoom-in-center-enter,
.el-zoom-in-center-leave-active {
@ -75,25 +75,28 @@
.el-zoom-in-left-enter,
.el-zoom-in-left-leave-active {
opacity: 0;
transform: scale(.45, .45);
transform: scale(0.45, 0.45);
}
.collapse-transition {
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
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;
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 {
.el-list-enter,
.el-list-leave-active {
opacity: 0;
transform: translateY(-30px);
}
.el-opacity-transition {
transition: opacity .3s cubic-bezier(.55,0,.1,1);
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

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

@ -64,4 +64,3 @@
.body-small-bold {
@extend %bold, .body-small;
}

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

@ -7,52 +7,198 @@
/* Transition
-------------------------- */
$all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
$all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.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;
$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 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
/* Color
-------------------------- */
$color-white: #FFFFFF !default;
$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-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-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-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-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-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;
@ -88,9 +234,9 @@ $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;
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 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;
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
/// boxShadow|1|Shadow|1
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
@ -100,8 +246,8 @@ $fill-base: $color-white !default;
/* Typography
-------------------------- */
$font-path: 'fonts' !default;
$font-display: 'auto' !default;
$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
@ -577,7 +723,6 @@ $button-hover-tint-percent: 10% !default;
$button-light-tint-percent: 30% !default;
$button-active-shade-percent: 10% !default;
/* cascader
-------------------------- */
$cascader-height: 200px !default;
@ -625,7 +770,7 @@ $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;
$table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
/* Pagination
-------------------------- */
@ -745,7 +890,12 @@ $card-padding: 20px !default;
$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-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;
@ -813,8 +963,18 @@ $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;
$scrollbar-background-color: hsla(
var(#{--color-text-light-h}),
var(#{--color-text-light-s}),
var(#{--color-text-light-l}),
0.3
) !default;
$scrollbar-hover-background-color: hsla(
var(#{--color-text-light-h}),
var(#{--color-text-light-s}),
var(#{--color-text-light-l}),
0.5
) !default;
/* Carousel
--------------------------*/
@ -923,7 +1083,7 @@ $link-info-font-color: var(--color-info) !default;
/// border||Other|4
$calendar-border: $table-border !default;
/// color||Other|4
$calendar-selected-background-color: #F2F8FE !default;
$calendar-selected-background-color: #f2f8fe !default;
$calendar-cell-width: 85px !default;
/* Form
@ -936,7 +1096,7 @@ $form-label-font-size: $font-size-base !default;
/// color||Color|0
$avatar-font-color: #fff !default;
/// color||Color|0
$avatar-background-color: #C0C4CC !default;
$avatar-background-color: #c0c4cc !default;
/// fontSize||Font Size|1
$avatar-text-font-size: 14px !default;
/// fontSize||Font Size|1
@ -958,23 +1118,67 @@ $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)
"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),
"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,
),
);

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

@ -26,11 +26,11 @@
text-align: center;
height: 28px;
[class*=arrow-left] {
[class*="arrow-left"] {
float: left;
}
[class*=arrow-right] {
[class*="arrow-right"] {
float: right;
}
@ -52,7 +52,6 @@
border-right: 1px solid var.$datepicker-inner-border-color;
}
.el-date-range-picker__header {
div {
margin-left: 50px;
margin-right: 50px;

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

@ -108,7 +108,7 @@
}
}
.el-picker-panel *[slot=sidebar],
.el-picker-panel *[slot="sidebar"],
.el-picker-panel__sidebar {
position: absolute;
top: 0;
@ -121,7 +121,7 @@
overflow: auto;
}
.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
.el-picker-panel *[slot="sidebar"] + .el-picker-panel__body,
.el-picker-panel__sidebar + .el-picker-panel__body {
margin-left: 110px;
}

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

@ -177,7 +177,8 @@
color: var.$input-disabled-color;
cursor: not-allowed;
&:hover, &:focus {
&:hover,
&:focus {
border-color: var.$input-disabled-border;
}

3
packages/design-system/theme/src/date-picker/time-picker.scss
View file

@ -19,7 +19,8 @@
position: relative;
overflow: hidden;
&::after, &::before {
&::after,
&::before {
content: "";
top: 50%;
position: absolute;

2
packages/design-system/theme/src/date-picker/time-spinner.scss
View file

@ -79,7 +79,7 @@
&::after,
&::before {
content: '';
content: "";
display: block;
width: 100%;
height: 80px;

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

@ -50,7 +50,8 @@
color: var(--color-info);
}
&:focus, &:hover {
&:focus,
&:hover {
.el-dialog__close {
color: var(--color-primary);
}
@ -93,11 +94,11 @@
}
.dialog-fade-enter-active {
animation: dialog-fade-in .3s;
animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
animation: dialog-fade-out .3s;
animation: dialog-fade-out 0.3s;
}
@keyframes dialog-fade-in {

21
packages/design-system/theme/src/drawer.scss
View file

@ -11,10 +11,8 @@
}
@mixin drawer-animation($direction) {
@keyframes #{$direction}-drawer-in {
0% {
@if $direction == ltr {
transform: translate(-100%, 0px);
}
@ -58,7 +56,7 @@
}
@if $direction == rtl {
transform: translate(0px, 0px);;
transform: translate(0px, 0px);
}
@if $direction == ttb {
@ -92,13 +90,13 @@
@mixin animation-in($direction) {
.el-drawer__open &.#{$direction} {
animation: #{$direction}-drawer-in .3s 1ms;
animation: #{$direction}-drawer-in 0.3s 1ms;
}
}
@mixin animation-out($direction) {
&.#{$direction} {
animation: #{$direction}-drawer-out .3s;
animation: #{$direction}-drawer-out 0.3s;
}
}
@ -116,8 +114,7 @@ $directions: rtl, ltr, ttb, btt;
display: flex;
flex-direction: column;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12);
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
overflow: hidden;
outline: 0;
@ -170,13 +167,15 @@ $directions: rtl, ltr, ttb, btt;
}
}
&.ltr, &.rtl {
&.ltr,
&.rtl {
height: 100%;
top: 0;
bottom: 0;
}
&.ttb, &.btt {
&.ttb,
&.btt {
width: 100%;
left: 0;
right: 0;
@ -210,9 +209,9 @@ $directions: rtl, ltr, ttb, btt;
}
.el-drawer-fade-enter-active {
animation: el-drawer-fade-in .3s;
animation: el-drawer-fade-in 0.3s;
}
.el-drawer-fade-leave-active {
animation: el-drawer-fade-in .3s reverse;
animation: el-drawer-fade-in 0.3s reverse;
}

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

@ -25,18 +25,23 @@
&::before {
$gap: 5px;
content: '';
content: "";
position: absolute;
display: block;
width: 1px;
top: $gap;
bottom: $gap;
left: 0;
background: rgba(var.$color-white, .5);
background: rgba(var.$color-white, 0.5);
}
&.el-button--default::before {
background: hsla(var(#{--button-default-border-color-h}), var(#{--button-default-border-color-s}), var(#{--button-default-border-color-l}), .5);
background: hsla(
var(#{--button-default-border-color-h}),
var(#{--button-default-border-color-s}),
var(#{--button-default-border-color-l}),
0.5
);
}
&:hover {
@ -55,8 +60,10 @@
margin: 0 3px;
}
.el-dropdown-selfdefine { // 自定义
&:focus:active, &:focus:not(.focusing) {
.el-dropdown-selfdefine {
// 自定义
&:focus:active,
&:focus:not(.focusing) {
outline-width: 0;
}
}
@ -83,7 +90,8 @@
color: var.$color-text-primary;
cursor: pointer;
outline: none;
&:not(.is-disabled):hover, &:focus {
&:not(.is-disabled):hover,
&:focus {
background-color: var.$dropdown-menuItem-hover-fill;
color: var.$dropdown-menuItem-hover-color;
}
@ -100,7 +108,7 @@
border-top: 1px solid var.$border-color-lighter;
&:before {
content: '';
content: "";
height: $divided-offset;
display: block;
margin: 0 -20px;

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

@ -131,10 +131,10 @@
}
@include mixins.when(required) {
@include mixins.pseudo('not(.is-no-asterisk)') {
@include mixins.pseudo("not(.is-no-asterisk)") {
& > .el-form-item__label:before,
& .el-form-item__label-wrap > .el-form-item__label:before {
content: '*';
content: "*";
color: var(--color-danger);
margin-right: 4px;
}
@ -144,7 +144,8 @@
@include mixins.when(error) {
& .el-input__inner,
& .el-textarea__inner {
&, &:focus {
&,
&:focus {
border-color: var(--color-danger);
}
}

12
packages/design-system/theme/src/icon.scss
View file

@ -1,17 +1,19 @@
@use "./common/var";
@font-face {
font-family: 'element-icons';
src: url('#{var.$font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
url('#{var.$font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-family: "element-icons";
src: url("#{var.$font-path}/element-icons.woff") format("woff"),
/* chrome, firefox */ url("#{var.$font-path}/element-icons.ttf")
format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-display: var.$font-display;
font-style: normal;
}
[class^="el-icon-"], [class*=" el-icon-"] {
[class^="el-icon-"],
[class*=" el-icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'element-icons' !important;
font-family: "element-icons" !important;
speak: none;
font-style: normal;
font-weight: normal;

11
packages/design-system/theme/src/image.scss
View file

@ -45,10 +45,7 @@
}
}
@include mixins.b(image-viewer) {
@include mixins.e(wrapper) {
position: fixed;
top: 0;
@ -64,7 +61,7 @@
align-items: center;
justify-content: center;
border-radius: 50%;
opacity: .8;
opacity: 0.8;
cursor: pointer;
box-sizing: border-box;
user-select: none;
@ -143,17 +140,17 @@
height: 100%;
top: 0;
left: 0;
opacity: .5;
opacity: 0.5;
background: #000;
}
}
.viewer-fade-enter-active {
animation: viewer-fade-in .3s;
animation: viewer-fade-in 0.3s;
}
.viewer-fade-leave-active {
animation: viewer-fade-out .3s;
animation: viewer-fade-out 0.3s;
}
@keyframes viewer-fade-in {

27
packages/design-system/theme/src/input-number.scss
View file

@ -92,8 +92,8 @@
width: var.$input-small-height;
font-size: var.$input-small-font-size;
[class*=el-icon] {
transform: scale(.9);
[class*="el-icon"] {
transform: scale(0.9);
}
}
@ -111,8 +111,8 @@
width: var.$input-mini-height;
font-size: var.$input-mini-font-size;
[class*=el-icon] {
transform: scale(.8);
[class*="el-icon"] {
transform: scale(0.8);
}
}
@ -139,8 +139,8 @@
height: auto;
line-height: #{(var.$input-height - 2) * 0.5};
[class*=el-icon] {
transform: scale(.8);
[class*="el-icon"] {
transform: scale(0.8);
}
}
@ -159,20 +159,23 @@
border-radius: 0 0 var(--border-radius-base) 0;
}
&[class*=medium] {
[class*=increase], [class*=decrease] {
&[class*="medium"] {
[class*="increase"],
[class*="decrease"] {
line-height: #{(var.$input-medium-height - 2) * 0.5};
}
}
&[class*=small] {
[class*=increase], [class*=decrease] {
&[class*="small"] {
[class*="increase"],
[class*="decrease"] {
line-height: #{(var.$input-small-height - 2) * 0.5};
}
}
&[class*=mini] {
[class*=increase], [class*=decrease] {
&[class*="mini"] {
[class*="increase"],
[class*="decrease"] {
line-height: #{(var.$input-mini-height - 2) * 0.5};
}
}

8
packages/design-system/theme/src/input.scss
View file

@ -141,7 +141,7 @@
top: 0;
text-align: center;
color: var.$input-icon-color;
transition: all .3s;
transition: all 0.3s;
pointer-events: none;
}
@ -156,18 +156,18 @@
top: 0;
text-align: center;
color: var.$input-icon-color;
transition: all .3s;
transition: all 0.3s;
}
@include mixins.e(icon) {
height: 100%;
width: 25px;
text-align: center;
transition: all .3s;
transition: all 0.3s;
line-height: var.$input-height;
&:after {
content: '';
content: "";
height: 100%;
width: 0;
display: inline-block;

21
packages/design-system/theme/src/link.scss
View file

@ -6,7 +6,8 @@ $typeMap: (
danger: var.$link-danger-font-color,
success: var.$link-success-font-color,
warning: var.$link-warning-font-color,
info: var.$link-info-font-color);
info: var.$link-info-font-color,
);
@include mixins.b(link) {
display: inline-flex;
@ -30,7 +31,7 @@ $typeMap: (
right: 0;
height: 0;
bottom: 0;
border-bottom: 1px solid var.$link-default-active-color
border-bottom: 1px solid var.$link-default-active-color;
}
}
@ -44,17 +45,16 @@ $typeMap: (
}
}
&.el-link--default {
color: var.$link-default-font-color;
&:hover {
color: var.$link-default-active-color
color: var.$link-default-active-color;
}
&:after {
border-color: var.$link-default-active-color
border-color: var.$link-default-active-color;
}
@include mixins.when(disabled) {
color: var.$link-disabled-font-color
color: var.$link-disabled-font-color;
}
}
@ -62,20 +62,19 @@ $typeMap: (
&.el-link--#{$type} {
color: $primaryColor;
&:hover {
color: var.$color-primary-light-3
color: var.$color-primary-light-3;
}
&:after {
border-color: $primaryColor
border-color: $primaryColor;
}
@include mixins.when(disabled) {
color: var.$color-primary-light-6
color: var.$color-primary-light-6;
}
@include mixins.when(underline) {
&:hover:after {
border-color: $primaryColor
border-color: $primaryColor;
}
}
}
}
}

2
packages/design-system/theme/src/loading.scss
View file

@ -14,7 +14,7 @@
@include mixins.b(loading-mask) {
position: absolute;
z-index: 2000;
background-color: rgba(255, 255, 255, .9);
background-color: rgba(255, 255, 255, 0.9);
margin: 0;
top: 0;
right: 0;

6
packages/design-system/theme/src/menu.scss
View file

@ -12,7 +12,7 @@
list-style: none;
cursor: pointer;
position: relative;
transition: border-color .3s, background-color .3s, color .3s;
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
box-sizing: border-box;
white-space: nowrap;
@ -241,7 +241,7 @@
top: 50%;
right: 20px;
margin-top: -7px;
transition: transform .3s;
transition: transform 0.3s;
font-size: 12px;
}
@include mixins.when(active) {
@ -284,6 +284,6 @@
}
.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
transition: .2s;
transition: 0.2s;
opacity: 0;
}

8
packages/design-system/theme/src/message-box.scss
View file

@ -65,12 +65,12 @@
color: var(--color-info);
}
&:focus, &:hover {
&:focus,
&:hover {
.el-message-box__close {
color: var(--color-primary);
}
}
}
@include mixins.e(content) {
@ -207,11 +207,11 @@
}
.msgbox-fade-enter-active {
animation: msgbox-fade-in .3s;
animation: msgbox-fade-in 0.3s;
}
.msgbox-fade-leave-active {
animation: msgbox-fade-out .3s;
animation: msgbox-fade-out 0.3s;
}
@keyframes msgbox-fade-in {

2
packages/design-system/theme/src/message.scss
View file

@ -13,7 +13,7 @@
top: 20px;
transform: translateX(-50%);
background-color: var.$message-background-color;
transition: opacity 0.3s, transform .4s, top 0.4s;
transition: opacity 0.3s, transform 0.4s, top 0.4s;
overflow: hidden;
padding: var.$message-padding;
display: flex;

71
packages/design-system/theme/src/mixins/_button.scss
View file

@ -14,11 +14,21 @@
@include mixins.when(loading) {
color: function.lightness($h, $s, $l, var.$button-hover-tint-percent);
background-color: var(--color-foreground-xlight);
border-color: function.lightness($h, $s, $l, var.$button-hover-tint-percent);
border-color: function.lightness(
$h,
$s,
$l,
var.$button-hover-tint-percent
);
}
&:active {
border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
border-color: function.lightness(
$h,
$s,
$l,
-(var.$button-active-shade-percent)
);
background-color: var(--color-foreground-xlight);
color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
outline: none;
@ -29,34 +39,62 @@
&:hover,
&:focus,
&:active {
color: var(--color-text-light);;
color: var(--color-text-light);
background-color: var(--color-foreground-xlight);
border-color: var(--color-foreground-base);
}
}
}
@mixin button-variant($color, $background-color, $border-color, $h, $s, $l, $t, $plain: true) {
@mixin button-variant(
$color,
$background-color,
$border-color,
$h,
$s,
$l,
$t,
$plain: true
) {
color: $color;
background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
&:active {
background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
background: function.lightness(
$h,
$s,
$l,
-(var.$button-active-shade-percent)
);
border-color: function.lightness(
$h,
$s,
$l,
-(var.$button-active-shade-percent)
);
color: $color;
outline: none;
}
&.is-active {
background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
background: function.lightness(
$h,
$s,
$l,
-(var.$button-active-shade-percent)
);
border-color: function.lightness(
$h,
$s,
$l,
-(var.$button-active-shade-percent)
);
color: $color;
}
&.is-light {
color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));;
color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
background-color: hsl(var(#{$h}), var(#{$s}), var(#{$t}));
border-color: hsl(var(#{$h}), var(#{$s}), var(#{$t}));
}
@ -74,7 +112,7 @@
@if $plain {
&.is-plain {
@include button-plain($background-color, $h, $s, $l,);
@include button-plain($background-color, $h, $s, $l);
}
}
}
@ -103,14 +141,19 @@
}
@mixin button-outline() {
@include button-plain(var.$button-primary-background-color, --color-primary-h, --color-primary-s, --color-primary-l,);
@include button-plain(
var.$button-primary-background-color,
--color-primary-h,
--color-primary-s,
--color-primary-l
);
}
@mixin button-small() {
@include button-size(
var(--spacing-3xs),
var(--spacing-xs),
var(--font-size-2xs),
var(--font-size-2xs)
);
}
@ -118,6 +161,6 @@
@include button-size(
var(--spacing-2xs),
var(--spacing-xs),
var(--font-size-2xs),
var(--font-size-2xs)
);
}

8
packages/design-system/theme/src/mixins/config.scss
View file

@ -1,4 +1,4 @@
$namespace: 'el';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';
$namespace: "el";
$element-separator: "__";
$modifier-separator: "--";
$state-prefix: "is-";

20
packages/design-system/theme/src/mixins/function.scss
View file

@ -23,32 +23,32 @@
@function containWhenFlag($selector) {
$selector: selectorToString($selector);
@if string.index($selector, '.' + config.$state-prefix) {
@return true
@if string.index($selector, "." + config.$state-prefix) {
@return true;
} @else {
@return false
@return false;
}
}
@function containPseudoClass($selector) {
$selector: selectorToString($selector);
@if string.index($selector, ':') {
@return true
@if string.index($selector, ":") {
@return true;
} @else {
@return false
@return false;
}
}
@function hitAllSpecialNestRule($selector) {
@return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
@return containsModifier($selector) or containWhenFlag($selector) or
containPseudoClass($selector);
}
@function lightness($h, $s, $l, $lightness) {
@return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}))
@return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}));
}
@function saturation($h, $s, $l, $saturation) {
@return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l}))
@return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l}));
}

54
packages/design-system/theme/src/mixins/mixins.scss
View file

@ -56,22 +56,22 @@
-------------------------- */
@mixin placeholder {
&::-webkit-input-placeholder {
@content
@content;
}
&::-moz-placeholder {
@content
@content;
}
&:-ms-input-placeholder {
@content
@content;
}
}
/* BEM
-------------------------- */
@mixin b($block) {
$B: config.$namespace+'-'+$block !global;
$B: config.$namespace + "-" + $block !global;
.#{$B} {
@content;
@ -83,7 +83,12 @@
$selector: &;
$currentSelector: "";
@each $unit in $element {
$currentSelector: #{$currentSelector + "." + $B + config.$element-separator + $unit + ","};
$currentSelector: #{$currentSelector +
"." +
$B +
config.$element-separator +
$unit +
","};
}
@if function.hitAllSpecialNestRule($selector) {
@ -107,7 +112,11 @@
$selector: &;
$currentSelector: "";
@each $unit in $modifier {
$currentSelector: #{$currentSelector + & + config.$modifier-separator + $unit + ","};
$currentSelector: #{$currentSelector +
& +
config.$modifier-separator +
$unit +
","};
}
@at-root {
@ -119,7 +128,7 @@
@mixin configurable-m($modifier, $E-flag: false) {
$selector: &;
$interpolation: '';
$interpolation: "";
@if $E-flag {
$interpolation: config.$element-separator + $E-flag;
@ -134,23 +143,31 @@
}
}
@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
$modifierCombo: '';
@mixin spec-selector(
$specSelector: "",
$element: $E,
$modifier: false,
$block: $B
) {
$modifierCombo: "";
@if $modifier {
$modifierCombo: config.$modifier-separator + $modifier;
}
@at-root {
#{&}#{$specSelector}.#{$block+config.$element-separator+$element+$modifierCombo} {
@content
#{&}#{$specSelector}.#{$block
+ config.$element-separator
+ $element
+ $modifierCombo} {
@content;
}
}
}
@mixin meb($modifier: false, $element: $E, $block: $B) {
$selector: &;
$modifierCombo: '';
$modifierCombo: "";
@if $modifier {
$modifierCombo: config.$modifier-separator + $modifier;
@ -159,7 +176,7 @@
@at-root {
#{$selector} {
.#{$block + config.$element-separator + $element + $modifierCombo} {
@content
@content;
}
}
}
@ -174,20 +191,19 @@
}
@mixin extend-rule($name) {
@extend #{'%shared-'+$name};
@extend #{"%shared-" + $name};
}
@mixin share-rule($name) {
$rule-name: '%shared-'+$name;
$rule-name: "%shared-" + $name;
@at-root #{$rule-name} {
@content
@content;
}
}
@mixin pseudo($pseudo) {
@at-root #{&}#{':#{$pseudo}'} {
@content
@at-root #{&}#{":#{$pseudo}"} {
@content;
}
}

4
packages/design-system/theme/src/mixins/utils.scss
View file

@ -14,7 +14,7 @@
content: "";
}
#{$selector}::after {
clear: both
clear: both;
}
}
}
@ -27,7 +27,7 @@
display: inline-block;
content: "";
height: 100%;
vertical-align: middle
vertical-align: middle;
}
}
}

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

@ -11,7 +11,8 @@
position: fixed;
background-color: var.$color-white;
box-shadow: var.$notification-shadow;
transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
bottom 0.3s;
overflow: hidden;
&.right {

2
packages/design-system/theme/src/option-group.scss
View file

@ -17,7 +17,7 @@
padding-bottom: 24px;
&::after {
content: '';
content: "";
position: absolute;
display: block;
left: $gap;

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

@ -24,7 +24,8 @@
}
}
&.hover, &:hover {
&.hover,
&:hover {
background-color: var.$select-option-hover-background;
}

9
packages/design-system/theme/src/pagination.scss
View file

@ -10,7 +10,7 @@
font-weight: bold;
@include utils.utils-clearfix;
span:not([class*=suffix]),
span:not([class*="suffix"]),
button {
display: inline-block;
font-size: var.$pagination-font-size;
@ -30,7 +30,7 @@
// pagesize 的下拉 icon
.el-input__suffix {
right: 0;
transform: scale(.8);
transform: scale(0.8);
}
.el-select .el-input {
@ -115,7 +115,7 @@
line-height: 24px;
}
span:not([class*=suffix]),
span:not([class*="suffix"]),
button {
height: 22px;
line-height: 22px;
@ -204,7 +204,8 @@
}
}
.btn-prev, .btn-next {
.btn-prev,
.btn-next {
padding: 0;
&:disabled {

2
packages/design-system/theme/src/popconfirm.scss
View file

@ -11,6 +11,6 @@
}
@include mixins.e(action) {
text-align: right;
margin: 0
margin: 0;
}
}

6
packages/design-system/theme/src/popover.scss
View file

@ -29,12 +29,14 @@
}
@include mixins.e(reference) {
&:focus:not(.focusing), &:focus:hover {
&:focus:not(.focusing),
&:focus:hover {
outline-width: 0;
}
}
&:focus:active, &:focus {
&:focus:active,
&:focus {
outline-width: 0;
}
}

2
packages/design-system/theme/src/popper.scss
View file

@ -14,7 +14,7 @@
.popper__arrow {
border-width: var.$popover-arrow-size;
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
}
.popper__arrow::after {

1
packages/design-system/theme/src/progress.scss
View file

@ -39,7 +39,6 @@
}
}
@include mixins.m(without-text) {
.el-progress__text {
display: none;

27
packages/design-system/theme/src/radio-button.scss
View file

@ -27,7 +27,11 @@
transition: var.$all-transition;
border-radius: 0;
@include button.button-size(var.$button-padding-vertical, var.$button-padding-horizontal, var.$button-font-size,);
@include button.button-size(
var.$button-padding-vertical,
var.$button-padding-horizontal,
var.$button-font-size
);
&:hover {
color: var(--color-primary);
@ -95,23 +99,36 @@
@include mixins.m(medium) {
& .el-radio-button__inner {
border-radius: 0;
@include button.button-size(var.$button-medium-padding-vertical, var.$button-medium-padding-horizontal, var.$button-medium-font-size,);
@include button.button-size(
var.$button-medium-padding-vertical,
var.$button-medium-padding-horizontal,
var.$button-medium-font-size
);
}
}
@include mixins.m(small) {
& .el-radio-button__inner {
border-radius: 0;
@include button.button-size(var.$button-small-padding-vertical, var.$button-small-padding-horizontal, var.$button-small-font-size,);
@include button.button-size(
var.$button-small-padding-vertical,
var.$button-small-padding-horizontal,
var.$button-small-font-size
);
}
}
@include mixins.m(mini) {
& .el-radio-button__inner {
border-radius: 0;
@include button.button-size(var.$button-mini-padding-vertical, var.$button-mini-padding-horizontal, var.$button-mini-font-size,);
@include button.button-size(
var.$button-mini-padding-vertical,
var.$button-mini-padding-horizontal,
var.$button-mini-font-size
);
}
}
&:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
/*获得焦点时 样式提醒*/
box-shadow: 0 0 2px 2px var.$radio-button-checked-border-color;
}
}

5
packages/design-system/theme/src/radio.scss
View file

@ -170,7 +170,7 @@
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform .15s ease-in;
transition: transform 0.15s ease-in;
}
}
@ -186,7 +186,8 @@
margin: 0;
}
&:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
/*获得焦点时 样式提醒*/
.el-radio__inner {
box-shadow: 0 0 2px 2px var.$radio-input-border-color-hover;
}

5
packages/design-system/theme/src/rate.scss
View file

@ -5,7 +5,8 @@
height: var.$rate-height;
line-height: 1;
&:focus, &:active {
&:focus,
&:active {
outline-width: 0;
}
@ -22,7 +23,7 @@
font-size: var.$rate-icon-size;
margin-right: var.$rate-icon-margin;
color: var.$rate-icon-color;
transition: .3s;
transition: 0.3s;
&.hover {
transform: scale(1.15);
}

139
packages/design-system/theme/src/reset.scss
View file

@ -1,7 +1,9 @@
@use "mixins/function";
@use 'common/var';
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
}
@ -14,7 +16,9 @@ body {
-moz-osx-font-smoothing: grayscale;
}
body, button, input {
body,
button,
input {
font-family: var(--font-family);
font-weight: var(--font-weight-regular);
}
@ -23,18 +27,75 @@ button {
font-weight: var(--font-weight-bold);
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
@ -43,8 +104,17 @@ time, mark, audio, video {
background: transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
@ -52,13 +122,16 @@ nav ul {
list-style: none;
}
blockquote, q {
blockquote,
q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
@ -73,11 +146,21 @@ a {
cursor: pointer;
&:active {
color: function.saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(var.$button-active-shade-percent));
color: function.saturation(
--color-primary-h,
--color-primary-s,
--color-primary-l,
-(var.$button-active-shade-percent)
);
}
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
color: var.$color-text-primary;
font-weight: inherit;
@ -90,7 +173,10 @@ h1, h2, h3, h4, h5, h6 {
}
}
h4, h5, h6, p {
h4,
h5,
h6,
p {
font-size: inherit;
}
@ -123,7 +209,8 @@ del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
@ -142,7 +229,7 @@ table {
border-spacing: 0;
}
input, select {
input,
select {
vertical-align: middle;
}

2
packages/design-system/theme/src/row.scss
View file

@ -34,6 +34,4 @@
align-items: flex-end;
}
}
}

2
packages/design-system/theme/src/scrollbar.scss
View file

@ -35,7 +35,7 @@
cursor: pointer;
border-radius: inherit;
background-color: var.$scrollbar-background-color;
transition: .3s background-color;
transition: 0.3s background-color;
&:hover {
background-color: var.$scrollbar-hover-background-color;

2
packages/design-system/theme/src/select-dropdown.scss
View file

@ -24,7 +24,7 @@
&::after {
position: absolute;
right: 20px;
font-family: 'element-icons';
font-family: "element-icons";
content: "\e6da";
font-size: 12px;
font-weight: bold;

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

@ -12,8 +12,7 @@
display: inline-block;
position: relative;
.el-select__tags
>span {
.el-select__tags > span {
display: contents;
}
@ -36,7 +35,7 @@
& .el-select__caret {
color: var.$select-input-color;
font-size: var.$select-input-font-size;
transition: transform .3s;
transition: transform 0.3s;
transform: rotateZ(180deg);
cursor: pointer;
@ -141,7 +140,7 @@
&::before {
display: block;
transform: translate(0, .5px);
transform: translate(0, 0.5px);
}
}
}

12
packages/design-system/theme/src/slider.scss
View file

@ -5,7 +5,6 @@
@use "./common/var";
@include mixins.b(slider) {
@include utils.utils-clearfix;
@include mixins.e(runway) {
@ -124,7 +123,7 @@
border: solid 2px var.$slider-main-background-color;
background-color: var.$color-white;
border-radius: 50%;
transition: .2s;
transition: 0.2s;
user-select: none;
&:hover,
@ -202,8 +201,7 @@
padding-right: 5px;
}
.el-input-number__decrease,
.el-input-number__increase
{
.el-input-number__increase {
top: var.$input-small-height;
margin-top: -1px;
border: var.$input-border;
@ -226,15 +224,13 @@
}
&:hover {
.el-input-number__decrease,
.el-input-number__increase
{
.el-input-number__increase {
border-color: var.$input-hover-border;
}
}
&:active {
.el-input-number__decrease,
.el-input-number__increase
{
.el-input-number__increase {
border-color: var.$input-focus-border;
}
}

1
packages/design-system/theme/src/spinner.scss
View file

@ -19,7 +19,6 @@
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
}
@keyframes rotate {

15
packages/design-system/theme/src/step.scss
View file

@ -63,7 +63,7 @@
font-size: 14px;
box-sizing: border-box;
background: var.$color-white;
transition: .15s ease-out;
transition: 0.15s ease-out;
@include mixins.when(text) {
border-radius: 50%;
@ -84,7 +84,7 @@
line-height: 1;
color: inherit;
&[class*=el-icon]:not(.is-status) {
&[class*="el-icon"]:not(.is-status) {
font-size: 25px;
font-weight: normal;
}
@ -106,7 +106,7 @@
border-width: 1px;
border-style: solid;
border-color: inherit;
transition: .15s ease-out;
transition: 0.15s ease-out;
box-sizing: border-box;
width: 0;
height: 0;
@ -215,7 +215,6 @@
}
@include mixins.when(center) {
@include mixins.e(head) {
text-align: center;
}
@ -253,12 +252,12 @@
}
@include mixins.e(icon-inner) {
&[class*=el-icon]:not(.is-status) {
&[class*="el-icon"]:not(.is-status) {
font-size: 18px;
}
&.is-status {
transform: scale(.8) translateY(1px);
transform: scale(0.8) translateY(1px);
}
}
@ -274,7 +273,7 @@
line-height: 20px;
}
@include mixins.pseudo('not(:last-of-type)') {
@include mixins.pseudo("not(:last-of-type)") {
@include mixins.e(title) {
max-width: 50%;
word-break: break-all;
@ -289,7 +288,7 @@
&::before,
&::after {
content: '';
content: "";
display: inline-block;
position: absolute;
height: 15px;

6
packages/design-system/theme/src/switch.scss
View file

@ -17,7 +17,7 @@
}
@include mixins.e(label) {
transition: .2s;
transition: 0.2s;
height: var.$switch-height;
display: inline-block;
font-size: var.$switch-font-size;
@ -63,7 +63,7 @@
box-sizing: border-box;
background: var.$switch-off-color;
cursor: pointer;
transition: border-color .3s, background-color .3s;
transition: border-color 0.3s, background-color 0.3s;
vertical-align: middle;
&:after {
@ -72,7 +72,7 @@
top: 1px;
left: 1px;
border-radius: var.$border-radius-circle;
transition: all .3s;
transition: all 0.3s;
width: var.$switch-button-size;
height: var.$switch-button-size;
background-color: var.$color-white;

41
packages/design-system/theme/src/table.scss
View file

@ -66,7 +66,7 @@
background-color: var.$color-white;
// 纯属为了增加权重
&[class*=cell] {
&[class*="cell"] {
padding: 20px 50px;
}
@ -89,7 +89,8 @@
border-right: 0;
border-bottom: 0;
th.gutter, td.gutter {
th.gutter,
td.gutter {
border-right-width: 1px;
}
}
@ -117,7 +118,8 @@
}
}
th, td {
th,
td {
padding: 12px 0;
min-width: 0;
box-sizing: border-box;
@ -149,21 +151,24 @@
}
@include mixins.m(medium) {
th, td {
th,
td {
padding: 10px 0;
}
}
@include mixins.m(small) {
font-size: 12px;
th, td {
th,
td {
padding: 8px 0;
}
}
@include mixins.m(mini) {
font-size: 12px;
th, td {
th,
td {
padding: 6px 0;
}
}
@ -176,7 +181,8 @@
}
}
th.is-leaf, td {
th.is-leaf,
td {
border-bottom: var.$table-border;
}
@ -246,7 +252,7 @@
border: var.$table-border;
@include mixins.share-rule(border-pseudo) {
content: '';
content: "";
position: absolute;
background-color: var.$table-border-color;
z-index: 1;
@ -280,7 +286,8 @@
border-color: transparent;
}
th, td {
th,
td {
border-right: var.$table-border;
&:first-child .cell {
@ -311,7 +318,7 @@
box-shadow: var.$table-fixed-box-shadow;
&::before {
content: '';
content: "";
position: absolute;
left: 0;
bottom: 0;
@ -482,7 +489,7 @@
& .el-table__body {
& tr.el-table__row--striped {
td {
background: #FAFAFA;
background: #fafafa;
}
&.current-row td {
@ -494,8 +501,10 @@
@include mixins.e(body) {
tr.hover-row {
&, &.el-table__row--striped {
&, &.current-row {
&,
&.el-table__row--striped {
&,
&.current-row {
> td {
background-color: var.$table-row-hover-background-color;
}
@ -526,13 +535,13 @@
& i {
color: var(--color-info);
font-size: 12px;
transform: scale(.75);
transform: scale(0.75);
}
}
@include mixins.m(enable-row-transition) {
.el-table__body td {
transition: background-color .25s ease;
transition: background-color 0.25s ease;
}
}
@ -550,7 +559,7 @@
}
}
[class*=el-table__row--level] {
[class*="el-table__row--level"] {
.el-table__expand-icon {
display: inline-block;
width: 20px;

48
packages/design-system/theme/src/tabs.scss
View file

@ -14,7 +14,7 @@
height: 2px;
background-color: var(--color-primary);
z-index: 1;
transition: transform .3s cubic-bezier(.645,.045,.355,1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none;
}
@include mixins.e(new-tab) {
@ -29,7 +29,7 @@
font-size: 12px;
color: #d3dce6;
cursor: pointer;
transition: all .15s;
transition: all 0.15s;
.el-icon-plus {
transform: scale(0.8, 0.8);
@ -79,7 +79,7 @@
@include mixins.e(nav) {
white-space: nowrap;
position: relative;
transition: transform .3s;
transition: transform 0.3s;
float: left;
z-index: #{var.$index-normal + 1};
@ -104,7 +104,8 @@
color: var.$color-text-primary;
position: relative;
&:focus, &:focus:active {
&:focus,
&:focus:active {
outline: none;
}
@ -116,10 +117,10 @@
& .el-icon-close {
border-radius: 50%;
text-align: center;
transition: all .3s cubic-bezier(.645,.045,.355,1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-left: 5px;
&:before {
transform: scale(.9);
transform: scale(0.9);
display: inline-block;
}
@ -178,7 +179,8 @@
> .el-tabs__header .el-tabs__item {
border-bottom: 1px solid transparent;
border-left: 1px solid var.$border-color-light;
transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&:first-child {
border-left: none;
}
@ -223,7 +225,7 @@
content: none;
}
> .el-tabs__header .el-tabs__item {
transition: all .3s cubic-bezier(.645,.045,.355,1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
border: 1px solid transparent;
margin-top: -1px;
color: var.$color-text-secondary;
@ -264,8 +266,10 @@
padding-right: 0;
}
&.el-tabs--border-card, &.el-tabs--card,
.el-tabs--left, .el-tabs--right {
&.el-tabs--border-card,
&.el-tabs--card,
.el-tabs--left,
.el-tabs--right {
> .el-tabs__header {
.el-tabs__item:nth-child(2) {
padding-left: 20px;
@ -514,22 +518,22 @@
display: inline-block;
}
.slideInRight-enter {
animation: slideInRight-enter .3s;
animation: slideInRight-enter 0.3s;
}
.slideInRight-leave {
position: absolute;
left: 0;
right: 0;
animation: slideInRight-leave .3s;
animation: slideInRight-leave 0.3s;
}
.slideInLeft-enter {
animation: slideInLeft-enter .3s;
animation: slideInLeft-enter 0.3s;
}
.slideInLeft-leave {
position: absolute;
left: 0;
right: 0;
animation: slideInLeft-leave .3s;
animation: slideInLeft-leave 0.3s;
}
@keyframes slideInRight-enter {
@ -538,7 +542,7 @@
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%)
transform: translateX(100%);
}
to {
@ -546,7 +550,7 @@
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0)
transform: translateX(0);
}
}
@keyframes slideInRight-leave {
@ -555,7 +559,7 @@
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
opacity: 1;
}
100% {
@ -563,7 +567,7 @@
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0
opacity: 0;
}
}
@keyframes slideInLeft-enter {
@ -572,7 +576,7 @@
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
transform: translateX(-100%);
}
to {
@ -580,7 +584,7 @@
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0)
transform: translateX(0);
}
}
@keyframes slideInLeft-leave {
@ -589,7 +593,7 @@
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
opacity: 1;
}
100% {
@ -597,6 +601,6 @@
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0
opacity: 0;
}
}

6
packages/design-system/theme/src/tag.scss
View file

@ -136,7 +136,7 @@
line-height: 26px;
.el-icon-close {
transform: scale(.8);
transform: scale(0.8);
}
}
@ -146,7 +146,7 @@
line-height: 22px;
.el-icon-close {
transform: scale(.8);
transform: scale(0.8);
}
}
@ -157,7 +157,7 @@
.el-icon-close {
margin-left: -3px;
transform: scale(.7);
transform: scale(0.7);
}
}
}

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

@ -2,7 +2,8 @@
@use "./common/var";
@include mixins.b(tooltip) {
&:focus:not(.focusing), &:focus:hover {
&:focus:not(.focusing),
&:focus:hover {
outline-width: 0;
}
@include mixins.e(popper) {

6
packages/design-system/theme/src/transfer.scss
View file

@ -48,7 +48,8 @@
margin: 0;
}
i, span {
i,
span {
font-size: 14px;
}
@ -87,7 +88,8 @@
box-sizing: border-box;
@include mixins.when(filterable) {
height: #{var.$transfer-panel-body-height - var.$transfer-filter-height - 20px};
height: #{var.$transfer-panel-body-height - var.$transfer-filter-height -
20px};
padding-top: 0;
}
}

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

@ -38,7 +38,8 @@
@include mixins.b(tree-node) {
white-space: nowrap;
outline: none;
&:focus { /* focus */
&:focus {
/* focus */
> .el-tree-node__content {
background-color: var.$tree-node-hover-background-color;
}

33
packages/design-system/theme/src/upload.scss
View file

@ -104,7 +104,7 @@
}
@include mixins.when(dragover) {
background-color: rgba(32, 159, 255, .06);
background-color: rgba(32, 159, 255, 0.06);
border: 2px dashed var(--color-primary);
}
}
@ -115,7 +115,7 @@
list-style: none;
@include mixins.e(item) {
transition: all .5s cubic-bezier(.55,0,.1,1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
font-size: 14px;
color: var.$color-text-primary;
line-height: 1.8;
@ -156,7 +156,7 @@
top: 5px;
right: 5px;
cursor: pointer;
opacity: .75;
opacity: 0.75;
color: var.$color-text-primary;
//transform: scale(.7);
@ -193,25 +193,30 @@
display: block;
}
.el-upload-list__item-name:hover, .el-upload-list__item-name:focus {
.el-upload-list__item-name:hover,
.el-upload-list__item-name:focus {
color: var.$link-hover-color;
cursor: pointer;
}
&:focus:not(:hover) { /* 键盘focus */
&:focus:not(:hover) {
/* 键盘focus */
.el-icon-close-tip {
display: inline-block;
}
}
&:not(.focusing):focus, &:active { /* click时 */
&:not(.focusing):focus,
&:active {
/* click时 */
outline-width: 0;
.el-icon-close-tip {
display: none;
}
}
&:hover, &:focus {
&:hover,
&:focus {
.el-upload-list__item-status-label {
display: none;
}
@ -232,7 +237,7 @@
overflow: hidden;
padding-left: 4px;
text-overflow: ellipsis;
transition: color .3s;
transition: color 0.3s;
white-space: nowrap;
[class^="el-icon"] {
@ -337,13 +342,13 @@
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s;
&::after {
display: inline-block;
content: "";
height: 100%;
vertical-align: middle
vertical-align: middle;
}
span {
@ -432,7 +437,7 @@
position: relative;
z-index: 1;
margin-left: -80px;
background-color: var.$color-white
background-color: var.$color-white;
}
.el-upload-list__item-name {
@ -534,7 +539,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000, .72);
background-color: rgba(#000, 0.72);
text-align: center;
.btn {
@ -552,7 +557,7 @@
span {
opacity: 0;
transition: opacity .15s linear;
transition: opacity 0.15s linear;
}
&:not(:first-child) {

20
packages/design-system/tsconfig.json
View file

@ -12,21 +12,11 @@
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"types": ["webpack-env", "jest"],
"paths": {
"@/*": [
"src/*"
]
"@/*": ["src/*"]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": [
"src/**/*.ts",
@ -35,7 +25,5 @@
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
"exclude": ["node_modules"]
}