diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 87acec41b..457d1ab82 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,3 +1,7 @@ # This file is a github code protect rule follow the codeowners https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-code-owners#example-of-a-codeowners-file -* @barnettZQG @wonderflow \ No newline at end of file +* @barnettZQG @wonderflow + +pkg @barnettZQG @yangsoon @FogDong + +packages @barnettZQG diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index f5bfbea6a..cb2b4a66a 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -47,12 +47,4 @@ jobs: name: Check Frontend Code Style - run: yarn test - run: make check-diff - name: Check Server Code Style - - name: Build docker image - id: docker_build - uses: docker/build-push-action@v2 - with: - context: ./ - file: ./Dockerfile - push: false - tags: oamdev/velaux:latest \ No newline at end of file + name: Check Server Code Style \ No newline at end of file diff --git a/.github/workflows/server-test.yml b/.github/workflows/server-test.yml index 554efa7e4..9279fb711 100644 --- a/.github/workflows/server-test.yml +++ b/.github/workflows/server-test.yml @@ -112,6 +112,14 @@ jobs: uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c with: submodules: true + - name: Build docker image + id: docker_build + uses: docker/build-push-action@v2 + with: + context: ./ + file: ./Dockerfile + push: false + tags: oamdev/velaux:latest - name: Tear down K3d if exist run: | @@ -133,7 +141,6 @@ jobs: github-token: ${{ secrets.GITHUB_TOKEN }} k3d-args: ${{ env.EGRESS_ARG }} - - name: Setup K3d (Worker) uses: nolar/setup-k3d-k3s@293b8e5822a20bc0d5bcdd4826f1a665e72aba96 with: @@ -142,7 +149,6 @@ jobs: k3d-name: worker k3d-args: --kubeconfig-update-default=false --network=k3d-k3s-default ${{ env.EGRESS_ARG }} - - name: Kind Cluster (Worker) run: | internal_ip=$(docker network inspect k3d-k3s-default|jq ".[0].Containers"| jq -r '.[]| select(.Name=="k3d-worker-server-0")|.IPv4Address' | cut -d/ -f1) @@ -154,6 +160,7 @@ jobs: run: | make e2e-setup-core make start-addon-mock-server + make load-image - name: Run server e2e test run: | diff --git a/.gitignore b/.gitignore index 296a68d6c..9f1a48785 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,5 @@ build package-lock.json yarn-error.log -.DS_Store \ No newline at end of file +.DS_Store +dist \ No newline at end of file diff --git a/.prettierrc.js b/.prettierrc.js index 7b597d789..a4df7366a 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,5 +1,5 @@ -const fabric = require('@umijs/fabric'); - module.exports = { - ...fabric.prettier, + trailingComma: 'es5', + singleQuote: true, + printWidth: 120, }; diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9bf2d4ecb..9dee7900d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,7 +2,7 @@ ## About VelaUX -The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Platform, it provides out-of-box application delivery and management platform. +The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Dashboard. Designed as an extensible, application-oriented delivery platform. To help us create a safe and positive community experience for all, we require all participants to adhere to the [Code of Conduct](https://github.com/oam-dev/kubevela/blob/master/CODE_OF_CONDUCT.md). diff --git a/Dockerfile b/Dockerfile index c4b269ca7..b8cb535bb 100644 --- a/Dockerfile +++ b/Dockerfile @@ -34,7 +34,7 @@ RUN GO111MODULE=on CGO_ENABLED=0 GOOS=linux GOARCH=${TARGETARCH} \ FROM ${BASE_IMAGE:-alpine:3.15@sha256:cf34c62ee8eb3fe8aa24c1fab45d7e9d12768d945c3f5a6fd6a63d901e898479} # This is required by daemon connecting with cri -RUN apk add --no-cache ca-certificates bash expat +RUN apk add --no-cache ca-certificates bash expat openssl-dev WORKDIR / diff --git a/Makefile b/Makefile index fd4bcac4b..afe475978 100644 --- a/Makefile +++ b/Makefile @@ -87,6 +87,9 @@ install-addon: start-addon-mock-server: go run ./e2e-test/addon & +load-image: + k3d image import oamdev/velaux:latest || { echo >&2 "kind not installed or error loading image: $(VELA_CORE_TEST_IMAGE)"; exit 1; } + .PHONY: e2e-server-test e2e-server-test: go test -v -coverpkg=./... -coverprofile=/tmp/e2e_apiserver_test.out ./e2e-test diff --git a/README.md b/README.md index 510e143a6..4a4c0f626 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ ## Overview -The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Platform. Designed as an extensible, application-oriented delivery control panel. +The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Dashboard. Designed as an extensible, application-oriented delivery platform. ## Quick Start @@ -19,6 +19,8 @@ Please refer to: [https://kubevela.net/docs/install](https://kubevela.net/docs/i Make sure you have installed [yarn](https://classic.yarnpkg.com/en/docs/install). +Install frontend dependencies and build the frontend. + ```shell yarn install yarn build @@ -26,7 +28,7 @@ yarn build #### Start the server -1. Install the Go 1.19 +1. Install the Go 1.19+. 2. Prepare a KubeVela core environment. ```shell @@ -41,16 +43,24 @@ yarn build 3. Init the dependencies. ```shell - vela addon enable ./addon + vela addon enable ./addon replicas=0 ``` 4. Start the server on local ```shell + # Install all dependencies go mod tidy + + # Setting the kube config + export KUBECONFIG=$(velad kubeconfig --host) + + # Start the server make run-server ``` +Then, you can open the http://127.0.0.1:8000. More info refer to [contributing](./docs/contributing/velaux.md) + ## Community - Slack: [CNCF Slack](https://slack.cncf.io/) #kubevela channel (*English*) diff --git a/docs/contributing/velaux.md b/docs/contributing/velaux.md index dbd4c47e6..2f3017c55 100644 --- a/docs/contributing/velaux.md +++ b/docs/contributing/velaux.md @@ -4,9 +4,9 @@ > Docker v20.10.5+ (runc >= v1.0.0-rc93) or Linux system -1. Install VelaCore +### Install VelaCore -* Download the binary. +1. Download the binary. * MacOS/Linux @@ -20,13 +20,13 @@ powershell -Command "iwr -useb https://static.kubevela.net/script/install-velad.ps1 | iex" ``` -* Install +2. Install ```bash velad install ``` -2. Install VelaUX environment +3. Install VelaUX environment ```bash vela addon enable ./addon @@ -38,16 +38,30 @@ Make sure you have installed [yarn](https://classic.yarnpkg.com/en/docs/install) ```shell yarn install -yarn build + +## Build the frontend and watch the code changes +yarn dev ``` -* Start the server +### Start the server ```shell +## Setting the KUBECONFIG environment +export KUBECONFIG=$(velad kubeconfig --host) + make run-server ``` -* Check the code style +Waiting the server started, open http://127.0.0.1:8000 via the browser. + +Now, the local environment is built successfully, you could write the server or frontend code. + +Notes: + +- If you change the frontend code, it will take effect after the website refresh. +- If you change the server code, it will take effect after restarted the server. + +### Check the code style ```shell # Frontend @@ -56,7 +70,7 @@ yarn lint make reviewable ``` -* Test the code +### Test the code Frontend: @@ -71,8 +85,13 @@ make unit-test-server make e2e-server-test ``` -* Generate the OpenAPI schema +### Generate the OpenAPI schema ```shell make build-swagger ``` + +## References + +* UI framework: [@alifd/next](https://fusion.design/) +* Icons: [react-icons](https://react-icons.github.io/react-icons) diff --git a/e2e-test/suite_test.go b/e2e-test/suite_test.go index fcbb977d7..2bd691b56 100644 --- a/e2e-test/suite_test.go +++ b/e2e-test/suite_test.go @@ -49,7 +49,7 @@ var token string const ( baseDomain = "http://127.0.0.1:8001" baseURL = "http://127.0.0.1:8001/api/v1" - testNSprefix = "api-e2e-test-" + testNSprefix = "api-test-" ) func TestE2eApiserverTest(t *testing.T) { diff --git a/package.json b/package.json index 0c7f9611a..2f575178c 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,13 @@ "repository": "github:kubevela/velaux", "scripts": { "dev": "NODE_ENV=dev webpack --progress --color --config scripts/webpack/webpack.dev.js --watch", - "build": "NODE_ENV=production webpack --progress --config scripts/webpack/webpack.prod.js", + "build": "yarn run build-theme && NODE_ENV=production webpack --progress --config scripts/webpack/webpack.prod.js", "lint": "yarn run lint:ts", "lint:ts": "eslint . --ext .js,.tsx,.ts --cache", "lint:fix": "yarn lint:ts --fix", "test": "yarn test:ui", - "test:ui": "yarn workspace @velaux/ui run test" + "test:ui": "yarn workspace @velaux/ui run test", + "build-theme": "yarn workspace @velaux/theme run build-theme" }, "workspaces": { "packages": [ @@ -20,9 +21,7 @@ "plugins-bundled/internal/*" ] }, - "dependencies": { - "jquery": "3.6.1" - }, + "dependencies": {}, "devDependencies": { "browserslist": "^4.21.4", "@babel/core": "7.20.5", @@ -76,6 +75,7 @@ "@grafana/eslint-config": "5.1.0", "@typescript-eslint/parser": "5.42.0", "@typescript-eslint/eslint-plugin": "5.42.0", + "react-dev-utils": "^11.0.4", "typescript": "4.4.4" }, "engines": { diff --git a/packages/velaux-theme/bin/build.js b/packages/velaux-theme/bin/build.js new file mode 100644 index 000000000..ed107c186 --- /dev/null +++ b/packages/velaux-theme/bin/build.js @@ -0,0 +1,66 @@ +'use strict'; + +const path = require('path'); +const rmdir = require('rimraf'); +const webpack = require('webpack'); +const fs = require('fs'); + +const BASE_DIR = path.dirname(__dirname); + +const config = require('../webpack.config.js'); +const distPath = path.join(process.cwd(), 'dist'); + +function build(minimize = false) { + return new Promise((resolve, reject) => { + webpack(config({ minimize })).run((err, stats) => { + if (err) { + reject(err); + } else { + const errors = stats.toJson().errors; + if (errors.length) { + reject( + stats.toString({ + chunkModules: false, + }) + ); + } else { + resolve(stats); + } + } + }); + }); +} + +function emendLess() { + let less = fs.readFileSync(path.join(BASE_DIR, 'variables.less'), 'utf8'); + + less = less.replace(/\/\/ lessUnsupport[\s\S]*/g, ''); + fs.writeFileSync(path.join(BASE_DIR, 'variables.less'), less); +} + +async function buildTheme() { + // build + const start = Date.now(); + console.log('# build'); + await build(); + console.log('# build minimize'); + await build(true); + + console.log('# emend less'); + emendLess(); + + try { + fs.unlinkSync(path.join(distPath, 'next-noreset.min.js')); + fs.unlinkSync(path.join(distPath, 'next-noreset.js')); + fs.unlinkSync(path.join(distPath, 'next-noreset.var.min.js')); + fs.unlinkSync(path.join(distPath, 'next-noreset.var.js')); + fs.unlinkSync(path.join(distPath, 'next.var.min.js')); + fs.unlinkSync(path.join(distPath, 'next.var.js')); + } catch (e) { + console.log('remove next-noreset.js or next-noreset.min.js failed: ', e); + } + console.log('# build end, cost: ', Date.now() - start); + process.exit(0); +} + +buildTheme(); diff --git a/packages/velaux-theme/icons.scss b/packages/velaux-theme/icons.scss new file mode 100644 index 000000000..e938a689d --- /dev/null +++ b/packages/velaux-theme/icons.scss @@ -0,0 +1 @@ +@import "variables.scss"; \ No newline at end of file diff --git a/packages/velaux-theme/icons.var.css b/packages/velaux-theme/icons.var.css new file mode 100644 index 000000000..e938a689d --- /dev/null +++ b/packages/velaux-theme/icons.var.css @@ -0,0 +1 @@ +@import "variables.scss"; \ No newline at end of file diff --git a/packages/velaux-theme/index-noreset.scss b/packages/velaux-theme/index-noreset.scss new file mode 100644 index 000000000..7e57cce8d --- /dev/null +++ b/packages/velaux-theme/index-noreset.scss @@ -0,0 +1,5 @@ +@import "variables.scss"; + +@import "~@alifd/next/index-noreset.scss"; + +@import "icons.scss"; \ No newline at end of file diff --git a/packages/velaux-theme/index-noreset.var.scss b/packages/velaux-theme/index-noreset.var.scss new file mode 100644 index 000000000..bd331c18e --- /dev/null +++ b/packages/velaux-theme/index-noreset.var.scss @@ -0,0 +1,3 @@ +@import 'variables.scss2css.scss'; +@import '~@alifd/next/index-noreset.scss'; +@import 'icons.var.css'; \ No newline at end of file diff --git a/packages/velaux-theme/index.js b/packages/velaux-theme/index.js new file mode 100644 index 000000000..813c857fd --- /dev/null +++ b/packages/velaux-theme/index.js @@ -0,0 +1,3 @@ +'use strict'; + +module.exports = require('@alifd/next'); diff --git a/packages/velaux-theme/index.scss b/packages/velaux-theme/index.scss new file mode 100644 index 000000000..47b2190d5 --- /dev/null +++ b/packages/velaux-theme/index.scss @@ -0,0 +1,6 @@ +@import "variables.scss"; + +// Base theme +@import "~@alifd/next/index.scss"; + +@import "icons.scss"; \ No newline at end of file diff --git a/packages/velaux-theme/index.var.scss b/packages/velaux-theme/index.var.scss new file mode 100644 index 000000000..729433148 --- /dev/null +++ b/packages/velaux-theme/index.var.scss @@ -0,0 +1,4 @@ + +@import 'variables.scss2css.scss'; +@import "~@alifd/next/index.scss"; +@import 'icons.var.css'; \ No newline at end of file diff --git a/packages/velaux-theme/package.json b/packages/velaux-theme/package.json new file mode 100644 index 000000000..9411929ef --- /dev/null +++ b/packages/velaux-theme/package.json @@ -0,0 +1,39 @@ +{ + "name": "@velaux/theme", + "version": "0.0.1", + "author": "KubeVela", + "scripts": { + "build-theme": "yarn sass2less && node bin/build.js", + "sass2less": "sass2less variables.scss variables.less" + }, + "main": "index.js", + "devDependencies": { + "css-loader": "^0.28.11", + "css-split-webpack-plugin": "^0.2.5", + "extract-text-webpack-plugin": "^3.0.0", + "case-sensitive-paths-webpack-plugin": "^2.1.1", + "node-sass": "6.0.1", + "sass": "^1.3.0", + "less-plugin-sass2less": "^1.x", + "style-loader": "^0.21.0", + "rimraf": "^2.x", + "webpack": "^3.0.0", + "autoprefixer": "^7.1.4", + "fast-sass-loader": "^1.2.5", + "postcss-custom-properties": "^9.1.1", + "postcss-loader": "^2.0.6", + "postcss-calc": "^7.0.4" + }, + "dependencies": { + "@alifd/next": "1.26.14" + }, + "peerDependencies": { + "moment": "^2.22.1", + "react": ">=16.0.0", + "react-dom": ">=16.0.0" + }, + "license": "ISC", + "publishConfig": { + "registry": "https://registry.npmjs.org" + } +} \ No newline at end of file diff --git a/packages/velaux-theme/variables.less b/packages/velaux-theme/variables.less new file mode 100644 index 000000000..7d37fa489 --- /dev/null +++ b/packages/velaux-theme/variables.less @@ -0,0 +1,2582 @@ +@primary-color: #1b58f4; +@link-color: @primary-color; +// ------------------------ line ------------------------ // + +@line-dotted: dotted; +@line-dashed: dashed; +@line-solid: solid; +@line-3: 3px; +@line-2: 2px; +@line-1: 1px; +@line-zero: 0px; + +// ------------------------ popup ------------------------ // + +@popup-global-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +@popup-global-corner: 4px; +@popup-global-border-color: #dcdfe6; +@popup-global-border-style: solid; +@popup-global-border-width: 0px; +@popup-local-corner: 4px; +@popup-local-border-color: #dcdfe6; +@popup-local-border-style: solid; +@popup-local-border-width: 1px; +@popup-spacing-tb: 4px; +@popup-spacing-lr: 4px; +@popup-local-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); + +// ------------------------ mask ------------------------ // + +@mask-opacity: .2; +@mask-background: #000000; + +// ------------------------ form-element ------------------------ // + +@form-element-preview-text-color: #1f2633; +@form-element-preview-label-color: #585d66; +@form-element-large-corner: 4px; +@form-element-medium-corner: 4px; +@form-element-small-corner: 4px; +@form-element-small-icon-size: 12px; +@form-element-large-preview-font-size: 16px; +@form-element-large-preview-label-font-size: 16px; +@form-element-medium-preview-font-size: 14px; +@form-element-medium-preview-label-font-size: 14px; +@form-element-small-preview-font-size: 12px; +@form-element-small-preview-label-font-size: 12px; +@form-element-large-preview-height: 40px; +@form-element-medium-preview-height: 28px; +@form-element-small-preview-height: 20px; +@form-element-large-font-size: 16px; +@form-element-large-height: 40px; +@form-element-large-icon-size: 20px; +@form-element-medium-icon-size: 16px; +@form-element-medium-font-size: 14px; +@form-element-small-font-size: 12px; +@form-element-medium-height: 32px; +@form-element-small-height: 24px; + +// ------------------------ size ------------------------ // + +@s-50: 200px; +@s-49: 196px; +@s-48: 192px; +@s-47: 188px; +@s-46: 184px; +@s-45: 180px; +@s-44: 176px; +@s-43: 172px; +@s-42: 168px; +@s-41: 164px; +@s-40: 160px; +@s-39: 156px; +@s-38: 152px; +@s-37: 148px; +@s-36: 144px; +@s-35: 140px; +@s-34: 136px; +@s-33: 132px; +@s-32: 128px; +@s-31: 124px; +@s-30: 120px; +@s-29: 116px; +@s-28: 112px; +@s-27: 108px; +@s-26: 104px; +@s-25: 100px; +@s-24: 96px; +@s-23: 92px; +@s-22: 88px; +@s-21: 84px; +@s-20: 80px; +@s-19: 76px; +@s-18: 72px; +@s-17: 68px; +@s-16: 64px; +@s-15: 60px; +@s-14: 56px; +@s-13: 52px; +@s-12: 48px; +@s-11: 44px; +@s-10: 40px; +@s-9: 36px; +@s-8: 32px; +@s-7: 28px; +@s-6: 24px; +@s-5: 20px; +@s-4: 16px; +@s-3: 12px; +@s-2: 8px; +@s-1: 4px; +@s-zero: 0px; +@s-auto: auto; +@size-base: 4px; + +// ------------------------ shadow ------------------------ // + +@shadow-3-left: -20px 0px 30px 0px rgba(0, 0, 0, 0.15); +@shadow-3-down: 0px 20px 30px 0px rgba(0, 0, 0, 0.15); +@shadow-3-right: 20px 0px 30px 0px rgba(0, 0, 0, 0.15); +@shadow-3-up: 0px -20px 30px 0px rgba(0, 0, 0, 0.15); +@shadow-3: 20px 20px 30px 0px rgba(0, 0, 0, 0.15); +@shadow-2-left: -2px 0px 16px 0px rgba(0, 0, 0, 0.12); +@shadow-2-down: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +@shadow-2-right: 2px 0px 16px 0px rgba(0, 0, 0, 0.12); +@shadow-2-up: 0px -4px 16px 0px rgba(0, 0, 0, 0.12); +@shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +@shadow-1-left: -1px 0px 4px 0px rgba(0, 0, 0, 0.16); +@shadow-1-down: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +@shadow-1-right: 1px 0px 4px 0px rgba(0, 0, 0, 0.16); +@shadow-1-up: 0px -1px 4px 0px rgba(0, 0, 0, 0.16); +@shadow-1: 1px 1px 4px 0px rgba(0, 0, 0, 0.16); +@shadow-zero: none; +@shadow-spread-sd3: 0; +@shadow-spread-sd2: 0; +@shadow-spread-sd1: 0; +@shadow-color-sd3: #000000; +@shadow-color-sd2: #000000; +@shadow-color-sd1: #000000; +@shadow-opacity-sd2: .12; +@shadow-distance-sd1y: 1; +@shadow-distance-sd2: 2; +@shadow-distance-sd1: 1; +@shadow-sides-left: "left"; +@shadow-sides-down: "down"; +@shadow-sides-right: "right"; +@shadow-sides-up: "up"; +@shadow-sides-base: "base"; +@shadow-blur-sd3: 30; +@shadow-blur-sd2: 16; +@shadow-blur-sd1: 4; +@shadow-opacity-sd3: 0.15; +@shadow-opacity-sd1: 0.16; +@shadow-distance-sd3y: 20; +@shadow-distance-sd2y: 4; +@shadow-distance-sd3: 20; + +// ------------------------ icon ------------------------ // + +@icon-reset: ""; +@icon-xxxl: 64px; +@icon-xxl: 48px; +@icon-xl: 32px; +@icon-l: 24px; +@icon-m: 20px; +@icon-s: 16px; +@icon-xs: 12px; +@icon-xxs: 8px; +@icon-font-name: "icon"; +@icon-font-path: "//at.alicdn.com/t/font_881657_len1q696q7"; +@icon-content-dashboard: "\e7fa"; +@icon-content-list: "\e7f9"; +@icon-content-detail: "\e7f8"; +@icon-content-form: "\e7fb"; +@icon-content-chart-pie: "\e613"; +@icon-content-chart-bar: "\e612"; +@icon-content-exit: "\e616"; +@icon-content-lock: "\e617"; +@icon-content-unlock: "\e615"; +@icon-content-eye-close: "\e600"; +@icon-content-eye: "\e611"; +@icon-content-toggle-right: "\e603"; +@icon-content-toggle-left: "\e602"; +@icon-content-copy: "\e60f"; +@icon-content-atm: "\e606"; +@icon-content-email: "\e605"; +@icon-content-account: "\e608"; +@icon-content-attachment: "\e665"; +@icon-content-filter: "\e627"; +@icon-content-refresh: "\e677"; +@icon-content-edit: "\e63b"; +@icon-content-set: "\e683"; +@icon-content-download: "\e628"; +@icon-content-upload: "\e7ee"; +@icon-content-ashbin: "\e639"; +@icon-content-calendar: "\e607"; +@icon-content-picture: "\e631"; +@icon-content-ellipsis: "\e654"; +@icon-content-close: "\e626"; +@icon-content-search: "\e656"; +@icon-content-loading: "\e646"; +@icon-content-semi-select: "\e633"; +@icon-content-select: "\e632"; +@icon-content-ascending: "\e61e"; +@icon-content-descending: "\e61f"; +@icon-content-sorting: "\e634"; +@icon-content-switch: "\e6b3"; +@icon-content-arrow-double-right: "\e65e"; +@icon-content-arrow-double-left: "\e659"; +@icon-content-arrow-right: "\e619"; +@icon-content-arrow-left: "\e61d"; +@icon-content-arrow-down: "\e63d"; +@icon-content-arrow-up: "\e625"; +@icon-content-minus: "\e601"; +@icon-content-add: "\e655"; +@icon-content-favorites-filling: "\e60e"; +@icon-content-delete-filling: "\e623"; +@icon-content-success-filling: "\e63a"; +@icon-content-clock: "\e621"; +@icon-content-help: "\e673"; +@icon-content-error: "\e60d"; +@icon-content-prompt: "\e60c"; +@icon-content-warning: "\e60b"; +@icon-content-success: "\e60a"; +@icon-content-cry: "\e65d"; +@icon-content-smile: "\e65f"; + +// ------------------------ font ------------------------ // + +@font-weight-ultra-bold: 900; +@font-weight-extra-bold: 800; +@font-weight-3: bold; +@font-weight-semi-bold: 600; +@font-weight-medium: 500; +@font-weight-2: normal; +@font-weight-light: 300; +@font-weight-thin: 200; +@font-weight-1: lighter; +@font-size-body-2: 14px; +@font-size-subhead: 16px; +@font-size-title: 20px; +@font-size-headline: 24px; +@font-size-display-1: 36px; +@font-size-display-2: 48px; +@font-size-display-3: 56px; +@font-lineheight-3: 1.7; +@font-lineheight-2: 1.5; +@font-lineheight-1: 1.3; +@font-size-body-1: 14px; +@font-name-bold: roboto-bold; +@font-name-medium: roboto-medium; +@font-name-regular: roboto-regular; +@font-name-light: roboto-light; +@font-name-thin: roboto-thin; +@font-custom-name: Roboto; +@font-custom-path: "//i.alicdn.com/artascope-font/20160419204543/font/"; +@font-size-caption: 12px; +@font-family-base: Roboto,"Helvetica Neue",Helvetica,Tahoma,Arial,"PingFang SC","Microsoft YaHei"; + +// ------------------------ corner ------------------------ // + +@corner-zero: 0; +@corner-semicircle: 500px; +@corner-circle: 50%; +@corner-2: 8px; +@corner-3: 20px; +@corner-1: 4px; + +// ------------------------ color ------------------------ // + +@color-gradient-4: linear-gradient(270deg, rgb(255, 163, 166) 0%, rgb(245, 39, 67) 100%); +@color-gradient-3: linear-gradient(270deg, rgb(255, 237, 117) 0%, rgb(245, 203, 34) 100%); +@color-gradient-2: linear-gradient(270deg, rgb(125, 238, 255) 0%, rgb(3, 193, 253) 100%); +@color-gradient-1: linear-gradient(270deg, rgb(121, 232, 199) 0%, rgb(8, 194, 158) 100%); +@color-transparent: transparent; +@color-black: #000000; +@color-white: #FFFFFF; +@color-brand1-5: rgba(43,213,255,1); +@color-text1-4: rgba(31,38,51,1); +@color-text1-3: rgba(88,93,102,1); +@color-text1-2: rgba(141,146,153,1); +@color-text1-1: rgba(196,199,204,1); +@color-fill1-4: rgba(237,239,242,1); +@color-fill1-3: rgba(240,242,245,1); +@color-fill1-2: rgba(244,246,249,1); +@color-fill1-1: rgba(245,247,250,1); +@color-line1-4: rgba(196,199,204,1); +@color-line1-3: rgba(217,219,222,1); +@color-line1-2: rgba(220,223,230,1); +@color-line1-1: rgba(228,232,238,1); +@color-other-3: rgba(141,146,153,1); +@color-other-2: rgba(88,93,102,1); +@color-other-1: rgba(31,38,51,1); +@color-link-3: rgba(0,157,214,1); +@color-link-2: rgba(0,123,176,1); +@color-link-1: rgba(3,193,253,1); +@color-help-4: rgba(0,117,207,1); +@color-help-3: rgba(3,148,245,1); +@color-help-2: rgba(166,231,255,1); +@color-help-1: rgba(230,249,255,1); +@color-error-4: rgba(207,23,53,1); +@color-error-3: rgba(245,39,67,1); +@color-error-2: rgba(255,82,99,1); +@color-error-1: rgba(255,240,240,1); +@color-warning-4: rgba(207,163,19,1); +@color-warning-3: rgba(245,203,34,1); +@color-warning-2: rgba(255,251,199,1); +@color-warning-1: rgba(255,254,240,1); +@color-notice-4: rgba(0,157,214,1); +@color-notice-3: rgba(3,193,253,1); +@color-notice-2: rgba(163,241,250,1); +@color-notice-1: rgba(230,253,255,1); +@color-success-4: rgba(0,156,130,1); +@color-success-3: rgba(8,194,158,1); +@color-success-2: rgba(121,232,199,1); +@color-success-1: rgba(230,255,246,1); +@color-data1-8: rgba(3,148,245,1); +@color-data1-7: rgba(153,209,15,1); +@color-data1-6: rgba(8,194,158,1); +@color-data1-5: rgba(245,203,34,1); +@color-data1-4: rgba(245,115,21,1); +@color-data1-3: rgba(159,24,184,1); +@color-data1-2: rgba(90,28,184,1); +@color-data1-1: rgba(12,184,198,1); +@color-brand1-9: rgba(0,157,214,1); +@color-brand1-6: rgba(3,193,253,1); +@color-brand1-1: rgba(230,253,255,1); + +// ------------------------ search ------------------------ // + +@search-normal-dark-bg-opacity: 0; +@search-normal-corner: 4px; +@search-normal-primary-l-height: 36px; +@search-normal-primary-l-icon-size: 16px; +@search-normal-primary-l-btn-text-size: 14px; +@search-normal-primary-m-height: 36px; +@search-normal-secondary-l-height: 36px; +@search-normal-primary-color: @primary-color; +@search-normal-primary-hover-color: @primary-color; +@search-normal-primary-split-color: #e4e8ee; +@search-normal-primary-shadow: none; +@search-normal-primary-btn-text-color: #FFFFFF; +@search-normal-primary-btn-hover-bg-color: #009dd6; +@search-normal-primary-btn-hover-text-color: #FFFFFF; +@search-normal-primary-border-width: 2px; +@search-normal-primary-btn-text-padding-left: 0px; +@search-normal-primary-m-icon-size: 16px; +@search-normal-primary-m-btn-text-size: 16px; +@search-normal-secondary-color: #d9dbde; +@search-normal-secondary-split-color: #e4e8ee; +@search-normal-secondary-hover-color: @primary-color; +@search-normal-secondary-shadow: none; +@search-normal-secondary-btn-bg-color: @primary-color; +@search-normal-secondary-btn-text-color: #FFFFFF; +@search-normal-secondary-btn-hover-bg-color: #009dd6; +@search-normal-secondary-btn-hover-text-color: #FFFFFF; +@search-normal-secondary-border-width: 1px; +@search-normal-secondary-btn-text-padding-left: 0px; +@search-normal-secondary-l-icon-size: 24px; +@search-normal-secondary-l-btn-text-size: 16px; +@search-normal-secondary-m-height: 40px; +@search-normal-secondary-m-icon-size: 16px; +@search-normal-secondary-m-btn-text-size: 16px; +@search-normal-normal-color: #d9dbde; +@search-normal-normal-split-color: #e4e8ee; +@search-normal-normal-hover-color: #c4c7cc; +@search-normal-normal-shadow: none; +@search-normal-normal-btn-bg-color: #f5f7fa; +@search-normal-normal-btn-text-color: #585d66; +@search-normal-normal-btn-hover-bg-color: #f0f2f5; +@search-normal-normal-btn-hover-text-color: #1f2633; +@search-normal-normal-border-width: 1px; +@search-normal-normal-btn-text-padding-left: 0px; +@search-normal-normal-l-height: 60px; +@search-normal-normal-l-icon-size: 24px; +@search-normal-normal-l-btn-text-size: 16px; +@search-normal-normal-m-height: 40px; +@search-normal-normal-m-icon-size: 16px; +@search-normal-normal-m-btn-text-size: 16px; +@search-normal-dark-color: @primary-color; +@search-normal-dark-hover-color: @primary-color; +@search-normal-dark-text-color: #FFFFFF; +@search-normal-dark-bg-color: #FFFFFF; +@search-normal-dark-shadow: none; +@search-normal-dark-btn-text-color: #FFFFFF; +@search-normal-dark-btn-hover-bg-color: #009dd6; +@search-normal-dark-btn-hover-text-color: #FFFFFF; +@search-normal-dark-border-width: 1px; +@search-normal-dark-btn-text-padding-left: 0px; +@search-normal-dark-l-height: 60px; +@search-normal-dark-l-icon-size: 24px; +@search-normal-dark-l-btn-text-size: 16px; +@search-normal-dark-m-height: 40px; +@search-normal-dark-m-icon-size: 16px; +@search-normal-dark-m-btn-text-size: 16px; +@search-simple-corner: 4px; +@search-simple-l-icon-margin-right: 12px; +@search-simple-m-icon-margin-right: 8px; +@search-simple-normal-color: #d9dbde; +@search-simple-normal-hover-color: #c4c7cc; +@search-simple-normal-split-color: #d9dbde; +@search-simple-normal-shadow: none; +@search-simple-normal-icon-text-color: #8d9299; +@search-simple-normal-icon-hover-text-color: #585d66; +@search-simple-normal-border-width: 1px; +@search-simple-normal-l-icon-size: 20px; +@search-simple-normal-m-icon-size: 12px; +@search-simple-normal-btn-text-padding-left: 0px; +@search-simple-dark-color: #d9dbde; +@search-simple-dark-hover-color: #d9dbde; +@search-simple-dark-bg-color: #FFFFFF; +@search-simple-dark-bg-opacity: 0; +@search-simple-dark-text-color: #FFFFFF; +@search-simple-dark-shadow: none; +@search-simple-dark-icon-text-color: #8d9299; +@search-simple-dark-icon-hover-text-color: #585d66; +@search-simple-dark-btn-text-padding-left: 0px; +@search-simple-dark-split-color: #d9dbde; +@search-simple-dark-border-width: 1px; +@search-simple-dark-l-icon-size: 20px; +@search-simple-dark-m-icon-size: 12px; +@search-search-icon-content: ""; + +// ------------------------ dialog ------------------------ // + +@dialog-corner: 8px; +@dialog-border-width: 0px; +@dialog-title-padding-top: 20px; +@dialog-title-padding-bottom: 20px; +@dialog-title-padding-left-right: 20px; +@dialog-title-border-width: 1px; +@dialog-content-font-size: 14px; +@dialog-footer-padding-top: 12px; +@dialog-footer-padding-bottom: 20px; +@dialog-footer-button-spacing: 8px; +@dialog-close-top: 20px; +@dialog-close-right: 20px; +@dialog-close-size: 16px; +@dialog-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15); +@dialog-title-border-color: #e4e8ee; +@dialog-title-font-size: 16px; +@dialog-title-font-weight: normal; +@dialog-message-content-padding-top: 20px; +@dialog-message-content-padding-bottom: 20px; +@dialog-message-content-padding-left-right: 20px; +@dialog-content-padding-top: 20px; +@dialog-content-padding-bottom: 20px; +@dialog-content-padding-left-right: 20px; +@dialog-footer-border-width: 0px; +@dialog-footer-padding-left-right: 20px; +@dialog-close-width: 16px; +@dialog-bg: #FFFFFF; +@dialog-border-color: #dcdfe6; +@dialog-border-style: solid; +@dialog-title-color: #1f2633; +@dialog-title-bg-color: transparent; +@dialog-content-color: #585d66; +@dialog-footer-bg-color: transparent; +@dialog-footer-border-color: transparent; +@dialog-close-color: #8d9299; +@dialog-close-color-hovered: #1f2633; +@dialog-close-bg-hovered: transparent; + +// ------------------------ menu-button ------------------------ // + +@menu-btn-pure-text-primary-icon-color: #FFFFFF; +@menu-btn-disabled-icon-color: #c4c7cc; +@menu-btn-ghost-light-disabled-icon-color: rgba(0, 0, 0, 0.1); +@menu-btn-ghost-dark-disabled-icon-color: rgba(255, 255, 255, 0.4); +@menu-btn-pure-text-normal-icon-color: #8d9299; +@menu-btn-pure-text-secondary-icon-color: @primary-color; +@menu-btn-text-text-normal-icon-color: #1f2633; +@menu-btn-text-text-primary-icon-color: @primary-color; +@menu-btn-ghost-light-icon-color: #1f2633; +@menu-btn-ghost-dark-icon-color: #FFFFFF; +@menu-btn-fold-icon-content: ""; +@menu-btn-unfold-icon-content: @icon-reset; + +// ------------------------ card ------------------------ // + +@card-shadow: none; +@card-corner: 4px; +@card-padding-lr: 16px; +@card-border-width: 1px; +@card-head-padding-bottom: 12px; +@card-head-bottom-border-width: 1px; +@card-head-main-height: 40px; +@card-head-main-margin-top: 8px; +@card-head-main-margin-bottom: 0px; +@card-title-font-size: 16px; +@card-title-font-weight: normal; +@card-sub-title-font-size: 12px; +@card-title-extra-font-size: 14px; +@card-title-bullet-width: 3px; +@card-title-bullet-height: 16px; +@card-title-padding-left: 8px; +@card-sub-title-padding-left: 8px; +@card-body-show-divider-padding-top: 12px; +@card-body-hide-divider-padding-top: 0px; +@card-content-font-size: 14px; +@card-content-line-height: 1.5; +@card-body-padding-bottom: 12px; +@card-more-btn-height: 16px; +@card-more-btn-padding-top: 8px; +@card-more-btn-font-size: 14px; +@card-border-style: solid; +@card-border-color: #dcdfe6; +@card-background: #FFFFFF; +@card-header-background: #FFFFFF; +@card-title-color: #1f2633; +@card-sub-title-color: #585d66; +@card-title-extra-color: @primary-color; +@card-title-bullet-color: @primary-color; +@card-content-color: #585d66; +@card-head-bottom-border-color: #e4e8ee; +@card-more-btn-color: @primary-color; +@card-more-btn-background: #FFFFFF; + +// ------------------------ button ------------------------ // + +@btn-size-l-icon-size: 20px; +@btn-pure-primary-color: #FFFFFF; +@btn-pure-primary-color-hover: #FFFFFF; +@btn-pure-primary-color-active: #FFFFFF; +@btn-shadow: none; +@btn-shadow-hover: none; +@btn-size-m-icon-size: 16px; +@btn-size-m-icon-margin: 8px; +@btn-size-l-icon-margin: 8px; +@btn-pure-secondary-bg-hover: #2bd5ff; +@btn-pure-secondary-border-color-hover: #2bd5ff; +@btn-pure-primary-bg-hover: #2bd5ff; +@btn-warning-primary-border-color-hover: #ff5263; +@btn-warning-primary-bg-hover: #ff5263; +@btn-warning-normal-border-color-hover: #ff5263; +@btn-warning-normal-bg-hover: #ff5263; +@btn-size-s-height: 24px; +@btn-size-m-height: 32px; +@btn-size-s-padding: 8px; +@btn-size-s-border-width: 1px; +@btn-size-s-font: 12px; +@btn-size-s-icon-size: 12px; +@btn-size-s-icon-margin: 4px; +@btn-size-s-icon-split-size: 12px; +@btn-size-s-corner: 4px; +@btn-size-m-padding: 12px; +@btn-size-m-border-width: 1px; +@btn-size-m-font: 14px; +@btn-size-m-icon-split-size: 12px; +@btn-size-m-corner: 4px; +@btn-size-l-height: 40px; +@btn-size-l-padding: 16px; +@btn-size-l-border-width: 1px; +@btn-size-l-font: 16px; +@btn-size-l-icon-split-size: 16px; +@btn-size-l-corner: 4px; +@btn-pure-color-disabled: #c4c7cc; +@btn-pure-bg-disabled: #f5f7fa; +@btn-pure-border-color-disabled: #e4e8ee; +@btn-pure-normal-color-disabled: #c4c7cc; +@btn-pure-normal-bg-disabled: #f5f7fa; +@btn-pure-normal-border-color-disabled: #e4e8ee; +@btn-pure-normal-color: #1f2633; +@btn-pure-normal-color-hover: #1f2633; +@btn-pure-normal-color-active: #1f2633; +@btn-pure-normal-bg: #FFFFFF; +@btn-pure-normal-bg-hover: #f4f6f9; +@btn-pure-normal-bg-active: #f4f6f9; +@btn-pure-normal-border-color: #d9dbde; +@btn-pure-normal-border-color-hover: #c4c7cc; +@btn-pure-normal-border-color-active: #c4c7cc; +@btn-pure-normal-border-style: solid; +@btn-pure-secondary-color-disabled: #c4c7cc; +@btn-pure-secondary-bg-disabled: #f5f7fa; +@btn-pure-secondary-border-color-disabled: #e4e8ee; +@btn-pure-secondary-color: @primary-color; +@btn-pure-secondary-color-hover: #FFFFFF; +@btn-pure-secondary-color-active: #FFFFFF; +@btn-pure-secondary-bg: #FFFFFF; +@btn-pure-secondary-bg-active: #009dd6; +@btn-pure-secondary-border-color: @primary-color; +@btn-pure-secondary-border-color-active: #009dd6; +@btn-pure-secondary-border-style: solid; +@btn-pure-primary-color-disabled: #c4c7cc; +@btn-pure-primary-bg-disabled: #f5f7fa; +@btn-pure-primary-border-color-disabled: #e4e8ee; +@btn-pure-primary-bg: @primary-color; +@btn-pure-primary-bg-active: #009dd6; +@btn-pure-primary-border-color: transparent; +@btn-pure-primary-border-color-hover: transparent; +@btn-pure-primary-border-color-active: transparent; +@btn-pure-primary-border-style: solid; +@btn-ghost-border-style: solid; +@btn-ghost-dark-color: #FFFFFF; +@btn-ghost-dark-border-color: #FFFFFF; +@btn-ghost-dark-color-hover: #FFFFFF; +@btn-ghost-dark-bg: transparent; +@btn-ghost-dark-bg-opacity: 0; +@btn-ghost-dark-bg-hover-rgb: #FFFFFF; +@btn-ghost-dark-bg-hover-opacity: .8; +@btn-ghost-dark-border-color-hover: #FFFFFF; +@btn-ghost-dark-color-disabled-rgb: #FFFFFF; +@btn-ghost-dark-color-disabled-opacity: .4; +@btn-ghost-dark-bg-disabled: transparent; +@btn-ghost-dark-border-color-disabled-rgb: #FFFFFF; +@btn-ghost-dark-border-color-disabled-opacity: .4; +@btn-ghost-light-color: #1f2633; +@btn-ghost-light-border-color: #1f2633; +@btn-ghost-light-bg: transparent; +@btn-ghost-light-bg-opacity: 0; +@btn-ghost-light-color-hover: #8d9299; +@btn-ghost-light-border-color-hover: #1f2633; +@btn-ghost-light-bg-hover-rgb: #000000; +@btn-ghost-light-bg-hover-opacity: .92; +@btn-ghost-light-color-disabled-rgb: #000000; +@btn-ghost-light-color-disabled-opacity: .1; +@btn-ghost-light-bg-disabled: transparent; +@btn-ghost-light-border-color-disabled-rgb: #000000; +@btn-ghost-light-border-color-disabled-opacity: .1; +@btn-warning-border-style: solid; +@btn-warning-primary-color: #FFFFFF; +@btn-warning-primary-color-hover: #FFFFFF; +@btn-warning-primary-color-active: #FFFFFF; +@btn-warning-primary-border-color: #f52743; +@btn-warning-primary-border-color-active: #cf1735; +@btn-warning-primary-bg: #f52743; +@btn-warning-primary-bg-active: #cf1735; +@btn-warning-primary-color-disabled: #c4c7cc; +@btn-warning-primary-border-color-disabled: #dcdfe6; +@btn-warning-primary-bg-disabled: #f5f7fa; +@btn-warning-normal-color: #f52743; +@btn-warning-normal-color-hover: #FFFFFF; +@btn-warning-normal-color-active: #FFFFFF; +@btn-warning-normal-border-color: #f52743; +@btn-warning-normal-border-color-active: #cf1735; +@btn-warning-normal-bg: #FFFFFF; +@btn-warning-normal-bg-active: #cf1735; +@btn-warning-normal-color-disabled: #c4c7cc; +@btn-warning-normal-border-color-disabled: #e4e8ee; +@btn-warning-normal-bg-disabled: #f5f7fa; +@btn-text-primary-color: @primary-color; +@btn-text-primary-color-hover: #009dd6; +@btn-text-disabled-color: #c4c7cc; +@btn-text-loading-color: #1f2633; +@btn-text-secondary-color: #585d66; +@btn-text-secondary-color-hover: @primary-color; +@btn-text-normal-color: #1f2633; +@btn-text-normal-color-hover: @primary-color; +@btn-text-size-s-height: 16px; +@btn-text-size-s-font: 12px; +@btn-text-icon-size-s: 16px; +@btn-text-icon-s-margin: 4px; +@btn-text-size-m-height: 20px; +@btn-text-size-m-font: 14px; +@btn-text-icon-size-m: 20px; +@btn-text-icon-m-margin: 4px; +@btn-text-size-l-height: 24px; +@btn-text-size-l-font: 14px; +@btn-text-icon-size-l: 24px; +@btn-text-icon-l-margin: 4px; + +// ------------------------ form ------------------------ // + +@form-item-l-margin-b: 20px; +@form-label-padding-r: 12px; +@form-item-m-margin-b: 16px; +@form-item-s-margin-b: 12px; +@form-inline-l-item-margin-r: 24px; +@form-inline-m-item-margin-r: 20px; +@form-inline-s-item-margin-r: 16px; +@form-help-margin-top: 4px; +@form-help-font-size: 12px; +@form-help-color: #8d9299; +@form-error-color: #f52743; +@form-warning-color: #f5cb22; +@form-top-label-margin-b: 2px; +@form-label-color: #585d66; + +// ------------------------ nav ------------------------ // + +@nav-primary-bg-color: #1f2633; +@nav-primary-border-color: #1f2633; +@nav-primary-text-color: #FFFFFF; +@nav-primary-item-hover-bg-color: #000000; +@nav-normal-text-color: #1f2633; +@nav-normal-item-hover-text-color: #1f2633; +@nav-normal-item-selected-text-color: @primary-color; +@nav-icon-self-size: 16px; +@nav-primary-item-opened-bg-color: transparent; +@nav-secondary-item-hover-active-color: #FFFFFF; +@nav-secondary-item-selected-active-color: #FFFFFF; +@nav-secondary-item-opened-bg-color: transparent; +@nav-normal-item-hover-bg-color: #f4f6f9; +@nav-normal-item-hover-text-style: bold; +@nav-normal-item-hover-active-color: @primary-color; +@nav-normal-sub-nav-hover-text-color: #1f2633; +@nav-normal-item-selected-bg-color: #f4f6f9; +@nav-normal-item-opened-bg-color: transparent; +@nav-normal-item-opened-text-color: #1f2633; +@nav-line-item-hover-text-color: #000000; +@nav-line-item-hover-text-style: bold; +@nav-line-sub-nav-hover-text-color: #1f2633; +@nav-hoz-height: 44px; +@nav-hoz-font-size: 14px; +@nav-hoz-item-margin-tb: 0px; +@nav-hoz-item-margin-lr: 0px; +@nav-hoz-item-padding-lr: 20px; +@nav-hoz-item-corner: 0; +@nav-hoz-item-selected-active-line: 2px; +@nav-hoz-item-hover-active-line: 0px; +@nav-ver-height: 40px; +@nav-ver-font-size: 14px; +@nav-ver-item-margin-tb: 0px; +@nav-ver-item-margin-lr: 0px; +@nav-ver-item-padding-lr: 20px; +@nav-ver-item-corner: 0; +@nav-ver-item-selected-active-line: 2px; +@nav-ver-item-hover-active-line: 0px; +@nav-ver-sub-nav-height: 40px; +@nav-ver-sub-nav-font-size: 12px; +@nav-group-height: 40px; +@nav-group-font-size: 14px; +@nav-icon-self-margin: 4px; +@nav-icon-only-font-size: 16px; +@nav-primary-border-width: 0px; +@nav-primary-text-style: normal; +@nav-primary-shadow: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +@nav-primary-sub-nav-bg-color: #1f2633; +@nav-primary-sub-nav-text-color: #FFFFFF; +@nav-primary-sub-nav-text-style: normal; +@nav-primary-group-text-color: #8d9299; +@nav-primary-group-text-style: normal; +@nav-primary-item-hover-text-color: #FFFFFF; +@nav-primary-item-hover-text-style: normal; +@nav-primary-item-hover-active-color: @primary-color; +@nav-primary-sub-nav-hover-bg-color: #000000; +@nav-primary-sub-nav-hover-text-color: #FFFFFF; +@nav-primary-item-selected-bg-color: #000000; +@nav-primary-item-selected-text-color: #FFFFFF; +@nav-primary-item-selected-text-style: bold; +@nav-primary-item-childselected-bg-color: transparent; +@nav-primary-item-childselected-text-color: #FFFFFF; +@nav-primary-item-childselected-text-style: bold; +@nav-primary-item-selected-active-color: @primary-color; +@nav-primary-sub-nav-selected-bg-color: #000000; +@nav-primary-sub-nav-selected-text-color: #FFFFFF; +@nav-primary-sub-nav-active-color: @primary-color; +@nav-primary-item-disabled-text-color: #c4c7cc; +@nav-primary-item-opened-text-color: #FFFFFF; +@nav-secondary-bg-color: @primary-color; +@nav-secondary-border-width: 0px; +@nav-secondary-border-color: @primary-color; +@nav-secondary-text-color: #FFFFFF; +@nav-secondary-text-style: normal; +@nav-secondary-shadow: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +@nav-secondary-sub-nav-bg-color: @primary-color; +@nav-secondary-sub-nav-text-color: #FFFFFF; +@nav-secondary-sub-nav-text-style: normal; +@nav-secondary-group-text-color: #FFFFFF; +@nav-secondary-group-text-style: normal; +@nav-secondary-item-hover-bg-color: #009dd6; +@nav-secondary-item-hover-text-color: #FFFFFF; +@nav-secondary-item-hover-text-style: normal; +@nav-secondary-sub-nav-hover-bg-color: #009dd6; +@nav-secondary-sub-nav-hover-text-color: #FFFFFF; +@nav-secondary-item-selected-bg-color: #009dd6; +@nav-secondary-item-selected-text-color: #FFFFFF; +@nav-secondary-item-selected-text-style: bold; +@nav-secondary-item-childselected-bg-color: transparent; +@nav-secondary-item-childselected-text-color: #FFFFFF; +@nav-secondary-item-childselected-text-style: bold; +@nav-secondary-sub-nav-selected-bg-color: #009dd6; +@nav-secondary-sub-nav-selected-text-color: #FFFFFF; +@nav-secondary-sub-nav-active-color: @primary-color; +@nav-secondary-item-disabled-text-color: #e6fdff; +@nav-secondary-item-opened-text-color: #FFFFFF; +@nav-normal-bg-color: #FFFFFF; +@nav-normal-border-color: #e4e8ee; +@nav-normal-text-style: normal; +@nav-normal-border-line: 1px; +@nav-normal-shadow: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +@nav-normal-sub-nav-bg-color: #FFFFFF; +@nav-normal-sub-nav-text-color: #1f2633; +@nav-normal-sub-nav-text-style: normal; +@nav-normal-group-text-color: #8d9299; +@nav-normal-group-text-style: normal; +@nav-normal-sub-nav-hover-bg-color: #f4f6f9; +@nav-normal-item-selected-text-style: bold; +@nav-normal-item-childselected-bg-color: transparent; +@nav-normal-item-childselected-text-color: @primary-color; +@nav-normal-item-childselected-text-style: normal; +@nav-normal-item-selected-active-color: @primary-color; +@nav-normal-sub-nav-selected-bg-color: #f4f6f9; +@nav-normal-sub-nav-selected-text-color: @primary-color; +@nav-normal-sub-nav-active-color: @primary-color; +@nav-normal-item-disabled-text-color: #8d9299; +@nav-line-bg-color: transparent; +@nav-line-border-color: #dcdfe6; +@nav-line-text-color: #1f2633; +@nav-line-text-style: normal; +@nav-line-border-line: 1px; +@nav-line-sub-nav-bg-color: transparent; +@nav-line-sub-nav-text-color: #1f2633; +@nav-line-sub-nav-text-style: normal; +@nav-line-item-hover-bg-color: transparent; +@nav-line-item-hover-active-color: @primary-color; +@nav-line-sub-nav-hover-bg-color: transparent; +@nav-line-item-selected-bg-color: transparent; +@nav-line-item-selected-text-color: @primary-color; +@nav-line-item-selected-text-style: bold; +@nav-line-item-childselected-bg-color: transparent; +@nav-line-item-childselected-text-color: @primary-color; +@nav-line-item-childselected-text-style: normal; +@nav-line-item-selected-active-color: @primary-color; +@nav-line-sub-nav-selected-bg-color: transparent; +@nav-line-sub-nav-selected-text-color: @primary-color; +@nav-line-sub-nav-active-color: @primary-color; +@nav-line-item-disabled-text-color: #8d9299; +@nav-line-item-opened-bg-color: transparent; +@nav-line-item-opened-text-color: @primary-color; +@nav-line-group-text-color: #8d9299; +@nav-line-group-text-style: normal; + +// ------------------------ tab ------------------------ // + +@tab-wrapped-border-line-color-hover: #d9dbde; +@tab-nav-scroll-padding-right-m: 60px; +@tab-nav-scroll-padding-right-s: 56px; +@tab-nav-tab-icon-size-m: 16px; +@tab-nav-tab-icon-size-s: 12px; +@tab-nav-close-icon-size-m: 12px; +@tab-nav-close-icon-size-s: 8px; +@tab-nav-close-icon-padding-l-size-m: 8px; +@tab-nav-close-icon-padding-l-size-s: 8px; +@tab-nav-arrow-left-positon-right: 32px; +@tab-nav-arrow-right-positon-right: 8px; +@tab-nav-arrow-down-positon-right: 8px; +@tab-item-padding-tb-size-m: 12px; +@tab-item-padding-tb-size-s: 8px; +@tab-item-padding-lr-size-m: 16px; +@tab-item-padding-lr-size-s: 12px; +@tab-item-text-size-m: 14px; +@tab-item-text-size-s: 12px; +@tab-close-icon-color: #585d66; +@tab-close-icon-color-hover: #1f2633; +@tab-close-icon-color-selected: @primary-color; +@tab-close-icon-color-disabled: #dcdfe6; +@tab-item-font-weight-selected: normal; +@tab-nav-arrow-color-normal: #585d66; +@tab-nav-arrow-color-hover: #1f2633; +@tab-nav-arrow-color-disabled: #dcdfe6; +@tab-pure-divider-line-width: 1px; +@tab-pure-ink-bar-width: 2px; +@tab-pure-text-color-normal: #585d66; +@tab-pure-bg-color: transparent; +@tab-pure-text-color-hover: #1f2633; +@tab-pure-text-color-selected: @primary-color; +@tab-pure-text-color-disabled: #dcdfe6; +@tab-pure-ink-bar-color: @primary-color; +@tab-pure-divider-border-color: #dcdfe6; +@tab-pure-divider-shadow: none; +@tab-wrapped-border-line-style: solid; +@tab-wrapped-border-line-width: 1px; +@tab-wrapped-border-side-width: 1px; +@tab-wrapped-tab-corner-radius: 4px; +@tab-wrapped-tab-margin-right: 4px; +@tab-wrapped-tab-margin-bottom: 4px; +@tab-wrapped-ink-bar-width: 2px; +@tab-wrapped-bar-bg-color: transparent; +@tab-wrapped-ink-bar-color: @primary-color; +@tab-wrapped-nav-item-border-color-active: @primary-color; +@tab-wrapped-border-line-color: #dcdfe6; +@tab-wrapped-content-border-line-width: 1px; +@tab-wrapped-content-border-line-style: solid; +@tab-wrapped-content-border-line-color: #dcdfe6; +@tab-wrapped-text-color: #585d66; +@tab-wrapped-text-color-hover: #1f2633; +@tab-wrapped-bg-color: #f4f6f9; +@tab-wrapped-bg-color-hover: #f0f2f5; +@tab-wrapped-text-color-selected: @primary-color; +@tab-wrapped-text-color-disabled: #c4c7cc; +@tab-wrapped-bg-color-selected: #FFFFFF; +@tab-wrapped-bg-color-disabled: #f5f7fa; +@tab-capsule-text-color: #1f2633; +@tab-capsule-text-color-hover: #1f2633; +@tab-capsule-text-color-selected: #FFFFFF; +@tab-capsule-text-color-disabled: #c4c7cc; +@tab-capsule-bg-color: #f4f6f9; +@tab-capsule-bg-color-hover: #f0f2f5; +@tab-capsule-bg-color-selected: @primary-color; +@tab-capsule-bg-color-disabled: #f5f7fa; +@tab-capsule-tab-border-line-color: #d9dbde; +@tab-capsule-tab-border-line-color-hover: #d9dbde; +@tab-capsule-tab-border-line-color-active: @primary-color; +@tab-capsule-tab-border-line-color-disabled: #e4e8ee; +@tab-capsule-corner-radius: 4px; +@tab-capsule-tab-border-line-width: 1px; +@tab-capsule-tab-border-line-style: solid; +@tab-text-item-sep-width: 1px; +@tab-text-item-sep-height: 8px; +@tab-text-item-sep-color: #dcdfe6; +@tab-text-text-color-normal: #585d66; +@tab-text-text-color-hover: #1f2633; +@tab-text-text-color-selected: @primary-color; +@tab-text-text-color-disabled: #c4c7cc; +@tab-icon-dropdown-content: ""; +@tab-icon-prev-content: ""; +@tab-icon-next-content: ""; + +// ------------------------ calendar ------------------------ // + +@calendar-fullscreen-table-cell-hover-background: #e6fdff; +@calendar-btn-arrow-size: 16px; +@calendar-fullscreen-header-margin-bottom: 8px; +@calendar-fullscreen-table-head-font-weight: bold; +@calendar-fullscreen-table-head-font-size: 16px; +@calendar-fullscreen-table-head-padding-r: 12px; +@calendar-fullscreen-table-head-padding-b: 4px; +@calendar-fullscreen-table-cell-font-size: 14px; +@calendar-fullscreen-table-cell-boder-top-width: 2px; +@calendar-fullscreen-table-cell-margin-tb: 0px; +@calendar-fullscreen-table-cell-margin-lr: 4px; +@calendar-fullscreen-table-cell-padding-tb: 4px; +@calendar-fullscreen-table-cell-padding-lr: 8px; +@calendar-fullscreen-table-cell-min-height: 80px; +@calendar-fullscreen-table-head-color: #1f2633; +@calendar-fullscreen-table-cell-normal-background: #FFFFFF; +@calendar-fullscreen-table-cell-normal-color: #1f2633; +@calendar-fullscreen-table-cell-normal-border-color: #dcdfe6; +@calendar-fullscreen-table-cell-hover-color: @primary-color; +@calendar-fullscreen-table-cell-hover-border-color: @primary-color; +@calendar-fullscreen-table-cell-select-background: #e6fdff; +@calendar-fullscreen-table-cell-select-color: @primary-color; +@calendar-fullscreen-table-cell-select-border-color: @primary-color; +@calendar-fullscreen-table-cell-select-font-weight: bold; +@calendar-fullscreen-table-cell-current-background: #FFFFFF; +@calendar-fullscreen-table-cell-current-color: @primary-color; +@calendar-fullscreen-table-cell-current-border-color: @primary-color; +@calendar-fullscreen-table-cell-current-font-weight: bold; +@calendar-fullscreen-table-cell-other-background: transparent; +@calendar-fullscreen-table-cell-other-color: #c4c7cc; +@calendar-fullscreen-table-cell-other-border-color: transparent; +@calendar-fullscreen-table-cell-disabled-background: #f5f7fa; +@calendar-fullscreen-table-cell-disabled-color: #c4c7cc; +@calendar-fullscreen-table-cell-disabled-border-color: #e4e8ee; +@calendar-card-header-margin-bottom: 8px; +@calendar-card-table-head-font-size: 12px; +@calendar-card-table-head-font-weight: normal; +@calendar-card-table-cell-font-size: 12px; +@calendar-card-table-cell-date-border-radius: 4px; +@calendar-card-table-cell-date-width: 24px; +@calendar-card-table-cell-date-height: 24px; +@calendar-card-table-cell-month-border-radius: 4px; +@calendar-card-table-cell-month-width: 60px; +@calendar-card-table-cell-month-height: 24px; +@calendar-card-table-cell-year-border-radius: 4px; +@calendar-card-table-cell-year-width: 48px; +@calendar-card-table-cell-year-height: 24px; +@calendar-card-table-head-color: #8d9299; +@calendar-card-table-cell-corner: 0; +@calendar-card-table-cell-normal-background: #FFFFFF; +@calendar-card-table-cell-normal-color: #585d66; +@calendar-card-table-cell-normal-border-color: #FFFFFF; +@calendar-card-table-cell-hover-background: #e6fdff; +@calendar-card-table-cell-hover-color: @primary-color; +@calendar-card-table-cell-hover-border-color: #e6fdff; +@calendar-card-table-cell-select-background: @primary-color; +@calendar-card-table-cell-select-color: #FFFFFF; +@calendar-card-table-cell-select-border-color: @primary-color; +@calendar-card-table-cell-select-font-weight: bold; +@calendar-card-table-cell-other-background: #FFFFFF; +@calendar-card-table-cell-other-color: #c4c7cc; +@calendar-card-table-cell-other-border-color: #FFFFFF; +@calendar-card-table-cell-disabled-background: #f5f7fa; +@calendar-card-table-cell-disabled-color: #c4c7cc; +@calendar-card-table-cell-disabled-border-color: #f5f7fa; +@calendar-card-table-cell-current-background: #FFFFFF; +@calendar-card-table-cell-current-color: @primary-color; +@calendar-card-table-cell-current-border-color: transparent; +@calendar-card-table-cell-current-font-weight: bold; +@calendar-card-table-cell-inrange-background: #e6fdff; +@calendar-card-table-cell-inrange-color: @primary-color; +@calendar-card-table-cell-inrange-border-color: #e6fdff; +@calendar-panel-header-margin-bottom: 8px; +@calendar-panel-header-height: 32px; +@calendar-panel-header-border-bottom-width: 1px; +@calendar-panel-header-background: @primary-color; +@calendar-panel-header-border-bottom-color: transparent; +@calendar-btn-date-font-weight: bold; +@calendar-btn-date-margin-lr: 4px; +@calendar-btn-arrow-single-offset-lr: 28px; +@calendar-btn-arrow-double-offset-lr: 8px; +@calendar-btn-arrow-color: #FFFFFF; +@calendar-btn-arrow-color-hover: #FFFFFF; +@calendar-btn-date-color: #FFFFFF; +@calendar-btn-date-color-hover: #FFFFFF; +@calendar-btn-arrow-content-prev: ""; +@calendar-btn-arrow-content-next: ""; +@calendar-btn-arrow-content-prev-super: ""; +@calendar-btn-arrow-content-next-super: ""; + +// ------------------------ checkbox ------------------------ // + +@checkbox-circle-size: 16px; +@checkbox-margin-left: 8px; +@checkbox-size: 16px; +@checkbox-border-radius: 4px; +@checkbox-border-width: 1px; +@checkbox-shadow: none; +@checkbox-border-color: #d9dbde; +@checkbox-hovered-border-color: @primary-color; +@checkbox-checked-border-color: transparent; +@checkbox-disabled-border-color: #e4e8ee; +@checkbox-checked-hovered-border-color: transparent; +@checkbox-checked-circle-color: #FFFFFF; +@checkbox-label-color: #1f2633; +@checkbox-disabled-label-color: #c4c7cc; +@checkbox-disabled-circle-color: #c4c7cc; +@checkbox-checked-hovered-circle-color: #FFFFFF; +@checkbox-bg-color: #FFFFFF; +@checkbox-checked-bg-color: @primary-color; +@checkbox-hovered-bg-color: #e6fdff; +@checkbox-checked-hovered-bg-color: #009dd6; +@checkbox-disabled-bg-color: #f5f7fa; +@checkbox-font-size: 14px; +@checkbox-semi-select-icon-content: ""; +@checkbox-select-icon-content: ""; + +// ------------------------ cascader ------------------------ // + +@cascader-menu-width: 104px; +@cascader-menu-icon-expand-size: 16px; +@cascader-menu-border-width: 1px; +@cascader-menu-min-width: 100px; +@cascader-menu-height: 192px; +@cascader-menu-border-color: #dcdfe6; +@cascader-menu-border-radius: 4px; +@cascader-menu-icon-expand-color: #585d66; +@cascader-menu-icon-hover-expand-color: #1f2633; +@cascader-menu-item-expanded-color: #1f2633; +@cascader-menu-item-expanded-background-color: #f4f6f9; + +// ------------------------ tree ------------------------ // + +@tree-switch-arrow-size: 16px; +@tree-switch-icon-size: 12px; +@tree-switcher-fold-icon-content: ""; +@tree-switcher-unfold-icon-content: ""; +@tree-node-padding: 4px; +@tree-node-title-margin: 4px; +@tree-node-title-padding: 4px; +@tree-node-title-font-size: 14px; +@tree-switch-size: 16px; +@tree-switch-border-width: 1px; +@tree-switch-margint-right: 8px; +@tree-line-width: 1px; +@tree-node-normal-color: #1f2633; +@tree-node-normal-background: #FFFFFF; +@tree-node-title-border-radius: 4px; +@tree-switch-arrow-color: #8d9299; +@tree-switch-icon-color: #585d66; +@tree-switch-bg-color: #FFFFFF; +@tree-switch-border-color: #d9dbde; +@tree-switch-corner: 4px; +@tree-line-color: #d9dbde; +@tree-line-style: solid; +@tree-node-hover-color: #1f2633; +@tree-node-hover-bg-color: #f4f6f9; +@tree-switch-hover-arrow-color: #1f2633; +@tree-switch-hover-icon-color: #1f2633; +@tree-switch-hover-bg-color: #f4f6f9; +@tree-switch-hover-border-color: #c4c7cc; +@tree-node-selected-color: #1f2633; +@tree-node-selected-background: #e6fdff; +@tree-node-disabled-color: #c4c7cc; +@tree-node-disabled-background: #FFFFFF; +@tree-fold-icon-content: ""; +@tree-unfold-icon-content: @icon-reset; + +// ------------------------ switch ------------------------ // + +@switch-size-m-width: 48px; +@switch-size-m-trigger: 24px; +@switch-border-width-container: 2px; +@switch-border-width-trigger: 1px; +@switch-on-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +@switch-normal-off-bg-color: #f0f2f5; +@switch-hover-off-bg-color: #f0f2f5; +@switch-disabled-off-bg-color: #f0f2f5; +@switch-disabled-off-trigger-bg-color: #f5f7fa; +@switch-handle-disabled-border-color: transparent; +@switch-normal-off-border-color: #f0f2f5; +@switch-hover-off-border-color: #f0f2f5; +@switch-size-m-trigger-padding-l: 6px; +@switch-size-m-trigger-padding-r: 6px; +@switch-size-m-radius-container: 20px; +@switch-size-m-radius-trigger: 20px; +@switch-size-m-inner-icon: 16px; +@switch-size-s-width: 44px; +@switch-size-s-radius-container: 20px; +@switch-size-s-trigger: 20px; +@switch-size-s-radius-trigger: 20px; +@switch-size-s-inner-icon: 12px; +@switch-size-s-trigger-padding-l: 8px; +@switch-size-s-trigger-padding-r: 8px; +@switch-normal-on-bg-color: @primary-color; +@switch-hover-on-bg-color: #009dd6; +@switch-disabled-on-bg-color: #f0f2f5; +@switch-normal-on-trigger-bg-color: #FFFFFF; +@switch-hover-on-trigger-bg-color: #FFFFFF; +@switch-disabled-on-trigger-bg-color: #f5f7fa; +@switch-normal-on-color-font: #FFFFFF; +@switch-disabled-on-color-font: #c4c7cc; +@switch-disabled-on-border-color: #d9dbde; +@switch-handle-on-border-color: transparent; +@switch-normal-off-trigger-bg-color: #FFFFFF; +@switch-hover-off-trigger-bg-color: #FFFFFF; +@switch-normal-off-color-font: #8d9299; +@switch-disabled-off-color-font: #d9dbde; +@switch-handle-off-border-color: transparent; +@switch-off-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.16); +@switch-rtl-on-shadow: -1px 0px 4px 0px rgba(0, 0, 0, 0.16); + +// ------------------------ tag ------------------------ // + +@tag-size-l-icon-font: 20px; +@tag-size-m-icon-font: 16px; +@tag-size-s-icon-font: 12px; +@tag-checkable-primary-text-color-disabled: #c4c7cc; +@tag-checkable-primary-border-color-disabled: #f0f2f5; +@tag-checkable-primary-bg-color-disabled: #f0f2f5; +@tag-size-l-height: 40px; +@tag-size-m-height: 28px; +@tag-size-s-height: 20px; +@tag-size-l-spacing: 16px; +@tag-size-m-spacing: 12px; +@tag-size-s-spacing: 8px; +@tag-size-l-padding-lr: 16px; +@tag-size-m-padding-lr: 12px; +@tag-size-s-padding-lr: 8px; +@tag-corner-radius: 4px; +@tag-checkable-corner-radius: 4px; +@tag-border-width: 1px; +@tag-shadow: none; +@tag-size-l-text-size: 16px; +@tag-size-m-text-size: 14px; +@tag-size-s-text-size: 12px; +@tag-size-s-content-min-width: 28px; +@tag-size-m-content-min-width: 40px; +@tag-size-l-content-min-width: 48px; +@tag-size-l-tick-icon-size: 16px; +@tag-size-m-tick-icon-size: 12px; +@tag-size-s-tick-icon-size: 8px; +@tag-size-l-tick-icon-bg-size: 36px; +@tag-size-m-tick-icon-bg-size: 28px; +@tag-size-s-tick-icon-bg-size: 20px; +@tag-normal-text-color: #1f2633; +@tag-fill-text-color: #585d66; +@tag-closable-normal-icon-color: #FFFFFF; +@tag-closable-normal-icon-color-hover: #FFFFFF; +@tag-closable-normal-icon-color-disabled: #FFFFFF; +@tag-closable-normal-bg: #d9dbde; +@tag-closable-normal-bg-hover: #c4c7cc; +@tag-closable-normal-bg-disabled: #e4e8ee; +@tag-closable-bordered-text-color: #585d66; +@tag-closable-bordered-border-color: #d9dbde; +@tag-closable-bordered-bg: transparent; +@tag-closable-bordered-text-color-hover: #1f2633; +@tag-closable-bordered-border-color-hover: #c4c7cc; +@tag-closable-bordered-bg-hover: transparent; +@tag-closable-bordered-tail-color: #585d66; +@tag-closable-bordered-tail-color-hover: #1f2633; +@tag-closable-bordered-tail-color-disabled: #c4c7cc; +@tag-closable-bordered-border-color-disabled: #e4e8ee; +@tag-closable-bordered-text-color-disabled: #c4c7cc; +@tag-closable-bordered-bg-disabled: transparent; +@tag-fill-tail-color: #585d66; +@tag-fill-border-color: #f0f2f5; +@tag-fill-border-color-hover: #edeff2; +@tag-fill-text-color-disabled: #c4c7cc; +@tag-fill-border-color-disabled: #f5f7fa; +@tag-fill-bg-color-disabled: #f5f7fa; +@tag-fill-tail-color-disabled: #c4c7cc; +@tag-bordered-text-color: #585d66; +@tag-bordered-tail-color: #585d66; +@tag-secondary-text-color: @primary-color; +@tag-normal-text-color-hover: @primary-color; +@tag-fill-text-color-hover: #1f2633; +@tag-fill-tail-color-hover: #1f2633; +@tag-bordered-text-color-hover: #1f2633; +@tag-bordered-tail-color-hover: #1f2633; +@tag-bordered-tail-color-disabled: #c4c7cc; +@tag-bordered-text-color-disabled: #c4c7cc; +@tag-bordered-border-color-disabled: #e4e8ee; +@tag-bordered-bg-disabled: #f5f7fa; +@tag-secondary-text-color-hover: #009dd6; +@tag-bordered-border-color: #d9dbde; +@tag-secondary-border-color: @primary-color; +@tag-checkable-normal-bg-selected: @primary-color; +@tag-checkable-secondary-bg-selected: @primary-color; +@tag-bordered-border-color-hover: #c4c7cc; +@tag-secondary-border-color-hover: #009dd6; +@tag-checkable-normal-bg-selected-hover: #009dd6; +@tag-checkable-secondary-bg-selected-hover: #009dd6; +@tag-fill-bg-color: #f0f2f5; +@tag-primary-background-color: @primary-color; +@tag-bordered-bg: transparent; +@tag-secondary-bg: transparent; +@tag-fill-bg-color-hover: #edeff2; +@tag-bordered-bg-hover: transparent; +@tag-secondary-bg-hover: transparent; +@tag-text-color-disabled: #c4c7cc; +@tag-border-color-disabled: #e4e8ee; +@tag-checkable-fill-text-color: #585d66; +@tag-checkable-fill-bg-color: #f0f2f5; +@tag-checkable-fill-border-color: #f0f2f5; +@tag-checkable-fill-text-color-hover: #1f2633; +@tag-checkable-fill-bg-color-hover: #edeff2; +@tag-checkable-fill-border-color-hover: #edeff2; +@tag-checkable-fill-tail-color: #585d66; +@tag-checkable-fill-tail-color-hover: #1f2633; +@tag-checkable-fill-tail-color-disabled: #c4c7cc; +@tag-checkable-fill-text-color-disabled: #c4c7cc; +@tag-checkable-fill-border-color-disabled: #f5f7fa; +@tag-checkable-fill-bg-color-disabled: #f5f7fa; +@tag-checkable-normal-text-color: #585d66; +@tag-checkable-normal-border-color: #d9dbde; +@tag-checkable-normal-bg: transparent; +@tag-checkable-normal-text-color-hover: #1f2633; +@tag-checkable-normal-border-color-hover: #d9dbde; +@tag-checkable-normal-bg-hover: transparent; +@tag-checkable-normal-text-selected-disabled: #c4c7cc; +@tag-checkable-normal-border-selected-disabled: #e4e8ee; +@tag-checkable-normal-bg-selected-disabled: #f5f7fa; +@tag-checkable-normal-tick-bg-selected-disabled: #e4e8ee; +@tag-checkable-primary-text-color: #FFFFFF; +@tag-checkable-primary-bg-color: @primary-color; +@tag-checkable-primary-border-color: @primary-color; +@tag-checkable-primary-text-color-hover: #FFFFFF; +@tag-checkable-primary-bg-color-hover: #009dd6; +@tag-checkable-primary-border-color-hover: #009dd6; +@tag-checkable-primary-tail-color: #FFFFFF; +@tag-checkable-primary-tail-color-hover: #FFFFFF; +@tag-checkable-secondary-bg-selected-disabled: #e4e8ee; +@tag-checkable-normal-icon-color-selected: #FFFFFF; +@tag-checkable-normal-icon-color-selected-hover: #FFFFFF; +@tag-checkable-normal-icon-color-selected-disabled: #FFFFFF; +@tag-checkable-secondary-icon-color-selected: #FFFFFF; +@tag-checkable-secondary-icon-color-selected-hover: #FFFFFF; +@tag-checkable-secondary-icon-color-selected-disabled: #FFFFFF; +@tag-closable-primary-fill-text-color: #585d66; +@tag-closable-primary-fill-border-color: #f0f2f5; +@tag-closable-primary-fill-bg-color: #f0f2f5; +@tag-closable-primary-fill-text-color-hover: #1f2633; +@tag-closable-primary-fill-border-color-hover: #edeff2; +@tag-closable-primary-fill-bg-color-hover: #edeff2; +@tag-closable-primary-fill-text-color-disabled: #c4c7cc; +@tag-closable-primary-fill-border-color-disabled: #f5f7fa; +@tag-closable-primary-fill-bg-color-disabled: #f5f7fa; + +// ------------------------ input ------------------------ // + +@input-border-color: #dcdfe6; +@input-focus-shadow-spread: 2px; +@input-placeholder-color: #c4c7cc; +@input-multiple-padding-tb: 8px; +@input-m-padding: 8px; +@input-s-padding: 8px; +@input-text-color: #1f2633; +@input-label-color: #585d66; +@input-hover-border-color: #c4c7cc; +@input-hover-bg-color: #FFFFFF; +@input-focus-border-color: @primary-color; +@input-focus-bg-color: #FFFFFF; +@input-border-width: 1px; +@input-bg-color: #FFFFFF; +@input-disabled-color: #c4c7cc; +@input-disabled-border-color: #e4e8ee; +@input-disabled-bg-color: #f5f7fa; +@input-multiple-padding-lr: 8px; +@input-multiple-font-size: 14px; +@input-multiple-corner: 4px; +@input-addon-bg-color: #f4f6f9; +@input-addon-text-color: #8d9299; +@input-addon-padding: 8px; +@input-l-padding: 12px; +@input-l-label-padding-left: 12px; +@input-l-icon-padding-right: 8px; +@input-m-label-padding-left: 8px; +@input-m-icon-padding-right: 8px; +@input-s-label-padding-left: 8px; +@input-s-icon-padding-right: 4px; +@input-feedback-warning-border-color: #f5cb22; +@input-feedback-warning-bg-color: #FFFFFF; +@input-feedback-warning-color: #f5cb22; +@input-feedback-warning-icon: ""; +@input-feedback-success-color: #08c29e; +@input-feedback-success-icon: ""; +@input-feedback-loading-color: @primary-color; +@input-feedback-loading-icon: ""; +@input-feedback-error-color: #1f2633; +@input-feedback-error-border-color: #f52743; +@input-feedback-error-bg-color: #FFFFFF; +@input-maxlen-error-color: #f52743; +@input-maxlen-warning-color: #f5cb22; +@input-maxlen-color: #8d9299; +@input-maxlen-font-size: 12px; +@input-hint-color: #8d9299; +@input-hint-hover-color: #585d66; +@input-feedback-clear-icon: ""; + +// ------------------------ upload ------------------------ // + +@upload-text-list-close-icon-size: 16px; +@upload-image-list-close-icon-size: 16px; +@upload-disable-text-color: #c4c7cc; +@upload-disable-border-color: #e4e8ee; +@upload-text-list-height: 40px; +@upload-text-list-padding-left-right: 8px; +@upload-text-list-font-size: 14px; +@upload-text-list-close-icon-right: 12px; +@upload-text-list-corner: 0; +@upload-text-list-bg-color: #f4f6f9; +@upload-text-list-bg-color-hover: #f4f6f9; +@upload-text-list-bg-color-error: #fff0f0; +@upload-text-list-error-text-color: #f52743; +@upload-text-list-close-icon-color: #8d9299; +@upload-text-list-close-icon-color-hover: #585d66; +@upload-text-list-name-font-color: #1f2633; +@upload-text-list-name-font-color-hover: @primary-color; +@upload-text-list-size-font-color: #8d9299; +@upload-text-list-size-font-color-hover: @primary-color; +@upload-text-list-progressbar-height: 8px; +@upload-image-list-item-padding: 8px; +@upload-image-list-item-picture-size: 48px; +@upload-image-list-item-picture-icon-size: 24px; +@upload-image-list-item-picture-border-width: 1px; +@upload-image-list-item-picture-corner: 0; +@upload-image-list-item-thumbnail-font-color: #c4c7cc; +@upload-image-list-item-font-size: 14px; +@upload-image-list-close-icon-right: 4px; +@upload-image-list-item-border-width: 1px; +@upload-image-list-item-bg-color: #FFFFFF; +@upload-image-list-item-uploading-bg-color: #FFFFFF; +@upload-image-list-item-error-bg-color: #FFFFFF; +@upload-image-list-close-icon-color: #8d9299; +@upload-image-list-close-icon-color-hover: #585d66; +@upload-image-list-item-border-color: #dcdfe6; +@upload-image-list-item-border-color-error: #f52743; +@upload-image-list-item-border-color-hover: @primary-color; +@upload-image-list-item-picture-border-color: #dcdfe6; +@upload-image-list-item-picture-background-color: #f4f6f9; +@upload-image-list-progressbar-height: 8px; +@upload-card-size: 100px; +@upload-card-margin-bottom: 16px; +@upload-card-add-icon-size: 24px; +@upload-card-add-text-size: 14px; +@upload-card-add-text-margin-top: 12px; +@upload-card-bg-color: #FFFFFF; +@upload-card-border-style: dashed; +@upload-card-border-color: #d9dbde; +@upload-card-hover-border-color: @primary-color; +@upload-card-font-color: #585d66; +@upload-card-icon-color: #d9dbde; +@upload-card-hover-font-color: @primary-color; +@upload-card-add-icon: ""; +@upload-card-list-bg-color: transparent; +@upload-card-list-uploading-bg-color: #f5f7fa; +@upload-card-list-bg-color-error: #f5f7fa; +@upload-card-list-margin-right: 12px; +@upload-card-list-padding: 0px; +@upload-card-list-corner: 0; +@upload-card-list-border-color: #d9dbde; +@upload-card-list-border-color-error: #f52743; +@upload-card-list-thumbnail-font-color: #c4c7cc; +@upload-card-list-thumbnail-font-size: 12px; +@upload-card-list-thumbnail-icon-size: 48px; +@upload-card-list-name-margin-top: 4px; +@upload-card-list-name-font-size: 12px; +@upload-card-list-name-font-color: #585d66; +@upload-card-list-progressbar-height: 8px; +@upload-select-card-tool-bg-color: #000000; +@upload-select-card-tool-bg-opacity: .7; +@upload-drag-zone-border-color: #d9dbde; +@upload-drag-zone-over-border-color: @primary-color; +@upload-drag-zone-corner: 4px; +@upload-drag-zone-font-size: 14px; +@upload-drag-zone-icon-size: 24px; +@upload-drag-zone-hint-font-size: 12px; +@upload-drag-zone-bg-color: transparent; +@upload-drag-zone-upload-icon: ""; +@upload-drag-zone-upload-icon-color: #585d66; +@upload-drag-zone-upload-normal-title-color: #585d66; +@upload-drag-zone-upload-normal-hint-color: #8d9299; + +// ------------------------ balloon ------------------------ // + +@balloon-size-close: 16px; +@balloon-primary-color-bg: @primary-color; +@balloon-primary-color-border: transparent; +@balloon-primary-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +@balloon-primary-color: #FFFFFF; +@balloon-primary-color-close: #FFFFFF; +@balloon-tooltip-color-bg: #1f2633; +@balloon-tooltip-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +@balloon-tooltip-color-border: transparent; +@balloon-tooltip-color: #FFFFFF; +@balloon-size-max-width: 300px; +@balloon-size-padding-right: 16px; +@balloon-size-padding-closable-right: 40px; +@balloon-size-padding-top: 16px; +@balloon-size-header-margin-bottom: 8px; +@balloon-title-font-size: 16px; +@balloon-title-font-weight: bold; +@balloon-content-font-size: 14px; +@balloon-content-font-weight: normal; +@balloon-normal-border-width: 1px; +@balloon-primary-border-width: 1px; +@balloon-tooltip-border-width: 1px; +@balloon-tooltip-content-font-size: 14px; +@balloon-tooltip-content-font-weight: normal; +@balloon-size-close-margin-top: 12px; +@balloon-size-close-margin-right: 12px; +@balloon-size-arrow-size: 12px; +@balloon-size-arrow-margin: 12px; +@balloon-tooltip-size-padding-top: 8px; +@balloon-tooltip-size-padding-right: 8px; +@balloon-tooltip-size-padding-bottom: 8px; +@balloon-tooltip-size-padding-left: 8px; +@balloon-border-style: solid; +@balloon-corner: 4px; +@balloon-normal-color-bg: #FFFFFF; +@balloon-normal-color-border: #dcdfe6; +@balloon-normal-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +@balloon-normal-color: #1f2633; +@balloon-normal-color-close: #8d9299; +@balloon-normal-color-close-hover: #585d66; +@balloon-primary-color-close-hover: #1f2633; +@balloon-tooltip-border-style: solid; + +// ------------------------ drawer ------------------------ // + +@drawer-close-size: 16px; +@drawer-title-font-size: 16px; +@drawer-title-padding-top: 12px; +@drawer-title-padding-bottom: 12px; +@drawer-title-padding-left-right: 20px; +@drawer-title-border-width: 1px; +@drawer-content-font-size: 14px; +@drawer-content-padding-top: 20px; +@drawer-content-padding-bottom: 20px; +@drawer-content-padding-left-right: 20px; +@drawer-close-top: 12px; +@drawer-close-right: 12px; +@drawer-bg: #FFFFFF; +@drawer-border-width: 1px; +@drawer-border-color: #dcdfe6; +@drawer-border-style: solid; +@drawer-corner: 4px; +@drawer-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +@drawer-title-color: #1f2633; +@drawer-title-bg-color: #FFFFFF; +@drawer-title-border-color: #dcdfe6; +@drawer-content-color: #585d66; +@drawer-close-color: #8d9299; +@drawer-close-color-hovered: #1f2633; +@drawer-close-bg-hovered: transparent; + +// ------------------------ message ------------------------ // + +@message-close-icon-size: 16px; +@message-size-l-padding: 16px; +@message-size-l-border-width: 2px; +@message-size-l-title-content-padding-left: 12px; +@message-size-l-title-content-padding-right: 20px; +@message-size-l-title-font: 20px; +@message-size-l-content-margin-top: 8px; +@message-size-l-content-font: 14px; +@message-size-l-close-top: 16px; +@message-size-l-close-right: 16px; +@message-size-l-icon: 24px; +@message-size-m-padding: 12px; +@message-size-m-border-width: 1px; +@message-size-m-title-content-padding-left: 8px; +@message-size-m-title-content-padding-right: 20px; +@message-size-m-title-font: 16px; +@message-size-m-content-margin-top: 8px; +@message-size-m-content-font: 14px; +@message-size-m-close-top: 12px; +@message-size-m-close-right: 12px; +@message-size-m-icon: 16px; +@message-size-l-border-radius: 4px; +@message-size-m-border-radius: 4px; +@message-size-l-border-radius-toast: 4px; +@message-size-m-border-radius-toast: 4px; +@message-border-style: solid; +@message-border-style-toast: solid; +@message-shadow-toast: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +@message-success-color-bg-inline: #e6fff6; +@message-success-color-bg-addon: transparent; +@message-success-color-bg-toast: #FFFFFF; +@message-success-color-border-inline: #e6fff6; +@message-success-color-border-toast: #FFFFFF; +@message-success-color-title-inline: #1f2633; +@message-success-color-title-addon: #1f2633; +@message-success-color-title-toast: #1f2633; +@message-success-color-content-inline: #585d66; +@message-success-color-content-addon: #585d66; +@message-success-color-content-toast: #585d66; +@message-success-color-icon-inline: #08c29e; +@message-success-color-icon-addon: #08c29e; +@message-success-color-icon-toast: #08c29e; +@message-error-color-bg-inline: #fff0f0; +@message-error-color-bg-addon: transparent; +@message-error-color-bg-toast: #FFFFFF; +@message-error-color-border-inline: #fff0f0; +@message-error-color-border-toast: #FFFFFF; +@message-error-color-title-inline: #1f2633; +@message-error-color-title-addon: #1f2633; +@message-error-color-title-toast: #1f2633; +@message-error-color-content-inline: #585d66; +@message-error-color-content-addon: #585d66; +@message-error-color-content-toast: #585d66; +@message-error-color-icon-inline: #f52743; +@message-error-color-icon-addon: #f52743; +@message-error-color-icon-toast: #f52743; +@message-warning-color-bg-inline: #fffef0; +@message-warning-color-bg-addon: transparent; +@message-warning-color-bg-toast: #FFFFFF; +@message-warning-color-border-inline: #fffef0; +@message-warning-color-border-toast: #FFFFFF; +@message-warning-color-title-inline: #1f2633; +@message-warning-color-title-addon: #1f2633; +@message-warning-color-title-toast: #1f2633; +@message-warning-color-content-inline: #585d66; +@message-warning-color-content-addon: #585d66; +@message-warning-color-content-toast: #585d66; +@message-warning-color-icon-inline: #f5cb22; +@message-warning-color-icon-addon: #f5cb22; +@message-warning-color-icon-toast: #f5cb22; +@message-notice-color-bg-inline: #e6fdff; +@message-notice-color-bg-addon: transparent; +@message-notice-color-bg-toast: #FFFFFF; +@message-notice-color-border-inline: #e6fdff; +@message-notice-color-border-toast: #FFFFFF; +@message-notice-color-title-inline: #1f2633; +@message-notice-color-title-addon: #1f2633; +@message-notice-color-title-toast: #1f2633; +@message-notice-color-content-inline: #585d66; +@message-notice-color-content-addon: #585d66; +@message-notice-color-content-toast: #585d66; +@message-notice-color-icon-inline: @primary-color; +@message-notice-color-icon-addon: @primary-color; +@message-notice-color-icon-toast: @primary-color; +@message-help-color-bg-inline: #e6f9ff; +@message-help-color-bg-addon: transparent; +@message-help-color-bg-toast: #FFFFFF; +@message-help-color-border-inline: #e6f9ff; +@message-help-color-border-toast: #FFFFFF; +@message-help-color-title-inline: #1f2633; +@message-help-color-title-addon: #1f2633; +@message-help-color-title-toast: #1f2633; +@message-help-color-content-inline: #585d66; +@message-help-color-content-addon: #585d66; +@message-help-color-content-toast: #585d66; +@message-help-color-icon-inline: #0394f5; +@message-help-color-icon-addon: #0394f5; +@message-help-color-icon-toast: #0394f5; +@message-loading-color-bg-inline: #FFFFFF; +@message-loading-color-bg-addon: transparent; +@message-loading-color-bg-toast: #FFFFFF; +@message-loading-color-border-inline: #FFFFFF; +@message-loading-color-border-toast: #FFFFFF; +@message-loading-color-title-inline: #1f2633; +@message-loading-color-title-addon: #1f2633; +@message-loading-color-title-toast: #1f2633; +@message-loading-color-content-inline: #585d66; +@message-loading-color-content-addon: #585d66; +@message-loading-color-content-toast: #585d66; +@message-loading-color-icon-inline: @primary-color; +@message-loading-color-icon-addon: @primary-color; +@message-loading-color-icon-toast: @primary-color; +@message-close-icon-color: #8d9299; +@message-hover-close-icon-color: #585d66; +@message-success-icon-content: ""; +@message-warning-icon-content: ""; +@message-error-icon-content: ""; +@message-notice-icon-content: ""; +@message-help-icon-content: ""; +@message-loading-icon-content: ""; + +// ------------------------ collapse ------------------------ // + +@collapse-icon-size: 16px; +@collapse-border-width: 1px; +@collapse-border-corner: 4px; +@collapse-border-color: #dcdfe6; +@collapse-panel-border-color: #dcdfe6; +@collapse-disabled-border-color: #e4e8ee; +@collapse-title-border-width: 1px; +@collapse-title-height: 20px; +@collapse-title-bg-color: #f4f6f9; +@collapse-title-hover-bg-color: #f0f2f5; +@collapse-title-disabled-bg-color: #f4f6f9; +@collapse-title-font-color: #1f2633; +@collapse-title-font-disabled-color: #c4c7cc; +@collapse-title-hover-font-color: #1f2633; +@collapse-title-font-size: 14px; +@collapse-title-font-weight: normal; +@collapse-title-hover-font-weight: normal; +@collapse-title-padding-tb: 8px; +@collapse-icon-color: #1f2633; +@collapse-icon-hover-color: #1f2633; +@collapse-icon-margin-r: 8px; +@collapse-icon-margin-l: 12px; +@collapse-content-bg-color: #FFFFFF; +@collapse-content-padding-x: 16px; +@collapse-content-padding-y: 12px; +@collapse-content-font-size: 14px; +@collapse-content-color: #585d66; +@collapse-fold-icon-content: ""; +@collapse-unfold-icon-content: @icon-reset; + +// ------------------------ transfer ------------------------ // + +@transfer-operation-margin-left-right: 16px; +@transfer-operation-margin-gutter: 8px; +@transfer-operation-icon-size: 16px; +@transfer-panel-header-padding-left-right: 12px; +@transfer-panel-footer-padding-left-right: 12px; +@transfer-panel-border-width: 1px; +@transfer-panel-header-padding-top-bottom: 8px; +@transfer-panel-header-text-size: 14px; +@transfer-panel-search-margin-top: 8px; +@transfer-panel-search-margin-left-right: 4px; +@transfer-panel-search-margin-bottom: 0px; +@transfer-panel-list-width: 180px; +@transfer-panel-list-height: 160px; +@transfer-panel-footer-padding-top-bottom: 8px; +@transfer-simple-move-icon: ""; +@transfer-simple-move-icon-color: #d9dbde; +@transfer-panel-border-color: #dcdfe6; +@transfer-panel-border-corner: 4px; +@transfer-panel-background-color: #FFFFFF; +@transfer-panel-header-text-color: #1f2633; +@transfer-panel-header-background-color: #f5f7fa; +@transfer-panel-search-icon-color: #8d9299; +@transfer-panel-footer-text-color: #1f2633; +@transfer-panel-footer-background-color: #FFFFFF; +@transfer-simple-panel-footer-text-color: @primary-color; +@transfer-simple-panel-item-hover-text-color: @primary-color; +@transfer-panel-footer-shadow: none; + +// ------------------------ radio ------------------------ // + +@radio-font-margin-left: 8px; +@radio-button-height-medium: 32px; +@radio-width: 16px; +@radio-circle-border-width: 1px; +@radio-circle-size: 4px; +@radio-font-size: 14px; +@radio-shadow: none; +@radio-radius-size: 50%; +@radio-bg-color: #FFFFFF; +@radio-hovered-bg-color: #e6fdff; +@radio-checked-bg-color: @primary-color; +@radio-disabled-bg-color: #f5f7fa; +@radio-checked-hovered-bg-color: #009dd6; +@radio-checked-disabled-bg-color: #f5f7fa; +@radio-border-color: #d9dbde; +@radio-hovered-border-color: @primary-color; +@radio-checked-border-color: @primary-color; +@radio-disabled-border-color: #e4e8ee; +@radio-checked-disabled-border-color: #e4e8ee; +@radio-checked-hovered-border-color: transparent; +@radio-checked-circle-color: #FFFFFF; +@radio-disabled-circle-color: #c4c7cc; +@radio-checked-hovered-circle-color: #FFFFFF; +@radio-checked-disabled-circle-color: #c4c7cc; +@radio-normal-font-color: #1f2633; +@radio-normal-font-color-disabled: #c4c7cc; +@radio-button-height-large: 40px; +@radio-button-height-small: 20px; +@radio-button-padding-large: 8px; +@radio-button-padding-medium: 8px; +@radio-button-padding-small: 8px; +@radio-button-corner-large: 4px; +@radio-button-corner-medium: 4px; +@radio-button-corner-small: 4px; +@radio-button-font-size-large: 16px; +@radio-button-font-size-medium: 14px; +@radio-button-font-size-small: 12px; +@radio-button-bg-color: #FFFFFF; +@radio-button-bg-color-hovered: #f4f6f9; +@radio-button-bg-color-checked: #FFFFFF; +@radio-button-bg-color-disabled: #f5f7fa; +@radio-button-bg-color-checked-disabled: #f4f6f9; +@radio-button-border-color: #d9dbde; +@radio-button-border-color-hovered: #c4c7cc; +@radio-button-border-color-checked: @primary-color; +@radio-button-border-color-disabled: #e4e8ee; +@radio-button-border-color-checked-disabled: #e4e8ee; +@radio-button-font-color: #1f2633; +@radio-button-font-color-hovered: #1f2633; +@radio-button-font-color-checked: @primary-color; +@radio-button-font-color-disabled: #c4c7cc; +@radio-button-font-color-checked-disabled: #c4c7cc; + +// ------------------------ menu ------------------------ // + +@menu-icon-size: 16px; +@menu-hoz-icon-size: 16px; +@menu-arrow-color: #8d9299; +@menu-padding-ver-padding-lr: 0px; +@menu-padding-ver-padding-tb: 8px; +@menu-padding-hoz-padding-lr: 0px; +@menu-padding-hoz-padding-tb: 8px; +@menu-item-padding-ver-padding-l: 20px; +@menu-item-padding-ver-padding-r: 20px; +@menu-item-padding-hoz-padding-lr: 20px; +@menu-line-height: 32px; +@menu-font-size: 14px; +@menu-submenu-title-size: 14px; +@menu-padding-title-horizontal: 12px; +@menu-divider-width: 1px; +@menu-divider-margin-ver: 8px; +@menu-divider-margin-hoz: 12px; +@menu-icon-selected-size: 12px; +@menu-icon-selected-right: 4px; +@menu-icon-margin: 4px; +@menu-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +@menu-color: #1f2633; +@menu-divider-style: solid; +@menu-divider-color: #e4e8ee; +@menu-background: #FFFFFF; +@menu-background-selected: #FFFFFF; +@menu-color-selected: #1f2633; +@menu-icon-selected-color: @primary-color; +@menu-background-hover: #f4f6f9; +@menu-color-hover: #1f2633; +@menu-arrow-color-hover: #1f2633; +@menu-icon-selected-hover-color: @primary-color; +@menu-color-disabled: #c4c7cc; +@menu-select-icon-content: ""; +@menu-fold-icon-content: ""; +@menu-unfold-icon-content: @icon-reset; +@menu-popupfold-icon-content: ""; + +// ------------------------ breadcrumb ------------------------ // + +@breadcrumb-size-m-icon-size: 16px; +@breadcrumb-size-m-font-size: 12px; +@breadcrumb-size-ellipsis-font-size: 12px; +@breadcrumb-size-m-icon-margin: 8px; +@breadcrumb-text-color: #585d66; +@breadcrumb-text-current-color: #1f2633; +@breadcrumb-text-current-weight: normal; +@breadcrumb-text-ellipsis-color: #585d66; +@breadcrumb-text-keyword-color: @primary-color; +@breadcrumb-icon-color: #c4c7cc; +@breadcrumb-icon-sep-content: ""; +@breadcrumb-text-color-hover: @primary-color; +@breadcrumb-text-current-color-hover: @primary-color; +@breadcrumb-text-keyword-color-hover: @primary-color; + +// ------------------------ pagination ------------------------ // + +@pagination-ellipsis-margin: 16px; +@pagination-input-margin: 16px; +@pagination-size-selector-title-margin-right: 4px; +@pagination-large-item-split: 12px; +@pagination-large-item-padding: 15px; +@pagination-item-split: 4px; +@pagination-item-padding: 10px; +@pagination-item-border-style: solid; +@pagination-item-border-width: 1px; +@pagination-item-corner: 4px; +@pagination-ellipsis-size: 12px; +@pagination-current-font-size: 14px; +@pagination-total-font-size: 14px; +@pagination-jump-font-size: 14px; +@pagination-input-width: 36px; +@pagination-size-selector-number-padding: 12px; +@pagination-large-item-border-width: 1px; +@pagination-large-item-corner: 4px; +@pagination-large-ellipsis-size: 16px; +@pagination-large-current-font-size: 16px; +@pagination-large-total-font-size: 16px; +@pagination-large-input-width: 48px; +@pagination-large-jump-font-size: 16px; +@pagination-large-size-selector-number-padding: 16px; +@pagination-small-item-split: 4px; +@pagination-small-item-padding: 6px; +@pagination-small-item-border-width: 1px; +@pagination-small-item-corner: 4px; +@pagination-small-ellipsis-size: 12px; +@pagination-small-current-font-size: 12px; +@pagination-small-total-font-size: 12px; +@pagination-small-input-width: 28px; +@pagination-small-jump-font-size: 12px; +@pagination-small-size-selector-number-padding: 8px; +@pagination-ellipsis-color: #8d9299; +@pagination-current-color: @primary-color; +@pagination-total-color: #1f2633; +@pagination-jump-color: #8d9299; +@pagination-size-selector-title-color: #8d9299; +@pagination-size-selector-filter-color: #585d66; +@pagination-size-selector-filter-current-color: @primary-color; +@pagination-item-border-color: #d9dbde; +@pagination-item-shadow: none; +@pagination-item-color: #1f2633; +@pagination-item-bg: #FFFFFF; +@pagination-item-current-border-color: @primary-color; +@pagination-item-current-shadow: none; +@pagination-item-current-color: #FFFFFF; +@pagination-item-current-bg: @primary-color; +@pagination-item-hover-border-color: #c4c7cc; +@pagination-item-hover-shadow: none; +@pagination-item-hover-color: #1f2633; +@pagination-item-hover-bg: #f4f6f9; +@pagination-arrow-color: #585d66; +@pagination-icon-prev-content: ""; +@pagination-icon-next-content: ""; +@pagination-icon-ellipsis-content: ""; +@pagination-item-current-hover-border-color: transparent; +@pagination-item-current-hover-shadow: none; +@pagination-item-current-hover-color: #FFFFFF; +@pagination-item-current-hover-bg: #009dd6; +@pagination-arrow-hover-color: #1f2633; +@pagination-arrow-hover-color-noboder: @primary-color; + +// ------------------------ cascader-select ------------------------ // + +@cascader-select: "cascader-select"; + +// ------------------------ timeline ------------------------ // + +@timeline-item-node-size: 16px; +@timeline-item-custom-node-size: 40px; +@timeline-item-custom-node-font-size: 12px; +@timeline-item-node-padding: 4px; +@timeline-item-dot-size: 8px; +@timeline-item-icon-size: 12px; +@timeline-item-tail-size: 1px; +@timeline-item-left-content-width: 80px; +@timeline-item-content-margin-left: 12px; +@timeline-item-body-margin-top: 8px; +@timeline-item-title-font-size: 14px; +@timeline-item-title-font-weight: bold; +@timeline-item-title-margin-top: 4px; +@timeline-item-time-margin-top: 4px; +@timeline-item-time-margin-bottom: 12px; +@timeline-item-body-font-size: 12px; +@timeline-item-left-body-font-size: 12px; +@timeline-item-time-font-size: 12px; +@timeline-item-folder-font-size: 12px; +@timeline-item-folder-margin-top: 4px; +@timeline-item-folder-margin-bottom: 4px; +@timeline-item-title-color: #1f2633; +@timeline-item-body-color: #585d66; +@timeline-item-left-body-color: #8d9299; +@timeline-item-time-color: #8d9299; +@timeline-item-tail-color: #dcdfe6; +@timeline-item-done-dot-size: 8px; +@timeline-item-done-background: #d9dbde; +@timeline-item-done-color: #FFFFFF; +@timeline-item-process-dot-size: 8px; +@timeline-item-process-background: @primary-color; +@timeline-item-process-color: #FFFFFF; +@timeline-item-success-dot-size: 8px; +@timeline-item-success-background: #08c29e; +@timeline-item-success-color: #FFFFFF; +@timeline-item-error-dot-size: 8px; +@timeline-item-error-background: #f52743; +@timeline-item-error-color: #FFFFFF; + +// ------------------------ range ------------------------ // + +@range-size-m-track-height: 4px; +@range-size-m-scale-height: 12px; +@range-size-m-scale-item-border-width: 1px; +@range-size-m-slider-hw: 16px; +@range-size-slider-border-style: solid; +@range-size-slider-border-width: 1px; +@range-size-m-mark-top: 30px; +@range-size-m-mark-font-size: 14px; +@range-size-m-mark-font-weight: normal; +@range-size-m-mark-font-lineheight: 20px; +@range-size-m-track-radius: 0; +@range-size-m-scale-radius: 0; +@range-size-m-slider-shadow-moving: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +@range-normal-unselected-color: #d9dbde; +@range-normal-selected-color: @primary-color; +@range-normal-slider-bg-color: #FFFFFF; +@range-normal-mark-color: #8d9299; +@range-normal-mark-selected-color: #1f2633; +@range-normal-unselected-color-hover: #d9dbde; +@range-normal-selected-color-hover: @primary-color; +@range-normal-slider-bg-color-hover: #FFFFFF; +@range-size-m-slider-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.16); +@range-size-m-slider-shadow-hover: 20px 20px 30px 0px rgba(0, 0, 0, 0.15); +@range-normal-mark-color-hover: #8d9299; +@range-normal-mark-selected-color-hover: #1f2633; +@range-normal-slider-border-color-hover: transparent; +@range-normal-unselected-color-disabled: #d9dbde; +@range-normal-selected-color-disabled: #c4c7cc; +@range-normal-slider-bg-color-disabled: #e4e8ee; +@range-normal-slider-border-color: #d9dbde; +@range-normal-slider-border-color-disabled: #e4e8ee; +@range-normal-mark-color-disabled: #c4c7cc; +@range-normal-mark-selected-color-disabled: #8d9299; + +// ------------------------ rating ------------------------ // + +@rating-small-text-margin-left: 8px; +@rating-small-icon-size: 12px; +@rating-small-font-size: 12px; +@rating-medium-text-margin-left: 12px; +@rating-medium-icon-size: 16px; +@rating-medium-font-size: 14px; +@rating-large-text-margin-left: 16px; +@rating-large-icon-size: 20px; +@rating-large-font-size: 16px; +@rating-normal-underlay-color: #edeff2; +@rating-normal-overlay-color: @primary-color; +@rating-normal-overlay-hover-color: @primary-color; +@rating-grade-low-overlay-color: #585d66; +@rating-grade-low-overlay-hover-color: #8d9299; +@rating-grade-high-overlay-color: @primary-color; +@rating-grade-high-overlay-hover-color: @primary-color; +@rating-grade-icon-content: ""; + +// ------------------------ split-button ------------------------ // + +@split-btn-trigger-normal-icon-color: #8d9299; +@split-btn-fold-icon-content: ""; +@split-btn-unfold-icon-content: @icon-reset; + +// ------------------------ paragraph ------------------------ // + +@paragraph-text-color: #1f2633; +@paragraph-s-font-size: 14px; +@paragraph-m-font-size: 14px; +@paragraph-s-line-height: 1.5; +@paragraph-l-line-height: 1.7; + +// ------------------------ typography ------------------------ // + +@typography-text-color: #1f2633; +@typography-text-strong-font-weight: 600; +@typography-text-code-corner: 4px; +@typography-text-mark-color: #1f2633; +@typography-text-mark-background: #fffbc7; +@typography-text-code-color: #1f2633; +@typography-text-code-background: #f4f6f9; +@typography-text-code-border-color: #e4e8ee; +@typography-paragraph-font-size: 14px; +@typography-paragraph-line-height: 1.5; +@typography-title-h1-font-size: 24px; +@typography-title-h2-font-size: 20px; +@typography-title-h3-font-size: 16px; +@typography-title-h4-font-size: 16px; +@typography-title-h5-font-size: 14px; +@typography-title-h6-font-size: 14px; +@typography-title-font-weight: 600; + +// ------------------------ loading ------------------------ // + +@loading-icon-size: 32px; +@loading-dot-color: @primary-color; +@loading-large-size: 48px; +@loading-large-dot-size: 12px; +@loading-medium-size: 32px; +@loading-medium-dot-size: 8px; + +// ------------------------ table ------------------------ // + +@table-normal-border-width: 1px; +@table-th-font-size: 14px; +@table-th-font-weight: normal; +@table-sort-icon-size: 12px; +@table-filter-icon-size: 12px; +@table-body-font-size: 14px; +@table-empty-padding: 32px; +@table-expanded-icon-size: 12px; +@table-tree-expanded-icon-size: 12px; +@table-cell-padding-top: 12px; +@table-cell-padding-left: 16px; +@table-header-padding-top: 12px; +@table-header-padding-left: 16px; +@table-header-icon-margin-left: 8px; +@table-header-corner-top: 0; +@table-header-corner-bottom: 0; +@table-size-s-cell-padding-top: 8px; +@table-size-s-cell-padding-left: 8px; +@table-size-s-header-padding-top: 8px; +@table-size-s-header-padding-left: 8px; +@table-group-split: 8px; +@table-group-header-corner-top: 0; +@table-group-header-corner-bottom: 0; +@table-group-footer-corner-top: 0; +@table-group-footer-corner-bottom: 0; +@table-normal-border-color: #dcdfe6; +@table-normal-border-style: solid; +@table-th-bg: #f0f2f5; +@table-th-color: #1f2633; +@table-sort-color: #1f2633; +@table-group-th-bg: #f0f2f5; +@table-group-th-color: #1f2633; +@table-row-bg: #FFFFFF; +@table-row-color: #1f2633; +@table-td-gray: #f5f7fa; +@table-td-normal: #FFFFFF; +@table-empty-color: #c4c7cc; +@table-group-footer-bg: #f0f2f5; +@table-group-footer-color: #1f2633; +@table-row-hover-bg: #f4f6f9; +@table-row-hover-color: #1f2633; +@table-row-selected-bg: #f4f6f9; +@table-row-selected-color: #1f2633; +@table-sort-color-current: @primary-color; +@table-expanded-ctrl-disabled-color: #8d9299; +@table-tree-fold-icon-content: ""; +@table-tree-unfold-icon-content: ""; +@table-expand-fold-icon-content: ""; +@table-expand-unfold-icon-content: ""; + +// ------------------------ badge ------------------------ // + +@badge-size-dot-width: 8px; +@badge-size-list-margin: 0px; +@badge-size-count-config-height: 16px; +@badge-size-count-padding-lr: 4px; +@badge-size-custom-padding-lr: 4px; +@badge-size-count-font: 12px; +@badge-color-bg: #f52743; +@badge-size-count-border-radius: 8px; +@badge-dot-color-bg: #f52743; +@badge-size-dot-border-radius: 8px; +@badge-size-custom-border-radius: 4px; + +// ------------------------ select ------------------------ // + +@select-color: #1f2633; +@select-hint-color: #8d9299; +@select-highlight-color: @primary-color; +@select-highlight-font: 14px; +@select-l-lineheight: 24px; +@select-m-lineheight: 20px; +@select-s-lineheight: 14px; +@select-fold-icon-content: ""; +@select-unfold-icon-content: @icon-reset; + +// ------------------------ number-picker ------------------------ // + +@number-picker-normal-up-icon: ""; +@number-picker-normal-down-icon: ""; +@number-picker-normal-s-button-width: 20px; +@number-picker-normal-m-button-width: 20px; +@number-picker-normal-l-button-width: 20px; +@number-picker-normal-m-input-width: 80px; +@number-picker-normal-l-input-width: 80px; +@number-picker-normal-s-button-icon-size: 8px; +@number-picker-normal-m-button-icon-size: 8px; +@number-picker-normal-l-button-icon-size: 8px; +@number-picker-inline-add-icon: ""; +@number-picker-inline-minus-icon: ""; +@number-picker-inline-s-button-icon-size: 12px; +@number-picker-inline-s-button-margin: 2px; +@number-picker-inline-s-button-corner: 4px; +@number-picker-inline-m-button-icon-size: 12px; +@number-picker-inline-m-button-margin: 2px; +@number-picker-inline-m-button-corner: 4px; +@number-picker-inline-m-input-width: 100px; +@number-picker-inline-l-button-icon-size: 12px; +@number-picker-inline-l-button-margin: 2px; +@number-picker-inline-l-button-corner: 4px; +@number-picker-inline-l-input-width: 128px; + +// ------------------------ progress ------------------------ // + +@progress-line-height-size-l: 12px; +@progress-line-height-size-m: 8px; +@progress-line-height-size-s: 4px; +@progress-line-underlay-border-width: 1px; +@progress-line-font-l: 14px; +@progress-line-font-m: 12px; +@progress-line-font-s: 12px; +@progress-line-underlay-color: #f0f2f5; +@progress-line-underlay-border-color: #dcdfe6; +@progress-line-radius-l: 20px; +@progress-line-radius-m: 20px; +@progress-line-radius-s: 20px; +@progress-line-font-color: #1f2633; +@progress-line-normal-color: @primary-color; +@progress-line-error-color: #f52743; +@progress-line-success-color: #08c29e; +@progress-line-started-color: #f52743; +@progress-line-middle-color: #f5cb22; +@progress-line-finishing-color: #08c29e; +@progress-circle-size-l: 132px; +@progress-circle-size-m: 116px; +@progress-circle-size-s: 100px; +@progress-circle-underlay-width: 8px; +@progress-circle-overlay-width: 8px; +@progress-circle-font-l: 36px; +@progress-circle-font-m: 24px; +@progress-circle-font-s: 20px; +@progress-circle-underlay-color: #f0f2f5; +@progress-circle-text-color: #1f2633; +@progress-circle-corner: round; +@progress-circle-normal-color: @primary-color; +@progress-circle-error-color: #f52743; +@progress-circle-success-color: #08c29e; +@progress-circle-started-color: #f52743; +@progress-circle-middle-color: #f5cb22; +@progress-circle-finishing-color: #08c29e; + +// ------------------------ shell ------------------------ // + +@shell-light-header-color: #000000; +@shell-light-header-height: 52px; +@shell-light-header-background: #FFFFFF; +@shell-light-header-shadow: none; +@shell-light-header-divider-size: 1px; +@shell-light-header-divider-style: solid; +@shell-light-header-divider-color: #e4e8ee; +@shell-light-header-paddingLeft: 16px; +@shell-light-multitask-min-height: 40px; +@shell-light-multitask-background: #FFFFFF; +@shell-light-multitask-shadow: none; +@shell-light-multitask-divider-size: 1px; +@shell-light-multitask-divider-style: solid; +@shell-light-multitask-divider-color: #e4e8ee; +@shell-light-multitask-paddingLeft: 0px; +@shell-light-navigation-hoz-marginLeft: 48px; +@shell-light-navigation-ver-width: 168px; +@shell-light-navigation-ver-shadow: none; +@shell-light-navigation-ver-paddingTop: 8px; +@shell-light-navigation-ver-paddingBottom: 8px; +@shell-light-navigation-ver-width-mini: 60px; +@shell-light-navigation-ver-background: #FFFFFF; +@shell-light-navigation-ver-divider-size: 1px; +@shell-light-navigation-ver-divider-style: solid; +@shell-light-navigation-ver-divider-color: #e4e8ee; +@shell-light-local-navigation-width: 168px; +@shell-light-local-navigation-background: #edeff2; +@shell-light-local-navigation-paddingTop: 8px; +@shell-light-local-navigation-paddingBottom: 8px; +@shell-light-local-navigation-shadow: none; +@shell-light-local-navigation-divider-size: 1px; +@shell-light-local-navigation-divider-style: solid; +@shell-light-local-navigation-divider-color: #e4e8ee; +@shell-light-appbar-background: #FFFFFF; +@shell-light-appbar-min-height: 48px; +@shell-light-appbar-shadow: none; +@shell-light-appbar-paddingLeft: 24px; +@shell-light-appbar-divider-size: 1px; +@shell-light-appbar-divider-style: solid; +@shell-light-appbar-divider-color: #e4e8ee; +@shell-light-content-background: #f0f2f5; +@shell-light-content-paddingLeft: 20px; +@shell-light-content-paddingTop: 20px; +@shell-light-footer-min-height: 56px; +@shell-light-footer-background: transparent; +@shell-light-footer-color: #c4c7cc; +@shell-light-footer-font-size: 14px; +@shell-light-ancillary-width: 168px; +@shell-light-ancillary-background: #FFFFFF; +@shell-light-ancillary-paddingTop: 8px; +@shell-light-ancillary-paddingBottom: 8px; +@shell-light-ancillary-shadow: none; +@shell-light-ancillary-divider-size: 1px; +@shell-light-ancillary-divider-style: solid; +@shell-light-ancillary-divider-color: #e4e8ee; +@shell-light-tooldock-height: 52px; +@shell-light-tooldock-width: 52px; +@shell-light-tooldock-background: #edeff2; +@shell-light-tooldock-paddingTop: 8px; +@shell-light-tooldock-paddingBottom: 8px; +@shell-light-tooldock-shadow: none; +@shell-light-tooldock-divider-size: 1px; +@shell-light-tooldock-divider-style: solid; +@shell-light-tooldock-divider-color: #e4e8ee; +@shell-light-tooldock-item-paddingTop: 8px; +@shell-light-tooldock-item-color: #585d66; +@shell-light-tooldock-item-color-hover: #1f2633; +@shell-light-tooldock-item-color-active: #1f2633; +@shell-light-tooldock-item-background: transparent; +@shell-light-tooldock-item-background-hover: #f0f2f5; +@shell-light-tooldock-item-background-active: #f0f2f5; +@shell-dark-header-color: #FFFFFF; +@shell-dark-header-height: 52px; +@shell-dark-header-background: #000000; +@shell-dark-header-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +@shell-dark-header-divider-size: 1px; +@shell-dark-header-divider-style: solid; +@shell-dark-header-divider-color: #1F1F1F; +@shell-dark-header-paddingLeft: 16px; +@shell-dark-multitask-min-height: 40px; +@shell-dark-multitask-background: #FFFFFF; +@shell-dark-multitask-shadow: none; +@shell-dark-multitask-divider-size: 1px; +@shell-dark-multitask-divider-style: solid; +@shell-dark-multitask-divider-color: #e4e8ee; +@shell-dark-multitask-paddingLeft: 0px; +@shell-dark-navigation-hoz-marginLeft: 48px; +@shell-dark-navigation-ver-width: 168px; +@shell-dark-navigation-ver-shadow: none; +@shell-dark-navigation-ver-paddingTop: 8px; +@shell-dark-navigation-ver-paddingBottom: 8px; +@shell-dark-navigation-ver-width-mini: 60px; +@shell-dark-navigation-ver-background: #1f2633; +@shell-dark-navigation-ver-divider-size: 1px; +@shell-dark-navigation-ver-divider-style: solid; +@shell-dark-navigation-ver-divider-color: #e4e8ee; +@shell-dark-local-navigation-width: 168px; +@shell-dark-local-navigation-background: #edeff2; +@shell-dark-local-navigation-paddingTop: 8px; +@shell-dark-local-navigation-paddingBottom: 8px; +@shell-dark-local-navigation-shadow: none; +@shell-dark-local-navigation-divider-size: 1px; +@shell-dark-local-navigation-divider-style: solid; +@shell-dark-local-navigation-divider-color: #e4e8ee; +@shell-dark-appbar-background: #FFFFFF; +@shell-dark-appbar-min-height: 48px; +@shell-dark-appbar-shadow: none; +@shell-dark-appbar-paddingLeft: 24px; +@shell-dark-appbar-divider-size: 1px; +@shell-dark-appbar-divider-style: solid; +@shell-dark-appbar-divider-color: #e4e8ee; +@shell-dark-content-background: #f0f2f5; +@shell-dark-content-paddingLeft: 20px; +@shell-dark-content-paddingTop: 20px; +@shell-dark-footer-min-height: 56px; +@shell-dark-footer-background: transparent; +@shell-dark-footer-color: #c4c7cc; +@shell-dark-footer-font-size: 14px; +@shell-dark-ancillary-width: 168px; +@shell-dark-ancillary-background: #FFFFFF; +@shell-dark-ancillary-paddingTop: 8px; +@shell-dark-ancillary-paddingBottom: 8px; +@shell-dark-ancillary-shadow: none; +@shell-dark-ancillary-divider-size: 1px; +@shell-dark-ancillary-divider-style: solid; +@shell-dark-ancillary-divider-color: #e4e8ee; +@shell-dark-tooldock-height: 52px; +@shell-dark-tooldock-width: 52px; +@shell-dark-tooldock-background: #edeff2; +@shell-dark-tooldock-paddingTop: 8px; +@shell-dark-tooldock-paddingBottom: 8px; +@shell-dark-tooldock-shadow: none; +@shell-dark-tooldock-divider-size: 1px; +@shell-dark-tooldock-divider-style: solid; +@shell-dark-tooldock-divider-color: #e4e8ee; +@shell-dark-tooldock-item-paddingTop: 8px; +@shell-dark-tooldock-item-color: #585d66; +@shell-dark-tooldock-item-color-hover: #1f2633; +@shell-dark-tooldock-item-color-active: #1f2633; +@shell-dark-tooldock-item-background: transparent; +@shell-dark-tooldock-item-background-hover: #f0f2f5; +@shell-dark-tooldock-item-background-active: #f0f2f5; +@shell-brand-header-color: #FFFFFF; +@shell-brand-header-height: 52px; +@shell-brand-header-background: @primary-color; +@shell-brand-header-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +@shell-brand-header-divider-size: 1px; +@shell-brand-header-divider-style: solid; +@shell-brand-header-divider-color: #e4e8ee; +@shell-brand-header-paddingLeft: 16px; +@shell-brand-multitask-min-height: 40px; +@shell-brand-multitask-background: #FFFFFF; +@shell-brand-multitask-shadow: none; +@shell-brand-multitask-divider-size: 1px; +@shell-brand-multitask-divider-style: solid; +@shell-brand-multitask-divider-color: #e4e8ee; +@shell-brand-multitask-paddingLeft: 0px; +@shell-brand-navigation-hoz-marginLeft: 48px; +@shell-brand-navigation-ver-width: 168px; +@shell-brand-navigation-ver-shadow: none; +@shell-brand-navigation-ver-paddingTop: 8px; +@shell-brand-navigation-ver-paddingBottom: 8px; +@shell-brand-navigation-ver-width-mini: 60px; +@shell-brand-navigation-ver-background: #FFFFFF; +@shell-brand-navigation-ver-divider-size: 1px; +@shell-brand-navigation-ver-divider-style: solid; +@shell-brand-navigation-ver-divider-color: #e4e8ee; +@shell-brand-local-navigation-width: 168px; +@shell-brand-local-navigation-background: #edeff2; +@shell-brand-local-navigation-paddingTop: 8px; +@shell-brand-local-navigation-paddingBottom: 8px; +@shell-brand-local-navigation-shadow: none; +@shell-brand-local-navigation-divider-size: 1px; +@shell-brand-local-navigation-divider-style: solid; +@shell-brand-local-navigation-divider-color: #e4e8ee; +@shell-brand-appbar-background: #FFFFFF; +@shell-brand-appbar-min-height: 48px; +@shell-brand-appbar-shadow: none; +@shell-brand-appbar-paddingLeft: 24px; +@shell-brand-appbar-divider-size: 1px; +@shell-brand-appbar-divider-style: solid; +@shell-brand-appbar-divider-color: #e4e8ee; +@shell-brand-content-background: #f0f2f5; +@shell-brand-content-paddingLeft: 20px; +@shell-brand-content-paddingTop: 20px; +@shell-brand-footer-min-height: 56px; +@shell-brand-footer-background: transparent; +@shell-brand-footer-color: #c4c7cc; +@shell-brand-footer-font-size: 14px; +@shell-brand-ancillary-width: 168px; +@shell-brand-ancillary-background: #FFFFFF; +@shell-brand-ancillary-paddingTop: 8px; +@shell-brand-ancillary-paddingBottom: 8px; +@shell-brand-ancillary-shadow: none; +@shell-brand-ancillary-divider-size: 1px; +@shell-brand-ancillary-divider-style: solid; +@shell-brand-ancillary-divider-color: #e4e8ee; +@shell-brand-tooldock-height: 52px; +@shell-brand-tooldock-width: 52px; +@shell-brand-tooldock-background: #edeff2; +@shell-brand-tooldock-paddingTop: 8px; +@shell-brand-tooldock-paddingBottom: 8px; +@shell-brand-tooldock-shadow: none; +@shell-brand-tooldock-divider-size: 1px; +@shell-brand-tooldock-divider-style: solid; +@shell-brand-tooldock-divider-color: #e4e8ee; +@shell-brand-tooldock-item-paddingTop: 8px; +@shell-brand-tooldock-item-color: #585d66; +@shell-brand-tooldock-item-color-hover: #1f2633; +@shell-brand-tooldock-item-color-active: #1f2633; +@shell-brand-tooldock-item-background: transparent; +@shell-brand-tooldock-item-background-hover: #f0f2f5; +@shell-brand-tooldock-item-background-active: #f0f2f5; + +// ------------------------ divider ------------------------ // + +@divider-hoz-size: 1px; +@divider-hoz-color: #dcdfe6; +@divider-hoz-text-center-paddingLeft: 16px; +@divider-hoz-text-left-paddingLeft: 16px; +@divider-hoz-text-marginTop: 16px; +@divider-hoz-marginTop: 16px; +@divider-hoz-text-size: 16px; +@divider-hoz-text-weight: normal; +@divider-hoz-text-color: #1f2633; +@divider-ver-size: 1px; +@divider-ver-color: #dcdfe6; +@divider-ver-marginLeft: 8px; + +// ------------------------ tree-select ------------------------ // + +@tree-select-padding-vertical: 8px; +@tree-select-padding-horizontal: 20px; +@tree-select-background: #FFFFFF; + +// ------------------------ time-picker ------------------------ // + +@time-picker-panel-width: 200px; +@time-picker-panel-background: #FFFFFF; +@time-picker-menu-border-width: 1px; +@time-picker-menu-title-font-size: 12px; +@time-picker-menu-item-font-size: 12px; +@time-picker-menu-title-height: 28px; +@time-picker-menu-item-height: 28px; +@time-picker-menu-border-color: #d9dbde; +@time-picker-menu-title-color: #8d9299; +@time-picker-menu-title-background: #FFFFFF; +@time-pikcer-menu-title-font-weight: normal; +@time-picker-menu-item-color: #585d66; +@time-picker-menu-item-color-hover: #1f2633; +@time-picker-menu-item-color-selected: #585d66; +@time-picker-menu-item-color-disabled: #c4c7cc; +@time-picker-menu-item-background: #FFFFFF; +@time-picker-menu-item-background-hover: #f4f6f9; +@time-picker-menu-item-background-selected: #f4f6f9; +@time-picker-menu-item-background-disabled: #FFFFFF; +@time-picker-menu-item-font-weight-selected: bold; +@time-picker-clock-icon: ""; + +// ------------------------ slider ------------------------ // + +@slick-dots-position-bottom: 12px; +@slick-dots-position-right: 20px; +@slick-dots-width: 8px; +@slick-dots-height: 8px; +@slick-dots-margin-lr: 4px; +@slick-dots-margin-tb: 0px; +@slick-arrow-width-m: 28px; +@slick-arrow-width-l: 48px; +@slick-arrow-height-m: 56px; +@slick-arrow-height-l: 96px; +@slick-ver-arrow-width-m: 56px; +@slick-ver-arrow-width-l: 96px; +@slick-ver-arrow-height-m: 28px; +@slick-ver-arrow-height-l: 48px; +@slick-arrow-icon-m: 20px; +@slick-arrow-icon-l: 32px; +@slick-arrow-position-lr-m: 4px; +@slick-arrow-position-lr-l: 8px; +@slick-ver-arrow-position-tb-m: 4px; +@slick-ver-arrow-position-tb-l: 16px; +@slick-track-padding-lr: 24px; +@slick-ver-track-padding-tb: 24px; +@slick-dots-background-color-normal: #000000; +@slick-dots-background-color-hover: #000000; +@slick-dots-background-color-selected: @primary-color; +@slick-dots-background-opacity-normal: .32; +@slick-dots-background-opacity-hover: .32; +@slick-dots-background-opacity-selected: 1; +@slick-dots-border-width: 0px; +@slick-dots-border-radius: 50%; +@slick-dots-border-color-normal: #FFFFFF; +@slick-dots-border-color-hover: #FFFFFF; +@slick-dots-border-color-selected: #FFFFFF; +@slick-dots-border-opacity-normal: 1; +@slick-dots-border-opacity-hover: 1; +@slick-dots-border-opacity-selected: 1; +@slick-arrow-icon-color-normal: #FFFFFF; +@slick-arrow-icon-color-normal-outer: #585d66; +@slick-arrow-icon-color-hover: #FFFFFF; +@slick-arrow-icon-color-hover-outer: #1f2633; +@slick-arrow-icon-color-disabled: #c4c7cc; +@slick-arrow-icon-color-disabled-outer: #c4c7cc; +@slick-arrow-bg-color-normal: #000000; +@slick-arrow-bg-color-hover: #000000; +@slick-arrow-bg-color-disabled: #f5f7fa; +@slick-arrow-bg-opacity-normal: .2; +@slick-arrow-bg-opacity-hover: .4; +@slick-arrow-bg-opacity-disabled: .5; +@slick-arrow-bg-color-normal-outer: transparent; +@slick-arrow-bg-color-hover-outer: transparent; +@slick-arrow-bg-color-disabled-outer: transparent; +@slick-arrow-bg-opacity-normal-outer: .32; +@slick-arrow-bg-opacity-hover-outer: .32; +@slick-arrow-bg-opacity-disabled-outer: .32; +@slick-arrow-corner-radius-outer: 0px; + +// ------------------------ step ------------------------ // + +@step-arrow-item-height: 32px; +@step-arrow-item-title-size: 14px; +@step-arrow-item-title-weight: bold; +@step-arrow-item-wait-background: #f0f2f5; +@step-arrow-item-title-wait-color: #8d9299; +@step-arrow-item-process-background: @primary-color; +@step-arrow-item-title-process-color: #FFFFFF; +@step-arrow-item-finish-background: #e6fdff; +@step-arrow-item-title-finish-color: @primary-color; +@step-arrow-item-disabled-background: #f5f7fa; +@step-arrow-item-title-disabled-color: #c4c7cc; +@step-circle-item-node-padding: 8px; +@step-circle-item-node-border-width: 1px; +@step-circle-item-node-icon-size: 12px; +@step-circle-item-node-font-size: 12px; +@step-circle-item-node-corner: 50%; +@step-circle-item-tail-size: 1px; +@step-circle-item-title-margin-top: 8px; +@step-circle-item-content-margin-top: 4px; +@step-circle-item-content-font-size: 12px; +@step-circle-item-body-width: 100px; +@step-circle-item-title-size: 14px; +@step-circle-item-title-weight: bold; +@step-circle-item-node-wait-size: 32px; +@step-circle-item-node-process-size: 32px; +@step-circle-item-node-finish-size: 32px; +@step-circle-item-node-disabled-size: 32px; +@step-circle-item-tail-wait-color: #d9dbde; +@step-circle-item-tail-process-color: #d9dbde; +@step-circle-item-tail-finish-color: @primary-color; +@step-circle-item-tail-disabled-color: #e4e8ee; +@step-circle-item-node-wait-font-weight: normal; +@step-circle-item-node-process-font-weight: normal; +@step-circle-item-node-disabled-font-weight: normal; +@step-circle-item-node-finish-font-weight: normal; +@step-circle-item-title-wait-color: #585d66; +@step-circle-item-title-process-color: #1f2633; +@step-circle-item-title-finish-color: #585d66; +@step-circle-item-title-disabled-color: #c4c7cc; +@step-circle-item-node-wait-border-color: #c4c7cc; +@step-circle-item-node-wait-background: #FFFFFF; +@step-circle-item-node-wait-color: #585d66; +@step-circle-item-node-process-border-color: @primary-color; +@step-circle-item-node-process-background: @primary-color; +@step-circle-item-node-process-color: #FFFFFF; +@step-circle-item-node-process-percent-color: @primary-color; +@step-circle-item-node-process-percent-size: 14px; +@step-circle-item-node-finish-border-color: @primary-color; +@step-circle-item-node-finish-background: #FFFFFF; +@step-circle-item-node-finish-color: @primary-color; +@step-circle-item-node-disabled-border-color: #e4e8ee; +@step-circle-item-node-disabled-background: #FFFFFF; +@step-circle-item-node-disabled-color: #c4c7cc; +@step-circle-vertical-item-node-padding: 8px; +@step-circle-vertical-item-body-margin-left: 16px; +@step-circle-vertical-item-title-margin-top: 8px; +@step-circle-vertical-item-content-margin-top: 4px; +@step-circle-item-content-color: #585d66; +@step-circle-item-tail-bg-color: #e4e8ee; +@step-circle-vertical-item-tail-size: 1px; +@step-dot-item-dot-padding: 8px; +@step-dot-item-dot-icon-size: 12px; +@step-dot-item-dot-border-width: 1px; +@step-dot-item-body-width: 100px; +@step-dot-item-content-margin-top: 4px; +@step-dot-item-dot-corner: 50%; +@step-dot-item-title-size: 14px; +@step-dot-item-title-weight: bold; +@step-dot-item-title-margin-top: 8px; +@step-dot-item-tail-size: 1px; +@step-dot-item-dot-wait-size: 12px; +@step-dot-item-dot-process-size: 12px; +@step-dot-item-dot-finish-size: 12px; +@step-dot-item-dot-disabled-size: 12px; +@step-dot-item-tail-wait-color: #d9dbde; +@step-dot-item-tail-process-color: #d9dbde; +@step-dot-item-tail-finish-color: @primary-color; +@step-dot-item-tail-disabled-color: #e4e8ee; +@step-dot-item-title-wait-color: #585d66; +@step-dot-item-title-process-color: #1f2633; +@step-dot-item-title-finish-color: #585d66; +@step-dot-item-title-disabled-color: #c4c7cc; +@step-dot-item-node-wait-border-color: #c4c7cc; +@step-dot-item-node-wait-background: #FFFFFF; +@step-dot-item-node-wait-color: #8d9299; +@step-dot-item-node-process-border-color: @primary-color; +@step-dot-item-node-process-background: @primary-color; +@step-dot-item-node-process-color: @primary-color; +@step-dot-item-node-finish-border-color: @primary-color; +@step-dot-item-node-finish-background: #FFFFFF; +@step-dot-item-node-finish-color: @primary-color; +@step-dot-item-node-disabled-border-color: #dcdfe6; +@step-dot-item-node-disabled-background: #FFFFFF; +@step-dot-item-node-disabled-color: #e4e8ee; +@step-dot-vertical-item-node-padding: 8px; +@step-dot-vertical-item-body-margin-left: 16px; +@step-dot-vertical-item-title-margin-top: 0px; +@step-dot-vertical-item-content-margin-top: 8px; +@step-dot-item-content-font-size: 12px; +@step-dot-item-content-color: #585d66; +@step-dot-item-tail-bg-color: #e4e8ee; +@step-dot-vertical-item-tail-size: 1px; + +// ------------------------ list ------------------------ // + +@list-size-s-title-font-size: 16px; +@list-size-s-title-font-weight: bold; +@list-size-s-item-padding-lr: 0px; +@list-size-s-item-padding-tb: 8px; +@list-size-s-item-media-margin: 8px; +@list-size-s-item-content-font-size: 14px; +@list-size-s-item-content-line-height: 1.3; +@list-size-s-item-title-font-weight: normal; +@list-size-s-item-title-font-size: 14px; +@list-size-s-item-title-line-height: 1.5; +@list-size-m-title-font-size: 20px; +@list-size-m-title-font-weight: bold; +@list-size-m-item-padding-lr: 0px; +@list-size-m-item-padding-tb: 16px; +@list-size-m-item-media-margin: 8px; +@list-size-m-item-content-font-size: 14px; +@list-size-m-item-content-line-height: 1.5; +@list-size-m-item-title-font-size: 16px; +@list-size-m-item-title-line-height: 1.5; +@list-size-m-item-title-font-weight: normal; +@list-divider-color: #dcdfe6; +@list-title-color: #1f2633; +@list-content-color: #585d66; +@list-extra-color: #8d9299; + +// ------------------------ avatar ------------------------ // + +@avatar-size-large: 52px; +@avatar-size-medium: 40px; +@avatar-size-small: 28px; +@avatar-border-radius: 4px; + +// ------------------------ date-picker ------------------------ // + +@date-picker-panel-footer-padding-lr: 20px; +@date-picker-panel-footer-padding-tb: 8px; +@date-picker-panel-background: #FFFFFF; +@date-picker-panel-time-panel-separator-color: #dcdfe6; +@date-picker-calendar-icon: ""; \ No newline at end of file diff --git a/packages/velaux-theme/variables.scss b/packages/velaux-theme/variables.scss new file mode 100644 index 000000000..8e28b0d3f --- /dev/null +++ b/packages/velaux-theme/variables.scss @@ -0,0 +1,2582 @@ +$primary-color: #1b58f4; +$link-color: $primary-color; +// ------------------------ line ------------------------ // + +$line-dotted: dotted; +$line-dashed: dashed; +$line-solid: solid; +$line-3: 3px; +$line-2: 2px; +$line-1: 1px; +$line-zero: 0px; + +// ------------------------ popup ------------------------ // + +$popup-global-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +$popup-global-corner: 4px; +$popup-global-border-color: #dcdfe6; +$popup-global-border-style: solid; +$popup-global-border-width: 0px; +$popup-local-corner: 4px; +$popup-local-border-color: #dcdfe6; +$popup-local-border-style: solid; +$popup-local-border-width: 1px; +$popup-spacing-tb: 4px; +$popup-spacing-lr: 4px; +$popup-local-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); + +// ------------------------ mask ------------------------ // + +$mask-opacity: .2; +$mask-background: #000000; + +// ------------------------ form-element ------------------------ // + +$form-element-preview-text-color: #1f2633; +$form-element-preview-label-color: #585d66; +$form-element-large-corner: 4px; +$form-element-medium-corner: 4px; +$form-element-small-corner: 4px; +$form-element-small-icon-size: 12px; +$form-element-large-preview-font-size: 16px; +$form-element-large-preview-label-font-size: 16px; +$form-element-medium-preview-font-size: 14px; +$form-element-medium-preview-label-font-size: 14px; +$form-element-small-preview-font-size: 12px; +$form-element-small-preview-label-font-size: 12px; +$form-element-large-preview-height: 40px; +$form-element-medium-preview-height: 28px; +$form-element-small-preview-height: 20px; +$form-element-large-font-size: 16px; +$form-element-large-height: 40px; +$form-element-large-icon-size: 20px; +$form-element-medium-icon-size: 16px; +$form-element-medium-font-size: 14px; +$form-element-small-font-size: 12px; +$form-element-medium-height: 32px; +$form-element-small-height: 24px; + +// ------------------------ size ------------------------ // + +$s-50: 200px; +$s-49: 196px; +$s-48: 192px; +$s-47: 188px; +$s-46: 184px; +$s-45: 180px; +$s-44: 176px; +$s-43: 172px; +$s-42: 168px; +$s-41: 164px; +$s-40: 160px; +$s-39: 156px; +$s-38: 152px; +$s-37: 148px; +$s-36: 144px; +$s-35: 140px; +$s-34: 136px; +$s-33: 132px; +$s-32: 128px; +$s-31: 124px; +$s-30: 120px; +$s-29: 116px; +$s-28: 112px; +$s-27: 108px; +$s-26: 104px; +$s-25: 100px; +$s-24: 96px; +$s-23: 92px; +$s-22: 88px; +$s-21: 84px; +$s-20: 80px; +$s-19: 76px; +$s-18: 72px; +$s-17: 68px; +$s-16: 64px; +$s-15: 60px; +$s-14: 56px; +$s-13: 52px; +$s-12: 48px; +$s-11: 44px; +$s-10: 40px; +$s-9: 36px; +$s-8: 32px; +$s-7: 28px; +$s-6: 24px; +$s-5: 20px; +$s-4: 16px; +$s-3: 12px; +$s-2: 8px; +$s-1: 4px; +$s-zero: 0px; +$s-auto: auto; +$size-base: 4px; + +// ------------------------ shadow ------------------------ // + +$shadow-3-left: -20px 0px 30px 0px rgba(0, 0, 0, 0.15); +$shadow-3-down: 0px 20px 30px 0px rgba(0, 0, 0, 0.15); +$shadow-3-right: 20px 0px 30px 0px rgba(0, 0, 0, 0.15); +$shadow-3-up: 0px -20px 30px 0px rgba(0, 0, 0, 0.15); +$shadow-3: 20px 20px 30px 0px rgba(0, 0, 0, 0.15); +$shadow-2-left: -2px 0px 16px 0px rgba(0, 0, 0, 0.12); +$shadow-2-down: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +$shadow-2-right: 2px 0px 16px 0px rgba(0, 0, 0, 0.12); +$shadow-2-up: 0px -4px 16px 0px rgba(0, 0, 0, 0.12); +$shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +$shadow-1-left: -1px 0px 4px 0px rgba(0, 0, 0, 0.16); +$shadow-1-down: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +$shadow-1-right: 1px 0px 4px 0px rgba(0, 0, 0, 0.16); +$shadow-1-up: 0px -1px 4px 0px rgba(0, 0, 0, 0.16); +$shadow-1: 1px 1px 4px 0px rgba(0, 0, 0, 0.16); +$shadow-zero: none; +$shadow-spread-sd3: 0; +$shadow-spread-sd2: 0; +$shadow-spread-sd1: 0; +$shadow-color-sd3: #000000; +$shadow-color-sd2: #000000; +$shadow-color-sd1: #000000; +$shadow-opacity-sd2: .12; +$shadow-distance-sd1y: 1; +$shadow-distance-sd2: 2; +$shadow-distance-sd1: 1; +$shadow-sides-left: "left"; +$shadow-sides-down: "down"; +$shadow-sides-right: "right"; +$shadow-sides-up: "up"; +$shadow-sides-base: "base"; +$shadow-blur-sd3: 30; +$shadow-blur-sd2: 16; +$shadow-blur-sd1: 4; +$shadow-opacity-sd3: 0.15; +$shadow-opacity-sd1: 0.16; +$shadow-distance-sd3y: 20; +$shadow-distance-sd2y: 4; +$shadow-distance-sd3: 20; + +// ------------------------ icon ------------------------ // + +$icon-reset: ""; +$icon-xxxl: 64px; +$icon-xxl: 48px; +$icon-xl: 32px; +$icon-l: 24px; +$icon-m: 20px; +$icon-s: 16px; +$icon-xs: 12px; +$icon-xxs: 8px; +$icon-font-name: "icon"; +$icon-font-path: "//at.alicdn.com/t/font_881657_len1q696q7"; +$icon-content-dashboard: "\e7fa"; +$icon-content-list: "\e7f9"; +$icon-content-detail: "\e7f8"; +$icon-content-form: "\e7fb"; +$icon-content-chart-pie: "\e613"; +$icon-content-chart-bar: "\e612"; +$icon-content-exit: "\e616"; +$icon-content-lock: "\e617"; +$icon-content-unlock: "\e615"; +$icon-content-eye-close: "\e600"; +$icon-content-eye: "\e611"; +$icon-content-toggle-right: "\e603"; +$icon-content-toggle-left: "\e602"; +$icon-content-copy: "\e60f"; +$icon-content-atm: "\e606"; +$icon-content-email: "\e605"; +$icon-content-account: "\e608"; +$icon-content-attachment: "\e665"; +$icon-content-filter: "\e627"; +$icon-content-refresh: "\e677"; +$icon-content-edit: "\e63b"; +$icon-content-set: "\e683"; +$icon-content-download: "\e628"; +$icon-content-upload: "\e7ee"; +$icon-content-ashbin: "\e639"; +$icon-content-calendar: "\e607"; +$icon-content-picture: "\e631"; +$icon-content-ellipsis: "\e654"; +$icon-content-close: "\e626"; +$icon-content-search: "\e656"; +$icon-content-loading: "\e646"; +$icon-content-semi-select: "\e633"; +$icon-content-select: "\e632"; +$icon-content-ascending: "\e61e"; +$icon-content-descending: "\e61f"; +$icon-content-sorting: "\e634"; +$icon-content-switch: "\e6b3"; +$icon-content-arrow-double-right: "\e65e"; +$icon-content-arrow-double-left: "\e659"; +$icon-content-arrow-right: "\e619"; +$icon-content-arrow-left: "\e61d"; +$icon-content-arrow-down: "\e63d"; +$icon-content-arrow-up: "\e625"; +$icon-content-minus: "\e601"; +$icon-content-add: "\e655"; +$icon-content-favorites-filling: "\e60e"; +$icon-content-delete-filling: "\e623"; +$icon-content-success-filling: "\e63a"; +$icon-content-clock: "\e621"; +$icon-content-help: "\e673"; +$icon-content-error: "\e60d"; +$icon-content-prompt: "\e60c"; +$icon-content-warning: "\e60b"; +$icon-content-success: "\e60a"; +$icon-content-cry: "\e65d"; +$icon-content-smile: "\e65f"; + +// ------------------------ font ------------------------ // + +$font-weight-ultra-bold: 900; +$font-weight-extra-bold: 800; +$font-weight-3: bold; +$font-weight-semi-bold: 600; +$font-weight-medium: 500; +$font-weight-2: normal; +$font-weight-light: 300; +$font-weight-thin: 200; +$font-weight-1: lighter; +$font-size-body-2: 14px; +$font-size-subhead: 16px; +$font-size-title: 20px; +$font-size-headline: 24px; +$font-size-display-1: 36px; +$font-size-display-2: 48px; +$font-size-display-3: 56px; +$font-lineheight-3: 1.7; +$font-lineheight-2: 1.5; +$font-lineheight-1: 1.3; +$font-size-body-1: 14px; +$font-name-bold: roboto-bold; +$font-name-medium: roboto-medium; +$font-name-regular: roboto-regular; +$font-name-light: roboto-light; +$font-name-thin: roboto-thin; +$font-custom-name: Roboto; +$font-custom-path: "//i.alicdn.com/artascope-font/20160419204543/font/"; +$font-size-caption: 12px; +$font-family-base: Roboto,"Helvetica Neue",Helvetica,Tahoma,Arial,"PingFang SC","Microsoft YaHei"; + +// ------------------------ corner ------------------------ // + +$corner-zero: 0; +$corner-semicircle: 500px; +$corner-circle: 50%; +$corner-2: 8px; +$corner-3: 20px; +$corner-1: 4px; + +// ------------------------ color ------------------------ // + +$color-gradient-4: linear-gradient(270deg, rgb(255, 163, 166) 0%, rgb(245, 39, 67) 100%); +$color-gradient-3: linear-gradient(270deg, rgb(255, 237, 117) 0%, rgb(245, 203, 34) 100%); +$color-gradient-2: linear-gradient(270deg, rgb(125, 238, 255) 0%, rgb(3, 193, 253) 100%); +$color-gradient-1: linear-gradient(270deg, rgb(121, 232, 199) 0%, rgb(8, 194, 158) 100%); +$color-transparent: transparent; +$color-black: #000000; +$color-white: #FFFFFF; +$color-brand1-5: rgba(43,213,255,1); +$color-text1-4: rgba(31,38,51,1); +$color-text1-3: rgba(88,93,102,1); +$color-text1-2: rgba(141,146,153,1); +$color-text1-1: rgba(196,199,204,1); +$color-fill1-4: rgba(237,239,242,1); +$color-fill1-3: rgba(240,242,245,1); +$color-fill1-2: rgba(244,246,249,1); +$color-fill1-1: rgba(245,247,250,1); +$color-line1-4: rgba(196,199,204,1); +$color-line1-3: rgba(217,219,222,1); +$color-line1-2: rgba(220,223,230,1); +$color-line1-1: rgba(228,232,238,1); +$color-other-3: rgba(141,146,153,1); +$color-other-2: rgba(88,93,102,1); +$color-other-1: rgba(31,38,51,1); +$color-link-3: rgba(0,157,214,1); +$color-link-2: rgba(0,123,176,1); +$color-link-1: rgba(3,193,253,1); +$color-help-4: rgba(0,117,207,1); +$color-help-3: rgba(3,148,245,1); +$color-help-2: rgba(166,231,255,1); +$color-help-1: rgba(230,249,255,1); +$color-error-4: rgba(207,23,53,1); +$color-error-3: rgba(245,39,67,1); +$color-error-2: rgba(255,82,99,1); +$color-error-1: rgba(255,240,240,1); +$color-warning-4: rgba(207,163,19,1); +$color-warning-3: rgba(245,203,34,1); +$color-warning-2: rgba(255,251,199,1); +$color-warning-1: rgba(255,254,240,1); +$color-notice-4: rgba(0,157,214,1); +$color-notice-3: rgba(3,193,253,1); +$color-notice-2: rgba(163,241,250,1); +$color-notice-1: rgba(230,253,255,1); +$color-success-4: rgba(0,156,130,1); +$color-success-3: rgba(8,194,158,1); +$color-success-2: rgba(121,232,199,1); +$color-success-1: rgba(230,255,246,1); +$color-data1-8: rgba(3,148,245,1); +$color-data1-7: rgba(153,209,15,1); +$color-data1-6: rgba(8,194,158,1); +$color-data1-5: rgba(245,203,34,1); +$color-data1-4: rgba(245,115,21,1); +$color-data1-3: rgba(159,24,184,1); +$color-data1-2: rgba(90,28,184,1); +$color-data1-1: rgba(12,184,198,1); +$color-brand1-9: rgba(0,157,214,1); +$color-brand1-6: rgba(3,193,253,1); +$color-brand1-1: rgba(230,253,255,1); + +// ------------------------ search ------------------------ // + +$search-normal-dark-bg-opacity: 0; +$search-normal-corner: 4px; +$search-normal-primary-l-height: 36px; +$search-normal-primary-l-icon-size: 16px; +$search-normal-primary-l-btn-text-size: 14px; +$search-normal-primary-m-height: 36px; +$search-normal-secondary-l-height: 36px; +$search-normal-primary-color: $primary-color; +$search-normal-primary-hover-color: $primary-color; +$search-normal-primary-split-color: #e4e8ee; +$search-normal-primary-shadow: none; +$search-normal-primary-btn-text-color: #FFFFFF; +$search-normal-primary-btn-hover-bg-color: #009dd6; +$search-normal-primary-btn-hover-text-color: #FFFFFF; +$search-normal-primary-border-width: 2px; +$search-normal-primary-btn-text-padding-left: 0px; +$search-normal-primary-m-icon-size: 16px; +$search-normal-primary-m-btn-text-size: 16px; +$search-normal-secondary-color: #d9dbde; +$search-normal-secondary-split-color: #e4e8ee; +$search-normal-secondary-hover-color: $primary-color; +$search-normal-secondary-shadow: none; +$search-normal-secondary-btn-bg-color: $primary-color; +$search-normal-secondary-btn-text-color: #FFFFFF; +$search-normal-secondary-btn-hover-bg-color: #009dd6; +$search-normal-secondary-btn-hover-text-color: #FFFFFF; +$search-normal-secondary-border-width: 1px; +$search-normal-secondary-btn-text-padding-left: 0px; +$search-normal-secondary-l-icon-size: 24px; +$search-normal-secondary-l-btn-text-size: 16px; +$search-normal-secondary-m-height: 40px; +$search-normal-secondary-m-icon-size: 16px; +$search-normal-secondary-m-btn-text-size: 16px; +$search-normal-normal-color: #d9dbde; +$search-normal-normal-split-color: #e4e8ee; +$search-normal-normal-hover-color: #c4c7cc; +$search-normal-normal-shadow: none; +$search-normal-normal-btn-bg-color: #f5f7fa; +$search-normal-normal-btn-text-color: #585d66; +$search-normal-normal-btn-hover-bg-color: #f0f2f5; +$search-normal-normal-btn-hover-text-color: #1f2633; +$search-normal-normal-border-width: 1px; +$search-normal-normal-btn-text-padding-left: 0px; +$search-normal-normal-l-height: 60px; +$search-normal-normal-l-icon-size: 24px; +$search-normal-normal-l-btn-text-size: 16px; +$search-normal-normal-m-height: 40px; +$search-normal-normal-m-icon-size: 16px; +$search-normal-normal-m-btn-text-size: 16px; +$search-normal-dark-color: $primary-color; +$search-normal-dark-hover-color: $primary-color; +$search-normal-dark-text-color: #FFFFFF; +$search-normal-dark-bg-color: #FFFFFF; +$search-normal-dark-shadow: none; +$search-normal-dark-btn-text-color: #FFFFFF; +$search-normal-dark-btn-hover-bg-color: #009dd6; +$search-normal-dark-btn-hover-text-color: #FFFFFF; +$search-normal-dark-border-width: 1px; +$search-normal-dark-btn-text-padding-left: 0px; +$search-normal-dark-l-height: 60px; +$search-normal-dark-l-icon-size: 24px; +$search-normal-dark-l-btn-text-size: 16px; +$search-normal-dark-m-height: 40px; +$search-normal-dark-m-icon-size: 16px; +$search-normal-dark-m-btn-text-size: 16px; +$search-simple-corner: 4px; +$search-simple-l-icon-margin-right: 12px; +$search-simple-m-icon-margin-right: 8px; +$search-simple-normal-color: #d9dbde; +$search-simple-normal-hover-color: #c4c7cc; +$search-simple-normal-split-color: #d9dbde; +$search-simple-normal-shadow: none; +$search-simple-normal-icon-text-color: #8d9299; +$search-simple-normal-icon-hover-text-color: #585d66; +$search-simple-normal-border-width: 1px; +$search-simple-normal-l-icon-size: 20px; +$search-simple-normal-m-icon-size: 12px; +$search-simple-normal-btn-text-padding-left: 0px; +$search-simple-dark-color: #d9dbde; +$search-simple-dark-hover-color: #d9dbde; +$search-simple-dark-bg-color: #FFFFFF; +$search-simple-dark-bg-opacity: 0; +$search-simple-dark-text-color: #FFFFFF; +$search-simple-dark-shadow: none; +$search-simple-dark-icon-text-color: #8d9299; +$search-simple-dark-icon-hover-text-color: #585d66; +$search-simple-dark-btn-text-padding-left: 0px; +$search-simple-dark-split-color: #d9dbde; +$search-simple-dark-border-width: 1px; +$search-simple-dark-l-icon-size: 20px; +$search-simple-dark-m-icon-size: 12px; +$search-search-icon-content: ""; + +// ------------------------ dialog ------------------------ // + +$dialog-corner: 8px; +$dialog-border-width: 0px; +$dialog-title-padding-top: 20px; +$dialog-title-padding-bottom: 20px; +$dialog-title-padding-left-right: 20px; +$dialog-title-border-width: 1px; +$dialog-content-font-size: 14px; +$dialog-footer-padding-top: 12px; +$dialog-footer-padding-bottom: 20px; +$dialog-footer-button-spacing: 8px; +$dialog-close-top: 20px; +$dialog-close-right: 20px; +$dialog-close-size: 16px; +$dialog-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15); +$dialog-title-border-color: #e4e8ee; +$dialog-title-font-size: 16px; +$dialog-title-font-weight: normal; +$dialog-message-content-padding-top: 20px; +$dialog-message-content-padding-bottom: 20px; +$dialog-message-content-padding-left-right: 20px; +$dialog-content-padding-top: 20px; +$dialog-content-padding-bottom: 20px; +$dialog-content-padding-left-right: 20px; +$dialog-footer-border-width: 0px; +$dialog-footer-padding-left-right: 20px; +$dialog-close-width: 16px; +$dialog-bg: #FFFFFF; +$dialog-border-color: #dcdfe6; +$dialog-border-style: solid; +$dialog-title-color: #1f2633; +$dialog-title-bg-color: transparent; +$dialog-content-color: #585d66; +$dialog-footer-bg-color: transparent; +$dialog-footer-border-color: transparent; +$dialog-close-color: #8d9299; +$dialog-close-color-hovered: #1f2633; +$dialog-close-bg-hovered: transparent; + +// ------------------------ menu-button ------------------------ // + +$menu-btn-pure-text-primary-icon-color: #FFFFFF; +$menu-btn-disabled-icon-color: #c4c7cc; +$menu-btn-ghost-light-disabled-icon-color: rgba(0, 0, 0, 0.1); +$menu-btn-ghost-dark-disabled-icon-color: rgba(255, 255, 255, 0.4); +$menu-btn-pure-text-normal-icon-color: #8d9299; +$menu-btn-pure-text-secondary-icon-color: $primary-color; +$menu-btn-text-text-normal-icon-color: #1f2633; +$menu-btn-text-text-primary-icon-color: $primary-color; +$menu-btn-ghost-light-icon-color: #1f2633; +$menu-btn-ghost-dark-icon-color: #FFFFFF; +$menu-btn-fold-icon-content: ""; +$menu-btn-unfold-icon-content: $icon-reset; + +// ------------------------ card ------------------------ // + +$card-shadow: none; +$card-corner: 4px; +$card-padding-lr: 16px; +$card-border-width: 1px; +$card-head-padding-bottom: 12px; +$card-head-bottom-border-width: 1px; +$card-head-main-height: 40px; +$card-head-main-margin-top: 8px; +$card-head-main-margin-bottom: 0px; +$card-title-font-size: 16px; +$card-title-font-weight: normal; +$card-sub-title-font-size: 12px; +$card-title-extra-font-size: 14px; +$card-title-bullet-width: 3px; +$card-title-bullet-height: 16px; +$card-title-padding-left: 8px; +$card-sub-title-padding-left: 8px; +$card-body-show-divider-padding-top: 12px; +$card-body-hide-divider-padding-top: 0px; +$card-content-font-size: 14px; +$card-content-line-height: 1.5; +$card-body-padding-bottom: 12px; +$card-more-btn-height: 16px; +$card-more-btn-padding-top: 8px; +$card-more-btn-font-size: 14px; +$card-border-style: solid; +$card-border-color: #dcdfe6; +$card-background: #FFFFFF; +$card-header-background: #FFFFFF; +$card-title-color: #1f2633; +$card-sub-title-color: #585d66; +$card-title-extra-color: $primary-color; +$card-title-bullet-color: $primary-color; +$card-content-color: #585d66; +$card-head-bottom-border-color: #e4e8ee; +$card-more-btn-color: $primary-color; +$card-more-btn-background: #FFFFFF; + +// ------------------------ button ------------------------ // + +$btn-size-l-icon-size: 20px; +$btn-pure-primary-color: #FFFFFF; +$btn-pure-primary-color-hover: #FFFFFF; +$btn-pure-primary-color-active: #FFFFFF; +$btn-shadow: none; +$btn-shadow-hover: none; +$btn-size-m-icon-size: 16px; +$btn-size-m-icon-margin: 8px; +$btn-size-l-icon-margin: 8px; +$btn-pure-secondary-bg-hover: #2bd5ff; +$btn-pure-secondary-border-color-hover: #2bd5ff; +$btn-pure-primary-bg-hover: #2bd5ff; +$btn-warning-primary-border-color-hover: #ff5263; +$btn-warning-primary-bg-hover: #ff5263; +$btn-warning-normal-border-color-hover: #ff5263; +$btn-warning-normal-bg-hover: #ff5263; +$btn-size-s-height: 24px; +$btn-size-m-height: 32px; +$btn-size-s-padding: 8px; +$btn-size-s-border-width: 1px; +$btn-size-s-font: 12px; +$btn-size-s-icon-size: 12px; +$btn-size-s-icon-margin: 4px; +$btn-size-s-icon-split-size: 12px; +$btn-size-s-corner: 4px; +$btn-size-m-padding: 12px; +$btn-size-m-border-width: 1px; +$btn-size-m-font: 14px; +$btn-size-m-icon-split-size: 12px; +$btn-size-m-corner: 4px; +$btn-size-l-height: 40px; +$btn-size-l-padding: 16px; +$btn-size-l-border-width: 1px; +$btn-size-l-font: 16px; +$btn-size-l-icon-split-size: 16px; +$btn-size-l-corner: 4px; +$btn-pure-color-disabled: #c4c7cc; +$btn-pure-bg-disabled: #f5f7fa; +$btn-pure-border-color-disabled: #e4e8ee; +$btn-pure-normal-color-disabled: #c4c7cc; +$btn-pure-normal-bg-disabled: #f5f7fa; +$btn-pure-normal-border-color-disabled: #e4e8ee; +$btn-pure-normal-color: #1f2633; +$btn-pure-normal-color-hover: #1f2633; +$btn-pure-normal-color-active: #1f2633; +$btn-pure-normal-bg: #FFFFFF; +$btn-pure-normal-bg-hover: #f4f6f9; +$btn-pure-normal-bg-active: #f4f6f9; +$btn-pure-normal-border-color: #d9dbde; +$btn-pure-normal-border-color-hover: #c4c7cc; +$btn-pure-normal-border-color-active: #c4c7cc; +$btn-pure-normal-border-style: solid; +$btn-pure-secondary-color-disabled: #c4c7cc; +$btn-pure-secondary-bg-disabled: #f5f7fa; +$btn-pure-secondary-border-color-disabled: #e4e8ee; +$btn-pure-secondary-color: $primary-color; +$btn-pure-secondary-color-hover: #FFFFFF; +$btn-pure-secondary-color-active: #FFFFFF; +$btn-pure-secondary-bg: #FFFFFF; +$btn-pure-secondary-bg-active: #009dd6; +$btn-pure-secondary-border-color: $primary-color; +$btn-pure-secondary-border-color-active: #009dd6; +$btn-pure-secondary-border-style: solid; +$btn-pure-primary-color-disabled: #c4c7cc; +$btn-pure-primary-bg-disabled: #f5f7fa; +$btn-pure-primary-border-color-disabled: #e4e8ee; +$btn-pure-primary-bg: $primary-color; +$btn-pure-primary-bg-active: #009dd6; +$btn-pure-primary-border-color: transparent; +$btn-pure-primary-border-color-hover: transparent; +$btn-pure-primary-border-color-active: transparent; +$btn-pure-primary-border-style: solid; +$btn-ghost-border-style: solid; +$btn-ghost-dark-color: #FFFFFF; +$btn-ghost-dark-border-color: #FFFFFF; +$btn-ghost-dark-color-hover: #FFFFFF; +$btn-ghost-dark-bg: transparent; +$btn-ghost-dark-bg-opacity: 0; +$btn-ghost-dark-bg-hover-rgb: #FFFFFF; +$btn-ghost-dark-bg-hover-opacity: .8; +$btn-ghost-dark-border-color-hover: #FFFFFF; +$btn-ghost-dark-color-disabled-rgb: #FFFFFF; +$btn-ghost-dark-color-disabled-opacity: .4; +$btn-ghost-dark-bg-disabled: transparent; +$btn-ghost-dark-border-color-disabled-rgb: #FFFFFF; +$btn-ghost-dark-border-color-disabled-opacity: .4; +$btn-ghost-light-color: #1f2633; +$btn-ghost-light-border-color: #1f2633; +$btn-ghost-light-bg: transparent; +$btn-ghost-light-bg-opacity: 0; +$btn-ghost-light-color-hover: #8d9299; +$btn-ghost-light-border-color-hover: #1f2633; +$btn-ghost-light-bg-hover-rgb: #000000; +$btn-ghost-light-bg-hover-opacity: .92; +$btn-ghost-light-color-disabled-rgb: #000000; +$btn-ghost-light-color-disabled-opacity: .1; +$btn-ghost-light-bg-disabled: transparent; +$btn-ghost-light-border-color-disabled-rgb: #000000; +$btn-ghost-light-border-color-disabled-opacity: .1; +$btn-warning-border-style: solid; +$btn-warning-primary-color: #FFFFFF; +$btn-warning-primary-color-hover: #FFFFFF; +$btn-warning-primary-color-active: #FFFFFF; +$btn-warning-primary-border-color: #f52743; +$btn-warning-primary-border-color-active: #cf1735; +$btn-warning-primary-bg: #f52743; +$btn-warning-primary-bg-active: #cf1735; +$btn-warning-primary-color-disabled: #c4c7cc; +$btn-warning-primary-border-color-disabled: #dcdfe6; +$btn-warning-primary-bg-disabled: #f5f7fa; +$btn-warning-normal-color: #f52743; +$btn-warning-normal-color-hover: #FFFFFF; +$btn-warning-normal-color-active: #FFFFFF; +$btn-warning-normal-border-color: #f52743; +$btn-warning-normal-border-color-active: #cf1735; +$btn-warning-normal-bg: #FFFFFF; +$btn-warning-normal-bg-active: #cf1735; +$btn-warning-normal-color-disabled: #c4c7cc; +$btn-warning-normal-border-color-disabled: #e4e8ee; +$btn-warning-normal-bg-disabled: #f5f7fa; +$btn-text-primary-color: $primary-color; +$btn-text-primary-color-hover: #009dd6; +$btn-text-disabled-color: #c4c7cc; +$btn-text-loading-color: #1f2633; +$btn-text-secondary-color: #585d66; +$btn-text-secondary-color-hover: $primary-color; +$btn-text-normal-color: #1f2633; +$btn-text-normal-color-hover: $primary-color; +$btn-text-size-s-height: 16px; +$btn-text-size-s-font: 12px; +$btn-text-icon-size-s: 16px; +$btn-text-icon-s-margin: 4px; +$btn-text-size-m-height: 20px; +$btn-text-size-m-font: 14px; +$btn-text-icon-size-m: 20px; +$btn-text-icon-m-margin: 4px; +$btn-text-size-l-height: 24px; +$btn-text-size-l-font: 14px; +$btn-text-icon-size-l: 24px; +$btn-text-icon-l-margin: 4px; + +// ------------------------ form ------------------------ // + +$form-item-l-margin-b: 20px; +$form-label-padding-r: 12px; +$form-item-m-margin-b: 16px; +$form-item-s-margin-b: 12px; +$form-inline-l-item-margin-r: 24px; +$form-inline-m-item-margin-r: 20px; +$form-inline-s-item-margin-r: 16px; +$form-help-margin-top: 4px; +$form-help-font-size: 12px; +$form-help-color: #8d9299; +$form-error-color: #f52743; +$form-warning-color: #f5cb22; +$form-top-label-margin-b: 2px; +$form-label-color: #585d66; + +// ------------------------ nav ------------------------ // + +$nav-primary-bg-color: #1f2633; +$nav-primary-border-color: #1f2633; +$nav-primary-text-color: #FFFFFF; +$nav-primary-item-hover-bg-color: #000000; +$nav-normal-text-color: #1f2633; +$nav-normal-item-hover-text-color: #1f2633; +$nav-normal-item-selected-text-color: $primary-color; +$nav-icon-self-size: 16px; +$nav-primary-item-opened-bg-color: transparent; +$nav-secondary-item-hover-active-color: #FFFFFF; +$nav-secondary-item-selected-active-color: #FFFFFF; +$nav-secondary-item-opened-bg-color: transparent; +$nav-normal-item-hover-bg-color: #f4f6f9; +$nav-normal-item-hover-text-style: bold; +$nav-normal-item-hover-active-color: $primary-color; +$nav-normal-sub-nav-hover-text-color: #1f2633; +$nav-normal-item-selected-bg-color: #f4f6f9; +$nav-normal-item-opened-bg-color: transparent; +$nav-normal-item-opened-text-color: #1f2633; +$nav-line-item-hover-text-color: #000000; +$nav-line-item-hover-text-style: bold; +$nav-line-sub-nav-hover-text-color: #1f2633; +$nav-hoz-height: 44px; +$nav-hoz-font-size: 14px; +$nav-hoz-item-margin-tb: 0px; +$nav-hoz-item-margin-lr: 0px; +$nav-hoz-item-padding-lr: 20px; +$nav-hoz-item-corner: 0; +$nav-hoz-item-selected-active-line: 2px; +$nav-hoz-item-hover-active-line: 0px; +$nav-ver-height: 40px; +$nav-ver-font-size: 14px; +$nav-ver-item-margin-tb: 0px; +$nav-ver-item-margin-lr: 0px; +$nav-ver-item-padding-lr: 20px; +$nav-ver-item-corner: 0; +$nav-ver-item-selected-active-line: 2px; +$nav-ver-item-hover-active-line: 0px; +$nav-ver-sub-nav-height: 40px; +$nav-ver-sub-nav-font-size: 12px; +$nav-group-height: 40px; +$nav-group-font-size: 14px; +$nav-icon-self-margin: 4px; +$nav-icon-only-font-size: 16px; +$nav-primary-border-width: 0px; +$nav-primary-text-style: normal; +$nav-primary-shadow: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +$nav-primary-sub-nav-bg-color: #1f2633; +$nav-primary-sub-nav-text-color: #FFFFFF; +$nav-primary-sub-nav-text-style: normal; +$nav-primary-group-text-color: #8d9299; +$nav-primary-group-text-style: normal; +$nav-primary-item-hover-text-color: #FFFFFF; +$nav-primary-item-hover-text-style: normal; +$nav-primary-item-hover-active-color: $primary-color; +$nav-primary-sub-nav-hover-bg-color: #000000; +$nav-primary-sub-nav-hover-text-color: #FFFFFF; +$nav-primary-item-selected-bg-color: #000000; +$nav-primary-item-selected-text-color: #FFFFFF; +$nav-primary-item-selected-text-style: bold; +$nav-primary-item-childselected-bg-color: transparent; +$nav-primary-item-childselected-text-color: #FFFFFF; +$nav-primary-item-childselected-text-style: bold; +$nav-primary-item-selected-active-color: $primary-color; +$nav-primary-sub-nav-selected-bg-color: #000000; +$nav-primary-sub-nav-selected-text-color: #FFFFFF; +$nav-primary-sub-nav-active-color: $primary-color; +$nav-primary-item-disabled-text-color: #c4c7cc; +$nav-primary-item-opened-text-color: #FFFFFF; +$nav-secondary-bg-color: $primary-color; +$nav-secondary-border-width: 0px; +$nav-secondary-border-color: $primary-color; +$nav-secondary-text-color: #FFFFFF; +$nav-secondary-text-style: normal; +$nav-secondary-shadow: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +$nav-secondary-sub-nav-bg-color: $primary-color; +$nav-secondary-sub-nav-text-color: #FFFFFF; +$nav-secondary-sub-nav-text-style: normal; +$nav-secondary-group-text-color: #FFFFFF; +$nav-secondary-group-text-style: normal; +$nav-secondary-item-hover-bg-color: #009dd6; +$nav-secondary-item-hover-text-color: #FFFFFF; +$nav-secondary-item-hover-text-style: normal; +$nav-secondary-sub-nav-hover-bg-color: #009dd6; +$nav-secondary-sub-nav-hover-text-color: #FFFFFF; +$nav-secondary-item-selected-bg-color: #009dd6; +$nav-secondary-item-selected-text-color: #FFFFFF; +$nav-secondary-item-selected-text-style: bold; +$nav-secondary-item-childselected-bg-color: transparent; +$nav-secondary-item-childselected-text-color: #FFFFFF; +$nav-secondary-item-childselected-text-style: bold; +$nav-secondary-sub-nav-selected-bg-color: #009dd6; +$nav-secondary-sub-nav-selected-text-color: #FFFFFF; +$nav-secondary-sub-nav-active-color: $primary-color; +$nav-secondary-item-disabled-text-color: #e6fdff; +$nav-secondary-item-opened-text-color: #FFFFFF; +$nav-normal-bg-color: #FFFFFF; +$nav-normal-border-color: #e4e8ee; +$nav-normal-text-style: normal; +$nav-normal-border-line: 1px; +$nav-normal-shadow: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +$nav-normal-sub-nav-bg-color: #FFFFFF; +$nav-normal-sub-nav-text-color: #1f2633; +$nav-normal-sub-nav-text-style: normal; +$nav-normal-group-text-color: #8d9299; +$nav-normal-group-text-style: normal; +$nav-normal-sub-nav-hover-bg-color: #f4f6f9; +$nav-normal-item-selected-text-style: bold; +$nav-normal-item-childselected-bg-color: transparent; +$nav-normal-item-childselected-text-color: $primary-color; +$nav-normal-item-childselected-text-style: normal; +$nav-normal-item-selected-active-color: $primary-color; +$nav-normal-sub-nav-selected-bg-color: #f4f6f9; +$nav-normal-sub-nav-selected-text-color: $primary-color; +$nav-normal-sub-nav-active-color: $primary-color; +$nav-normal-item-disabled-text-color: #8d9299; +$nav-line-bg-color: transparent; +$nav-line-border-color: #dcdfe6; +$nav-line-text-color: #1f2633; +$nav-line-text-style: normal; +$nav-line-border-line: 1px; +$nav-line-sub-nav-bg-color: transparent; +$nav-line-sub-nav-text-color: #1f2633; +$nav-line-sub-nav-text-style: normal; +$nav-line-item-hover-bg-color: transparent; +$nav-line-item-hover-active-color: $primary-color; +$nav-line-sub-nav-hover-bg-color: transparent; +$nav-line-item-selected-bg-color: transparent; +$nav-line-item-selected-text-color: $primary-color; +$nav-line-item-selected-text-style: bold; +$nav-line-item-childselected-bg-color: transparent; +$nav-line-item-childselected-text-color: $primary-color; +$nav-line-item-childselected-text-style: normal; +$nav-line-item-selected-active-color: $primary-color; +$nav-line-sub-nav-selected-bg-color: transparent; +$nav-line-sub-nav-selected-text-color: $primary-color; +$nav-line-sub-nav-active-color: $primary-color; +$nav-line-item-disabled-text-color: #8d9299; +$nav-line-item-opened-bg-color: transparent; +$nav-line-item-opened-text-color: $primary-color; +$nav-line-group-text-color: #8d9299; +$nav-line-group-text-style: normal; + +// ------------------------ tab ------------------------ // + +$tab-wrapped-border-line-color-hover: #d9dbde; +$tab-nav-scroll-padding-right-m: 60px; +$tab-nav-scroll-padding-right-s: 56px; +$tab-nav-tab-icon-size-m: 16px; +$tab-nav-tab-icon-size-s: 12px; +$tab-nav-close-icon-size-m: 12px; +$tab-nav-close-icon-size-s: 8px; +$tab-nav-close-icon-padding-l-size-m: 8px; +$tab-nav-close-icon-padding-l-size-s: 8px; +$tab-nav-arrow-left-positon-right: 32px; +$tab-nav-arrow-right-positon-right: 8px; +$tab-nav-arrow-down-positon-right: 8px; +$tab-item-padding-tb-size-m: 12px; +$tab-item-padding-tb-size-s: 8px; +$tab-item-padding-lr-size-m: 16px; +$tab-item-padding-lr-size-s: 12px; +$tab-item-text-size-m: 14px; +$tab-item-text-size-s: 12px; +$tab-close-icon-color: #585d66; +$tab-close-icon-color-hover: #1f2633; +$tab-close-icon-color-selected: $primary-color; +$tab-close-icon-color-disabled: #dcdfe6; +$tab-item-font-weight-selected: normal; +$tab-nav-arrow-color-normal: #585d66; +$tab-nav-arrow-color-hover: #1f2633; +$tab-nav-arrow-color-disabled: #dcdfe6; +$tab-pure-divider-line-width: 1px; +$tab-pure-ink-bar-width: 2px; +$tab-pure-text-color-normal: #585d66; +$tab-pure-bg-color: transparent; +$tab-pure-text-color-hover: #1f2633; +$tab-pure-text-color-selected: $primary-color; +$tab-pure-text-color-disabled: #dcdfe6; +$tab-pure-ink-bar-color: $primary-color; +$tab-pure-divider-border-color: #dcdfe6; +$tab-pure-divider-shadow: none; +$tab-wrapped-border-line-style: solid; +$tab-wrapped-border-line-width: 1px; +$tab-wrapped-border-side-width: 1px; +$tab-wrapped-tab-corner-radius: 4px; +$tab-wrapped-tab-margin-right: 4px; +$tab-wrapped-tab-margin-bottom: 4px; +$tab-wrapped-ink-bar-width: 2px; +$tab-wrapped-bar-bg-color: transparent; +$tab-wrapped-ink-bar-color: $primary-color; +$tab-wrapped-nav-item-border-color-active: $primary-color; +$tab-wrapped-border-line-color: #dcdfe6; +$tab-wrapped-content-border-line-width: 1px; +$tab-wrapped-content-border-line-style: solid; +$tab-wrapped-content-border-line-color: #dcdfe6; +$tab-wrapped-text-color: #585d66; +$tab-wrapped-text-color-hover: #1f2633; +$tab-wrapped-bg-color: #f4f6f9; +$tab-wrapped-bg-color-hover: #f0f2f5; +$tab-wrapped-text-color-selected: $primary-color; +$tab-wrapped-text-color-disabled: #c4c7cc; +$tab-wrapped-bg-color-selected: #FFFFFF; +$tab-wrapped-bg-color-disabled: #f5f7fa; +$tab-capsule-text-color: #1f2633; +$tab-capsule-text-color-hover: #1f2633; +$tab-capsule-text-color-selected: #FFFFFF; +$tab-capsule-text-color-disabled: #c4c7cc; +$tab-capsule-bg-color: #f4f6f9; +$tab-capsule-bg-color-hover: #f0f2f5; +$tab-capsule-bg-color-selected: $primary-color; +$tab-capsule-bg-color-disabled: #f5f7fa; +$tab-capsule-tab-border-line-color: #d9dbde; +$tab-capsule-tab-border-line-color-hover: #d9dbde; +$tab-capsule-tab-border-line-color-active: $primary-color; +$tab-capsule-tab-border-line-color-disabled: #e4e8ee; +$tab-capsule-corner-radius: 4px; +$tab-capsule-tab-border-line-width: 1px; +$tab-capsule-tab-border-line-style: solid; +$tab-text-item-sep-width: 1px; +$tab-text-item-sep-height: 8px; +$tab-text-item-sep-color: #dcdfe6; +$tab-text-text-color-normal: #585d66; +$tab-text-text-color-hover: #1f2633; +$tab-text-text-color-selected: $primary-color; +$tab-text-text-color-disabled: #c4c7cc; +$tab-icon-dropdown-content: ""; +$tab-icon-prev-content: ""; +$tab-icon-next-content: ""; + +// ------------------------ calendar ------------------------ // + +$calendar-fullscreen-table-cell-hover-background: #e6fdff; +$calendar-btn-arrow-size: 16px; +$calendar-fullscreen-header-margin-bottom: 8px; +$calendar-fullscreen-table-head-font-weight: bold; +$calendar-fullscreen-table-head-font-size: 16px; +$calendar-fullscreen-table-head-padding-r: 12px; +$calendar-fullscreen-table-head-padding-b: 4px; +$calendar-fullscreen-table-cell-font-size: 14px; +$calendar-fullscreen-table-cell-boder-top-width: 2px; +$calendar-fullscreen-table-cell-margin-tb: 0px; +$calendar-fullscreen-table-cell-margin-lr: 4px; +$calendar-fullscreen-table-cell-padding-tb: 4px; +$calendar-fullscreen-table-cell-padding-lr: 8px; +$calendar-fullscreen-table-cell-min-height: 80px; +$calendar-fullscreen-table-head-color: #1f2633; +$calendar-fullscreen-table-cell-normal-background: #FFFFFF; +$calendar-fullscreen-table-cell-normal-color: #1f2633; +$calendar-fullscreen-table-cell-normal-border-color: #dcdfe6; +$calendar-fullscreen-table-cell-hover-color: $primary-color; +$calendar-fullscreen-table-cell-hover-border-color: $primary-color; +$calendar-fullscreen-table-cell-select-background: #e6fdff; +$calendar-fullscreen-table-cell-select-color: $primary-color; +$calendar-fullscreen-table-cell-select-border-color: $primary-color; +$calendar-fullscreen-table-cell-select-font-weight: bold; +$calendar-fullscreen-table-cell-current-background: #FFFFFF; +$calendar-fullscreen-table-cell-current-color: $primary-color; +$calendar-fullscreen-table-cell-current-border-color: $primary-color; +$calendar-fullscreen-table-cell-current-font-weight: bold; +$calendar-fullscreen-table-cell-other-background: transparent; +$calendar-fullscreen-table-cell-other-color: #c4c7cc; +$calendar-fullscreen-table-cell-other-border-color: transparent; +$calendar-fullscreen-table-cell-disabled-background: #f5f7fa; +$calendar-fullscreen-table-cell-disabled-color: #c4c7cc; +$calendar-fullscreen-table-cell-disabled-border-color: #e4e8ee; +$calendar-card-header-margin-bottom: 8px; +$calendar-card-table-head-font-size: 12px; +$calendar-card-table-head-font-weight: normal; +$calendar-card-table-cell-font-size: 12px; +$calendar-card-table-cell-date-border-radius: 4px; +$calendar-card-table-cell-date-width: 24px; +$calendar-card-table-cell-date-height: 24px; +$calendar-card-table-cell-month-border-radius: 4px; +$calendar-card-table-cell-month-width: 60px; +$calendar-card-table-cell-month-height: 24px; +$calendar-card-table-cell-year-border-radius: 4px; +$calendar-card-table-cell-year-width: 48px; +$calendar-card-table-cell-year-height: 24px; +$calendar-card-table-head-color: #8d9299; +$calendar-card-table-cell-corner: 0; +$calendar-card-table-cell-normal-background: #FFFFFF; +$calendar-card-table-cell-normal-color: #585d66; +$calendar-card-table-cell-normal-border-color: #FFFFFF; +$calendar-card-table-cell-hover-background: #e6fdff; +$calendar-card-table-cell-hover-color: $primary-color; +$calendar-card-table-cell-hover-border-color: #e6fdff; +$calendar-card-table-cell-select-background: $primary-color; +$calendar-card-table-cell-select-color: #FFFFFF; +$calendar-card-table-cell-select-border-color: $primary-color; +$calendar-card-table-cell-select-font-weight: bold; +$calendar-card-table-cell-other-background: #FFFFFF; +$calendar-card-table-cell-other-color: #c4c7cc; +$calendar-card-table-cell-other-border-color: #FFFFFF; +$calendar-card-table-cell-disabled-background: #f5f7fa; +$calendar-card-table-cell-disabled-color: #c4c7cc; +$calendar-card-table-cell-disabled-border-color: #f5f7fa; +$calendar-card-table-cell-current-background: #FFFFFF; +$calendar-card-table-cell-current-color: $primary-color; +$calendar-card-table-cell-current-border-color: transparent; +$calendar-card-table-cell-current-font-weight: bold; +$calendar-card-table-cell-inrange-background: #e6fdff; +$calendar-card-table-cell-inrange-color: $primary-color; +$calendar-card-table-cell-inrange-border-color: #e6fdff; +$calendar-panel-header-margin-bottom: 8px; +$calendar-panel-header-height: 32px; +$calendar-panel-header-border-bottom-width: 1px; +$calendar-panel-header-background: $primary-color; +$calendar-panel-header-border-bottom-color: transparent; +$calendar-btn-date-font-weight: bold; +$calendar-btn-date-margin-lr: 4px; +$calendar-btn-arrow-single-offset-lr: 28px; +$calendar-btn-arrow-double-offset-lr: 8px; +$calendar-btn-arrow-color: #FFFFFF; +$calendar-btn-arrow-color-hover: #FFFFFF; +$calendar-btn-date-color: #FFFFFF; +$calendar-btn-date-color-hover: #FFFFFF; +$calendar-btn-arrow-content-prev: ""; +$calendar-btn-arrow-content-next: ""; +$calendar-btn-arrow-content-prev-super: ""; +$calendar-btn-arrow-content-next-super: ""; + +// ------------------------ checkbox ------------------------ // + +$checkbox-circle-size: 16px; +$checkbox-margin-left: 8px; +$checkbox-size: 16px; +$checkbox-border-radius: 4px; +$checkbox-border-width: 1px; +$checkbox-shadow: none; +$checkbox-border-color: #d9dbde; +$checkbox-hovered-border-color: $primary-color; +$checkbox-checked-border-color: transparent; +$checkbox-disabled-border-color: #e4e8ee; +$checkbox-checked-hovered-border-color: transparent; +$checkbox-checked-circle-color: #FFFFFF; +$checkbox-label-color: #1f2633; +$checkbox-disabled-label-color: #c4c7cc; +$checkbox-disabled-circle-color: #c4c7cc; +$checkbox-checked-hovered-circle-color: #FFFFFF; +$checkbox-bg-color: #FFFFFF; +$checkbox-checked-bg-color: $primary-color; +$checkbox-hovered-bg-color: #e6fdff; +$checkbox-checked-hovered-bg-color: #009dd6; +$checkbox-disabled-bg-color: #f5f7fa; +$checkbox-font-size: 14px; +$checkbox-semi-select-icon-content: ""; +$checkbox-select-icon-content: ""; + +// ------------------------ cascader ------------------------ // + +$cascader-menu-width: 104px; +$cascader-menu-icon-expand-size: 16px; +$cascader-menu-border-width: 1px; +$cascader-menu-min-width: 100px; +$cascader-menu-height: 192px; +$cascader-menu-border-color: #dcdfe6; +$cascader-menu-border-radius: 4px; +$cascader-menu-icon-expand-color: #585d66; +$cascader-menu-icon-hover-expand-color: #1f2633; +$cascader-menu-item-expanded-color: #1f2633; +$cascader-menu-item-expanded-background-color: #f4f6f9; + +// ------------------------ tree ------------------------ // + +$tree-switch-arrow-size: 16px; +$tree-switch-icon-size: 12px; +$tree-switcher-fold-icon-content: ""; +$tree-switcher-unfold-icon-content: ""; +$tree-node-padding: 4px; +$tree-node-title-margin: 4px; +$tree-node-title-padding: 4px; +$tree-node-title-font-size: 14px; +$tree-switch-size: 16px; +$tree-switch-border-width: 1px; +$tree-switch-margint-right: 8px; +$tree-line-width: 1px; +$tree-node-normal-color: #1f2633; +$tree-node-normal-background: #FFFFFF; +$tree-node-title-border-radius: 4px; +$tree-switch-arrow-color: #8d9299; +$tree-switch-icon-color: #585d66; +$tree-switch-bg-color: #FFFFFF; +$tree-switch-border-color: #d9dbde; +$tree-switch-corner: 4px; +$tree-line-color: #d9dbde; +$tree-line-style: solid; +$tree-node-hover-color: #1f2633; +$tree-node-hover-bg-color: #f4f6f9; +$tree-switch-hover-arrow-color: #1f2633; +$tree-switch-hover-icon-color: #1f2633; +$tree-switch-hover-bg-color: #f4f6f9; +$tree-switch-hover-border-color: #c4c7cc; +$tree-node-selected-color: #1f2633; +$tree-node-selected-background: #e6fdff; +$tree-node-disabled-color: #c4c7cc; +$tree-node-disabled-background: #FFFFFF; +$tree-fold-icon-content: ""; +$tree-unfold-icon-content: $icon-reset; + +// ------------------------ switch ------------------------ // + +$switch-size-m-width: 48px; +$switch-size-m-trigger: 24px; +$switch-border-width-container: 2px; +$switch-border-width-trigger: 1px; +$switch-on-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +$switch-normal-off-bg-color: #f0f2f5; +$switch-hover-off-bg-color: #f0f2f5; +$switch-disabled-off-bg-color: #f0f2f5; +$switch-disabled-off-trigger-bg-color: #f5f7fa; +$switch-handle-disabled-border-color: transparent; +$switch-normal-off-border-color: #f0f2f5; +$switch-hover-off-border-color: #f0f2f5; +$switch-size-m-trigger-padding-l: 6px; +$switch-size-m-trigger-padding-r: 6px; +$switch-size-m-radius-container: 20px; +$switch-size-m-radius-trigger: 20px; +$switch-size-m-inner-icon: 16px; +$switch-size-s-width: 44px; +$switch-size-s-radius-container: 20px; +$switch-size-s-trigger: 20px; +$switch-size-s-radius-trigger: 20px; +$switch-size-s-inner-icon: 12px; +$switch-size-s-trigger-padding-l: 8px; +$switch-size-s-trigger-padding-r: 8px; +$switch-normal-on-bg-color: $primary-color; +$switch-hover-on-bg-color: #009dd6; +$switch-disabled-on-bg-color: #f0f2f5; +$switch-normal-on-trigger-bg-color: #FFFFFF; +$switch-hover-on-trigger-bg-color: #FFFFFF; +$switch-disabled-on-trigger-bg-color: #f5f7fa; +$switch-normal-on-color-font: #FFFFFF; +$switch-disabled-on-color-font: #c4c7cc; +$switch-disabled-on-border-color: #d9dbde; +$switch-handle-on-border-color: transparent; +$switch-normal-off-trigger-bg-color: #FFFFFF; +$switch-hover-off-trigger-bg-color: #FFFFFF; +$switch-normal-off-color-font: #8d9299; +$switch-disabled-off-color-font: #d9dbde; +$switch-handle-off-border-color: transparent; +$switch-off-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.16); +$switch-rtl-on-shadow: -1px 0px 4px 0px rgba(0, 0, 0, 0.16); + +// ------------------------ tag ------------------------ // + +$tag-size-l-icon-font: 20px; +$tag-size-m-icon-font: 16px; +$tag-size-s-icon-font: 12px; +$tag-checkable-primary-text-color-disabled: #c4c7cc; +$tag-checkable-primary-border-color-disabled: #f0f2f5; +$tag-checkable-primary-bg-color-disabled: #f0f2f5; +$tag-size-l-height: 40px; +$tag-size-m-height: 28px; +$tag-size-s-height: 20px; +$tag-size-l-spacing: 16px; +$tag-size-m-spacing: 12px; +$tag-size-s-spacing: 8px; +$tag-size-l-padding-lr: 16px; +$tag-size-m-padding-lr: 12px; +$tag-size-s-padding-lr: 8px; +$tag-corner-radius: 4px; +$tag-checkable-corner-radius: 4px; +$tag-border-width: 1px; +$tag-shadow: none; +$tag-size-l-text-size: 16px; +$tag-size-m-text-size: 14px; +$tag-size-s-text-size: 12px; +$tag-size-s-content-min-width: 28px; +$tag-size-m-content-min-width: 40px; +$tag-size-l-content-min-width: 48px; +$tag-size-l-tick-icon-size: 16px; +$tag-size-m-tick-icon-size: 12px; +$tag-size-s-tick-icon-size: 8px; +$tag-size-l-tick-icon-bg-size: 36px; +$tag-size-m-tick-icon-bg-size: 28px; +$tag-size-s-tick-icon-bg-size: 20px; +$tag-normal-text-color: #1f2633; +$tag-fill-text-color: #585d66; +$tag-closable-normal-icon-color: #FFFFFF; +$tag-closable-normal-icon-color-hover: #FFFFFF; +$tag-closable-normal-icon-color-disabled: #FFFFFF; +$tag-closable-normal-bg: #d9dbde; +$tag-closable-normal-bg-hover: #c4c7cc; +$tag-closable-normal-bg-disabled: #e4e8ee; +$tag-closable-bordered-text-color: #585d66; +$tag-closable-bordered-border-color: #d9dbde; +$tag-closable-bordered-bg: transparent; +$tag-closable-bordered-text-color-hover: #1f2633; +$tag-closable-bordered-border-color-hover: #c4c7cc; +$tag-closable-bordered-bg-hover: transparent; +$tag-closable-bordered-tail-color: #585d66; +$tag-closable-bordered-tail-color-hover: #1f2633; +$tag-closable-bordered-tail-color-disabled: #c4c7cc; +$tag-closable-bordered-border-color-disabled: #e4e8ee; +$tag-closable-bordered-text-color-disabled: #c4c7cc; +$tag-closable-bordered-bg-disabled: transparent; +$tag-fill-tail-color: #585d66; +$tag-fill-border-color: #f0f2f5; +$tag-fill-border-color-hover: #edeff2; +$tag-fill-text-color-disabled: #c4c7cc; +$tag-fill-border-color-disabled: #f5f7fa; +$tag-fill-bg-color-disabled: #f5f7fa; +$tag-fill-tail-color-disabled: #c4c7cc; +$tag-bordered-text-color: #585d66; +$tag-bordered-tail-color: #585d66; +$tag-secondary-text-color: $primary-color; +$tag-normal-text-color-hover: $primary-color; +$tag-fill-text-color-hover: #1f2633; +$tag-fill-tail-color-hover: #1f2633; +$tag-bordered-text-color-hover: #1f2633; +$tag-bordered-tail-color-hover: #1f2633; +$tag-bordered-tail-color-disabled: #c4c7cc; +$tag-bordered-text-color-disabled: #c4c7cc; +$tag-bordered-border-color-disabled: #e4e8ee; +$tag-bordered-bg-disabled: #f5f7fa; +$tag-secondary-text-color-hover: #009dd6; +$tag-bordered-border-color: #d9dbde; +$tag-secondary-border-color: $primary-color; +$tag-checkable-normal-bg-selected: $primary-color; +$tag-checkable-secondary-bg-selected: $primary-color; +$tag-bordered-border-color-hover: #c4c7cc; +$tag-secondary-border-color-hover: #009dd6; +$tag-checkable-normal-bg-selected-hover: #009dd6; +$tag-checkable-secondary-bg-selected-hover: #009dd6; +$tag-fill-bg-color: #f0f2f5; +$tag-primary-background-color: $primary-color; +$tag-bordered-bg: transparent; +$tag-secondary-bg: transparent; +$tag-fill-bg-color-hover: #edeff2; +$tag-bordered-bg-hover: transparent; +$tag-secondary-bg-hover: transparent; +$tag-text-color-disabled: #c4c7cc; +$tag-border-color-disabled: #e4e8ee; +$tag-checkable-fill-text-color: #585d66; +$tag-checkable-fill-bg-color: #f0f2f5; +$tag-checkable-fill-border-color: #f0f2f5; +$tag-checkable-fill-text-color-hover: #1f2633; +$tag-checkable-fill-bg-color-hover: #edeff2; +$tag-checkable-fill-border-color-hover: #edeff2; +$tag-checkable-fill-tail-color: #585d66; +$tag-checkable-fill-tail-color-hover: #1f2633; +$tag-checkable-fill-tail-color-disabled: #c4c7cc; +$tag-checkable-fill-text-color-disabled: #c4c7cc; +$tag-checkable-fill-border-color-disabled: #f5f7fa; +$tag-checkable-fill-bg-color-disabled: #f5f7fa; +$tag-checkable-normal-text-color: #585d66; +$tag-checkable-normal-border-color: #d9dbde; +$tag-checkable-normal-bg: transparent; +$tag-checkable-normal-text-color-hover: #1f2633; +$tag-checkable-normal-border-color-hover: #d9dbde; +$tag-checkable-normal-bg-hover: transparent; +$tag-checkable-normal-text-selected-disabled: #c4c7cc; +$tag-checkable-normal-border-selected-disabled: #e4e8ee; +$tag-checkable-normal-bg-selected-disabled: #f5f7fa; +$tag-checkable-normal-tick-bg-selected-disabled: #e4e8ee; +$tag-checkable-primary-text-color: #FFFFFF; +$tag-checkable-primary-bg-color: $primary-color; +$tag-checkable-primary-border-color: $primary-color; +$tag-checkable-primary-text-color-hover: #FFFFFF; +$tag-checkable-primary-bg-color-hover: #009dd6; +$tag-checkable-primary-border-color-hover: #009dd6; +$tag-checkable-primary-tail-color: #FFFFFF; +$tag-checkable-primary-tail-color-hover: #FFFFFF; +$tag-checkable-secondary-bg-selected-disabled: #e4e8ee; +$tag-checkable-normal-icon-color-selected: #FFFFFF; +$tag-checkable-normal-icon-color-selected-hover: #FFFFFF; +$tag-checkable-normal-icon-color-selected-disabled: #FFFFFF; +$tag-checkable-secondary-icon-color-selected: #FFFFFF; +$tag-checkable-secondary-icon-color-selected-hover: #FFFFFF; +$tag-checkable-secondary-icon-color-selected-disabled: #FFFFFF; +$tag-closable-primary-fill-text-color: #585d66; +$tag-closable-primary-fill-border-color: #f0f2f5; +$tag-closable-primary-fill-bg-color: #f0f2f5; +$tag-closable-primary-fill-text-color-hover: #1f2633; +$tag-closable-primary-fill-border-color-hover: #edeff2; +$tag-closable-primary-fill-bg-color-hover: #edeff2; +$tag-closable-primary-fill-text-color-disabled: #c4c7cc; +$tag-closable-primary-fill-border-color-disabled: #f5f7fa; +$tag-closable-primary-fill-bg-color-disabled: #f5f7fa; + +// ------------------------ input ------------------------ // + +$input-border-color: #dcdfe6; +$input-focus-shadow-spread: 2px; +$input-placeholder-color: #c4c7cc; +$input-multiple-padding-tb: 8px; +$input-m-padding: 8px; +$input-s-padding: 8px; +$input-text-color: #1f2633; +$input-label-color: #585d66; +$input-hover-border-color: #c4c7cc; +$input-hover-bg-color: #FFFFFF; +$input-focus-border-color: $primary-color; +$input-focus-bg-color: #FFFFFF; +$input-border-width: 1px; +$input-bg-color: #FFFFFF; +$input-disabled-color: #c4c7cc; +$input-disabled-border-color: #e4e8ee; +$input-disabled-bg-color: #f5f7fa; +$input-multiple-padding-lr: 8px; +$input-multiple-font-size: 14px; +$input-multiple-corner: 4px; +$input-addon-bg-color: #f4f6f9; +$input-addon-text-color: #8d9299; +$input-addon-padding: 8px; +$input-l-padding: 12px; +$input-l-label-padding-left: 12px; +$input-l-icon-padding-right: 8px; +$input-m-label-padding-left: 8px; +$input-m-icon-padding-right: 8px; +$input-s-label-padding-left: 8px; +$input-s-icon-padding-right: 4px; +$input-feedback-warning-border-color: #f5cb22; +$input-feedback-warning-bg-color: #FFFFFF; +$input-feedback-warning-color: #f5cb22; +$input-feedback-warning-icon: ""; +$input-feedback-success-color: #08c29e; +$input-feedback-success-icon: ""; +$input-feedback-loading-color: $primary-color; +$input-feedback-loading-icon: ""; +$input-feedback-error-color: #1f2633; +$input-feedback-error-border-color: #f52743; +$input-feedback-error-bg-color: #FFFFFF; +$input-maxlen-error-color: #f52743; +$input-maxlen-warning-color: #f5cb22; +$input-maxlen-color: #8d9299; +$input-maxlen-font-size: 12px; +$input-hint-color: #8d9299; +$input-hint-hover-color: #585d66; +$input-feedback-clear-icon: ""; + +// ------------------------ upload ------------------------ // + +$upload-text-list-close-icon-size: 16px; +$upload-image-list-close-icon-size: 16px; +$upload-disable-text-color: #c4c7cc; +$upload-disable-border-color: #e4e8ee; +$upload-text-list-height: 40px; +$upload-text-list-padding-left-right: 8px; +$upload-text-list-font-size: 14px; +$upload-text-list-close-icon-right: 12px; +$upload-text-list-corner: 0; +$upload-text-list-bg-color: #f4f6f9; +$upload-text-list-bg-color-hover: #f4f6f9; +$upload-text-list-bg-color-error: #fff0f0; +$upload-text-list-error-text-color: #f52743; +$upload-text-list-close-icon-color: #8d9299; +$upload-text-list-close-icon-color-hover: #585d66; +$upload-text-list-name-font-color: #1f2633; +$upload-text-list-name-font-color-hover: $primary-color; +$upload-text-list-size-font-color: #8d9299; +$upload-text-list-size-font-color-hover: $primary-color; +$upload-text-list-progressbar-height: 8px; +$upload-image-list-item-padding: 8px; +$upload-image-list-item-picture-size: 48px; +$upload-image-list-item-picture-icon-size: 24px; +$upload-image-list-item-picture-border-width: 1px; +$upload-image-list-item-picture-corner: 0; +$upload-image-list-item-thumbnail-font-color: #c4c7cc; +$upload-image-list-item-font-size: 14px; +$upload-image-list-close-icon-right: 4px; +$upload-image-list-item-border-width: 1px; +$upload-image-list-item-bg-color: #FFFFFF; +$upload-image-list-item-uploading-bg-color: #FFFFFF; +$upload-image-list-item-error-bg-color: #FFFFFF; +$upload-image-list-close-icon-color: #8d9299; +$upload-image-list-close-icon-color-hover: #585d66; +$upload-image-list-item-border-color: #dcdfe6; +$upload-image-list-item-border-color-error: #f52743; +$upload-image-list-item-border-color-hover: $primary-color; +$upload-image-list-item-picture-border-color: #dcdfe6; +$upload-image-list-item-picture-background-color: #f4f6f9; +$upload-image-list-progressbar-height: 8px; +$upload-card-size: 100px; +$upload-card-margin-bottom: 16px; +$upload-card-add-icon-size: 24px; +$upload-card-add-text-size: 14px; +$upload-card-add-text-margin-top: 12px; +$upload-card-bg-color: #FFFFFF; +$upload-card-border-style: dashed; +$upload-card-border-color: #d9dbde; +$upload-card-hover-border-color: $primary-color; +$upload-card-font-color: #585d66; +$upload-card-icon-color: #d9dbde; +$upload-card-hover-font-color: $primary-color; +$upload-card-add-icon: ""; +$upload-card-list-bg-color: transparent; +$upload-card-list-uploading-bg-color: #f5f7fa; +$upload-card-list-bg-color-error: #f5f7fa; +$upload-card-list-margin-right: 12px; +$upload-card-list-padding: 0px; +$upload-card-list-corner: 0; +$upload-card-list-border-color: #d9dbde; +$upload-card-list-border-color-error: #f52743; +$upload-card-list-thumbnail-font-color: #c4c7cc; +$upload-card-list-thumbnail-font-size: 12px; +$upload-card-list-thumbnail-icon-size: 48px; +$upload-card-list-name-margin-top: 4px; +$upload-card-list-name-font-size: 12px; +$upload-card-list-name-font-color: #585d66; +$upload-card-list-progressbar-height: 8px; +$upload-select-card-tool-bg-color: #000000; +$upload-select-card-tool-bg-opacity: .7; +$upload-drag-zone-border-color: #d9dbde; +$upload-drag-zone-over-border-color: $primary-color; +$upload-drag-zone-corner: 4px; +$upload-drag-zone-font-size: 14px; +$upload-drag-zone-icon-size: 24px; +$upload-drag-zone-hint-font-size: 12px; +$upload-drag-zone-bg-color: transparent; +$upload-drag-zone-upload-icon: ""; +$upload-drag-zone-upload-icon-color: #585d66; +$upload-drag-zone-upload-normal-title-color: #585d66; +$upload-drag-zone-upload-normal-hint-color: #8d9299; + +// ------------------------ balloon ------------------------ // + +$balloon-size-close: 16px; +$balloon-primary-color-bg: $primary-color; +$balloon-primary-color-border: transparent; +$balloon-primary-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +$balloon-primary-color: #FFFFFF; +$balloon-primary-color-close: #FFFFFF; +$balloon-tooltip-color-bg: #1f2633; +$balloon-tooltip-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +$balloon-tooltip-color-border: transparent; +$balloon-tooltip-color: #FFFFFF; +$balloon-size-max-width: 300px; +$balloon-size-padding-right: 16px; +$balloon-size-padding-closable-right: 40px; +$balloon-size-padding-top: 16px; +$balloon-size-header-margin-bottom: 8px; +$balloon-title-font-size: 16px; +$balloon-title-font-weight: bold; +$balloon-content-font-size: 14px; +$balloon-content-font-weight: normal; +$balloon-normal-border-width: 1px; +$balloon-primary-border-width: 1px; +$balloon-tooltip-border-width: 1px; +$balloon-tooltip-content-font-size: 14px; +$balloon-tooltip-content-font-weight: normal; +$balloon-size-close-margin-top: 12px; +$balloon-size-close-margin-right: 12px; +$balloon-size-arrow-size: 12px; +$balloon-size-arrow-margin: 12px; +$balloon-tooltip-size-padding-top: 8px; +$balloon-tooltip-size-padding-right: 8px; +$balloon-tooltip-size-padding-bottom: 8px; +$balloon-tooltip-size-padding-left: 8px; +$balloon-border-style: solid; +$balloon-corner: 4px; +$balloon-normal-color-bg: #FFFFFF; +$balloon-normal-color-border: #dcdfe6; +$balloon-normal-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +$balloon-normal-color: #1f2633; +$balloon-normal-color-close: #8d9299; +$balloon-normal-color-close-hover: #585d66; +$balloon-primary-color-close-hover: #1f2633; +$balloon-tooltip-border-style: solid; + +// ------------------------ drawer ------------------------ // + +$drawer-close-size: 16px; +$drawer-title-font-size: 16px; +$drawer-title-padding-top: 12px; +$drawer-title-padding-bottom: 12px; +$drawer-title-padding-left-right: 20px; +$drawer-title-border-width: 1px; +$drawer-content-font-size: 14px; +$drawer-content-padding-top: 20px; +$drawer-content-padding-bottom: 20px; +$drawer-content-padding-left-right: 20px; +$drawer-close-top: 12px; +$drawer-close-right: 12px; +$drawer-bg: #FFFFFF; +$drawer-border-width: 1px; +$drawer-border-color: #dcdfe6; +$drawer-border-style: solid; +$drawer-corner: 4px; +$drawer-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +$drawer-title-color: #1f2633; +$drawer-title-bg-color: #FFFFFF; +$drawer-title-border-color: #dcdfe6; +$drawer-content-color: #585d66; +$drawer-close-color: #8d9299; +$drawer-close-color-hovered: #1f2633; +$drawer-close-bg-hovered: transparent; + +// ------------------------ message ------------------------ // + +$message-close-icon-size: 16px; +$message-size-l-padding: 16px; +$message-size-l-border-width: 2px; +$message-size-l-title-content-padding-left: 12px; +$message-size-l-title-content-padding-right: 20px; +$message-size-l-title-font: 20px; +$message-size-l-content-margin-top: 8px; +$message-size-l-content-font: 14px; +$message-size-l-close-top: 16px; +$message-size-l-close-right: 16px; +$message-size-l-icon: 24px; +$message-size-m-padding: 12px; +$message-size-m-border-width: 1px; +$message-size-m-title-content-padding-left: 8px; +$message-size-m-title-content-padding-right: 20px; +$message-size-m-title-font: 16px; +$message-size-m-content-margin-top: 8px; +$message-size-m-content-font: 14px; +$message-size-m-close-top: 12px; +$message-size-m-close-right: 12px; +$message-size-m-icon: 16px; +$message-size-l-border-radius: 4px; +$message-size-m-border-radius: 4px; +$message-size-l-border-radius-toast: 4px; +$message-size-m-border-radius-toast: 4px; +$message-border-style: solid; +$message-border-style-toast: solid; +$message-shadow-toast: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); +$message-success-color-bg-inline: #e6fff6; +$message-success-color-bg-addon: transparent; +$message-success-color-bg-toast: #FFFFFF; +$message-success-color-border-inline: #e6fff6; +$message-success-color-border-toast: #FFFFFF; +$message-success-color-title-inline: #1f2633; +$message-success-color-title-addon: #1f2633; +$message-success-color-title-toast: #1f2633; +$message-success-color-content-inline: #585d66; +$message-success-color-content-addon: #585d66; +$message-success-color-content-toast: #585d66; +$message-success-color-icon-inline: #08c29e; +$message-success-color-icon-addon: #08c29e; +$message-success-color-icon-toast: #08c29e; +$message-error-color-bg-inline: #fff0f0; +$message-error-color-bg-addon: transparent; +$message-error-color-bg-toast: #FFFFFF; +$message-error-color-border-inline: #fff0f0; +$message-error-color-border-toast: #FFFFFF; +$message-error-color-title-inline: #1f2633; +$message-error-color-title-addon: #1f2633; +$message-error-color-title-toast: #1f2633; +$message-error-color-content-inline: #585d66; +$message-error-color-content-addon: #585d66; +$message-error-color-content-toast: #585d66; +$message-error-color-icon-inline: #f52743; +$message-error-color-icon-addon: #f52743; +$message-error-color-icon-toast: #f52743; +$message-warning-color-bg-inline: #fffef0; +$message-warning-color-bg-addon: transparent; +$message-warning-color-bg-toast: #FFFFFF; +$message-warning-color-border-inline: #fffef0; +$message-warning-color-border-toast: #FFFFFF; +$message-warning-color-title-inline: #1f2633; +$message-warning-color-title-addon: #1f2633; +$message-warning-color-title-toast: #1f2633; +$message-warning-color-content-inline: #585d66; +$message-warning-color-content-addon: #585d66; +$message-warning-color-content-toast: #585d66; +$message-warning-color-icon-inline: #f5cb22; +$message-warning-color-icon-addon: #f5cb22; +$message-warning-color-icon-toast: #f5cb22; +$message-notice-color-bg-inline: #e6fdff; +$message-notice-color-bg-addon: transparent; +$message-notice-color-bg-toast: #FFFFFF; +$message-notice-color-border-inline: #e6fdff; +$message-notice-color-border-toast: #FFFFFF; +$message-notice-color-title-inline: #1f2633; +$message-notice-color-title-addon: #1f2633; +$message-notice-color-title-toast: #1f2633; +$message-notice-color-content-inline: #585d66; +$message-notice-color-content-addon: #585d66; +$message-notice-color-content-toast: #585d66; +$message-notice-color-icon-inline: $primary-color; +$message-notice-color-icon-addon: $primary-color; +$message-notice-color-icon-toast: $primary-color; +$message-help-color-bg-inline: #e6f9ff; +$message-help-color-bg-addon: transparent; +$message-help-color-bg-toast: #FFFFFF; +$message-help-color-border-inline: #e6f9ff; +$message-help-color-border-toast: #FFFFFF; +$message-help-color-title-inline: #1f2633; +$message-help-color-title-addon: #1f2633; +$message-help-color-title-toast: #1f2633; +$message-help-color-content-inline: #585d66; +$message-help-color-content-addon: #585d66; +$message-help-color-content-toast: #585d66; +$message-help-color-icon-inline: #0394f5; +$message-help-color-icon-addon: #0394f5; +$message-help-color-icon-toast: #0394f5; +$message-loading-color-bg-inline: #FFFFFF; +$message-loading-color-bg-addon: transparent; +$message-loading-color-bg-toast: #FFFFFF; +$message-loading-color-border-inline: #FFFFFF; +$message-loading-color-border-toast: #FFFFFF; +$message-loading-color-title-inline: #1f2633; +$message-loading-color-title-addon: #1f2633; +$message-loading-color-title-toast: #1f2633; +$message-loading-color-content-inline: #585d66; +$message-loading-color-content-addon: #585d66; +$message-loading-color-content-toast: #585d66; +$message-loading-color-icon-inline: $primary-color; +$message-loading-color-icon-addon: $primary-color; +$message-loading-color-icon-toast: $primary-color; +$message-close-icon-color: #8d9299; +$message-hover-close-icon-color: #585d66; +$message-success-icon-content: ""; +$message-warning-icon-content: ""; +$message-error-icon-content: ""; +$message-notice-icon-content: ""; +$message-help-icon-content: ""; +$message-loading-icon-content: ""; + +// ------------------------ collapse ------------------------ // + +$collapse-icon-size: 16px; +$collapse-border-width: 1px; +$collapse-border-corner: 4px; +$collapse-border-color: #dcdfe6; +$collapse-panel-border-color: #dcdfe6; +$collapse-disabled-border-color: #e4e8ee; +$collapse-title-border-width: 1px; +$collapse-title-height: 20px; +$collapse-title-bg-color: #f4f6f9; +$collapse-title-hover-bg-color: #f0f2f5; +$collapse-title-disabled-bg-color: #f4f6f9; +$collapse-title-font-color: #1f2633; +$collapse-title-font-disabled-color: #c4c7cc; +$collapse-title-hover-font-color: #1f2633; +$collapse-title-font-size: 14px; +$collapse-title-font-weight: normal; +$collapse-title-hover-font-weight: normal; +$collapse-title-padding-tb: 8px; +$collapse-icon-color: #1f2633; +$collapse-icon-hover-color: #1f2633; +$collapse-icon-margin-r: 8px; +$collapse-icon-margin-l: 12px; +$collapse-content-bg-color: #FFFFFF; +$collapse-content-padding-x: 16px; +$collapse-content-padding-y: 12px; +$collapse-content-font-size: 14px; +$collapse-content-color: #585d66; +$collapse-fold-icon-content: ""; +$collapse-unfold-icon-content: $icon-reset; + +// ------------------------ transfer ------------------------ // + +$transfer-operation-margin-left-right: 16px; +$transfer-operation-margin-gutter: 8px; +$transfer-operation-icon-size: 16px; +$transfer-panel-header-padding-left-right: 12px; +$transfer-panel-footer-padding-left-right: 12px; +$transfer-panel-border-width: 1px; +$transfer-panel-header-padding-top-bottom: 8px; +$transfer-panel-header-text-size: 14px; +$transfer-panel-search-margin-top: 8px; +$transfer-panel-search-margin-left-right: 4px; +$transfer-panel-search-margin-bottom: 0px; +$transfer-panel-list-width: 180px; +$transfer-panel-list-height: 160px; +$transfer-panel-footer-padding-top-bottom: 8px; +$transfer-simple-move-icon: ""; +$transfer-simple-move-icon-color: #d9dbde; +$transfer-panel-border-color: #dcdfe6; +$transfer-panel-border-corner: 4px; +$transfer-panel-background-color: #FFFFFF; +$transfer-panel-header-text-color: #1f2633; +$transfer-panel-header-background-color: #f5f7fa; +$transfer-panel-search-icon-color: #8d9299; +$transfer-panel-footer-text-color: #1f2633; +$transfer-panel-footer-background-color: #FFFFFF; +$transfer-simple-panel-footer-text-color: $primary-color; +$transfer-simple-panel-item-hover-text-color: $primary-color; +$transfer-panel-footer-shadow: none; + +// ------------------------ radio ------------------------ // + +$radio-font-margin-left: 8px; +$radio-button-height-medium: 32px; +$radio-width: 16px; +$radio-circle-border-width: 1px; +$radio-circle-size: 4px; +$radio-font-size: 14px; +$radio-shadow: none; +$radio-radius-size: 50%; +$radio-bg-color: #FFFFFF; +$radio-hovered-bg-color: #e6fdff; +$radio-checked-bg-color: $primary-color; +$radio-disabled-bg-color: #f5f7fa; +$radio-checked-hovered-bg-color: #009dd6; +$radio-checked-disabled-bg-color: #f5f7fa; +$radio-border-color: #d9dbde; +$radio-hovered-border-color: $primary-color; +$radio-checked-border-color: $primary-color; +$radio-disabled-border-color: #e4e8ee; +$radio-checked-disabled-border-color: #e4e8ee; +$radio-checked-hovered-border-color: transparent; +$radio-checked-circle-color: #FFFFFF; +$radio-disabled-circle-color: #c4c7cc; +$radio-checked-hovered-circle-color: #FFFFFF; +$radio-checked-disabled-circle-color: #c4c7cc; +$radio-normal-font-color: #1f2633; +$radio-normal-font-color-disabled: #c4c7cc; +$radio-button-height-large: 40px; +$radio-button-height-small: 20px; +$radio-button-padding-large: 8px; +$radio-button-padding-medium: 8px; +$radio-button-padding-small: 8px; +$radio-button-corner-large: 4px; +$radio-button-corner-medium: 4px; +$radio-button-corner-small: 4px; +$radio-button-font-size-large: 16px; +$radio-button-font-size-medium: 14px; +$radio-button-font-size-small: 12px; +$radio-button-bg-color: #FFFFFF; +$radio-button-bg-color-hovered: #f4f6f9; +$radio-button-bg-color-checked: #FFFFFF; +$radio-button-bg-color-disabled: #f5f7fa; +$radio-button-bg-color-checked-disabled: #f4f6f9; +$radio-button-border-color: #d9dbde; +$radio-button-border-color-hovered: #c4c7cc; +$radio-button-border-color-checked: $primary-color; +$radio-button-border-color-disabled: #e4e8ee; +$radio-button-border-color-checked-disabled: #e4e8ee; +$radio-button-font-color: #1f2633; +$radio-button-font-color-hovered: #1f2633; +$radio-button-font-color-checked: $primary-color; +$radio-button-font-color-disabled: #c4c7cc; +$radio-button-font-color-checked-disabled: #c4c7cc; + +// ------------------------ menu ------------------------ // + +$menu-icon-size: 16px; +$menu-hoz-icon-size: 16px; +$menu-arrow-color: #8d9299; +$menu-padding-ver-padding-lr: 0px; +$menu-padding-ver-padding-tb: 8px; +$menu-padding-hoz-padding-lr: 0px; +$menu-padding-hoz-padding-tb: 8px; +$menu-item-padding-ver-padding-l: 20px; +$menu-item-padding-ver-padding-r: 20px; +$menu-item-padding-hoz-padding-lr: 20px; +$menu-line-height: 32px; +$menu-font-size: 14px; +$menu-submenu-title-size: 14px; +$menu-padding-title-horizontal: 12px; +$menu-divider-width: 1px; +$menu-divider-margin-ver: 8px; +$menu-divider-margin-hoz: 12px; +$menu-icon-selected-size: 12px; +$menu-icon-selected-right: 4px; +$menu-icon-margin: 4px; +$menu-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +$menu-color: #1f2633; +$menu-divider-style: solid; +$menu-divider-color: #e4e8ee; +$menu-background: #FFFFFF; +$menu-background-selected: #FFFFFF; +$menu-color-selected: #1f2633; +$menu-icon-selected-color: $primary-color; +$menu-background-hover: #f4f6f9; +$menu-color-hover: #1f2633; +$menu-arrow-color-hover: #1f2633; +$menu-icon-selected-hover-color: $primary-color; +$menu-color-disabled: #c4c7cc; +$menu-select-icon-content: ""; +$menu-fold-icon-content: ""; +$menu-unfold-icon-content: $icon-reset; +$menu-popupfold-icon-content: ""; + +// ------------------------ breadcrumb ------------------------ // + +$breadcrumb-size-m-icon-size: 16px; +$breadcrumb-size-m-font-size: 12px; +$breadcrumb-size-ellipsis-font-size: 12px; +$breadcrumb-size-m-icon-margin: 8px; +$breadcrumb-text-color: #585d66; +$breadcrumb-text-current-color: #1f2633; +$breadcrumb-text-current-weight: normal; +$breadcrumb-text-ellipsis-color: #585d66; +$breadcrumb-text-keyword-color: $primary-color; +$breadcrumb-icon-color: #c4c7cc; +$breadcrumb-icon-sep-content: ""; +$breadcrumb-text-color-hover: $primary-color; +$breadcrumb-text-current-color-hover: $primary-color; +$breadcrumb-text-keyword-color-hover: $primary-color; + +// ------------------------ pagination ------------------------ // + +$pagination-ellipsis-margin: 16px; +$pagination-input-margin: 16px; +$pagination-size-selector-title-margin-right: 4px; +$pagination-large-item-split: 12px; +$pagination-large-item-padding: 15px; +$pagination-item-split: 4px; +$pagination-item-padding: 10px; +$pagination-item-border-style: solid; +$pagination-item-border-width: 1px; +$pagination-item-corner: 4px; +$pagination-ellipsis-size: 12px; +$pagination-current-font-size: 14px; +$pagination-total-font-size: 14px; +$pagination-jump-font-size: 14px; +$pagination-input-width: 36px; +$pagination-size-selector-number-padding: 12px; +$pagination-large-item-border-width: 1px; +$pagination-large-item-corner: 4px; +$pagination-large-ellipsis-size: 16px; +$pagination-large-current-font-size: 16px; +$pagination-large-total-font-size: 16px; +$pagination-large-input-width: 48px; +$pagination-large-jump-font-size: 16px; +$pagination-large-size-selector-number-padding: 16px; +$pagination-small-item-split: 4px; +$pagination-small-item-padding: 6px; +$pagination-small-item-border-width: 1px; +$pagination-small-item-corner: 4px; +$pagination-small-ellipsis-size: 12px; +$pagination-small-current-font-size: 12px; +$pagination-small-total-font-size: 12px; +$pagination-small-input-width: 28px; +$pagination-small-jump-font-size: 12px; +$pagination-small-size-selector-number-padding: 8px; +$pagination-ellipsis-color: #8d9299; +$pagination-current-color: $primary-color; +$pagination-total-color: #1f2633; +$pagination-jump-color: #8d9299; +$pagination-size-selector-title-color: #8d9299; +$pagination-size-selector-filter-color: #585d66; +$pagination-size-selector-filter-current-color: $primary-color; +$pagination-item-border-color: #d9dbde; +$pagination-item-shadow: none; +$pagination-item-color: #1f2633; +$pagination-item-bg: #FFFFFF; +$pagination-item-current-border-color: $primary-color; +$pagination-item-current-shadow: none; +$pagination-item-current-color: #FFFFFF; +$pagination-item-current-bg: $primary-color; +$pagination-item-hover-border-color: #c4c7cc; +$pagination-item-hover-shadow: none; +$pagination-item-hover-color: #1f2633; +$pagination-item-hover-bg: #f4f6f9; +$pagination-arrow-color: #585d66; +$pagination-icon-prev-content: ""; +$pagination-icon-next-content: ""; +$pagination-icon-ellipsis-content: ""; +$pagination-item-current-hover-border-color: transparent; +$pagination-item-current-hover-shadow: none; +$pagination-item-current-hover-color: #FFFFFF; +$pagination-item-current-hover-bg: #009dd6; +$pagination-arrow-hover-color: #1f2633; +$pagination-arrow-hover-color-noboder: $primary-color; + +// ------------------------ cascader-select ------------------------ // + +$cascader-select: "cascader-select"; + +// ------------------------ timeline ------------------------ // + +$timeline-item-node-size: 16px; +$timeline-item-custom-node-size: 40px; +$timeline-item-custom-node-font-size: 12px; +$timeline-item-node-padding: 4px; +$timeline-item-dot-size: 8px; +$timeline-item-icon-size: 12px; +$timeline-item-tail-size: 1px; +$timeline-item-left-content-width: 80px; +$timeline-item-content-margin-left: 12px; +$timeline-item-body-margin-top: 8px; +$timeline-item-title-font-size: 14px; +$timeline-item-title-font-weight: bold; +$timeline-item-title-margin-top: 4px; +$timeline-item-time-margin-top: 4px; +$timeline-item-time-margin-bottom: 12px; +$timeline-item-body-font-size: 12px; +$timeline-item-left-body-font-size: 12px; +$timeline-item-time-font-size: 12px; +$timeline-item-folder-font-size: 12px; +$timeline-item-folder-margin-top: 4px; +$timeline-item-folder-margin-bottom: 4px; +$timeline-item-title-color: #1f2633; +$timeline-item-body-color: #585d66; +$timeline-item-left-body-color: #8d9299; +$timeline-item-time-color: #8d9299; +$timeline-item-tail-color: #dcdfe6; +$timeline-item-done-dot-size: 8px; +$timeline-item-done-background: #d9dbde; +$timeline-item-done-color: #FFFFFF; +$timeline-item-process-dot-size: 8px; +$timeline-item-process-background: $primary-color; +$timeline-item-process-color: #FFFFFF; +$timeline-item-success-dot-size: 8px; +$timeline-item-success-background: #08c29e; +$timeline-item-success-color: #FFFFFF; +$timeline-item-error-dot-size: 8px; +$timeline-item-error-background: #f52743; +$timeline-item-error-color: #FFFFFF; + +// ------------------------ range ------------------------ // + +$range-size-m-track-height: 4px; +$range-size-m-scale-height: 12px; +$range-size-m-scale-item-border-width: 1px; +$range-size-m-slider-hw: 16px; +$range-size-slider-border-style: solid; +$range-size-slider-border-width: 1px; +$range-size-m-mark-top: 30px; +$range-size-m-mark-font-size: 14px; +$range-size-m-mark-font-weight: normal; +$range-size-m-mark-font-lineheight: 20px; +$range-size-m-track-radius: 0; +$range-size-m-scale-radius: 0; +$range-size-m-slider-shadow-moving: 2px 4px 16px 0px rgba(0, 0, 0, 0.12); +$range-normal-unselected-color: #d9dbde; +$range-normal-selected-color: $primary-color; +$range-normal-slider-bg-color: #FFFFFF; +$range-normal-mark-color: #8d9299; +$range-normal-mark-selected-color: #1f2633; +$range-normal-unselected-color-hover: #d9dbde; +$range-normal-selected-color-hover: $primary-color; +$range-normal-slider-bg-color-hover: #FFFFFF; +$range-size-m-slider-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.16); +$range-size-m-slider-shadow-hover: 20px 20px 30px 0px rgba(0, 0, 0, 0.15); +$range-normal-mark-color-hover: #8d9299; +$range-normal-mark-selected-color-hover: #1f2633; +$range-normal-slider-border-color-hover: transparent; +$range-normal-unselected-color-disabled: #d9dbde; +$range-normal-selected-color-disabled: #c4c7cc; +$range-normal-slider-bg-color-disabled: #e4e8ee; +$range-normal-slider-border-color: #d9dbde; +$range-normal-slider-border-color-disabled: #e4e8ee; +$range-normal-mark-color-disabled: #c4c7cc; +$range-normal-mark-selected-color-disabled: #8d9299; + +// ------------------------ rating ------------------------ // + +$rating-small-text-margin-left: 8px; +$rating-small-icon-size: 12px; +$rating-small-font-size: 12px; +$rating-medium-text-margin-left: 12px; +$rating-medium-icon-size: 16px; +$rating-medium-font-size: 14px; +$rating-large-text-margin-left: 16px; +$rating-large-icon-size: 20px; +$rating-large-font-size: 16px; +$rating-normal-underlay-color: #edeff2; +$rating-normal-overlay-color: $primary-color; +$rating-normal-overlay-hover-color: $primary-color; +$rating-grade-low-overlay-color: #585d66; +$rating-grade-low-overlay-hover-color: #8d9299; +$rating-grade-high-overlay-color: $primary-color; +$rating-grade-high-overlay-hover-color: $primary-color; +$rating-grade-icon-content: ""; + +// ------------------------ split-button ------------------------ // + +$split-btn-trigger-normal-icon-color: #8d9299; +$split-btn-fold-icon-content: ""; +$split-btn-unfold-icon-content: $icon-reset; + +// ------------------------ paragraph ------------------------ // + +$paragraph-text-color: #1f2633; +$paragraph-s-font-size: 14px; +$paragraph-m-font-size: 14px; +$paragraph-s-line-height: 1.5; +$paragraph-l-line-height: 1.7; + +// ------------------------ typography ------------------------ // + +$typography-text-color: #1f2633; +$typography-text-strong-font-weight: 600; +$typography-text-code-corner: 4px; +$typography-text-mark-color: #1f2633; +$typography-text-mark-background: #fffbc7; +$typography-text-code-color: #1f2633; +$typography-text-code-background: #f4f6f9; +$typography-text-code-border-color: #e4e8ee; +$typography-paragraph-font-size: 14px; +$typography-paragraph-line-height: 1.5; +$typography-title-h1-font-size: 24px; +$typography-title-h2-font-size: 20px; +$typography-title-h3-font-size: 16px; +$typography-title-h4-font-size: 16px; +$typography-title-h5-font-size: 14px; +$typography-title-h6-font-size: 14px; +$typography-title-font-weight: 600; + +// ------------------------ loading ------------------------ // + +$loading-icon-size: 32px; +$loading-dot-color: $primary-color; +$loading-large-size: 48px; +$loading-large-dot-size: 12px; +$loading-medium-size: 32px; +$loading-medium-dot-size: 8px; + +// ------------------------ table ------------------------ // + +$table-normal-border-width: 1px; +$table-th-font-size: 14px; +$table-th-font-weight: normal; +$table-sort-icon-size: 12px; +$table-filter-icon-size: 12px; +$table-body-font-size: 14px; +$table-empty-padding: 32px; +$table-expanded-icon-size: 12px; +$table-tree-expanded-icon-size: 12px; +$table-cell-padding-top: 12px; +$table-cell-padding-left: 16px; +$table-header-padding-top: 12px; +$table-header-padding-left: 16px; +$table-header-icon-margin-left: 8px; +$table-header-corner-top: 0; +$table-header-corner-bottom: 0; +$table-size-s-cell-padding-top: 8px; +$table-size-s-cell-padding-left: 8px; +$table-size-s-header-padding-top: 8px; +$table-size-s-header-padding-left: 8px; +$table-group-split: 8px; +$table-group-header-corner-top: 0; +$table-group-header-corner-bottom: 0; +$table-group-footer-corner-top: 0; +$table-group-footer-corner-bottom: 0; +$table-normal-border-color: #dcdfe6; +$table-normal-border-style: solid; +$table-th-bg: #f0f2f5; +$table-th-color: #1f2633; +$table-sort-color: #1f2633; +$table-group-th-bg: #f0f2f5; +$table-group-th-color: #1f2633; +$table-row-bg: #FFFFFF; +$table-row-color: #1f2633; +$table-td-gray: #f5f7fa; +$table-td-normal: #FFFFFF; +$table-empty-color: #c4c7cc; +$table-group-footer-bg: #f0f2f5; +$table-group-footer-color: #1f2633; +$table-row-hover-bg: #f4f6f9; +$table-row-hover-color: #1f2633; +$table-row-selected-bg: #f4f6f9; +$table-row-selected-color: #1f2633; +$table-sort-color-current: $primary-color; +$table-expanded-ctrl-disabled-color: #8d9299; +$table-tree-fold-icon-content: ""; +$table-tree-unfold-icon-content: ""; +$table-expand-fold-icon-content: ""; +$table-expand-unfold-icon-content: ""; + +// ------------------------ badge ------------------------ // + +$badge-size-dot-width: 8px; +$badge-size-list-margin: 0px; +$badge-size-count-config-height: 16px; +$badge-size-count-padding-lr: 4px; +$badge-size-custom-padding-lr: 4px; +$badge-size-count-font: 12px; +$badge-color-bg: #f52743; +$badge-size-count-border-radius: 8px; +$badge-dot-color-bg: #f52743; +$badge-size-dot-border-radius: 8px; +$badge-size-custom-border-radius: 4px; + +// ------------------------ select ------------------------ // + +$select-color: #1f2633; +$select-hint-color: #8d9299; +$select-highlight-color: $primary-color; +$select-highlight-font: 14px; +$select-l-lineheight: 24px; +$select-m-lineheight: 20px; +$select-s-lineheight: 14px; +$select-fold-icon-content: ""; +$select-unfold-icon-content: $icon-reset; + +// ------------------------ number-picker ------------------------ // + +$number-picker-normal-up-icon: ""; +$number-picker-normal-down-icon: ""; +$number-picker-normal-s-button-width: 20px; +$number-picker-normal-m-button-width: 20px; +$number-picker-normal-l-button-width: 20px; +$number-picker-normal-m-input-width: 80px; +$number-picker-normal-l-input-width: 80px; +$number-picker-normal-s-button-icon-size: 8px; +$number-picker-normal-m-button-icon-size: 8px; +$number-picker-normal-l-button-icon-size: 8px; +$number-picker-inline-add-icon: ""; +$number-picker-inline-minus-icon: ""; +$number-picker-inline-s-button-icon-size: 12px; +$number-picker-inline-s-button-margin: 2px; +$number-picker-inline-s-button-corner: 4px; +$number-picker-inline-m-button-icon-size: 12px; +$number-picker-inline-m-button-margin: 2px; +$number-picker-inline-m-button-corner: 4px; +$number-picker-inline-m-input-width: 100px; +$number-picker-inline-l-button-icon-size: 12px; +$number-picker-inline-l-button-margin: 2px; +$number-picker-inline-l-button-corner: 4px; +$number-picker-inline-l-input-width: 128px; + +// ------------------------ progress ------------------------ // + +$progress-line-height-size-l: 12px; +$progress-line-height-size-m: 8px; +$progress-line-height-size-s: 4px; +$progress-line-underlay-border-width: 1px; +$progress-line-font-l: 14px; +$progress-line-font-m: 12px; +$progress-line-font-s: 12px; +$progress-line-underlay-color: #f0f2f5; +$progress-line-underlay-border-color: #dcdfe6; +$progress-line-radius-l: 20px; +$progress-line-radius-m: 20px; +$progress-line-radius-s: 20px; +$progress-line-font-color: #1f2633; +$progress-line-normal-color: $primary-color; +$progress-line-error-color: #f52743; +$progress-line-success-color: #08c29e; +$progress-line-started-color: #f52743; +$progress-line-middle-color: #f5cb22; +$progress-line-finishing-color: #08c29e; +$progress-circle-size-l: 132px; +$progress-circle-size-m: 116px; +$progress-circle-size-s: 100px; +$progress-circle-underlay-width: 8px; +$progress-circle-overlay-width: 8px; +$progress-circle-font-l: 36px; +$progress-circle-font-m: 24px; +$progress-circle-font-s: 20px; +$progress-circle-underlay-color: #f0f2f5; +$progress-circle-text-color: #1f2633; +$progress-circle-corner: round; +$progress-circle-normal-color: $primary-color; +$progress-circle-error-color: #f52743; +$progress-circle-success-color: #08c29e; +$progress-circle-started-color: #f52743; +$progress-circle-middle-color: #f5cb22; +$progress-circle-finishing-color: #08c29e; + +// ------------------------ shell ------------------------ // + +$shell-light-header-color: #000000; +$shell-light-header-height: 52px; +$shell-light-header-background: #FFFFFF; +$shell-light-header-shadow: none; +$shell-light-header-divider-size: 1px; +$shell-light-header-divider-style: solid; +$shell-light-header-divider-color: #e4e8ee; +$shell-light-header-paddingLeft: 16px; +$shell-light-multitask-min-height: 40px; +$shell-light-multitask-background: #FFFFFF; +$shell-light-multitask-shadow: none; +$shell-light-multitask-divider-size: 1px; +$shell-light-multitask-divider-style: solid; +$shell-light-multitask-divider-color: #e4e8ee; +$shell-light-multitask-paddingLeft: 0px; +$shell-light-navigation-hoz-marginLeft: 48px; +$shell-light-navigation-ver-width: 168px; +$shell-light-navigation-ver-shadow: none; +$shell-light-navigation-ver-paddingTop: 8px; +$shell-light-navigation-ver-paddingBottom: 8px; +$shell-light-navigation-ver-width-mini: 60px; +$shell-light-navigation-ver-background: #FFFFFF; +$shell-light-navigation-ver-divider-size: 1px; +$shell-light-navigation-ver-divider-style: solid; +$shell-light-navigation-ver-divider-color: #e4e8ee; +$shell-light-local-navigation-width: 168px; +$shell-light-local-navigation-background: #edeff2; +$shell-light-local-navigation-paddingTop: 8px; +$shell-light-local-navigation-paddingBottom: 8px; +$shell-light-local-navigation-shadow: none; +$shell-light-local-navigation-divider-size: 1px; +$shell-light-local-navigation-divider-style: solid; +$shell-light-local-navigation-divider-color: #e4e8ee; +$shell-light-appbar-background: #FFFFFF; +$shell-light-appbar-min-height: 48px; +$shell-light-appbar-shadow: none; +$shell-light-appbar-paddingLeft: 24px; +$shell-light-appbar-divider-size: 1px; +$shell-light-appbar-divider-style: solid; +$shell-light-appbar-divider-color: #e4e8ee; +$shell-light-content-background: #f0f2f5; +$shell-light-content-paddingLeft: 20px; +$shell-light-content-paddingTop: 20px; +$shell-light-footer-min-height: 56px; +$shell-light-footer-background: transparent; +$shell-light-footer-color: #c4c7cc; +$shell-light-footer-font-size: 14px; +$shell-light-ancillary-width: 168px; +$shell-light-ancillary-background: #FFFFFF; +$shell-light-ancillary-paddingTop: 8px; +$shell-light-ancillary-paddingBottom: 8px; +$shell-light-ancillary-shadow: none; +$shell-light-ancillary-divider-size: 1px; +$shell-light-ancillary-divider-style: solid; +$shell-light-ancillary-divider-color: #e4e8ee; +$shell-light-tooldock-height: 52px; +$shell-light-tooldock-width: 52px; +$shell-light-tooldock-background: #edeff2; +$shell-light-tooldock-paddingTop: 8px; +$shell-light-tooldock-paddingBottom: 8px; +$shell-light-tooldock-shadow: none; +$shell-light-tooldock-divider-size: 1px; +$shell-light-tooldock-divider-style: solid; +$shell-light-tooldock-divider-color: #e4e8ee; +$shell-light-tooldock-item-paddingTop: 8px; +$shell-light-tooldock-item-color: #585d66; +$shell-light-tooldock-item-color-hover: #1f2633; +$shell-light-tooldock-item-color-active: #1f2633; +$shell-light-tooldock-item-background: transparent; +$shell-light-tooldock-item-background-hover: #f0f2f5; +$shell-light-tooldock-item-background-active: #f0f2f5; +$shell-dark-header-color: #FFFFFF; +$shell-dark-header-height: 52px; +$shell-dark-header-background: #000000; +$shell-dark-header-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +$shell-dark-header-divider-size: 1px; +$shell-dark-header-divider-style: solid; +$shell-dark-header-divider-color: #1F1F1F; +$shell-dark-header-paddingLeft: 16px; +$shell-dark-multitask-min-height: 40px; +$shell-dark-multitask-background: #FFFFFF; +$shell-dark-multitask-shadow: none; +$shell-dark-multitask-divider-size: 1px; +$shell-dark-multitask-divider-style: solid; +$shell-dark-multitask-divider-color: #e4e8ee; +$shell-dark-multitask-paddingLeft: 0px; +$shell-dark-navigation-hoz-marginLeft: 48px; +$shell-dark-navigation-ver-width: 168px; +$shell-dark-navigation-ver-shadow: none; +$shell-dark-navigation-ver-paddingTop: 8px; +$shell-dark-navigation-ver-paddingBottom: 8px; +$shell-dark-navigation-ver-width-mini: 60px; +$shell-dark-navigation-ver-background: #1f2633; +$shell-dark-navigation-ver-divider-size: 1px; +$shell-dark-navigation-ver-divider-style: solid; +$shell-dark-navigation-ver-divider-color: #e4e8ee; +$shell-dark-local-navigation-width: 168px; +$shell-dark-local-navigation-background: #edeff2; +$shell-dark-local-navigation-paddingTop: 8px; +$shell-dark-local-navigation-paddingBottom: 8px; +$shell-dark-local-navigation-shadow: none; +$shell-dark-local-navigation-divider-size: 1px; +$shell-dark-local-navigation-divider-style: solid; +$shell-dark-local-navigation-divider-color: #e4e8ee; +$shell-dark-appbar-background: #FFFFFF; +$shell-dark-appbar-min-height: 48px; +$shell-dark-appbar-shadow: none; +$shell-dark-appbar-paddingLeft: 24px; +$shell-dark-appbar-divider-size: 1px; +$shell-dark-appbar-divider-style: solid; +$shell-dark-appbar-divider-color: #e4e8ee; +$shell-dark-content-background: #f0f2f5; +$shell-dark-content-paddingLeft: 20px; +$shell-dark-content-paddingTop: 20px; +$shell-dark-footer-min-height: 56px; +$shell-dark-footer-background: transparent; +$shell-dark-footer-color: #c4c7cc; +$shell-dark-footer-font-size: 14px; +$shell-dark-ancillary-width: 168px; +$shell-dark-ancillary-background: #FFFFFF; +$shell-dark-ancillary-paddingTop: 8px; +$shell-dark-ancillary-paddingBottom: 8px; +$shell-dark-ancillary-shadow: none; +$shell-dark-ancillary-divider-size: 1px; +$shell-dark-ancillary-divider-style: solid; +$shell-dark-ancillary-divider-color: #e4e8ee; +$shell-dark-tooldock-height: 52px; +$shell-dark-tooldock-width: 52px; +$shell-dark-tooldock-background: #edeff2; +$shell-dark-tooldock-paddingTop: 8px; +$shell-dark-tooldock-paddingBottom: 8px; +$shell-dark-tooldock-shadow: none; +$shell-dark-tooldock-divider-size: 1px; +$shell-dark-tooldock-divider-style: solid; +$shell-dark-tooldock-divider-color: #e4e8ee; +$shell-dark-tooldock-item-paddingTop: 8px; +$shell-dark-tooldock-item-color: #585d66; +$shell-dark-tooldock-item-color-hover: #1f2633; +$shell-dark-tooldock-item-color-active: #1f2633; +$shell-dark-tooldock-item-background: transparent; +$shell-dark-tooldock-item-background-hover: #f0f2f5; +$shell-dark-tooldock-item-background-active: #f0f2f5; +$shell-brand-header-color: #FFFFFF; +$shell-brand-header-height: 52px; +$shell-brand-header-background: $primary-color; +$shell-brand-header-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.16); +$shell-brand-header-divider-size: 1px; +$shell-brand-header-divider-style: solid; +$shell-brand-header-divider-color: #e4e8ee; +$shell-brand-header-paddingLeft: 16px; +$shell-brand-multitask-min-height: 40px; +$shell-brand-multitask-background: #FFFFFF; +$shell-brand-multitask-shadow: none; +$shell-brand-multitask-divider-size: 1px; +$shell-brand-multitask-divider-style: solid; +$shell-brand-multitask-divider-color: #e4e8ee; +$shell-brand-multitask-paddingLeft: 0px; +$shell-brand-navigation-hoz-marginLeft: 48px; +$shell-brand-navigation-ver-width: 168px; +$shell-brand-navigation-ver-shadow: none; +$shell-brand-navigation-ver-paddingTop: 8px; +$shell-brand-navigation-ver-paddingBottom: 8px; +$shell-brand-navigation-ver-width-mini: 60px; +$shell-brand-navigation-ver-background: #FFFFFF; +$shell-brand-navigation-ver-divider-size: 1px; +$shell-brand-navigation-ver-divider-style: solid; +$shell-brand-navigation-ver-divider-color: #e4e8ee; +$shell-brand-local-navigation-width: 168px; +$shell-brand-local-navigation-background: #edeff2; +$shell-brand-local-navigation-paddingTop: 8px; +$shell-brand-local-navigation-paddingBottom: 8px; +$shell-brand-local-navigation-shadow: none; +$shell-brand-local-navigation-divider-size: 1px; +$shell-brand-local-navigation-divider-style: solid; +$shell-brand-local-navigation-divider-color: #e4e8ee; +$shell-brand-appbar-background: #FFFFFF; +$shell-brand-appbar-min-height: 48px; +$shell-brand-appbar-shadow: none; +$shell-brand-appbar-paddingLeft: 24px; +$shell-brand-appbar-divider-size: 1px; +$shell-brand-appbar-divider-style: solid; +$shell-brand-appbar-divider-color: #e4e8ee; +$shell-brand-content-background: #f0f2f5; +$shell-brand-content-paddingLeft: 20px; +$shell-brand-content-paddingTop: 20px; +$shell-brand-footer-min-height: 56px; +$shell-brand-footer-background: transparent; +$shell-brand-footer-color: #c4c7cc; +$shell-brand-footer-font-size: 14px; +$shell-brand-ancillary-width: 168px; +$shell-brand-ancillary-background: #FFFFFF; +$shell-brand-ancillary-paddingTop: 8px; +$shell-brand-ancillary-paddingBottom: 8px; +$shell-brand-ancillary-shadow: none; +$shell-brand-ancillary-divider-size: 1px; +$shell-brand-ancillary-divider-style: solid; +$shell-brand-ancillary-divider-color: #e4e8ee; +$shell-brand-tooldock-height: 52px; +$shell-brand-tooldock-width: 52px; +$shell-brand-tooldock-background: #edeff2; +$shell-brand-tooldock-paddingTop: 8px; +$shell-brand-tooldock-paddingBottom: 8px; +$shell-brand-tooldock-shadow: none; +$shell-brand-tooldock-divider-size: 1px; +$shell-brand-tooldock-divider-style: solid; +$shell-brand-tooldock-divider-color: #e4e8ee; +$shell-brand-tooldock-item-paddingTop: 8px; +$shell-brand-tooldock-item-color: #585d66; +$shell-brand-tooldock-item-color-hover: #1f2633; +$shell-brand-tooldock-item-color-active: #1f2633; +$shell-brand-tooldock-item-background: transparent; +$shell-brand-tooldock-item-background-hover: #f0f2f5; +$shell-brand-tooldock-item-background-active: #f0f2f5; + +// ------------------------ divider ------------------------ // + +$divider-hoz-size: 1px; +$divider-hoz-color: #dcdfe6; +$divider-hoz-text-center-paddingLeft: 16px; +$divider-hoz-text-left-paddingLeft: 16px; +$divider-hoz-text-marginTop: 16px; +$divider-hoz-marginTop: 16px; +$divider-hoz-text-size: 16px; +$divider-hoz-text-weight: normal; +$divider-hoz-text-color: #1f2633; +$divider-ver-size: 1px; +$divider-ver-color: #dcdfe6; +$divider-ver-marginLeft: 8px; + +// ------------------------ tree-select ------------------------ // + +$tree-select-padding-vertical: 8px; +$tree-select-padding-horizontal: 20px; +$tree-select-background: #FFFFFF; + +// ------------------------ time-picker ------------------------ // + +$time-picker-panel-width: 200px; +$time-picker-panel-background: #FFFFFF; +$time-picker-menu-border-width: 1px; +$time-picker-menu-title-font-size: 12px; +$time-picker-menu-item-font-size: 12px; +$time-picker-menu-title-height: 28px; +$time-picker-menu-item-height: 28px; +$time-picker-menu-border-color: #d9dbde; +$time-picker-menu-title-color: #8d9299; +$time-picker-menu-title-background: #FFFFFF; +$time-pikcer-menu-title-font-weight: normal; +$time-picker-menu-item-color: #585d66; +$time-picker-menu-item-color-hover: #1f2633; +$time-picker-menu-item-color-selected: #585d66; +$time-picker-menu-item-color-disabled: #c4c7cc; +$time-picker-menu-item-background: #FFFFFF; +$time-picker-menu-item-background-hover: #f4f6f9; +$time-picker-menu-item-background-selected: #f4f6f9; +$time-picker-menu-item-background-disabled: #FFFFFF; +$time-picker-menu-item-font-weight-selected: bold; +$time-picker-clock-icon: ""; + +// ------------------------ slider ------------------------ // + +$slick-dots-position-bottom: 12px; +$slick-dots-position-right: 20px; +$slick-dots-width: 8px; +$slick-dots-height: 8px; +$slick-dots-margin-lr: 4px; +$slick-dots-margin-tb: 0px; +$slick-arrow-width-m: 28px; +$slick-arrow-width-l: 48px; +$slick-arrow-height-m: 56px; +$slick-arrow-height-l: 96px; +$slick-ver-arrow-width-m: 56px; +$slick-ver-arrow-width-l: 96px; +$slick-ver-arrow-height-m: 28px; +$slick-ver-arrow-height-l: 48px; +$slick-arrow-icon-m: 20px; +$slick-arrow-icon-l: 32px; +$slick-arrow-position-lr-m: 4px; +$slick-arrow-position-lr-l: 8px; +$slick-ver-arrow-position-tb-m: 4px; +$slick-ver-arrow-position-tb-l: 16px; +$slick-track-padding-lr: 24px; +$slick-ver-track-padding-tb: 24px; +$slick-dots-background-color-normal: #000000; +$slick-dots-background-color-hover: #000000; +$slick-dots-background-color-selected: $primary-color; +$slick-dots-background-opacity-normal: .32; +$slick-dots-background-opacity-hover: .32; +$slick-dots-background-opacity-selected: 1; +$slick-dots-border-width: 0px; +$slick-dots-border-radius: 50%; +$slick-dots-border-color-normal: #FFFFFF; +$slick-dots-border-color-hover: #FFFFFF; +$slick-dots-border-color-selected: #FFFFFF; +$slick-dots-border-opacity-normal: 1; +$slick-dots-border-opacity-hover: 1; +$slick-dots-border-opacity-selected: 1; +$slick-arrow-icon-color-normal: #FFFFFF; +$slick-arrow-icon-color-normal-outer: #585d66; +$slick-arrow-icon-color-hover: #FFFFFF; +$slick-arrow-icon-color-hover-outer: #1f2633; +$slick-arrow-icon-color-disabled: #c4c7cc; +$slick-arrow-icon-color-disabled-outer: #c4c7cc; +$slick-arrow-bg-color-normal: #000000; +$slick-arrow-bg-color-hover: #000000; +$slick-arrow-bg-color-disabled: #f5f7fa; +$slick-arrow-bg-opacity-normal: .2; +$slick-arrow-bg-opacity-hover: .4; +$slick-arrow-bg-opacity-disabled: .5; +$slick-arrow-bg-color-normal-outer: transparent; +$slick-arrow-bg-color-hover-outer: transparent; +$slick-arrow-bg-color-disabled-outer: transparent; +$slick-arrow-bg-opacity-normal-outer: .32; +$slick-arrow-bg-opacity-hover-outer: .32; +$slick-arrow-bg-opacity-disabled-outer: .32; +$slick-arrow-corner-radius-outer: 0px; + +// ------------------------ step ------------------------ // + +$step-arrow-item-height: 32px; +$step-arrow-item-title-size: 14px; +$step-arrow-item-title-weight: bold; +$step-arrow-item-wait-background: #f0f2f5; +$step-arrow-item-title-wait-color: #8d9299; +$step-arrow-item-process-background: $primary-color; +$step-arrow-item-title-process-color: #FFFFFF; +$step-arrow-item-finish-background: #e6fdff; +$step-arrow-item-title-finish-color: $primary-color; +$step-arrow-item-disabled-background: #f5f7fa; +$step-arrow-item-title-disabled-color: #c4c7cc; +$step-circle-item-node-padding: 8px; +$step-circle-item-node-border-width: 1px; +$step-circle-item-node-icon-size: 12px; +$step-circle-item-node-font-size: 12px; +$step-circle-item-node-corner: 50%; +$step-circle-item-tail-size: 1px; +$step-circle-item-title-margin-top: 8px; +$step-circle-item-content-margin-top: 4px; +$step-circle-item-content-font-size: 12px; +$step-circle-item-body-width: 100px; +$step-circle-item-title-size: 14px; +$step-circle-item-title-weight: bold; +$step-circle-item-node-wait-size: 32px; +$step-circle-item-node-process-size: 32px; +$step-circle-item-node-finish-size: 32px; +$step-circle-item-node-disabled-size: 32px; +$step-circle-item-tail-wait-color: #d9dbde; +$step-circle-item-tail-process-color: #d9dbde; +$step-circle-item-tail-finish-color: $primary-color; +$step-circle-item-tail-disabled-color: #e4e8ee; +$step-circle-item-node-wait-font-weight: normal; +$step-circle-item-node-process-font-weight: normal; +$step-circle-item-node-disabled-font-weight: normal; +$step-circle-item-node-finish-font-weight: normal; +$step-circle-item-title-wait-color: #585d66; +$step-circle-item-title-process-color: #1f2633; +$step-circle-item-title-finish-color: #585d66; +$step-circle-item-title-disabled-color: #c4c7cc; +$step-circle-item-node-wait-border-color: #c4c7cc; +$step-circle-item-node-wait-background: #FFFFFF; +$step-circle-item-node-wait-color: #585d66; +$step-circle-item-node-process-border-color: $primary-color; +$step-circle-item-node-process-background: $primary-color; +$step-circle-item-node-process-color: #FFFFFF; +$step-circle-item-node-process-percent-color: $primary-color; +$step-circle-item-node-process-percent-size: 14px; +$step-circle-item-node-finish-border-color: $primary-color; +$step-circle-item-node-finish-background: #FFFFFF; +$step-circle-item-node-finish-color: $primary-color; +$step-circle-item-node-disabled-border-color: #e4e8ee; +$step-circle-item-node-disabled-background: #FFFFFF; +$step-circle-item-node-disabled-color: #c4c7cc; +$step-circle-vertical-item-node-padding: 8px; +$step-circle-vertical-item-body-margin-left: 16px; +$step-circle-vertical-item-title-margin-top: 8px; +$step-circle-vertical-item-content-margin-top: 4px; +$step-circle-item-content-color: #585d66; +$step-circle-item-tail-bg-color: #e4e8ee; +$step-circle-vertical-item-tail-size: 1px; +$step-dot-item-dot-padding: 8px; +$step-dot-item-dot-icon-size: 12px; +$step-dot-item-dot-border-width: 1px; +$step-dot-item-body-width: 100px; +$step-dot-item-content-margin-top: 4px; +$step-dot-item-dot-corner: 50%; +$step-dot-item-title-size: 14px; +$step-dot-item-title-weight: bold; +$step-dot-item-title-margin-top: 8px; +$step-dot-item-tail-size: 1px; +$step-dot-item-dot-wait-size: 12px; +$step-dot-item-dot-process-size: 12px; +$step-dot-item-dot-finish-size: 12px; +$step-dot-item-dot-disabled-size: 12px; +$step-dot-item-tail-wait-color: #d9dbde; +$step-dot-item-tail-process-color: #d9dbde; +$step-dot-item-tail-finish-color: $primary-color; +$step-dot-item-tail-disabled-color: #e4e8ee; +$step-dot-item-title-wait-color: #585d66; +$step-dot-item-title-process-color: #1f2633; +$step-dot-item-title-finish-color: #585d66; +$step-dot-item-title-disabled-color: #c4c7cc; +$step-dot-item-node-wait-border-color: #c4c7cc; +$step-dot-item-node-wait-background: #FFFFFF; +$step-dot-item-node-wait-color: #8d9299; +$step-dot-item-node-process-border-color: $primary-color; +$step-dot-item-node-process-background: $primary-color; +$step-dot-item-node-process-color: $primary-color; +$step-dot-item-node-finish-border-color: $primary-color; +$step-dot-item-node-finish-background: #FFFFFF; +$step-dot-item-node-finish-color: $primary-color; +$step-dot-item-node-disabled-border-color: #dcdfe6; +$step-dot-item-node-disabled-background: #FFFFFF; +$step-dot-item-node-disabled-color: #e4e8ee; +$step-dot-vertical-item-node-padding: 8px; +$step-dot-vertical-item-body-margin-left: 16px; +$step-dot-vertical-item-title-margin-top: 0px; +$step-dot-vertical-item-content-margin-top: 8px; +$step-dot-item-content-font-size: 12px; +$step-dot-item-content-color: #585d66; +$step-dot-item-tail-bg-color: #e4e8ee; +$step-dot-vertical-item-tail-size: 1px; + +// ------------------------ list ------------------------ // + +$list-size-s-title-font-size: 16px; +$list-size-s-title-font-weight: bold; +$list-size-s-item-padding-lr: 0px; +$list-size-s-item-padding-tb: 8px; +$list-size-s-item-media-margin: 8px; +$list-size-s-item-content-font-size: 14px; +$list-size-s-item-content-line-height: 1.3; +$list-size-s-item-title-font-weight: normal; +$list-size-s-item-title-font-size: 14px; +$list-size-s-item-title-line-height: 1.5; +$list-size-m-title-font-size: 20px; +$list-size-m-title-font-weight: bold; +$list-size-m-item-padding-lr: 0px; +$list-size-m-item-padding-tb: 16px; +$list-size-m-item-media-margin: 8px; +$list-size-m-item-content-font-size: 14px; +$list-size-m-item-content-line-height: 1.5; +$list-size-m-item-title-font-size: 16px; +$list-size-m-item-title-line-height: 1.5; +$list-size-m-item-title-font-weight: normal; +$list-divider-color: #dcdfe6; +$list-title-color: #1f2633; +$list-content-color: #585d66; +$list-extra-color: #8d9299; + +// ------------------------ avatar ------------------------ // + +$avatar-size-large: 52px; +$avatar-size-medium: 40px; +$avatar-size-small: 28px; +$avatar-border-radius: 4px; + +// ------------------------ date-picker ------------------------ // + +$date-picker-panel-footer-padding-lr: 20px; +$date-picker-panel-footer-padding-tb: 8px; +$date-picker-panel-background: #FFFFFF; +$date-picker-panel-time-panel-separator-color: #dcdfe6; +$date-picker-calendar-icon: ""; \ No newline at end of file diff --git a/packages/velaux-theme/variables.scss2css.scss b/packages/velaux-theme/variables.scss2css.scss new file mode 100644 index 000000000..e69de29bb diff --git a/packages/velaux-theme/webpack.config.js b/packages/velaux-theme/webpack.config.js new file mode 100644 index 000000000..a0822b8ef --- /dev/null +++ b/packages/velaux-theme/webpack.config.js @@ -0,0 +1,168 @@ +'use strict'; + +const path = require('path'); +const webpack = require('webpack'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const CssSplitWebpackPlugin = require('css-split-webpack-plugin').default; +const autoprefixer = require('autoprefixer'); +const cssvarFallback = require('postcss-custom-properties'); +const calc = require('postcss-calc'); + +const css = (options = {}) => [ + { + loader: 'style-loader', + }, + { + loader: 'css-loader', + options: { + minimize: !!options.minimize, + }, + }, + { + loader: 'postcss-loader', + options: { + plugins: () => [ + autoprefixer({ + browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 9'], + }), + calc(), + cssvarFallback(), + ], + }, + }, +]; + +const scss = (options = {}) => [ + ...css(options), + { + loader: 'fast-sass-loader', + }, +]; + +const buildTime = { + start: new Date().getTime(), + end: new Date().getTime(), +}; + +module.exports = function ({ minimize = false }) { + const config = { + entry: { + next: ['./index.scss', './index.js'], + ['next-noreset']: './index-noreset.scss', + }, + output: { + path: path.join(__dirname, 'dist'), + publicPath: '/dist/', + library: 'Next', + libraryTarget: 'umd', + }, + resolve: { + extensions: ['.js', '.jsx'], + }, + externals: [ + { + react: { + root: 'React', + commonjs2: 'react', + commonjs: 'react', + amd: 'react', + }, + }, + { + 'react-dom': { + root: 'ReactDOM', + commonjs2: 'react-dom', + commonjs: 'react-dom', + amd: 'react-dom', + }, + }, + { + moment: { + root: 'moment', + commonjs2: 'moment', + commonjs: 'moment', + amd: 'moment', + }, + }, + ], + module: { + rules: [ + { + test: /\.css$/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: css({ minimize }).slice(1), + }), + }, + { + test: /\.scss$/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: scss({ minimize }).slice(1), + }), + }, + ], + }, + plugins: [ + new webpack.BannerPlugin(`{{name}}@{{version}} (https://kubevela.net) +{{@alifd/next}}@{{1.26.14}} (https://fusion.design) +Copyright 2023 KubeVela`), + new webpack.NoEmitOnErrorsPlugin(), + new webpack.optimize.ModuleConcatenationPlugin(), + new CaseSensitivePathsPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': '"production"', + }), + new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + new webpack.ProgressPlugin((percentage, msg) => { + if (percentage === 0) { + buildTime.start = new Date().getTime(); + console.log('> webpack bundle is start.'); + } + if (percentage === 1) { + buildTime.end = new Date().getTime(); + console.log('> webpack bundle is finished. (Spent %s ms)', buildTime.end - buildTime.start); + } + }), + ], + }; + + const { version } = require('@alifd/next/package.json'); + if (version >= '1.21.0') { + config.entry['next-noreset.var'] = './index-noreset.var.scss'; + config.entry['next.var'] = './index.var.scss'; + } + + if (minimize) { + config.output.filename = '[name].min.js'; + config.plugins.push( + new ExtractTextPlugin({ + filename: '[name].min.css', + allChunks: true, + }), + new webpack.optimize.UglifyJsPlugin({ + minimize: true, + compress: { + warnings: false, + }, + output: { + comments: false, + ascii_only: true, + }, + }) + ); + } else { + config.output.filename = '[name].js'; + config.plugins.push( + new ExtractTextPlugin({ + filename: '[name].css', + allChunks: true, + }) + ); + } + + config.plugins.push(new CssSplitWebpackPlugin({ size: 4000, preserve: true })); + + return config; +}; diff --git a/packages/velaux-ui/package.json b/packages/velaux-ui/package.json index 9e062d2c1..3db9b0ac1 100644 --- a/packages/velaux-ui/package.json +++ b/packages/velaux-ui/package.json @@ -39,8 +39,9 @@ ] }, "dependencies": { - "@alifd/meet-react": "^2.0.0", - "@b-design/ui": "^1.0.63", + "@alifd/next": "1.26.14", + "@alifd/theme-2": "0.4.4", + "@velaux/theme": "0.0.1", "ansi-to-html": "^0.7.2", "ansi-to-react": "^6.1.6", "axios": "0.24.0", @@ -73,10 +74,10 @@ "react-refresh": "^0.10.0", "redux": "4.1.2", "remark-gfm": "3.0.1", + "dagre-compound": "0.0.11", "uuid": "^8.3.2" }, "devDependencies": { - "@pmmmwh/react-refresh-webpack-plugin": "0.5.1", "@testing-library/react": "^12.1.2", "@types/base-64": "^1.0.0", "@types/chai": "^4.2.11", @@ -88,39 +89,11 @@ "@types/react-copy-to-clipboard": "^5.0.2", "@types/react-dom": "^17.0.9", "@types/uuid": "^8.3.4", - "@types/react-router-dom": "^4.2.7", - "@svgr/cli": "^6.5.1", - "@umijs/fabric": "2.8.1", - "babel-loader": "8.2.3", - "bfj": "7.0.2", - "case-sensitive-paths-webpack-plugin": "2.3.0", - "chai": "^4.2.0", - "css-loader": "5.2.7", - "dagre-compound": "0.0.11", - "dotenv": "10.0.0", - "dotenv-expand": "5.1.0", - "file-loader": "6.1.1", - "fs-extra": "10.0.0", - "html-webpack-plugin": "4.5.2", - "mini-css-extract-plugin": "0.11.3", - "optimize-css-assets-webpack-plugin": "6.0.1", - "pnp-webpack-plugin": "1.6.4", - "postcss": "^8.3.3", - "postcss-flexbugs-fixes": "4.2.1", - "postcss-loader": "3.0.0", - "postcss-normalize": "8.0.1", - "postcss-preset-env": "6.7.0", - "postcss-safe-parser": "6.0.0", - "react-dev-utils": "^11.0.4", - "resolve-url-loader": "4.0.0", - "sass-loader": "^10.0.5", - "style-loader": "1.3.0", - "ts-loader": "8.1.0", - "ts-mocha": "^9.0.2", - "url-loader": "4.1.1", - "webpack": "4.44.2", - "webpack-dev-server": "3.11.1", - "webpack-manifest-plugin": "2.2.0", - "workbox-webpack-plugin": "5.1.4" + "@types/react-router-dom": "5.3.3", + "@types/webpack-env": "1.18.0", + "@pmmmwh/react-refresh-webpack-plugin": "0.5.1", + "ts-mocha": "10.0.0", + "mocha": "10.2.0", + "chai": "^4.2.0" } } \ No newline at end of file diff --git a/packages/velaux-ui/public/index.html b/packages/velaux-ui/public/index.html index 2254359fa..29add1908 100644 --- a/packages/velaux-ui/public/index.html +++ b/packages/velaux-ui/public/index.html @@ -14,15 +14,6 @@ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> - KubeVela-Make shipping applications more enjoyable. diff --git a/packages/velaux-ui/src/App.tsx b/packages/velaux-ui/src/App.tsx index f758c47a2..46ecee932 100644 --- a/packages/velaux-ui/src/App.tsx +++ b/packages/velaux-ui/src/App.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import BasicLayout from './layout/index'; -import '@b-design/ui/dist/index.css'; export default function App() { return ( diff --git a/packages/velaux-ui/src/api/request.ts b/packages/velaux-ui/src/api/request.ts index 0f49cd6cb..8985fe759 100644 --- a/packages/velaux-ui/src/api/request.ts +++ b/packages/velaux-ui/src/api/request.ts @@ -1,4 +1,4 @@ -import { Message } from '@b-design/ui'; +import { Message } from '@alifd/next'; import type { AxiosInstance, AxiosResponse } from 'axios'; import axios from 'axios'; @@ -10,8 +10,6 @@ import { authenticationRefreshToken } from './productionLink'; import { getMessage } from './status'; import { baseURL } from './system_config'; - - type RetryRequests = (token: string) => void; let isRefreshing = false; let retryRequests: RetryRequests[] = []; diff --git a/packages/velaux-ui/src/components/ApplicationDiff/index.tsx b/packages/velaux-ui/src/components/ApplicationDiff/index.tsx index 7869afed7..16ad87677 100644 --- a/packages/velaux-ui/src/components/ApplicationDiff/index.tsx +++ b/packages/velaux-ui/src/components/ApplicationDiff/index.tsx @@ -1,4 +1,4 @@ -import { Button, Dialog, Message } from '@b-design/ui'; +import { Button, Dialog, Message } from '@alifd/next'; import * as React from 'react'; import type { ApplicationCompareResponse } from '../../interface/application'; @@ -21,8 +21,10 @@ export const ApplicationDiff = (props: ApplicationDiffProps) => { const container = 'revision' + baseName + targetName; return ( @@ -50,12 +52,7 @@ export const ApplicationDiff = (props: ApplicationDiffProps) => {
- +
); diff --git a/packages/velaux-ui/src/components/ApplicationDryRun/index.tsx b/packages/velaux-ui/src/components/ApplicationDryRun/index.tsx index a8f31f310..dca20b2da 100644 --- a/packages/velaux-ui/src/components/ApplicationDryRun/index.tsx +++ b/packages/velaux-ui/src/components/ApplicationDryRun/index.tsx @@ -1,4 +1,4 @@ -import { Dialog } from '@b-design/ui'; +import { Dialog } from '@alifd/next'; import * as React from 'react'; import type { ApplicationDryRunResponse } from '../../interface/application'; @@ -18,8 +18,9 @@ export const ApplicationDryRun = (props: ApplicationDryRunProps) => { const id = uuid(); return ( } visible={true} onClose={props.onClose} diff --git a/packages/velaux-ui/src/components/AuthRoute/index.tsx b/packages/velaux-ui/src/components/AuthRoute/index.tsx index a3341db58..a9461d026 100644 --- a/packages/velaux-ui/src/components/AuthRoute/index.tsx +++ b/packages/velaux-ui/src/components/AuthRoute/index.tsx @@ -37,8 +37,20 @@ export default class AuthRoute extends Component { } else { return ( - - + { + return ; + }} + /> + { + return ; + }} + /> ); } diff --git a/packages/velaux-ui/src/components/Breadcrumb/index.tsx b/packages/velaux-ui/src/components/Breadcrumb/index.tsx new file mode 100644 index 000000000..873e8af89 --- /dev/null +++ b/packages/velaux-ui/src/components/Breadcrumb/index.tsx @@ -0,0 +1,27 @@ +import { Link } from 'dva/router'; +import * as React from 'react'; +import { Breadcrumb as B } from '@alifd/next'; +import { AiOutlineHome } from 'react-icons/ai'; + +interface Props { + items: { to?: string; title: JSX.Element | string }[]; +} +export const Breadcrumb = (props: Props) => { + return ( +
+ + + + + {props.items.map((item, i) => { + return ( + + {item.to && {item.title}} + {!item.to && item.title} + + ); + })} + +
+ ); +}; diff --git a/packages/velaux-ui/src/components/CustomSelect/index.tsx b/packages/velaux-ui/src/components/CustomSelect/index.tsx index 085f57358..23fbb6bc3 100644 --- a/packages/velaux-ui/src/components/CustomSelect/index.tsx +++ b/packages/velaux-ui/src/components/CustomSelect/index.tsx @@ -1,5 +1,5 @@ -import type { SelectProps } from '@alifd/meet-react/lib/select'; -import { Select } from '@b-design/ui'; +import type { SelectProps } from '@alifd/next/lib/select'; +import { Select } from '@alifd/next'; import * as React from 'react'; import locale from '../../utils/locale'; diff --git a/packages/velaux-ui/src/components/Drawer/index.less b/packages/velaux-ui/src/components/Drawer/index.less index 81ab0ac2c..032eabc37 100644 --- a/packages/velaux-ui/src/components/Drawer/index.less +++ b/packages/velaux-ui/src/components/Drawer/index.less @@ -3,38 +3,11 @@ flex-direction: column; width: 100%; height: 100%; - .next-drawer-header { - position: absolute; - top: 0; - z-index: 1000; - display: flex; - flex: 0; - align-items: center; - width: 100%; - height: 55px; - padding: 16px 24px; - font-size: 16px; - line-height: 22px; - border-bottom: 1px solid rgba(0, 0, 0, 0.06); - .next-drawer-close { - right: 26px !important; - .next-drawer-close-icon.next-icon::before { - color: #000; - font-weight: 800 !important; - font-size: 24px !important; - line-height: 24px !important; - &:hover { - color: var(--primary-color); - } - } - } - } .next-drawer-body { flex: 1; min-width: 0; min-height: 0; - margin-top: 71px; padding: 24px; overflow: auto; .drawer-footer { diff --git a/packages/velaux-ui/src/components/Drawer/index.tsx b/packages/velaux-ui/src/components/Drawer/index.tsx index 8072a866a..b572cdeea 100644 --- a/packages/velaux-ui/src/components/Drawer/index.tsx +++ b/packages/velaux-ui/src/components/Drawer/index.tsx @@ -1,4 +1,4 @@ -import { Drawer, Button } from '@b-design/ui'; +import { Drawer, Button } from '@alifd/next'; import React, { Component } from 'react'; import './index.less'; @@ -11,15 +11,17 @@ type Props = { onOkButtonLoading?: boolean; onClose: () => void; width?: number | string; - title: string | React.ReactNode; + title?: React.ReactNode; placement?: 'top' | 'right' | 'bottom' | 'left'; children?: React.ReactNode; extButtons?: React.ReactNode; + visible?: boolean; }; class DrawerWithFooter extends Component { render() { const { + visible, children, title, placement, @@ -32,12 +34,12 @@ class DrawerWithFooter extends Component { } = this.props; return ( {title}} closeMode="close" className="customDrawer" closeable="close" onClose={onClose} - visible={true} + visible={visible || true} autoFocus={true} placement={placement || 'right'} width={width || '600px'} diff --git a/packages/velaux-ui/src/components/HelmValueShow/index.tsx b/packages/velaux-ui/src/components/HelmValueShow/index.tsx index d2c3afee2..d331ef175 100644 --- a/packages/velaux-ui/src/components/HelmValueShow/index.tsx +++ b/packages/velaux-ui/src/components/HelmValueShow/index.tsx @@ -1,4 +1,4 @@ -import { Dialog, Select } from '@b-design/ui'; +import { Dialog, Select } from '@alifd/next'; import * as React from 'react'; import i18n from '../../i18n'; @@ -14,12 +14,12 @@ const HelmValueShow: React.FC = (props: Props) => { const [valueFile, setValueFile] = React.useState('values.yaml'); return ( } - title={i18n.t('Show Values File')} + title={i18n.t('Show Values File').toString()} > { - + { href="https://kubevela.io/docs/reference/user-improvement-plan" rel="noopener noreferrer" > - + } diff --git a/packages/velaux-ui/src/components/RunPipeline/index.tsx b/packages/velaux-ui/src/components/RunPipeline/index.tsx index 2d9a0a425..1bfb45c50 100644 --- a/packages/velaux-ui/src/components/RunPipeline/index.tsx +++ b/packages/velaux-ui/src/components/RunPipeline/index.tsx @@ -1,4 +1,4 @@ -import { Button, Checkbox, Dialog, Loading, Message, Tag } from '@b-design/ui'; +import { Button, Checkbox, Dialog, Loading, Message, Tag } from '@alifd/next'; import React, { useState, useEffect } from 'react'; import { AiFillDelete, AiFillSetting } from 'react-icons/ai'; import { BiCopyAlt } from 'react-icons/bi'; @@ -18,7 +18,6 @@ import Translation from '../Translation'; import NewContext from './new-context'; - export interface PipelineProps { pipeline: PipelineListItem; onClose: () => void; @@ -86,14 +85,14 @@ const RunPipeline = (props: PipelineProps) => { const okButtonDisable = !contextName && !noContext; return ( { setSelectContextName(''); } }} - title={ - contextName === key ? i18n.t('Click and deselect') : i18n.t('Click and select') - } + title={contextName === key ? i18n.t('Click and deselect') : i18n.t('Click and select')} >
{key}
{Array.isArray(contexts[key]) && contexts[key].map((item) => { - return ( - {`${item.key}=${item.value}`} - ); + return {`${item.key}=${item.value}`}; })}
@@ -150,7 +142,6 @@ const RunPipeline = (props: PipelineProps) => { text={true} component={'a'} size={'medium'} - ghost={true} onClick={(event) => { onEditPipelineContext(key); event.stopPropagation(); @@ -171,7 +162,6 @@ const RunPipeline = (props: PipelineProps) => {
} - height="auto" - footerAlign="center" + v2 > - Applied Resources} - > + Applied Resources}> { return `${row.namespace || '-'}/${row.name}`; }} /> - Kind} - /> + Kind} /> APIVersion} /> { title={Conditions} >
- Type} - /> + Type} /> Status} /> - - LastTransitionTime} - /> + LastTransitionTime} /> Reason} @@ -104,7 +87,7 @@ class StatusShow extends React.Component { - {v} + {v} } > @@ -112,6 +95,7 @@ class StatusShow extends React.Component { ); } + return {v}; }} /> @@ -125,17 +109,8 @@ class StatusShow extends React.Component { contentHeight="auto" title={Component Status} > -
- Name} - /> +
+ Name} /> { }} title={Healthy} /> - Message} - /> + Message} />
diff --git a/packages/velaux-ui/src/components/Title/index.tsx b/packages/velaux-ui/src/components/Title/index.tsx index 3c63b5241..d0ba16162 100644 --- a/packages/velaux-ui/src/components/Title/index.tsx +++ b/packages/velaux-ui/src/components/Title/index.tsx @@ -1,4 +1,4 @@ -import { Grid } from '@b-design/ui'; +import { Grid } from '@alifd/next'; import React from 'react'; const { Col, Row } = Grid; diff --git a/packages/velaux-ui/src/components/TreeGraph/component-node.tsx b/packages/velaux-ui/src/components/TreeGraph/component-node.tsx index 3142c5b30..748309fcb 100644 --- a/packages/velaux-ui/src/components/TreeGraph/component-node.tsx +++ b/packages/velaux-ui/src/components/TreeGraph/component-node.tsx @@ -1,4 +1,4 @@ -import { Balloon, Tag } from '@b-design/ui'; +import { Balloon, Tag } from '@alifd/next'; import classNames from 'classnames'; import * as dagre from 'dagre'; import React, { useState } from 'react'; @@ -8,7 +8,6 @@ import Translation from '../Translation'; import type { GraphNode, GraphEdge, TraitGraphNode, Line } from './interface'; import { describeComponents, getGraphSize, ResourceIcon } from './utils'; - import './component-node.less'; import type { TraitStatus } from '../../interface/application'; import { If } from '../If'; diff --git a/packages/velaux-ui/src/components/TreeGraph/index.less b/packages/velaux-ui/src/components/TreeGraph/index.less index 46a36dfdd..9a2c67892 100644 --- a/packages/velaux-ui/src/components/TreeGraph/index.less +++ b/packages/velaux-ui/src/components/TreeGraph/index.less @@ -36,6 +36,10 @@ .healthy.success { color: #28a745; } + .actions { + justify-content: start; + margin-left: 0; + } } .icon { @@ -59,7 +63,7 @@ display: flex; align-items: center; justify-content: end; - + margin-left: 16px; i { color: #666; } diff --git a/packages/velaux-ui/src/components/TreeGraph/index.tsx b/packages/velaux-ui/src/components/TreeGraph/index.tsx index 9c307baa3..401cd06c9 100644 --- a/packages/velaux-ui/src/components/TreeGraph/index.tsx +++ b/packages/velaux-ui/src/components/TreeGraph/index.tsx @@ -27,9 +27,9 @@ import { } from './utils'; import { Link } from 'dva/router'; -import { Dropdown, Icon, Menu, Tag, Balloon } from '@b-design/ui'; - - +import { Dropdown, Icon, Menu, Tag, Balloon } from '@alifd/next'; +import { FaEllipsisV } from 'react-icons/fa'; +import { HiOutlineNewspaper } from 'react-icons/hi'; type TreeGraphProps = { node: TreeNode; @@ -64,7 +64,7 @@ function renderResourceNode(props: TreeGraphProps, id: string, node: GraphNode)
{node.resource.kind}
- }> + }> props.onResourceDetailClick(node.resource)}>Detail @@ -110,7 +110,7 @@ function renderAppNode(props: TreeGraphProps, id: string, node: GraphNode) { {node.resource.name}
- }> + }> props.onResourceDetailClick(node.resource)}>Detail @@ -151,21 +151,17 @@ function renderPodNode(props: TreeGraphProps, id: string, node: GraphNode) { Pod
- + {node.resource.name}
- - + +
- }> + }> props.onResourceDetailClick(node.resource)}>Detail @@ -333,18 +329,14 @@ export const TreeGraph = (props: TreeGraphProps) => { case 'component': return ; default: - return ( - {renderResourceNode(props, key, node)} - ); + return {renderResourceNode(props, key, node)}; } })} {edges.map((edge) => (
{edge.lines.map((line) => { - const distance = Math.sqrt( - Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2), - ); + const distance = Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2)); const xMid = (line.x1 + line.x2) / 2; const yMid = (line.y1 + line.y2) / 2; const angle = (Math.atan2(line.y1 - line.y2, line.x1 - line.x2) * 180) / Math.PI; diff --git a/packages/velaux-ui/src/components/UISchema/index.tsx b/packages/velaux-ui/src/components/UISchema/index.tsx index 73c25aedc..1647d3861 100644 --- a/packages/velaux-ui/src/components/UISchema/index.tsx +++ b/packages/velaux-ui/src/components/UISchema/index.tsx @@ -4,7 +4,7 @@ import Translation from '../Translation'; import type { ParamCondition, UIParam, UIParamValidate } from '../../interface/application'; import type { Rule } from '@alifd/field'; -import { Form, Input, Select, Field, Switch, Grid, Divider } from '@b-design/ui'; +import { Form, Input, Select, Field, Switch, Grid, Divider } from '@alifd/next'; import './index.less'; import i18n from 'i18next'; @@ -55,7 +55,7 @@ type Props = { }; function convertRule(validate?: UIParamValidate) { - const rules = []; + const rules: Rule[] = []; if (!validate) { return []; } @@ -125,7 +125,9 @@ class UISchema extends Component { delete values[name]; } const { onChange } = this.props; - if (onChange) {onChange(values);} + if (onChange) { + onChange(values); + } }, }); this.registerForm = {}; @@ -364,7 +366,7 @@ class UISchema extends Component { initValue = param.validate?.defaultValue; } const disableEdit = (param.validate?.immutable && mode == 'edit') || false; - const getGroup = (children: React.ReactNode) => { + const getGroup = (children?: React.ReactNode) => { return ( { }} > - {children} + <>{children} ); diff --git a/packages/velaux-ui/src/components/WorkflowPrompt/index.tsx b/packages/velaux-ui/src/components/WorkflowPrompt/index.tsx index 66134fc3b..34b812f4c 100644 --- a/packages/velaux-ui/src/components/WorkflowPrompt/index.tsx +++ b/packages/velaux-ui/src/components/WorkflowPrompt/index.tsx @@ -1,4 +1,4 @@ -import { Dialog } from '@b-design/ui'; +import { Dialog } from '@alifd/next'; import { Prompt, routerRedux } from 'dva/router'; import type * as H from 'history'; import React, { useEffect } from 'react'; @@ -9,7 +9,7 @@ import locale from '../../utils/locale'; export interface Props { changed: boolean; title: string; - content: React.ReactNode; + content?: React.ReactNode; dispatch?: Dispatch; onSave: () => void; onClearChanged: () => void; @@ -33,7 +33,7 @@ export const WorkflowPrompt = React.memo( const onHistoryBlock = (location: H.Location) => { if (changed) { Dialog.confirm({ - content: content, + content:
{content}
, locale: locale().Dialog, onOk: () => { onSave(); diff --git a/packages/velaux-ui/src/components/WorkflowStudio/index.tsx b/packages/velaux-ui/src/components/WorkflowStudio/index.tsx index f87171858..c1875368e 100644 --- a/packages/velaux-ui/src/components/WorkflowStudio/index.tsx +++ b/packages/velaux-ui/src/components/WorkflowStudio/index.tsx @@ -1,9 +1,10 @@ -import { Icon } from '@b-design/ui'; import classNames from 'classnames'; import { connect } from 'dva'; import _ from 'lodash'; import React from 'react'; import Draggable from 'react-draggable'; +import { AiOutlinePlayCircle } from 'react-icons/ai'; +import { FiStopCircle } from 'react-icons/fi'; import type { Dispatch } from 'redux'; import { WorkflowEditContext } from '../../context'; @@ -15,8 +16,6 @@ import { Step } from './step'; import StepForm from './step-form'; import TypeSelect from './type-select'; - - type Props = { steps?: WorkflowStep[]; definitions?: DefinitionBase[]; @@ -96,7 +95,7 @@ class WorkflowStudio extends React.Component { addIndex: 0, subStep: false, }, - this.onChange, + this.onChange ); if (step.type != 'step-group') { this.setState({ showStep: step, subStep: subStep }); @@ -132,7 +131,7 @@ class WorkflowStudio extends React.Component { this.setState({ steps: newSteps }, this.onChange); }; - render(): React.ReactNode { + render() { const { steps, stepInterval, addIndex, showStep, subStep } = this.state; const { definitions } = this.props; return ( @@ -155,13 +154,7 @@ class WorkflowStudio extends React.Component { }} > - + plus { switch (step.nodeType) { case 'start': return ( -
- +
+
); @@ -205,11 +195,8 @@ class WorkflowStudio extends React.Component { case 'end': return (
-
- +
+
{addAction} diff --git a/packages/velaux-ui/src/components/WorkflowStudio/input-item.tsx b/packages/velaux-ui/src/components/WorkflowStudio/input-item.tsx index 1bd125379..b772d9f06 100644 --- a/packages/velaux-ui/src/components/WorkflowStudio/input-item.tsx +++ b/packages/velaux-ui/src/components/WorkflowStudio/input-item.tsx @@ -1,7 +1,7 @@ -import { Grid, Input, Form, Select, Button, Icon } from '@b-design/ui'; +import { Grid, Input, Form, Select, Button, Icon } from '@alifd/next'; import _ from 'lodash'; import React, { useContext, useState } from 'react'; - +import { IoMdAdd, IoMdRemove } from 'react-icons/io'; import { WorkflowEditContext } from '../../context'; import type { InputItem, OutputItem } from '../../interface/application'; import locale from '../../utils/locale'; @@ -50,12 +50,7 @@ export const InputItemForm = (props: { value?: InputItem; onChange: (i: InputIte - @@ -68,11 +63,7 @@ export const InputItemForm = (props: { value?: InputItem; onChange: (i: InputIte ); }; -export const InputItems = (props: { - value?: InputItem[]; - id: string; - onChange: (items: InputItem[]) => void; -}) => { +export const InputItems = (props: { value?: InputItem[]; id: string; onChange: (items: InputItem[]) => void }) => { const [items, setItems] = useState(props.value || [{ from: '', parameterKey: '' }]); const onChange = (update: InputItem[]) => { props.onChange(update.filter((item) => item.from != '' && item.parameterKey != '')); @@ -106,7 +97,7 @@ export const InputItems = (props: { type="secondary" style={{ justifyContent: 'center', marginLeft: '8px' }} > - +
)} @@ -124,7 +115,7 @@ export const InputItems = (props: { type="secondary" style={{ justifyContent: 'center', marginLeft: '8px' }} > - +
); diff --git a/packages/velaux-ui/src/components/WorkflowStudio/output-item.tsx b/packages/velaux-ui/src/components/WorkflowStudio/output-item.tsx index f5c2ed616..b4814d6c2 100644 --- a/packages/velaux-ui/src/components/WorkflowStudio/output-item.tsx +++ b/packages/velaux-ui/src/components/WorkflowStudio/output-item.tsx @@ -1,15 +1,13 @@ -import { Grid, Input, Form, Button, Icon } from '@b-design/ui'; +import { Grid, Input, Form, Button, Icon } from '@alifd/next'; import _ from 'lodash'; import React, { useState } from 'react'; +import { IoMdAdd, IoMdRemove } from 'react-icons/io'; import type { OutputItem } from '../../interface/application'; import locale from '../../utils/locale'; const { Row, Col } = Grid; -export const OutputItemForm = (props: { - value?: OutputItem; - onChange: (i: OutputItem) => void; -}) => { +export const OutputItemForm = (props: { value?: OutputItem; onChange: (i: OutputItem) => void }) => { const [name, setName] = useState(props.value ? props.value.name : ''); const [valueFrom, setValueFrom] = useState(props.value?.valueFrom || ''); const nameChange = (value: string) => { @@ -43,11 +41,7 @@ export const OutputItemForm = (props: { ); }; -export const OutputItems = (props: { - value?: OutputItem[]; - id: string; - onChange: (items: OutputItem[]) => void; -}) => { +export const OutputItems = (props: { value?: OutputItem[]; id: string; onChange: (items: OutputItem[]) => void }) => { const [items, setItems] = useState(props.value || [{ name: '', valueFrom: '' }]); const onChange = (update: OutputItem[]) => { @@ -83,7 +77,7 @@ export const OutputItems = (props: { type="secondary" style={{ justifyContent: 'center', marginLeft: '8px' }} > - +
)} @@ -100,7 +94,7 @@ export const OutputItems = (props: { type="secondary" style={{ justifyContent: 'center', marginLeft: '8px' }} > - +
); diff --git a/packages/velaux-ui/src/components/WorkflowStudio/step-form.tsx b/packages/velaux-ui/src/components/WorkflowStudio/step-form.tsx index d1d61af28..575c5f0a0 100644 --- a/packages/velaux-ui/src/components/WorkflowStudio/step-form.tsx +++ b/packages/velaux-ui/src/components/WorkflowStudio/step-form.tsx @@ -1,10 +1,9 @@ import type { Rule } from '@alifd/field'; -import { Grid, Field, Form, Input, Button, Icon } from '@b-design/ui'; +import { Grid, Field, Form, Input, Button, Icon } from '@alifd/next'; import _ from 'lodash'; import React, { Component } from 'react'; // eslint-disable-next-line @typescript-eslint/no-unused-vars - import { detailWorkflowDefinition } from '../../api/workflows'; import { UISchemaContext, WorkflowContext } from '../../context'; import Group from '../../extends/Group'; @@ -21,7 +20,7 @@ import UISchema from '../UISchema'; import { InputItems } from './input-item'; import { OutputItems } from './output-item'; - +import { BiCodeBlock, BiLaptop } from 'react-icons/bi'; type Props = { onUpdate: (data: WorkflowStepBase) => void; @@ -150,7 +149,7 @@ class StepForm extends Component {
@@ -205,9 +196,7 @@ class StepForm extends Component { )} { DependsOn}> - + @@ -228,9 +217,7 @@ class StepForm extends Component { help={
} @@ -251,9 +238,7 @@ class StepForm extends Component { help={
} @@ -269,9 +254,7 @@ class StepForm extends Component { help={
} diff --git a/packages/velaux-ui/src/components/WorkflowStudio/step-icon.tsx b/packages/velaux-ui/src/components/WorkflowStudio/step-icon.tsx index 005cb66cc..19f66984e 100644 --- a/packages/velaux-ui/src/components/WorkflowStudio/step-icon.tsx +++ b/packages/velaux-ui/src/components/WorkflowStudio/step-icon.tsx @@ -1,5 +1,6 @@ -import { Icon } from '@b-design/ui'; +import { Icon } from '@alifd/next'; import React from 'react'; +import { AiOutlineSafetyCertificate } from 'react-icons/ai'; import SvgApi from '../Icons/SvgAPI'; import SvgEp from '../Icons/SvgEp'; @@ -46,7 +47,7 @@ export const StepTypeIcon = (props: { type: string }) => { case 'webhook': return ; case 'suspend': - return ; + return ; case 'collect-service-endpoints': return ( { > {showAlias(step.name, step.alias)} - { onDelete(step.name); event.stopPropagation(); @@ -83,14 +84,14 @@ export const Step = (props: StepProps) => { event.stopPropagation(); }} > - +
); })}
- +
@@ -107,7 +108,7 @@ export const Step = (props: StepProps) => { event.stopPropagation(); }} > - +
diff --git a/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx b/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx index 8f148b67f..41dc4f2a2 100644 --- a/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx +++ b/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx @@ -1,4 +1,4 @@ -import { Balloon, Card, Dialog, Field, Form, Grid, Input } from '@b-design/ui'; +import { Balloon, Card, Dialog, Field, Form, Grid, Input } from '@alifd/next'; import _ from 'lodash'; import React from 'react'; @@ -13,8 +13,7 @@ import Translation from '../Translation'; import { StepTypeIcon } from './step-icon'; import './index.less'; -import type { Rule } from '@alifd/meet-react/lib/field'; - +import type { Rule } from '@alifd/next/lib/field'; const { Row, Col } = Grid; @@ -158,12 +157,10 @@ class TypeSelect extends React.Component { }); }; - render(): React.ReactNode { + render() { const { definitions, onClose, checkStepName, addSub } = this.props; const { selectType } = this.state; - const catalogs = buildDefinitionCatalog( - definitions?.filter((def) => !addSub || def.name != 'step-group') || [], - ); + const catalogs = buildDefinitionCatalog(definitions?.filter((def) => !addSub || def.name != 'step-group') || []); console.log(catalogs); const { init } = this.field; const checkStepNameRule = (rule: Rule, value: any, callback: (error?: string) => void) => { @@ -176,14 +173,15 @@ class TypeSelect extends React.Component { return (
{!selectType && @@ -191,12 +189,7 @@ class TypeSelect extends React.Component { .filter((c) => c.definitions.length > 0) .map((catalog) => { return ( - +
{catalog.definitions?.map((def) => { const item = ( @@ -229,10 +222,7 @@ class TypeSelect extends React.Component {
- + @@ -240,11 +230,7 @@ class TypeSelect extends React.Component { - Name} - labelTextAlign="left" - required={true} - > + Name} labelTextAlign="left" required={true}> {
- {labelTitle} + +
{labelTitle}
+
{ type={closed ? 'arrow-down' : 'arrow-up'} style={closed ? { top: '-2px' } : { top: '0' }} /> - { if (this.props.delete) { diff --git a/packages/velaux-ui/src/extends/CPUNumber/index.tsx b/packages/velaux-ui/src/extends/CPUNumber/index.tsx index 09ff7018b..b5b5f10cd 100644 --- a/packages/velaux-ui/src/extends/CPUNumber/index.tsx +++ b/packages/velaux-ui/src/extends/CPUNumber/index.tsx @@ -1,8 +1,8 @@ -import { Input } from '@b-design/ui'; +import { Input } from '@alifd/next'; import React from 'react'; type Props = { - value: any; + value?: any; id: string; onChange: (value: any) => void; disabled: boolean; @@ -29,7 +29,7 @@ class CPUNumber extends React.Component { render() { const { value, id, disabled } = this.props; - let initValue = undefined; + let initValue: number | undefined = undefined; if (value) { initValue = parseFloat(value); } diff --git a/packages/velaux-ui/src/extends/CertBase64/index.tsx b/packages/velaux-ui/src/extends/CertBase64/index.tsx index 376dcb617..46ec37e4d 100644 --- a/packages/velaux-ui/src/extends/CertBase64/index.tsx +++ b/packages/velaux-ui/src/extends/CertBase64/index.tsx @@ -1,13 +1,14 @@ -import { Upload, Button, Icon, Field } from '@b-design/ui'; +import { Upload, Button, Icon, Field } from '@alifd/next'; import { decode, encode } from 'base-64'; import React from 'react'; +import { AiOutlineCloudUpload } from 'react-icons/ai'; import { v4 as uuid } from 'uuid'; import DefinitionCode from '../../components/DefinitionCode'; import { If } from '../../components/If'; import Translation from '../../components/Translation'; type Props = { - value: any; + value?: any; id: string; onChange: (value: any) => void; disabled: boolean; @@ -77,18 +78,13 @@ class CertBase64 extends React.Component {
- +
); diff --git a/packages/velaux-ui/src/extends/ComponentPatches/component-patch.tsx b/packages/velaux-ui/src/extends/ComponentPatches/component-patch.tsx index d27c67993..3f59ebc3d 100644 --- a/packages/velaux-ui/src/extends/ComponentPatches/component-patch.tsx +++ b/packages/velaux-ui/src/extends/ComponentPatches/component-patch.tsx @@ -1,5 +1,5 @@ -import type { Rule } from '@alifd/meet-react/lib/field'; -import { Card, Form, Select, Grid, Field, Icon, Balloon, Message } from '@b-design/ui'; +import type { Rule } from '@alifd/next/lib/field'; +import { Card, Form, Select, Grid, Field, Icon, Balloon, Message } from '@alifd/next'; import classNames from 'classnames'; import { connect } from 'dva'; import React from 'react'; @@ -10,11 +10,7 @@ import { CustomSelect } from '../../components/CustomSelect'; import { If } from '../../components/If'; import Translation from '../../components/Translation'; import i18n from '../../i18n'; -import type { - ApplicationComponent, - ApplicationComponentBase, - Trait, -} from '../../interface/application'; +import type { ApplicationComponent, ApplicationComponentBase, Trait } from '../../interface/application'; import locale from '../../utils/locale'; const { Col, Row } = Grid; @@ -178,9 +174,7 @@ class ComponentPatch extends React.Component { { const label = trait.alias ? trait.alias + '(' + trait.type + ')' : trait.type; const disable = traitPatchMap.get(trait.type)?.disable; const icon = ( - ) => { event.stopPropagation(); if (disable) { this.setFormValue( 'traits', - traitPatches.filter((t) => t.type != trait.type), + traitPatches.filter((t) => t.type != trait.type) ); } else { - this.setFormValue('traits', [ - ...traitPatches, - { type: trait.type, disable: true }, - ]); + this.setFormValue('traits', [...traitPatches, { type: trait.type, disable: true }]); } }} size={14} className="danger-icon" title={disable ? i18n.t('Cancel Disable') : i18n.t('Disable')} - type="ashbin1" /> ); return ( @@ -235,9 +225,7 @@ class ComponentPatch extends React.Component { >
{label}
- - {disable ? i18n.t('Cancel Disable') : i18n.t('Disable')} - + {disable ? i18n.t('Cancel Disable') : i18n.t('Disable')}
); diff --git a/packages/velaux-ui/src/extends/ComponentPatches/index.tsx b/packages/velaux-ui/src/extends/ComponentPatches/index.tsx index aaad1427d..3c9f57bc4 100644 --- a/packages/velaux-ui/src/extends/ComponentPatches/index.tsx +++ b/packages/velaux-ui/src/extends/ComponentPatches/index.tsx @@ -1,5 +1,5 @@ -import type { Rule } from '@alifd/meet-react/lib/field'; -import { Field } from '@b-design/ui'; +import type { Rule } from '@alifd/next/lib/field'; +import { Field } from '@alifd/next'; import { connect } from 'dva'; import React from 'react'; import { AiOutlinePlus } from 'react-icons/ai'; @@ -12,7 +12,7 @@ import type { ComponentPatchData } from './component-patch'; import ComponentPatch from './component-patch'; type Props = { - value: ComponentPatchData[]; + value?: ComponentPatchData[]; id: string; onChange: (value: ComponentPatchData[]) => void; registerForm: (form: Field) => void; diff --git a/packages/velaux-ui/src/extends/ComponentSelect/index.tsx b/packages/velaux-ui/src/extends/ComponentSelect/index.tsx index e3c74cfec..311ff1a34 100644 --- a/packages/velaux-ui/src/extends/ComponentSelect/index.tsx +++ b/packages/velaux-ui/src/extends/ComponentSelect/index.tsx @@ -1,4 +1,4 @@ -import { Select } from '@b-design/ui'; +import { Select } from '@alifd/next'; import { connect } from 'dva'; import React from 'react'; @@ -8,7 +8,7 @@ import type { ApplicationComponentBase } from '../../interface/application'; import locale from '../../utils/locale'; type Props = { - value: string[]; + value?: string[]; id: string; onChange: (value: string[]) => void; disabled: boolean; diff --git a/packages/velaux-ui/src/extends/DiskNumber/index.tsx b/packages/velaux-ui/src/extends/DiskNumber/index.tsx index f5e1f15a6..215c6b795 100644 --- a/packages/velaux-ui/src/extends/DiskNumber/index.tsx +++ b/packages/velaux-ui/src/extends/DiskNumber/index.tsx @@ -1,10 +1,10 @@ -import { Input } from '@b-design/ui'; +import { Input } from '@alifd/next'; import React from 'react'; type Props = { id: string; onChange: (value: any) => void; - value: any; + value?: any; disabled: boolean; }; @@ -25,7 +25,7 @@ class DiskNumber extends React.Component { render() { const { value, id, disabled } = this.props; - let initValue = undefined; + let initValue: number | undefined = undefined; if (value) { initValue = parseInt(value.replace('Gi', ''), 10); } diff --git a/packages/velaux-ui/src/extends/Group/index.tsx b/packages/velaux-ui/src/extends/Group/index.tsx index 21d2c67bb..bf249ecbe 100644 --- a/packages/velaux-ui/src/extends/Group/index.tsx +++ b/packages/velaux-ui/src/extends/Group/index.tsx @@ -1,8 +1,7 @@ -import type { Field } from '@b-design/ui'; -import { Icon, Loading, Grid, Switch, Dialog } from '@b-design/ui'; +import type { Field } from '@alifd/next'; +import { Icon, Loading, Grid, Switch, Dialog } from '@alifd/next'; import React from 'react'; - import Translation from '../../components/Translation'; import locale from '../../utils/locale'; import './index.less'; diff --git a/packages/velaux-ui/src/extends/HelmChartSelect/index.tsx b/packages/velaux-ui/src/extends/HelmChartSelect/index.tsx index 22d753e3c..876d58e75 100644 --- a/packages/velaux-ui/src/extends/HelmChartSelect/index.tsx +++ b/packages/velaux-ui/src/extends/HelmChartSelect/index.tsx @@ -1,4 +1,4 @@ -import { Loading, Select } from '@b-design/ui'; +import { Loading, Select } from '@alifd/next'; import { connect } from 'dva'; import React, { Component } from 'react'; diff --git a/packages/velaux-ui/src/extends/HelmChartVersionSelect/index.tsx b/packages/velaux-ui/src/extends/HelmChartVersionSelect/index.tsx index cd0dc2c39..22bf62ac2 100644 --- a/packages/velaux-ui/src/extends/HelmChartVersionSelect/index.tsx +++ b/packages/velaux-ui/src/extends/HelmChartVersionSelect/index.tsx @@ -1,4 +1,4 @@ -import { Loading, Select } from '@b-design/ui'; +import { Loading, Select } from '@alifd/next'; import { connect } from 'dva'; import React, { Component } from 'react'; @@ -7,7 +7,6 @@ import i18n from '../../i18n'; import type { ChartVersion, HelmRepo } from '../../interface/repository'; import locale from '../../utils/locale'; - type Props = { value?: any; onChange: (value: any) => void; diff --git a/packages/velaux-ui/src/extends/HelmRepoSelect/index.tsx b/packages/velaux-ui/src/extends/HelmRepoSelect/index.tsx index 85d334e24..32561593d 100644 --- a/packages/velaux-ui/src/extends/HelmRepoSelect/index.tsx +++ b/packages/velaux-ui/src/extends/HelmRepoSelect/index.tsx @@ -1,4 +1,4 @@ -import { Loading, Select } from '@b-design/ui'; +import { Loading, Select } from '@alifd/next'; import { connect } from 'dva'; import _ from 'lodash'; import React, { Component } from 'react'; diff --git a/packages/velaux-ui/src/extends/HelmValues/index.tsx b/packages/velaux-ui/src/extends/HelmValues/index.tsx index 6336d2818..fc934db4a 100644 --- a/packages/velaux-ui/src/extends/HelmValues/index.tsx +++ b/packages/velaux-ui/src/extends/HelmValues/index.tsx @@ -1,4 +1,4 @@ -import { Button, Loading } from '@b-design/ui'; +import { Button, Loading } from '@alifd/next'; import { connect } from 'dva'; import YAML from 'js-yaml'; import _ from 'lodash'; @@ -12,8 +12,6 @@ import type { UIParam } from '../../interface/application'; import type { HelmRepo } from '../../interface/repository'; import KV from '../KV'; - - type Props = { value?: any; onChange: (value: any) => void; diff --git a/packages/velaux-ui/src/extends/ImageInput/index.tsx b/packages/velaux-ui/src/extends/ImageInput/index.tsx index 8ac8dd861..bbb801df8 100644 --- a/packages/velaux-ui/src/extends/ImageInput/index.tsx +++ b/packages/velaux-ui/src/extends/ImageInput/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Input, Form, Loading, Grid, Tag } from '@b-design/ui'; +import { Input, Form, Loading, Grid, Tag } from '@alifd/next'; import './index.less'; import type { InputProps } from '@alifd/next/types/input'; @@ -17,7 +17,7 @@ import ImageSecretSelect from '../ImageSecretSelect'; const { Col, Row } = Grid; interface Props extends InputProps { - value: any; + value?: any; key: string; id: string; label: string; diff --git a/packages/velaux-ui/src/extends/ImageSecretSelect/index.tsx b/packages/velaux-ui/src/extends/ImageSecretSelect/index.tsx index 98fc6f860..2c52f7370 100644 --- a/packages/velaux-ui/src/extends/ImageSecretSelect/index.tsx +++ b/packages/velaux-ui/src/extends/ImageSecretSelect/index.tsx @@ -1,4 +1,4 @@ -import { Loading, Select } from '@b-design/ui'; +import { Loading, Select } from '@alifd/next'; import { connect } from 'dva'; import React, { Component } from 'react'; diff --git a/packages/velaux-ui/src/extends/K8sObjectsCode/index.tsx b/packages/velaux-ui/src/extends/K8sObjectsCode/index.tsx index 7bbba780a..2b874ac21 100644 --- a/packages/velaux-ui/src/extends/K8sObjectsCode/index.tsx +++ b/packages/velaux-ui/src/extends/K8sObjectsCode/index.tsx @@ -1,6 +1,7 @@ -import { Upload, Button, Icon, Message, Field } from '@b-design/ui'; +import { Upload, Button, Icon, Message, Field } from '@alifd/next'; import * as yaml from 'js-yaml'; import React from 'react'; +import { AiOutlineCloudUpload } from 'react-icons/ai'; import { v4 as uuid } from 'uuid'; import DefinitionCode from '../../components/DefinitionCode'; @@ -10,7 +11,7 @@ import Translation from '../../components/Translation'; import type { KubernetesObject } from './objects'; type Props = { - value: any; + value?: any; id: string; onChange: (value: any) => void; }; @@ -122,33 +123,25 @@ class K8sObjectsCode extends React.Component { - The input data will be automatically formatted. Ensure that the input data is a valid - k8s resource YAML. + The input data will be automatically formatted. Ensure that the input data is a valid k8s resource YAML.
- +
- - Convert the kubernetes resource component to the webservice component? - + Convert the kubernetes resource component to the webservice component?
diff --git a/packages/velaux-ui/src/extends/MemoryNumber/index.tsx b/packages/velaux-ui/src/extends/MemoryNumber/index.tsx index bd78e1ffa..c589fdaad 100644 --- a/packages/velaux-ui/src/extends/MemoryNumber/index.tsx +++ b/packages/velaux-ui/src/extends/MemoryNumber/index.tsx @@ -1,10 +1,10 @@ -import { Input } from '@b-design/ui'; +import { Input } from '@alifd/next'; import React from 'react'; type Props = { id: string; onChange: (value: any) => void; - value: any; + value?: any; disabled: boolean; }; @@ -25,7 +25,7 @@ class MemoryNumber extends React.Component { render() { const { value, id, disabled } = this.props; - let initValue = undefined; + let initValue: number | undefined = undefined; if (value) { initValue = parseInt(value.replace('Mi', ''), 10); } diff --git a/packages/velaux-ui/src/extends/PolicySelect/index.tsx b/packages/velaux-ui/src/extends/PolicySelect/index.tsx index 0a25772c2..445522606 100644 --- a/packages/velaux-ui/src/extends/PolicySelect/index.tsx +++ b/packages/velaux-ui/src/extends/PolicySelect/index.tsx @@ -1,4 +1,4 @@ -import { Select } from '@b-design/ui'; +import { Select } from '@alifd/next'; import React from 'react'; import { getPolicyList } from '../../api/application'; @@ -10,7 +10,7 @@ import locale from '../../utils/locale'; type Props = { onChange: (value: any) => void; policySelectDataSource?: string[]; - value: any; + value?: any; id: string; disabled: boolean; appName?: string; diff --git a/packages/velaux-ui/src/extends/SecretKeySelect/index.tsx b/packages/velaux-ui/src/extends/SecretKeySelect/index.tsx index 368bd2fc9..0f4200f2d 100644 --- a/packages/velaux-ui/src/extends/SecretKeySelect/index.tsx +++ b/packages/velaux-ui/src/extends/SecretKeySelect/index.tsx @@ -7,7 +7,7 @@ import locale from '../../utils/locale'; type Props = { onChange: (value: any) => void; secretKeys?: string[]; - value: any; + value?: any; id: string; disabled: boolean; }; diff --git a/packages/velaux-ui/src/extends/SecretSelect/index.tsx b/packages/velaux-ui/src/extends/SecretSelect/index.tsx index cd66a3bad..50e426894 100644 --- a/packages/velaux-ui/src/extends/SecretSelect/index.tsx +++ b/packages/velaux-ui/src/extends/SecretSelect/index.tsx @@ -10,7 +10,7 @@ import locale from '../../utils/locale'; type Props = { onChange: (value: any) => void; setKeys: (keys: string[]) => void; - value: any; + value?: any; id: string; appNamespace?: string; disabled: boolean; diff --git a/packages/velaux-ui/src/extends/StepSelect/index.tsx b/packages/velaux-ui/src/extends/StepSelect/index.tsx index 496f0b105..10d1dcdd0 100644 --- a/packages/velaux-ui/src/extends/StepSelect/index.tsx +++ b/packages/velaux-ui/src/extends/StepSelect/index.tsx @@ -1,4 +1,4 @@ -import { Select } from '@b-design/ui'; +import { Select } from '@alifd/next'; import React, { useContext } from 'react'; import { WorkflowContext, WorkflowEditContext } from '../../context'; @@ -8,7 +8,7 @@ import { showAlias } from '../../utils/common'; import locale from '../../utils/locale'; type Props = { - value: string[]; + value?: string[]; id: string; onChange: (value: string[]) => void; disabled?: boolean; diff --git a/packages/velaux-ui/src/extends/Strings/index.tsx b/packages/velaux-ui/src/extends/Strings/index.tsx index 9c1dc73d7..9e46ba014 100644 --- a/packages/velaux-ui/src/extends/Strings/index.tsx +++ b/packages/velaux-ui/src/extends/Strings/index.tsx @@ -1,13 +1,14 @@ -import { Input, Button, Field, Icon } from '@b-design/ui'; +import { Input, Button, Field, Icon } from '@alifd/next'; import React from 'react'; import './index.less'; import { If } from '../../components/If'; import Translation from '../../components/Translation'; +import { AiOutlineDelete } from 'react-icons/ai'; type Props = { label?: string; - value: any; + value?: any; id: string; onChange: (value: any) => void; disabled: boolean; @@ -46,8 +47,7 @@ function InputItem(props: InputParams) { />
- { props.delete(props.id); }} @@ -125,7 +125,7 @@ class Strings extends React.Component { }, () => { this.changeValues(); - }, + } ); }; diff --git a/packages/velaux-ui/src/extends/Structs/index.tsx b/packages/velaux-ui/src/extends/Structs/index.tsx index 03abc1779..361718f8c 100644 --- a/packages/velaux-ui/src/extends/Structs/index.tsx +++ b/packages/velaux-ui/src/extends/Structs/index.tsx @@ -1,5 +1,5 @@ import type { Rule } from '@alifd/field'; -import { Form, Icon, Field, Button } from '@b-design/ui'; +import { Form, Icon, Field, Button } from '@alifd/next'; import React from 'react'; import UISchema from '../../components/UISchema'; @@ -8,6 +8,7 @@ import ArrayItemGroup from '../ArrayItemGroup'; import './index.less'; import { If } from '../../components/If'; +import { AiOutlineDelete } from 'react-icons/ai'; type Props = { _key?: string; @@ -16,7 +17,7 @@ type Props = { onChange?: (params: any) => void; registerForm: (form: Field) => void; id: string; - value: any; + value?: any; label: string; mode: 'new' | 'edit'; }; @@ -55,15 +56,7 @@ class StructItem extends React.Component { params.map((p) => { if (!p.disable && p.uiType != 'Ignore' && p.uiType != 'InnerGroup') { if ( - [ - 'Structs', - 'Strings', - 'CertBase64', - 'Group', - 'ImageInput', - 'K8sObjectsCode', - 'KV', - ].indexOf(p.uiType) > -1 + ['Structs', 'Strings', 'CertBase64', 'Group', 'ImageInput', 'K8sObjectsCode', 'KV'].indexOf(p.uiType) > -1 ) { count += 3; } else { @@ -137,8 +130,7 @@ class StructItem extends React.Component { />
- { if (this.props.delete) { this.props.delete(this.props.id); @@ -189,7 +181,7 @@ class Structs extends React.Component { const structList: any[] = []; value.map((item: any, index: number) => { const key = Date.now().toString() + index; - const valueKeys = []; + const valueKeys: string[] = []; for (const itemkey in item) { valueKeys.push(itemkey); } @@ -297,11 +289,7 @@ class Structs extends React.Component { {parameterGroupOption?.map((item) => ( - ))} diff --git a/packages/velaux-ui/src/extends/Switch/index.tsx b/packages/velaux-ui/src/extends/Switch/index.tsx index aef56ab76..94b225414 100644 --- a/packages/velaux-ui/src/extends/Switch/index.tsx +++ b/packages/velaux-ui/src/extends/Switch/index.tsx @@ -1,4 +1,4 @@ -import { Switch } from '@b-design/ui'; +import { Switch } from '@alifd/next'; import React from 'react'; type Props = { diff --git a/packages/velaux-ui/src/index.tsx b/packages/velaux-ui/src/index.tsx index 61c2d38b3..bf9ff24ea 100644 --- a/packages/velaux-ui/src/index.tsx +++ b/packages/velaux-ui/src/index.tsx @@ -1,19 +1,18 @@ import dva from 'dva'; import createLoading from 'dva-loading'; -import { createBrowserHistory } from 'history'; import RouterView from './router'; import { createModel } from './store'; +import { locationService } from './services/LocationService'; import './i18n'; -import '@b-design/ui/dist/index.css'; -import './common.less'; -const app: any = dva({ - history: createBrowserHistory(), +const app = dva({ + history: locationService.getHistory(), }); app.use(createLoading()); createModel(app); app.router(RouterView); app.start('#root'); -export default app._store; + +export default app; diff --git a/packages/velaux-ui/src/layout/Application/components/AddAndEditEnvBind/index.tsx b/packages/velaux-ui/src/layout/Application/components/AddAndEditEnvBind/index.tsx index e94a9025b..148ee5201 100644 --- a/packages/velaux-ui/src/layout/Application/components/AddAndEditEnvBind/index.tsx +++ b/packages/velaux-ui/src/layout/Application/components/AddAndEditEnvBind/index.tsx @@ -1,7 +1,6 @@ -import { Dialog, Field, Form, Grid, Message, Select, Button } from '@b-design/ui'; +import { Dialog, Field, Form, Grid, Message, Select, Button } from '@alifd/next'; import { connect } from 'dva'; import React, { Component } from 'react'; -import { withTranslation } from 'react-i18next'; import type { Dispatch } from 'redux'; import { @@ -186,11 +185,11 @@ class EnvBindPlanDialog extends Component { return ( { } } -export default withTranslation()(EnvBindPlanDialog); +export default EnvBindPlanDialog; diff --git a/packages/velaux-ui/src/layout/Application/components/DeployConfig/index.tsx b/packages/velaux-ui/src/layout/Application/components/DeployConfig/index.tsx index 82ab5df5a..8365cd3bc 100644 --- a/packages/velaux-ui/src/layout/Application/components/DeployConfig/index.tsx +++ b/packages/velaux-ui/src/layout/Application/components/DeployConfig/index.tsx @@ -1,6 +1,5 @@ -import { Button, Dialog, Message, Radio } from '@b-design/ui'; +import { Button, Dialog, Message, Radio } from '@alifd/next'; import React, { Component } from 'react'; -import { withTranslation } from 'react-i18next'; import { dryRunApplication } from '../../../../api/application'; import { ApplicationDryRun } from '../../../../components/ApplicationDryRun'; @@ -106,7 +105,7 @@ class DeployConfigDialog extends Component { onClose={() => { this.setState({ showDryRunResult: false }); }} - title="Dry run result" + title={i18n.t('DryRun Result').toString()} dryRun={dryRunResult} /> ); @@ -130,20 +129,20 @@ class DeployConfigDialog extends Component { Select Workflow} footer={ -
+
-
@@ -199,4 +198,4 @@ class DeployConfigDialog extends Component { } } -export default withTranslation()(DeployConfigDialog); +export default DeployConfigDialog; diff --git a/packages/velaux-ui/src/layout/Application/components/EnvTabs/index.tsx b/packages/velaux-ui/src/layout/Application/components/EnvTabs/index.tsx index 315987083..d821fdefe 100644 --- a/packages/velaux-ui/src/layout/Application/components/EnvTabs/index.tsx +++ b/packages/velaux-ui/src/layout/Application/components/EnvTabs/index.tsx @@ -11,8 +11,8 @@ import AddAndEditEnvBind from '../AddAndEditEnvBind'; import { Link } from 'dva/router'; import classNames from 'classnames'; -import { Balloon, Icon } from '@b-design/ui'; - +import { Balloon, Icon } from '@alifd/next'; +import { IoMdAdd } from 'react-icons/io'; type Props = { activeKey: string; @@ -115,7 +115,7 @@ class TabsContent extends Component { this.setState({ visibleEnvPlan: true }); }} > - + diff --git a/packages/velaux-ui/src/layout/Application/components/Header/index.tsx b/packages/velaux-ui/src/layout/Application/components/Header/index.tsx index 018e4f056..31b87004c 100644 --- a/packages/velaux-ui/src/layout/Application/components/Header/index.tsx +++ b/packages/velaux-ui/src/layout/Application/components/Header/index.tsx @@ -1,9 +1,10 @@ -import { Grid, Breadcrumb, Button, Message, Dialog, Icon } from '@b-design/ui'; +import { Grid, Button, Message, Dialog, Icon } from '@alifd/next'; import classNames from 'classnames'; import { connect } from 'dva'; import { Link, routerRedux } from 'dva/router'; import i18n from 'i18next'; import React, { Component } from 'react'; +import { Breadcrumb } from '../../../../components/Breadcrumb'; import { deployApplication } from '../../../../api/application'; import { If } from '../../../../components/If'; @@ -21,6 +22,7 @@ import type { APIError } from '../../../../utils/errors'; import { handleError } from '../../../../utils/errors'; import locale from '../../../../utils/locale'; import DeployConfig from '../DeployConfig'; +import { showAlias } from 'src/utils/common'; const { Row, Col } = Grid; @@ -76,7 +78,7 @@ class ApplicationHeader extends Component { triggerType: 'web', force: force || false, }, - true, + true ) .then((re: ApplicationDeployResponse) => { if (re) { @@ -85,8 +87,8 @@ class ApplicationHeader extends Component { if (re.record && re.record.name && dispatch) { dispatch( routerRedux.push( - `/applications/${applicationDetail.name}/envbinding/${re.envName}/workflow/records/${re.record.name}`, - ), + `/applications/${applicationDetail.name}/envbinding/${re.envName}/workflow/records/${re.record.name}` + ) ); } } @@ -94,7 +96,7 @@ class ApplicationHeader extends Component { .catch((err: APIError) => { if (err.BusinessCode === 10004) { Dialog.confirm({ - content: i18n.t('Workflow is executing. Do you want to force a restart?'), + content: i18n.t('Workflow is executing. Do you want to force a restart?').toString(), onOk: () => { this.onDeploy(workflowName, true); }, @@ -119,8 +121,7 @@ class ApplicationHeader extends Component { const activeKey = currentPath.substring(currentPath.lastIndexOf('/') + 1); let item = {`app-${activeKey}`}; const projectName = (applicationDetail && applicationDetail.project?.name) || ''; - const sourceOfTrust = - applicationDetail?.labels && applicationDetail?.labels['app.oam.dev/source-of-truth']; + const sourceOfTrust = applicationDetail?.labels && applicationDetail?.labels['app.oam.dev/source-of-truth']; const envPage = currentPath.startsWith(`/applications/${appName}/envbinding/`); if (envPage) { item = {`Environment`}; @@ -128,48 +129,36 @@ class ApplicationHeader extends Component { return (
- - - - - - - {projectName} - - - - - Applications - - - - - - {applicationDetail && (applicationDetail.alias || applicationDetail.name)} - - - - {item} - + + - + ; }} /> - + { + return ; + }} + /> ; }} /> - + { + return ; + }} + /> { + return ; + }} /> { + return ; + }} + /> + { + return ; + }} + /> + { + return ; + }} + /> + { + return ; + }} + /> + { + return ; + }} + /> + { + return ; + }} + /> + { + return ; + }} /> - - - - - - - + { + return ; + }} + /> { - - - - - - Definitions - - - {matchDefinitionKey} - - {definitionName} - +