switch to single space

This commit is contained in:
Mutasem 2021-08-09 12:42:22 +02:00
parent 20af57c1cc
commit 4ecbc01df6
74 changed files with 819 additions and 819 deletions

View file

@ -4,25 +4,25 @@ module.exports = {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint",
'plugin:vue/essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
ignorePatterns: ["gulpfile.js"],
ignorePatterns: ['gulpfile.js'],
overrides: [
{
files: [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)",
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)',
],
env: {
jest: true,

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'

View file

@ -1,4 +1,4 @@
import { library } from "@fortawesome/fontawesome-svg-core";
import { library } from '@fortawesome/fontawesome-svg-core';
import {
faAngleDoubleLeft,
faAngleDown,
@ -80,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);

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

View file

@ -1,12 +1,12 @@
const path = require("path");
const path = require('path');
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
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-links',
'@storybook/addon-essentials',
'storybook-addon-designs',
'storybook-addon-themes',
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
@ -15,20 +15,20 @@ module.exports = {
{
resourceQuery: /module/,
use: [
"vue-style-loader",
'vue-style-loader',
{
loader: "css-loader",
loader: 'css-loader',
options: {
modules: true,
},
},
"sass-loader",
'sass-loader',
],
include: path.resolve(__dirname, "../"),
include: path.resolve(__dirname, '../'),
},
{
use: ["vue-style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../"),
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
},
],
});

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,42 +19,42 @@ export const parameters = {
},
},
backgrounds: {
default: "--color-background-xlight",
default: '--color-background-xlight',
values: [
{
name: "--color-background-dark",
value: "var(--color-background-dark)",
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",
name: 'dark',
class: 'theme-dark',
color: '#000',
},
],
},
options: {
storySort: {
order: ["Docs", "Styleguide", "Atoms"],
order: ['Docs', 'Styleguide', 'Atoms'],
},
},
};

View file

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

View file

@ -1,36 +1,36 @@
"use strict";
'use strict';
const gulp = require("gulp");
const sass = require("gulp-dart-sass");
const autoprefixer = require("gulp-autoprefixer");
const cleanCSS = require("gulp-clean-css");
const gulp = require('gulp');
const sass = require('gulp-dart-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
gulp.task("build:theme", gulp.series([compileTheme, copyThemeFonts]));
gulp.task('build:theme', gulp.series([compileTheme, copyThemeFonts]));
gulp.task(
"watch:theme",
'watch:theme',
gulp.series([
"build:theme",
'build:theme',
() => {
gulp.watch("./theme/src/**/*.scss", gulp.series(["build:theme"]));
gulp.watch('./theme/src/**/*.scss', gulp.series(['build:theme']));
},
])
]),
);
function compileTheme() {
return gulp
.src("./theme/src/*.scss")
.src('./theme/src/*.scss')
.pipe(sass.sync())
.pipe(
autoprefixer({
browsers: ["ie > 9", "last 2 versions"],
browsers: ['ie > 9', 'last 2 versions'],
cascade: false,
})
}),
)
.pipe(cleanCSS())
.pipe(gulp.dest("./theme/dist"));
.pipe(gulp.dest('./theme/dist'));
}
function copyThemeFonts() {
return gulp.src("./theme/src/fonts/**").pipe(gulp.dest("./theme/dist/fonts"));
return gulp.src('./theme/src/fonts/**').pipe(gulp.dest('./theme/dist/fonts'));
}

View file

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

View file

