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
|
||||
.turbo
|
||||
*.tsbuildinfo
|
||||
.stylelintcache
|
||||
*.swp
|
||||
CHANGELOG-*.md
|
||||
*.mdx
|
||||
|
||||
@@ -14,3 +14,9 @@ pre-commit:
|
||||
skip:
|
||||
- merge
|
||||
- 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:check": "turbo run format:check",
|
||||
"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:fix": "turbo run lint:fix",
|
||||
"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",
|
||||
"dev": "vite",
|
||||
"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",
|
||||
"build:backend": "tsup",
|
||||
"build:frontend": "vite build",
|
||||
@@ -45,6 +48,7 @@
|
||||
"@n8n/extension-sdk": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@n8n/stylelint-config": "workspace:*",
|
||||
"@n8n/typescript-config": "workspace:*",
|
||||
"@vitejs/plugin-vue": "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",
|
||||
"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",
|
||||
"format": "biome format --write src .storybook && prettier --write src/ --ignore-path ../../../../.prettierignore",
|
||||
"format:check": "biome ci src .storybook && prettier --check src/ --ignore-path ../../../../.prettierignore",
|
||||
"storybook": "storybook dev -p 6006 --no-open",
|
||||
@@ -48,6 +50,7 @@
|
||||
"@iconify-json/mdi": "^1.1.54",
|
||||
"@n8n/storybook": "workspace:*",
|
||||
"@n8n/eslint-config": "workspace:*",
|
||||
"@n8n/stylelint-config": "workspace:*",
|
||||
"@n8n/typescript-config": "workspace:*",
|
||||
"@n8n/vitest-config": "workspace:*",
|
||||
"@vitejs/plugin-vue": "catalog:frontend",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
--chat--color-primary-shade-100: #cf3c5c;
|
||||
--chat--color-secondary: #20b69e;
|
||||
--chat--color-secondary-shade-50: #1ca08a;
|
||||
--chat--color-white: #ffffff;
|
||||
--chat--color-white: #fff;
|
||||
--chat--color-light: #f2f4f8;
|
||||
--chat--color-light-shade-50: #e6e9f1;
|
||||
--chat--color-light-shade-100: #c2c5cc;
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
@import 'tokens';
|
||||
@import 'markdown';
|
||||
@use 'tokens';
|
||||
@use 'markdown';
|
||||
|
||||
@@ -155,6 +155,7 @@ body {
|
||||
*/
|
||||
small {
|
||||
font-size: 80%;
|
||||
opacity: 0.8; /* or some other way of differentiating it from body text */
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -389,6 +390,8 @@ body {
|
||||
max-width: 36rem;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
background: var(--background-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
/* ----- Typography ----- */
|
||||
|
||||
@@ -479,13 +482,9 @@ body {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 1em;
|
||||
opacity: 0.8; /* or some other way of differentiating it from body text */
|
||||
}
|
||||
|
||||
mark {
|
||||
background: pink; /* change to proper color, based on theme */
|
||||
padding: 0.1em 0.15em;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -508,7 +507,7 @@ body {
|
||||
blockquote {
|
||||
border-left: 0.3rem solid #7a283a;
|
||||
border-left: 0.3rem solid var(--theme);
|
||||
margin: 0.6rem 0 1.2rem 0;
|
||||
margin: 0.6rem 0 1.2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
@@ -522,13 +521,6 @@ body {
|
||||
}
|
||||
/* ----- Layout ----- */
|
||||
|
||||
body {
|
||||
background: #fefefe;
|
||||
background: var(--background-main);
|
||||
color: #1f1f1f;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #7a283a;
|
||||
color: var(--theme);
|
||||
@@ -561,11 +553,6 @@ body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: pink; /* change to proper color, based on theme */
|
||||
padding: 0.1em 0.15em;
|
||||
}
|
||||
|
||||
kbd, /* different style for kbd? */
|
||||
code {
|
||||
padding: 0.1em 0.25em;
|
||||
@@ -579,12 +566,6 @@ body {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
padding: 0 0 0.5rem 0.5rem;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.n8n-chat {
|
||||
@import 'highlight.js/styles/github';
|
||||
}
|
||||
@use 'sass:meta';
|
||||
@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');
|
||||
}
|
||||
|
||||
@import '../src/css/_tokens.scss';
|
||||
@use '../src/css/_tokens.scss';
|
||||
|
||||
@@ -18,11 +18,14 @@
|
||||
"format": "biome format --write . && prettier --write . --ignore-path ../../../../.prettierignore",
|
||||
"format:check": "biome ci . && prettier --check . --ignore-path ../../../../.prettierignore",
|
||||
"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": {
|
||||
"@n8n/eslint-config": "workspace:*",
|
||||
"@n8n/storybook": "workspace:*",
|
||||
"@n8n/stylelint-config": "workspace:*",
|
||||
"@n8n/typescript-config": "workspace:*",
|
||||
"@n8n/vitest-config": "workspace:*",
|
||||
"@testing-library/jest-dom": "catalog:frontend",
|
||||
|
||||
@@ -78,7 +78,7 @@ const alertBoxClassNames = computed(() => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import '../../css/common/var.scss';
|
||||
@use '../../css/common/var.scss';
|
||||
|
||||
.alert {
|
||||
display: flex;
|
||||
@@ -87,7 +87,7 @@ const alertBoxClassNames = computed(() => {
|
||||
border-bottom: 1px solid transparent;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $alert-padding;
|
||||
padding: var.$alert-padding;
|
||||
|
||||
&.center {
|
||||
justify-content: center;
|
||||
@@ -98,7 +98,7 @@ const alertBoxClassNames = computed(() => {
|
||||
color: var(--color-success);
|
||||
|
||||
&.background {
|
||||
background-color: $color-success-lighter;
|
||||
background-color: var.$color-success-lighter;
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
@@ -108,7 +108,7 @@ const alertBoxClassNames = computed(() => {
|
||||
}
|
||||
|
||||
&.dark {
|
||||
color: $color-white;
|
||||
color: var.$color-white;
|
||||
|
||||
&:not(.background) {
|
||||
color: var(--color-success);
|
||||
@@ -116,7 +116,7 @@ const alertBoxClassNames = computed(() => {
|
||||
|
||||
&.background {
|
||||
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);
|
||||
|
||||
&.background {
|
||||
background-color: $alert-info-color;
|
||||
background-color: var.$alert-info-color;
|
||||
border-color: var(--color-info);
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
color: $color-white;
|
||||
color: var.$color-white;
|
||||
|
||||
&:not(.background) {
|
||||
color: var(--color-info);
|
||||
@@ -140,7 +140,7 @@ const alertBoxClassNames = computed(() => {
|
||||
|
||||
&.background {
|
||||
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);
|
||||
|
||||
&.background {
|
||||
background-color: $alert-warning-color;
|
||||
background-color: var.$alert-warning-color;
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
@@ -164,7 +164,7 @@ const alertBoxClassNames = computed(() => {
|
||||
}
|
||||
|
||||
&.dark {
|
||||
color: $color-white;
|
||||
color: var.$color-white;
|
||||
|
||||
&:not(.background) {
|
||||
color: var(--color-warning);
|
||||
@@ -172,7 +172,7 @@ const alertBoxClassNames = computed(() => {
|
||||
|
||||
&.background {
|
||||
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);
|
||||
|
||||
&.background {
|
||||
background-color: $alert-danger-color;
|
||||
background-color: var.$alert-danger-color;
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
|
||||
@@ -192,7 +192,7 @@ const alertBoxClassNames = computed(() => {
|
||||
}
|
||||
|
||||
&.dark {
|
||||
color: $color-white;
|
||||
color: var.$color-white;
|
||||
|
||||
&:not(.background) {
|
||||
color: var(--color-danger);
|
||||
@@ -200,7 +200,7 @@ const alertBoxClassNames = computed(() => {
|
||||
|
||||
&.background {
|
||||
background-color: var(--color-danger);
|
||||
border-color: $color-white;
|
||||
border-color: var.$color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -226,16 +226,16 @@ const alertBoxClassNames = computed(() => {
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $alert-title-font-size;
|
||||
font-size: var.$alert-title-font-size;
|
||||
line-height: 18px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: $alert-description-font-size;
|
||||
font-size: var.$alert-description-font-size;
|
||||
|
||||
&.hasTitle {
|
||||
margin: 5px 0 0 0;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../../css/mixins/utils';
|
||||
@import '../../css/common/var';
|
||||
@use '../../css/mixins/utils';
|
||||
@use '../../css/common/var';
|
||||
@use 'sass:string';
|
||||
|
||||
@mixin n8n-button($override: false) {
|
||||
$important: if($override, !important, '');
|
||||
@@ -9,13 +10,14 @@
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
border: var(--border-width-base) $button-border-color var(--border-style-base) unquote($important);
|
||||
color: $button-font-color unquote($important);
|
||||
background-color: $button-background-color unquote($important);
|
||||
font-weight: var(--font-weight-medium) unquote($important);
|
||||
border-radius: $button-border-radius unquote($important);
|
||||
padding: $button-padding-vertical $button-padding-horizontal unquote($important);
|
||||
font-size: $button-font-size unquote($important);
|
||||
border: var(--border-width-base) var.$button-border-color var(--border-style-base)
|
||||
string.unquote($important);
|
||||
color: var.$button-font-color string.unquote($important);
|
||||
background-color: var.$button-background-color string.unquote($important);
|
||||
font-weight: var(--font-weight-medium) string.unquote($important);
|
||||
border-radius: var.$button-border-radius string.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;
|
||||
text-align: center;
|
||||
@@ -30,43 +32,44 @@
|
||||
|
||||
gap: var(--spacing-3xs);
|
||||
|
||||
@include utils-user-select(none);
|
||||
@include utils.utils-user-select(none);
|
||||
|
||||
// Solution for a inside button
|
||||
& a {
|
||||
color: $button-font-color unquote($important);
|
||||
color: var.$button-font-color string.unquote($important);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $button-hover-font-color unquote($important);
|
||||
border-color: $button-hover-border-color unquote($important);
|
||||
background-color: $button-hover-background-color unquote($important);
|
||||
color: var.$button-hover-font-color string.unquote($important);
|
||||
border-color: var.$button-hover-border-color string.unquote($important);
|
||||
background-color: var.$button-hover-background-color string.unquote($important);
|
||||
|
||||
& a {
|
||||
color: $button-hover-font-color unquote($important);
|
||||
color: var.$button-hover-font-color string.unquote($important);
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: $button-active-font-color unquote($important);
|
||||
border-color: $button-active-border-color unquote($important);
|
||||
background-color: $button-active-background-color unquote($important);
|
||||
color: var.$button-active-font-color string.unquote($important);
|
||||
border-color: var.$button-active-border-color string.unquote($important);
|
||||
background-color: var.$button-active-background-color string.unquote($important);
|
||||
outline: none;
|
||||
|
||||
& a {
|
||||
color: $button-active-font-color unquote($important);
|
||||
color: var.$button-active-font-color string.unquote($important);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible:not(:active, .active) {
|
||||
color: $button-focus-font-color unquote($important);
|
||||
border-color: $button-focus-border-color unquote($important);
|
||||
background-color: $button-focus-background-color unquote($important);
|
||||
outline: $focus-outline-width solid $button-focus-outline-color unquote($important);
|
||||
color: var.$button-focus-font-color string.unquote($important);
|
||||
border-color: var.$button-focus-border-color string.unquote($important);
|
||||
background-color: var.$button-focus-background-color string.unquote($important);
|
||||
outline: var.$focus-outline-width solid var.$button-focus-outline-color
|
||||
string.unquote($important);
|
||||
|
||||
& a {
|
||||
color: $button-focus-font-color unquote($important);
|
||||
color: var.$button-focus-font-color string.unquote($important);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,12 +78,12 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
color: $button-disabled-font-color;
|
||||
border-color: $button-disabled-border-color;
|
||||
background-color: $button-disabled-background-color;
|
||||
color: var.$button-disabled-font-color;
|
||||
border-color: var.$button-disabled-border-color;
|
||||
background-color: var.$button-disabled-background-color;
|
||||
|
||||
& a {
|
||||
color: $button-disabled-font-color;
|
||||
color: var.$button-disabled-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -90,12 +93,12 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
color: $button-loading-font-color;
|
||||
border-color: $button-loading-border-color;
|
||||
background-color: $button-loading-background-color;
|
||||
color: var.$button-loading-font-color;
|
||||
border-color: var.$button-loading-border-color;
|
||||
background-color: var.$button-loading-background-color;
|
||||
|
||||
& a {
|
||||
color: $button-loading-font-color;
|
||||
color: var.$button-loading-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,10 +81,10 @@ const classes = computed(() => {
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import './Button';
|
||||
@use './Button';
|
||||
|
||||
.el-button {
|
||||
@include n8n-button(true);
|
||||
@include Button.n8n-button(true);
|
||||
|
||||
--button-padding-vertical: var(--spacing-2xs);
|
||||
--button-padding-horizontal: var(--spacing-xs);
|
||||
@@ -96,18 +96,18 @@ const classes = computed(() => {
|
||||
|
||||
&.btn--cancel,
|
||||
&.el-color-dropdown__link-btn {
|
||||
@include n8n-button-secondary;
|
||||
@include Button.n8n-button-secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import './Button';
|
||||
@import '../../css/mixins/utils';
|
||||
@import '../../css/common/var';
|
||||
@use './Button';
|
||||
@use '../../css/mixins/utils';
|
||||
@use '../../css/common/var';
|
||||
|
||||
.button {
|
||||
@include n8n-button;
|
||||
@include Button.n8n-button;
|
||||
}
|
||||
|
||||
$loading-overlay-background-color: rgba(255, 255, 255, 0);
|
||||
@@ -117,23 +117,23 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
|
||||
*/
|
||||
|
||||
.secondary {
|
||||
@include n8n-button-secondary;
|
||||
@include Button.n8n-button-secondary;
|
||||
}
|
||||
|
||||
.tertiary {
|
||||
@include n8n-button-secondary;
|
||||
@include Button.n8n-button-secondary;
|
||||
}
|
||||
|
||||
.success {
|
||||
@include n8n-button-success;
|
||||
@include Button.n8n-button-success;
|
||||
}
|
||||
|
||||
.warning {
|
||||
@include n8n-button-warning;
|
||||
@include Button.n8n-button-warning;
|
||||
}
|
||||
|
||||
.danger {
|
||||
@include n8n-button-danger;
|
||||
@include Button.n8n-button-danger;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -525,14 +525,6 @@ const table = useVueTable({
|
||||
th {
|
||||
position: relative;
|
||||
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);
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
@@ -544,11 +536,17 @@ const table = useVueTable({
|
||||
&:first-child {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: var(--color-background-light-base);
|
||||
border-bottom: 1px solid var(--color-foreground-base);
|
||||
}
|
||||
|
||||
tbody > tr {
|
||||
&:hover {
|
||||
background-color: var(--color-background-light);
|
||||
@@ -602,7 +600,7 @@ th.loading-row {
|
||||
background-color: transparent;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 0px;
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@ const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
|
||||
padding: var(--spacing-l);
|
||||
border: var(--border-base);
|
||||
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 {
|
||||
|
||||
@@ -38,14 +38,14 @@ withDefaults(defineProps<LinkProps>(), {
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import '../../utils';
|
||||
@import '../../css/common/var';
|
||||
@use '../../utils';
|
||||
@use '../../css/common/var';
|
||||
|
||||
.primary {
|
||||
color: $link-color;
|
||||
color: var.$link-color;
|
||||
|
||||
&:active {
|
||||
color: $link-color-active;
|
||||
color: var.$link-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,11 +53,11 @@ withDefaults(defineProps<LinkProps>(), {
|
||||
color: var(--color-text-base);
|
||||
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
color: var.$link-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $link-color-active;
|
||||
color: var.$link-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -70,8 +70,8 @@ const emit = defineEmits<Emits>();
|
||||
background-color: var(--color-foreground-xlight);
|
||||
border: var(--border-base);
|
||||
box-shadow:
|
||||
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
|
||||
rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px,
|
||||
rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
animation-duration: 400ms;
|
||||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
will-change: transform, opacity;
|
||||
|
||||
@@ -182,7 +182,7 @@ ul.user-stack-list {
|
||||
border: 1px solid var(--border-color-light);
|
||||
border-radius: var(--border-radius-base);
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -491,7 +491,7 @@
|
||||
--color-configurable-node-name: var(--color-text-dark);
|
||||
--color-secondary-link: var(--prim-color-secondary-tint-200);
|
||||
--color-secondary-link-hover: var(--prim-color-secondary-tint-100);
|
||||
//Params
|
||||
// Params
|
||||
--color-icon-base: var(--color-text-light);
|
||||
--color-icon-hover: var(--prim-color-primary);
|
||||
|
||||
|
||||
@@ -166,8 +166,8 @@
|
||||
--color-node-icon-green: #108e49;
|
||||
--color-node-icon-dark-green: #157562;
|
||||
--color-node-icon-azure: #54b8c9;
|
||||
--color-node-icon-purple: #553399;
|
||||
--color-node-icon-crimson: #772244;
|
||||
--color-node-icon-purple: #539;
|
||||
--color-node-icon-crimson: #724;
|
||||
|
||||
// Expressions, autocomplete, infobox
|
||||
--color-valid-resolvable-foreground: var(--prim-color-alt-a);
|
||||
@@ -657,7 +657,7 @@
|
||||
--spacing-4xl: 8rem;
|
||||
--spacing-5xl: 16rem;
|
||||
|
||||
//Params
|
||||
// Params
|
||||
--color-icon-base: var(--color-text-light);
|
||||
--color-icon-hover: var(--prim-color-primary);
|
||||
}
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
|
||||
& .el-alert__description {
|
||||
font-size: var.$alert-description-font-size;
|
||||
margin: 5px 0 0 0;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
|
||||
@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';
|
||||
@import 'common/transition.scss';
|
||||
@import 'icon.scss';
|
||||
@use 'common/transition.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 button.button-small();
|
||||
margin-right: var(--spacing-2xs);
|
||||
|
||||
& {
|
||||
margin-right: var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
position: relative;
|
||||
border-bottom: 1px solid var.$datepicker-inner-border-color;
|
||||
font-size: 12px;
|
||||
padding: 8px 5px 5px 5px;
|
||||
padding: 8px 5px 5px;
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
position: relative;
|
||||
border-bottom: 1px solid var.$datepicker-inner-border-color;
|
||||
font-size: 12px;
|
||||
padding: 8px 5px 5px 5px;
|
||||
padding: 8px 5px 5px;
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 8px 0px;
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
& div {
|
||||
height: 48px;
|
||||
|
||||
@@ -100,12 +100,14 @@
|
||||
@include button.button-small();
|
||||
@include button.button-round();
|
||||
|
||||
vertical-align: middle;
|
||||
margin-left: var(--spacing-2xs);
|
||||
|
||||
&.is-plain {
|
||||
@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;
|
||||
display: flex;
|
||||
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;
|
||||
|
||||
transition: all 0.3s;
|
||||
@@ -123,15 +123,7 @@ $directions: rtl, ltr, ttb, btt;
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-to,
|
||||
&-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
@each $direction in $directions {
|
||||
.#{$direction} {
|
||||
@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;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
padding: 0 0 10px 0;
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
}
|
||||
@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 './dialog.scss';
|
||||
@use './display.scss';
|
||||
// @use "./autocomplete.scss";
|
||||
@use './dropdown.scss';
|
||||
@use './dropdown-menu.scss';
|
||||
@use './dropdown-item.scss';
|
||||
@use './menu.scss';
|
||||
@use './submenu.scss';
|
||||
@use './menu-item.scss';
|
||||
// @use "./menu-item-group.scss";
|
||||
@use './input.scss';
|
||||
@use './input-number.scss';
|
||||
@use './radio.scss';
|
||||
@use './radio-group.scss';
|
||||
@use './radio-button.scss';
|
||||
@use './checkbox.scss';
|
||||
// @use "./checkbox-button.scss";
|
||||
// @use "./checkbox-group.scss";
|
||||
@use './switch.scss';
|
||||
@use './select.scss';
|
||||
@use './skeleton.scss';
|
||||
// @use "./button-group.scss";
|
||||
@use './button-group.scss';
|
||||
@use './table.scss';
|
||||
@use './table-column.scss';
|
||||
@use './date-picker.scss';
|
||||
// @use "./time-select.scss";
|
||||
// @use "./time-picker.scss";
|
||||
@use './popover.scss';
|
||||
//@use './tooltip.scss';
|
||||
@use './tooltip.scss';
|
||||
@use './message-box.scss';
|
||||
// @use "./breadcrumb.scss";
|
||||
// @use "./breadcrumb-item.scss";
|
||||
@use './form.scss';
|
||||
@use './form-item.scss';
|
||||
@use './tabs.scss';
|
||||
@use './tab-pane.scss';
|
||||
@use './tag.scss';
|
||||
// @use "./tree.scss";
|
||||
@use './tree.scss';
|
||||
@use './alert.scss';
|
||||
@use './notification.scss';
|
||||
// @use "./slider.scss";
|
||||
@use './loading.scss';
|
||||
@use './row.scss';
|
||||
@use './col.scss';
|
||||
// @use "./upload.scss";
|
||||
// @use "./progress.scss";
|
||||
// @use "./spinner.scss";
|
||||
@use './progress.scss';
|
||||
@use './message.scss';
|
||||
@use './badge.scss';
|
||||
@use './card.scss';
|
||||
// @use "./rate.scss";
|
||||
// @use "./steps.scss";
|
||||
// @use "./step.scss";
|
||||
// @use "./carousel.scss";
|
||||
// @use "./scrollbar.scss";
|
||||
// @use "./carousel-item.scss";
|
||||
// @use "./collapse.scss";
|
||||
// @use "./collapse-item.scss";
|
||||
// @use "./cascader.scss";
|
||||
@use './scrollbar.scss';
|
||||
@use './collapse.scss';
|
||||
@use './color-picker.scss';
|
||||
@use './transfer.scss';
|
||||
@use './container.scss';
|
||||
// @use "./header.scss";
|
||||
// @use "./aside.scss";
|
||||
// @use "./main.scss";
|
||||
// @use "./footer.scss";
|
||||
// @use "./timeline.scss";
|
||||
// @use "./timeline-item.scss";
|
||||
// @use "./link.scss";
|
||||
// @use "./divider.scss";
|
||||
// @use "./image.scss";
|
||||
// @use "./calendar.scss";
|
||||
// @use "./backtop.scss";
|
||||
// @use "./infinite-scroll.scss";
|
||||
// @use "./page-header.scss";
|
||||
// @use "./cascader-panel.scss";
|
||||
// @use "./avatar.scss";
|
||||
@use './drawer.scss';
|
||||
@use './popper.scss';
|
||||
// @use "./popconfirm.scss";
|
||||
@use './utilities/index.scss';
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
@include mixins.e(inner) {
|
||||
display: block;
|
||||
resize: vertical;
|
||||
padding: 8px 12px 5px 12px;
|
||||
padding: 8px 12px 5px;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
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 {
|
||||
@include button.button-small();
|
||||
@include button.button-outline;
|
||||
|
||||
--button-active-background-color: var(--color-primary-tint-2);
|
||||
--button-active-color: var(--color-primary);
|
||||
--button-active-border-color: var(--color-primary);
|
||||
@@ -166,6 +163,9 @@
|
||||
--button-hover-color: var(--color-primary);
|
||||
--button-hover-border-color: var(--color-primary);
|
||||
--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 'sass:map';
|
||||
@use 'sass:string';
|
||||
|
||||
@mixin breakpoint($name) {
|
||||
@if map-has-key(var.$breakpoints-spec, $name) {
|
||||
$query: map-get(var.$breakpoints-spec, $name);
|
||||
@if map.has-key(var.$breakpoints-spec, $name) {
|
||||
$query: map.get(var.$breakpoints-spec, $name);
|
||||
$media-query: '';
|
||||
|
||||
@each $key, $value in $query {
|
||||
$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} {
|
||||
@content;
|
||||
|
||||
@@ -37,9 +37,11 @@
|
||||
}
|
||||
|
||||
@mixin button-variant($color, $background-color, $border-color, $h, $s, $l, $t, $plain: true) {
|
||||
color: $color;
|
||||
background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
|
||||
border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
|
||||
& {
|
||||
color: $color;
|
||||
background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
|
||||
border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
|
||||
@@ -79,16 +81,20 @@
|
||||
}
|
||||
|
||||
@mixin button-size($padding-vertical, $padding-horizontal, $font-size) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
|
||||
&.is-round {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
& {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-round() {
|
||||
--button-border-radius: 20px;
|
||||
& {
|
||||
--button-border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// ignore plain overrides
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@forward 'breakpoints';
|
||||
@forward 'button';
|
||||
@forward 'button' hide $B, $E;
|
||||
@forward 'config';
|
||||
@forward 'function';
|
||||
@forward 'mixins';
|
||||
|
||||
@@ -4,6 +4,10 @@
|
||||
@use '../common/var';
|
||||
@use 'config';
|
||||
|
||||
// Module-level variables for BEM mixins
|
||||
$B: null;
|
||||
$E: null;
|
||||
|
||||
/* Break-points
|
||||
-------------------------- */
|
||||
@mixin res($key, $map: var.$breakpoints) {
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
@include mixins.e(content) {
|
||||
font-size: var.$notification-content-font-size;
|
||||
line-height: 1.5;
|
||||
margin: 6px 0 0 0;
|
||||
margin: 6px 0 0;
|
||||
color: var.$notification-content-color;
|
||||
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;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
@@ -363,9 +363,9 @@
|
||||
// outline: 1px solid getCssVar('pagination-hover-color');
|
||||
// outline-offset: -1px;
|
||||
// }
|
||||
//}
|
||||
// }
|
||||
//
|
||||
//@include b(pagination) {
|
||||
// @include b(pagination) {
|
||||
// @include set-component-css-var('pagination', $pagination);
|
||||
//
|
||||
// white-space: nowrap;
|
||||
@@ -517,9 +517,9 @@
|
||||
// width: 100px;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
// }
|
||||
//
|
||||
//@include b(pager) {
|
||||
// @include b(pager) {
|
||||
// user-select: none;
|
||||
// list-style: none;
|
||||
// font-size: 0;
|
||||
@@ -531,4 +531,4 @@
|
||||
// li {
|
||||
// @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;
|
||||
}
|
||||
.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 'input';
|
||||
@use 'checkbox';
|
||||
@use 'checkbox-group';
|
||||
|
||||
@include mixins.b(transfer) {
|
||||
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';
|
||||
@import 'link';
|
||||
@import 'list';
|
||||
@import 'spacing';
|
||||
@import 'typography';
|
||||
@use 'float';
|
||||
@use 'link';
|
||||
@use 'list';
|
||||
@use 'spacing';
|
||||
@use 'typography';
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import { baseConfig } from '@n8n/stylelint-config/base';
|
||||
|
||||
export default baseConfig;
|
||||
@@ -12,6 +12,8 @@
|
||||
"dev": "pnpm serve",
|
||||
"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",
|
||||
"format": "biome format --write . && prettier --write . --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",
|
||||
@@ -107,6 +109,7 @@
|
||||
"@faker-js/faker": "^8.0.2",
|
||||
"@iconify/json": "^2.2.349",
|
||||
"@n8n/eslint-config": "workspace:*",
|
||||
"@n8n/stylelint-config": "workspace:*",
|
||||
"@n8n/typescript-config": "workspace:*",
|
||||
"@n8n/vitest-config": "workspace:*",
|
||||
"@pinia/testing": "^0.1.6",
|
||||
|
||||
@@ -163,7 +163,7 @@ function goToUpgradeApiKeyScopes() {
|
||||
}
|
||||
|
||||
.scopes-dropdown-container :global(.el-select-group__wrap:not(:last-of-type)) {
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ const onDrop = (value: string) => {
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-s);
|
||||
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 {
|
||||
border-color: var(--color-ndv-droppable-parameter);
|
||||
|
||||
@@ -748,6 +748,7 @@ async function onAskAssistantClick() {
|
||||
&__button {
|
||||
margin-left: var(--spacing-s);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
margin-top: var(--spacing-xs);
|
||||
flex-direction: row-reverse;
|
||||
span {
|
||||
margin-right: var(--spacing-5xs);
|
||||
@@ -887,8 +888,4 @@ async function onAskAssistantClick() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.node-error-view__button {
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -102,5 +102,3 @@ function getErrorTooltipUrl(column: TestTableColumn<T>, row: T): string | undefi
|
||||
</N8nBadge>
|
||||
</N8nTooltip>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -12,5 +12,3 @@ export default {
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
||||
@@ -83,6 +83,13 @@ onBeforeUnmount(() => {
|
||||
|
||||
.body {
|
||||
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 {
|
||||
@@ -99,15 +106,5 @@ onBeforeUnmount(() => {
|
||||
padding: 0 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>
|
||||
|
||||
@@ -80,16 +80,16 @@ onMounted(() => {
|
||||
.authView {
|
||||
transform: scale(2);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.logo,
|
||||
.logoText {
|
||||
transform: scale(1.3) translateY(-2px);
|
||||
}
|
||||
.logo,
|
||||
.logoText {
|
||||
transform: scale(1.3) translateY(-2px);
|
||||
}
|
||||
|
||||
.logoText {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-right: var(--spacing-3xs);
|
||||
.logoText {
|
||||
margin-left: var(--spacing-xs);
|
||||
margin-right: var(--spacing-3xs);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarExpanded .logo {
|
||||
|
||||
@@ -303,7 +303,7 @@ onMounted(async () => {
|
||||
}
|
||||
.textContainer {
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
@@ -95,7 +95,7 @@ onBeforeUnmount(() => {
|
||||
<style lang="scss">
|
||||
.el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 30px 30px 0 30px;
|
||||
padding: 30px 30px 0;
|
||||
}
|
||||
|
||||
.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