mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-16 09:36:44 +00:00
fix(editor): Migrate from @import to @use for SCSS files to address deprecation warnings (#17858)
This commit is contained in:
Csaba Tuncsik
1
.gitignore
vendored
1
.gitignore
vendored
@@ -18,6 +18,7 @@ nodelinter.config.json
|
|||||||
packages/**/.turbo
|
packages/**/.turbo
|
||||||
.turbo
|
.turbo
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
|
.stylelintcache
|
||||||
*.swp
|
*.swp
|
||||||
CHANGELOG-*.md
|
CHANGELOG-*.md
|
||||||
*.mdx
|
*.mdx
|
||||||
|
|||||||
@@ -14,3 +14,9 @@ pre-commit:
|
|||||||
skip:
|
skip:
|
||||||
- merge
|
- merge
|
||||||
- rebase
|
- rebase
|
||||||
|
styles_check:
|
||||||
|
glob: 'packages/**/*.{scss,sass,vue}'
|
||||||
|
run: pnpm lint:styles:fix
|
||||||
|
skip:
|
||||||
|
- merge
|
||||||
|
- rebase
|
||||||
|
|||||||
@@ -30,6 +30,8 @@
|
|||||||
"format": "turbo run format && node scripts/format.mjs",
|
"format": "turbo run format && node scripts/format.mjs",
|
||||||
"format:check": "turbo run format:check",
|
"format:check": "turbo run format:check",
|
||||||
"lint": "turbo run lint",
|
"lint": "turbo run lint",
|
||||||
|
"lint:styles": "turbo run lint:styles",
|
||||||
|
"lint:styles:fix": "turbo run lint:styles:fix",
|
||||||
"lint:affected": "turbo run lint --affected",
|
"lint:affected": "turbo run lint --affected",
|
||||||
"lint:fix": "turbo run lint:fix",
|
"lint:fix": "turbo run lint:fix",
|
||||||
"optimize-svg": "find ./packages -name '*.svg' ! -name 'pipedrive.svg' -print0 | xargs -0 -P16 -L20 npx svgo",
|
"optimize-svg": "find ./packages -name '*.svg' ! -name 'pipedrive.svg' -print0 | xargs -0 -P16 -L20 npx svgo",
|
||||||
|
|||||||
36
packages/@n8n/stylelint-config/package.json
Normal file
36
packages/@n8n/stylelint-config/package.json
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"name": "@n8n/stylelint-config",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"exports": {
|
||||||
|
"./base": {
|
||||||
|
"default": "./dist/configs/base.js",
|
||||||
|
"types": "./dist/configs/base.d.ts"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "tsc",
|
||||||
|
"clean": "rimraf dist .turbo",
|
||||||
|
"dev": "pnpm watch",
|
||||||
|
"format": "biome format --write .",
|
||||||
|
"format:check": "biome ci .",
|
||||||
|
"typecheck": "tsc --noEmit",
|
||||||
|
"watch": "tsc --watch"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"stylelint": "^16.23.0",
|
||||||
|
"stylelint-config-standard-scss": "^15.0.1",
|
||||||
|
"stylelint-scss": "^6.12.1",
|
||||||
|
"postcss-html": "^1.8.0",
|
||||||
|
"postcss-scss": "^4.0.9"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@n8n/typescript-config": "workspace:*",
|
||||||
|
"typescript": "catalog:",
|
||||||
|
"rimraf": "catalog:"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"stylelint": ">= 16"
|
||||||
|
}
|
||||||
|
}
|
||||||
93
packages/@n8n/stylelint-config/src/configs/base.ts
Normal file
93
packages/@n8n/stylelint-config/src/configs/base.ts
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
import type { Config } from 'stylelint';
|
||||||
|
|
||||||
|
export const baseConfig: Config = {
|
||||||
|
// TODO: Extending with standard config requires a lot of manual fixes but would be great to have
|
||||||
|
// extends: 'stylelint-config-standard-scss',
|
||||||
|
// Basic SCSS support with essential rules
|
||||||
|
plugins: ['stylelint-scss'],
|
||||||
|
rules: {
|
||||||
|
'no-empty-source': true,
|
||||||
|
|
||||||
|
// Basic syntax and consistency rules
|
||||||
|
'color-hex-length': 'short',
|
||||||
|
'comment-no-empty': true,
|
||||||
|
// 'declaration-block-no-duplicate-properties': disabled due to vendor prefixes
|
||||||
|
'no-duplicate-selectors': true,
|
||||||
|
'no-invalid-double-slash-comments': true,
|
||||||
|
|
||||||
|
// Quality rules (keep only the working ones)
|
||||||
|
'length-zero-no-unit': true,
|
||||||
|
// 'no-descending-specificity': disabled - too many existing issues (would require major refactoring) but this would be a must have
|
||||||
|
'no-duplicate-at-import-rules': true,
|
||||||
|
'shorthand-property-no-redundant-values': true,
|
||||||
|
// 'declaration-block-no-shorthand-property-overrides': disabled - conflicts with intentional CSS patterns
|
||||||
|
'at-rule-no-unknown': [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignoreAtRules: [
|
||||||
|
'tailwind',
|
||||||
|
'apply',
|
||||||
|
'variants',
|
||||||
|
'responsive',
|
||||||
|
'screen',
|
||||||
|
'use',
|
||||||
|
'forward',
|
||||||
|
'include',
|
||||||
|
'mixin',
|
||||||
|
'function',
|
||||||
|
'return',
|
||||||
|
'if',
|
||||||
|
'else',
|
||||||
|
'for',
|
||||||
|
'each',
|
||||||
|
'while',
|
||||||
|
'extend',
|
||||||
|
'at-root',
|
||||||
|
'warn',
|
||||||
|
'error',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'at-rule-disallowed-list': [
|
||||||
|
['import'],
|
||||||
|
{
|
||||||
|
message:
|
||||||
|
'@import is deprecated! Use @use for local SCSS files. For third-party libraries that need scoping: use @use "sass:meta"; and @include meta.load-css("library") inside a CSS selector.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// SCSS specific rules
|
||||||
|
'scss/dollar-variable-colon-space-after': 'always-single-line',
|
||||||
|
'scss/dollar-variable-colon-space-before': 'never',
|
||||||
|
'scss/dollar-variable-no-missing-interpolation': true,
|
||||||
|
'scss/double-slash-comment-whitespace-inside': 'always',
|
||||||
|
'scss/operator-no-unspaced': true,
|
||||||
|
'scss/property-no-unknown': [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignoreProperties: ['composes'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'scss/at-import-partial-extension-disallowed-list': ['scss'],
|
||||||
|
// 'scss/selector-no-redundant-nesting-selector': disabled - would require manual fixes across many files
|
||||||
|
},
|
||||||
|
ignoreFiles: [
|
||||||
|
'**/node_modules/**/*',
|
||||||
|
'**/dist/**/*',
|
||||||
|
'**/build/**/*',
|
||||||
|
'**/.turbo/**/*',
|
||||||
|
'**/coverage/**/*',
|
||||||
|
],
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['**/*.vue'],
|
||||||
|
customSyntax: 'postcss-html',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['**/*.scss', '**/*.sass'],
|
||||||
|
customSyntax: 'postcss-scss',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default baseConfig;
|
||||||
18
packages/@n8n/stylelint-config/tsconfig.json
Normal file
18
packages/@n8n/stylelint-config/tsconfig.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2015",
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": false,
|
||||||
|
"outDir": "dist",
|
||||||
|
"rootDir": "src",
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"downlevelIteration": true,
|
||||||
|
"skipLibCheck": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*"],
|
||||||
|
"exclude": ["dist", "node_modules", "**/*.test.ts"]
|
||||||
|
}
|
||||||
@@ -31,6 +31,9 @@
|
|||||||
"cleanup": "rimraf dist",
|
"cleanup": "rimraf dist",
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"lint": "eslint src --quiet",
|
"lint": "eslint src --quiet",
|
||||||
|
"lint:fix": "eslint src --fix",
|
||||||
|
"lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache",
|
||||||
|
"lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache",
|
||||||
"typecheck": "vue-tsc --noEmit",
|
"typecheck": "vue-tsc --noEmit",
|
||||||
"build:backend": "tsup",
|
"build:backend": "tsup",
|
||||||
"build:frontend": "vite build",
|
"build:frontend": "vite build",
|
||||||
@@ -45,6 +48,7 @@
|
|||||||
"@n8n/extension-sdk": "workspace:*"
|
"@n8n/extension-sdk": "workspace:*"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@n8n/stylelint-config": "workspace:*",
|
||||||
"@n8n/typescript-config": "workspace:*",
|
"@n8n/typescript-config": "workspace:*",
|
||||||
"@vitejs/plugin-vue": "catalog:frontend",
|
"@vitejs/plugin-vue": "catalog:frontend",
|
||||||
"@vue/tsconfig": "catalog:frontend",
|
"@vue/tsconfig": "catalog:frontend",
|
||||||
|
|||||||
3
packages/extensions/insights/stylelint.config.mjs
Normal file
3
packages/extensions/insights/stylelint.config.mjs
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { baseConfig } from '@n8n/stylelint-config/base';
|
||||||
|
|
||||||
|
export default baseConfig;
|
||||||
@@ -12,6 +12,8 @@
|
|||||||
"typecheck": "vue-tsc --noEmit",
|
"typecheck": "vue-tsc --noEmit",
|
||||||
"lint": "eslint src --quiet",
|
"lint": "eslint src --quiet",
|
||||||
"lint:fix": "eslint src --fix",
|
"lint:fix": "eslint src --fix",
|
||||||
|
"lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache",
|
||||||
|
"lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache",
|
||||||
"format": "biome format --write src .storybook && prettier --write src/ --ignore-path ../../../../.prettierignore",
|
"format": "biome format --write src .storybook && prettier --write src/ --ignore-path ../../../../.prettierignore",
|
||||||
"format:check": "biome ci src .storybook && prettier --check src/ --ignore-path ../../../../.prettierignore",
|
"format:check": "biome ci src .storybook && prettier --check src/ --ignore-path ../../../../.prettierignore",
|
||||||
"storybook": "storybook dev -p 6006 --no-open",
|
"storybook": "storybook dev -p 6006 --no-open",
|
||||||
@@ -48,6 +50,7 @@
|
|||||||
"@iconify-json/mdi": "^1.1.54",
|
"@iconify-json/mdi": "^1.1.54",
|
||||||
"@n8n/storybook": "workspace:*",
|
"@n8n/storybook": "workspace:*",
|
||||||
"@n8n/eslint-config": "workspace:*",
|
"@n8n/eslint-config": "workspace:*",
|
||||||
|
"@n8n/stylelint-config": "workspace:*",
|
||||||
"@n8n/typescript-config": "workspace:*",
|
"@n8n/typescript-config": "workspace:*",
|
||||||
"@n8n/vitest-config": "workspace:*",
|
"@n8n/vitest-config": "workspace:*",
|
||||||
"@vitejs/plugin-vue": "catalog:frontend",
|
"@vitejs/plugin-vue": "catalog:frontend",
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
--chat--color-primary-shade-100: #cf3c5c;
|
--chat--color-primary-shade-100: #cf3c5c;
|
||||||
--chat--color-secondary: #20b69e;
|
--chat--color-secondary: #20b69e;
|
||||||
--chat--color-secondary-shade-50: #1ca08a;
|
--chat--color-secondary-shade-50: #1ca08a;
|
||||||
--chat--color-white: #ffffff;
|
--chat--color-white: #fff;
|
||||||
--chat--color-light: #f2f4f8;
|
--chat--color-light: #f2f4f8;
|
||||||
--chat--color-light-shade-50: #e6e9f1;
|
--chat--color-light-shade-50: #e6e9f1;
|
||||||
--chat--color-light-shade-100: #c2c5cc;
|
--chat--color-light-shade-100: #c2c5cc;
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
@import 'tokens';
|
@use 'tokens';
|
||||||
@import 'markdown';
|
@use 'markdown';
|
||||||
|
|||||||
@@ -155,6 +155,7 @@ body {
|
|||||||
*/
|
*/
|
||||||
small {
|
small {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
|
opacity: 0.8; /* or some other way of differentiating it from body text */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -389,6 +390,8 @@ body {
|
|||||||
max-width: 36rem;
|
max-width: 36rem;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
background: var(--background-main);
|
||||||
|
color: var(--text-main);
|
||||||
}
|
}
|
||||||
/* ----- Typography ----- */
|
/* ----- Typography ----- */
|
||||||
|
|
||||||
@@ -479,13 +482,9 @@ body {
|
|||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 1em;
|
|
||||||
opacity: 0.8; /* or some other way of differentiating it from body text */
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
mark {
|
||||||
background: pink; /* change to proper color, based on theme */
|
background: pink; /* change to proper color, based on theme */
|
||||||
|
padding: 0.1em 0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -508,7 +507,7 @@ body {
|
|||||||
blockquote {
|
blockquote {
|
||||||
border-left: 0.3rem solid #7a283a;
|
border-left: 0.3rem solid #7a283a;
|
||||||
border-left: 0.3rem solid var(--theme);
|
border-left: 0.3rem solid var(--theme);
|
||||||
margin: 0.6rem 0 1.2rem 0;
|
margin: 0.6rem 0 1.2rem;
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -522,13 +521,6 @@ body {
|
|||||||
}
|
}
|
||||||
/* ----- Layout ----- */
|
/* ----- Layout ----- */
|
||||||
|
|
||||||
body {
|
|
||||||
background: #fefefe;
|
|
||||||
background: var(--background-main);
|
|
||||||
color: #1f1f1f;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #7a283a;
|
color: #7a283a;
|
||||||
color: var(--theme);
|
color: var(--theme);
|
||||||
@@ -561,11 +553,6 @@ body {
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
mark {
|
|
||||||
background: pink; /* change to proper color, based on theme */
|
|
||||||
padding: 0.1em 0.15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd, /* different style for kbd? */
|
kbd, /* different style for kbd? */
|
||||||
code {
|
code {
|
||||||
padding: 0.1em 0.25em;
|
padding: 0.1em 0.25em;
|
||||||
@@ -579,12 +566,6 @@ body {
|
|||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
pre code {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0 0 0.5rem 0.5rem;
|
padding: 0 0 0.5rem 0.5rem;
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
.n8n-chat {
|
@use 'sass:meta';
|
||||||
@import 'highlight.js/styles/github';
|
@use 'css';
|
||||||
}
|
|
||||||
|
|
||||||
@import 'css';
|
.n8n-chat {
|
||||||
|
@include meta.load-css('highlight.js/styles/github');
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,5 +0,0 @@
|
|||||||
.n8n-chat {
|
|
||||||
@import 'highlight.js/styles/github';
|
|
||||||
}
|
|
||||||
|
|
||||||
@import 'css';
|
|
||||||
3
packages/frontend/@n8n/chat/stylelint.config.mjs
Normal file
3
packages/frontend/@n8n/chat/stylelint.config.mjs
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { baseConfig } from '@n8n/stylelint-config/base';
|
||||||
|
|
||||||
|
export default baseConfig;
|
||||||
@@ -23,4 +23,4 @@
|
|||||||
src: url('../src/css/fonts/CommitMonoVariable.woff2') format('woff2');
|
src: url('../src/css/fonts/CommitMonoVariable.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
@import '../src/css/_tokens.scss';
|
@use '../src/css/_tokens.scss';
|
||||||
|
|||||||
@@ -18,11 +18,14 @@
|
|||||||
"format": "biome format --write . && prettier --write . --ignore-path ../../../../.prettierignore",
|
"format": "biome format --write . && prettier --write . --ignore-path ../../../../.prettierignore",
|
||||||
"format:check": "biome ci . && prettier --check . --ignore-path ../../../../.prettierignore",
|
"format:check": "biome ci . && prettier --check . --ignore-path ../../../../.prettierignore",
|
||||||
"lint": "eslint src --quiet",
|
"lint": "eslint src --quiet",
|
||||||
"lint:fix": "eslint src --fix"
|
"lint:fix": "eslint src --fix",
|
||||||
|
"lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache",
|
||||||
|
"lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@n8n/eslint-config": "workspace:*",
|
"@n8n/eslint-config": "workspace:*",
|
||||||
"@n8n/storybook": "workspace:*",
|
"@n8n/storybook": "workspace:*",
|
||||||
|
"@n8n/stylelint-config": "workspace:*",
|
||||||
"@n8n/typescript-config": "workspace:*",
|
"@n8n/typescript-config": "workspace:*",
|
||||||
"@n8n/vitest-config": "workspace:*",
|
"@n8n/vitest-config": "workspace:*",
|
||||||
"@testing-library/jest-dom": "catalog:frontend",
|
"@testing-library/jest-dom": "catalog:frontend",
|
||||||
|
|||||||
@@ -78,7 +78,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
@import '../../css/common/var.scss';
|
@use '../../css/common/var.scss';
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -87,7 +87,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
border-bottom: 1px solid transparent;
|
border-bottom: 1px solid transparent;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: $alert-padding;
|
padding: var.$alert-padding;
|
||||||
|
|
||||||
&.center {
|
&.center {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -98,7 +98,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
color: var(--color-success);
|
color: var(--color-success);
|
||||||
|
|
||||||
&.background {
|
&.background {
|
||||||
background-color: $color-success-lighter;
|
background-color: var.$color-success-lighter;
|
||||||
border-color: var(--color-success);
|
border-color: var(--color-success);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -108,7 +108,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.dark {
|
&.dark {
|
||||||
color: $color-white;
|
color: var.$color-white;
|
||||||
|
|
||||||
&:not(.background) {
|
&:not(.background) {
|
||||||
color: var(--color-success);
|
color: var(--color-success);
|
||||||
@@ -116,7 +116,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
|
|
||||||
&.background {
|
&.background {
|
||||||
background-color: var(--color-success);
|
background-color: var(--color-success);
|
||||||
border-color: $color-white;
|
border-color: var.$color-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -126,13 +126,13 @@ const alertBoxClassNames = computed(() => {
|
|||||||
color: var(--color-info);
|
color: var(--color-info);
|
||||||
|
|
||||||
&.background {
|
&.background {
|
||||||
background-color: $alert-info-color;
|
background-color: var.$alert-info-color;
|
||||||
border-color: var(--color-info);
|
border-color: var(--color-info);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.dark {
|
&.dark {
|
||||||
color: $color-white;
|
color: var.$color-white;
|
||||||
|
|
||||||
&:not(.background) {
|
&:not(.background) {
|
||||||
color: var(--color-info);
|
color: var(--color-info);
|
||||||
@@ -140,7 +140,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
|
|
||||||
&.background {
|
&.background {
|
||||||
background-color: var(--color-info);
|
background-color: var(--color-info);
|
||||||
border-color: $color-white;
|
border-color: var.$color-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -154,7 +154,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
color: var(--color-warning);
|
color: var(--color-warning);
|
||||||
|
|
||||||
&.background {
|
&.background {
|
||||||
background-color: $alert-warning-color;
|
background-color: var.$alert-warning-color;
|
||||||
border-color: var(--color-warning);
|
border-color: var(--color-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -164,7 +164,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.dark {
|
&.dark {
|
||||||
color: $color-white;
|
color: var.$color-white;
|
||||||
|
|
||||||
&:not(.background) {
|
&:not(.background) {
|
||||||
color: var(--color-warning);
|
color: var(--color-warning);
|
||||||
@@ -172,7 +172,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
|
|
||||||
&.background {
|
&.background {
|
||||||
background-color: var(--color-warning);
|
background-color: var(--color-warning);
|
||||||
border-color: $color-white;
|
border-color: var.$color-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -182,7 +182,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
color: var(--color-danger);
|
color: var(--color-danger);
|
||||||
|
|
||||||
&.background {
|
&.background {
|
||||||
background-color: $alert-danger-color;
|
background-color: var.$alert-danger-color;
|
||||||
border-color: var(--color-danger);
|
border-color: var(--color-danger);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -192,7 +192,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.dark {
|
&.dark {
|
||||||
color: $color-white;
|
color: var.$color-white;
|
||||||
|
|
||||||
&:not(.background) {
|
&:not(.background) {
|
||||||
color: var(--color-danger);
|
color: var(--color-danger);
|
||||||
@@ -200,7 +200,7 @@ const alertBoxClassNames = computed(() => {
|
|||||||
|
|
||||||
&.background {
|
&.background {
|
||||||
background-color: var(--color-danger);
|
background-color: var(--color-danger);
|
||||||
border-color: $color-white;
|
border-color: var.$color-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -226,16 +226,16 @@ const alertBoxClassNames = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: $alert-title-font-size;
|
font-size: var.$alert-title-font-size;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: $alert-description-font-size;
|
font-size: var.$alert-description-font-size;
|
||||||
|
|
||||||
&.hasTitle {
|
&.hasTitle {
|
||||||
margin: 5px 0 0 0;
|
margin: 5px 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
@import '../../css/mixins/utils';
|
@use '../../css/mixins/utils';
|
||||||
@import '../../css/common/var';
|
@use '../../css/common/var';
|
||||||
|
@use 'sass:string';
|
||||||
|
|
||||||
@mixin n8n-button($override: false) {
|
@mixin n8n-button($override: false) {
|
||||||
$important: if($override, !important, '');
|
$important: if($override, !important, '');
|
||||||
@@ -9,13 +10,14 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
border: var(--border-width-base) $button-border-color var(--border-style-base) unquote($important);
|
border: var(--border-width-base) var.$button-border-color var(--border-style-base)
|
||||||
color: $button-font-color unquote($important);
|
string.unquote($important);
|
||||||
background-color: $button-background-color unquote($important);
|
color: var.$button-font-color string.unquote($important);
|
||||||
font-weight: var(--font-weight-medium) unquote($important);
|
background-color: var.$button-background-color string.unquote($important);
|
||||||
border-radius: $button-border-radius unquote($important);
|
font-weight: var(--font-weight-medium) string.unquote($important);
|
||||||
padding: $button-padding-vertical $button-padding-horizontal unquote($important);
|
border-radius: var.$button-border-radius string.unquote($important);
|
||||||
font-size: $button-font-size unquote($important);
|
padding: var.$button-padding-vertical var.$button-padding-horizontal string.unquote($important);
|
||||||
|
font-size: var.$button-font-size string.unquote($important);
|
||||||
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -30,43 +32,44 @@
|
|||||||
|
|
||||||
gap: var(--spacing-3xs);
|
gap: var(--spacing-3xs);
|
||||||
|
|
||||||
@include utils-user-select(none);
|
@include utils.utils-user-select(none);
|
||||||
|
|
||||||
// Solution for a inside button
|
// Solution for a inside button
|
||||||
& a {
|
& a {
|
||||||
color: $button-font-color unquote($important);
|
color: var.$button-font-color string.unquote($important);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $button-hover-font-color unquote($important);
|
color: var.$button-hover-font-color string.unquote($important);
|
||||||
border-color: $button-hover-border-color unquote($important);
|
border-color: var.$button-hover-border-color string.unquote($important);
|
||||||
background-color: $button-hover-background-color unquote($important);
|
background-color: var.$button-hover-background-color string.unquote($important);
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
color: $button-hover-font-color unquote($important);
|
color: var.$button-hover-font-color string.unquote($important);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&.active {
|
&.active {
|
||||||
color: $button-active-font-color unquote($important);
|
color: var.$button-active-font-color string.unquote($important);
|
||||||
border-color: $button-active-border-color unquote($important);
|
border-color: var.$button-active-border-color string.unquote($important);
|
||||||
background-color: $button-active-background-color unquote($important);
|
background-color: var.$button-active-background-color string.unquote($important);
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
color: $button-active-font-color unquote($important);
|
color: var.$button-active-font-color string.unquote($important);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-visible:not(:active, .active) {
|
&:focus-visible:not(:active, .active) {
|
||||||
color: $button-focus-font-color unquote($important);
|
color: var.$button-focus-font-color string.unquote($important);
|
||||||
border-color: $button-focus-border-color unquote($important);
|
border-color: var.$button-focus-border-color string.unquote($important);
|
||||||
background-color: $button-focus-background-color unquote($important);
|
background-color: var.$button-focus-background-color string.unquote($important);
|
||||||
outline: $focus-outline-width solid $button-focus-outline-color unquote($important);
|
outline: var.$focus-outline-width solid var.$button-focus-outline-color
|
||||||
|
string.unquote($important);
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
color: $button-focus-font-color unquote($important);
|
color: var.$button-focus-font-color string.unquote($important);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -75,12 +78,12 @@
|
|||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
color: $button-disabled-font-color;
|
color: var.$button-disabled-font-color;
|
||||||
border-color: $button-disabled-border-color;
|
border-color: var.$button-disabled-border-color;
|
||||||
background-color: $button-disabled-background-color;
|
background-color: var.$button-disabled-background-color;
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
color: $button-disabled-font-color;
|
color: var.$button-disabled-font-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -90,12 +93,12 @@
|
|||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
color: $button-loading-font-color;
|
color: var.$button-loading-font-color;
|
||||||
border-color: $button-loading-border-color;
|
border-color: var.$button-loading-border-color;
|
||||||
background-color: $button-loading-background-color;
|
background-color: var.$button-loading-background-color;
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
color: $button-loading-font-color;
|
color: var.$button-loading-font-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -81,10 +81,10 @@ const classes = computed(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import './Button';
|
@use './Button';
|
||||||
|
|
||||||
.el-button {
|
.el-button {
|
||||||
@include n8n-button(true);
|
@include Button.n8n-button(true);
|
||||||
|
|
||||||
--button-padding-vertical: var(--spacing-2xs);
|
--button-padding-vertical: var(--spacing-2xs);
|
||||||
--button-padding-horizontal: var(--spacing-xs);
|
--button-padding-horizontal: var(--spacing-xs);
|
||||||
@@ -96,18 +96,18 @@ const classes = computed(() => {
|
|||||||
|
|
||||||
&.btn--cancel,
|
&.btn--cancel,
|
||||||
&.el-color-dropdown__link-btn {
|
&.el-color-dropdown__link-btn {
|
||||||
@include n8n-button-secondary;
|
@include Button.n8n-button-secondary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
@import './Button';
|
@use './Button';
|
||||||
@import '../../css/mixins/utils';
|
@use '../../css/mixins/utils';
|
||||||
@import '../../css/common/var';
|
@use '../../css/common/var';
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
@include n8n-button;
|
@include Button.n8n-button;
|
||||||
}
|
}
|
||||||
|
|
||||||
$loading-overlay-background-color: rgba(255, 255, 255, 0);
|
$loading-overlay-background-color: rgba(255, 255, 255, 0);
|
||||||
@@ -117,23 +117,23 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.secondary {
|
.secondary {
|
||||||
@include n8n-button-secondary;
|
@include Button.n8n-button-secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tertiary {
|
.tertiary {
|
||||||
@include n8n-button-secondary;
|
@include Button.n8n-button-secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
@include n8n-button-success;
|
@include Button.n8n-button-success;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning {
|
.warning {
|
||||||
@include n8n-button-warning;
|
@include Button.n8n-button-warning;
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger {
|
.danger {
|
||||||
@include n8n-button-danger;
|
@include Button.n8n-button-danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -525,14 +525,6 @@ const table = useVueTable({
|
|||||||
th {
|
th {
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
background-color: var(--color-background-light-base);
|
|
||||||
border-bottom: 1px solid var(--color-foreground-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
color: var(--color-text-base);
|
color: var(--color-text-base);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@@ -544,11 +536,17 @@ const table = useVueTable({
|
|||||||
&:first-child {
|
&:first-child {
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background-color: var(--color-background-light-base);
|
||||||
|
border-bottom: 1px solid var(--color-foreground-base);
|
||||||
|
}
|
||||||
|
|
||||||
tbody > tr {
|
tbody > tr {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--color-background-light);
|
background-color: var(--color-background-light);
|
||||||
@@ -602,7 +600,7 @@ th.loading-row {
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
height: 0px;
|
height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -96,7 +96,7 @@ const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
|
|||||||
padding: var(--spacing-l);
|
padding: var(--spacing-l);
|
||||||
border: var(--border-base);
|
border: var(--border-base);
|
||||||
border-radius: var(--border-radius-large);
|
border-radius: var(--border-radius-large);
|
||||||
box-shadow: 0px 4px 16px rgba(99, 77, 255, 0.06);
|
box-shadow: 0 4px 16px rgba(99, 77, 255, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputsContainer {
|
.inputsContainer {
|
||||||
|
|||||||
@@ -38,14 +38,14 @@ withDefaults(defineProps<LinkProps>(), {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
@import '../../utils';
|
@use '../../utils';
|
||||||
@import '../../css/common/var';
|
@use '../../css/common/var';
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
color: $link-color;
|
color: var.$link-color;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: $link-color-active;
|
color: var.$link-color-active;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -53,11 +53,11 @@ withDefaults(defineProps<LinkProps>(), {
|
|||||||
color: var(--color-text-base);
|
color: var(--color-text-base);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $link-color;
|
color: var.$link-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: $link-color-active;
|
color: var.$link-color-active;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -70,8 +70,8 @@ const emit = defineEmits<Emits>();
|
|||||||
background-color: var(--color-foreground-xlight);
|
background-color: var(--color-foreground-xlight);
|
||||||
border: var(--border-base);
|
border: var(--border-base);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
|
rgba(0, 0, 0, 0.1) 0 10px 15px -3px,
|
||||||
rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
|
rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||||
animation-duration: 400ms;
|
animation-duration: 400ms;
|
||||||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
will-change: transform, opacity;
|
will-change: transform, opacity;
|
||||||
|
|||||||
@@ -182,7 +182,7 @@ ul.user-stack-list {
|
|||||||
border: 1px solid var(--border-color-light);
|
border: 1px solid var(--border-color-light);
|
||||||
border-radius: var(--border-radius-base);
|
border-radius: var(--border-radius-base);
|
||||||
padding: var(--spacing-5xs) 0;
|
padding: var(--spacing-5xs) 0;
|
||||||
box-shadow: 0px 2px 8px 0px #441c171a;
|
box-shadow: 0 2px 8px 0 #441c171a;
|
||||||
background-color: var(--color-background-xlight);
|
background-color: var(--color-background-xlight);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -491,7 +491,7 @@
|
|||||||
--color-configurable-node-name: var(--color-text-dark);
|
--color-configurable-node-name: var(--color-text-dark);
|
||||||
--color-secondary-link: var(--prim-color-secondary-tint-200);
|
--color-secondary-link: var(--prim-color-secondary-tint-200);
|
||||||
--color-secondary-link-hover: var(--prim-color-secondary-tint-100);
|
--color-secondary-link-hover: var(--prim-color-secondary-tint-100);
|
||||||
//Params
|
// Params
|
||||||
--color-icon-base: var(--color-text-light);
|
--color-icon-base: var(--color-text-light);
|
||||||
--color-icon-hover: var(--prim-color-primary);
|
--color-icon-hover: var(--prim-color-primary);
|
||||||
|
|
||||||
|
|||||||
@@ -166,8 +166,8 @@
|
|||||||
--color-node-icon-green: #108e49;
|
--color-node-icon-green: #108e49;
|
||||||
--color-node-icon-dark-green: #157562;
|
--color-node-icon-dark-green: #157562;
|
||||||
--color-node-icon-azure: #54b8c9;
|
--color-node-icon-azure: #54b8c9;
|
||||||
--color-node-icon-purple: #553399;
|
--color-node-icon-purple: #539;
|
||||||
--color-node-icon-crimson: #772244;
|
--color-node-icon-crimson: #724;
|
||||||
|
|
||||||
// Expressions, autocomplete, infobox
|
// Expressions, autocomplete, infobox
|
||||||
--color-valid-resolvable-foreground: var(--prim-color-alt-a);
|
--color-valid-resolvable-foreground: var(--prim-color-alt-a);
|
||||||
@@ -657,7 +657,7 @@
|
|||||||
--spacing-4xl: 8rem;
|
--spacing-4xl: 8rem;
|
||||||
--spacing-5xl: 16rem;
|
--spacing-5xl: 16rem;
|
||||||
|
|
||||||
//Params
|
// Params
|
||||||
--color-icon-base: var(--color-text-light);
|
--color-icon-base: var(--color-text-light);
|
||||||
--color-icon-hover: var(--prim-color-primary);
|
--color-icon-hover: var(--prim-color-primary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -122,7 +122,7 @@
|
|||||||
|
|
||||||
& .el-alert__description {
|
& .el-alert__description {
|
||||||
font-size: var.$alert-description-font-size;
|
font-size: var.$alert-description-font-size;
|
||||||
margin: 5px 0 0 0;
|
margin: 5px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mixins.e(closebtn) {
|
@include mixins.e(closebtn) {
|
||||||
|
|||||||
@@ -1,7 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
|
|
||||||
@include mixins.b(aside) {
|
|
||||||
overflow: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use 'mixins/utils';
|
|
||||||
@use './common/var';
|
|
||||||
@use './input.scss';
|
|
||||||
@use './scrollbar.scss';
|
|
||||||
@use './popper';
|
|
||||||
|
|
||||||
@include mixins.b(autocomplete) {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(autocomplete-suggestion) {
|
|
||||||
margin: 5px 0;
|
|
||||||
box-shadow: var.$box-shadow-light;
|
|
||||||
border-radius: var(--border-radius-base);
|
|
||||||
border: 1px solid var(--border-color-base);
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: var.$color-white;
|
|
||||||
|
|
||||||
@include mixins.e(wrap) {
|
|
||||||
max-height: 280px;
|
|
||||||
padding: 10px 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(list) {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
& li {
|
|
||||||
padding: 0 20px;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 34px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
font-size: var.$font-size-base;
|
|
||||||
list-style: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var.$select-option-hover-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.highlighted {
|
|
||||||
background-color: var.$select-option-hover-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.divider {
|
|
||||||
margin-top: 6px;
|
|
||||||
border-top: 1px solid var.$color-black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.divider:last-child {
|
|
||||||
margin-bottom: -6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(loading) {
|
|
||||||
li {
|
|
||||||
text-align: center;
|
|
||||||
height: 100px;
|
|
||||||
line-height: 100px;
|
|
||||||
font-size: 20px;
|
|
||||||
color: var(--color-text-light);
|
|
||||||
@include utils.utils-vertical-center;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var.$color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .el-icon-loading {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(avatar) {
|
|
||||||
display: inline-block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
color: var.$avatar-font-color;
|
|
||||||
background: var.$avatar-background-color;
|
|
||||||
width: var.$avatar-large-size;
|
|
||||||
height: var.$avatar-large-size;
|
|
||||||
line-height: var.$avatar-large-size;
|
|
||||||
font-size: var.$avatar-text-font-size;
|
|
||||||
|
|
||||||
> img {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(circle) {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(square) {
|
|
||||||
border-radius: var.$avatar-border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(icon) {
|
|
||||||
font-size: var.$avatar-icon-font-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(large) {
|
|
||||||
width: var.$avatar-large-size;
|
|
||||||
height: var.$avatar-large-size;
|
|
||||||
line-height: var.$avatar-large-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(medium) {
|
|
||||||
width: var.$avatar-medium-size;
|
|
||||||
height: var.$avatar-medium-size;
|
|
||||||
line-height: var.$avatar-medium-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(small) {
|
|
||||||
width: var.$avatar-small-size;
|
|
||||||
height: var.$avatar-small-size;
|
|
||||||
line-height: var.$avatar-small-size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(backtop) {
|
|
||||||
position: fixed;
|
|
||||||
background-color: var.$backtop-background-color;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
color: var.$backtop-font-color;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 20px;
|
|
||||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 5;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var.$backtop-hover-background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
@forward 'common/var.scss';
|
@forward 'common/var.scss';
|
||||||
@import 'common/transition.scss';
|
@use 'common/transition.scss';
|
||||||
@import 'icon.scss';
|
@use 'icon.scss';
|
||||||
|
|||||||
@@ -1,57 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use 'mixins/utils';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(breadcrumb) {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1;
|
|
||||||
@include utils.utils-clearfix;
|
|
||||||
|
|
||||||
@include mixins.e(separator) {
|
|
||||||
margin: 0 9px;
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
color: var(--color-text-lighter);
|
|
||||||
|
|
||||||
&[class*='icon'] {
|
|
||||||
margin: 0 6px;
|
|
||||||
font-weight: var(--font-weight-regular);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(item) {
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
@include mixins.e(inner) {
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
|
|
||||||
&.is-link,
|
|
||||||
& a {
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var.$color-transition-base;
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
.el-breadcrumb__inner,
|
|
||||||
.el-breadcrumb__inner a {
|
|
||||||
&,
|
|
||||||
&:hover {
|
|
||||||
font-weight: var(--font-weight-regular);
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-breadcrumb__separator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
@use 'button-group';
|
|
||||||
|
|
||||||
@include mixins.b(calendar) {
|
|
||||||
background-color: var(--color-foreground-xlight);
|
|
||||||
|
|
||||||
@include mixins.e(header) {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-bottom: var.$table-border;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(title) {
|
|
||||||
color: #000000;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(body) {
|
|
||||||
padding: 12px 20px 35px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(calendar-table) {
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
thead th {
|
|
||||||
padding: 12px 0;
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
font-weight: var(--font-weight-regular);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.is-range) {
|
|
||||||
td.prev,
|
|
||||||
td.next {
|
|
||||||
color: var(--color-text-lighter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
border-bottom: var.$calendar-border;
|
|
||||||
border-right: var.$calendar-border;
|
|
||||||
vertical-align: top;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
|
|
||||||
@include mixins.when(selected) {
|
|
||||||
background-color: var.$calendar-selected-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(today) {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:first-child td {
|
|
||||||
border-top: var.$calendar-border;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr td:first-child {
|
|
||||||
border-left: var.$calendar-border;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.el-calendar-table__row--hide-border td {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(calendar-day) {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 8px;
|
|
||||||
height: var.$calendar-cell-width;
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: var.$calendar-selected-background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(carousel) {
|
|
||||||
@include mixins.e(item) {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: #{var.$index-normal - 1};
|
|
||||||
|
|
||||||
@include mixins.when(active) {
|
|
||||||
z-index: #{var.$index-normal + 1};
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(animating) {
|
|
||||||
transition: transform 0.4s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(card) {
|
|
||||||
width: 50%;
|
|
||||||
transition: transform 0.4s ease-in-out;
|
|
||||||
&.is-in-stage {
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: var.$index-normal;
|
|
||||||
&:hover .el-carousel__mask,
|
|
||||||
&.is-hover .el-carousel__mask {
|
|
||||||
opacity: 0.12;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.is-active {
|
|
||||||
z-index: #{var.$index-normal + 1};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(mask) {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: var.$color-white;
|
|
||||||
opacity: 0.24;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,161 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(carousel) {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
@include mixins.m(horizontal) {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(vertical) {
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(container) {
|
|
||||||
position: relative;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(arrow) {
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
height: var.$carousel-arrow-size;
|
|
||||||
width: var.$carousel-arrow-size;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.3s;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var.$carousel-arrow-background;
|
|
||||||
color: var.$color-white;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
z-index: 10;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
text-align: center;
|
|
||||||
font-size: var.$carousel-arrow-font-size;
|
|
||||||
|
|
||||||
@include mixins.m(left) {
|
|
||||||
left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(right) {
|
|
||||||
right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var.$carousel-arrow-hover-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
& i {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(indicators) {
|
|
||||||
position: absolute;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
z-index: #{var.$index-normal + 1};
|
|
||||||
|
|
||||||
@include mixins.m(horizontal) {
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(vertical) {
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(outside) {
|
|
||||||
bottom: #{var.$carousel-indicator-height + var.$carousel-indicator-padding-vertical * 2};
|
|
||||||
text-align: center;
|
|
||||||
position: static;
|
|
||||||
transform: none;
|
|
||||||
.el-carousel__indicator:hover button {
|
|
||||||
opacity: 0.64;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: var.$carousel-indicator-out-color;
|
|
||||||
opacity: 0.24;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(labels) {
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: none;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.el-carousel__button {
|
|
||||||
height: auto;
|
|
||||||
width: auto;
|
|
||||||
padding: 2px 18px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-carousel__indicator {
|
|
||||||
padding: 6px 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(indicator) {
|
|
||||||
background-color: transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover button {
|
|
||||||
opacity: 0.72;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(horizontal) {
|
|
||||||
display: inline-block;
|
|
||||||
padding: var.$carousel-indicator-padding-vertical var.$carousel-indicator-padding-horizontal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(vertical) {
|
|
||||||
padding: var.$carousel-indicator-padding-horizontal var.$carousel-indicator-padding-vertical;
|
|
||||||
.el-carousel__button {
|
|
||||||
width: var.$carousel-indicator-height;
|
|
||||||
height: #{var.$carousel-indicator-width * 0.5};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(active) {
|
|
||||||
button {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(button) {
|
|
||||||
display: block;
|
|
||||||
opacity: 0.48;
|
|
||||||
width: var.$carousel-indicator-width;
|
|
||||||
height: var.$carousel-indicator-height;
|
|
||||||
background-color: var.$color-white;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-arrow-left-enter-from,
|
|
||||||
.carousel-arrow-left-leave-active {
|
|
||||||
transform: translateY(-50%) translateX(-10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-arrow-right-enter-from,
|
|
||||||
.carousel-arrow-right-leave-active {
|
|
||||||
transform: translateY(-50%) translateX(10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
@use './checkbox';
|
|
||||||
@use './radio';
|
|
||||||
@use './scrollbar';
|
|
||||||
|
|
||||||
@include mixins.b(cascader-panel) {
|
|
||||||
display: flex;
|
|
||||||
border-radius: var.$cascader-menu-radius;
|
|
||||||
font-size: var.$cascader-menu-font-size;
|
|
||||||
|
|
||||||
@include mixins.when(bordered) {
|
|
||||||
border: var.$cascader-menu-border;
|
|
||||||
border-radius: var.$cascader-menu-radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(cascader-menu) {
|
|
||||||
min-width: 180px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: var.$cascader-menu-font-color;
|
|
||||||
border-right: var.$cascader-menu-border;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-right: none;
|
|
||||||
.el-cascader-node {
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(wrap) {
|
|
||||||
height: 204px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(list) {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 6px 0;
|
|
||||||
list-style: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(hover-zone) {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(empty-text) {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
text-align: center;
|
|
||||||
color: var.$cascader-color-empty;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(cascader-node) {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 30px 0 20px;
|
|
||||||
height: 34px;
|
|
||||||
line-height: 34px;
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
&.is-selectable.in-active-path {
|
|
||||||
color: var.$cascader-menu-font-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.in-active-path,
|
|
||||||
&.is-selectable.in-checked-path,
|
|
||||||
&.is-active {
|
|
||||||
color: var.$cascader-menu-selected-font-color;
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.is-disabled) {
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background: var.$cascader-node-background-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(disabled) {
|
|
||||||
color: var.$cascader-node-color-disabled;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(prefix) {
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(postfix) {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(label) {
|
|
||||||
flex: 1;
|
|
||||||
padding: 0 10px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .el-radio {
|
|
||||||
margin-right: 0;
|
|
||||||
|
|
||||||
.el-radio__label {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,183 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
@use './input';
|
|
||||||
@use './popper';
|
|
||||||
@use './tag';
|
|
||||||
@use './cascader-panel';
|
|
||||||
|
|
||||||
@include mixins.b(cascader) {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
font-size: var.$font-size-base;
|
|
||||||
line-height: var.$input-height;
|
|
||||||
|
|
||||||
&:not(.is-disabled):hover {
|
|
||||||
.el-input__inner {
|
|
||||||
cursor: pointer;
|
|
||||||
border-color: var.$input-hover-border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.el-input__inner {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: var.$input-focus-border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-icon-arrow-down {
|
|
||||||
transition: transform 0.3s;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
@include mixins.when(reverse) {
|
|
||||||
transform: rotateZ(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-icon-circle-close:hover {
|
|
||||||
color: var.$input-clear-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(focus) {
|
|
||||||
.el-input__inner {
|
|
||||||
border-color: var.$input-focus-border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(medium) {
|
|
||||||
font-size: var.$input-medium-font-size;
|
|
||||||
line-height: var.$input-medium-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(small) {
|
|
||||||
font-size: var.$input-small-font-size;
|
|
||||||
line-height: var.$input-small-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(mini) {
|
|
||||||
font-size: var.$input-mini-font-size;
|
|
||||||
line-height: var.$input-mini-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(disabled) {
|
|
||||||
.el-cascader__label {
|
|
||||||
z-index: #{var.$index-normal + 1};
|
|
||||||
color: var.$disabled-color-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(dropdown) {
|
|
||||||
margin: 5px 0;
|
|
||||||
font-size: var.$cascader-menu-font-size;
|
|
||||||
background: var.$cascader-menu-fill;
|
|
||||||
border: var.$cascader-menu-border;
|
|
||||||
border-radius: var.$cascader-menu-radius;
|
|
||||||
box-shadow: var.$cascader-menu-shadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(tags) {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 30px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
line-height: normal;
|
|
||||||
text-align: left;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.el-tag {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 2px 0 2px 6px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
background: var.$cascader-tag-background;
|
|
||||||
|
|
||||||
&:not(.is-hit) {
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
> span {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-icon-close {
|
|
||||||
flex: none;
|
|
||||||
background-color: var(--color-text-lighter);
|
|
||||||
color: var.$color-white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-text-light);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(suggestion-panel) {
|
|
||||||
border-radius: var.$cascader-menu-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(suggestion-list) {
|
|
||||||
max-height: 204px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 6px 0;
|
|
||||||
font-size: var.$font-size-base;
|
|
||||||
color: var.$cascader-menu-font-color;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(suggestion-item) {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
height: 34px;
|
|
||||||
padding: 0 15px;
|
|
||||||
text-align: left;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background: var.$cascader-node-background-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-checked {
|
|
||||||
color: var.$cascader-menu-selected-font-color;
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
}
|
|
||||||
|
|
||||||
> span {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(empty-text) {
|
|
||||||
margin: 10px 0;
|
|
||||||
color: var.$cascader-color-empty;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(search-input) {
|
|
||||||
flex: 1;
|
|
||||||
height: 24px;
|
|
||||||
min-width: 60px;
|
|
||||||
margin: 2px 0 2px 15px;
|
|
||||||
padding: 0;
|
|
||||||
color: var.$cascader-menu-font-color;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--color-text-lighter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -223,7 +223,10 @@
|
|||||||
|
|
||||||
@include mixins.e(link-btn) {
|
@include mixins.e(link-btn) {
|
||||||
@include button.button-small();
|
@include button.button-small();
|
||||||
margin-right: var(--spacing-2xs);
|
|
||||||
|
& {
|
||||||
|
margin-right: var(--spacing-2xs);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -36,7 +36,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: 1px solid var.$datepicker-inner-border-color;
|
border-bottom: 1px solid var.$datepicker-inner-border-color;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 8px 5px 5px 5px;
|
padding: 8px 5px 5px;
|
||||||
display: table;
|
display: table;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|||||||
@@ -72,7 +72,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: 1px solid var.$datepicker-inner-border-color;
|
border-bottom: 1px solid var.$datepicker-inner-border-color;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 8px 5px 5px 5px;
|
padding: 8px 5px 5px;
|
||||||
display: table;
|
display: table;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
td {
|
td {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 8px 0px;
|
padding: 8px 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
& div {
|
& div {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
|||||||
@@ -100,12 +100,14 @@
|
|||||||
@include button.button-small();
|
@include button.button-small();
|
||||||
@include button.button-round();
|
@include button.button-round();
|
||||||
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-left: var(--spacing-2xs);
|
|
||||||
|
|
||||||
&.is-plain {
|
&.is-plain {
|
||||||
@include button.button-just-primary();
|
@include button.button-just-primary();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: var(--spacing-2xs);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,47 +0,0 @@
|
|||||||
@use './common/var';
|
|
||||||
@use 'mixins/mixins';
|
|
||||||
|
|
||||||
@include mixins.b(divider) {
|
|
||||||
background-color: var(--border-color-base);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
@include mixins.m(horizontal) {
|
|
||||||
display: block;
|
|
||||||
height: 1px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 24px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(vertical) {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1px;
|
|
||||||
height: 1em;
|
|
||||||
margin: 0 8px;
|
|
||||||
vertical-align: middle;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(text) {
|
|
||||||
position: absolute;
|
|
||||||
background-color: var.$color-white;
|
|
||||||
padding: 0 20px;
|
|
||||||
font-weight: var(--font-weight-medium);
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
@include mixins.when(left) {
|
|
||||||
left: 20px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(center) {
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(right) {
|
|
||||||
right: 20px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -9,7 +9,7 @@ $directions: rtl, ltr, ttb, btt;
|
|||||||
background-color: var.$dialog-background-color;
|
background-color: var.$dialog-background-color;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-shadow: 0px 6px 16px rgb(68 28 23 / 6%);
|
box-shadow: 0 6px 16px rgb(68 28 23 / 6%);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
@@ -123,15 +123,7 @@ $directions: rtl, ltr, ttb, btt;
|
|||||||
&-enter-from,
|
&-enter-from,
|
||||||
&-leave-to {
|
&-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
|
||||||
|
|
||||||
&-enter-to,
|
|
||||||
&-leave-from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-enter-from,
|
|
||||||
&-leave-to {
|
|
||||||
@each $direction in $directions {
|
@each $direction in $directions {
|
||||||
.#{$direction} {
|
.#{$direction} {
|
||||||
@if $direction == ltr {
|
@if $direction == ltr {
|
||||||
@@ -152,4 +144,9 @@ $directions: rtl, ltr, ttb, btt;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-enter-to,
|
||||||
|
&-leave-from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(footer) {
|
|
||||||
padding: var.$footer-padding;
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
float: none;
|
float: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0 0 10px 0;
|
padding: 0 0 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include mixins.m(inline) {
|
@include mixins.m(inline) {
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(header) {
|
|
||||||
padding: var.$header-padding;
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
@@ -1,176 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
%size {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(image) {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@include mixins.e(inner) {
|
|
||||||
@extend %size;
|
|
||||||
vertical-align: top;
|
|
||||||
|
|
||||||
@include mixins.m(center) {
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(placeholder) {
|
|
||||||
@extend %size;
|
|
||||||
background: var.$background-color-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(error) {
|
|
||||||
@extend %size;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 14px;
|
|
||||||
background: var.$background-color-base;
|
|
||||||
color: var(--color-text-lighter);
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(preview) {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(image-viewer) {
|
|
||||||
@include mixins.e(wrapper) {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(btn) {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.8;
|
|
||||||
cursor: pointer;
|
|
||||||
box-sizing: border-box;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(close) {
|
|
||||||
top: 40px;
|
|
||||||
right: 40px;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--color-foreground-xlight);
|
|
||||||
background-color: #606266;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(canvas) {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(actions) {
|
|
||||||
left: 50%;
|
|
||||||
bottom: 30px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 282px;
|
|
||||||
height: 44px;
|
|
||||||
padding: 0 23px;
|
|
||||||
background-color: #606266;
|
|
||||||
border-color: var(--color-foreground-xlight);
|
|
||||||
border-radius: 22px;
|
|
||||||
|
|
||||||
@include mixins.e(actions__inner) {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
text-align: justify;
|
|
||||||
cursor: default;
|
|
||||||
font-size: 23px;
|
|
||||||
color: var(--color-foreground-xlight);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(prev) {
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--color-foreground-xlight);
|
|
||||||
background-color: #606266;
|
|
||||||
border-color: var(--color-foreground-xlight);
|
|
||||||
left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(next) {
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--color-foreground-xlight);
|
|
||||||
background-color: #606266;
|
|
||||||
border-color: var(--color-foreground-xlight);
|
|
||||||
right: 40px;
|
|
||||||
text-indent: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(mask) {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0.5;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewer-fade-enter-active {
|
|
||||||
animation: viewer-fade-in 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewer-fade-leave-active {
|
|
||||||
animation: viewer-fade-out 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes viewer-fade-in {
|
|
||||||
0% {
|
|
||||||
transform: translate3d(0, -20px, 0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes viewer-fade-out {
|
|
||||||
0% {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate3d(0, -20px, 0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -7,82 +7,42 @@
|
|||||||
@use './pagination.scss';
|
@use './pagination.scss';
|
||||||
@use './dialog.scss';
|
@use './dialog.scss';
|
||||||
@use './display.scss';
|
@use './display.scss';
|
||||||
// @use "./autocomplete.scss";
|
|
||||||
@use './dropdown.scss';
|
@use './dropdown.scss';
|
||||||
@use './dropdown-menu.scss';
|
|
||||||
@use './dropdown-item.scss';
|
|
||||||
@use './menu.scss';
|
@use './menu.scss';
|
||||||
@use './submenu.scss';
|
|
||||||
@use './menu-item.scss';
|
|
||||||
// @use "./menu-item-group.scss";
|
|
||||||
@use './input.scss';
|
@use './input.scss';
|
||||||
@use './input-number.scss';
|
@use './input-number.scss';
|
||||||
@use './radio.scss';
|
@use './radio.scss';
|
||||||
@use './radio-group.scss';
|
@use './radio-group.scss';
|
||||||
@use './radio-button.scss';
|
@use './radio-button.scss';
|
||||||
@use './checkbox.scss';
|
@use './checkbox.scss';
|
||||||
// @use "./checkbox-button.scss";
|
|
||||||
// @use "./checkbox-group.scss";
|
|
||||||
@use './switch.scss';
|
@use './switch.scss';
|
||||||
@use './select.scss';
|
@use './select.scss';
|
||||||
@use './skeleton.scss';
|
@use './skeleton.scss';
|
||||||
// @use "./button-group.scss";
|
@use './button-group.scss';
|
||||||
@use './table.scss';
|
@use './table.scss';
|
||||||
@use './table-column.scss';
|
@use './table-column.scss';
|
||||||
@use './date-picker.scss';
|
@use './date-picker.scss';
|
||||||
// @use "./time-select.scss";
|
|
||||||
// @use "./time-picker.scss";
|
|
||||||
@use './popover.scss';
|
@use './popover.scss';
|
||||||
//@use './tooltip.scss';
|
@use './tooltip.scss';
|
||||||
@use './message-box.scss';
|
@use './message-box.scss';
|
||||||
// @use "./breadcrumb.scss";
|
|
||||||
// @use "./breadcrumb-item.scss";
|
|
||||||
@use './form.scss';
|
@use './form.scss';
|
||||||
@use './form-item.scss';
|
|
||||||
@use './tabs.scss';
|
@use './tabs.scss';
|
||||||
@use './tab-pane.scss';
|
|
||||||
@use './tag.scss';
|
@use './tag.scss';
|
||||||
// @use "./tree.scss";
|
@use './tree.scss';
|
||||||
@use './alert.scss';
|
@use './alert.scss';
|
||||||
@use './notification.scss';
|
@use './notification.scss';
|
||||||
// @use "./slider.scss";
|
|
||||||
@use './loading.scss';
|
@use './loading.scss';
|
||||||
@use './row.scss';
|
@use './row.scss';
|
||||||
@use './col.scss';
|
@use './col.scss';
|
||||||
// @use "./upload.scss";
|
@use './progress.scss';
|
||||||
// @use "./progress.scss";
|
|
||||||
// @use "./spinner.scss";
|
|
||||||
@use './message.scss';
|
@use './message.scss';
|
||||||
@use './badge.scss';
|
@use './badge.scss';
|
||||||
@use './card.scss';
|
@use './card.scss';
|
||||||
// @use "./rate.scss";
|
@use './scrollbar.scss';
|
||||||
// @use "./steps.scss";
|
@use './collapse.scss';
|
||||||
// @use "./step.scss";
|
|
||||||
// @use "./carousel.scss";
|
|
||||||
// @use "./scrollbar.scss";
|
|
||||||
// @use "./carousel-item.scss";
|
|
||||||
// @use "./collapse.scss";
|
|
||||||
// @use "./collapse-item.scss";
|
|
||||||
// @use "./cascader.scss";
|
|
||||||
@use './color-picker.scss';
|
@use './color-picker.scss';
|
||||||
@use './transfer.scss';
|
@use './transfer.scss';
|
||||||
@use './container.scss';
|
@use './container.scss';
|
||||||
// @use "./header.scss";
|
|
||||||
// @use "./aside.scss";
|
|
||||||
// @use "./main.scss";
|
|
||||||
// @use "./footer.scss";
|
|
||||||
// @use "./timeline.scss";
|
|
||||||
// @use "./timeline-item.scss";
|
|
||||||
// @use "./link.scss";
|
|
||||||
// @use "./divider.scss";
|
|
||||||
// @use "./image.scss";
|
|
||||||
// @use "./calendar.scss";
|
|
||||||
// @use "./backtop.scss";
|
|
||||||
// @use "./infinite-scroll.scss";
|
|
||||||
// @use "./page-header.scss";
|
|
||||||
// @use "./cascader-panel.scss";
|
|
||||||
// @use "./avatar.scss";
|
|
||||||
@use './drawer.scss';
|
@use './drawer.scss';
|
||||||
@use './popper.scss';
|
@use './popper.scss';
|
||||||
// @use "./popconfirm.scss";
|
|
||||||
@use './utilities/index.scss';
|
@use './utilities/index.scss';
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
@include mixins.e(inner) {
|
@include mixins.e(inner) {
|
||||||
display: block;
|
display: block;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
padding: 8px 12px 5px 12px;
|
padding: 8px 12px 5px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -1,80 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
$typeMap: (
|
|
||||||
primary: var.$link-primary-font-color,
|
|
||||||
danger: var.$link-danger-font-color,
|
|
||||||
success: var.$link-success-font-color,
|
|
||||||
warning: var.$link-warning-font-color,
|
|
||||||
info: var.$link-info-font-color,
|
|
||||||
);
|
|
||||||
|
|
||||||
@include mixins.b(link) {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
font-size: var.$link-font-size;
|
|
||||||
font-weight: var.$link-font-weight;
|
|
||||||
|
|
||||||
@include mixins.when(underline) {
|
|
||||||
&:hover:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 0;
|
|
||||||
bottom: 0;
|
|
||||||
border-bottom: 1px solid var.$link-default-active-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(disabled) {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
& [class*='el-icon-'] {
|
|
||||||
& + span {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.el-link--default {
|
|
||||||
color: var.$link-default-font-color;
|
|
||||||
&:hover {
|
|
||||||
color: var.$link-default-active-color;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
border-color: var.$link-default-active-color;
|
|
||||||
}
|
|
||||||
@include mixins.when(disabled) {
|
|
||||||
color: var.$link-disabled-font-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $type, $primaryColor in $typeMap {
|
|
||||||
&.el-link--#{$type} {
|
|
||||||
color: $primaryColor;
|
|
||||||
&:hover {
|
|
||||||
color: var.$color-primary-light-3;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
border-color: $primaryColor;
|
|
||||||
}
|
|
||||||
@include mixins.when(disabled) {
|
|
||||||
color: var.$color-primary-light-6;
|
|
||||||
}
|
|
||||||
@include mixins.when(underline) {
|
|
||||||
&:hover:after {
|
|
||||||
border-color: $primaryColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(main) {
|
|
||||||
// IE11 supports the <main> element partially https://caniuse.com/#search=main
|
|
||||||
display: block;
|
|
||||||
flex: 1;
|
|
||||||
flex-basis: auto;
|
|
||||||
overflow: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: var.$main-padding;
|
|
||||||
}
|
|
||||||
@@ -156,9 +156,6 @@
|
|||||||
}
|
}
|
||||||
//
|
//
|
||||||
& .btn--cancel {
|
& .btn--cancel {
|
||||||
@include button.button-small();
|
|
||||||
@include button.button-outline;
|
|
||||||
|
|
||||||
--button-active-background-color: var(--color-primary-tint-2);
|
--button-active-background-color: var(--color-primary-tint-2);
|
||||||
--button-active-color: var(--color-primary);
|
--button-active-color: var(--color-primary);
|
||||||
--button-active-border-color: var(--color-primary);
|
--button-active-border-color: var(--color-primary);
|
||||||
@@ -166,6 +163,9 @@
|
|||||||
--button-hover-color: var(--color-primary);
|
--button-hover-color: var(--color-primary);
|
||||||
--button-hover-border-color: var(--color-primary);
|
--button-hover-border-color: var(--color-primary);
|
||||||
--button-focus-outline-color: var(--color-primary-tint-1);
|
--button-focus-outline-color: var(--color-primary-tint-1);
|
||||||
|
|
||||||
|
@include button.button-small();
|
||||||
|
@include button.button-outline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,17 @@
|
|||||||
@use '../common/var';
|
@use '../common/var';
|
||||||
|
@use 'sass:map';
|
||||||
|
@use 'sass:string';
|
||||||
|
|
||||||
@mixin breakpoint($name) {
|
@mixin breakpoint($name) {
|
||||||
@if map-has-key(var.$breakpoints-spec, $name) {
|
@if map.has-key(var.$breakpoints-spec, $name) {
|
||||||
$query: map-get(var.$breakpoints-spec, $name);
|
$query: map.get(var.$breakpoints-spec, $name);
|
||||||
$media-query: '';
|
$media-query: '';
|
||||||
|
|
||||||
@each $key, $value in $query {
|
@each $key, $value in $query {
|
||||||
$media-query: '#{$media-query} and (#{$key}: #{$value})';
|
$media-query: '#{$media-query} and (#{$key}: #{$value})';
|
||||||
}
|
}
|
||||||
|
|
||||||
$media-query: unquote(str-slice($media-query, 6)); // Remove the initial ' and '
|
$media-query: string.unquote(string.slice($media-query, 6)); // Remove the initial ' and '
|
||||||
|
|
||||||
@media screen and #{$media-query} {
|
@media screen and #{$media-query} {
|
||||||
@content;
|
@content;
|
||||||
|
|||||||
@@ -37,9 +37,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@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}));
|
color: $color;
|
||||||
border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
|
background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
|
||||||
|
border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
|
||||||
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
|
background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
|
||||||
@@ -79,16 +81,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin button-size($padding-vertical, $padding-horizontal, $font-size) {
|
@mixin button-size($padding-vertical, $padding-horizontal, $font-size) {
|
||||||
padding: $padding-vertical $padding-horizontal;
|
|
||||||
font-size: $font-size;
|
|
||||||
|
|
||||||
&.is-round {
|
&.is-round {
|
||||||
padding: $padding-vertical $padding-horizontal;
|
padding: $padding-vertical $padding-horizontal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& {
|
||||||
|
padding: $padding-vertical $padding-horizontal;
|
||||||
|
font-size: $font-size;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin button-round() {
|
@mixin button-round() {
|
||||||
--button-border-radius: 20px;
|
& {
|
||||||
|
--button-border-radius: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ignore plain overrides
|
// ignore plain overrides
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
@forward 'breakpoints';
|
@forward 'breakpoints';
|
||||||
@forward 'button';
|
@forward 'button' hide $B, $E;
|
||||||
@forward 'config';
|
@forward 'config';
|
||||||
@forward 'function';
|
@forward 'function';
|
||||||
@forward 'mixins';
|
@forward 'mixins';
|
||||||
|
|||||||
@@ -4,6 +4,10 @@
|
|||||||
@use '../common/var';
|
@use '../common/var';
|
||||||
@use 'config';
|
@use 'config';
|
||||||
|
|
||||||
|
// Module-level variables for BEM mixins
|
||||||
|
$B: null;
|
||||||
|
$E: null;
|
||||||
|
|
||||||
/* Break-points
|
/* Break-points
|
||||||
-------------------------- */
|
-------------------------- */
|
||||||
@mixin res($key, $map: var.$breakpoints) {
|
@mixin res($key, $map: var.$breakpoints) {
|
||||||
|
|||||||
@@ -52,7 +52,7 @@
|
|||||||
@include mixins.e(content) {
|
@include mixins.e(content) {
|
||||||
font-size: var.$notification-content-font-size;
|
font-size: var.$notification-content-font-size;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 6px 0 0 0;
|
margin: 6px 0 0;
|
||||||
color: var.$notification-content-color;
|
color: var.$notification-content-color;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
|
|
||||||
|
|||||||
@@ -1,41 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(page-header) {
|
|
||||||
display: flex;
|
|
||||||
line-height: 24px;
|
|
||||||
|
|
||||||
@include mixins.e(left) {
|
|
||||||
display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 40px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 16px;
|
|
||||||
right: -20px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: var(--border-color-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-icon-back {
|
|
||||||
font-size: 18px;
|
|
||||||
margin-right: 6px;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(title) {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: var(--font-weight-medium);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(content) {
|
|
||||||
font-size: 18px;
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -312,7 +312,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//@mixin pagination-button {
|
// @mixin pagination-button {
|
||||||
// display: flex;
|
// display: flex;
|
||||||
// justify-content: center;
|
// justify-content: center;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
@@ -363,9 +363,9 @@
|
|||||||
// outline: 1px solid getCssVar('pagination-hover-color');
|
// outline: 1px solid getCssVar('pagination-hover-color');
|
||||||
// outline-offset: -1px;
|
// outline-offset: -1px;
|
||||||
// }
|
// }
|
||||||
//}
|
// }
|
||||||
//
|
//
|
||||||
//@include b(pagination) {
|
// @include b(pagination) {
|
||||||
// @include set-component-css-var('pagination', $pagination);
|
// @include set-component-css-var('pagination', $pagination);
|
||||||
//
|
//
|
||||||
// white-space: nowrap;
|
// white-space: nowrap;
|
||||||
@@ -517,9 +517,9 @@
|
|||||||
// width: 100px;
|
// width: 100px;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
//}
|
// }
|
||||||
//
|
//
|
||||||
//@include b(pager) {
|
// @include b(pager) {
|
||||||
// user-select: none;
|
// user-select: none;
|
||||||
// list-style: none;
|
// list-style: none;
|
||||||
// font-size: 0;
|
// font-size: 0;
|
||||||
@@ -531,4 +531,4 @@
|
|||||||
// li {
|
// li {
|
||||||
// @include pagination-button;
|
// @include pagination-button;
|
||||||
// }
|
// }
|
||||||
//}
|
// }
|
||||||
|
|||||||
@@ -1,16 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(popconfirm) {
|
|
||||||
@include mixins.e(main) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
@include mixins.e(icon) {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
@include mixins.e(action) {
|
|
||||||
text-align: right;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(rate) {
|
|
||||||
height: var.$rate-height;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
outline-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(item) {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
font-size: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(icon) {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: var.$rate-icon-size;
|
|
||||||
margin-right: var.$rate-icon-margin;
|
|
||||||
color: var.$rate-icon-color;
|
|
||||||
transition: 0.3s;
|
|
||||||
&.hover {
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.path2 {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(decimal) {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: inline-block;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(text) {
|
|
||||||
font-size: var.$rate-font-size;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,246 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use 'mixins/utils';
|
|
||||||
@use 'input-number';
|
|
||||||
@use 'tooltip';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(slider) {
|
|
||||||
@include utils.utils-clearfix;
|
|
||||||
|
|
||||||
@include mixins.e(runway) {
|
|
||||||
width: 100%;
|
|
||||||
height: var.$slider-height;
|
|
||||||
margin: var.$slider-margin;
|
|
||||||
background-color: var.$slider-runway-background-color;
|
|
||||||
border-radius: var.$slider-border-radius;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&.show-input {
|
|
||||||
margin-right: 160px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
cursor: default;
|
|
||||||
|
|
||||||
.el-slider__bar {
|
|
||||||
background-color: var.$slider-disable-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-slider__button {
|
|
||||||
border-color: var.$slider-disable-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-slider__button-wrapper {
|
|
||||||
&:hover,
|
|
||||||
&.hover {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dragging {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-slider__button {
|
|
||||||
&:hover,
|
|
||||||
&.hover,
|
|
||||||
&.dragging {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.hover {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dragging {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(input) {
|
|
||||||
float: right;
|
|
||||||
margin-top: 3px;
|
|
||||||
width: 130px;
|
|
||||||
|
|
||||||
&.el-input-number--mini {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.el-input-number--medium {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.el-input-number--large {
|
|
||||||
margin-top: -2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(bar) {
|
|
||||||
height: var.$slider-height;
|
|
||||||
background-color: var.$slider-main-background-color;
|
|
||||||
border-top-left-radius: var.$slider-border-radius;
|
|
||||||
border-bottom-left-radius: var.$slider-border-radius;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(button-wrapper) {
|
|
||||||
height: var.$slider-button-wrapper-size;
|
|
||||||
width: var.$slider-button-wrapper-size;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1001;
|
|
||||||
top: var.$slider-button-wrapper-offset;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background-color: transparent;
|
|
||||||
text-align: center;
|
|
||||||
user-select: none;
|
|
||||||
line-height: normal;
|
|
||||||
@include utils.utils-vertical-center;
|
|
||||||
|
|
||||||
.el-tooltip {
|
|
||||||
vertical-align: middle;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.hover {
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dragging {
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(button) {
|
|
||||||
width: var.$slider-button-size;
|
|
||||||
height: var.$slider-button-size;
|
|
||||||
border: solid 2px var.$slider-main-background-color;
|
|
||||||
background-color: var.$color-white;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: 0.2s;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.hover,
|
|
||||||
&.dragging {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.hover {
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dragging {
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(stop) {
|
|
||||||
position: absolute;
|
|
||||||
height: var.$slider-height;
|
|
||||||
width: var.$slider-height;
|
|
||||||
border-radius: var.$border-radius-circle;
|
|
||||||
background-color: var.$slider-stop-background-color;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(marks) {
|
|
||||||
top: 0;
|
|
||||||
left: 12px;
|
|
||||||
width: 18px;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
@include mixins.e(marks-text) {
|
|
||||||
position: absolute;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--color-info);
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(vertical) {
|
|
||||||
position: relative;
|
|
||||||
.el-slider__runway {
|
|
||||||
width: var.$slider-height;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0 16px;
|
|
||||||
}
|
|
||||||
.el-slider__bar {
|
|
||||||
width: var.$slider-height;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 0 0 3px 3px;
|
|
||||||
}
|
|
||||||
.el-slider__button-wrapper {
|
|
||||||
top: auto;
|
|
||||||
left: var.$slider-button-wrapper-offset;
|
|
||||||
transform: translateY(50%);
|
|
||||||
}
|
|
||||||
.el-slider__stop {
|
|
||||||
transform: translateY(50%);
|
|
||||||
}
|
|
||||||
&.el-slider--with-input {
|
|
||||||
padding-bottom: #{var.$input-medium-height + 22px};
|
|
||||||
.el-slider__input {
|
|
||||||
overflow: visible;
|
|
||||||
float: none;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 22px;
|
|
||||||
width: 36px;
|
|
||||||
margin-top: 15px;
|
|
||||||
.el-input__inner {
|
|
||||||
text-align: center;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
.el-input-number__decrease,
|
|
||||||
.el-input-number__increase {
|
|
||||||
top: var.$input-small-height;
|
|
||||||
margin-top: -1px;
|
|
||||||
border: var.$input-border;
|
|
||||||
line-height: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: var.$border-transition-base;
|
|
||||||
}
|
|
||||||
.el-input-number__decrease {
|
|
||||||
width: 18px;
|
|
||||||
right: 18px;
|
|
||||||
border-bottom-left-radius: var.$input-border-radius;
|
|
||||||
}
|
|
||||||
.el-input-number__increase {
|
|
||||||
width: 19px;
|
|
||||||
border-bottom-right-radius: var.$input-border-radius;
|
|
||||||
& ~ .el-input .el-input__inner {
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.el-input-number__decrease,
|
|
||||||
.el-input-number__increase {
|
|
||||||
border-color: var.$input-hover-border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
.el-input-number__decrease,
|
|
||||||
.el-input-number__increase {
|
|
||||||
border-color: var.$input-focus-border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(marks-text) {
|
|
||||||
margin-top: 0;
|
|
||||||
left: 15px;
|
|
||||||
transform: translateY(50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
|
|
||||||
@include mixins.b(time-spinner) {
|
|
||||||
width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(spinner) {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
@include mixins.b(spinner-inner) {
|
|
||||||
animation: rotate 2s linear infinite;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
& .path {
|
|
||||||
stroke: #ececec;
|
|
||||||
stroke-linecap: round;
|
|
||||||
animation: dash 1.5s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dash {
|
|
||||||
0% {
|
|
||||||
stroke-dasharray: 1, 150;
|
|
||||||
stroke-dashoffset: 0;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
stroke-dasharray: 90, 150;
|
|
||||||
stroke-dashoffset: -35;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
stroke-dasharray: 90, 150;
|
|
||||||
stroke-dashoffset: -124;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,316 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(step) {
|
|
||||||
position: relative;
|
|
||||||
flex-shrink: 1;
|
|
||||||
|
|
||||||
@include mixins.pseudo(last-of-type) {
|
|
||||||
@include mixins.e(line) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 只有未设置 space 的情况下才自适应宽度
|
|
||||||
@include mixins.when(flex) {
|
|
||||||
flex-basis: auto !important;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e((main, description)) {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(head) {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include mixins.when(process) {
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
border-color: var(--color-text-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(wait) {
|
|
||||||
color: var(--color-text-lighter);
|
|
||||||
border-color: var(--color-text-lighter);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(success) {
|
|
||||||
color: var(--color-success);
|
|
||||||
border-color: var(--color-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(error) {
|
|
||||||
color: var(--color-danger);
|
|
||||||
border-color: var(--color-danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(finish) {
|
|
||||||
color: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(icon) {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
font-size: 14px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: var.$color-white;
|
|
||||||
transition: 0.15s ease-out;
|
|
||||||
|
|
||||||
@include mixins.when(text) {
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid;
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(icon) {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(icon-inner) {
|
|
||||||
display: inline-block;
|
|
||||||
user-select: none;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
line-height: 1;
|
|
||||||
color: inherit;
|
|
||||||
|
|
||||||
&[class*='el-icon']:not(.is-status) {
|
|
||||||
font-size: 25px;
|
|
||||||
font-weight: var(--font-weight-regular);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 组件自身表示状态的图标
|
|
||||||
@include mixins.when(status) {
|
|
||||||
transform: translateY(1px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(line) {
|
|
||||||
position: absolute;
|
|
||||||
border-color: inherit;
|
|
||||||
background-color: var(--color-text-lighter);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(line-inner) {
|
|
||||||
display: block;
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: inherit;
|
|
||||||
transition: 0.15s ease-out;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(main) {
|
|
||||||
white-space: normal;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(title) {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 38px;
|
|
||||||
|
|
||||||
@include mixins.when(process) {
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(wait) {
|
|
||||||
color: var(--color-text-lighter);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(success) {
|
|
||||||
color: var(--color-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(error) {
|
|
||||||
color: var(--color-danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(finish) {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(description) {
|
|
||||||
padding-right: 10%;
|
|
||||||
margin-top: -5px;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 20px;
|
|
||||||
font-weight: var(--font-weight-regular);
|
|
||||||
|
|
||||||
@include mixins.when(process) {
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(wait) {
|
|
||||||
color: var(--color-text-lighter);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(success) {
|
|
||||||
color: var(--color-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(error) {
|
|
||||||
color: var(--color-danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(finish) {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(horizontal) {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
@include mixins.e(line) {
|
|
||||||
height: 2px;
|
|
||||||
top: 11px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(vertical) {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
@include mixins.e(head) {
|
|
||||||
flex-grow: 0;
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(main) {
|
|
||||||
padding-left: 10px;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(title) {
|
|
||||||
line-height: 24px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(line) {
|
|
||||||
width: 2px;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(icon) {
|
|
||||||
@include mixins.when(icon) {
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(center) {
|
|
||||||
@include mixins.e(head) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(main) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(description) {
|
|
||||||
padding-left: 20%;
|
|
||||||
padding-right: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(line) {
|
|
||||||
left: 50%;
|
|
||||||
right: -50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(simple) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@include mixins.e(head) {
|
|
||||||
width: auto;
|
|
||||||
font-size: 0;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(icon) {
|
|
||||||
background: transparent;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(icon-inner) {
|
|
||||||
&[class*='el-icon']:not(.is-status) {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-status {
|
|
||||||
transform: scale(0.8) translateY(1px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(main) {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(title) {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.pseudo('not(:last-of-type)') {
|
|
||||||
@include mixins.e(title) {
|
|
||||||
max-width: 50%;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(arrow) {
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
height: 15px;
|
|
||||||
width: 1px;
|
|
||||||
background: var(--color-text-lighter);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
transform: rotate(-45deg) translateY(-4px);
|
|
||||||
transform-origin: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
transform: rotate(45deg) translateY(4px);
|
|
||||||
transform-origin: 100% 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.pseudo(last-of-type) {
|
|
||||||
@include mixins.e(arrow) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use 'common/var';
|
|
||||||
|
|
||||||
@include mixins.b(steps) {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
@include mixins.m(simple) {
|
|
||||||
padding: 13px 8%;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: var.$background-color-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(horizontal) {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(vertical) {
|
|
||||||
height: 100%;
|
|
||||||
flex-flow: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -301,7 +301,7 @@
|
|||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
}
|
}
|
||||||
.el-tabs__item.is-bottom {
|
.el-tabs__item.is-bottom {
|
||||||
margin: 0 -1px -1px -1px;
|
margin: 0 -1px -1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
@use './date-picker/picker.scss';
|
|
||||||
@use './date-picker/picker-panel.scss';
|
|
||||||
@use './date-picker/time-spinner.scss';
|
|
||||||
@use './date-picker/time-picker.scss';
|
|
||||||
@use './date-picker/time-range-picker.scss';
|
|
||||||
@use './input.scss';
|
|
||||||
@use './scrollbar.scss';
|
|
||||||
@use './popper';
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
@use './common/var';
|
|
||||||
@use './date-picker/picker.scss';
|
|
||||||
@use './date-picker/date-picker.scss';
|
|
||||||
@use './scrollbar.scss';
|
|
||||||
@use './popper';
|
|
||||||
|
|
||||||
.time-select {
|
|
||||||
margin: 5px 0;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-select .el-picker-panel__content {
|
|
||||||
max-height: 200px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-select-item {
|
|
||||||
padding: 8px 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-select-item.selected:not(.disabled) {
|
|
||||||
color: var(--color-primary);
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-select-item.disabled {
|
|
||||||
color: var.$datepicker-border-color;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-select-item:hover {
|
|
||||||
background-color: var.$background-color-base;
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(timeline-item) {
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
|
|
||||||
@include mixins.e(wrapper) {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 28px;
|
|
||||||
top: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(tail) {
|
|
||||||
position: absolute;
|
|
||||||
left: 4px;
|
|
||||||
height: 100%;
|
|
||||||
border-left: 2px solid var.$timeline-node-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(icon) {
|
|
||||||
color: var.$color-white;
|
|
||||||
font-size: var.$font-size-small;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(node) {
|
|
||||||
position: absolute;
|
|
||||||
background-color: var.$timeline-node-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@include mixins.m(normal) {
|
|
||||||
left: -1px;
|
|
||||||
width: var.$timeline-node-size-normal;
|
|
||||||
height: var.$timeline-node-size-normal;
|
|
||||||
}
|
|
||||||
@include mixins.m(large) {
|
|
||||||
left: -2px;
|
|
||||||
width: var.$timeline-node-size-large;
|
|
||||||
height: var.$timeline-node-size-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(primary) {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
@include mixins.m(success) {
|
|
||||||
background-color: var(--color-success);
|
|
||||||
}
|
|
||||||
@include mixins.m(warning) {
|
|
||||||
background-color: var(--color-warning);
|
|
||||||
}
|
|
||||||
@include mixins.m(danger) {
|
|
||||||
background-color: var(--color-danger);
|
|
||||||
}
|
|
||||||
@include mixins.m(info) {
|
|
||||||
background-color: var(--color-info);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(dot) {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(content) {
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(timestamp) {
|
|
||||||
color: var(--color-text-light);
|
|
||||||
line-height: 1;
|
|
||||||
font-size: var.$font-size-small;
|
|
||||||
|
|
||||||
@include mixins.when(top) {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
padding-top: 4px;
|
|
||||||
}
|
|
||||||
@include mixins.when(bottom) {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use './common/var';
|
|
||||||
|
|
||||||
@include mixins.b(timeline) {
|
|
||||||
margin: 0;
|
|
||||||
font-size: var.$font-size-base;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
& .el-timeline-item:last-child {
|
|
||||||
& .el-timeline-item__tail {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -3,7 +3,6 @@
|
|||||||
@use './common/var';
|
@use './common/var';
|
||||||
@use 'input';
|
@use 'input';
|
||||||
@use 'checkbox';
|
@use 'checkbox';
|
||||||
@use 'checkbox-group';
|
|
||||||
|
|
||||||
@include mixins.b(transfer) {
|
@include mixins.b(transfer) {
|
||||||
font-size: var.$font-size-base;
|
font-size: var.$font-size-base;
|
||||||
|
|||||||
@@ -1,609 +0,0 @@
|
|||||||
@use 'mixins/mixins';
|
|
||||||
@use 'progress';
|
|
||||||
@use './common/var';
|
|
||||||
@use 'mixins/utils';
|
|
||||||
|
|
||||||
@include mixins.b(upload) {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
@include mixins.e(input) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(tip) {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
margin-top: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0;
|
|
||||||
filter: alpha(opacity=0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 照片墙模式 */
|
|
||||||
@include mixins.m(picture-card) {
|
|
||||||
background-color: #fbfdff;
|
|
||||||
border: 1px dashed #c0ccda;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 148px;
|
|
||||||
height: 148px;
|
|
||||||
cursor: pointer;
|
|
||||||
line-height: 146px;
|
|
||||||
vertical-align: top;
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 28px;
|
|
||||||
color: #8c939d;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: var(--color-primary);
|
|
||||||
|
|
||||||
.el-upload-dragger {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(upload-dragger) {
|
|
||||||
background-color: var(--color-foreground-xlight);
|
|
||||||
border: 1px dashed #d9d9d9;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 360px;
|
|
||||||
height: 180px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.el-icon-upload {
|
|
||||||
font-size: 67px;
|
|
||||||
color: var(--color-text-lighter);
|
|
||||||
margin: 40px 0 16px;
|
|
||||||
line-height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .el-upload__tip {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
~ .el-upload__files {
|
|
||||||
border-top: var(--border-base);
|
|
||||||
margin-top: 7px;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload__text {
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
em {
|
|
||||||
color: var(--color-primary);
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(dragover) {
|
|
||||||
background-color: rgba(32, 159, 255, 0.06);
|
|
||||||
border: 2px dashed var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(upload-list) {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
@include mixins.e(item) {
|
|
||||||
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
line-height: 1.8;
|
|
||||||
margin-top: 5px;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.el-progress {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-progress__text {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: -13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-progress-bar {
|
|
||||||
margin-right: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .el-icon-upload-success {
|
|
||||||
color: var(--color-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-icon-close {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0.75;
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
//transform: scale(.7);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .el-icon-close-tip {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 1;
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var.$background-color-base;
|
|
||||||
|
|
||||||
.el-icon-close {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-progress__text {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(success) {
|
|
||||||
.el-upload-list__item-status-label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload-list__item-name:hover,
|
|
||||||
.el-upload-list__item-name:focus {
|
|
||||||
color: var.$link-color-hover;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus:not(:hover) {
|
|
||||||
/* 键盘focus */
|
|
||||||
.el-icon-close-tip {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.focusing):focus,
|
|
||||||
&:active {
|
|
||||||
/* click时 */
|
|
||||||
outline-width: 0;
|
|
||||||
.el-icon-close-tip {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
.el-upload-list__item-status-label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.when(disabled) {
|
|
||||||
.el-upload-list__item:hover .el-upload-list__item-status-label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(item-name) {
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
display: block;
|
|
||||||
margin-right: 40px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding-left: 4px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
transition: color 0.3s;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
[class^='el-icon'] {
|
|
||||||
height: 100%;
|
|
||||||
margin-right: 7px;
|
|
||||||
color: var(--color-text-light);
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(item-status-label) {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 0;
|
|
||||||
line-height: inherit;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(item-delete) {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(picture-card) {
|
|
||||||
margin: 0;
|
|
||||||
display: inline;
|
|
||||||
vertical-align: top;
|
|
||||||
|
|
||||||
.el-upload-list__item {
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: var(--color-foreground-xlight);
|
|
||||||
border: 1px solid #c0ccda;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 148px;
|
|
||||||
height: 148px;
|
|
||||||
margin: 0 8px 8px 0;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
.el-icon-check,
|
|
||||||
.el-icon-circle-check {
|
|
||||||
color: var.$color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-icon-close {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.el-upload-list__item-status-label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-progress__text {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload-list__item-name {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload-list__item-thumbnail {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload-list__item-status-label {
|
|
||||||
position: absolute;
|
|
||||||
right: -15px;
|
|
||||||
top: -6px;
|
|
||||||
width: 40px;
|
|
||||||
height: 24px;
|
|
||||||
background: #13ce66;
|
|
||||||
text-align: center;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 11px;
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload-list__item-actions {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
cursor: default;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--color-foreground-xlight);
|
|
||||||
opacity: 0;
|
|
||||||
font-size: 20px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
&::after {
|
|
||||||
display: inline-block;
|
|
||||||
content: '';
|
|
||||||
height: 100%;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
span + span {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload-list__item-delete {
|
|
||||||
position: static;
|
|
||||||
font-size: inherit;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-progress {
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
bottom: auto;
|
|
||||||
width: 126px;
|
|
||||||
|
|
||||||
.el-progress__text {
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.m(picture) {
|
|
||||||
.el-upload-list__item {
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 0;
|
|
||||||
background-color: var(--color-foreground-xlight);
|
|
||||||
border: 1px solid #c0ccda;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 10px 10px 10px 90px;
|
|
||||||
height: 92px;
|
|
||||||
|
|
||||||
.el-icon-check,
|
|
||||||
.el-icon-circle-check {
|
|
||||||
color: var.$color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.el-upload-list__item-status-label {
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
top: -2px;
|
|
||||||
right: -12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-progress__text {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-success {
|
|
||||||
.el-upload-list__item-name {
|
|
||||||
line-height: 70px;
|
|
||||||
margin-top: 0;
|
|
||||||
i {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload-list__item-thumbnail {
|
|
||||||
vertical-align: middle;
|
|
||||||
display: inline-block;
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
margin-left: -80px;
|
|
||||||
background-color: var.$color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload-list__item-name {
|
|
||||||
display: block;
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 70px;
|
|
||||||
line-height: 1;
|
|
||||||
position: absolute;
|
|
||||||
left: 9px;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-upload-list__item-status-label {
|
|
||||||
position: absolute;
|
|
||||||
right: -17px;
|
|
||||||
top: -7px;
|
|
||||||
width: 46px;
|
|
||||||
height: 26px;
|
|
||||||
background: #13ce66;
|
|
||||||
text-align: center;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
box-shadow: 0 1px 1px var(--color-text-light);
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 12px;
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-progress {
|
|
||||||
position: relative;
|
|
||||||
top: -7px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.b(upload-cover) {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 10;
|
|
||||||
cursor: default;
|
|
||||||
@include utils.utils-vertical-center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(label) {
|
|
||||||
position: absolute;
|
|
||||||
right: -15px;
|
|
||||||
top: -6px;
|
|
||||||
width: 40px;
|
|
||||||
height: 24px;
|
|
||||||
background: #13ce66;
|
|
||||||
text-align: center;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 11px;
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
color: var(--color-foreground-xlight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(progress) {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
position: static;
|
|
||||||
width: 243px;
|
|
||||||
|
|
||||||
+ .el-upload__inner {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(content) {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(interact) {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(#000, 0.72);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
color: var.$color-white;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
vertical-align: middle;
|
|
||||||
transition: var.$md-fade-transition;
|
|
||||||
margin-top: 60px;
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.15s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-left: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-13px);
|
|
||||||
|
|
||||||
span {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
color: var.$color-white;
|
|
||||||
display: block;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: inherit;
|
|
||||||
margin: 0 auto 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mixins.e(title) {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: var.$color-white;
|
|
||||||
height: 36px;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: var(--font-weight-regular);
|
|
||||||
text-align: left;
|
|
||||||
padding: 0 10px;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 36px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .el-upload__inner {
|
|
||||||
opacity: 0;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
@import 'float';
|
@use 'float';
|
||||||
@import 'link';
|
@use 'link';
|
||||||
@import 'list';
|
@use 'list';
|
||||||
@import 'spacing';
|
@use 'spacing';
|
||||||
@import 'typography';
|
@use 'typography';
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
import { baseConfig } from '@n8n/stylelint-config/base';
|
||||||
|
|
||||||
|
export default baseConfig;
|
||||||
@@ -12,6 +12,8 @@
|
|||||||
"dev": "pnpm serve",
|
"dev": "pnpm serve",
|
||||||
"lint": "eslint src --quiet",
|
"lint": "eslint src --quiet",
|
||||||
"lint:fix": "eslint src --fix",
|
"lint:fix": "eslint src --fix",
|
||||||
|
"lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache",
|
||||||
|
"lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache",
|
||||||
"format": "biome format --write . && prettier --write . --ignore-path ../../../.prettierignore",
|
"format": "biome format --write . && prettier --write . --ignore-path ../../../.prettierignore",
|
||||||
"format:check": "biome ci . && prettier --check . --ignore-path ../../../.prettierignore",
|
"format:check": "biome ci . && prettier --check . --ignore-path ../../../.prettierignore",
|
||||||
"serve": "cross-env VUE_APP_URL_BASE_API=http://localhost:5678/ vite --host 0.0.0.0 --port 8080 dev",
|
"serve": "cross-env VUE_APP_URL_BASE_API=http://localhost:5678/ vite --host 0.0.0.0 --port 8080 dev",
|
||||||
@@ -107,6 +109,7 @@
|
|||||||
"@faker-js/faker": "^8.0.2",
|
"@faker-js/faker": "^8.0.2",
|
||||||
"@iconify/json": "^2.2.349",
|
"@iconify/json": "^2.2.349",
|
||||||
"@n8n/eslint-config": "workspace:*",
|
"@n8n/eslint-config": "workspace:*",
|
||||||
|
"@n8n/stylelint-config": "workspace:*",
|
||||||
"@n8n/typescript-config": "workspace:*",
|
"@n8n/typescript-config": "workspace:*",
|
||||||
"@n8n/vitest-config": "workspace:*",
|
"@n8n/vitest-config": "workspace:*",
|
||||||
"@pinia/testing": "^0.1.6",
|
"@pinia/testing": "^0.1.6",
|
||||||
|
|||||||
@@ -163,7 +163,7 @@ function goToUpgradeApiKeyScopes() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.scopes-dropdown-container :global(.el-select-group__wrap:not(:last-of-type)) {
|
.scopes-dropdown-container :global(.el-select-group__wrap:not(:last-of-type)) {
|
||||||
padding: 0px;
|
padding: 0;
|
||||||
margin-bottom: var(--spacing-xs);
|
margin-bottom: var(--spacing-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const onDrop = (value: string) => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
transition: border-color 0.1s ease-in;
|
transition: border-color 0.1s ease-in;
|
||||||
box-shadow: inset 0 0 0px 1.5px var(--color-background-xlight);
|
box-shadow: inset 0 0 0 1.5px var(--color-background-xlight);
|
||||||
|
|
||||||
&:not(.active):hover {
|
&:not(.active):hover {
|
||||||
border-color: var(--color-ndv-droppable-parameter);
|
border-color: var(--color-ndv-droppable-parameter);
|
||||||
|
|||||||
@@ -748,6 +748,7 @@ async function onAskAssistantClick() {
|
|||||||
&__button {
|
&__button {
|
||||||
margin-left: var(--spacing-s);
|
margin-left: var(--spacing-s);
|
||||||
margin-bottom: var(--spacing-xs);
|
margin-bottom: var(--spacing-xs);
|
||||||
|
margin-top: var(--spacing-xs);
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
span {
|
span {
|
||||||
margin-right: var(--spacing-5xs);
|
margin-right: var(--spacing-5xs);
|
||||||
@@ -887,8 +888,4 @@ async function onAskAssistantClick() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-error-view__button {
|
|
||||||
margin-top: var(--spacing-xs);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -102,5 +102,3 @@ function getErrorTooltipUrl(column: TestTableColumn<T>, row: T): string | undefi
|
|||||||
</N8nBadge>
|
</N8nBadge>
|
||||||
</N8nTooltip>
|
</N8nTooltip>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
|
|||||||
@@ -12,5 +12,3 @@ export default {
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss"></style>
|
|
||||||
|
|||||||
@@ -83,6 +83,13 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
.body {
|
.body {
|
||||||
padding: var(--spacing-3xs);
|
padding: var(--spacing-3xs);
|
||||||
|
padding-top: 0;
|
||||||
|
padding-left: var(--spacing-2xs);
|
||||||
|
color: var(--color-text-dark);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-top: var(--spacing-2xs);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
@@ -99,15 +106,5 @@ onBeforeUnmount(() => {
|
|||||||
padding: 0 var(--spacing-2xs);
|
padding: 0 var(--spacing-2xs);
|
||||||
padding-top: var(--spacing-2xs);
|
padding-top: var(--spacing-2xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-left: var(--spacing-2xs);
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-top: var(--spacing-2xs);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -80,16 +80,16 @@ onMounted(() => {
|
|||||||
.authView {
|
.authView {
|
||||||
transform: scale(2);
|
transform: scale(2);
|
||||||
margin-bottom: var(--spacing-xl);
|
margin-bottom: var(--spacing-xl);
|
||||||
}
|
|
||||||
|
|
||||||
.logo,
|
.logo,
|
||||||
.logoText {
|
.logoText {
|
||||||
transform: scale(1.3) translateY(-2px);
|
transform: scale(1.3) translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logoText {
|
.logoText {
|
||||||
margin-left: var(--spacing-xs);
|
margin-left: var(--spacing-xs);
|
||||||
margin-right: var(--spacing-3xs);
|
margin-right: var(--spacing-3xs);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarExpanded .logo {
|
.sidebarExpanded .logo {
|
||||||
|
|||||||
@@ -303,7 +303,7 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
.textContainer {
|
.textContainer {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin: 0px;
|
margin: 0;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ onBeforeUnmount(() => {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.el-drawer__header {
|
.el-drawer__header {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 30px 30px 0 30px;
|
padding: 30px 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-drawer__body {
|
.el-drawer__body {
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user