@ -1,69 +1,69 @@
import N8nButton from "./Button.vue";
import { action } from "@storybook/addon-actions";
import N8nButton from './Button.vue';
import { action } from '@storybook/addon-actions';
export default {
title: "Atoms/Button",
title: 'Atoms/Button',
component: N8nButton,
argTypes: {
label: {
control: "text",
control: 'text',
},
title: {
control: "text",
control: 'text',
},
type: {
control: "select",
options: ["primary", "outline", "light", "text"],
control: 'select',
options: ['primary', 'outline', 'light', 'text'],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
type: 'select',
options: ['sm', 'md', 'lg'],
},
},
loading: {
control: {
type: "boolean",
type: 'boolean',
},
},
icon: {
control: {
type: "text",
type: 'text',
},
},
iconSize: {
control: {
type: "select",
options: ["sm", "md", "lg"],
type: 'select',
options: ['sm', 'md', 'lg'],
},
},
circle: {
control: {
type: "boolean",
type: 'boolean',
},
},
fullWidth: {
type: "boolean",
type: 'boolean',
},
theme: {
type: "select",
options: ["success", "danger", "warning"],
type: 'select',
options: ['success', 'danger', 'warning'],
},
float: {
type: "select",
options: ["left", "right"],
type: 'select',
options: ['left', 'right'],
},
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147",
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147',
},
},
};
const methods = {
onClick: action("click"),
onClick: action('click'),
};
const Template = (args, { argTypes }) => ({
@ -77,7 +77,7 @@ const Template = (args, { argTypes }) => ({
export const Button = Template.bind({});
Button.args = {
label: "Button",
label: 'Button',
};
const ManyTemplate = (args, { argTypes }) => ({
@ -92,31 +92,31 @@ const ManyTemplate = (args, { argTypes }) => ({
export const Primary = ManyTemplate.bind({});
Primary.args = {
type: "primary",
label: "Button",
type: 'primary',
label: 'Button',
};
export const Outline = ManyTemplate.bind({});
Outline.args = {
type: "outline",
label: "Button",
type: 'outline',
label: 'Button',
};
export const Light = ManyTemplate.bind({});
Light.args = {
type: "light",
label: "Button",
type: 'light',
label: 'Button',
};
export const WithIcon = ManyTemplate.bind({});
WithIcon.args = {
label: "Button",
icon: "plus-circle",
label: 'Button',
icon: 'plus-circle',
};
export const Text = ManyTemplate.bind({});
Text.args = {
type: "text",
label: "Button",
icon: "plus-circle",
type: 'text',
label: 'Button',
icon: 'plus-circle',
};

View file

@ -30,18 +30,18 @@
</template>
<script lang="ts">
import N8nIcon from "../N8nIcon";
import N8nSpinner from "../N8nSpinner";
import ElButton from "element-ui/packages/button";
import N8nIcon from '../N8nIcon';
import N8nSpinner from '../N8nSpinner';
import ElButton from 'element-ui/packages/button';
const sizeMap: { [size: string]: string } = {
sm: "small",
md: "medium",
lg: "",
sm: 'small',
md: 'medium',
lg: '',
};
export default {
name: "n8n-button",
name: 'n8n-button',
props: {
label: {
type: String,
@ -51,20 +51,20 @@ export default {
},
type: {
type: String,
default: "primary",
default: 'primary',
validator: (value: string): boolean =>
["primary", "outline", "light", "text"].indexOf(value) !== -1,
['primary', 'outline', 'light', 'text'].indexOf(value) !== -1,
},
theme: {
type: String,
validator: (value: string): boolean =>
["success", "warning", "danger"].indexOf(value) !== -1,
['success', 'warning', 'danger'].indexOf(value) !== -1,
},
size: {
type: String,
default: "md",
default: 'md',
validator: (value: string): boolean =>
["sm", "md", "lg"].indexOf(value) !== -1,
['sm', 'md', 'lg'].indexOf(value) !== -1,
},
loading: {
type: Boolean,
@ -87,7 +87,7 @@ export default {
float: {
type: String,
validator: (value: string): boolean =>
["left", "right"].indexOf(value) !== -1,
['left', 'right'].indexOf(value) !== -1,
},
fullWidth: {
type: Boolean,
@ -106,13 +106,13 @@ export default {
}): { float?: string; width?: string } => {
return {
...(props.float ? { float: props.float } : {}),
...(props.fullWidth ? { width: "100%" } : {}),
...(props.fullWidth ? { width: '100%' } : {}),
};
},
getClass(props: { type: string; theme?: string }): string {
return props.type === "text"
? "text"
: `${props.type}-${props.theme || "primary"}`;
return props.type === 'text'
? 'text'
: `${props.type}-${props.theme || 'primary'}`;
},
};
</script>

View file

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

View file

@ -1,21 +1,21 @@
import N8nIcon from "./Icon.vue";
import N8nIcon from './Icon.vue';
export default {
title: "Atoms/Icon",
title: 'Atoms/Icon',
component: N8nIcon,
argTypes: {
icon: {
control: "text",
control: 'text',
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
type: 'select',
options: ['sm', 'md', 'lg'],
},
},
spin: {
control: {
type: "boolean",
type: 'boolean',
},
},
},
@ -31,15 +31,15 @@ const Template = (args, { argTypes }) => ({
export const Clock = Template.bind({});
Clock.args = {
icon: "clock",
icon: 'clock',
};
export const Plus = Template.bind({});
Plus.args = {
icon: "plus",
icon: 'plus',
};
export const Stop = Template.bind({});
Stop.args = {
icon: "stop",
icon: 'stop',
};

View file

@ -8,10 +8,10 @@
</template>
<script lang="ts">
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
export default {
name: "n8n-icon",
name: 'n8n-icon',
components: {
FontAwesomeIcon,
},
@ -22,9 +22,9 @@ export default {
},
size: {
type: String,
default: "md",
default: 'md',
validator: function (value: string): boolean {
return ["sm", "md", "lg"].indexOf(value) !== -1;
return ['sm', 'md', 'lg'].indexOf(value) !== -1;
},
},
spin: {

View file

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

View file

@ -1,47 +1,47 @@
import N8nIconButton from "./IconButton.vue";
import { action } from "@storybook/addon-actions";
import N8nIconButton from './IconButton.vue';
import { action } from '@storybook/addon-actions';
export default {
title: "Atoms/Icon Button",
title: 'Atoms/Icon Button',
component: N8nIconButton,
argTypes: {
type: {
control: "select",
options: ["primary", "outline", "light", "text"],
control: 'select',
options: ['primary', 'outline', 'light', 'text'],
},
title: {
control: "text",
control: 'text',
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg", "xl"],
type: 'select',
options: ['sm', 'md', 'lg', 'xl'],
},
},
loading: {
control: {
type: "boolean",
type: 'boolean',
},
},
icon: {
control: {
type: "text",
type: 'text',
},
},
theme: {
control: {
type: "select",
options: ["success", "warning", "danger"],
type: 'select',
options: ['success', 'warning', 'danger'],
},
},
},
parameters: {
backgrounds: { default: "--color-background-light" },
backgrounds: { default: '--color-background-light' },
},
};
const methods = {
onClick: action("click"),
onClick: action('click'),
};
const Template = (args, { argTypes }) => ({
@ -55,8 +55,8 @@ const Template = (args, { argTypes }) => ({
export const Button = Template.bind({});
Button.args = {
icon: "plus",
title: "my title",
icon: 'plus',
title: 'my title',
};
const ManyTemplate = (args, { argTypes }) => ({
@ -71,28 +71,28 @@ const ManyTemplate = (args, { argTypes }) => ({
export const Primary = ManyTemplate.bind({});
Primary.args = {
icon: "plus",
title: "my title",
type: "primary",
icon: 'plus',
title: 'my title',
type: 'primary',
};
export const Outline = ManyTemplate.bind({});
Outline.args = {
icon: "plus",
title: "my title",
type: "outline",
icon: 'plus',
title: 'my title',
type: 'outline',
};
export const Light = ManyTemplate.bind({});
Light.args = {
icon: "plus",
title: "my title",
type: "light",
icon: 'plus',
title: 'my title',
type: 'light',
};
export const Text = ManyTemplate.bind({});
Text.args = {
icon: "plus",
title: "my title",
type: "text",
icon: 'plus',
title: 'my title',
type: 'text',
};

View file

@ -14,20 +14,20 @@
</template>
<script lang="ts">
import Vue from "vue";
import N8nButton from "../N8nButton";
import Vue from 'vue';
import N8nButton from '../N8nButton';
const iconSizeMap = {
sm: "sm",
md: "md",
lg: "md",
xl: "lg",
sm: 'sm',
md: 'md',
lg: 'md',
xl: 'lg',
};
Vue.component("N8nButton", N8nButton);
Vue.component('N8nButton', N8nButton);
export default {
name: "n8n-icon-button",
name: 'n8n-icon-button',
props: {
type: {
type: String,
@ -38,7 +38,7 @@ export default {
size: {
type: String,
validator: (value: string): boolean =>
["sm", "md", "lg", "xl"].indexOf(value) !== -1,
['sm', 'md', 'lg', 'xl'].indexOf(value) !== -1,
},
loading: {
type: Boolean,

View file

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

View file

@ -1,13 +1,13 @@
import N8nSpinner from "./Spinner.vue";
import N8nSpinner from './Spinner.vue';
export default {
title: "Atoms/Spinner",
title: 'Atoms/Spinner',
component: N8nSpinner,
argTypes: {
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
type: 'select',
options: ['sm', 'md', 'lg'],
},
},
},

View file

@ -8,10 +8,10 @@
</template>
<script lang="ts">
import N8nIcon from "../N8nIcon";
import N8nIcon from '../N8nIcon';
export default {
name: "n8n-spinner",
name: 'n8n-spinner',
components: {
N8nIcon,
},
@ -19,7 +19,7 @@ export default {
size: {
type: String,
validator: function (value: string): boolean {
return ["sm", "md", "lg"].indexOf(value) !== -1;
return ['sm', 'md', 'lg'].indexOf(value) !== -1;
},
},
},

View file

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

View file

@ -1,6 +1,6 @@
import N8nButton from "./N8nButton";
import N8nIcon from "./N8nIcon";
import N8nIconButton from "./N8nIconButton";
import N8nSpinner from "./N8nSpinner";
import N8nButton from './N8nButton';
import N8nIcon from './N8nIcon';
import N8nIconButton from './N8nIconButton';
import N8nSpinner from './N8nSpinner';
export { N8nButton, N8nIcon, N8nIconButton, N8nSpinner };

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" />
@ -214,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>

View file

@ -1,4 +1,4 @@
import * as components from "./components";
import * as components from './components';
for (const key in components) {
const component = components[key];
@ -7,4 +7,4 @@ for (const key in components) {
};
}
export * from "./components";
export * from './components';

View file

@ -13,7 +13,7 @@
</template>
<script lang="ts">
import Vue from "vue";
import Vue from 'vue';
function hslToHex(h: number, s: number, l: number): string {
l /= 100;
@ -23,24 +23,24 @@ function hslToHex(h: number, s: number, l: number): string {
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color)
.toString(16)
.padStart(2, "0"); // convert to Hex and prefix "0" if needed
.padStart(2, '0'); // convert to Hex and prefix "0" if needed
};
return `#${f(0)}${f(8)}${f(4)}`;
}
function getHex(hsl: string): string {
const colors = hsl
.replace("hsl(", "")
.replace(")", "")
.replace(/%/g, "")
.split(",")
.replace('hsl(', '')
.replace(')', '')
.replace(/%/g, '')
.split(',')
.map((n: string) => parseFloat(n));
return hslToHex(colors[0], colors[1], colors[2]);
}
export default Vue.extend({
name: "color-circles",
name: 'color-circles',
data() {
return {
observer: null as null | MutationObserver,
@ -67,12 +67,12 @@ export default Vue.extend({
// when theme class is added or removed, reset color values
this.observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "attributes") {
if (mutation.type === 'attributes') {
setColors();
}
}
});
const body = document.querySelector("body");
const body = document.querySelector('body');
if (body) {
this.observer.observe(body, { attributes: true });
}

View file

@ -18,10 +18,10 @@
</template>
<script lang="ts">
import Vue from "vue";
import Vue from 'vue';
export default Vue.extend({
name: "sizes",
name: 'sizes',
data() {
return {
observer: null as null | MutationObserver,
@ -42,7 +42,7 @@ export default Vue.extend({
(this.variables as string[]).forEach((variable: string) => {
const style = getComputedStyle(document.body);
const rem = style.getPropertyValue(variable);
const px = parseFloat(rem.replace("rem", "")) * 16;
const px = parseFloat(rem.replace('rem', '')) * 16;
Vue.set(this.sizes, variable, { rem, px });
});
@ -53,12 +53,12 @@ export default Vue.extend({
// when theme class is added or removed, reset color values
this.observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "attributes") {
if (mutation.type === 'attributes') {
setSizes();
}
}
});
const body = document.querySelector("body");
const body = document.querySelector('body');
if (body) {
this.observer.observe(body, { attributes: true });
}

View file

@ -1,7 +1,7 @@
<template>
<table :class="$style.table">
<tr v-for="c in classes" :key="c">
<td>.{{ c }}{{ postfix ? postfix : "" }}</td>
<td>.{{ c }}{{ postfix ? postfix : '' }}</td>
<td :class="$style[`${c}${postfix ? postfix : ''}`]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in
luctus sapien, a suscipit neque.
@ -12,18 +12,18 @@
<script lang="ts">
export default {
name: "text-classes",
name: 'text-classes',
data(): { observer: null | MutationObserver; classes: string[] } {
return {
observer: null as null | MutationObserver,
classes: [
"heading1",
"heading2",
"heading3",
"heading4",
"body-large",
"body-medium",
"body-small",
'heading1',
'heading2',
'heading3',
'heading4',
'body-large',
'body-medium',
'body-small',
],
};
},

View file

@ -16,10 +16,10 @@
</template>
<script lang="ts">
import Vue from "vue";
import Vue from 'vue';
export default Vue.extend({
name: "variable-table",
name: 'variable-table',
data() {
return {
observer: null as null | MutationObserver,
@ -50,12 +50,12 @@ export default Vue.extend({
// when theme class is added or removed, reset color values
this.observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "attributes") {
if (mutation.type === 'attributes') {
setValues();
}
}
});
const body = document.querySelector("body");
const body = document.querySelector('body');
if (body) {
this.observer.observe(body, { attributes: true });
}

View file

@ -1,12 +1,12 @@
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',
},
}}
/>

View file

@ -1,12 +1,12 @@
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',
},
}}
/>

View file

@ -1,6 +1,6 @@
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" />

View file

@ -1,13 +1,13 @@
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',
},
}}
/>

View file

@ -1,12 +1,12 @@
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',
},
}}
/>

View file

@ -20,13 +20,13 @@ npm i element-theme-n8n -S
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
@ -41,8 +41,8 @@ Or
## 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';
// ...
```

View file

@ -386,7 +386,7 @@
.header .nav[data-v-70469f40]:after,
.header .nav[data-v-70469f40]:before {
display: table;
content: "";
content: '';
}
.header .nav[data-v-70469f40]:after {
clear: both;
@ -398,7 +398,7 @@
padding: 0 20px;
}
.header .nav-gap[data-v-70469f40]:before {
content: "";
content: '';
position: absolute;
top: calc(50% - 8px);
width: 1px;
@ -459,7 +459,7 @@
opacity: 1;
}
.header .nav-item a.active[data-v-70469f40]:after {
content: "";
content: '';
display: inline-block;
position: absolute;
bottom: 0;
@ -658,7 +658,7 @@
color: #333;
}
.footer-nav:after {
content: "";
content: '';
display: block;
clear: both;
}
@ -1110,7 +1110,7 @@
}
.demo-form .el-checkbox-group:after,
.demo-form .el-checkbox-group:before {
content: " ";
content: ' ';
display: table;
}
.demo-form .el-checkbox-group:after {
@ -1192,7 +1192,7 @@ ul.language-list li {
margin-bottom: -1px;
}
.icon-list li:after {
content: "";
content: '';
height: 100%;
}
.icon-list li:after,
@ -1986,18 +1986,18 @@ textarea {
font-family: icomoon;
src: url(data:application/vnd.ms-fontobject;base64,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);
src: url(data:application/vnd.ms-fontobject;base64,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#iefix)
format("embedded-opentype"),
format('embedded-opentype'),
url(data:font/ttf;base64,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)
format("truetype"),
format('truetype'),
url(data:font/woff;base64,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)
format("woff"),
format('woff'),
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmb250IGlkPSJpY29tb29uIiBob3Jpei1hZHYteD0iMTAyNCI+PGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiLz48Z2x5cGggaG9yaXotYWR2LXg9IjUxMiIvPjxnbHlwaCB1bmljb2RlPSLupIAiIGdseXBoLW5hbWU9InJhdGUtZmFjZS1vZmYiIGQ9Ik0wIDQ0OGMwIDI4Mi43NjYgMjI5LjIzNCA1MTIgNTEyIDUxMnM1MTItMjI5LjIzNCA1MTItNTEyYzAtMjgyLjc2Ni0yMjkuMjM0LTUxMi01MTItNTEyUzAgMTY1LjIzNCAwIDQ0OHptOTQ3LjIgMGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMlM3Ni44IDY4OC4zNTEgNzYuOCA0NDggMjcxLjY0OSAxMi44IDUxMiAxMi44IDk0Ny4yIDIwNy42NDkgOTQ3LjIgNDQ4ek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek0zNjEuMTQzIDI4MS42QzMzOC40MzIgMjgxLjYgMzIwIDI2Mi45NjMgMzIwIDI0MHMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0QzY4NS41NjggMTk4LjQgNzA0IDIxNy4wMzcgNzA0IDI0MHMtMTguNDMyIDQxLjYtNDEuMTQzIDQxLjZIMzYxLjE0M3oiLz48Z2x5cGggdW5pY29kZT0i7qSBIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMSIgZD0iTTUxMi4wMDEgOTYwQzIyOS4yMyA5NjAgMCA3MzAuNzcgMCA0NDcuOTk4IDAgMTY1LjIyOCAyMjkuMjMtNjQgNTEyLjAwMS02NCA3OTQuNzctNjQgMTAyNCAxNjUuMjI3IDEwMjQgNDQ3Ljk5OFM3OTQuNzcgOTYwIDUxMi4wMDEgOTYwek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em02Ny4zMjktNDA3LjY1NmwtMy40MjIgMS4yMTZjLTU2LjE1IDI3Ljg3Mi0xMTYuMzg4IDQyLjA0Ny0xNzguODgyIDQyLjA0Ny02NC41NTYgMC0xMjUuNjExLTE0LjMxNi0xODEuNTE1LTQyLjQ1bC0zLjM4Mi0xLjEzMmMtMi4xMDItLjYyOC00Ljk0NS0xLjUyOS04LjQ4OS0xLjUyOS0yMC41NTQgMC0zNy4yMzkgMTguMjktMzcuMjM5IDQwLjczNCAwIDEwLjY1NSA0LjU3MSAyMS4zNjEgMTIuMTE0IDI5LjM5OWwtLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiLz48Z2x5cGggdW5pY29kZT0i7qSCIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMiIgZD0iTTUxMi02NEMyMjkuMjM0LTY0IDAgMTY1LjIzNCAwIDQ0OHMyMjkuMjM0IDUxMiA1MTIgNTEyYzI4Mi43NjYgMCA1MTItMjI5LjIzNCA1MTItNTEyUzc5NC43NjYtNjQgNTEyLTY0ek0yOTQuNCA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3ptMzMyLjggMHYtNTEuMzA3YzAtMjguNDgyIDIyLjkyMy01MS4xNDcgNTEuMi01MS4xNDcgMjguNDc0IDAgNTEuMiAyMi44OTkgNTEuMiA1MS4xNDd2NTEuMzA3YzAgMjguNDgyLTIyLjkyMyA1MS4xNDctNTEuMiA1MS4xNDctMjguNDc0IDAtNTEuMi0yMi44OTktNTEuMi01MS4xNDd6TTM2MS4xNDMgMjgxLjZDMzM4LjQzMiAyODEuNiAzMjAgMjYyLjk2MyAzMjAgMjQwczE4LjQzMi00MS42IDQxLjE0My00MS42aDMwMS43MTRDNjg1LjU2OCAxOTguNCA3MDQgMjE3LjAzNyA3MDQgMjQwcy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNkgzNjEuMTQzeiIvPjxnbHlwaCB1bmljb2RlPSLupIMiIGdseXBoLW5hbWU9InJhdGUtZmFjZS0zIiBkPSJNNTEyLjAwMSA5NjBDMjI5LjIzMSA5NjAgMCA3MzAuNzcgMCA0NDguMDAxUzIyOS4yMy02NCA1MTIuMDAxLTY0Qzc5NC43NzEtNjQgMTAyNCAxNjUuMjMgMTAyNCA0NDcuOTk5Uzc5NC43NzEgOTYwIDUxMi4wMDEgOTYwem0zMDUuNDk0LTY1NC40MzVhNDAuNDA2IDQwLjQwNiAwIDAgMC0xLjU2OS00LjM1IDQwLjg1IDQwLjg1IDAgMCAwLTIuMzE3LTQuNTU2Qzc1Ny45NzggMTg5LjA0NiA2NDQuMDkxIDExNS4yIDUxMi4yODYgMTE1LjJsLS4yODYuMDAyLS4yODYtLjAwMmMtMTMxLjgwNCAwLTI0NS42OTMgNzMuODQ1LTMwMS4zMjMgMTgxLjQ1OWE0MC44NSA0MC44NSAwIDAgMC0yLjMxNyA0LjU1NiA0MC4zMjggNDAuMzI4IDAgMCAwLTEuNTY5IDQuMzUgNDAuMzE3IDQwLjMxNyAwIDAgMC0xLjcwNSAxMS41OTcgNDAuMzE0IDQwLjMxNCAwIDAgMCA0LjM3MiAxOC4yODJjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWguNjc2QzMyNi45MDQgMjUzLjk5MSA0MTIuNjI0IDE5Ny45IDUxMiAxOTcuNzkyYzk5LjM3NS4xMDggMTg1LjA5NSA1Ni4yIDIyNi41MDcgMTM3LjY1MmguNjc2YzYuODk3IDEzLjYwMSAyMS4yMzkgMjIuOTU1IDM3LjgyMyAyMi45NTVzMzAuOTI3LTkuMzU1IDM3LjgyMi0yMi45NTVhNDAuMjk4IDQwLjI5OCAwIDAgMCA0LjM3Mi0xOC4yODJjMC00LjAyOS0uNjAyLTcuOTE4LTEuNzA1LTExLjU5N3pNNjI3LjIgNTg4Ljg1M0M2MjcuMiA2MTcuMSA2NDkuOTI2IDY0MCA2NzguNCA2NDBjMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3ptLTMzMi44IDBDMjk0LjQgNjE3LjEgMzE3LjEyNiA2NDAgMzQ1LjYgNjQwYzI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6Ii8+PC9mb250PjwvZGVmcz48L3N2Zz4=)
format("svg");
format('svg');
font-weight: 400;
font-style: normal;
}
[class*=" icon-"],
[class^="icon-"] {
[class*=' icon-'],
[class^='icon-'] {
font-family: icomoon !important;
speak: none;
font-style: normal;
@ -2009,16 +2009,16 @@ textarea {
-moz-osx-font-smoothing: grayscale;
}
.icon-rate-face-off:before {
content: "\e900";
content: '\e900';
}
.icon-rate-face-1:before {
content: "\e901";
content: '\e901';
}
.icon-rate-face-2:before {
content: "\e902";
content: '\e902';
}
.icon-rate-face-3:before {
content: "\e903";
content: '\e903';
}
.config {

View file

@ -1078,124 +1078,124 @@
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
const original = {
color_primary: "#409EFF",
color_success: "#67C23A",
color_warning: "#E6A23C",
color_danger: "#F56C6C",
color_info: "#909399",
color_white: "#FFFFFF",
color_black: "#000000",
color_text_primary: "#303133",
color_text_regular: "#606266",
color_text_secondary: "#909399",
color_text_placeholder: "#C0C4CC",
border_color_base: "#DCDFE6",
border_color_light: "#E4E7ED",
border_color_lighter: "#EBEEF5",
border_color_extra_light: "#F2F6FC",
font_size_extra_large: "20px",
font_size_large: "18px",
font_size_medium: "16px",
font_size_base: "14px",
font_size_small: "13px",
font_size_extra_small: "12px",
color_primary: '#409EFF',
color_success: '#67C23A',
color_warning: '#E6A23C',
color_danger: '#F56C6C',
color_info: '#909399',
color_white: '#FFFFFF',
color_black: '#000000',
color_text_primary: '#303133',
color_text_regular: '#606266',
color_text_secondary: '#909399',
color_text_placeholder: '#C0C4CC',
border_color_base: '#DCDFE6',
border_color_light: '#E4E7ED',
border_color_lighter: '#EBEEF5',
border_color_extra_light: '#F2F6FC',
font_size_extra_large: '20px',
font_size_large: '18px',
font_size_medium: '16px',
font_size_base: '14px',
font_size_small: '13px',
font_size_extra_small: '12px',
font_weight_primary: 500,
font_weight_secondary: 100,
font_line_height_primary: "24px",
font_line_height_secondary: "16px",
font_line_height_primary: '24px',
font_line_height_secondary: '16px',
};
Vue.config.devtools = true;
new Vue({
el: "#app",
el: '#app',
data() {
return {
global: {},
colorLine: ["Primary", "Success", "Warning", "Danger", "Info"],
color_primary: "",
color_success: "",
color_warning: "",
color_danger: "",
color_info: "",
color_white: "",
color_black: "",
color_text_primary: "",
color_text_regular: "",
color_text_secondary: "",
color_text_placeholder: "",
border_color_base: "",
border_color_light: "",
border_color_lighter: "",
border_color_extra_light: "",
font_size_extra_large: "",
font_size_large: "",
font_size_medium: "",
font_size_base: "",
font_size_small: "",
font_size_extra_small: "",
colorLine: ['Primary', 'Success', 'Warning', 'Danger', 'Info'],
color_primary: '',
color_success: '',
color_warning: '',
color_danger: '',
color_info: '',
color_white: '',
color_black: '',
color_text_primary: '',
color_text_regular: '',
color_text_secondary: '',
color_text_placeholder: '',
border_color_base: '',
border_color_light: '',
border_color_lighter: '',
border_color_extra_light: '',
font_size_extra_large: '',
font_size_large: '',
font_size_medium: '',
font_size_base: '',
font_size_small: '',
font_size_extra_small: '',
font_weight_primary: 0,
font_weight_secondary: 0,
font_line_height_primary: "",
font_line_height_secondary: "",
radio: "1",
radio1: "Washington",
radio2: "1",
font_line_height_primary: '',
font_line_height_secondary: '',
radio: '1',
radio1: 'Washington',
radio2: '1',
checked: true,
checked1: ["Shanghai"],
checked1: ['Shanghai'],
checked2: true,
input: "Element",
input: 'Element',
inputNumber: 1,
treeData: [
{
label: "一级 1",
label: '一级 1',
children: [
{
label: "二级 1-1",
label: '二级 1-1',
children: [
{
label: "三级 1-1-1",
label: '三级 1-1-1',
},
],
},
],
},
{
label: "一级 2",
label: '一级 2',
children: [
{
label: "二级 2-1",
label: '二级 2-1',
children: [
{
label: "三级 2-1-1",
label: '三级 2-1-1',
},
],
},
{
label: "二级 2-2",
label: '二级 2-2',
children: [
{
label: "三级 2-2-1",
label: '三级 2-2-1',
},
],
},
],
},
{
label: "一级 3",
label: '一级 3',
children: [
{
label: "二级 3-1",
label: '二级 3-1',
children: [
{
label: "三级 3-1-1",
label: '三级 3-1-1',
},
],
},
{
label: "二级 3-2",
label: '二级 3-2',
children: [
{
label: "三级 3-2-1",
label: '三级 3-2-1',
},
],
},
@ -1204,63 +1204,63 @@
],
selectOptions: [
{
value: "Option1",
label: "Option1",
value: 'Option1',
label: 'Option1',
},
{
value: "Option2",
label: "Option2",
value: 'Option2',
label: 'Option2',
},
{
value: "Option3",
label: "Option3",
value: 'Option3',
label: 'Option3',
},
{
value: "Option4",
label: "Option4",
value: 'Option4',
label: 'Option4',
},
{
value: "Option5",
label: "Option5",
value: 'Option5',
label: 'Option5',
},
],
selectValue: "",
selectValue: '',
cascadeOptions: [
{
value: "guide",
label: "Guide",
value: 'guide',
label: 'Guide',
children: [
{
value: "disciplines",
label: "Disciplines",
value: 'disciplines',
label: 'Disciplines',
children: [
{
value: "consistency",
label: "Consistency",
value: 'consistency',
label: 'Consistency',
},
{
value: "feedback",
label: "Feedback",
value: 'feedback',
label: 'Feedback',
},
],
},
],
},
{
value: "resource",
label: "Resource",
value: 'resource',
label: 'Resource',
children: [
{
value: "axure",
label: "Axure Components",
value: 'axure',
label: 'Axure Components',
},
{
value: "sketch",
label: "Sketch Templates",
value: 'sketch',
label: 'Sketch Templates',
},
{
value: "docs",
label: "Design Documentation",
value: 'docs',
label: 'Design Documentation',
},
],
},
@ -1268,7 +1268,7 @@
cascaderValue: [],
switchValue: true,
slider: 28,
datePicker: "",
datePicker: '',
rate: null,
transferData: (() => {
const data = [];
@ -1284,80 +1284,80 @@
transfer: [1, 4],
tableData: [
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: "2016-05-02",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: "2016-05-04",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
],
menu: "1",
tab: "first",
collapse: ["1"],
menu: '1',
tab: 'first',
collapse: ['1'],
treeData: [
{
label: "Level one 1",
label: 'Level one 1',
children: [
{
label: "Level two 1-1",
label: 'Level two 1-1',
children: [
{
label: "Level three 1-1-1",
label: 'Level three 1-1-1',
},
],
},
],
},
{
label: "Level one 2",
label: 'Level one 2',
children: [
{
label: "Level two 2-1",
label: 'Level two 2-1',
children: [
{
label: "Level three 2-1-1",
label: 'Level three 2-1-1',
},
],
},
{
label: "Level two 2-2",
label: 'Level two 2-2',
children: [
{
label: "Level three 2-2-1",
label: 'Level three 2-2-1',
},
],
},
],
},
{
label: "Level one 3",
label: 'Level one 3',
children: [
{
label: "Level two 3-1",
label: 'Level two 3-1',
children: [
{
label: "Level three 3-1-1",
label: 'Level three 3-1-1',
},
],
},
{
label: "Level two 3-2",
label: 'Level two 3-2',
children: [
{
label: "Level three 3-2-1",
label: 'Level three 3-2-1',
},
],
},
@ -1365,13 +1365,13 @@
},
],
defaultTreeProps: {
children: "children",
label: "label",
children: 'children',
label: 'label',
},
avatarData: {
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
},
cssVariables: "",
cssVariables: '',
visible: false,
};
},
@ -1380,7 +1380,7 @@
immediate: true,
handler(value) {
Object.keys(original).forEach((v) => {
const key = `$--${v.replace(/_/g, "-")}`;
const key = `$--${v.replace(/_/g, '-')}`;
if (value[key]) {
this[v] = value[key];
} else {
@ -1390,43 +1390,43 @@
},
},
color_primary(v) {
this.setCssVariable("color-primary-base", v);
this.setCssVariable('color-primary-base', v);
},
color_success(v) {
this.setCssVariable("color-success-base", v);
this.setCssVariable('color-success-base', v);
},
color_warning(v) {
this.setCssVariable("color-warning-base", v);
this.setCssVariable('color-warning-base', v);
},
color_danger(v) {
this.setCssVariable("color-danger-base", v);
this.setCssVariable('color-danger-base', v);
},
color_info(v) {
this.setCssVariable("color-info-base", v);
this.setCssVariable('color-info-base', v);
},
color_text_primary(v) {
this.setCssVariable("color-text-dark", v);
this.setCssVariable('color-text-dark', v);
},
color_text_regular(v) {
this.setCssVariable("color-text-base", v);
this.setCssVariable('color-text-base', v);
},
color_text_secondary(v) {
this.setCssVariable("color-text-light", v);
this.setCssVariable('color-text-light', v);
},
color_text_placeholder(v) {
this.setCssVariable("color-text-lighter", v);
this.setCssVariable('color-text-lighter', v);
},
border_color_base(v) {
this.setCssVariable("border-color-base", v);
this.setCssVariable('border-color-base', v);
},
border_color_light(v) {
this.setCssVariable("border-color-light", v);
this.setCssVariable('border-color-light', v);
},
border_color_lighter(v) {
this.setCssVariable("border-color-lighter", v);
this.setCssVariable('border-color-lighter', v);
},
border_color_extra_light(v) {
this.setCssVariable("border-color-xlight", v);
this.setCssVariable('border-color-xlight', v);
},
},
methods: {
@ -1442,14 +1442,14 @@
}
},
tintColor(c, tint) {
const color = c.replace("#", "");
const color = c.replace('#', '');
let red = parseInt(color.slice(0, 2), 16);
let green = parseInt(color.slice(2, 4), 16);
let blue = parseInt(color.slice(4, 6), 16);
if (tint === 0) {
// when primary color is in its rgb space
return [red, green, blue].join(",");
return [red, green, blue].join(',');
} else {
red += Math.round(tint * (255 - red));
green += Math.round(tint * (255 - green));
@ -1501,8 +1501,8 @@
return {
h: h,
s: s + "%",
l: l + "%",
s: s + '%',
l: l + '%',
};
},
setCssVariable(key, color) {
@ -1513,11 +1513,11 @@
},
copyCssVariables() {
const cssVariables = document
.querySelector("html")
.getAttribute("style");
.querySelector('html')
.getAttribute('style');
this.cssVariables = cssVariables
? cssVariables
: "没有进行颜色修改,请先修改颜色!";
: '没有进行颜色修改,请先修改颜色!';
this.visible = true;
},
},

View file

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

View file

@ -12,7 +12,7 @@
font-weight: bold;
color: var.$color-text-placeholder;
&[class*="icon"] {
&[class*='icon'] {
margin: 0 6px;
font-weight: normal;
}

View file

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

View file

@ -173,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;
@ -209,7 +209,7 @@
&::after {
box-sizing: content-box;
content: "";
content: '';
border: 1px solid var.$checkbox-checked-icon-color;
border-left: 0;
border-top: 0;
@ -281,7 +281,7 @@
color: var(--color-primary);
}
& [class*="el-icon-"] {
& [class*='el-icon-'] {
line-height: 0.9;
& + span {

View file

@ -3,7 +3,7 @@
@use "./common/var.scss";
@use "./mixins/mixins.scss";
[class*="el-col-"] {
[class*='el-col-'] {
float: left;
box-sizing: border-box;
}

View file

@ -111,7 +111,7 @@
width: 280px;
height: 180px;
@include mixins.e(("white", "black")) {
@include mixins.e(('white', 'black')) {
position: absolute;
top: 0;
left: 0;
@ -119,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));
}
@ -202,7 +202,7 @@
margin-bottom: 6px;
&::after {
content: "";
content: '';
display: table;
clear: both;
}

View file

@ -246,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
@ -1118,67 +1118,67 @@ $lg: 1200px !default;
$xl: 1920px !default;
$breakpoints: (
"xs": (
'xs': (
max-width: $sm - 1,
),
"sm": (
'sm': (
min-width: $sm,
),
"md": (
'md': (
min-width: $md,
),
"lg": (
'lg': (
min-width: $lg,
),
"xl": (
'xl': (
min-width: $xl,
),
);
$breakpoints-spec: (
"xs-only": (
'xs-only': (
max-width: $sm - 1,
),
"sm-and-up": (
'sm-and-up': (
min-width: $sm,
),
"sm-only": (
'sm-only': (
min-width: #{$sm},
)
and
(
max-width: #{$md - 1},
),
"sm-and-down": (
'sm-and-down': (
max-width: $md - 1,
),
"md-and-up": (
'md-and-up': (
min-width: $md,
),
"md-only": (
'md-only': (
min-width: #{$md},
)
and
(
max-width: #{$lg - 1},
),
"md-and-down": (
'md-and-down': (
max-width: $lg - 1,
),
"lg-and-up": (
'lg-and-up': (
min-width: $lg,
),
"lg-only": (
'lg-only': (
min-width: #{$lg},
)
and
(
max-width: #{$xl - 1},
),
"lg-and-down": (
'lg-and-down': (
max-width: $xl - 1,
),
"xl-only": (
'xl-only': (
min-width: $xl,
),
);

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

View file

@ -13,7 +13,7 @@
@include mixins.e((body, body-wrapper)) {
&::after {
content: "";
content: '';
display: table;
clear: both;
}
@ -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;
}

View file

@ -21,7 +21,7 @@
&::after,
&::before {
content: "";
content: '';
top: 50%;
position: absolute;
margin-top: -15px;

View file

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

View file

@ -25,7 +25,7 @@
&::before {
$gap: 5px;
content: "";
content: '';
position: absolute;
display: block;
width: 1px;
@ -108,7 +108,7 @@
border-top: 1px solid var.$border-color-lighter;
&:before {
content: "";
content: '';
height: $divided-offset;
display: block;
margin: 0 -20px;

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

File diff suppressed because it is too large Load diff

View file

@ -92,7 +92,7 @@
width: var.$input-small-height;
font-size: var.$input-small-font-size;
[class*="el-icon"] {
[class*='el-icon'] {
transform: scale(0.9);
}
}
@ -111,7 +111,7 @@
width: var.$input-mini-height;
font-size: var.$input-mini-font-size;
[class*="el-icon"] {
[class*='el-icon'] {
transform: scale(0.8);
}
}
@ -139,7 +139,7 @@
height: auto;
line-height: #{(var.$input-height - 2) * 0.5};
[class*="el-icon"] {
[class*='el-icon'] {
transform: scale(0.8);
}
}
@ -159,23 +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};
}
}

View file

@ -167,7 +167,7 @@
line-height: var.$input-height;
&:after {
content: "";
content: '';
height: 100%;
width: 0;
display: inline-block;

View file

@ -25,7 +25,7 @@ $typeMap: (
@include mixins.when(underline) {
&:hover:after {
content: "";
content: '';
position: absolute;
left: 0;
right: 0;
@ -39,7 +39,7 @@ $typeMap: (
cursor: not-allowed;
}
& [class*="el-icon-"] {
& [class*='el-icon-'] {
& + span {
margin-left: 5px;
}

View file

@ -134,7 +134,7 @@
> .el-menu-item,
> .el-submenu > .el-submenu__title {
[class^="el-icon-"] {
[class^='el-icon-'] {
margin: 0;
vertical-align: middle;
width: 24px;
@ -200,7 +200,7 @@
@include mixins.b(menu-item) {
@include menu-item;
& [class^="el-icon-"] {
& [class^='el-icon-'] {
margin-right: 5px;
width: 24px;
text-align: center;
@ -262,7 +262,7 @@
background: none !important;
}
}
[class^="el-icon-"] {
[class^='el-icon-'] {
vertical-align: middle;
margin-right: 5px;
width: 24px;

View file

@ -28,7 +28,7 @@
text-align: center;
&::after {
content: "";
content: '';
display: inline-block;
height: 100%;
width: 0;

View file

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

View file

@ -23,7 +23,7 @@
@function containWhenFlag($selector) {
$selector: selectorToString($selector);
@if string.index($selector, "." + config.$state-prefix) {
@if string.index($selector, '.' + config.$state-prefix) {
@return true;
} @else {
@return false;
@ -33,7 +33,7 @@
@function containPseudoClass($selector) {
$selector: selectorToString($selector);
@if string.index($selector, ":") {
@if string.index($selector, ':') {
@return true;
} @else {
@return false;

View file

@ -71,7 +71,7 @@
/* BEM
-------------------------- */
@mixin b($block) {
$B: config.$namespace + "-" + $block !global;
$B: config.$namespace + '-' + $block !global;
.#{$B} {
@content;
@ -81,14 +81,14 @@
@mixin e($element) {
$E: $element !global;
$selector: &;
$currentSelector: "";
$currentSelector: '';
@each $unit in $element {
$currentSelector: #{$currentSelector +
"." +
'.' +
$B +
config.$element-separator +
$unit +
","};
','};
}
@if function.hitAllSpecialNestRule($selector) {
@ -110,13 +110,13 @@
@mixin m($modifier) {
$selector: &;
$currentSelector: "";
$currentSelector: '';
@each $unit in $modifier {
$currentSelector: #{$currentSelector +
& +
config.$modifier-separator +
$unit +
","};
','};
}
@at-root {
@ -128,7 +128,7 @@
@mixin configurable-m($modifier, $E-flag: false) {
$selector: &;
$interpolation: "";
$interpolation: '';
@if $E-flag {
$interpolation: config.$element-separator + $E-flag;
@ -144,12 +144,12 @@
}
@mixin spec-selector(
$specSelector: "",
$specSelector: '',
$element: $E,
$modifier: false,
$block: $B
) {
$modifierCombo: "";
$modifierCombo: '';
@if $modifier {
$modifierCombo: config.$modifier-separator + $modifier;
@ -167,7 +167,7 @@
@mixin meb($modifier: false, $element: $E, $block: $B) {
$selector: &;
$modifierCombo: "";
$modifierCombo: '';
@if $modifier {
$modifierCombo: config.$modifier-separator + $modifier;
@ -191,11 +191,11 @@
}
@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;
@ -203,7 +203,7 @@
}
@mixin pseudo($pseudo) {
@at-root #{&}#{":#{$pseudo}"} {
@at-root #{&}#{':#{$pseudo}'} {
@content;
}
}

View file

@ -11,7 +11,7 @@
#{$selector}::before,
#{$selector}::after {
display: table;
content: "";
content: '';
}
#{$selector}::after {
clear: both;
@ -25,7 +25,7 @@
@at-root {
#{$selector}::after {
display: inline-block;
content: "";
content: '';
height: 100%;
vertical-align: middle;
}

View file

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

View file

@ -12,7 +12,7 @@
position: relative;
&::after {
content: "";
content: '';
position: absolute;
width: 1px;
height: 16px;

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;
@ -115,7 +115,7 @@
line-height: 24px;
}
span:not([class*="suffix"]),
span:not([class*='suffix']),
button {
height: 22px;
line-height: 22px;

View file

@ -18,15 +18,15 @@
}
.popper__arrow::after {
content: " ";
content: ' ';
border-width: var.$popover-arrow-size;
}
&[x-placement^="top"] {
&[x-placement^='top'] {
margin-bottom: #{var.$popover-arrow-size + 6};
}
&[x-placement^="top"] .popper__arrow {
&[x-placement^='top'] .popper__arrow {
bottom: -(var.$popover-arrow-size);
left: 50%;
margin-right: #{var.$tooltip-arrow-size * 0.5};
@ -41,11 +41,11 @@
}
}
&[x-placement^="bottom"] {
&[x-placement^='bottom'] {
margin-top: #{var.$popover-arrow-size + 6};
}
&[x-placement^="bottom"] .popper__arrow {
&[x-placement^='bottom'] .popper__arrow {
top: -(var.$popover-arrow-size);
left: 50%;
margin-right: #{var.$tooltip-arrow-size * 0.5};
@ -60,11 +60,11 @@
}
}
&[x-placement^="right"] {
&[x-placement^='right'] {
margin-left: #{var.$popover-arrow-size + 6};
}
&[x-placement^="right"] .popper__arrow {
&[x-placement^='right'] .popper__arrow {
top: 50%;
left: -(var.$popover-arrow-size);
margin-bottom: #{var.$tooltip-arrow-size * 0.5};
@ -79,11 +79,11 @@
}
}
&[x-placement^="left"] {
&[x-placement^='left'] {
margin-right: #{var.$popover-arrow-size + 6};
}
&[x-placement^="left"] .popper__arrow {
&[x-placement^='left'] .popper__arrow {
top: 50%;
right: -(var.$popover-arrow-size);
margin-bottom: #{var.$tooltip-arrow-size * 0.5};

View file

@ -37,7 +37,7 @@
color: var(--color-primary);
}
& [class*="el-icon-"] {
& [class*='el-icon-'] {
line-height: 0.9;
& + span {

View file

@ -165,7 +165,7 @@
height: 4px;
border-radius: var.$radio-input-border-radius;
background-color: var.$color-white;
content: "";
content: '';
position: absolute;
left: 50%;
top: 50%;

View file

@ -131,7 +131,7 @@ blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: '';
content: none;
}

View file

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

View file

@ -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;
}
@ -252,7 +252,7 @@
}
@include mixins.e(icon-inner) {
&[class*="el-icon"]:not(.is-status) {
&[class*='el-icon']:not(.is-status) {
font-size: 18px;
}
@ -273,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;
@ -288,7 +288,7 @@
&::before,
&::after {
content: "";
content: '';
display: inline-block;
position: absolute;
height: 15px;

View file

@ -67,7 +67,7 @@
vertical-align: middle;
&:after {
content: "";
content: '';
position: absolute;
top: 1px;
left: 1px;

View file

@ -66,7 +66,7 @@
background-color: var.$color-white;
// 纯属为了增加权重
&[class*="cell"] {
&[class*='cell'] {
padding: 20px 50px;
}
@ -176,7 +176,7 @@
tr {
background-color: var.$color-white;
input[type="checkbox"] {
input[type='checkbox'] {
margin: 0;
}
}
@ -211,7 +211,7 @@
&.required > div::before {
display: inline-block;
content: "";
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
@ -252,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;
@ -318,7 +318,7 @@
box-shadow: var.$table-fixed-box-shadow;
&::before {
content: "";
content: '';
position: absolute;
left: 0;
bottom: 0;
@ -559,7 +559,7 @@
}
}
[class*="el-table__row--level"] {
[class*='el-table__row--level'] {
.el-table__expand-icon {
display: inline-block;
width: 20px;

View file

@ -45,7 +45,7 @@
position: relative;
&::after {
content: "";
content: '';
position: absolute;
left: 0;
bottom: 0;

View file

@ -31,15 +31,15 @@
}
.popper__arrow::after {
content: " ";
content: ' ';
border-width: 5px;
}
&[x-placement^="top"] {
&[x-placement^='top'] {
margin-bottom: #{var.$tooltip-arrow-size + 6px};
}
&[x-placement^="top"] .popper__arrow {
&[x-placement^='top'] .popper__arrow {
bottom: -(var.$tooltip-arrow-size);
border-top-color: var.$tooltip-border-color;
border-bottom-width: 0;
@ -52,11 +52,11 @@
}
}
&[x-placement^="bottom"] {
&[x-placement^='bottom'] {
margin-top: #{var.$tooltip-arrow-size + 6px};
}
&[x-placement^="bottom"] .popper__arrow {
&[x-placement^='bottom'] .popper__arrow {
top: -(var.$tooltip-arrow-size);
border-top-width: 0;
border-bottom-color: var.$tooltip-border-color;
@ -69,11 +69,11 @@
}
}
&[x-placement^="right"] {
&[x-placement^='right'] {
margin-left: #{var.$tooltip-arrow-size + 6px};
}
&[x-placement^="right"] .popper__arrow {
&[x-placement^='right'] .popper__arrow {
left: -(var.$tooltip-arrow-size);
border-right-color: var.$tooltip-border-color;
border-left-width: 0;
@ -86,11 +86,11 @@
}
}
&[x-placement^="left"] {
&[x-placement^='left'] {
margin-right: #{var.$tooltip-arrow-size + 6px};
}
&[x-placement^="left"] .popper__arrow {
&[x-placement^='left'] .popper__arrow {
right: -(var.$tooltip-arrow-size);
border-right-width: 0;
border-left-color: var.$tooltip-border-color;
@ -113,25 +113,25 @@
background: var.$tooltip-color;
border: 1px solid var.$tooltip-fill;
&[x-placement^="top"] .popper__arrow {
&[x-placement^='top'] .popper__arrow {
border-top-color: var.$tooltip-fill;
&::after {
border-top-color: var.$tooltip-color;
}
}
&[x-placement^="bottom"] .popper__arrow {
&[x-placement^='bottom'] .popper__arrow {
border-bottom-color: var.$tooltip-fill;
&::after {
border-bottom-color: var.$tooltip-color;
}
}
&[x-placement^="left"] .popper__arrow {
&[x-placement^='left'] .popper__arrow {
border-left-color: var.$tooltip-fill;
&::after {
border-left-color: var.$tooltip-color;
}
}
&[x-placement^="right"] .popper__arrow {
&[x-placement^='right'] .popper__arrow {
border-right-color: var.$tooltip-fill;
&::after {
border-right-color: var.$tooltip-color;

View file

@ -53,7 +53,7 @@
font-size: 14px;
}
& [class*="el-icon-"] + span {
& [class*='el-icon-'] + span {
margin-left: 0;
}
}

View file

@ -240,7 +240,7 @@
transition: color 0.3s;
white-space: nowrap;
[class^="el-icon"] {
[class^='el-icon'] {
height: 100%;
margin-right: 7px;
color: var.$color-text-secondary;
@ -346,7 +346,7 @@
transition: opacity 0.3s;
&::after {
display: inline-block;
content: "";
content: '';
height: 100%;
vertical-align: middle;
}