├── .husky ├── .gitignore ├── pre-commit └── commit-msg ├── docs ├── components │ ├── icon │ │ └── index.md │ ├── tree │ │ └── index.md │ └── button │ │ └── index.md ├── vite.config.ts ├── docs.d.ts ├── .vitepress │ ├── theme │ │ ├── register-components.ts │ │ ├── index.ts │ │ └── demo-block.scss │ └── config.ts ├── package.json ├── index.md └── markdown-examples.md ├── packages ├── theme-chalk │ ├── src │ │ ├── base.scss │ │ ├── fonts │ │ │ ├── iconfonts.ttf │ │ │ └── iconfonts.woff │ │ ├── index.scss │ │ ├── mixins │ │ │ ├── config.scss │ │ │ ├── utils.scss │ │ │ ├── _col.scss │ │ │ ├── _var.scss │ │ │ ├── function.scss │ │ │ ├── _button.scss │ │ │ └── mixins.scss │ │ ├── common │ │ │ ├── popup.scss │ │ │ ├── transition.scss │ │ │ └── var.scss │ │ ├── var.scss │ │ ├── tree.scss │ │ ├── button.scss │ │ ├── icon.scss │ │ └── index.css │ └── package.json ├── components │ ├── base │ │ └── style │ │ │ └── index.ts │ ├── index.ts │ ├── button │ │ ├── style │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── src │ │ │ ├── button-type.ts │ │ │ └── button.tsx │ │ └── __tests__ │ │ │ └── button.test.ts │ ├── components.ts │ ├── tree │ │ ├── index.ts │ │ ├── hooks │ │ │ └── useTree.ts │ │ ├── utils.ts │ │ └── src │ │ │ ├── tree-type.ts │ │ │ └── tree.tsx │ ├── install.ts │ ├── package.json │ └── icon │ │ └── src │ │ └── icon.tsx └── utils │ ├── package.json │ └── index.ts ├── pnpm-workspace.yaml ├── commitlint.config.js ├── .vscode └── extensions.json ├── publish.sh ├── play ├── main.ts ├── vite-env.d.ts ├── assets │ └── vue.svg ├── App.vue ├── components │ ├── HelloWorld.vue │ └── Test.tsx └── style.css ├── tsconfig.node.json ├── index.html ├── .gitignore ├── README.md ├── .github └── workflows │ └── ci.yml ├── vite.config.ts ├── .eslintrc.js ├── .prettierrc.js ├── tsconfig.json ├── public └── vite.svg ├── package.json └── scripts └── build.js /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /docs/components/icon/index.md: -------------------------------------------------------------------------------- 1 | # 图标-icon -------------------------------------------------------------------------------- /packages/theme-chalk/src/base.scss: -------------------------------------------------------------------------------- 1 | @use "var.scss" -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' 3 | - 'play' 4 | - 'docs' 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /packages/components/base/style/index.ts: -------------------------------------------------------------------------------- 1 | import "@pc-vue3-ui/theme-chalk/src/base.scss" 2 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["@commitlint/config-conventional"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./button" 2 | 3 | export { default } from "./install" 4 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/iconfonts.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGXXMM/vue3-ui/HEAD/packages/theme-chalk/src/fonts/iconfonts.ttf -------------------------------------------------------------------------------- /packages/theme-chalk/src/fonts/iconfonts.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGXXMM/vue3-ui/HEAD/packages/theme-chalk/src/fonts/iconfonts.woff -------------------------------------------------------------------------------- /packages/theme-chalk/src/index.scss: -------------------------------------------------------------------------------- 1 | @use './base.scss'; 2 | // component styles 3 | @use './button.scss'; 4 | @use './tree.scss'; 5 | @use './icon.scss' -------------------------------------------------------------------------------- /docs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite" 2 | import vueJsx from "@vitejs/plugin-vue-jsx" 3 | 4 | export default defineConfig({ 5 | plugins: [vueJsx()] 6 | }) 7 | -------------------------------------------------------------------------------- /packages/components/button/style/index.ts: -------------------------------------------------------------------------------- 1 | import "@pc-vue3-ui/components/base/style" 2 | import "@pc-vue3-ui/theme-chalk/src/button.scss" 3 | import "@pc-vue3-ui/theme-chalk/src/icon.scss" 4 | -------------------------------------------------------------------------------- /packages/components/components.ts: -------------------------------------------------------------------------------- 1 | import Button from "./button/src/button" 2 | import Tree from "./tree/src/tree" 3 | import Icon from "./icon/src/icon" 4 | 5 | export const components = [Button, Tree, Icon] 6 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/config.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'u' !default; 2 | $common-separator: '-' !default; 3 | $element-separator: '__' !default; 4 | $modifier-separator: '--' !default; 5 | $state-prefix: 'is-' !default; 6 | -------------------------------------------------------------------------------- /publish.sh: -------------------------------------------------------------------------------- 1 | npm config set registry https://registry.npmjs.org 2 | npm login # 登录，如果有 OTP, 邮箱会接收到验证码，输入即可 3 | # 登录成功后，短时间内会保存状态，可以直接 4 | npm publish ./build # 可能会提示已存在，换个版本号再发 5 | # 还原镜像地址 6 | npm config set registry https://registry.npmmirror.com -------------------------------------------------------------------------------- /play/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue" 2 | import "./style.css" 3 | import App from "./App.vue" 4 | import Vue3UI from "@pc-vue3-ui/components" 5 | import "@pc-vue3-ui/theme-chalk/src/index.css" 6 | 7 | createApp(App).use(Vue3UI).mount("#app") 8 | -------------------------------------------------------------------------------- /docs/docs.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import type { DefineComponent } from "vue" 3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pc-vue3-ui/utils", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.ts", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /packages/theme-chalk/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pc-vue3-ui/theme-chalk", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "sass ./src/index.scss ./src/index.css --no-source-map" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/register-components.ts: -------------------------------------------------------------------------------- 1 | import Demo from 'vitepress-theme-demoblock/components/Demo.vue' 2 | import DemoBlock from 'vitepress-theme-demoblock/components/DemoBlock.vue' 3 | import type {App} from 'vue' 4 | 5 | export function registerComponents(app: App) { 6 | app.component('Demo', Demo) 7 | app.component('DemoBlock', DemoBlock) 8 | } -------------------------------------------------------------------------------- /packages/components/tree/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from "vue" 2 | import { Vue3UIOption, installComponent } from "@pc-vue3-ui/utils" 3 | import Tree from "./src/tree" 4 | 5 | // 具名导出 6 | export { Tree } 7 | 8 | // 导出插件 9 | export default { 10 | install(app: App, options?: Vue3UIOption) { 11 | installComponent(app, Tree, options) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /play/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /** @format */ 2 | 3 | /// 4 | 5 | declare module "*.vue" { 6 | import type { DefineComponent } from "vue" 7 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 8 | const component: DefineComponent<{}, {}, any> 9 | export default component 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/tree/hooks/useTree.ts: -------------------------------------------------------------------------------- 1 | import { Ref, unref, ref } from "vue" 2 | import { ITreeNode } from "../src/tree-type" 3 | import { generateInnerTree } from "../utils" 4 | 5 | export function useTree(node: Ref | ITreeNode[]) { 6 | const innerData = ref(generateInnerTree(unref(node))) 7 | return { 8 | innerData 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/button/index.ts: -------------------------------------------------------------------------------- 1 | import { App } from "vue" 2 | import { Vue3UIOption, installComponent } from "@pc-vue3-ui/utils" 3 | import Button from "./src/button" 4 | 5 | // 具名导出 6 | export { Button } 7 | 8 | // 导出插件 9 | export default { 10 | install(app: App, options?: Vue3UIOption) { 11 | installComponent(app, Button, options) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/install.ts: -------------------------------------------------------------------------------- 1 | import { App } from "vue" 2 | import { Vue3UIOption, installComponent } from "@pc-vue3-ui/utils" 3 | import { components } from "./components" 4 | 5 | const Vue3UI = { 6 | install(app: App, options?: Vue3UIOption) { 7 | components.forEach(component => { 8 | installComponent(app, component, options) 9 | }) 10 | } 11 | } 12 | 13 | export default Vue3UI 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | # eslint 27 | .eslintcache 28 | 29 | # Docs 30 | docs/.vitepress/cache -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## pc-vue3-ui 简介 2 | 基于Vue3框架的UI组件库，适用于PC端 3 | 4 | ## 技术栈 5 | - Vue 3 6 | - TypeScript 7 | - Vite 8 | 9 | ## 项目运行 10 | ``` 11 | // 安装依赖 12 | pnpm install 13 | 14 | // 本地运行 15 | pnpm run dev 16 | 17 | // 本地文档预览 18 | pnpm run docs:dev 19 | 20 | // 编译打包 21 | pnpm run build 22 | ``` 23 | 24 | ## 功能组件 25 | - [x] Button组件 26 | - 类型type：primary、success、info、warning、danger 27 | - 尺寸size：small、default、large 28 | - 禁用disable：true、false -------------------------------------------------------------------------------- /packages/components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pc-vue3-ui/components", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.ts", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@pc-vue3-ui/theme-chalk": "workspace:^", 14 | "@pc-vue3-ui/utils": "workspace:^" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import Theme from 'vitepress/theme' 2 | import './demo-block.scss' 3 | import "@pc-vue3-ui/theme-chalk/src/index.scss" 4 | import Vue3UI from '@pc-vue3-ui/components' 5 | import { registerComponents } from './register-components' 6 | import type {App} from 'vue' 7 | 8 | export default { 9 | ...Theme, 10 | // 扩展应用程序实例 11 | enhanceApp({app}: {app:App}) { 12 | // 注册组件 13 | registerComponents(app) 14 | app.use(Vue3UI) 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /play/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: 'CI' 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | build: 10 | # 指定托管运行器（操作系统） 11 | runs-on: ubuntu-latest 12 | steps: 13 | # 下载代码 14 | - uses: actions/checkout@v3 15 | # 下载安装 pnpm 16 | - uses: pnpm/action-setup@v2 17 | with: 18 | version: 8.5.0 19 | # 下载安装 Node.js 20 | - uses: actions/setup-node@v3 21 | with: 22 | node-version: 16.14.0 23 | cache: 'pnpm' 24 | - run: pnpm install 25 | - run: pnpm run build -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { defineConfig } from "vite" 4 | import vue from "@vitejs/plugin-vue" 5 | import vueJsx from "@vitejs/plugin-vue-jsx" 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [vue(), vueJsx({})], 10 | test: { 11 | // enable jest-like global test APIs 12 | globals: true, 13 | // simulate DOM with happy-dom 14 | environment: "happy-dom", 15 | // support tsx 16 | transformMode: { 17 | web: [/.[tj]sx$/] 18 | } 19 | } 20 | }) 21 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vitepress dev .", 8 | "build": "vitepress build .", 9 | "preview": "vitepress preview ." 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@vitejs/plugin-vue-jsx": "^3.0.1", 16 | "vite": "^4.3.9", 17 | "vitepress": "1.0.0-alpha.4", 18 | "vitepress-theme-demoblock": "^1.4.2" 19 | }, 20 | "dependencies": { 21 | "@pc-vue3-ui/components": "workspace:^" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true 5 | }, 6 | extends: [ 7 | // "plugin:@typescript-eslint/recommended", 8 | "plugin:vue/vue3-recommended", 9 | "plugin:prettier/recommended" 10 | ], 11 | parserOptions: { 12 | ecmaVersion: "latest", 13 | parser: "@typescript-eslint/parser", 14 | sourceType: "module", 15 | jsx: true, 16 | tsx: true 17 | }, 18 | plugins: ["vue", "@typescript-eslint"], 19 | rules: { 20 | "vue/multi-word-component-names": "off", 21 | "@typescript-eslint/no-explicit-any": "off", 22 | "@typescript-eslint/no-var-requires": "off", 23 | "@typescript-eslint/ban-ts-comment": "off" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | # https://vitepress.dev/reference/default-theme-home-page 3 | layout: home 4 | 5 | hero: 6 | name: "Vue3 UI" 7 | text: "A UI Framework base on Vue3" 8 | # tagline: A UI Framework base on Vue3 9 | actions: 10 | - theme: brand 11 | text: 使用文档 12 | link: /components/button/ 13 | - theme: alt 14 | text: API 15 | link: /api-examples 16 | 17 | features: 18 | - title: Feature A 19 | details: Lorem ipsum dolor sit amet, consectetur adipiscing elit 20 | - title: Feature B 21 | details: Lorem ipsum dolor sit amet, consectetur adipiscing elit 22 | - title: Feature C 23 | details: Lorem ipsum dolor sit amet, consectetur adipiscing elit 24 | --- 25 | 26 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // printWidth: 80, 3 | tabWidth: 2, 4 | // useTabs: false, 5 | semi: false, // 未尾分号, default: true 6 | singleQuote: false, // 单引号 default: false 7 | // quoteProps: 'as-needed', 8 | // jsxSingleQuote: false, 9 | trailingComma: "none", // 未尾分号 default: es5 all | none | es5 10 | // bracketSpacing: true, 11 | // bracketSameLine: false, 12 | // jsxBracketSameLine: false, 13 | arrowParens: "avoid", // default: always 14 | // insertPragma: false, 15 | // requirePragma: false, 16 | proseWrap: "never", 17 | // htmlWhitespaceSensitivity: 'css', 18 | // vueIndentScriptAndStyle: false, // .vue 缩进 19 | endOfLine: "auto", // default lf 20 | }; 21 | -------------------------------------------------------------------------------- /packages/components/tree/utils.ts: -------------------------------------------------------------------------------- 1 | import { ITreeNode, IInnerTreeNode } from "./src/tree-type" 2 | 3 | export function generateInnerTree( 4 | tree = [] as ITreeNode[], 5 | level = 0, // 当前数据所在层级 6 | parentId = null as number | null 7 | ): IInnerTreeNode[] { 8 | level++ 9 | return tree.reduce((prev, cur) => { 10 | const o = { ...cur } as IInnerTreeNode 11 | o.level = level 12 | o.parentId = parentId 13 | // 先将数据拍平（树形 -> 扁平） 14 | if (o.children) { 15 | const parentId = o.id 16 | const childrens = generateInnerTree(o.children, level, parentId) 17 | delete o.children 18 | return prev.concat(o, childrens) 19 | } else { 20 | // 叶子节点 21 | o.isLeaf = true 22 | return prev.concat(o) 23 | } 24 | }, [] as IInnerTreeNode[]) 25 | } 26 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/utils.scss: -------------------------------------------------------------------------------- 1 | @mixin utils-clearfix { 2 | $selector: &; 3 | 4 | @at-root { 5 | #{$selector}::before, 6 | #{$selector}::after { 7 | display: table; 8 | content: ''; 9 | } 10 | #{$selector}::after { 11 | clear: both; 12 | } 13 | } 14 | } 15 | 16 | @mixin utils-vertical-center { 17 | $selector: &; 18 | 19 | @at-root { 20 | #{$selector}::after { 21 | display: inline-block; 22 | content: ''; 23 | height: 100%; 24 | vertical-align: middle; 25 | } 26 | } 27 | } 28 | 29 | @mixin utils-ellipsis { 30 | overflow: hidden; 31 | text-overflow: ellipsis; 32 | white-space: nowrap; 33 | } 34 | 35 | @mixin utils-inline-flex-center { 36 | display: inline-flex; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | -------------------------------------------------------------------------------- /packages/components/button/src/button-type.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPropTypes, PropType } from "vue" 2 | export type buttonType = 3 | | "default" 4 | | "primary" 5 | | "success" 6 | | "info" 7 | | "warning" 8 | | "danger" 9 | 10 | export type buttonSize = "small" | "default" | "large" 11 | 12 | export const buttonProps = { 13 | type: { 14 | type: String as PropType, 15 | default: "default" 16 | }, 17 | size: { 18 | type: String as PropType, 19 | default: "default" 20 | }, 21 | disabled: { 22 | type: Boolean, 23 | default: false 24 | }, 25 | tag: { 26 | type: String as PropType, 27 | default: "button" 28 | }, 29 | onClick: { 30 | type: Function 31 | } 32 | } 33 | 34 | export type ButtonProps = ExtractPropTypes 35 | -------------------------------------------------------------------------------- /packages/components/tree/src/tree-type.ts: -------------------------------------------------------------------------------- 1 | import { ExtractPropTypes, PropType } from "vue" 2 | 3 | // 树形数据 4 | export interface ITreeNode { 5 | label: string 6 | id: number 7 | children?: ITreeNode[] // 表示树形结构 8 | /**操作状态 */ 9 | selected?: boolean // 是否选中 10 | checked?: boolean // 是否勾选 11 | expanded?: boolean // 是否展开/折叠：true展开、false 折叠 12 | /**禁用操作开关 */ 13 | disableSelect?: boolean 14 | disableChecked?: boolean 15 | disableExpanded?: boolean 16 | } 17 | 18 | // 拍平数据 19 | export interface IInnerTreeNode extends ITreeNode { 20 | parentId?: number | null // 父节点ID 21 | level: number // 当前数据层级（解决嵌套关系） 22 | isLeaf?: boolean // 是否是叶子节点 23 | } 24 | 25 | export const treeProps = { 26 | data: { 27 | type: Object as PropType>, 28 | required: true 29 | } 30 | } as const 31 | 32 | export type TreeProps = ExtractPropTypes 33 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "types": ["vitest/globals"], 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "preserve", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": [ 25 | "*/**/*.ts", 26 | "*/**/*.d.ts", 27 | "*/**/*.tsx", 28 | "*/**/*.vue", 29 | "docs/.vitepress/theme/*.ts" 30 | ], 31 | "references": [{ "path": "./tsconfig.node.json" }] 32 | } 33 | -------------------------------------------------------------------------------- /packages/utils/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from "vue" 2 | 3 | const CLASS_PREFIX = "u" 4 | const GLOBAL_CONFIG_NAME = "_Vue3UI" 5 | export interface Vue3UIOption { 6 | classPrefix?: string 7 | componentPrefix?: string 8 | } 9 | 10 | // 注册插件 11 | export const installComponent = ( 12 | app: App, 13 | component: any, 14 | options?: Vue3UIOption 15 | ) => { 16 | setGlobalConfig(app, options) 17 | app.component(component.name, component) 18 | } 19 | 20 | // 注入全局app属性 21 | export const setGlobalConfig = ( 22 | app: App, 23 | options: Vue3UIOption = { classPrefix: CLASS_PREFIX } 24 | ) => { 25 | app.config.globalProperties[GLOBAL_CONFIG_NAME] = { 26 | ...(app.config.globalProperties[GLOBAL_CONFIG_NAME] ?? {}), 27 | classPrefix: options.classPrefix 28 | } 29 | } 30 | 31 | // 拼装组件className 32 | export const getComponentCls = (componentName: string): string => 33 | `${CLASS_PREFIX}-${componentName}` 34 | -------------------------------------------------------------------------------- /packages/components/button/__tests__/button.test.ts: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/vue" 2 | import Button from "../src/button" 3 | 4 | // Test button 渲染是否正常 5 | test("should work", () => { 6 | const { getByRole } = render(Button) 7 | getByRole("button") 8 | }) 9 | 10 | // Test slots 11 | test("default slots should work", () => { 12 | const { getByText } = render(Button) 13 | getByText("按钮") 14 | }) 15 | 16 | test("slots should work", () => { 17 | const { getByText } = render(Button, { 18 | slots: { 19 | default() { 20 | return "confirm" 21 | } 22 | } 23 | }) 24 | getByText("confirm") 25 | }) 26 | 27 | // Test props 28 | test("props type should work", () => { 29 | const { getByRole } = render(Button, { 30 | props: { 31 | type: "primary" 32 | } 33 | }) 34 | const button = getByRole("button") 35 | expect(button.classList.contains("u-button--primary")).toBe(true) 36 | }) 37 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/common/popup.scss: -------------------------------------------------------------------------------- 1 | @use './var' as *; 2 | @use '../mixins/mixins' as *; 3 | @use '../mixins/var' as *; 4 | 5 | :root { 6 | @include set-component-css-var('popup', $popup); 7 | } 8 | 9 | .v-modal-enter { 10 | animation: v-modal-in getCssVar('transition-duration-fast') ease; 11 | } 12 | 13 | .v-modal-leave { 14 | animation: v-modal-out getCssVar('transition-duration-fast') ease forwards; 15 | } 16 | 17 | @keyframes v-modal-in { 18 | 0% { 19 | opacity: 0; 20 | } 21 | 100% { 22 | } 23 | } 24 | 25 | @keyframes v-modal-out { 26 | 0% { 27 | } 28 | 100% { 29 | opacity: 0; 30 | } 31 | } 32 | 33 | .v-modal { 34 | position: fixed; 35 | left: 0; 36 | top: 0; 37 | width: 100%; 38 | height: 100%; 39 | opacity: getCssVar('popup-modal-opacity'); 40 | background: getCssVar('popup-modal-bg-color'); 41 | } 42 | 43 | @include b(popup-parent) { 44 | @include m(hidden) { 45 | overflow: hidden; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /play/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 20 | 21 | 35 | -------------------------------------------------------------------------------- /play/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | 34 | 39 | -------------------------------------------------------------------------------- /packages/components/button/src/button.tsx: -------------------------------------------------------------------------------- 1 | import { computed, defineComponent, toRefs } from "vue" 2 | import { buttonProps, ButtonProps } from "./button-type" 3 | import { getComponentCls } from "@pc-vue3-ui/utils" 4 | 5 | export default defineComponent({ 6 | name: "UButton", 7 | props: buttonProps, 8 | setup(props: ButtonProps, { slots }) { 9 | const { type, size, disabled } = toRefs(props) 10 | // class处理 11 | const prefixCls = getComponentCls("button") 12 | const classes = computed(() => [ 13 | prefixCls, 14 | `${prefixCls}--${type.value}`, 15 | `${prefixCls}--${size.value}`, 16 | disabled.value ? "is-disabled" : "" 17 | ]) 18 | return () => { 19 | const { tag: Component } = props 20 | const defaultSlot = slots.default ? slots.default() : "按钮" 21 | return ( 22 | 23 | {defaultSlot} 24 | 25 | ) 26 | } 27 | } 28 | }) 29 | -------------------------------------------------------------------------------- /docs/components/tree/index.md: -------------------------------------------------------------------------------- 1 | # 树形控件-Tree 2 | 3 | ## 基础用法 4 | 5 | ::: demo 使用样例 6 | ```vue 7 | 12 | 46 | ``` 47 | ::: 48 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/_col.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | @use '../common/var' as *; 4 | @use './mixins' as *; 5 | 6 | @mixin col-size($size) { 7 | @include res($size) { 8 | .#{$namespace}-col-#{$size}-0 { 9 | display: none; 10 | @include when(guttered) { 11 | display: none; 12 | } 13 | } 14 | @for $i from 0 through 24 { 15 | .#{$namespace}-col-#{$size}-#{$i} { 16 | @if $i != 0 { 17 | display: block; 18 | } 19 | max-width: (math.div(1, 24) * $i * 100) * 1%; 20 | flex: 0 0 (math.div(1, 24) * $i * 100) * 1%; 21 | } 22 | 23 | .#{$namespace}-col-#{$size}-offset-#{$i} { 24 | margin-left: (math.div(1, 24) * $i * 100) * 1%; 25 | } 26 | 27 | .#{$namespace}-col-#{$size}-pull-#{$i} { 28 | position: relative; 29 | right: (math.div(1, 24) * $i * 100) * 1%; 30 | } 31 | 32 | .#{$namespace}-col-#{$size}-push-#{$i} { 33 | position: relative; 34 | left: (math.div(1, 24) * $i * 100) * 1%; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /docs/.vitepress/config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitepress' 2 | // import vueJsx from '@vitejs/plugin-vue-jsx' 3 | // https://vitepress.dev/reference/site-config 4 | export default defineConfig({ 5 | title: "Vue3 UI", 6 | description: "A UI Framework base on Vue3", 7 | themeConfig: { 8 | // https://vitepress.dev/reference/default-theme-config 9 | nav: [ 10 | { text: "Home", link: "/" }, 11 | { text: "Docs", link: "/components/button/" } 12 | ], 13 | 14 | sidebar: [ 15 | { 16 | text: "通用", 17 | items: [ 18 | { text: "按钮 Button", link: "/components/button/" }, 19 | { text: "树形控件 Tree", link: "/components/tree/" }, 20 | { text: "图标 Icon", link: "/components/icon/" } 21 | ] 22 | } 23 | ], 24 | 25 | socialLinks: [ 26 | { icon: "github", link: "https://github.com/GGXXMM/vue3-ui" } 27 | ] 28 | }, 29 | markdown: { 30 | config(md) { 31 | // 这里可以使用markdown-it插件 32 | const { demoBlockPlugin } = require('vitepress-theme-demoblock') 33 | md.use(demoBlockPlugin, { 34 | cssPreprocessor: 'scss' 35 | }) 36 | } 37 | } 38 | }) 39 | -------------------------------------------------------------------------------- /packages/components/icon/src/icon.tsx: -------------------------------------------------------------------------------- 1 | import { PropType, computed, defineComponent } from "vue" 2 | export default defineComponent({ 3 | name: "UIcon", 4 | props: { 5 | name: { 6 | type: String, 7 | default: "" 8 | }, 9 | size: { 10 | type: [String, Number] as PropType, 11 | default: "inherit" 12 | }, 13 | color: { 14 | type: String, 15 | default: "inherit" 16 | } 17 | }, 18 | setup(props, { attrs }) { 19 | // 获取尺寸 20 | const iconSize = computed(() => { 21 | return typeof props.size === "number" ? `${props.size}px` : props.size 22 | }) 23 | const imgIcon = ( 24 | 32 | ) 33 | const fontIcon = ( 34 | 41 | ) 42 | const icon = /http|https/.test(props.name) ? imgIcon : fontIcon 43 | return () => icon 44 | } 45 | }) 46 | -------------------------------------------------------------------------------- /docs/components/button/index.md: -------------------------------------------------------------------------------- 1 | # 按钮 - Button 2 | 3 | ## 基本用法 4 | ::: demo 使用`type`、`plain`、`circle`等属性来设置样式 5 | ```vue 6 | 16 | ``` 17 | ::: 18 | 19 | ## Button Attributes 20 | 21 | | Name | Description | Type | Default | 22 | | ----------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------- | 23 | | size | button size | `'large'\| 'default'\| 'small'` | — | 24 | | type | button type |`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'\` | — | 25 | -------------------------------------------------------------------------------- /docs/markdown-examples.md: -------------------------------------------------------------------------------- 1 | # Markdown Extension Examples 2 | 3 | This page demonstrates some of the built-in markdown extensions provided by VitePress. 4 | 5 | ## Syntax Highlighting 6 | 7 | VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting: 8 | 9 | **Input** 10 | 11 | ```` 12 | ```js{4} 13 | export default { 14 | data () { 15 | return { 16 | msg: 'Highlighted!' 17 | } 18 | } 19 | } 20 | ``` 21 | ```` 22 | 23 | **Output** 24 | 25 | ```js{4} 26 | export default { 27 | data () { 28 | return { 29 | msg: 'Highlighted!' 30 | } 31 | } 32 | } 33 | ``` 34 | 35 | ## Custom Containers 36 | 37 | **Input** 38 | 39 | ```md 40 | ::: info 41 | This is an info box. 42 | ::: 43 | 44 | ::: tip 45 | This is a tip. 46 | ::: 47 | 48 | ::: warning 49 | This is a warning. 50 | ::: 51 | 52 | ::: danger 53 | This is a dangerous warning. 54 | ::: 55 | 56 | ::: details 57 | This is a details block. 58 | ::: 59 | ``` 60 | 61 | **Output** 62 | 63 | ::: info 64 | This is an info box. 65 | ::: 66 | 67 | ::: tip 68 | This is a tip. 69 | ::: 70 | 71 | ::: warning 72 | This is a warning. 73 | ::: 74 | 75 | ::: danger 76 | This is a dangerous warning. 77 | ::: 78 | 79 | ::: details 80 | This is a details block. 81 | ::: 82 | 83 | ## More 84 | 85 | Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown). 86 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /play/components/Test.tsx: -------------------------------------------------------------------------------- 1 | import { ref, defineComponent, withModifiers } from "vue" 2 | // 1. 函数组件 3 | // export default () =>
test
4 | 5 | // 2. defineComponent 6 | // export default defineComponent({ 7 | // render() { 8 | // return
test
9 | // } 10 | // }) 11 | 12 | // 3. defineComponent({setup(){}}) 13 | // 摒弃this 14 | // vue独特概念：修饰符、slots、directive、emit 15 | export default defineComponent({ 16 | name: "Test", 17 | directives: { 18 | focus: { 19 | mounted(el) { 20 | el.focus() 21 | } 22 | } 23 | }, 24 | emits: ["click"], 25 | setup(props, { slots, emit }) { 26 | console.log(props) 27 | const list = ref(["a", "b", "c"]) 28 | const count = ref(0) 29 | const inc = () => { 30 | count.value++ 31 | emit("click") 32 | } 33 | return () => { 34 | return ( 35 |
36 | 37 | {/* v-for循环 */} 38 |
    39 | {list.value.map(str => ( 40 |
  • {str}
    • 41 | ))} 42 |
43 | {/* 修饰符：等价于 v-on:click.self */} 44 |
test: {count.value}
45 | {/* 默认插槽 */} 46 |
{slots.default ? slots.default() : "default slots"}
47 | {/* 具名插槽 */} 48 |
{slots.title ? slots.title() : "title slots"}
49 |
50 | ) 51 | } 52 | } 53 | }) 54 | -------------------------------------------------------------------------------- /play/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | .card { 59 | padding: 2em; 60 | } 61 | 62 | #app { 63 | max-width: 1280px; 64 | margin: 0 auto; 65 | padding: 2rem; 66 | text-align: center; 67 | } 68 | 69 | @media (prefers-color-scheme: light) { 70 | :root { 71 | color: #213547; 72 | background-color: #ffffff; 73 | } 74 | a:hover { 75 | color: #747bff; 76 | } 77 | button { 78 | background-color: #f9f9f9; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pc-vue3-ui", 3 | "private": true, 4 | "version": "0.0.1-beta.1", 5 | "workspaces": [ 6 | "packages/*", 7 | "play", 8 | "docs" 9 | ], 10 | "scripts": { 11 | "dev": "vite", 12 | "build": "vue-tsc && vite build", 13 | "build:component": "node ./scripts/build.js", 14 | "build:style": "pnpm run -C packages/theme-chalk build", 15 | "preview": "vite preview", 16 | "lint": "eslint . --ext .js,.ts,.tsx,.vue --fix", 17 | "prepare": "husky install", 18 | "docs:dev": "pnpm run -C docs dev", 19 | "docs:build": "pnpm run -C docs build", 20 | "docs:preview": "pnpm run -C docs preview", 21 | "test": "vitest", 22 | "commit": "git add . && git cz" 23 | }, 24 | "dependencies": { 25 | "@pc-vue3-ui/components": "workspace:^", 26 | "@pc-vue3-ui/theme-chalk": "workspace:^", 27 | "vue": "^3.3.4" 28 | }, 29 | "devDependencies": { 30 | "@commitlint/cli": "^17.6.6", 31 | "@commitlint/config-conventional": "^17.6.6", 32 | "@testing-library/vue": "^7.0.0", 33 | "@typescript-eslint/eslint-plugin": "^5.60.0", 34 | "@typescript-eslint/parser": "^5.60.0", 35 | "@vitejs/plugin-vue": "^4.1.0", 36 | "@vitejs/plugin-vue-jsx": "^3.0.1", 37 | "@vitest/ui": "^0.33.0", 38 | "cz-conventional-changelog": "^3.3.0", 39 | "eslint": "^8.43.0", 40 | "eslint-config-prettier": "^8.8.0", 41 | "eslint-plugin-prettier": "^4.2.1", 42 | "eslint-plugin-vue": "^9.15.1", 43 | "fs-extra": "^11.1.1", 44 | "happy-dom": "^9.20.3", 45 | "husky": "^8.0.3", 46 | "lint-staged": "^13.2.2", 47 | "prettier": "^2.8.8", 48 | "sass": "^1.63.6", 49 | "typescript": "^5.0.2", 50 | "vite": "^4.3.9", 51 | "vitest": "^0.32.2", 52 | "vue-tsc": "^1.4.2" 53 | }, 54 | "config": { 55 | "commitizen": { 56 | "path": "node_modules/cz-conventional-changelog" 57 | } 58 | }, 59 | "lint-staged": { 60 | "*.{js,ts,tsx}": "eslint --cache --fix" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/_var.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | @use 'config'; 4 | @use 'function' as *; 5 | @use '../common/var' as *; 6 | 7 | // set css var value, because we need translate value to string 8 | // for example: 9 | // @include set-css-var-value(('color', 'primary'), red); 10 | // --el-color-primary: red; 11 | @mixin set-css-var-value($name, $value) { 12 | #{joinVarName($name)}: #{$value}; 13 | } 14 | 15 | // @include set-css-var-type('color', 'primary', $map); 16 | // --el-color-primary: #{map.get($map, 'primary')}; 17 | @mixin set-css-var-type($name, $type, $variables) { 18 | #{getCssVarName($name, $type)}: #{map.get($variables, $type)}; 19 | } 20 | 21 | @mixin set-css-color-type($colors, $type) { 22 | @include set-css-var-value(('color', $type), map.get($colors, $type, 'base')); 23 | 24 | @each $i in (3, 5, 7, 8, 9) { 25 | @include set-css-var-value( 26 | ('color', $type, 'light', $i), 27 | map.get($colors, $type, 'light-#{$i}') 28 | ); 29 | } 30 | 31 | @include set-css-var-value( 32 | ('color', $type, 'dark-2'), 33 | map.get($colors, $type, 'dark-2') 34 | ); 35 | } 36 | 37 | // set all css var for component by map 38 | @mixin set-component-css-var($name, $variables) { 39 | @each $attribute, $value in $variables { 40 | @if $attribute == 'default' { 41 | #{getCssVarName($name)}: #{$value}; 42 | } @else { 43 | #{getCssVarName($name, $attribute)}: #{$value}; 44 | } 45 | } 46 | } 47 | 48 | @mixin set-css-color-rgb($type) { 49 | $color: map.get($colors, $type, 'base'); 50 | @include set-css-var-value( 51 | ('color', $type, 'rgb'), 52 | #{red($color), 53 | green($color), 54 | blue($color)} 55 | ); 56 | } 57 | 58 | // generate css var from existing css var 59 | // for example: 60 | // @include css-var-from-global(('button', 'text-color'), ('color', $type)) 61 | // --el-button-text-color: var(--el-color-#{$type}); 62 | @mixin css-var-from-global($var, $gVar) { 63 | $varName: joinVarName($var); 64 | $gVarName: joinVarName($gVar); 65 | #{$varName}: var(#{$gVarName}); 66 | } 67 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/function.scss: -------------------------------------------------------------------------------- 1 | @use 'config'; 2 | 3 | // BEM support Func 4 | @function selectorToString($selector) { 5 | $selector: inspect($selector); 6 | $selector: str-slice($selector, 2, -2); 7 | @return $selector; 8 | } 9 | 10 | @function containsModifier($selector) { 11 | $selector: selectorToString($selector); 12 | 13 | @if str-index($selector, config.$modifier-separator) { 14 | @return true; 15 | } @else { 16 | @return false; 17 | } 18 | } 19 | 20 | @function containWhenFlag($selector) { 21 | $selector: selectorToString($selector); 22 | 23 | @if str-index($selector, '.' + config.$state-prefix) { 24 | @return true; 25 | } @else { 26 | @return false; 27 | } 28 | } 29 | 30 | @function containPseudoClass($selector) { 31 | $selector: selectorToString($selector); 32 | 33 | @if str-index($selector, ':') { 34 | @return true; 35 | } @else { 36 | @return false; 37 | } 38 | } 39 | 40 | @function hitAllSpecialNestRule($selector) { 41 | @return containsModifier($selector) or containWhenFlag($selector) or 42 | containPseudoClass($selector); 43 | } 44 | 45 | // join var name 46 | // joinVarName(('button', 'text-color')) => '--el-button-text-color' 47 | @function joinVarName($list) { 48 | $name: '--' + config.$namespace; 49 | @each $item in $list { 50 | @if $item != '' { 51 | $name: $name + '-' + $item; 52 | } 53 | } 54 | @return $name; 55 | } 56 | 57 | // getCssVarName('button', 'text-color') => '--el-button-text-color' 58 | @function getCssVarName($args...) { 59 | @return joinVarName($args); 60 | } 61 | 62 | // getCssVar('button', 'text-color') => var(--el-button-text-color) 63 | @function getCssVar($args...) { 64 | @return var(#{joinVarName($args)}); 65 | } 66 | 67 | // getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red) 68 | @function getCssVarWithDefault($args, $default) { 69 | @return var(#{joinVarName($args)}, #{$default}); 70 | } 71 | 72 | // bem('block', 'element', 'modifier') => 'el-block__element--modifier' 73 | @function bem($block, $element: '', $modifier: '') { 74 | $name: config.$namespace + config.$common-separator + $block; 75 | 76 | @if $element != '' { 77 | $name: $name + config.$element-separator + $element; 78 | } 79 | 80 | @if $modifier != '' { 81 | $name: $name + config.$modifier-separator + $modifier; 82 | } 83 | 84 | // @debug $name; 85 | @return $name; 86 | } 87 | -------------------------------------------------------------------------------- /packages/components/tree/src/tree.tsx: -------------------------------------------------------------------------------- 1 | import { computed, defineComponent } from "vue" 2 | import UIcon from "../../icon/src/icon" 3 | import { IInnerTreeNode, TreeProps, treeProps } from "./tree-type" 4 | import { useTree } from "../hooks/useTree" 5 | 6 | export default defineComponent({ 7 | name: "UTree", 8 | props: treeProps, 9 | setup(props: TreeProps, { slots }) { 10 | const { innerData } = useTree(props.data) 11 | // 展开/折叠 12 | const toggleNode = (node: IInnerTreeNode) => { 13 | console.log("toggle:", node) 14 | const cur = innerData.value.find(item => item.id === node.id) 15 | if (cur) { 16 | cur.expanded = !cur.expanded 17 | } 18 | } 19 | // 获取展开列表数据（排除掉折叠子节点） 20 | const expandData = computed(() => { 21 | let excludeNodes: IInnerTreeNode[] = [] 22 | let result = [] 23 | for (let item of innerData.value) { 24 | // 判断当前数据是否在排除列表 25 | if (excludeNodes.includes(item)) { 26 | continue 27 | } 28 | // 当前节点处于折叠状态，它的子节点要被排除 29 | if (item.expanded !== true) { 30 | excludeNodes = getChildren(item) 31 | } 32 | result.push(item) 33 | } 34 | return result 35 | }) 36 | const getChildren = (node: IInnerTreeNode) => { 37 | const startIndex = innerData.value.findIndex(item => item.id === node.id) 38 | let result = [] 39 | // 找到node节点后面所有子节点（level更大的） 40 | for ( 41 | let i = startIndex + 1; 42 | i < innerData.value.length && innerData.value[i].level > node.level; 43 | i++ 44 | ) { 45 | result.push(innerData.value[i]) 46 | } 47 | return result 48 | } 49 | return () => { 50 | return ( 51 |
52 | {expandData.value.map(item => ( 53 |
58 | {/* 1.折叠图标 */} 59 | {/* 判断是否是叶子节点，非叶子节点才有折叠图标 */} 60 | {item.isLeaf ? ( 61 | 62 | ) : ( 63 | toggleNode(item)}> 64 | 69 | 70 | )} 71 | {/* 2.标签 */} 72 | {item.label} 73 |
74 | ))} 75 |
76 | ) 77 | } 78 | } 79 | }) 80 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/var.scss: -------------------------------------------------------------------------------- 1 | // CSS3 var 2 | @use 'common/var' as *; 3 | @use 'mixins/var' as *; 4 | @use 'mixins/mixins' as *; 5 | 6 | // for better performance do not dynamically change the root variable if you really 7 | // do not need that, since this could introduce recalculation overhead for rendering. 8 | // https://lisilinhart.info/posts/css-variables-performance/ 9 | 10 | // common 11 | :root { 12 | @include set-css-var-value('color-white', $color-white); 13 | @include set-css-var-value('color-black', $color-black); 14 | 15 | // get rgb 16 | @each $type in (primary, success, warning, danger, error, info) { 17 | @include set-css-color-rgb($type); 18 | } 19 | 20 | // Typography 21 | @include set-component-css-var('font-size', $font-size); 22 | @include set-component-css-var('font-family', $font-family); 23 | 24 | @include set-css-var-value('font-weight-primary', 500); 25 | @include set-css-var-value('font-line-height-primary', 24px); 26 | 27 | // z-index --el-index-#{$type} 28 | @include set-component-css-var('index', $z-index); 29 | 30 | // --el-border-radius-#{$type} 31 | @include set-component-css-var('border-radius', $border-radius); 32 | 33 | // Transition 34 | // refer to this website to get the bezier motion function detail 35 | // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter) 36 | @include set-component-css-var('transition-duration', $transition-duration); 37 | 38 | @include set-component-css-var('transition-function', $transition-function); 39 | @include set-component-css-var('transition', $transition); 40 | 41 | // common component size 42 | @include set-component-css-var('component-size', $common-component-size); 43 | } 44 | 45 | // for light 46 | :root { 47 | color-scheme: light; 48 | 49 | @include set-css-var-value('color-white', $color-white); 50 | @include set-css-var-value('color-black', $color-black); 51 | 52 | // --el-color-#{$type} 53 | // --el-color-#{$type}-light-{$i} 54 | @each $type in (primary, success, warning, danger, error, info) { 55 | @include set-css-color-type($colors, $type); 56 | } 57 | 58 | // color-scheme 59 | // Background --el-bg-color-#{$type} 60 | @include set-component-css-var('bg-color', $bg-color); 61 | // --el-text-color-#{$type} 62 | @include set-component-css-var('text-color', $text-color); 63 | // --el-border-color-#{$type} 64 | @include set-component-css-var('border-color', $border-color); 65 | // Fill --el-fill-color-#{$type} 66 | @include set-component-css-var('fill-color', $fill-color); 67 | 68 | // Box-shadow 69 | // --el-box-shadow-#{$type} 70 | @include set-component-css-var('box-shadow', $box-shadow); 71 | // Disable base 72 | @include set-component-css-var('disabled', $disabled); 73 | 74 | // overlay & mask 75 | @include set-component-css-var('overlay-color', $overlay-color); 76 | @include set-component-css-var('mask-color', $mask-color); 77 | 78 | // Border 79 | @include set-css-var-value('border-width', $border-width); 80 | @include set-css-var-value('border-style', $border-style); 81 | @include set-css-var-value('border-color-hover', $border-color-hover); 82 | @include set-css-var-value( 83 | 'border', 84 | getCssVar('border-width') getCssVar('border-style') 85 | getCssVar('border-color') 86 | ); 87 | 88 | // Svg 89 | @include css-var-from-global('svg-monochrome-grey', 'border-color'); 90 | } 91 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/tree.scss: -------------------------------------------------------------------------------- 1 | @use 'mixins/mixins' as *; 2 | @use 'mixins/var' as *; 3 | @use 'common/var' as *; 4 | @use 'common/transition'; 5 | 6 | @include b(tree) { 7 | @include set-component-css-var('tree', $tree); 8 | } 9 | 10 | @include b(tree) { 11 | position: relative; 12 | cursor: default; 13 | background: getCssVar('fill-color', 'blank'); 14 | color: getCssVar('tree-text-color'); 15 | font-size: getCssVar('font-size', 'base'); 16 | 17 | @include e(empty-block) { 18 | position: relative; 19 | min-height: 60px; 20 | text-align: center; 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | @include e(empty-text) { 26 | position: absolute; 27 | left: 50%; 28 | top: 50%; 29 | transform: translate(-50%, -50%); 30 | color: getCssVar('text-color', 'secondary'); 31 | font-size: getCssVar('font-size', 'base'); 32 | } 33 | 34 | @include e(drop-indicator) { 35 | position: absolute; 36 | left: 0; 37 | right: 0; 38 | height: 1px; 39 | background-color: getCssVar('color-primary'); 40 | } 41 | } 42 | 43 | @include b(tree-node) { 44 | white-space: nowrap; 45 | outline: none; 46 | &:focus { 47 | /* focus */ 48 | > .#{$namespace}-tree-node__content { 49 | background-color: getCssVar('tree-node-hover-bg-color'); 50 | } 51 | } 52 | 53 | @include when(drop-inner) { 54 | > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label { 55 | background-color: getCssVar('color-primary'); 56 | color: #fff; 57 | } 58 | } 59 | 60 | @include e(content) { 61 | display: flex; 62 | align-items: center; 63 | height: 26px; 64 | cursor: pointer; 65 | 66 | & > .#{$namespace}-tree-node__expand-icon { 67 | padding: 6px; 68 | box-sizing: content-box; 69 | } 70 | & > label.#{$namespace}-checkbox { 71 | margin-right: 8px; 72 | } 73 | &:hover { 74 | background-color: getCssVar('tree-node-hover-bg-color'); 75 | } 76 | 77 | .#{$namespace}-tree.is-dragging & { 78 | cursor: move; 79 | 80 | & * { 81 | pointer-events: none; 82 | } 83 | } 84 | 85 | .#{$namespace}-tree.is-dragging.is-drop-not-allow & { 86 | cursor: not-allowed; 87 | } 88 | } 89 | 90 | @include e(expand-icon) { 91 | cursor: pointer; 92 | color: getCssVar('tree-expand-icon-color'); 93 | font-size: 12px; 94 | 95 | transform: rotate(0deg); 96 | transition: transform getCssVar('transition-duration') ease-in-out; 97 | 98 | &.expanded { 99 | transform: rotate(90deg); 100 | } 101 | 102 | &.is-leaf { 103 | color: transparent; 104 | cursor: default; 105 | } 106 | &.is-hidden { 107 | visibility: hidden; 108 | } 109 | } 110 | 111 | @include e(loading-icon) { 112 | margin-right: 8px; 113 | font-size: getCssVar('font-size', 'base'); 114 | color: getCssVar('tree-expand-icon-color'); 115 | } 116 | 117 | & > .#{$namespace}-tree-node__children { 118 | overflow: hidden; 119 | background-color: transparent; 120 | } 121 | 122 | &.is-expanded > .#{$namespace}-tree-node__children { 123 | display: block; 124 | } 125 | } 126 | 127 | .#{$namespace}-tree--highlight-current 128 | .#{$namespace}-tree-node.is-current 129 | > .#{$namespace}-tree-node__content { 130 | background-color: getCssVar('color-primary-light-9'); 131 | } 132 | -------------------------------------------------------------------------------- /scripts/build.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | const fs = require("fs") 3 | const fsExtra = require("fs-extra") 4 | // 引入 vite 的 build 方法，进行编译构建 5 | const { defineConfig, build } = require("vite") 6 | const vue = require("@vitejs/plugin-vue") 7 | const vueJSX = require("@vitejs/plugin-vue-jsx") 8 | const version = require("../package.json").version 9 | 10 | // 基础配置 11 | const baseConfig = defineConfig({ 12 | publicDir: false, 13 | plugins: [vue(), vueJSX()] 14 | }) 15 | const rollupOptions = defineConfig({ 16 | // that shouldn't be bundled 17 | external: ["vue"], 18 | globals: { 19 | vue: "Vue" 20 | } 21 | }) 22 | // 组件库全局入口 23 | const compontsDir = path.resolve(__dirname, "../packages/components") 24 | // 输出目录 25 | const outputDir = path.resolve(__dirname, "../build") 26 | // 生成 package.json 27 | const createPackageJson = name => { 28 | const fileStr = `{ 29 | "name": "${name ? name : "pc-vue3-ui"}", 30 | "version": "${version}", 31 | "description": "Vue3组件库，beta版本仅用来测试发布", 32 | "main": "${name ? "index.umd.js" : "pc-vue3-ui.umd.js"}", 33 | "module":"${name ? "index.mjs" : "pc-vue3-ui.mjs"}", 34 | "repository": { 35 | "type": "git", 36 | "url": "git+https://github.com/GGXXMM/vue3-ui.git" 37 | }, 38 | "keywords": ["vue3", "组件库", "UI"], 39 | "author": "guoxinming", 40 | "license": "ISC" 41 | } 42 | ` 43 | // 单个组件 or 全量 44 | const filePath = path.resolve( 45 | outputDir, 46 | name ? `${name}/package.json` : `package.json` 47 | ) 48 | 49 | fsExtra.outputFile(filePath, fileStr, "utf-8") 50 | } 51 | 52 | /** 单组件按需构建 */ 53 | const buildSingle = async name => { 54 | await build( 55 | defineConfig({ 56 | ...baseConfig, 57 | build: { 58 | lib: { 59 | entry: path.resolve(compontsDir, name), 60 | name: "index", 61 | fileName: "index", 62 | formats: ["es", "umd"] 63 | }, 64 | rollupOptions, 65 | outDir: path.resolve(outputDir, name) 66 | } 67 | }) 68 | ) 69 | 70 | createPackageJson(name) 71 | } 72 | 73 | /** 全量构建 */ 74 | const buildAll = async () => { 75 | await build( 76 | defineConfig({ 77 | ...baseConfig, 78 | build: { 79 | lib: { 80 | entry: compontsDir, 81 | name: "pc-vue3-ui", 82 | fileName: "pc-vue3-ui", 83 | formats: ["es", "umd"] 84 | }, 85 | rollupOptions, 86 | outDir: outputDir 87 | } 88 | }) 89 | ) 90 | 91 | createPackageJson() 92 | } 93 | 94 | // copy文件 95 | // README.md 96 | // 样式 index.css 97 | const copyFiles = () => { 98 | const markdown = fs.createReadStream(path.resolve(__dirname, "../README.md")) 99 | const style = fs.createReadStream( 100 | path.resolve(__dirname, "../packages/theme-chalk/index.css") 101 | ) 102 | markdown.pipe( 103 | fs.createWriteStream(path.resolve(__dirname, "../build/README.md")) 104 | ) 105 | style.pipe( 106 | fs.createWriteStream(path.resolve(__dirname, "../build/index.css")) 107 | ) 108 | } 109 | 110 | const buildLib = async () => { 111 | await buildAll() 112 | 113 | // 按需打包 114 | fsExtra 115 | .readdirSync(compontsDir) 116 | .filter(name => { 117 | // 获取组件的目录 118 | const componentDir = path.resolve(compontsDir, name) 119 | const isDir = fsExtra.lstatSync(componentDir).isDirectory() 120 | return isDir && fsExtra.readdirSync(componentDir).includes("index.ts") 121 | }) 122 | .forEach(async name => { 123 | await buildSingle(name) 124 | }) 125 | 126 | copyFiles() 127 | } 128 | 129 | buildLib() 130 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/_button.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins/var' as *; 2 | @use '../mixins/function' as *; 3 | @use '../common/var' as *; 4 | 5 | @mixin button-plain($type) { 6 | $button-color-types: ( 7 | '': ( 8 | 'text-color': ( 9 | 'color', 10 | $type, 11 | ), 12 | 'bg-color': ( 13 | 'color', 14 | $type, 15 | 'light-9', 16 | ), 17 | 'border-color': ( 18 | 'color', 19 | $type, 20 | 'light-5', 21 | ), 22 | ), 23 | 'hover': ( 24 | 'text-color': ( 25 | 'color', 26 | 'white', 27 | ), 28 | 'bg-color': ( 29 | 'color', 30 | $type, 31 | ), 32 | 'border-color': ( 33 | 'color', 34 | $type, 35 | ), 36 | ), 37 | 'active': ( 38 | 'text-color': ( 39 | 'color', 40 | 'white', 41 | ), 42 | ), 43 | ); 44 | 45 | @each $type, $typeMap in $button-color-types { 46 | @each $typeColor, $list in $typeMap { 47 | @include css-var-from-global(('button', $type, $typeColor), $list); 48 | } 49 | } 50 | 51 | &.is-disabled { 52 | &, 53 | &:hover, 54 | &:focus, 55 | &:active { 56 | color: getCssVar('color', $type, 'light-5'); 57 | background-color: getCssVar('color', $type, 'light-9'); 58 | border-color: getCssVar('color', $type, 'light-8'); 59 | } 60 | } 61 | } 62 | 63 | @mixin button-variant($type) { 64 | $button-color-types: ( 65 | '': ( 66 | 'text-color': ( 67 | 'color', 68 | 'white', 69 | ), 70 | 'bg-color': ( 71 | 'color', 72 | $type, 73 | ), 74 | 'border-color': ( 75 | 'color', 76 | $type, 77 | ), 78 | 'outline-color': ( 79 | 'color', 80 | $type, 81 | 'light-5', 82 | ), 83 | 'active-color': ( 84 | 'color', 85 | $type, 86 | 'dark-2', 87 | ), 88 | ), 89 | 'hover': ( 90 | 'text-color': ( 91 | 'color', 92 | 'white', 93 | ), 94 | 'link-text-color': ( 95 | 'color', 96 | $type, 97 | 'light-5', 98 | ), 99 | 'bg-color': ( 100 | 'color', 101 | $type, 102 | 'light-3', 103 | ), 104 | 'border-color': ( 105 | 'color', 106 | $type, 107 | 'light-3', 108 | ), 109 | ), 110 | 'active': ( 111 | 'bg-color': ( 112 | 'color', 113 | $type, 114 | 'dark-2', 115 | ), 116 | 'border-color': ( 117 | 'color', 118 | $type, 119 | 'dark-2', 120 | ), 121 | ), 122 | 'disabled': ( 123 | 'text-color': ( 124 | 'color', 125 | 'white', 126 | ), 127 | 'bg-color': ( 128 | 'color', 129 | $type, 130 | 'light-5', 131 | ), 132 | 'border-color': ( 133 | 'color', 134 | $type, 135 | 'light-5', 136 | ), 137 | ), 138 | ); 139 | 140 | @each $type, $typeMap in $button-color-types { 141 | @each $typeColor, $list in $typeMap { 142 | @include css-var-from-global(('button', $type, $typeColor), $list); 143 | } 144 | } 145 | 146 | &.is-plain, 147 | &.is-text, 148 | &.is-link { 149 | @include button-plain($type); 150 | } 151 | } 152 | 153 | @mixin button-size( 154 | $padding-vertical, 155 | $padding-horizontal, 156 | $font-size, 157 | $border-radius 158 | ) { 159 | padding: $padding-vertical $padding-horizontal; 160 | font-size: $font-size; 161 | border-radius: $border-radius; 162 | &.is-round { 163 | padding: $padding-vertical $padding-horizontal; 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/common/transition.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins/config' as *; 2 | @use '../mixins/mixins' as *; 3 | 4 | .fade-in-linear-enter-active, 5 | .fade-in-linear-leave-active { 6 | transition: getCssVar('transition-fade', 'linear'); 7 | } 8 | 9 | .fade-in-linear-enter-from, 10 | .fade-in-linear-leave-to { 11 | opacity: 0; 12 | } 13 | 14 | .#{$namespace}-fade-in-linear-enter-active, 15 | .#{$namespace}-fade-in-linear-leave-active { 16 | transition: getCssVar('transition-fade', 'linear'); 17 | } 18 | .#{$namespace}-fade-in-linear-enter-from, 19 | .#{$namespace}-fade-in-linear-leave-to { 20 | opacity: 0; 21 | } 22 | 23 | .#{$namespace}-fade-in-enter-active, 24 | .#{$namespace}-fade-in-leave-active { 25 | transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1); 26 | } 27 | .#{$namespace}-fade-in-enter-from, 28 | .#{$namespace}-fade-in-leave-active { 29 | opacity: 0; 30 | } 31 | 32 | .#{$namespace}-zoom-in-center-enter-active, 33 | .#{$namespace}-zoom-in-center-leave-active { 34 | transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1); 35 | } 36 | .#{$namespace}-zoom-in-center-enter-from, 37 | .#{$namespace}-zoom-in-center-leave-active { 38 | opacity: 0; 39 | transform: scaleX(0); 40 | } 41 | 42 | .#{$namespace}-zoom-in-top-enter-active, 43 | .#{$namespace}-zoom-in-top-leave-active { 44 | opacity: 1; 45 | transform: scaleY(1); 46 | transition: getCssVar('transition-md-fade'); 47 | transform-origin: center top; 48 | 49 | &[data-popper-placement^='top'] { 50 | transform-origin: center bottom; 51 | } 52 | } 53 | .#{$namespace}-zoom-in-top-enter-from, 54 | .#{$namespace}-zoom-in-top-leave-active { 55 | opacity: 0; 56 | transform: scaleY(0); 57 | } 58 | 59 | .#{$namespace}-zoom-in-bottom-enter-active, 60 | .#{$namespace}-zoom-in-bottom-leave-active { 61 | opacity: 1; 62 | transform: scaleY(1); 63 | transition: getCssVar('transition-md-fade'); 64 | transform-origin: center bottom; 65 | } 66 | .#{$namespace}-zoom-in-bottom-enter-from, 67 | .#{$namespace}-zoom-in-bottom-leave-active { 68 | opacity: 0; 69 | transform: scaleY(0); 70 | } 71 | 72 | .#{$namespace}-zoom-in-left-enter-active, 73 | .#{$namespace}-zoom-in-left-leave-active { 74 | opacity: 1; 75 | transform: scale(1, 1); 76 | transition: getCssVar('transition-md-fade'); 77 | transform-origin: top left; 78 | } 79 | .#{$namespace}-zoom-in-left-enter-from, 80 | .#{$namespace}-zoom-in-left-leave-active { 81 | opacity: 0; 82 | transform: scale(0.45, 0.45); 83 | } 84 | 85 | .collapse-transition { 86 | transition: getCssVar('transition-duration') height ease-in-out, 87 | getCssVar('transition-duration') padding-top ease-in-out, 88 | getCssVar('transition-duration') padding-bottom ease-in-out; 89 | } 90 | 91 | .#{$namespace}-collapse-transition-leave-active, 92 | .#{$namespace}-collapse-transition-enter-active { 93 | transition: getCssVar('transition-duration') max-height ease-in-out, 94 | getCssVar('transition-duration') padding-top ease-in-out, 95 | getCssVar('transition-duration') padding-bottom ease-in-out; 96 | } 97 | 98 | .horizontal-collapse-transition { 99 | transition: getCssVar('transition-duration') width ease-in-out, 100 | getCssVar('transition-duration') padding-left ease-in-out, 101 | getCssVar('transition-duration') padding-right ease-in-out; 102 | } 103 | 104 | .#{$namespace}-list-enter-active, 105 | .#{$namespace}-list-leave-active { 106 | transition: all 1s; 107 | } 108 | 109 | .#{$namespace}-list-enter-from, 110 | .#{$namespace}-list-leave-to { 111 | opacity: 0; 112 | transform: translateY(-30px); 113 | } 114 | 115 | .#{$namespace}-list-leave-active { 116 | position: absolute !important; 117 | } 118 | 119 | .#{$namespace}-opacity-transition { 120 | transition: opacity getCssVar('transition-duration') 121 | cubic-bezier(0.55, 0, 0.1, 1); 122 | } 123 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/mixins/mixins.scss: -------------------------------------------------------------------------------- 1 | @use 'function' as *; 2 | @use '../common/var' as *; 3 | // forward mixins 4 | @forward 'config'; 5 | @forward 'function'; 6 | @forward '_var'; 7 | @use 'config' as *; 8 | 9 | // Break-points 10 | @mixin res($key, $map: $breakpoints) { 11 | // loop breakpoint Map, return if present 12 | @if map-has-key($map, $key) { 13 | @media only screen and #{unquote(map-get($map, $key))} { 14 | @content; 15 | } 16 | } @else { 17 | @warn "Undefined points: `#{$map}`"; 18 | } 19 | } 20 | 21 | // Scrollbar 22 | @mixin scroll-bar { 23 | $scrollbar-thumb-background: getCssVar('text-color', 'disabled'); 24 | $scrollbar-track-background: getCssVar('fill-color', 'blank'); 25 | 26 | &::-webkit-scrollbar { 27 | z-index: 11; 28 | width: 6px; 29 | 30 | &:horizontal { 31 | height: 6px; 32 | } 33 | 34 | &-thumb { 35 | border-radius: 5px; 36 | width: 6px; 37 | background: $scrollbar-thumb-background; 38 | } 39 | 40 | &-corner { 41 | background: $scrollbar-track-background; 42 | } 43 | 44 | &-track { 45 | background: $scrollbar-track-background; 46 | 47 | &-piece { 48 | background: $scrollbar-track-background; 49 | width: 6px; 50 | } 51 | } 52 | } 53 | } 54 | 55 | // BEM 56 | @mixin b($block) { 57 | $B: $namespace + $common-separator + $block !global; 58 | 59 | .#{$B} { 60 | @content; 61 | } 62 | } 63 | 64 | @mixin e($element) { 65 | $E: $element !global; 66 | $selector: &; 67 | $currentSelector: ''; 68 | @each $unit in $element { 69 | $currentSelector: #{$currentSelector + 70 | '.' + 71 | $B + 72 | $element-separator + 73 | $unit + 74 | ','}; 75 | } 76 | 77 | @if hitAllSpecialNestRule($selector) { 78 | @at-root { 79 | #{$selector} { 80 | #{$currentSelector} { 81 | @content; 82 | } 83 | } 84 | } 85 | } @else { 86 | @at-root { 87 | #{$currentSelector} { 88 | @content; 89 | } 90 | } 91 | } 92 | } 93 | 94 | @mixin m($modifier) { 95 | $selector: &; 96 | $currentSelector: ''; 97 | @each $unit in $modifier { 98 | $currentSelector: #{$currentSelector + 99 | $selector + 100 | $modifier-separator + 101 | $unit + 102 | ','}; 103 | } 104 | 105 | @at-root { 106 | #{$currentSelector} { 107 | @content; 108 | } 109 | } 110 | } 111 | 112 | @mixin configurable-m($modifier, $E-flag: false) { 113 | $selector: &; 114 | $interpolation: ''; 115 | 116 | @if $E-flag { 117 | $interpolation: $element-separator + $E-flag; 118 | } 119 | 120 | @at-root { 121 | #{$selector} { 122 | .#{$B + $interpolation + $modifier-separator + $modifier} { 123 | @content; 124 | } 125 | } 126 | } 127 | } 128 | 129 | @mixin spec-selector( 130 | $specSelector: '', 131 | $element: $E, 132 | $modifier: false, 133 | $block: $B 134 | ) { 135 | $modifierCombo: ''; 136 | 137 | @if $modifier { 138 | $modifierCombo: $modifier-separator + $modifier; 139 | } 140 | 141 | @at-root { 142 | #{&}#{$specSelector}.#{$block 143 | + $element-separator 144 | + $element 145 | + $modifierCombo} { 146 | @content; 147 | } 148 | } 149 | } 150 | 151 | @mixin meb($modifier: false, $element: $E, $block: $B) { 152 | $selector: &; 153 | $modifierCombo: ''; 154 | 155 | @if $modifier { 156 | $modifierCombo: $modifier-separator + $modifier; 157 | } 158 | 159 | @at-root { 160 | #{$selector} { 161 | .#{$block + $element-separator + $element + $modifierCombo} { 162 | @content; 163 | } 164 | } 165 | } 166 | } 167 | 168 | @mixin when($state) { 169 | @at-root { 170 | &.#{$state-prefix + $state} { 171 | @content; 172 | } 173 | } 174 | } 175 | 176 | @mixin extend-rule($name) { 177 | @extend #{'%shared-' + $name} !optional; 178 | } 179 | 180 | @mixin share-rule($name) { 181 | $rule-name: '%shared-' + $name; 182 | 183 | @at-root #{$rule-name} { 184 | @content; 185 | } 186 | } 187 | 188 | @mixin pseudo($pseudo) { 189 | @at-root #{&}#{':#{$pseudo}'} { 190 | @content; 191 | } 192 | } 193 | 194 | @mixin picker-popper($background, $border, $box-shadow) { 195 | &.#{$namespace}-popper { 196 | background: $background; 197 | border: $border; 198 | box-shadow: $box-shadow; 199 | 200 | .#{$namespace}-popper__arrow { 201 | &::before { 202 | border: $border; 203 | } 204 | } 205 | 206 | @each $placement, 207 | $adjacency 208 | in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') 209 | { 210 | &[data-popper-placement^='#{$placement}'] { 211 | .#{$namespace}-popper__arrow::before { 212 | border-#{$placement}-color: transparent; 213 | border-#{$adjacency}-color: transparent; 214 | } 215 | } 216 | } 217 | } 218 | } 219 | 220 | // dark 221 | @mixin dark($block) { 222 | html.dark { 223 | @include b($block) { 224 | @content; 225 | } 226 | } 227 | } 228 | 229 | @mixin inset-input-border($color, $important: false) { 230 | @if $important == true { 231 | box-shadow: 0 0 0 1px $color inset !important; 232 | } @else { 233 | box-shadow: 0 0 0 1px $color inset; 234 | } 235 | } 236 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/button.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | @use 'common/var' as *; 4 | @use 'mixins/button' as *; 5 | @use 'mixins/mixins' as *; 6 | @use 'mixins/utils' as *; 7 | @use 'mixins/var' as *; 8 | 9 | $button-icon-span-gap: () !default; 10 | $button-icon-span-gap: map.merge( 11 | ( 12 | 'large': 8px, 13 | 'default': 6px, 14 | 'small': 4px, 15 | ), 16 | $button-icon-span-gap 17 | ); 18 | 19 | @include b(button) { 20 | @include set-component-css-var('button', $button); 21 | } 22 | 23 | @include b(button) { 24 | display: inline-flex; 25 | justify-content: center; 26 | align-items: center; 27 | 28 | line-height: 1; 29 | // min-height will expand when in flex 30 | height: map.get($input-height, 'default'); 31 | white-space: nowrap; 32 | cursor: pointer; 33 | color: getCssVar('button', 'text-color'); 34 | text-align: center; 35 | box-sizing: border-box; 36 | outline: none; 37 | transition: 0.1s; 38 | font-weight: getCssVar('button', 'font-weight'); 39 | user-select: none; 40 | vertical-align: middle; 41 | -webkit-appearance: none; 42 | background-color: getCssVar('button', 'bg-color'); 43 | border: getCssVar('border'); 44 | border-color: getCssVar('button', 'border-color'); 45 | 46 | &:hover, 47 | &:focus { 48 | color: getCssVar('button', 'hover', 'text-color'); 49 | border-color: getCssVar('button', 'hover', 'border-color'); 50 | background-color: getCssVar('button', 'hover', 'bg-color'); 51 | outline: none; 52 | } 53 | 54 | &:active { 55 | color: getCssVar('button', 'active', 'text-color'); 56 | border-color: getCssVar('button', 'active', 'border-color'); 57 | background-color: getCssVar('button', 'active', 'bg-color'); 58 | outline: none; 59 | } 60 | 61 | &:focus-visible { 62 | outline: 2px solid getCssVar('button', 'outline-color'); 63 | outline-offset: 1px; 64 | } 65 | 66 | > span { 67 | display: inline-flex; 68 | align-items: center; 69 | } 70 | 71 | & + & { 72 | margin-left: 12px; 73 | } 74 | 75 | @include button-size( 76 | map.get($button-padding-vertical, 'default') - $button-border-width, 77 | map.get($button-padding-horizontal, 'default') - $button-border-width, 78 | map.get($button-font-size, 'default'), 79 | map.get($button-border-radius, 'default') 80 | ); 81 | 82 | &::-moz-focus-inner { 83 | border: 0; 84 | } 85 | 86 | & [class*='#{$namespace}-icon'] { 87 | & + span { 88 | margin-left: map.get($button-icon-span-gap, 'default'); 89 | } 90 | svg { 91 | vertical-align: bottom; 92 | } 93 | } 94 | 95 | @include when(plain) { 96 | @include css-var-from-global( 97 | ('button', 'hover', 'text-color'), 98 | ('color', 'primary') 99 | ); 100 | @include css-var-from-global( 101 | ('button', 'hover', 'bg-color'), 102 | ('fill-color', 'blank') 103 | ); 104 | @include css-var-from-global( 105 | ('button', 'hover', 'border-color'), 106 | ('color', 'primary') 107 | ); 108 | } 109 | 110 | @include when(active) { 111 | color: getCssVar('button', 'active', 'text-color'); 112 | border-color: getCssVar('button', 'active', 'border-color'); 113 | background-color: getCssVar('button', 'active', 'bg-color'); 114 | outline: none; 115 | } 116 | 117 | @include when(disabled) { 118 | &, 119 | &:hover, 120 | &:focus { 121 | color: getCssVar('button', 'disabled', 'text-color'); 122 | cursor: not-allowed; 123 | background-image: none; 124 | background-color: getCssVar('button', 'disabled', 'bg-color'); 125 | border-color: getCssVar('button', 'disabled', 'border-color'); 126 | } 127 | } 128 | 129 | @include when(loading) { 130 | position: relative; 131 | pointer-events: none; 132 | 133 | &:before { 134 | // mask the button 135 | z-index: 1; 136 | pointer-events: none; 137 | content: ''; 138 | position: absolute; 139 | left: -1px; 140 | top: -1px; 141 | right: -1px; 142 | bottom: -1px; 143 | border-radius: inherit; 144 | background-color: getCssVar('mask-color', 'extra-light'); 145 | } 146 | } 147 | @include when(round) { 148 | border-radius: getCssVar('border-radius', 'round'); 149 | } 150 | @include when(circle) { 151 | border-radius: 50%; 152 | padding: map.get($button-padding-vertical, 'default') - $button-border-width; 153 | } 154 | 155 | @include when(text) { 156 | color: getCssVar('button', 'text-color'); 157 | border: 0 solid transparent; 158 | background-color: transparent; 159 | 160 | @include when(disabled) { 161 | color: getCssVar('button', 'disabled', 'text-color'); 162 | background-color: transparent !important; 163 | } 164 | 165 | &:not(.is-disabled) { 166 | &:hover, 167 | &:focus { 168 | background-color: getCssVar('fill-color', 'light'); 169 | } 170 | 171 | &:focus-visible { 172 | outline: 2px solid getCssVar('button', 'outline-color'); 173 | outline-offset: 1px; 174 | } 175 | 176 | &:active { 177 | background-color: getCssVar('fill-color'); 178 | } 179 | 180 | @include when(has-bg) { 181 | background-color: getCssVar('fill-color', 'light'); 182 | 183 | &:hover, 184 | &:focus { 185 | background-color: getCssVar('fill-color'); 186 | } 187 | 188 | &:active { 189 | background-color: getCssVar('fill-color', 'dark'); 190 | } 191 | } 192 | } 193 | } 194 | 195 | @include e(text) { 196 | @include m(expand) { 197 | letter-spacing: 0.3em; 198 | margin-right: -0.3em; 199 | } 200 | } 201 | 202 | @include when(link) { 203 | border-color: transparent; 204 | color: getCssVar('button', 'text-color'); 205 | background: transparent; 206 | padding: 2px; 207 | height: auto; 208 | 209 | &:hover, 210 | &:focus { 211 | color: getCssVar('button', 'hover', 'link-text-color'); 212 | } 213 | 214 | @include when(disabled) { 215 | color: getCssVar('button', 'disabled', 'text-color'); 216 | background-color: transparent !important; 217 | border-color: transparent !important; 218 | } 219 | 220 | &:not(.is-disabled) { 221 | &:hover, 222 | &:focus { 223 | border-color: transparent; 224 | background-color: transparent; 225 | } 226 | 227 | &:active { 228 | color: getCssVar('button', 'active-color'); 229 | border-color: transparent; 230 | background-color: transparent; 231 | } 232 | } 233 | } 234 | 235 | @include m(text) { 236 | border-color: transparent; 237 | background: transparent; 238 | color: getCssVar('color', 'primary'); 239 | padding-left: 0; 240 | padding-right: 0; 241 | @include when(disabled) { 242 | color: getCssVar('button', 'disabled', 'text-color'); 243 | background-color: transparent !important; 244 | border-color: transparent !important; 245 | } 246 | 247 | &:not(.is-disabled) { 248 | &:hover, 249 | &:focus { 250 | color: getCssVar('color', 'primary', 'light-3'); 251 | border-color: transparent; 252 | background-color: transparent; 253 | } 254 | 255 | &:active { 256 | color: getCssVar('color', 'primary', 'dark-2'); 257 | border-color: transparent; 258 | background-color: transparent; 259 | } 260 | } 261 | } 262 | 263 | @include e(link) { 264 | @include m(expand) { 265 | letter-spacing: 0.3em; 266 | margin-right: -0.3em; 267 | } 268 | } 269 | 270 | @each $type in (primary, success, warning, danger, info) { 271 | @include m($type) { 272 | @include button-variant($type); 273 | } 274 | } 275 | 276 | @each $size in (large, small) { 277 | @include m($size) { 278 | @include set-css-var-value( 279 | ('button', 'size'), 280 | map.get($input-height, $size) 281 | ); 282 | 283 | height: getCssVar('button', 'size'); 284 | 285 | & [class*='#{$namespace}-icon'] { 286 | & + span { 287 | margin-left: map.get($button-icon-span-gap, $size); 288 | } 289 | } 290 | 291 | @include button-size( 292 | map.get($button-padding-vertical, $size) - $button-border-width, 293 | map.get($button-padding-horizontal, $size) - $button-border-width, 294 | map.get($button-font-size, $size), 295 | map.get($button-border-radius, $size) 296 | ); 297 | 298 | @include when(circle) { 299 | width: getCssVar('button', 'size'); 300 | padding: map.get($button-padding-vertical, $size) - $button-border-width; 301 | } 302 | } 303 | } 304 | } 305 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/demo-block.scss: -------------------------------------------------------------------------------- 1 | $dividing-line: #dfe1e6; 2 | $dividing-line-dark: #3b3b3b; 3 | $base-bg: #ffffff; 4 | $base-bg-dark: #2c2c2c; 5 | $brand: #42b883; 6 | $area: #f8f8f8; 7 | $area-dark: #242424; 8 | $text:#252b3a; 9 | $text-dark:#f8f8f8; 10 | $font-size: 12px; 11 | $disabled-line: #dfe1e6; 12 | $border-radius: 3px; 13 | $disabled-bg:#f5f5f6; 14 | $disabled-text:#adb0b8; 15 | 16 | // 点击复制代码 message样式修复 17 | .demoblock-message-wrap{ 18 | .demoblock-message-content{ 19 | background-color: #3dcca6 !important; 20 | } 21 | } 22 | 23 | .dark { 24 | .demo-block { 25 | border: solid 1px $dividing-line-dark !important; 26 | } 27 | .demo-block-control { 28 | background-color: $base-bg-dark !important; 29 | border-top: solid 1px $dividing-line-dark !important; 30 | 31 | &:hover { 32 | color: $brand !important; 33 | } 34 | 35 | .control-button { 36 | color: $brand !important; 37 | } 38 | 39 | .control-icon { 40 | color: #565656 41 | } 42 | } 43 | .meta { 44 | border-top: solid 1px $dividing-line-dark !important; 45 | background-color: $area-dark !important; 46 | 47 | .description { 48 | border:transparent !important; 49 | color: $text-dark !important; 50 | background-color: transparent !important; 51 | } 52 | 53 | .highlight div[class*='language-'] { 54 | margin: 0 !important; 55 | border-radius: 0; 56 | border: solid 1px $dividing-line-dark !important; 57 | background-color: $base-bg-dark !important; 58 | } 59 | } 60 | 61 | .vp-doc [class*='language-'] { 62 | pre { 63 | background-color: $base-bg-dark !important; 64 | 65 | code{ 66 | background-color: $base-bg-dark !important; 67 | border-radius: 10; 68 | color: $text-dark !important 69 | } 70 | } 71 | } 72 | } 73 | 74 | .demo-block { 75 | border: solid 1px $dividing-line !important; 76 | 77 | &.hover { 78 | box-shadow: none !important; 79 | } 80 | 81 | .source { 82 | .demo-spacing { 83 | & > * { 84 | margin: 0 8px 8px 0; 85 | 86 | &:last-child { 87 | margin-right: 0; 88 | } 89 | } 90 | 91 | &:last-child { 92 | & > * { 93 | margin-bottom: 0; 94 | } 95 | } 96 | } 97 | } 98 | } 99 | 100 | .demo-block-control { 101 | background-color: $base-bg !important; 102 | border-top: solid 1px $dividing-line !important; 103 | 104 | &:hover { 105 | color: $brand !important; 106 | } 107 | 108 | .control-button { 109 | color: $brand !important; 110 | } 111 | } 112 | 113 | .meta { 114 | border-top: solid 1px $dividing-line !important; 115 | background-color: $area !important; 116 | 117 | .description { 118 | border: solid 1px $dividing-line !important; 119 | color: $text !important; 120 | background-color: $base-bg !important; 121 | } 122 | } 123 | 124 | [class^=version-tag] { 125 | display: inline-block; 126 | padding: 0 4px; 127 | line-height: 20px; 128 | color: #ffffff; 129 | border-radius: 4px; 130 | } 131 | 132 | .version-tag-1 { 133 | background-color: #3dcca6; 134 | } 135 | 136 | .version-tag-2 { 137 | background-color: #f66f6a; 138 | } 139 | 140 | 141 | 142 | // 代码样式 143 | code { 144 | margin: 0; 145 | border-radius: 3px; 146 | padding: 0.25rem 0.5rem; 147 | font-family: var(--code-font-family); 148 | font-size: 0.85em; 149 | color: var(--text,#252b3a) !important; 150 | background-color: $area !important; 151 | } 152 | 153 | code .token.deleted { 154 | color: #ec5975; 155 | } 156 | 157 | code .token.inserted { 158 | color: var(--c-brand); 159 | } 160 | 161 | div[class*='language-'] { 162 | position: relative; 163 | margin: 1rem -1.5rem; 164 | background-color: $area !important; 165 | overflow-x: auto; 166 | } 167 | 168 | li > div[class*='language-'] { 169 | border-radius: 6px 0 0 6px; 170 | margin: 1rem -1.5rem 1rem -1.25rem; 171 | } 172 | 173 | @media (min-width: 420px) { 174 | div[class*='language-'] { 175 | margin: 1rem 0; 176 | border-radius: 6px; 177 | } 178 | 179 | li > div[class*='language-'] { 180 | margin: 1rem 0 1rem 0rem; 181 | border-radius: 6px; 182 | } 183 | } 184 | 185 | [class*='language-'] pre, 186 | [class*='language-'] code { 187 | text-align: left; 188 | white-space: pre; 189 | word-spacing: normal; 190 | word-break: normal; 191 | word-wrap: normal; 192 | -moz-tab-size: 4; 193 | -o-tab-size: 4; 194 | tab-size: 4; 195 | -webkit-hyphens: none; 196 | -moz-hyphens: none; 197 | -ms-hyphens: none; 198 | hyphens: none; 199 | } 200 | 201 | [class*='language-'] pre { 202 | position: relative; 203 | z-index: 1; 204 | margin: 0; 205 | padding: 1.25rem 1.5rem; 206 | background: transparent; 207 | overflow-x: auto; 208 | } 209 | 210 | [class*='language-'] code { 211 | padding: 0; 212 | line-height: var(--code-line-height); 213 | font-size: var(--code-font-size); 214 | color: #eee; 215 | } 216 | 217 | /* Line highlighting */ 218 | 219 | .highlight-lines { 220 | position: absolute; 221 | top: 0; 222 | bottom: 0; 223 | left: 0; 224 | padding: 1.25rem 0; 225 | width: 100%; 226 | line-height: var(--code-line-height); 227 | font-family: var(--code-font-family); 228 | font-size: var(--code-font-size); 229 | user-select: none; 230 | overflow: hidden; 231 | } 232 | 233 | .highlight-lines .highlighted { 234 | background-color: rgba(0, 0, 0, 0.66); 235 | } 236 | 237 | /* Line numbers mode */ 238 | 239 | div[class*='language-'].line-numbers-mode { 240 | padding-left: 3.5rem; 241 | } 242 | 243 | .line-numbers-wrapper { 244 | position: absolute; 245 | top: 0; 246 | bottom: 0; 247 | left: 0; 248 | z-index: 3; 249 | border-right: 1px solid rgba(0, 0, 0, 0.5); 250 | padding: 1.25rem 0; 251 | width: 3.5rem; 252 | text-align: center; 253 | line-height: var(--code-line-height); 254 | font-family: var(--code-font-family); 255 | font-size: var(--code-font-size); 256 | color: #888; 257 | } 258 | 259 | /* Language marker */ 260 | 261 | div[class*='language-']:before { 262 | position: absolute; 263 | top: 0.6em; 264 | right: 1em; 265 | z-index: 2; 266 | font-size: 0.8rem; 267 | color: #888; 268 | } 269 | 270 | div[class~='language-html']:before, 271 | div[class~='language-markup']:before { 272 | content: 'html'; 273 | } 274 | 275 | div[class~='language-md']:before, 276 | div[class~='language-markdown']:before { 277 | content: 'md'; 278 | } 279 | 280 | div[class~='language-css']:before { 281 | content: 'css'; 282 | } 283 | 284 | div[class~='language-sass']:before { 285 | content: 'sass'; 286 | } 287 | 288 | div[class~='language-scss']:before { 289 | content: 'scss'; 290 | } 291 | 292 | div[class~='language-less']:before { 293 | content: 'less'; 294 | } 295 | 296 | div[class~='language-stylus']:before { 297 | content: 'styl'; 298 | } 299 | 300 | div[class~='language-js']:before, 301 | div[class~='language-javascript']:before { 302 | content: 'js'; 303 | } 304 | 305 | div[class~='language-ts']:before, 306 | div[class~='language-typescript']:before { 307 | content: 'ts'; 308 | } 309 | 310 | div[class~='language-json']:before { 311 | content: 'json'; 312 | } 313 | 314 | div[class~='language-rb']:before, 315 | div[class~='language-ruby']:before { 316 | content: 'rb'; 317 | } 318 | 319 | div[class~='language-py']:before, 320 | div[class~='language-python']:before { 321 | content: 'py'; 322 | } 323 | 324 | div[class~='language-sh']:before, 325 | div[class~='language-bash']:before { 326 | content: 'sh'; 327 | } 328 | 329 | div[class~='language-php']:before { 330 | content: 'php'; 331 | } 332 | 333 | div[class~='language-go']:before { 334 | content: 'go'; 335 | } 336 | 337 | div[class~='language-rust']:before { 338 | content: 'rust'; 339 | } 340 | 341 | div[class~='language-java']:before { 342 | content: 'java'; 343 | } 344 | 345 | div[class~='language-c']:before { 346 | content: 'c'; 347 | } 348 | 349 | div[class~='language-yaml']:before { 350 | content: 'yaml'; 351 | } 352 | 353 | div[class~='language-dockerfile']:before { 354 | content: 'dockerfile'; 355 | } 356 | 357 | div[class~='language-vue']:before { 358 | content: 'vue'; 359 | } 360 | 361 | /** 362 | * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML. 363 | * Based on https://github.com/chriskempson/tomorrow-theme 364 | * 365 | * @author Rose Pritchard 366 | */ 367 | .token.comment, 368 | .token.block-comment, 369 | .token.prolog, 370 | .token.doctype, 371 | .token.cdata { 372 | color: #999; 373 | } 374 | 375 | .token.punctuation { 376 | color: #ccc; 377 | } 378 | 379 | .token.tag, 380 | .token.attr-name, 381 | .token.namespace, 382 | .token.deleted { 383 | color: #e2777a; 384 | } 385 | 386 | .token.function-name { 387 | color: #6196cc; 388 | } 389 | 390 | .token.boolean, 391 | .token.number, 392 | .token.function { 393 | color: #f08d49; 394 | } 395 | 396 | .token.property, 397 | .token.class-name, 398 | .token.constant, 399 | .token.symbol { 400 | color: #f8c555; 401 | } 402 | 403 | .token.selector, 404 | .token.important, 405 | .token.atrule, 406 | .token.keyword, 407 | .token.builtin { 408 | color: #cc99cd; 409 | } 410 | 411 | .token.string, 412 | .token.char, 413 | .token.attr-value, 414 | .token.regex, 415 | .token.variable { 416 | color: #7ec699; 417 | } 418 | 419 | .token.operator, 420 | .token.entity, 421 | .token.url { 422 | color: #67cdcc; 423 | } 424 | 425 | .token.important, 426 | .token.bold { 427 | font-weight: bold; 428 | } 429 | 430 | .token.italic { 431 | font-style: italic; 432 | } 433 | 434 | .token.entity { 435 | cursor: help; 436 | } 437 | 438 | .token.inserted { 439 | color: green; 440 | } 441 | 442 | 443 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/icon.scss: -------------------------------------------------------------------------------- 1 | @import "common/var"; 2 | 3 | @font-face { 4 | font-family: 'iconfonts'; 5 | src: url('#{$--font-path}/iconfonts.woff') format('woff'), /* chrome, firefox */ 6 | url('#{$--font-path}/iconfonts.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | font-weight: normal; 8 | font-display: $--font-display; 9 | font-style: normal; 10 | } 11 | 12 | [class^="u-icon-"], [class*=" u-icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'iconfonts' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | vertical-align: baseline; 22 | display: inline-block; 23 | 24 | /* Better Font Rendering =========== */ 25 | -webkit-font-smoothing: antialiased; 26 | -moz-osx-font-smoothing: grayscale; 27 | } 28 | 29 | .u-icon-ice-cream-round:before { 30 | content: "\e6a0"; 31 | } 32 | 33 | .u-icon-ice-cream-square:before { 34 | content: "\e6a3"; 35 | } 36 | 37 | .u-icon-lollipop:before { 38 | content: "\e6a4"; 39 | } 40 | 41 | .u-icon-potato-strips:before { 42 | content: "\e6a5"; 43 | } 44 | 45 | .u-icon-milk-tea:before { 46 | content: "\e6a6"; 47 | } 48 | 49 | .u-icon-ice-drink:before { 50 | content: "\e6a7"; 51 | } 52 | 53 | .u-icon-ice-tea:before { 54 | content: "\e6a9"; 55 | } 56 | 57 | .u-icon-coffee:before { 58 | content: "\e6aa"; 59 | } 60 | 61 | .u-icon-orange:before { 62 | content: "\e6ab"; 63 | } 64 | 65 | .u-icon-pear:before { 66 | content: "\e6ac"; 67 | } 68 | 69 | .u-icon-apple:before { 70 | content: "\e6ad"; 71 | } 72 | 73 | .u-icon-cherry:before { 74 | content: "\e6ae"; 75 | } 76 | 77 | .u-icon-watermelon:before { 78 | content: "\e6af"; 79 | } 80 | 81 | .u-icon-grape:before { 82 | content: "\e6b0"; 83 | } 84 | 85 | .u-icon-refrigerator:before { 86 | content: "\e6b1"; 87 | } 88 | 89 | .u-icon-goblet-square-full:before { 90 | content: "\e6b2"; 91 | } 92 | 93 | .u-icon-goblet-square:before { 94 | content: "\e6b3"; 95 | } 96 | 97 | .u-icon-goblet-full:before { 98 | content: "\e6b4"; 99 | } 100 | 101 | .u-icon-goblet:before { 102 | content: "\e6b5"; 103 | } 104 | 105 | .u-icon-cold-drink:before { 106 | content: "\e6b6"; 107 | } 108 | 109 | .u-icon-coffee-cup:before { 110 | content: "\e6b8"; 111 | } 112 | 113 | .u-icon-water-cup:before { 114 | content: "\e6b9"; 115 | } 116 | 117 | .u-icon-hot-water:before { 118 | content: "\e6ba"; 119 | } 120 | 121 | .u-icon-ice-cream:before { 122 | content: "\e6bb"; 123 | } 124 | 125 | .u-icon-dessert:before { 126 | content: "\e6bc"; 127 | } 128 | 129 | .u-icon-sugar:before { 130 | content: "\e6bd"; 131 | } 132 | 133 | .u-icon-tableware:before { 134 | content: "\e6be"; 135 | } 136 | 137 | .u-icon-burger:before { 138 | content: "\e6bf"; 139 | } 140 | 141 | .u-icon-knife-fork:before { 142 | content: "\e6c1"; 143 | } 144 | 145 | .u-icon-fork-spoon:before { 146 | content: "\e6c2"; 147 | } 148 | 149 | .u-icon-chicken:before { 150 | content: "\e6c3"; 151 | } 152 | 153 | .u-icon-food:before { 154 | content: "\e6c4"; 155 | } 156 | 157 | .u-icon-dish-1:before { 158 | content: "\e6c5"; 159 | } 160 | 161 | .u-icon-dish:before { 162 | content: "\e6c6"; 163 | } 164 | 165 | .u-icon-moon-night:before { 166 | content: "\e6ee"; 167 | } 168 | 169 | .u-icon-moon:before { 170 | content: "\e6f0"; 171 | } 172 | 173 | .u-icon-cloudy-and-sunny:before { 174 | content: "\e6f1"; 175 | } 176 | 177 | .u-icon-partly-cloudy:before { 178 | content: "\e6f2"; 179 | } 180 | 181 | .u-icon-cloudy:before { 182 | content: "\e6f3"; 183 | } 184 | 185 | .u-icon-sunny:before { 186 | content: "\e6f6"; 187 | } 188 | 189 | .u-icon-sunset:before { 190 | content: "\e6f7"; 191 | } 192 | 193 | .u-icon-sunrise-1:before { 194 | content: "\e6f8"; 195 | } 196 | 197 | .u-icon-sunrise:before { 198 | content: "\e6f9"; 199 | } 200 | 201 | .u-icon-heavy-rain:before { 202 | content: "\e6fa"; 203 | } 204 | 205 | .u-icon-lightning:before { 206 | content: "\e6fb"; 207 | } 208 | 209 | .u-icon-light-rain:before { 210 | content: "\e6fc"; 211 | } 212 | 213 | .u-icon-wind-power:before { 214 | content: "\e6fd"; 215 | } 216 | 217 | .u-icon-baseball:before { 218 | content: "\e712"; 219 | } 220 | 221 | .u-icon-soccer:before { 222 | content: "\e713"; 223 | } 224 | 225 | .u-icon-football:before { 226 | content: "\e715"; 227 | } 228 | 229 | .u-icon-basketball:before { 230 | content: "\e716"; 231 | } 232 | 233 | .u-icon-ship:before { 234 | content: "\e73f"; 235 | } 236 | 237 | .u-icon-truck:before { 238 | content: "\e740"; 239 | } 240 | 241 | .u-icon-bicycle:before { 242 | content: "\e741"; 243 | } 244 | 245 | .u-icon-mobile-phone:before { 246 | content: "\e6d3"; 247 | } 248 | 249 | .u-icon-service:before { 250 | content: "\e6d4"; 251 | } 252 | 253 | .u-icon-key:before { 254 | content: "\e6e2"; 255 | } 256 | 257 | .u-icon-unlock:before { 258 | content: "\e6e4"; 259 | } 260 | 261 | .u-icon-lock:before { 262 | content: "\e6e5"; 263 | } 264 | 265 | .u-icon-watch:before { 266 | content: "\e6fe"; 267 | } 268 | 269 | .u-icon-watch-1:before { 270 | content: "\e6ff"; 271 | } 272 | 273 | .u-icon-timer:before { 274 | content: "\e702"; 275 | } 276 | 277 | .u-icon-alarm-clock:before { 278 | content: "\e703"; 279 | } 280 | 281 | .u-icon-map-location:before { 282 | content: "\e704"; 283 | } 284 | 285 | .u-icon-delete-location:before { 286 | content: "\e705"; 287 | } 288 | 289 | .u-icon-add-location:before { 290 | content: "\e706"; 291 | } 292 | 293 | .u-icon-location-information:before { 294 | content: "\e707"; 295 | } 296 | 297 | .u-icon-location-outline:before { 298 | content: "\e708"; 299 | } 300 | 301 | .u-icon-location:before { 302 | content: "\e79e"; 303 | } 304 | 305 | .u-icon-place:before { 306 | content: "\e709"; 307 | } 308 | 309 | .u-icon-discover:before { 310 | content: "\e70a"; 311 | } 312 | 313 | .u-icon-first-aid-kit:before { 314 | content: "\e70b"; 315 | } 316 | 317 | .u-icon-trophy-1:before { 318 | content: "\e70c"; 319 | } 320 | 321 | .u-icon-trophy:before { 322 | content: "\e70d"; 323 | } 324 | 325 | .u-icon-medal:before { 326 | content: "\e70e"; 327 | } 328 | 329 | .u-icon-medal-1:before { 330 | content: "\e70f"; 331 | } 332 | 333 | .u-icon-stopwatch:before { 334 | content: "\e710"; 335 | } 336 | 337 | .u-icon-mic:before { 338 | content: "\e711"; 339 | } 340 | 341 | .u-icon-copy-document:before { 342 | content: "\e718"; 343 | } 344 | 345 | .u-icon-full-screen:before { 346 | content: "\e719"; 347 | } 348 | 349 | .u-icon-switch-button:before { 350 | content: "\e71b"; 351 | } 352 | 353 | .u-icon-aim:before { 354 | content: "\e71c"; 355 | } 356 | 357 | .u-icon-crop:before { 358 | content: "\e71d"; 359 | } 360 | 361 | .u-icon-odometer:before { 362 | content: "\e71e"; 363 | } 364 | 365 | .u-icon-time:before { 366 | content: "\e71f"; 367 | } 368 | 369 | .u-icon-bangzhu:before { 370 | content: "\e724"; 371 | } 372 | 373 | .u-icon-close-notification:before { 374 | content: "\e726"; 375 | } 376 | 377 | .u-icon-microphone:before { 378 | content: "\e727"; 379 | } 380 | 381 | .u-icon-turn-off-microphone:before { 382 | content: "\e728"; 383 | } 384 | 385 | .u-icon-position:before { 386 | content: "\e729"; 387 | } 388 | 389 | .u-icon-postcard:before { 390 | content: "\e72a"; 391 | } 392 | 393 | .u-icon-message:before { 394 | content: "\e72b"; 395 | } 396 | 397 | .u-icon-chat-line-square:before { 398 | content: "\e72d"; 399 | } 400 | 401 | .u-icon-chat-dot-square:before { 402 | content: "\e72e"; 403 | } 404 | 405 | .u-icon-chat-dot-round:before { 406 | content: "\e72f"; 407 | } 408 | 409 | .u-icon-chat-square:before { 410 | content: "\e730"; 411 | } 412 | 413 | .u-icon-chat-line-round:before { 414 | content: "\e731"; 415 | } 416 | 417 | .u-icon-chat-round:before { 418 | content: "\e732"; 419 | } 420 | 421 | .u-icon-set-up:before { 422 | content: "\e733"; 423 | } 424 | 425 | .u-icon-turn-off:before { 426 | content: "\e734"; 427 | } 428 | 429 | .u-icon-open:before { 430 | content: "\e735"; 431 | } 432 | 433 | .u-icon-connection:before { 434 | content: "\e736"; 435 | } 436 | 437 | .u-icon-link:before { 438 | content: "\e737"; 439 | } 440 | 441 | .u-icon-cpu:before { 442 | content: "\e738"; 443 | } 444 | 445 | .u-icon-thumb:before { 446 | content: "\e739"; 447 | } 448 | 449 | .u-icon-female:before { 450 | content: "\e73a"; 451 | } 452 | 453 | .u-icon-male:before { 454 | content: "\e73b"; 455 | } 456 | 457 | .u-icon-guide:before { 458 | content: "\e73c"; 459 | } 460 | 461 | .u-icon-news:before { 462 | content: "\e73e"; 463 | } 464 | 465 | .u-icon-price-tag:before { 466 | content: "\e744"; 467 | } 468 | 469 | .u-icon-discount:before { 470 | content: "\e745"; 471 | } 472 | 473 | .u-icon-wallet:before { 474 | content: "\e747"; 475 | } 476 | 477 | .u-icon-coin:before { 478 | content: "\e748"; 479 | } 480 | 481 | .u-icon-money:before { 482 | content: "\e749"; 483 | } 484 | 485 | .u-icon-bank-card:before { 486 | content: "\e74a"; 487 | } 488 | 489 | .u-icon-box:before { 490 | content: "\e74b"; 491 | } 492 | 493 | .u-icon-present:before { 494 | content: "\e74c"; 495 | } 496 | 497 | .u-icon-sell:before { 498 | content: "\e6d5"; 499 | } 500 | 501 | .u-icon-sold-out:before { 502 | content: "\e6d6"; 503 | } 504 | 505 | .u-icon-shopping-bag-2:before { 506 | content: "\e74d"; 507 | } 508 | 509 | .u-icon-shopping-bag-1:before { 510 | content: "\e74e"; 511 | } 512 | 513 | .u-icon-shopping-cart-2:before { 514 | content: "\e74f"; 515 | } 516 | 517 | .u-icon-shopping-cart-1:before { 518 | content: "\e750"; 519 | } 520 | 521 | .u-icon-shopping-cart-full:before { 522 | content: "\e751"; 523 | } 524 | 525 | .u-icon-smoking:before { 526 | content: "\e752"; 527 | } 528 | 529 | .u-icon-no-smoking:before { 530 | content: "\e753"; 531 | } 532 | 533 | .u-icon-house:before { 534 | content: "\e754"; 535 | } 536 | 537 | .u-icon-table-lamp:before { 538 | content: "\e755"; 539 | } 540 | 541 | .u-icon-school:before { 542 | content: "\e756"; 543 | } 544 | 545 | .u-icon-office-building:before { 546 | content: "\e757"; 547 | } 548 | 549 | .u-icon-toilet-paper:before { 550 | content: "\e758"; 551 | } 552 | 553 | .u-icon-notebook-2:before { 554 | content: "\e759"; 555 | } 556 | 557 | .u-icon-notebook-1:before { 558 | content: "\e75a"; 559 | } 560 | 561 | .u-icon-files:before { 562 | content: "\e75b"; 563 | } 564 | 565 | .u-icon-collection:before { 566 | content: "\e75c"; 567 | } 568 | 569 | .u-icon-receiving:before { 570 | content: "\e75d"; 571 | } 572 | 573 | .u-icon-suitcase-1:before { 574 | content: "\e760"; 575 | } 576 | 577 | .u-icon-suitcase:before { 578 | content: "\e761"; 579 | } 580 | 581 | .u-icon-film:before { 582 | content: "\e763"; 583 | } 584 | 585 | .u-icon-collection-tag:before { 586 | content: "\e765"; 587 | } 588 | 589 | .u-icon-data-analysis:before { 590 | content: "\e766"; 591 | } 592 | 593 | .u-icon-pie-chart:before { 594 | content: "\e767"; 595 | } 596 | 597 | .u-icon-data-board:before { 598 | content: "\e768"; 599 | } 600 | 601 | .u-icon-data-line:before { 602 | content: "\e76d"; 603 | } 604 | 605 | .u-icon-reading:before { 606 | content: "\e769"; 607 | } 608 | 609 | .u-icon-magic-stick:before { 610 | content: "\e76a"; 611 | } 612 | 613 | .u-icon-coordinate:before { 614 | content: "\e76b"; 615 | } 616 | 617 | .u-icon-mouse:before { 618 | content: "\e76c"; 619 | } 620 | 621 | .u-icon-brush:before { 622 | content: "\e76e"; 623 | } 624 | 625 | .u-icon-headset:before { 626 | content: "\e76f"; 627 | } 628 | 629 | .u-icon-umbrella:before { 630 | content: "\e770"; 631 | } 632 | 633 | .u-icon-scissors:before { 634 | content: "\e771"; 635 | } 636 | 637 | .u-icon-mobile:before { 638 | content: "\e773"; 639 | } 640 | 641 | .u-icon-attract:before { 642 | content: "\e774"; 643 | } 644 | 645 | .u-icon-monitor:before { 646 | content: "\e775"; 647 | } 648 | 649 | .u-icon-search:before { 650 | content: "\e778"; 651 | } 652 | 653 | .u-icon-takeaway-box:before { 654 | content: "\e77a"; 655 | } 656 | 657 | .u-icon-paperclip:before { 658 | content: "\e77d"; 659 | } 660 | 661 | .u-icon-printer:before { 662 | content: "\e77e"; 663 | } 664 | 665 | .u-icon-document-add:before { 666 | content: "\e782"; 667 | } 668 | 669 | .u-icon-document:before { 670 | content: "\e785"; 671 | } 672 | 673 | .u-icon-document-checked:before { 674 | content: "\e786"; 675 | } 676 | 677 | .u-icon-document-copy:before { 678 | content: "\e787"; 679 | } 680 | 681 | .u-icon-document-delete:before { 682 | content: "\e788"; 683 | } 684 | 685 | .u-icon-document-remove:before { 686 | content: "\e789"; 687 | } 688 | 689 | .u-icon-tickets:before { 690 | content: "\e78b"; 691 | } 692 | 693 | .u-icon-folder-checked:before { 694 | content: "\e77f"; 695 | } 696 | 697 | .u-icon-folder-delete:before { 698 | content: "\e780"; 699 | } 700 | 701 | .u-icon-folder-remove:before { 702 | content: "\e781"; 703 | } 704 | 705 | .u-icon-folder-add:before { 706 | content: "\e783"; 707 | } 708 | 709 | .u-icon-folder-opened:before { 710 | content: "\e784"; 711 | } 712 | 713 | .u-icon-folder:before { 714 | content: "\e78a"; 715 | } 716 | 717 | .u-icon-edit-outline:before { 718 | content: "\e764"; 719 | } 720 | 721 | .u-icon-edit:before { 722 | content: "\e78c"; 723 | } 724 | 725 | .u-icon-date:before { 726 | content: "\e78e"; 727 | } 728 | 729 | .u-icon-c-scale-to-original:before { 730 | content: "\e7c6"; 731 | } 732 | 733 | .u-icon-view:before { 734 | content: "\e6ce"; 735 | } 736 | 737 | .u-icon-loading:before { 738 | content: "\e6cf"; 739 | } 740 | 741 | .u-icon-rank:before { 742 | content: "\e6d1"; 743 | } 744 | 745 | .u-icon-sort-down:before { 746 | content: "\e7c4"; 747 | } 748 | 749 | .u-icon-sort-up:before { 750 | content: "\e7c5"; 751 | } 752 | 753 | .u-icon-sort:before { 754 | content: "\e6d2"; 755 | } 756 | 757 | .u-icon-finished:before { 758 | content: "\e6cd"; 759 | } 760 | 761 | .u-icon-refresh-left:before { 762 | content: "\e6c7"; 763 | } 764 | 765 | .u-icon-refresh-right:before { 766 | content: "\e6c8"; 767 | } 768 | 769 | .u-icon-refresh:before { 770 | content: "\e6d0"; 771 | } 772 | 773 | .u-icon-video-play:before { 774 | content: "\e7c0"; 775 | } 776 | 777 | .u-icon-video-pause:before { 778 | content: "\e7c1"; 779 | } 780 | 781 | .u-icon-d-arrow-right:before { 782 | content: "\e6dc"; 783 | } 784 | 785 | .u-icon-d-arrow-left:before { 786 | content: "\e6dd"; 787 | } 788 | 789 | .u-icon-arrow-up:before { 790 | content: "\e6e1"; 791 | } 792 | 793 | .u-icon-arrow-down:before { 794 | content: "\e6df"; 795 | } 796 | 797 | .u-icon-arrow-right:before { 798 | content: "\e6e0"; 799 | } 800 | 801 | .u-icon-arrow-left:before { 802 | content: "\e6de"; 803 | } 804 | 805 | .u-icon-top-right:before { 806 | content: "\e6e7"; 807 | } 808 | 809 | .u-icon-top-left:before { 810 | content: "\e6e8"; 811 | } 812 | 813 | .u-icon-top:before { 814 | content: "\e6e6"; 815 | } 816 | 817 | .u-icon-bottom:before { 818 | content: "\e6eb"; 819 | } 820 | 821 | .u-icon-right:before { 822 | content: "\e6e9"; 823 | } 824 | 825 | .u-icon-back:before { 826 | content: "\e6ea"; 827 | } 828 | 829 | .u-icon-bottom-right:before { 830 | content: "\e6ec"; 831 | } 832 | 833 | .u-icon-bottom-left:before { 834 | content: "\e6ed"; 835 | } 836 | 837 | .u-icon-caret-top:before { 838 | content: "\e78f"; 839 | } 840 | 841 | .u-icon-caret-bottom:before { 842 | content: "\e790"; 843 | } 844 | 845 | .u-icon-caret-right:before { 846 | content: "\e791"; 847 | } 848 | 849 | .u-icon-caret-left:before { 850 | content: "\e792"; 851 | } 852 | 853 | .u-icon-d-caret:before { 854 | content: "\e79a"; 855 | } 856 | 857 | .u-icon-share:before { 858 | content: "\e793"; 859 | } 860 | 861 | .u-icon-menu:before { 862 | content: "\e798"; 863 | } 864 | 865 | .u-icon-s-grid:before { 866 | content: "\e7a6"; 867 | } 868 | 869 | .u-icon-s-check:before { 870 | content: "\e7a7"; 871 | } 872 | 873 | .u-icon-s-data:before { 874 | content: "\e7a8"; 875 | } 876 | 877 | .u-icon-s-opportunity:before { 878 | content: "\e7aa"; 879 | } 880 | 881 | .u-icon-s-custom:before { 882 | content: "\e7ab"; 883 | } 884 | 885 | .u-icon-s-claim:before { 886 | content: "\e7ad"; 887 | } 888 | 889 | .u-icon-s-finance:before { 890 | content: "\e7ae"; 891 | } 892 | 893 | .u-icon-s-comment:before { 894 | content: "\e7af"; 895 | } 896 | 897 | .u-icon-s-flag:before { 898 | content: "\e7b0"; 899 | } 900 | 901 | .u-icon-s-marketing:before { 902 | content: "\e7b1"; 903 | } 904 | 905 | .u-icon-s-shop:before { 906 | content: "\e7b4"; 907 | } 908 | 909 | .u-icon-s-open:before { 910 | content: "\e7b5"; 911 | } 912 | 913 | .u-icon-s-management:before { 914 | content: "\e7b6"; 915 | } 916 | 917 | .u-icon-s-ticket:before { 918 | content: "\e7b7"; 919 | } 920 | 921 | .u-icon-s-release:before { 922 | content: "\e7b8"; 923 | } 924 | 925 | .u-icon-s-home:before { 926 | content: "\e7b9"; 927 | } 928 | 929 | .u-icon-s-promotion:before { 930 | content: "\e7ba"; 931 | } 932 | 933 | .u-icon-s-operation:before { 934 | content: "\e7bb"; 935 | } 936 | 937 | .u-icon-s-unfold:before { 938 | content: "\e7bc"; 939 | } 940 | 941 | .u-icon-s-fold:before { 942 | content: "\e7a9"; 943 | } 944 | 945 | .u-icon-s-platform:before { 946 | content: "\e7bd"; 947 | } 948 | 949 | .u-icon-s-order:before { 950 | content: "\e7be"; 951 | } 952 | 953 | .u-icon-s-cooperation:before { 954 | content: "\e7bf"; 955 | } 956 | 957 | .u-icon-bell:before { 958 | content: "\e725"; 959 | } 960 | 961 | .u-icon-message-solid:before { 962 | content: "\e799"; 963 | } 964 | 965 | .u-icon-video-camera:before { 966 | content: "\e772"; 967 | } 968 | 969 | .u-icon-video-camera-solid:before { 970 | content: "\e796"; 971 | } 972 | 973 | .u-icon-camera:before { 974 | content: "\e779"; 975 | } 976 | 977 | .u-icon-camera-solid:before { 978 | content: "\e79b"; 979 | } 980 | 981 | .u-icon-download:before { 982 | content: "\e77c"; 983 | } 984 | 985 | .u-icon-upload2:before { 986 | content: "\e77b"; 987 | } 988 | 989 | .u-icon-upload:before { 990 | content: "\e7c3"; 991 | } 992 | 993 | .u-icon-picture-outline-round:before { 994 | content: "\e75f"; 995 | } 996 | 997 | .u-icon-picture-outline:before { 998 | content: "\e75e"; 999 | } 1000 | 1001 | .u-icon-picture:before { 1002 | content: "\e79f"; 1003 | } 1004 | 1005 | .u-icon-close:before { 1006 | content: "\e6db"; 1007 | } 1008 | 1009 | .u-icon-check:before { 1010 | content: "\e6da"; 1011 | } 1012 | 1013 | .u-icon-plus:before { 1014 | content: "\e6d9"; 1015 | } 1016 | 1017 | .u-icon-minus:before { 1018 | content: "\e6d8"; 1019 | } 1020 | 1021 | .u-icon-help:before { 1022 | content: "\e73d"; 1023 | } 1024 | 1025 | .u-icon-s-help:before { 1026 | content: "\e7b3"; 1027 | } 1028 | 1029 | .u-icon-circle-close:before { 1030 | content: "\e78d"; 1031 | } 1032 | 1033 | .u-icon-circle-check:before { 1034 | content: "\e720"; 1035 | } 1036 | 1037 | .u-icon-circle-plus-outline:before { 1038 | content: "\e723"; 1039 | } 1040 | 1041 | .u-icon-remove-outline:before { 1042 | content: "\e722"; 1043 | } 1044 | 1045 | .u-icon-zoom-out:before { 1046 | content: "\e776"; 1047 | } 1048 | 1049 | .u-icon-zoom-in:before { 1050 | content: "\e777"; 1051 | } 1052 | 1053 | .u-icon-error:before { 1054 | content: "\e79d"; 1055 | } 1056 | 1057 | .u-icon-success:before { 1058 | content: "\e79c"; 1059 | } 1060 | 1061 | .u-icon-circle-plus:before { 1062 | content: "\e7a0"; 1063 | } 1064 | 1065 | .u-icon-remove:before { 1066 | content: "\e7a2"; 1067 | } 1068 | 1069 | .u-icon-info:before { 1070 | content: "\e7a1"; 1071 | } 1072 | 1073 | .u-icon-question:before { 1074 | content: "\e7a4"; 1075 | } 1076 | 1077 | .u-icon-warning-outline:before { 1078 | content: "\e6c9"; 1079 | } 1080 | 1081 | .u-icon-warning:before { 1082 | content: "\e7a3"; 1083 | } 1084 | 1085 | .u-icon-goods:before { 1086 | content: "\e7c2"; 1087 | } 1088 | 1089 | .u-icon-s-goods:before { 1090 | content: "\e7b2"; 1091 | } 1092 | 1093 | .u-icon-star-off:before { 1094 | content: "\e717"; 1095 | } 1096 | 1097 | .u-icon-star-on:before { 1098 | content: "\e797"; 1099 | } 1100 | 1101 | .u-icon-more-outline:before { 1102 | content: "\e6cc"; 1103 | } 1104 | 1105 | .u-icon-more:before { 1106 | content: "\e794"; 1107 | } 1108 | 1109 | .u-icon-phone-outline:before { 1110 | content: "\e6cb"; 1111 | } 1112 | 1113 | .u-icon-phone:before { 1114 | content: "\e795"; 1115 | } 1116 | 1117 | .u-icon-user:before { 1118 | content: "\e6e3"; 1119 | } 1120 | 1121 | .u-icon-user-solid:before { 1122 | content: "\e7a5"; 1123 | } 1124 | 1125 | .u-icon-setting:before { 1126 | content: "\e6ca"; 1127 | } 1128 | 1129 | .u-icon-s-tools:before { 1130 | content: "\e7ac"; 1131 | } 1132 | 1133 | .u-icon-delete:before { 1134 | content: "\e6d7"; 1135 | } 1136 | 1137 | .u-icon-delete-solid:before { 1138 | content: "\e7c9"; 1139 | } 1140 | 1141 | .u-icon-eleme:before { 1142 | content: "\e7c7"; 1143 | } 1144 | 1145 | .u-icon-platform-eleme:before { 1146 | content: "\e7ca"; 1147 | } 1148 | 1149 | .u-icon-loading { 1150 | animation: rotating 2s linear infinite; 1151 | } 1152 | 1153 | .u-icon--right { 1154 | margin-left: 5px; 1155 | } 1156 | .u-icon--left { 1157 | margin-right: 5px; 1158 | } 1159 | 1160 | @keyframes rotating { 1161 | 0% { 1162 | transform: rotateZ(0deg); 1163 | } 1164 | 100% { 1165 | transform: rotateZ(360deg); 1166 | } 1167 | } 1168 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/common/var.scss: -------------------------------------------------------------------------------- 1 | /* Element Chalk Variables */ 2 | @use 'sass:math'; 3 | @use 'sass:map'; 4 | 5 | @use '../mixins/function.scss' as *; 6 | 7 | // Special comment for theme configurator 8 | // type|skipAutoTranslation|Category|Order 9 | // skipAutoTranslation 1 10 | 11 | // types 12 | $types: primary, success, warning, danger, error, info; 13 | 14 | // Color 15 | $colors: () !default; 16 | $colors: map.deep-merge( 17 | ( 18 | 'white': #ffffff, 19 | 'black': #000000, 20 | 'primary': ( 21 | 'base': #409eff, 22 | ), 23 | 'success': ( 24 | 'base': #67c23a, 25 | ), 26 | 'warning': ( 27 | 'base': #e6a23c, 28 | ), 29 | 'danger': ( 30 | 'base': #f56c6c, 31 | ), 32 | 'error': ( 33 | 'base': #f56c6c, 34 | ), 35 | 'info': ( 36 | 'base': #909399, 37 | ), 38 | ), 39 | $colors 40 | ); 41 | 42 | $color-white: map.get($colors, 'white') !default; 43 | $color-black: map.get($colors, 'black') !default; 44 | $color-primary: map.get($colors, 'primary', 'base') !default; 45 | $color-success: map.get($colors, 'success', 'base') !default; 46 | $color-warning: map.get($colors, 'warning', 'base') !default; 47 | $color-danger: map.get($colors, 'danger', 'base') !default; 48 | $color-error: map.get($colors, 'error', 'base') !default; 49 | $color-info: map.get($colors, 'info', 'base') !default; 50 | 51 | // https://sass-lang.com/documentation/values/maps#immutability 52 | // mix colors with white/black to generate light/dark level 53 | @mixin set-color-mix-level( 54 | $type, 55 | $number, 56 | $mode: 'light', 57 | $mix-color: $color-white 58 | ) { 59 | $colors: map.deep-merge( 60 | ( 61 | $type: ( 62 | '#{$mode}-#{$number}': 63 | mix( 64 | $mix-color, 65 | map.get($colors, $type, 'base'), 66 | math.percentage(math.div($number, 10)) 67 | ), 68 | ), 69 | ), 70 | $colors 71 | ) !global; 72 | } 73 | 74 | // $colors.primary.light-i 75 | // --el-color-primary-light-i 76 | // 10% 53a8ff 77 | // 20% 66b1ff 78 | // 30% 79bbff 79 | // 40% 8cc5ff 80 | // 50% a0cfff 81 | // 60% b3d8ff 82 | // 70% c6e2ff 83 | // 80% d9ecff 84 | // 90% ecf5ff 85 | @each $type in $types { 86 | @for $i from 1 through 9 { 87 | @include set-color-mix-level($type, $i, 'light', $color-white); 88 | } 89 | } 90 | 91 | // --el-color-primary-dark-2 92 | @each $type in $types { 93 | @include set-color-mix-level($type, 2, 'dark', $color-black); 94 | } 95 | 96 | $text-color: () !default; 97 | $text-color: map.merge( 98 | ( 99 | 'primary': #303133, 100 | 'regular': #606266, 101 | 'secondary': #909399, 102 | 'placeholder': #a8abb2, 103 | 'disabled': #c0c4cc, 104 | ), 105 | $text-color 106 | ); 107 | 108 | $border-color: () !default; 109 | $border-color: map.merge( 110 | ( 111 | '': #dcdfe6, 112 | 'light': #e4e7ed, 113 | 'lighter': #ebeef5, 114 | 'extra-light': #f2f6fc, 115 | 'dark': #d4d7de, 116 | 'darker': #cdd0d6, 117 | ), 118 | $border-color 119 | ); 120 | 121 | $fill-color: () !default; 122 | $fill-color: map.merge( 123 | ( 124 | '': #f0f2f5, 125 | 'light': #f5f7fa, 126 | 'lighter': #fafafa, 127 | 'extra-light': #fafcff, 128 | 'dark': #ebedf0, 129 | 'darker': #e6e8eb, 130 | 'blank': #ffffff, 131 | ), 132 | $fill-color 133 | ); 134 | 135 | // Background 136 | $bg-color: () !default; 137 | $bg-color: map.merge( 138 | ( 139 | '': #ffffff, 140 | 'page': #f2f3f5, 141 | 'overlay': #ffffff, 142 | ), 143 | $bg-color 144 | ); 145 | 146 | // Border 147 | $border-width: 1px !default; 148 | $border-style: solid !default; 149 | $border-color-hover: getCssVar('text-color', 'disabled') !default; 150 | 151 | $border-radius: () !default; 152 | $border-radius: map.merge( 153 | ( 154 | 'base': 4px, 155 | 'small': 2px, 156 | 'round': 20px, 157 | 'circle': 100%, 158 | ), 159 | $border-radius 160 | ); 161 | 162 | // Box-shadow 163 | $box-shadow: () !default; 164 | $box-shadow: map.merge( 165 | ( 166 | '': ( 167 | 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 168 | 0px 8px 20px rgba(0, 0, 0, 0.08), 169 | ), 170 | 'light': ( 171 | 0px 0px 12px rgba(0, 0, 0, 0.12), 172 | ), 173 | 'lighter': ( 174 | 0px 0px 6px rgba(0, 0, 0, 0.12), 175 | ), 176 | 'dark': ( 177 | 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 178 | 0px 12px 32px rgba(0, 0, 0, 0.12), 179 | 0px 8px 16px -8px rgba(0, 0, 0, 0.16), 180 | ), 181 | ), 182 | $box-shadow 183 | ); 184 | 185 | // Typography 186 | $--font-path: 'fonts' !default; 187 | $--font-display: 'auto' !default; 188 | 189 | $font-family: () !default; 190 | $font-family: map.merge( 191 | ( 192 | // default family 193 | '': 194 | "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif" 195 | ), 196 | $font-family 197 | ); 198 | 199 | $font-size: () !default; 200 | $font-size: map.merge( 201 | ( 202 | 'extra-large': 20px, 203 | 'large': 18px, 204 | 'medium': 16px, 205 | 'base': 14px, 206 | 'small': 13px, 207 | 'extra-small': 12px, 208 | ), 209 | $font-size 210 | ); 211 | 212 | // zIndex 213 | $z-index: () !default; 214 | $z-index: map.merge( 215 | ( 216 | 'normal': 1, 217 | 'top': 1000, 218 | 'popper': 2000, 219 | ), 220 | $z-index 221 | ); 222 | 223 | // Disable default 224 | $disabled: () !default; 225 | $disabled: map.merge( 226 | ( 227 | 'bg-color': getCssVar('fill-color', 'light'), 228 | 'text-color': getCssVar('text-color', 'placeholder'), 229 | 'border-color': getCssVar('border-color', 'light'), 230 | ), 231 | $disabled 232 | ); 233 | 234 | $common-component-size: () !default; 235 | $common-component-size: map.merge( 236 | ( 237 | 'large': 40px, 238 | 'default': 32px, 239 | 'small': 24px, 240 | ), 241 | $common-component-size 242 | ); 243 | 244 | // overlay 245 | $overlay-color: () !default; 246 | $overlay-color: map.merge( 247 | ( 248 | '': rgba(0, 0, 0, 0.8), 249 | 'light': rgba(0, 0, 0, 0.7), 250 | 'lighter': rgba(0, 0, 0, 0.5), 251 | ), 252 | $overlay-color 253 | ); 254 | 255 | // mask 256 | $mask-color: () !default; 257 | $mask-color: map.merge( 258 | ( 259 | '': rgba(255, 255, 255, 0.9), 260 | 'extra-light': rgba(255, 255, 255, 0.3), 261 | ), 262 | $mask-color 263 | ); 264 | 265 | // Components 266 | // --- 267 | // Checkbox 268 | // css3 var in packages/theme-chalk/src/checkbox.scss 269 | $checkbox: () !default; 270 | $checkbox: map.merge( 271 | ( 272 | 'font-size': 14px, 273 | 'font-weight': getCssVar('font-weight-primary'), 274 | 'text-color': getCssVar('text-color-regular'), 275 | 'input-height': 14px, 276 | 'input-width': 14px, 277 | 'border-radius': getCssVar('border-radius-small'), 278 | 'bg-color': getCssVar('fill-color', 'blank'), 279 | 'input-border': getCssVar('border'), 280 | 'disabled-border-color': getCssVar('border-color'), 281 | 'disabled-input-fill': getCssVar('fill-color', 'light'), 282 | 'disabled-icon-color': getCssVar('text-color-placeholder'), 283 | 'disabled-checked-input-fill': getCssVar('border-color-extra-light'), 284 | 'disabled-checked-input-border-color': getCssVar('border-color'), 285 | 'disabled-checked-icon-color': getCssVar('text-color-placeholder'), 286 | 'checked-text-color': getCssVar('color-primary'), 287 | 'checked-input-border-color': getCssVar('color-primary'), 288 | 'checked-bg-color': getCssVar('color-primary'), 289 | 'checked-icon-color': getCssVar('color', 'white'), 290 | 'input-border-color-hover': getCssVar('color-primary'), 291 | ), 292 | $checkbox 293 | ); 294 | 295 | $checkbox-button: () !default; 296 | $checkbox-button: map.merge( 297 | ( 298 | 'checked-bg-color': getCssVar('color-primary'), 299 | 'checked-text-color': getCssVar('color-white'), 300 | 'checked-border-color': getCssVar('color-primary'), 301 | ), 302 | $checkbox-button 303 | ); 304 | 305 | $checkbox-bordered-padding-left: () !default; 306 | $checkbox-bordered-padding-left: map.merge( 307 | ( 308 | 'large': 12px, 309 | 'default': 10px, 310 | 'small': 8px, 311 | ), 312 | $checkbox-bordered-padding-left 313 | ); 314 | 315 | $checkbox-bordered-padding-right: () !default; 316 | $checkbox-bordered-padding-right: map.merge( 317 | ( 318 | 'large': 20px, 319 | 'default': 16px, 320 | 'small': 12px, 321 | ), 322 | $checkbox-bordered-padding-right 323 | ); 324 | 325 | // Radio 326 | /// fontSize||Font|1 327 | $radio: () !default; 328 | $radio: map.merge( 329 | ( 330 | 'font-size': getCssVar('font-size-base'), 331 | 'text-color': getCssVar('text-color-regular'), 332 | 'font-weight': getCssVar('font-weight-primary'), 333 | 'input-height': 14px, 334 | 'input-width': 14px, 335 | 'input-border-radius': getCssVar('border-radius-circle'), 336 | 'input-bg-color': getCssVar('fill-color', 'blank'), 337 | 'input-border': getCssVar('border'), 338 | 'input-border-color': getCssVar('border-color'), 339 | 'input-border-color-hover': getCssVar('color-primary'), 340 | ), 341 | $radio 342 | ); 343 | 344 | $radio-height: () !default; 345 | $radio-height: map.merge($common-component-size, $radio-height); 346 | 347 | $radio-button: () !default; 348 | $radio-button: map.merge( 349 | ( 350 | 'checked-bg-color': getCssVar('color-primary'), 351 | 'checked-text-color': getCssVar('color-white'), 352 | 'checked-border-color': getCssVar('color-primary'), 353 | 'disabled-checked-fill': getCssVar('border-color-extra-light'), 354 | ), 355 | $radio-button 356 | ); 357 | 358 | $radio-disabled: () !default; 359 | $radio-disabled: map.merge( 360 | ( 361 | 'input-border-color': getCssVar('disabled-border-color'), 362 | 'input-fill': getCssVar('disabled-bg-color'), 363 | 'icon-color': getCssVar('disabled-bg-color'), 364 | 'checked-input-border-color': getCssVar('disabled-border-color'), 365 | 'checked-input-fill': getCssVar('disabled-bg-color'), 366 | 'checked-icon-color': getCssVar('text-color-placeholder'), 367 | ), 368 | $radio-disabled 369 | ); 370 | 371 | $radio-checked: () !default; 372 | $radio-checked: map.merge( 373 | ( 374 | 'text-color': getCssVar('color-primary'), 375 | 'input-border-color': getCssVar('color-primary'), 376 | 'icon-color': getCssVar('color-primary'), 377 | ), 378 | $radio-checked 379 | ); 380 | 381 | $radio-bordered-input-height: () !default; 382 | $radio-bordered-input-height: map.merge( 383 | ( 384 | 'large': 14px, 385 | 'default': 12px, 386 | 'small': 12px, 387 | ), 388 | $radio-bordered-input-height 389 | ); 390 | 391 | $radio-bordered-input-width: () !default; 392 | $radio-bordered-input-width: map.merge( 393 | ( 394 | 'large': 14px, 395 | 'default': 12px, 396 | 'small': 12px, 397 | ), 398 | $radio-bordered-input-width 399 | ); 400 | 401 | // Select 402 | $select: () !default; 403 | $select: map.merge( 404 | ( 405 | 'border-color-hover': getCssVar('border-color-hover'), 406 | 'disabled-border': getCssVar('disabled-border-color'), 407 | 'font-size': getCssVar('font-size-base'), 408 | 'close-hover-color': getCssVar('text-color-secondary'), 409 | 'input-color': getCssVar('text-color-placeholder'), 410 | 'multiple-input-color': getCssVar('text-color-regular'), 411 | 'input-focus-border-color': getCssVar('color-primary'), 412 | 'input-font-size': 14px, 413 | ), 414 | $select 415 | ); 416 | 417 | $select-option: () !default; 418 | $select-option: map.merge( 419 | ( 420 | 'text-color': getCssVar('text-color-regular'), 421 | 'disabled-color': getCssVar('text-color-placeholder'), 422 | 'height': 34px, 423 | 'hover-background': getCssVar('fill-color', 'light'), 424 | 'selected-text-color': getCssVar('color-primary'), 425 | ), 426 | $select-option 427 | ); 428 | 429 | $select-group: () !default; 430 | $select-group: map.merge( 431 | ( 432 | 'text-color': getCssVar('color-info'), 433 | 'height': 30px, 434 | 'font-size': 12px, 435 | ), 436 | $select-group 437 | ); 438 | 439 | $select-dropdown: () !default; 440 | $select-dropdown: map.merge( 441 | ( 442 | 'bg-color': getCssVar('bg-color', 'overlay'), 443 | 'shadow': getCssVar('box-shadow-light'), 444 | 'empty-color': getCssVar('text-color-secondary'), 445 | 'max-height': 274px, 446 | 'padding': 6px 0, 447 | 'empty-padding': 10px 0, 448 | 'border': 1px solid getCssVar('border-color-light'), 449 | ), 450 | $select-dropdown 451 | ); 452 | 453 | $select-tags-prefix-padding: () !default; 454 | $select-tags-prefix-padding: map.merge( 455 | ( 456 | 'large': 8px, 457 | 'default': 6px, 458 | 'small': 4px, 459 | ), 460 | $select-tags-prefix-padding 461 | ); 462 | 463 | // Alert 464 | // css3 var in packages/theme-chalk/src/alert.scss 465 | $alert: () !default; 466 | $alert: map.merge( 467 | ( 468 | 'padding': 8px 16px, 469 | 'border-radius-base': getCssVar('border-radius-base'), 470 | 'title-font-size': 13px, 471 | 'description-font-size': 12px, 472 | 'close-font-size': 12px, 473 | 'close-customed-font-size': 13px, 474 | 'icon-size': 16px, 475 | 'icon-large-size': 28px, 476 | ), 477 | $alert 478 | ); 479 | 480 | // MessageBox 481 | // css3 var in packages/theme-chalk/src/message-box.scss 482 | $messagebox: () !default; 483 | $messagebox: map.merge( 484 | ( 485 | 'title-color': getCssVar('text-color-primary'), 486 | 'width': 420px, 487 | 'border-radius': 4px, 488 | 'font-size': getCssVar('font-size-large'), 489 | 'content-font-size': getCssVar('font-size-base'), 490 | 'content-color': getCssVar('text-color-regular'), 491 | 'error-font-size': 12px, 492 | 'padding-primary': 15px, 493 | ), 494 | $messagebox 495 | ); 496 | 497 | // Message 498 | // css3 var in packages/theme-chalk/src/message.scss 499 | $message: () !default; 500 | $message: map.merge( 501 | ( 502 | 'bg-color': getCssVar('color', 'info', 'light-9'), 503 | 'border-color': getCssVar('border-color-lighter'), 504 | 'padding': 15px 19px, 505 | 'close-size': 16px, 506 | 'close-icon-color': getCssVar('text-color-placeholder'), 507 | 'close-hover-color': getCssVar('text-color-secondary'), 508 | ), 509 | $message 510 | ); 511 | 512 | // Notification 513 | // css3 var in packages/theme-chalk/src/notification.scss 514 | $notification: () !default; 515 | $notification: map.merge( 516 | ( 517 | 'width': 330px, 518 | 'padding': 14px 26px 14px 13px, 519 | 'radius': 8px, 520 | 'shadow': getCssVar('box-shadow-light'), 521 | 'border-color': getCssVar('border-color-lighter'), 522 | 'icon-size': 24px, 523 | 'close-font-size': 524 | var( 525 | #{getCssVarName('message-close-size')}, 526 | map.get($message, 'close-size') 527 | ), 528 | 'group-margin-left': 13px, 529 | 'group-margin-right': 8px, 530 | 'content-font-size': getCssVar('font-size-base'), 531 | 'content-color': getCssVar('text-color-regular'), 532 | 'title-font-size': 16px, 533 | 'title-color': getCssVar('text-color-primary'), 534 | 'close-color': getCssVar('text-color-secondary'), 535 | 'close-hover-color': getCssVar('text-color-regular'), 536 | ), 537 | $notification 538 | ); 539 | 540 | // Input 541 | // css3 var in packages/theme-chalk/src/input.scss 542 | $input: () !default; 543 | $input: map.merge( 544 | ( 545 | 'text-color': getCssVar('text-color-regular'), 546 | 'border': getCssVar('border'), 547 | 'hover-border': getCssVar('border-color-hover'), 548 | 'focus-border': getCssVar('color-primary'), 549 | 'transparent-border': 0 0 0 1px transparent inset, 550 | 'border-color': getCssVar('border-color'), 551 | 'border-radius': getCssVar('border-radius-base'), 552 | 'bg-color': getCssVar('fill-color', 'blank'), 553 | 'icon-color': getCssVar('text-color-placeholder'), 554 | 'placeholder-color': getCssVar('text-color-placeholder'), 555 | 'hover-border-color': getCssVar('border-color-hover'), 556 | 'clear-hover-color': getCssVar('text-color-secondary'), 557 | 'focus-border-color': getCssVar('color-primary'), 558 | 'width': 100%, 559 | ), 560 | $input 561 | ); 562 | 563 | $input-disabled: () !default; 564 | $input-disabled: map.merge( 565 | ( 566 | 'fill': getCssVar('disabled-bg-color'), 567 | 'border': getCssVar('disabled-border-color'), 568 | 'text-color': getCssVar('disabled-text-color'), 569 | 'placeholder-color': getCssVar('text-color-placeholder'), 570 | ), 571 | $input-disabled 572 | ); 573 | 574 | $input-font-size: () !default; 575 | $input-font-size: map.merge( 576 | ( 577 | 'large': 14px, 578 | 'default': 14px, 579 | 'small': 12px, 580 | ), 581 | $input-font-size 582 | ); 583 | 584 | $input-height: () !default; 585 | $input-height: map.merge($common-component-size, $input-height); 586 | 587 | $input-line-height: () !default; 588 | $input-line-height: map.merge($common-component-size, $input-line-height); 589 | 590 | $input-number-width: () !default; 591 | $input-number-width: map.merge( 592 | ( 593 | 'large': 180px, 594 | 'default': 150px, 595 | 'small': 120px, 596 | ), 597 | $input-number-width 598 | ); 599 | 600 | $input-padding-horizontal: () !default; 601 | $input-padding-horizontal: map.merge( 602 | ( 603 | 'large': 16px, 604 | 'default': 12px, 605 | 'small': 8px, 606 | ), 607 | $input-padding-horizontal 608 | ); 609 | 610 | // Cascader 611 | // css3 var in packages/theme-chalk/src/cascader.scss 612 | $cascader: () !default; 613 | $cascader: map.merge( 614 | ( 615 | 'menu-text-color': getCssVar('text-color-regular'), 616 | 'menu-selected-text-color': getCssVar('color-primary'), 617 | 'menu-fill': getCssVar('bg-color', 'overlay'), 618 | 'menu-font-size': getCssVar('font-size-base'), 619 | 'menu-radius': getCssVar('border-radius-base'), 620 | 'menu-border': solid 1px getCssVar('border-color-light'), 621 | 'menu-shadow': getCssVar('box-shadow-light'), 622 | 'node-background-hover': getCssVar('fill-color', 'light'), 623 | 'node-color-disabled': getCssVar('text-color-placeholder'), 624 | 'color-empty': getCssVar('text-color-placeholder'), 625 | 'tag-background': getCssVar('fill-color'), 626 | ), 627 | $cascader 628 | ); 629 | //statistic 630 | // css3 var in packages/theme-chalk/src/statistic.scss 631 | $statistic: () !default; 632 | $statistic: map.merge( 633 | ( 634 | 'title-font-weight': 400, 635 | 'title-font-size': getCssVar('font-size', 'extra-small'), 636 | 'title-color': getCssVar('text-color', 'regular'), 637 | 'content-font-weight': 400, 638 | 'content-font-size': getCssVar('font-size', 'extra-large'), 639 | 'content-color': getCssVar('text-color', 'primary'), 640 | ), 641 | $statistic 642 | ); 643 | // Button 644 | // css3 var in packages/theme-chalk/src/button.scss 645 | $button: () !default; 646 | $button: map.merge( 647 | ( 648 | 'font-weight': getCssVar('font-weight-primary'), 649 | 'border-color': getCssVar('border-color'), 650 | 'bg-color': getCssVar('fill-color', 'blank'), 651 | 'text-color': getCssVar('text-color', 'regular'), 652 | 'disabled-text-color': getCssVar('disabled-text-color'), 653 | 'disabled-bg-color': getCssVar('fill-color', 'blank'), 654 | 'disabled-border-color': getCssVar('border-color-light'), 655 | 'divide-border-color': rgba($color-white, 0.5), 656 | 'hover-text-color': getCssVar('color-primary'), 657 | 'hover-bg-color': getCssVar('color-primary', 'light-9'), 658 | 'hover-border-color': getCssVar('color-primary-light-7'), 659 | 'active-text-color': getCssVar('button-hover-text-color'), 660 | 'active-border-color': getCssVar('color-primary'), 661 | 'active-bg-color': getCssVar('button', 'hover-bg-color'), 662 | 'outline-color': getCssVar('color-primary', 'light-5'), 663 | 'hover-link-text-color': getCssVar('color-info'), 664 | 'active-color': getCssVar('text-color', 'primary'), 665 | ), 666 | $button 667 | ); 668 | 669 | $button-border-width: $border-width !default; 670 | 671 | // need mix, so do not use css var 672 | $button-hover-tint-percent: 20%; 673 | $button-active-shade-percent: 10%; 674 | 675 | $button-border-color: () !default; 676 | $button-bg-color: () !default; 677 | $button-text-color: () !default; 678 | 679 | @each $type in $types { 680 | $button-border-color: map.merge( 681 | ( 682 | $type: map.get($colors, $type, 'base'), 683 | ), 684 | $button-border-color 685 | ) !global; 686 | 687 | $button-bg-color: map.merge( 688 | ( 689 | $type: map.get($colors, $type, 'base'), 690 | ), 691 | $button-bg-color 692 | ) !global; 693 | } 694 | 695 | $button-font-size: () !default; 696 | $button-font-size: map.merge( 697 | ( 698 | 'large': getCssVar('font-size', 'base'), 699 | 'default': getCssVar('font-size', 'base'), 700 | 'small': 12px, 701 | ), 702 | $button-font-size 703 | ); 704 | 705 | $button-border-radius: () !default; 706 | $button-border-radius: map.merge( 707 | ( 708 | 'large': getCssVar('border-radius', 'base'), 709 | 'default': getCssVar('border-radius', 'base'), 710 | 'small': calc(#{getCssVar('border-radius', 'base')} - 1px), 711 | ), 712 | $button-border-radius 713 | ); 714 | 715 | $button-padding-vertical: () !default; 716 | $button-padding-vertical: map.merge( 717 | ( 718 | 'large': 13px, 719 | 'default': 9px, 720 | 'small': 6px, 721 | ), 722 | $button-padding-vertical 723 | ); 724 | 725 | $button-padding-horizontal: () !default; 726 | $button-padding-horizontal: map.merge( 727 | ( 728 | 'large': 20px, 729 | 'default': 16px, 730 | 'small': 12px, 731 | ), 732 | $button-padding-horizontal 733 | ); 734 | 735 | // Switch 736 | // css3 var in packages/theme-chalk/src/switch.scss 737 | $switch: () !default; 738 | $switch: map.merge( 739 | ( 740 | 'on-color': getCssVar('color-primary'), 741 | 'off-color': getCssVar('border-color'), 742 | ), 743 | $switch 744 | ); 745 | 746 | // Dialog 747 | // css3 var in packages/theme-chalk/src/dialog.scss 748 | $dialog: () !default; 749 | $dialog: map.merge( 750 | ( 751 | 'width': 50%, 752 | 'margin-top': 15vh, 753 | 'bg-color': getCssVar('bg-color'), 754 | 'box-shadow': getCssVar('box-shadow'), 755 | 'title-font-size': getCssVar('font-size-large'), 756 | 'content-font-size': 14px, 757 | 'font-line-height': getCssVar('font-line-height-primary'), 758 | 'padding-primary': 20px, 759 | 'border-radius': getCssVar('border-radius-small'), 760 | ), 761 | $dialog 762 | ); 763 | 764 | // Table 765 | // css3 var in packages/theme-chalk/src/table.scss 766 | $table: () !default; 767 | $table: map.merge( 768 | ( 769 | 'border-color': getCssVar('border-color-lighter'), 770 | 'border': 1px solid getCssVar('table-border-color'), 771 | 'text-color': getCssVar('text-color-regular'), 772 | 'header-text-color': getCssVar('text-color-secondary'), 773 | 'row-hover-bg-color': getCssVar('fill-color', 'light'), 774 | 'current-row-bg-color': getCssVar('color-primary-light-9'), 775 | 'header-bg-color': getCssVar('bg-color'), 776 | 'fixed-box-shadow': getCssVar('box-shadow', 'light'), 777 | 'bg-color': getCssVar('fill-color', 'blank'), 778 | 'tr-bg-color': getCssVar('fill-color', 'blank'), 779 | 'expanded-cell-bg-color': getCssVar('fill-color', 'blank'), 780 | 'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%), 781 | 'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%), 782 | ), 783 | $table 784 | ); 785 | 786 | $table-font-size: () !default; 787 | $table-font-size: map.merge( 788 | ( 789 | 'large': getCssVar('font-size', 'base'), 790 | 'default': 14px, 791 | 'small': 12px, 792 | ), 793 | $table-font-size 794 | ); 795 | 796 | $table-padding: () !default; 797 | $table-padding: map.merge( 798 | ( 799 | 'large': 12px 0, 800 | 'default': 8px 0, 801 | 'small': 4px 0, 802 | ), 803 | $table-padding 804 | ); 805 | 806 | $table-cell-padding: () !default; 807 | $table-cell-padding: map.merge( 808 | ( 809 | 'large': 0 16px, 810 | 'default': 0 12px, 811 | 'small': 0 8px, 812 | ), 813 | $table-cell-padding 814 | ); 815 | 816 | // Pagination 817 | // css3 var in packages/theme-chalk/src/pagination.scss 818 | $pagination: () !default; 819 | $pagination: map.merge( 820 | ( 821 | 'font-size': 14px, 822 | 'bg-color': getCssVar('fill-color', 'blank'), 823 | 'text-color': getCssVar('text-color-primary'), 824 | 'border-radius': 2px, 825 | 'button-color': getCssVar('text-color-primary'), 826 | 'button-width': 32px, 827 | 'button-height': 32px, 828 | 'button-disabled-color': getCssVar('text-color-placeholder'), 829 | 'button-disabled-bg-color': getCssVar('fill-color', 'blank'), 830 | 'button-bg-color': getCssVar('fill-color'), 831 | 'hover-color': getCssVar('color-primary'), 832 | 'font-size-small': 12px, 833 | 'button-width-small': 24px, 834 | 'button-height-small': 24px, 835 | 'item-gap': 16px, 836 | ), 837 | $pagination 838 | ); 839 | 840 | // Popup 841 | // css3 var in packages/theme-chalk/src/popup.scss 842 | $popup: () !default; 843 | $popup: map.merge( 844 | ( 845 | 'modal-bg-color': getCssVar('color-black'), 846 | 'modal-opacity': 0.5, 847 | ), 848 | $popup 849 | ); 850 | 851 | // Popover 852 | // css3 var in packages/theme-chalk/src/popover.scss 853 | $popover: () !default; 854 | $popover: map.merge( 855 | ( 856 | 'bg-color': getCssVar('bg-color', 'overlay'), 857 | 'font-size': getCssVar('font-size-base'), 858 | 'border-color': getCssVar('border-color-lighter'), 859 | 'padding': 12px, 860 | 'padding-large': 18px 20px, 861 | 'title-font-size': 16px, 862 | 'title-text-color': getCssVar('text-color-primary'), 863 | 'border-radius': 4px, 864 | ), 865 | $popover 866 | ); 867 | 868 | // popper 869 | // Pay attention to the difference between 'popper' and 'popover' 870 | $popper: () !default; 871 | $popper: map.merge( 872 | ( 873 | 'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px), 874 | ), 875 | $popper 876 | ); 877 | 878 | // skeleton 879 | $skeleton: () !default; 880 | $skeleton: map.merge( 881 | ( 882 | 'color': getCssVar('fill-color'), 883 | 'to-color': getCssVar('fill-color', 'darker'), 884 | ), 885 | $skeleton 886 | ); 887 | 888 | // Tag 889 | // css3 var in packages/theme-chalk/src/tag.scss 890 | $tag: () !default; 891 | $tag: map.merge( 892 | ( 893 | 'font-size': 12px, 894 | 'border-radius': 4px, 895 | 'border-radius-rounded': 9999px, 896 | ), 897 | $tag 898 | ); 899 | 900 | $tag-height: () !default; 901 | $tag-height: map.merge( 902 | ( 903 | 'large': 32px, 904 | 'default': 24px, 905 | 'small': 20px, 906 | ), 907 | $tag-height 908 | ); 909 | 910 | $tag-padding: () !default; 911 | $tag-padding: map.merge( 912 | ( 913 | 'large': 12px, 914 | 'default': 10px, 915 | 'small': 8px, 916 | ), 917 | $tag-padding 918 | ); 919 | 920 | $tag-icon-size: () !default; 921 | $tag-icon-size: map.merge( 922 | ( 923 | 'large': 16px, 924 | 'default': 14px, 925 | 'small': 12px, 926 | ), 927 | $tag-icon-size 928 | ); 929 | 930 | // Text 931 | // css3 var in packages/theme-chalk/src/text.scss 932 | $text: () !default; 933 | $text: map.merge( 934 | ( 935 | 'font-size': getCssVar('font-size', 'base'), 936 | 'color': getCssVar('text-color', 'regular'), 937 | ), 938 | $text 939 | ); 940 | 941 | $text-font-size: () !default; 942 | $text-font-size: map.merge( 943 | ( 944 | 'large': getCssVar('font-size', 'medium'), 945 | 'default': getCssVar('font-size', 'base'), 946 | 'small': getCssVar('font-size', 'extra-small'), 947 | ), 948 | $text-font-size 949 | ); 950 | 951 | // Tree 952 | // css3 var in packages/theme-chalk/src/tree.scss 953 | $tree: () !default; 954 | $tree: map.merge( 955 | ( 956 | 'node-hover-bg-color': getCssVar('fill-color', 'light'), 957 | 'text-color': getCssVar('text-color-regular'), 958 | 'expand-icon-color': getCssVar('text-color-placeholder'), 959 | ), 960 | $tree 961 | ); 962 | 963 | // Dropdown 964 | $dropdown: () !default; 965 | $dropdown: map.merge( 966 | ( 967 | 'menu-box-shadow': getCssVar('box-shadow-light'), 968 | 'menuItem-hover-fill': getCssVar('color-primary-light-9'), 969 | 'menuItem-hover-color': getCssVar('color-primary'), 970 | 'menu-index': 10, 971 | ), 972 | $dropdown 973 | ); 974 | 975 | // drawer 976 | $drawer: () !default; 977 | $drawer: map.merge( 978 | ( 979 | 'bg-color': 980 | var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}), 981 | 'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px), 982 | ), 983 | $drawer 984 | ); 985 | 986 | // Badge 987 | // css3 var in packages/theme-chalk/src/badge.scss 988 | $badge: () !default; 989 | $badge: map.merge( 990 | ( 991 | 'bg-color': getCssVar('color-danger'), 992 | 'radius': 10px, 993 | 'font-size': 12px, 994 | 'padding': 6px, 995 | 'size': 18px, 996 | ), 997 | $badge 998 | ); 999 | 1000 | // Card 1001 | $card: () !default; 1002 | $card: map.merge( 1003 | ( 1004 | 'border-color': getCssVar('border-color', 'light'), 1005 | 'border-radius': 4px, 1006 | 'padding': 20px, 1007 | 'bg-color': getCssVar('fill-color', 'blank'), 1008 | ), 1009 | $card 1010 | ); 1011 | 1012 | // Slider 1013 | // css3 var in packages/theme-chalk/src/slider.scss 1014 | $slider: () !default; 1015 | $slider: map.merge( 1016 | ( 1017 | 'main-bg-color': getCssVar('color-primary'), 1018 | 'runway-bg-color': getCssVar('border-color-light'), 1019 | 'stop-bg-color': getCssVar('color-white'), 1020 | 'disabled-color': getCssVar('text-color-placeholder'), 1021 | 'border-radius': 3px, 1022 | 'height': 6px, 1023 | 'button-size': 20px, 1024 | 'button-wrapper-size': 36px, 1025 | 'button-wrapper-offset': -15px, 1026 | ), 1027 | $slider 1028 | ); 1029 | 1030 | // Menu 1031 | // css3 var in packages/theme-chalk/src/menu.scss 1032 | $menu: () !default; 1033 | $menu: map.merge( 1034 | ( 1035 | 'active-color': getCssVar('color-primary'), 1036 | 'text-color': getCssVar('text-color-primary'), 1037 | 'hover-text-color': getCssVar('color-primary'), 1038 | 'bg-color': getCssVar('fill-color', 'blank'), 1039 | 'hover-bg-color': getCssVar('color-primary-light-9'), 1040 | 'item-height': 56px, 1041 | 'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px), 1042 | 'horizontal-sub-item-height': 36px, 1043 | 'item-font-size': getCssVar('font-size-base'), 1044 | 'item-hover-fill': getCssVar('color-primary-light-9'), 1045 | 'border-color': getCssVar('border-color'), 1046 | 'base-level-padding': 20px, 1047 | 'level-padding': 20px, 1048 | 'icon-width': 24px, 1049 | ), 1050 | $menu 1051 | ); 1052 | 1053 | // Rate 1054 | $rate: () !default; 1055 | $rate: map.merge( 1056 | ( 1057 | 'height': 20px, 1058 | 'font-size': getCssVar('font-size-base'), 1059 | 'icon-size': 18px, 1060 | 'icon-margin': 6px, 1061 | // seems not be used, to be removed 1062 | // 'icon-color': getCssVar('text-color-placeholder), 1063 | 'void-color': getCssVar('border-color', 'darker'), 1064 | 'fill-color': #f7ba2a, 1065 | 'disabled-void-color': getCssVar('fill-color'), 1066 | 'text-color': getCssVar('text-color', 'primary'), 1067 | ), 1068 | $rate 1069 | ); 1070 | 1071 | // DatePicker 1072 | // css3 var packages/theme-chalk/src/date-picker/var.scss 1073 | $datepicker: () !default; 1074 | $datepicker: map.merge( 1075 | ( 1076 | 'text-color': getCssVar('text-color-regular'), 1077 | 'off-text-color': getCssVar('text-color-placeholder'), 1078 | 'header-text-color': getCssVar('text-color-regular'), 1079 | 'icon-color': getCssVar('text-color-primary'), 1080 | 'border-color': getCssVar('disabled-border-color'), 1081 | 'inner-border-color': getCssVar('border-color-light'), 1082 | 'inrange-bg-color': getCssVar('border-color-extra-light'), 1083 | 'inrange-hover-bg-color': getCssVar('border-color-extra-light'), 1084 | 'active-color': getCssVar('color-primary'), 1085 | 'hover-text-color': getCssVar('color-primary'), 1086 | ), 1087 | $datepicker 1088 | ); 1089 | 1090 | $date-editor: () !default; 1091 | $date-editor: map.merge( 1092 | ( 1093 | 'width': 220px, 1094 | 'monthrange-width': 300px, 1095 | 'daterange-width': 350px, 1096 | 'datetimerange-width': 400px, 1097 | ), 1098 | $date-editor 1099 | ); 1100 | 1101 | // Loading 1102 | // css3 var in packages/theme-chalk/src/loading.scss 1103 | $loading: () !default; 1104 | $loading: map.merge( 1105 | ( 1106 | 'spinner-size': 42px, 1107 | 'fullscreen-spinner-size': 50px, 1108 | ), 1109 | $loading 1110 | ); 1111 | 1112 | // Scrollbar 1113 | // css3 var in packages/theme-chalk/src/scrollbar.scss 1114 | $scrollbar: () !default; 1115 | $scrollbar: map.merge( 1116 | ( 1117 | 'opacity': 0.3, 1118 | 'bg-color': getCssVar('text-color-secondary'), 1119 | 'hover-opacity': 0.5, 1120 | 'hover-bg-color': getCssVar('text-color-secondary'), 1121 | ), 1122 | $scrollbar 1123 | ); 1124 | 1125 | // Carousel 1126 | // css3 var in packages/theme-chalk/src/carousel.scss 1127 | $carousel: () !default; 1128 | $carousel: map.merge( 1129 | ( 1130 | 'arrow-font-size': 12px, 1131 | 'arrow-size': 36px, 1132 | 'arrow-background': rgba(31, 45, 61, 0.11), 1133 | 'arrow-hover-background': rgba(31, 45, 61, 0.23), 1134 | 'indicator-width': 30px, 1135 | 'indicator-height': 2px, 1136 | 'indicator-padding-horizontal': 4px, 1137 | 'indicator-padding-vertical': 12px, 1138 | 'indicator-out-color': getCssVar('border-color-hover'), 1139 | ), 1140 | $carousel 1141 | ); 1142 | 1143 | // Collapse 1144 | // css3 var in packages/theme-chalk/src/collapse.scss 1145 | $collapse: () !default; 1146 | $collapse: map.merge( 1147 | ( 1148 | 'border-color': getCssVar('border-color-lighter'), 1149 | 'header-height': 48px, 1150 | 'header-bg-color': getCssVar('fill-color', 'blank'), 1151 | 'header-text-color': getCssVar('text-color-primary'), 1152 | 'header-font-size': 13px, 1153 | 'content-bg-color': getCssVar('fill-color', 'blank'), 1154 | 'content-font-size': 13px, 1155 | 'content-text-color': getCssVar('text-color-primary'), 1156 | ), 1157 | $collapse 1158 | ); 1159 | 1160 | // Transfer 1161 | // css3 var in packages/theme-chalk/src/transfer.scss 1162 | $transfer: () !default; 1163 | $transfer: map.merge( 1164 | ( 1165 | 'border-color': getCssVar('border-color-lighter'), 1166 | 'border-radius': getCssVar('border-radius-base'), 1167 | 'panel-width': 200px, 1168 | 'panel-header-height': 40px, 1169 | 'panel-header-bg-color': getCssVar('fill-color', 'light'), 1170 | 'panel-footer-height': 40px, 1171 | 'panel-body-height': 278px, 1172 | 'item-height': 30px, 1173 | 'filter-height': 32px, 1174 | ), 1175 | $transfer 1176 | ); 1177 | 1178 | // Timeline 1179 | // css3 var in packages/theme-chalk/src/timeline-item.scss 1180 | $timeline: () !default; 1181 | $timeline: map.merge( 1182 | ( 1183 | 'node-size-normal': 12px, 1184 | 'node-size-large': 14px, 1185 | 'node-color': getCssVar('border-color-light'), 1186 | ), 1187 | $timeline 1188 | ); 1189 | 1190 | // Tabs 1191 | // css3 var in packages/theme-chalk/src/tabs.scss 1192 | $tabs: () !default; 1193 | $tabs: map.merge( 1194 | ( 1195 | 'header-height': 40px, 1196 | ), 1197 | $tabs 1198 | ); 1199 | 1200 | // Backtop 1201 | // css3 var in packages/theme-chalk/src/backtop.scss 1202 | $backtop: () !default; 1203 | $backtop: map.merge( 1204 | ( 1205 | 'bg-color': getCssVar('bg-color', 'overlay'), 1206 | 'text-color': getCssVar('color-primary'), 1207 | 'hover-bg-color': getCssVar('border-color-extra-light'), 1208 | ), 1209 | $backtop 1210 | ); 1211 | 1212 | // Link 1213 | // css3 var in packages/theme-chalk/src/link.scss 1214 | $link: () !default; 1215 | $link: map.merge( 1216 | ( 1217 | 'font-size': getCssVar('font-size-base'), 1218 | 'font-weight': getCssVar('font-weight-primary'), 1219 | 'text-color': getCssVar('text-color-regular'), 1220 | 'hover-text-color': getCssVar('color-primary'), 1221 | 'disabled-text-color': getCssVar('text-color-placeholder'), 1222 | ), 1223 | $link 1224 | ); 1225 | 1226 | $link-text-color: () !default; 1227 | 1228 | @each $type in $types { 1229 | $link-text-color: map.merge( 1230 | $link-text-color, 1231 | ( 1232 | $type: map.get($colors, $type, 'base'), 1233 | ) 1234 | ) !global; 1235 | } 1236 | 1237 | // Calendar 1238 | // css3 var in packages/theme-chalk/src/calendar.scss 1239 | $calendar: () !default; 1240 | $calendar: map.merge( 1241 | ( 1242 | 'border': 1243 | var( 1244 | #{getCssVarName('table-border')}, 1245 | 1px solid #{getCssVar('border-color-lighter')} 1246 | ), 1247 | 'header-border-bottom': getCssVar('calendar-border'), 1248 | 'selected-bg-color': getCssVar('color', 'primary', 'light-9'), 1249 | 'cell-width': 85px, 1250 | ), 1251 | $calendar 1252 | ); 1253 | 1254 | // Form 1255 | // css3 var in packages/theme-chalk/src/form.scss 1256 | $form: () !default; 1257 | $form: map.merge( 1258 | ( 1259 | 'label-font-size': getCssVar('font-size-base'), 1260 | 'inline-content-width': 220px, 1261 | ), 1262 | $form 1263 | ); 1264 | 1265 | // Avatar 1266 | // css3 var in packages/theme-chalk/src/avatar.scss 1267 | $avatar: () !default; 1268 | $avatar: map.merge( 1269 | ( 1270 | 'text-color': getCssVar('color-white'), 1271 | 'bg-color': getCssVar('text-color', 'disabled'), 1272 | 'text-size': 14px, 1273 | 'icon-size': 18px, 1274 | 'border-radius': getCssVar('border-radius-base'), 1275 | ), 1276 | $avatar 1277 | ); 1278 | 1279 | $avatar-size: () !default; 1280 | $avatar-size: map.merge( 1281 | ( 1282 | 'large': 56px, 1283 | 'default': 40px, 1284 | 'small': 24px, 1285 | ), 1286 | $avatar-size 1287 | ); 1288 | 1289 | // Empty 1290 | // css3 var in packages/theme-chalk/src/empty.scss 1291 | $empty: () !default; 1292 | $empty: map.merge( 1293 | ( 1294 | 'padding': 40px 0, 1295 | 'image-width': 160px, 1296 | 'description-margin-top': 20px, 1297 | 'bottom-margin-top': 20px, 1298 | 'fill-color-0': getCssVar('color-white'), 1299 | 'fill-color-1': #fcfcfd, 1300 | 'fill-color-2': #f8f9fb, 1301 | 'fill-color-3': #f7f8fc, 1302 | 'fill-color-4': #eeeff3, 1303 | 'fill-color-5': #edeef2, 1304 | 'fill-color-6': #e9ebef, 1305 | 'fill-color-7': #e5e7e9, 1306 | 'fill-color-8': #e0e3e9, 1307 | 'fill-color-9': #d5d7de, 1308 | ), 1309 | $empty 1310 | ); 1311 | 1312 | // Descriptions 1313 | // css3 var in packages/theme-chalk/src/descriptions.scss 1314 | $descriptions: () !default; 1315 | $descriptions: map.merge( 1316 | ( 1317 | 'table-border': 1px solid getCssVar('border-color-lighter'), 1318 | 'item-bordered-label-background': getCssVar('fill-color', 'light'), 1319 | ), 1320 | $descriptions 1321 | ); 1322 | 1323 | // Result 1324 | // css3 var in packages/theme-chalk/src/result.scss 1325 | $result: () !default; 1326 | $result: map.merge( 1327 | ( 1328 | 'padding': 40px 30px, 1329 | 'icon-font-size': 64px, 1330 | 'title-font-size': 20px, 1331 | 'title-margin-top': 20px, 1332 | 'subtitle-margin-top': 10px, 1333 | 'extra-margin-top': 30px, 1334 | ), 1335 | $result 1336 | ); 1337 | 1338 | // Upload 1339 | // css3 var in packages/theme-chalk/src/upload.scss 1340 | $upload: () !default; 1341 | $upload: map.merge( 1342 | ( 1343 | 'dragger-padding-horizontal': 40px, 1344 | 'dragger-padding-vertical': 10px, 1345 | ), 1346 | $upload 1347 | ); 1348 | 1349 | // transition 1350 | $transition: () !default; 1351 | $transition: map.merge( 1352 | ( 1353 | 'all': all getCssVar('transition-duration') 1354 | getCssVar('transition-function-ease-in-out-bezier'), 1355 | 'fade': opacity getCssVar('transition-duration') 1356 | getCssVar('transition-function-fast-bezier'), 1357 | 'md-fade': ( 1358 | transform getCssVar('transition-duration') 1359 | getCssVar('transition-function-fast-bezier'), 1360 | opacity getCssVar('transition-duration') 1361 | getCssVar('transition-function-fast-bezier'), 1362 | ), 1363 | 'fade-linear': opacity getCssVar('transition-duration-fast') linear, 1364 | 'border': border-color getCssVar('transition-duration-fast') 1365 | getCssVar('transition-function-ease-in-out-bezier'), 1366 | 'box-shadow': box-shadow getCssVar('transition-duration-fast') 1367 | getCssVar('transition-function-ease-in-out-bezier'), 1368 | 'color': color getCssVar('transition-duration-fast') 1369 | getCssVar('transition-function-ease-in-out-bezier'), 1370 | ), 1371 | $transition 1372 | ); 1373 | 1374 | $transition-duration: () !default; 1375 | $transition-duration: map.merge( 1376 | ( 1377 | '': 0.3s, 1378 | 'fast': 0.2s, 1379 | ), 1380 | $transition-duration 1381 | ); 1382 | 1383 | $transition-function: () !default; 1384 | $transition-function: map.merge( 1385 | ( 1386 | 'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1), 1387 | 'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1), 1388 | ), 1389 | $transition-function 1390 | ); 1391 | 1392 | // header 1393 | $header: () !default; 1394 | $header: map.merge( 1395 | ( 1396 | 'padding': 0 20px, 1397 | 'height': 60px, 1398 | ), 1399 | $header 1400 | ); 1401 | // main 1402 | $main: () !default; 1403 | $main: map.merge( 1404 | ( 1405 | 'padding': 20px, 1406 | ), 1407 | $main 1408 | ); 1409 | // footer 1410 | $footer: () !default; 1411 | $footer: map.merge( 1412 | ( 1413 | 'padding': 0 20px, 1414 | 'height': 60px, 1415 | ), 1416 | $footer 1417 | ); 1418 | 1419 | // Break-point 1420 | $sm: 768px !default; 1421 | $md: 992px !default; 1422 | $lg: 1200px !default; 1423 | $xl: 1920px !default; 1424 | 1425 | $breakpoints: ( 1426 | 'xs': '(max-width: #{$sm})', 1427 | 'sm': '(min-width: #{$sm})', 1428 | 'md': '(min-width: #{$md})', 1429 | 'lg': '(min-width: #{$lg})', 1430 | 'xl': '(min-width: #{$xl})', 1431 | ) !default; 1432 | 1433 | $breakpoints-spec: ( 1434 | 'xs-only': '(max-width: #{$sm - 1})', 1435 | 'sm-and-up': '(min-width: #{$sm})', 1436 | 'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})', 1437 | 'sm-and-down': '(max-width: #{$md - 1})', 1438 | 'md-and-up': '(min-width: #{$md})', 1439 | 'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})', 1440 | 'md-and-down': '(max-width: #{$lg - 1})', 1441 | 'lg-and-up': '(min-width: #{$lg})', 1442 | 'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})', 1443 | 'lg-and-down': '(max-width: #{$xl - 1})', 1444 | 'xl-only': '(min-width: #{$xl})', 1445 | ) !default; 1446 | -------------------------------------------------------------------------------- /packages/theme-chalk/src/index.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* Element Chalk Variables */ 3 | :root { 4 | --u-color-white: #ffffff; 5 | --u-color-black: #000000; 6 | --u-color-primary-rgb: 64, 158, 255; 7 | --u-color-success-rgb: 103, 194, 58; 8 | --u-color-warning-rgb: 230, 162, 60; 9 | --u-color-danger-rgb: 245, 108, 108; 10 | --u-color-error-rgb: 245, 108, 108; 11 | --u-color-info-rgb: 144, 147, 153; 12 | --u-font-size-extra-large: 20px; 13 | --u-font-size-large: 18px; 14 | --u-font-size-medium: 16px; 15 | --u-font-size-base: 14px; 16 | --u-font-size-small: 13px; 17 | --u-font-size-extra-small: 12px; 18 | --u-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; 19 | --u-font-weight-primary: 500; 20 | --u-font-line-height-primary: 24px; 21 | --u-index-normal: 1; 22 | --u-index-top: 1000; 23 | --u-index-popper: 2000; 24 | --u-border-radius-base: 4px; 25 | --u-border-radius-small: 2px; 26 | --u-border-radius-round: 20px; 27 | --u-border-radius-circle: 100%; 28 | --u-transition-duration: 0.3s; 29 | --u-transition-duration-fast: 0.2s; 30 | --u-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1); 31 | --u-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1); 32 | --u-transition-all: all var(--u-transition-duration) var(--u-transition-function-ease-in-out-bezier); 33 | --u-transition-fade: opacity var(--u-transition-duration) var(--u-transition-function-fast-bezier); 34 | --u-transition-md-fade: transform var(--u-transition-duration) var(--u-transition-function-fast-bezier), opacity var(--u-transition-duration) var(--u-transition-function-fast-bezier); 35 | --u-transition-fade-linear: opacity var(--u-transition-duration-fast) linear; 36 | --u-transition-border: border-color var(--u-transition-duration-fast) var(--u-transition-function-ease-in-out-bezier); 37 | --u-transition-box-shadow: box-shadow var(--u-transition-duration-fast) var(--u-transition-function-ease-in-out-bezier); 38 | --u-transition-color: color var(--u-transition-duration-fast) var(--u-transition-function-ease-in-out-bezier); 39 | --u-component-size-large: 40px; 40 | --u-component-size: 32px; 41 | --u-component-size-small: 24px; 42 | } 43 | 44 | :root { 45 | color-scheme: light; 46 | --u-color-white: #ffffff; 47 | --u-color-black: #000000; 48 | --u-color-primary: #409eff; 49 | --u-color-primary-light-3: #79bbff; 50 | --u-color-primary-light-5: #a0cfff; 51 | --u-color-primary-light-7: #c6e2ff; 52 | --u-color-primary-light-8: #d9ecff; 53 | --u-color-primary-light-9: #ecf5ff; 54 | --u-color-primary-dark-2: #337ecc; 55 | --u-color-success: #67c23a; 56 | --u-color-success-light-3: #95d475; 57 | --u-color-success-light-5: #b3e19d; 58 | --u-color-success-light-7: #d1edc4; 59 | --u-color-success-light-8: #e1f3d8; 60 | --u-color-success-light-9: #f0f9eb; 61 | --u-color-success-dark-2: #529b2e; 62 | --u-color-warning: #e6a23c; 63 | --u-color-warning-light-3: #eebe77; 64 | --u-color-warning-light-5: #f3d19e; 65 | --u-color-warning-light-7: #f8e3c5; 66 | --u-color-warning-light-8: #faecd8; 67 | --u-color-warning-light-9: #fdf6ec; 68 | --u-color-warning-dark-2: #b88230; 69 | --u-color-danger: #f56c6c; 70 | --u-color-danger-light-3: #f89898; 71 | --u-color-danger-light-5: #fab6b6; 72 | --u-color-danger-light-7: #fcd3d3; 73 | --u-color-danger-light-8: #fde2e2; 74 | --u-color-danger-light-9: #fef0f0; 75 | --u-color-danger-dark-2: #c45656; 76 | --u-color-error: #f56c6c; 77 | --u-color-error-light-3: #f89898; 78 | --u-color-error-light-5: #fab6b6; 79 | --u-color-error-light-7: #fcd3d3; 80 | --u-color-error-light-8: #fde2e2; 81 | --u-color-error-light-9: #fef0f0; 82 | --u-color-error-dark-2: #c45656; 83 | --u-color-info: #909399; 84 | --u-color-info-light-3: #b1b3b8; 85 | --u-color-info-light-5: #c8c9cc; 86 | --u-color-info-light-7: #dedfe0; 87 | --u-color-info-light-8: #e9e9eb; 88 | --u-color-info-light-9: #f4f4f5; 89 | --u-color-info-dark-2: #73767a; 90 | --u-bg-color: #ffffff; 91 | --u-bg-color-page: #f2f3f5; 92 | --u-bg-color-overlay: #ffffff; 93 | --u-text-color-primary: #303133; 94 | --u-text-color-regular: #606266; 95 | --u-text-color-secondary: #909399; 96 | --u-text-color-placeholder: #a8abb2; 97 | --u-text-color-disabled: #c0c4cc; 98 | --u-border-color: #dcdfe6; 99 | --u-border-color-light: #e4e7ed; 100 | --u-border-color-lighter: #ebeef5; 101 | --u-border-color-extra-light: #f2f6fc; 102 | --u-border-color-dark: #d4d7de; 103 | --u-border-color-darker: #cdd0d6; 104 | --u-fill-color: #f0f2f5; 105 | --u-fill-color-light: #f5f7fa; 106 | --u-fill-color-lighter: #fafafa; 107 | --u-fill-color-extra-light: #fafcff; 108 | --u-fill-color-dark: #ebedf0; 109 | --u-fill-color-darker: #e6e8eb; 110 | --u-fill-color-blank: #ffffff; 111 | --u-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08); 112 | --u-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12); 113 | --u-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12); 114 | --u-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16); 115 | --u-disabled-bg-color: var(--u-fill-color-light); 116 | --u-disabled-text-color: var(--u-text-color-placeholder); 117 | --u-disabled-border-color: var(--u-border-color-light); 118 | --u-overlay-color: rgba(0, 0, 0, 0.8); 119 | --u-overlay-color-light: rgba(0, 0, 0, 0.7); 120 | --u-overlay-color-lighter: rgba(0, 0, 0, 0.5); 121 | --u-mask-color: rgba(255, 255, 255, 0.9); 122 | --u-mask-color-extra-light: rgba(255, 255, 255, 0.3); 123 | --u-border-width: 1px; 124 | --u-border-style: solid; 125 | --u-border-color-hover: var(--u-text-color-disabled); 126 | --u-border: var(--u-border-width) var(--u-border-style) var(--u-border-color); 127 | --u-svg-monochrome-grey: var(--u-border-color); 128 | } 129 | 130 | .u-button { 131 | --u-button-font-weight: var(--u-font-weight-primary); 132 | --u-button-border-color: var(--u-border-color); 133 | --u-button-bg-color: var(--u-fill-color-blank); 134 | --u-button-text-color: var(--u-text-color-regular); 135 | --u-button-disabled-text-color: var(--u-disabled-text-color); 136 | --u-button-disabled-bg-color: var(--u-fill-color-blank); 137 | --u-button-disabled-border-color: var(--u-border-color-light); 138 | --u-button-divide-border-color: rgba(255, 255, 255, 0.5); 139 | --u-button-hover-text-color: var(--u-color-primary); 140 | --u-button-hover-bg-color: var(--u-color-primary-light-9); 141 | --u-button-hover-border-color: var(--u-color-primary-light-7); 142 | --u-button-active-text-color: var(--u-button-hover-text-color); 143 | --u-button-active-border-color: var(--u-color-primary); 144 | --u-button-active-bg-color: var(--u-button-hover-bg-color); 145 | --u-button-outline-color: var(--u-color-primary-light-5); 146 | --u-button-hover-link-text-color: var(--u-color-info); 147 | --u-button-active-color: var(--u-text-color-primary); 148 | } 149 | 150 | .u-button { 151 | display: inline-flex; 152 | justify-content: center; 153 | align-items: center; 154 | line-height: 1; 155 | height: 32px; 156 | white-space: nowrap; 157 | cursor: pointer; 158 | color: var(--u-button-text-color); 159 | text-align: center; 160 | box-sizing: border-box; 161 | outline: none; 162 | transition: 0.1s; 163 | font-weight: var(--u-button-font-weight); 164 | user-select: none; 165 | vertical-align: middle; 166 | -webkit-appearance: none; 167 | background-color: var(--u-button-bg-color); 168 | border: var(--u-border); 169 | border-color: var(--u-button-border-color); 170 | padding: 8px 15px; 171 | font-size: var(--u-font-size-base); 172 | border-radius: var(--u-border-radius-base); 173 | } 174 | .u-button:hover, .u-button:focus { 175 | color: var(--u-button-hover-text-color); 176 | border-color: var(--u-button-hover-border-color); 177 | background-color: var(--u-button-hover-bg-color); 178 | outline: none; 179 | } 180 | .u-button:active { 181 | color: var(--u-button-active-text-color); 182 | border-color: var(--u-button-active-border-color); 183 | background-color: var(--u-button-active-bg-color); 184 | outline: none; 185 | } 186 | .u-button:focus-visible { 187 | outline: 2px solid var(--u-button-outline-color); 188 | outline-offset: 1px; 189 | } 190 | .u-button > span { 191 | display: inline-flex; 192 | align-items: center; 193 | } 194 | .u-button + .u-button { 195 | margin-left: 12px; 196 | } 197 | .u-button.is-round { 198 | padding: 8px 15px; 199 | } 200 | .u-button::-moz-focus-inner { 201 | border: 0; 202 | } 203 | .u-button [class*=u-icon] + span { 204 | margin-left: 6px; 205 | } 206 | .u-button [class*=u-icon] svg { 207 | vertical-align: bottom; 208 | } 209 | .u-button.is-plain { 210 | --u-button-hover-text-color: var(--u-color-primary); 211 | --u-button-hover-bg-color: var(--u-fill-color-blank); 212 | --u-button-hover-border-color: var(--u-color-primary); 213 | } 214 | 215 | .u-button.is-active { 216 | color: var(--u-button-active-text-color); 217 | border-color: var(--u-button-active-border-color); 218 | background-color: var(--u-button-active-bg-color); 219 | outline: none; 220 | } 221 | 222 | .u-button.is-disabled, .u-button.is-disabled:hover, .u-button.is-disabled:focus { 223 | color: var(--u-button-disabled-text-color); 224 | cursor: not-allowed; 225 | background-image: none; 226 | background-color: var(--u-button-disabled-bg-color); 227 | border-color: var(--u-button-disabled-border-color); 228 | } 229 | 230 | .u-button.is-loading { 231 | position: relative; 232 | pointer-events: none; 233 | } 234 | .u-button.is-loading:before { 235 | z-index: 1; 236 | pointer-events: none; 237 | content: ""; 238 | position: absolute; 239 | left: -1px; 240 | top: -1px; 241 | right: -1px; 242 | bottom: -1px; 243 | border-radius: inherit; 244 | background-color: var(--u-mask-color-extra-light); 245 | } 246 | 247 | .u-button.is-round { 248 | border-radius: var(--u-border-radius-round); 249 | } 250 | 251 | .u-button.is-circle { 252 | border-radius: 50%; 253 | padding: 8px; 254 | } 255 | 256 | .u-button.is-text { 257 | color: var(--u-button-text-color); 258 | border: 0 solid transparent; 259 | background-color: transparent; 260 | } 261 | .u-button.is-text.is-disabled { 262 | color: var(--u-button-disabled-text-color); 263 | background-color: transparent !important; 264 | } 265 | 266 | .u-button.is-text:not(.is-disabled):hover, .u-button.is-text:not(.is-disabled):focus { 267 | background-color: var(--u-fill-color-light); 268 | } 269 | .u-button.is-text:not(.is-disabled):focus-visible { 270 | outline: 2px solid var(--u-button-outline-color); 271 | outline-offset: 1px; 272 | } 273 | .u-button.is-text:not(.is-disabled):active { 274 | background-color: var(--u-fill-color); 275 | } 276 | .u-button.is-text:not(.is-disabled).is-has-bg { 277 | background-color: var(--u-fill-color-light); 278 | } 279 | .u-button.is-text:not(.is-disabled).is-has-bg:hover, .u-button.is-text:not(.is-disabled).is-has-bg:focus { 280 | background-color: var(--u-fill-color); 281 | } 282 | .u-button.is-text:not(.is-disabled).is-has-bg:active { 283 | background-color: var(--u-fill-color-dark); 284 | } 285 | 286 | .u-button__text--expand { 287 | letter-spacing: 0.3em; 288 | margin-right: -0.3em; 289 | } 290 | 291 | .u-button.is-link { 292 | border-color: transparent; 293 | color: var(--u-button-text-color); 294 | background: transparent; 295 | padding: 2px; 296 | height: auto; 297 | } 298 | .u-button.is-link:hover, .u-button.is-link:focus { 299 | color: var(--u-button-hover-link-text-color); 300 | } 301 | .u-button.is-link.is-disabled { 302 | color: var(--u-button-disabled-text-color); 303 | background-color: transparent !important; 304 | border-color: transparent !important; 305 | } 306 | 307 | .u-button.is-link:not(.is-disabled):hover, .u-button.is-link:not(.is-disabled):focus { 308 | border-color: transparent; 309 | background-color: transparent; 310 | } 311 | .u-button.is-link:not(.is-disabled):active { 312 | color: var(--u-button-active-color); 313 | border-color: transparent; 314 | background-color: transparent; 315 | } 316 | 317 | .u-button--text { 318 | border-color: transparent; 319 | background: transparent; 320 | color: var(--u-color-primary); 321 | padding-left: 0; 322 | padding-right: 0; 323 | } 324 | .u-button--text.is-disabled { 325 | color: var(--u-button-disabled-text-color); 326 | background-color: transparent !important; 327 | border-color: transparent !important; 328 | } 329 | 330 | .u-button--text:not(.is-disabled):hover, .u-button--text:not(.is-disabled):focus { 331 | color: var(--u-color-primary-light-3); 332 | border-color: transparent; 333 | background-color: transparent; 334 | } 335 | .u-button--text:not(.is-disabled):active { 336 | color: var(--u-color-primary-dark-2); 337 | border-color: transparent; 338 | background-color: transparent; 339 | } 340 | 341 | .u-button__link--expand { 342 | letter-spacing: 0.3em; 343 | margin-right: -0.3em; 344 | } 345 | 346 | .u-button--primary { 347 | --u-button-text-color: var(--u-color-white); 348 | --u-button-bg-color: var(--u-color-primary); 349 | --u-button-border-color: var(--u-color-primary); 350 | --u-button-outline-color: var(--u-color-primary-light-5); 351 | --u-button-active-color: var(--u-color-primary-dark-2); 352 | --u-button-hover-text-color: var(--u-color-white); 353 | --u-button-hover-link-text-color: var(--u-color-primary-light-5); 354 | --u-button-hover-bg-color: var(--u-color-primary-light-3); 355 | --u-button-hover-border-color: var(--u-color-primary-light-3); 356 | --u-button-active-bg-color: var(--u-color-primary-dark-2); 357 | --u-button-active-border-color: var(--u-color-primary-dark-2); 358 | --u-button-disabled-text-color: var(--u-color-white); 359 | --u-button-disabled-bg-color: var(--u-color-primary-light-5); 360 | --u-button-disabled-border-color: var(--u-color-primary-light-5); 361 | } 362 | .u-button--primary.is-plain, .u-button--primary.is-text, .u-button--primary.is-link { 363 | --u-button-text-color: var(--u-color-primary); 364 | --u-button-bg-color: var(--u-color-primary-light-9); 365 | --u-button-border-color: var(--u-color-primary-light-5); 366 | --u-button-hover-text-color: var(--u-color-white); 367 | --u-button-hover-bg-color: var(--u-color-primary); 368 | --u-button-hover-border-color: var(--u-color-primary); 369 | --u-button-active-text-color: var(--u-color-white); 370 | } 371 | .u-button--primary.is-plain.is-disabled, .u-button--primary.is-plain.is-disabled:hover, .u-button--primary.is-plain.is-disabled:focus, .u-button--primary.is-plain.is-disabled:active, .u-button--primary.is-text.is-disabled, .u-button--primary.is-text.is-disabled:hover, .u-button--primary.is-text.is-disabled:focus, .u-button--primary.is-text.is-disabled:active, .u-button--primary.is-link.is-disabled, .u-button--primary.is-link.is-disabled:hover, .u-button--primary.is-link.is-disabled:focus, .u-button--primary.is-link.is-disabled:active { 372 | color: var(--u-color-primary-light-5); 373 | background-color: var(--u-color-primary-light-9); 374 | border-color: var(--u-color-primary-light-8); 375 | } 376 | 377 | .u-button--success { 378 | --u-button-text-color: var(--u-color-white); 379 | --u-button-bg-color: var(--u-color-success); 380 | --u-button-border-color: var(--u-color-success); 381 | --u-button-outline-color: var(--u-color-success-light-5); 382 | --u-button-active-color: var(--u-color-success-dark-2); 383 | --u-button-hover-text-color: var(--u-color-white); 384 | --u-button-hover-link-text-color: var(--u-color-success-light-5); 385 | --u-button-hover-bg-color: var(--u-color-success-light-3); 386 | --u-button-hover-border-color: var(--u-color-success-light-3); 387 | --u-button-active-bg-color: var(--u-color-success-dark-2); 388 | --u-button-active-border-color: var(--u-color-success-dark-2); 389 | --u-button-disabled-text-color: var(--u-color-white); 390 | --u-button-disabled-bg-color: var(--u-color-success-light-5); 391 | --u-button-disabled-border-color: var(--u-color-success-light-5); 392 | } 393 | .u-button--success.is-plain, .u-button--success.is-text, .u-button--success.is-link { 394 | --u-button-text-color: var(--u-color-success); 395 | --u-button-bg-color: var(--u-color-success-light-9); 396 | --u-button-border-color: var(--u-color-success-light-5); 397 | --u-button-hover-text-color: var(--u-color-white); 398 | --u-button-hover-bg-color: var(--u-color-success); 399 | --u-button-hover-border-color: var(--u-color-success); 400 | --u-button-active-text-color: var(--u-color-white); 401 | } 402 | .u-button--success.is-plain.is-disabled, .u-button--success.is-plain.is-disabled:hover, .u-button--success.is-plain.is-disabled:focus, .u-button--success.is-plain.is-disabled:active, .u-button--success.is-text.is-disabled, .u-button--success.is-text.is-disabled:hover, .u-button--success.is-text.is-disabled:focus, .u-button--success.is-text.is-disabled:active, .u-button--success.is-link.is-disabled, .u-button--success.is-link.is-disabled:hover, .u-button--success.is-link.is-disabled:focus, .u-button--success.is-link.is-disabled:active { 403 | color: var(--u-color-success-light-5); 404 | background-color: var(--u-color-success-light-9); 405 | border-color: var(--u-color-success-light-8); 406 | } 407 | 408 | .u-button--warning { 409 | --u-button-text-color: var(--u-color-white); 410 | --u-button-bg-color: var(--u-color-warning); 411 | --u-button-border-color: var(--u-color-warning); 412 | --u-button-outline-color: var(--u-color-warning-light-5); 413 | --u-button-active-color: var(--u-color-warning-dark-2); 414 | --u-button-hover-text-color: var(--u-color-white); 415 | --u-button-hover-link-text-color: var(--u-color-warning-light-5); 416 | --u-button-hover-bg-color: var(--u-color-warning-light-3); 417 | --u-button-hover-border-color: var(--u-color-warning-light-3); 418 | --u-button-active-bg-color: var(--u-color-warning-dark-2); 419 | --u-button-active-border-color: var(--u-color-warning-dark-2); 420 | --u-button-disabled-text-color: var(--u-color-white); 421 | --u-button-disabled-bg-color: var(--u-color-warning-light-5); 422 | --u-button-disabled-border-color: var(--u-color-warning-light-5); 423 | } 424 | .u-button--warning.is-plain, .u-button--warning.is-text, .u-button--warning.is-link { 425 | --u-button-text-color: var(--u-color-warning); 426 | --u-button-bg-color: var(--u-color-warning-light-9); 427 | --u-button-border-color: var(--u-color-warning-light-5); 428 | --u-button-hover-text-color: var(--u-color-white); 429 | --u-button-hover-bg-color: var(--u-color-warning); 430 | --u-button-hover-border-color: var(--u-color-warning); 431 | --u-button-active-text-color: var(--u-color-white); 432 | } 433 | .u-button--warning.is-plain.is-disabled, .u-button--warning.is-plain.is-disabled:hover, .u-button--warning.is-plain.is-disabled:focus, .u-button--warning.is-plain.is-disabled:active, .u-button--warning.is-text.is-disabled, .u-button--warning.is-text.is-disabled:hover, .u-button--warning.is-text.is-disabled:focus, .u-button--warning.is-text.is-disabled:active, .u-button--warning.is-link.is-disabled, .u-button--warning.is-link.is-disabled:hover, .u-button--warning.is-link.is-disabled:focus, .u-button--warning.is-link.is-disabled:active { 434 | color: var(--u-color-warning-light-5); 435 | background-color: var(--u-color-warning-light-9); 436 | border-color: var(--u-color-warning-light-8); 437 | } 438 | 439 | .u-button--danger { 440 | --u-button-text-color: var(--u-color-white); 441 | --u-button-bg-color: var(--u-color-danger); 442 | --u-button-border-color: var(--u-color-danger); 443 | --u-button-outline-color: var(--u-color-danger-light-5); 444 | --u-button-active-color: var(--u-color-danger-dark-2); 445 | --u-button-hover-text-color: var(--u-color-white); 446 | --u-button-hover-link-text-color: var(--u-color-danger-light-5); 447 | --u-button-hover-bg-color: var(--u-color-danger-light-3); 448 | --u-button-hover-border-color: var(--u-color-danger-light-3); 449 | --u-button-active-bg-color: var(--u-color-danger-dark-2); 450 | --u-button-active-border-color: var(--u-color-danger-dark-2); 451 | --u-button-disabled-text-color: var(--u-color-white); 452 | --u-button-disabled-bg-color: var(--u-color-danger-light-5); 453 | --u-button-disabled-border-color: var(--u-color-danger-light-5); 454 | } 455 | .u-button--danger.is-plain, .u-button--danger.is-text, .u-button--danger.is-link { 456 | --u-button-text-color: var(--u-color-danger); 457 | --u-button-bg-color: var(--u-color-danger-light-9); 458 | --u-button-border-color: var(--u-color-danger-light-5); 459 | --u-button-hover-text-color: var(--u-color-white); 460 | --u-button-hover-bg-color: var(--u-color-danger); 461 | --u-button-hover-border-color: var(--u-color-danger); 462 | --u-button-active-text-color: var(--u-color-white); 463 | } 464 | .u-button--danger.is-plain.is-disabled, .u-button--danger.is-plain.is-disabled:hover, .u-button--danger.is-plain.is-disabled:focus, .u-button--danger.is-plain.is-disabled:active, .u-button--danger.is-text.is-disabled, .u-button--danger.is-text.is-disabled:hover, .u-button--danger.is-text.is-disabled:focus, .u-button--danger.is-text.is-disabled:active, .u-button--danger.is-link.is-disabled, .u-button--danger.is-link.is-disabled:hover, .u-button--danger.is-link.is-disabled:focus, .u-button--danger.is-link.is-disabled:active { 465 | color: var(--u-color-danger-light-5); 466 | background-color: var(--u-color-danger-light-9); 467 | border-color: var(--u-color-danger-light-8); 468 | } 469 | 470 | .u-button--info { 471 | --u-button-text-color: var(--u-color-white); 472 | --u-button-bg-color: var(--u-color-info); 473 | --u-button-border-color: var(--u-color-info); 474 | --u-button-outline-color: var(--u-color-info-light-5); 475 | --u-button-active-color: var(--u-color-info-dark-2); 476 | --u-button-hover-text-color: var(--u-color-white); 477 | --u-button-hover-link-text-color: var(--u-color-info-light-5); 478 | --u-button-hover-bg-color: var(--u-color-info-light-3); 479 | --u-button-hover-border-color: var(--u-color-info-light-3); 480 | --u-button-active-bg-color: var(--u-color-info-dark-2); 481 | --u-button-active-border-color: var(--u-color-info-dark-2); 482 | --u-button-disabled-text-color: var(--u-color-white); 483 | --u-button-disabled-bg-color: var(--u-color-info-light-5); 484 | --u-button-disabled-border-color: var(--u-color-info-light-5); 485 | } 486 | .u-button--info.is-plain, .u-button--info.is-text, .u-button--info.is-link { 487 | --u-button-text-color: var(--u-color-info); 488 | --u-button-bg-color: var(--u-color-info-light-9); 489 | --u-button-border-color: var(--u-color-info-light-5); 490 | --u-button-hover-text-color: var(--u-color-white); 491 | --u-button-hover-bg-color: var(--u-color-info); 492 | --u-button-hover-border-color: var(--u-color-info); 493 | --u-button-active-text-color: var(--u-color-white); 494 | } 495 | .u-button--info.is-plain.is-disabled, .u-button--info.is-plain.is-disabled:hover, .u-button--info.is-plain.is-disabled:focus, .u-button--info.is-plain.is-disabled:active, .u-button--info.is-text.is-disabled, .u-button--info.is-text.is-disabled:hover, .u-button--info.is-text.is-disabled:focus, .u-button--info.is-text.is-disabled:active, .u-button--info.is-link.is-disabled, .u-button--info.is-link.is-disabled:hover, .u-button--info.is-link.is-disabled:focus, .u-button--info.is-link.is-disabled:active { 496 | color: var(--u-color-info-light-5); 497 | background-color: var(--u-color-info-light-9); 498 | border-color: var(--u-color-info-light-8); 499 | } 500 | 501 | .u-button--large { 502 | --u-button-size: 40px; 503 | height: var(--u-button-size); 504 | padding: 12px 19px; 505 | font-size: var(--u-font-size-base); 506 | border-radius: var(--u-border-radius-base); 507 | } 508 | .u-button--large [class*=u-icon] + span { 509 | margin-left: 8px; 510 | } 511 | .u-button--large.is-round { 512 | padding: 12px 19px; 513 | } 514 | .u-button--large.is-circle { 515 | width: var(--u-button-size); 516 | padding: 12px; 517 | } 518 | 519 | .u-button--small { 520 | --u-button-size: 24px; 521 | height: var(--u-button-size); 522 | padding: 5px 11px; 523 | font-size: 12px; 524 | border-radius: calc(var(--u-border-radius-base) - 1px); 525 | } 526 | .u-button--small [class*=u-icon] + span { 527 | margin-left: 4px; 528 | } 529 | .u-button--small.is-round { 530 | padding: 5px 11px; 531 | } 532 | .u-button--small.is-circle { 533 | width: var(--u-button-size); 534 | padding: 5px; 535 | } 536 | 537 | .fade-in-linear-enter-active, 538 | .fade-in-linear-leave-active { 539 | transition: var(--u-transition-fade-linear); 540 | } 541 | 542 | .fade-in-linear-enter-from, 543 | .fade-in-linear-leave-to { 544 | opacity: 0; 545 | } 546 | 547 | .u-fade-in-linear-enter-active, 548 | .u-fade-in-linear-leave-active { 549 | transition: var(--u-transition-fade-linear); 550 | } 551 | 552 | .u-fade-in-linear-enter-from, 553 | .u-fade-in-linear-leave-to { 554 | opacity: 0; 555 | } 556 | 557 | .u-fade-in-enter-active, 558 | .u-fade-in-leave-active { 559 | transition: all var(--u-transition-duration) cubic-bezier(0.55, 0, 0.1, 1); 560 | } 561 | 562 | .u-fade-in-enter-from, 563 | .u-fade-in-leave-active { 564 | opacity: 0; 565 | } 566 | 567 | .u-zoom-in-center-enter-active, 568 | .u-zoom-in-center-leave-active { 569 | transition: all var(--u-transition-duration) cubic-bezier(0.55, 0, 0.1, 1); 570 | } 571 | 572 | .u-zoom-in-center-enter-from, 573 | .u-zoom-in-center-leave-active { 574 | opacity: 0; 575 | transform: scaleX(0); 576 | } 577 | 578 | .u-zoom-in-top-enter-active, 579 | .u-zoom-in-top-leave-active { 580 | opacity: 1; 581 | transform: scaleY(1); 582 | transition: var(--u-transition-md-fade); 583 | transform-origin: center top; 584 | } 585 | .u-zoom-in-top-enter-active[data-popper-placement^=top], 586 | .u-zoom-in-top-leave-active[data-popper-placement^=top] { 587 | transform-origin: center bottom; 588 | } 589 | 590 | .u-zoom-in-top-enter-from, 591 | .u-zoom-in-top-leave-active { 592 | opacity: 0; 593 | transform: scaleY(0); 594 | } 595 | 596 | .u-zoom-in-bottom-enter-active, 597 | .u-zoom-in-bottom-leave-active { 598 | opacity: 1; 599 | transform: scaleY(1); 600 | transition: var(--u-transition-md-fade); 601 | transform-origin: center bottom; 602 | } 603 | 604 | .u-zoom-in-bottom-enter-from, 605 | .u-zoom-in-bottom-leave-active { 606 | opacity: 0; 607 | transform: scaleY(0); 608 | } 609 | 610 | .u-zoom-in-left-enter-active, 611 | .u-zoom-in-left-leave-active { 612 | opacity: 1; 613 | transform: scale(1, 1); 614 | transition: var(--u-transition-md-fade); 615 | transform-origin: top left; 616 | } 617 | 618 | .u-zoom-in-left-enter-from, 619 | .u-zoom-in-left-leave-active { 620 | opacity: 0; 621 | transform: scale(0.45, 0.45); 622 | } 623 | 624 | .collapse-transition { 625 | transition: var(--u-transition-duration) height ease-in-out, var(--u-transition-duration) padding-top ease-in-out, var(--u-transition-duration) padding-bottom ease-in-out; 626 | } 627 | 628 | .u-collapse-transition-leave-active, 629 | .u-collapse-transition-enter-active { 630 | transition: var(--u-transition-duration) max-height ease-in-out, var(--u-transition-duration) padding-top ease-in-out, var(--u-transition-duration) padding-bottom ease-in-out; 631 | } 632 | 633 | .horizontal-collapse-transition { 634 | transition: var(--u-transition-duration) width ease-in-out, var(--u-transition-duration) padding-left ease-in-out, var(--u-transition-duration) padding-right ease-in-out; 635 | } 636 | 637 | .u-list-enter-active, 638 | .u-list-leave-active { 639 | transition: all 1s; 640 | } 641 | 642 | .u-list-enter-from, 643 | .u-list-leave-to { 644 | opacity: 0; 645 | transform: translateY(-30px); 646 | } 647 | 648 | .u-list-leave-active { 649 | position: absolute !important; 650 | } 651 | 652 | .u-opacity-transition { 653 | transition: opacity var(--u-transition-duration) cubic-bezier(0.55, 0, 0.1, 1); 654 | } 655 | 656 | .u-tree { 657 | --u-tree-node-hover-bg-color: var(--u-fill-color-light); 658 | --u-tree-text-color: var(--u-text-color-regular); 659 | --u-tree-expand-icon-color: var(--u-text-color-placeholder); 660 | } 661 | 662 | .u-tree { 663 | position: relative; 664 | cursor: default; 665 | background: var(--u-fill-color-blank); 666 | color: var(--u-tree-text-color); 667 | font-size: var(--u-font-size-base); 668 | } 669 | .u-tree__empty-block { 670 | position: relative; 671 | min-height: 60px; 672 | text-align: center; 673 | width: 100%; 674 | height: 100%; 675 | } 676 | 677 | .u-tree__empty-text { 678 | position: absolute; 679 | left: 50%; 680 | top: 50%; 681 | transform: translate(-50%, -50%); 682 | color: var(--u-text-color-secondary); 683 | font-size: var(--u-font-size-base); 684 | } 685 | 686 | .u-tree__drop-indicator { 687 | position: absolute; 688 | left: 0; 689 | right: 0; 690 | height: 1px; 691 | background-color: var(--u-color-primary); 692 | } 693 | 694 | .u-tree-node { 695 | white-space: nowrap; 696 | outline: none; 697 | } 698 | .u-tree-node:focus { 699 | /* focus */ 700 | } 701 | .u-tree-node:focus > .u-tree-node__content { 702 | background-color: var(--u-tree-node-hover-bg-color); 703 | } 704 | .u-tree-node.is-drop-inner > .u-tree-node__content .u-tree-node__label { 705 | background-color: var(--u-color-primary); 706 | color: #fff; 707 | } 708 | 709 | .u-tree-node__content { 710 | display: flex; 711 | align-items: center; 712 | height: 26px; 713 | cursor: pointer; 714 | } 715 | .u-tree-node__content > .u-tree-node__expand-icon { 716 | padding: 6px; 717 | box-sizing: content-box; 718 | } 719 | .u-tree-node__content > label.u-checkbox { 720 | margin-right: 8px; 721 | } 722 | .u-tree-node__content:hover { 723 | background-color: var(--u-tree-node-hover-bg-color); 724 | } 725 | .u-tree.is-dragging .u-tree-node__content { 726 | cursor: move; 727 | } 728 | .u-tree.is-dragging .u-tree-node__content * { 729 | pointer-events: none; 730 | } 731 | .u-tree.is-dragging.is-drop-not-allow .u-tree-node__content { 732 | cursor: not-allowed; 733 | } 734 | 735 | .u-tree-node__expand-icon { 736 | cursor: pointer; 737 | color: var(--u-tree-expand-icon-color); 738 | font-size: 12px; 739 | transform: rotate(0deg); 740 | transition: transform var(--u-transition-duration) ease-in-out; 741 | } 742 | .u-tree-node__expand-icon.expanded { 743 | transform: rotate(90deg); 744 | } 745 | .u-tree-node__expand-icon.is-leaf { 746 | color: transparent; 747 | cursor: default; 748 | } 749 | .u-tree-node__expand-icon.is-hidden { 750 | visibility: hidden; 751 | } 752 | 753 | .u-tree-node__loading-icon { 754 | margin-right: 8px; 755 | font-size: var(--u-font-size-base); 756 | color: var(--u-tree-expand-icon-color); 757 | } 758 | 759 | .u-tree-node > .u-tree-node__children { 760 | overflow: hidden; 761 | background-color: transparent; 762 | } 763 | .u-tree-node.is-expanded > .u-tree-node__children { 764 | display: block; 765 | } 766 | 767 | .u-tree--highlight-current .u-tree-node.is-current > .u-tree-node__content { 768 | background-color: var(--u-color-primary-light-9); 769 | } 770 | 771 | /* Element Chalk Variables */ 772 | @font-face { 773 | font-family: "iconfonts"; 774 | src: url("fonts/iconfonts.woff") format("woff"), url("fonts/iconfonts.ttf") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 775 | font-weight: normal; 776 | font-display: "auto"; 777 | font-style: normal; 778 | } 779 | [class^=u-icon-], [class*=" u-icon-"] { 780 | /* use !important to prevent issues with browser extensions that change fonts */ 781 | font-family: "iconfonts" !important; 782 | speak: none; 783 | font-style: normal; 784 | font-weight: normal; 785 | font-variant: normal; 786 | text-transform: none; 787 | line-height: 1; 788 | vertical-align: baseline; 789 | display: inline-block; 790 | /* Better Font Rendering =========== */ 791 | -webkit-font-smoothing: antialiased; 792 | -moz-osx-font-smoothing: grayscale; 793 | } 794 | 795 | .u-icon-ice-cream-round:before { 796 | content: "\e6a0"; 797 | } 798 | 799 | .u-icon-ice-cream-square:before { 800 | content: "\e6a3"; 801 | } 802 | 803 | .u-icon-lollipop:before { 804 | content: "\e6a4"; 805 | } 806 | 807 | .u-icon-potato-strips:before { 808 | content: "\e6a5"; 809 | } 810 | 811 | .u-icon-milk-tea:before { 812 | content: "\e6a6"; 813 | } 814 | 815 | .u-icon-ice-drink:before { 816 | content: "\e6a7"; 817 | } 818 | 819 | .u-icon-ice-tea:before { 820 | content: "\e6a9"; 821 | } 822 | 823 | .u-icon-coffee:before { 824 | content: "\e6aa"; 825 | } 826 | 827 | .u-icon-orange:before { 828 | content: "\e6ab"; 829 | } 830 | 831 | .u-icon-pear:before { 832 | content: "\e6ac"; 833 | } 834 | 835 | .u-icon-apple:before { 836 | content: "\e6ad"; 837 | } 838 | 839 | .u-icon-cherry:before { 840 | content: "\e6ae"; 841 | } 842 | 843 | .u-icon-watermelon:before { 844 | content: "\e6af"; 845 | } 846 | 847 | .u-icon-grape:before { 848 | content: "\e6b0"; 849 | } 850 | 851 | .u-icon-refrigerator:before { 852 | content: "\e6b1"; 853 | } 854 | 855 | .u-icon-goblet-square-full:before { 856 | content: "\e6b2"; 857 | } 858 | 859 | .u-icon-goblet-square:before { 860 | content: "\e6b3"; 861 | } 862 | 863 | .u-icon-goblet-full:before { 864 | content: "\e6b4"; 865 | } 866 | 867 | .u-icon-goblet:before { 868 | content: "\e6b5"; 869 | } 870 | 871 | .u-icon-cold-drink:before { 872 | content: "\e6b6"; 873 | } 874 | 875 | .u-icon-coffee-cup:before { 876 | content: "\e6b8"; 877 | } 878 | 879 | .u-icon-water-cup:before { 880 | content: "\e6b9"; 881 | } 882 | 883 | .u-icon-hot-water:before { 884 | content: "\e6ba"; 885 | } 886 | 887 | .u-icon-ice-cream:before { 888 | content: "\e6bb"; 889 | } 890 | 891 | .u-icon-dessert:before { 892 | content: "\e6bc"; 893 | } 894 | 895 | .u-icon-sugar:before { 896 | content: "\e6bd"; 897 | } 898 | 899 | .u-icon-tableware:before { 900 | content: "\e6be"; 901 | } 902 | 903 | .u-icon-burger:before { 904 | content: "\e6bf"; 905 | } 906 | 907 | .u-icon-knife-fork:before { 908 | content: "\e6c1"; 909 | } 910 | 911 | .u-icon-fork-spoon:before { 912 | content: "\e6c2"; 913 | } 914 | 915 | .u-icon-chicken:before { 916 | content: "\e6c3"; 917 | } 918 | 919 | .u-icon-food:before { 920 | content: "\e6c4"; 921 | } 922 | 923 | .u-icon-dish-1:before { 924 | content: "\e6c5"; 925 | } 926 | 927 | .u-icon-dish:before { 928 | content: "\e6c6"; 929 | } 930 | 931 | .u-icon-moon-night:before { 932 | content: "\e6ee"; 933 | } 934 | 935 | .u-icon-moon:before { 936 | content: "\e6f0"; 937 | } 938 | 939 | .u-icon-cloudy-and-sunny:before { 940 | content: "\e6f1"; 941 | } 942 | 943 | .u-icon-partly-cloudy:before { 944 | content: "\e6f2"; 945 | } 946 | 947 | .u-icon-cloudy:before { 948 | content: "\e6f3"; 949 | } 950 | 951 | .u-icon-sunny:before { 952 | content: "\e6f6"; 953 | } 954 | 955 | .u-icon-sunset:before { 956 | content: "\e6f7"; 957 | } 958 | 959 | .u-icon-sunrise-1:before { 960 | content: "\e6f8"; 961 | } 962 | 963 | .u-icon-sunrise:before { 964 | content: "\e6f9"; 965 | } 966 | 967 | .u-icon-heavy-rain:before { 968 | content: "\e6fa"; 969 | } 970 | 971 | .u-icon-lightning:before { 972 | content: "\e6fb"; 973 | } 974 | 975 | .u-icon-light-rain:before { 976 | content: "\e6fc"; 977 | } 978 | 979 | .u-icon-wind-power:before { 980 | content: "\e6fd"; 981 | } 982 | 983 | .u-icon-baseball:before { 984 | content: "\e712"; 985 | } 986 | 987 | .u-icon-soccer:before { 988 | content: "\e713"; 989 | } 990 | 991 | .u-icon-football:before { 992 | content: "\e715"; 993 | } 994 | 995 | .u-icon-basketball:before { 996 | content: "\e716"; 997 | } 998 | 999 | .u-icon-ship:before { 1000 | content: "\e73f"; 1001 | } 1002 | 1003 | .u-icon-truck:before { 1004 | content: "\e740"; 1005 | } 1006 | 1007 | .u-icon-bicycle:before { 1008 | content: "\e741"; 1009 | } 1010 | 1011 | .u-icon-mobile-phone:before { 1012 | content: "\e6d3"; 1013 | } 1014 | 1015 | .u-icon-service:before { 1016 | content: "\e6d4"; 1017 | } 1018 | 1019 | .u-icon-key:before { 1020 | content: "\e6e2"; 1021 | } 1022 | 1023 | .u-icon-unlock:before { 1024 | content: "\e6e4"; 1025 | } 1026 | 1027 | .u-icon-lock:before { 1028 | content: "\e6e5"; 1029 | } 1030 | 1031 | .u-icon-watch:before { 1032 | content: "\e6fe"; 1033 | } 1034 | 1035 | .u-icon-watch-1:before { 1036 | content: "\e6ff"; 1037 | } 1038 | 1039 | .u-icon-timer:before { 1040 | content: "\e702"; 1041 | } 1042 | 1043 | .u-icon-alarm-clock:before { 1044 | content: "\e703"; 1045 | } 1046 | 1047 | .u-icon-map-location:before { 1048 | content: "\e704"; 1049 | } 1050 | 1051 | .u-icon-delete-location:before { 1052 | content: "\e705"; 1053 | } 1054 | 1055 | .u-icon-add-location:before { 1056 | content: "\e706"; 1057 | } 1058 | 1059 | .u-icon-location-information:before { 1060 | content: "\e707"; 1061 | } 1062 | 1063 | .u-icon-location-outline:before { 1064 | content: "\e708"; 1065 | } 1066 | 1067 | .u-icon-location:before { 1068 | content: "\e79e"; 1069 | } 1070 | 1071 | .u-icon-place:before { 1072 | content: "\e709"; 1073 | } 1074 | 1075 | .u-icon-discover:before { 1076 | content: "\e70a"; 1077 | } 1078 | 1079 | .u-icon-first-aid-kit:before { 1080 | content: "\e70b"; 1081 | } 1082 | 1083 | .u-icon-trophy-1:before { 1084 | content: "\e70c"; 1085 | } 1086 | 1087 | .u-icon-trophy:before { 1088 | content: "\e70d"; 1089 | } 1090 | 1091 | .u-icon-medal:before { 1092 | content: "\e70e"; 1093 | } 1094 | 1095 | .u-icon-medal-1:before { 1096 | content: "\e70f"; 1097 | } 1098 | 1099 | .u-icon-stopwatch:before { 1100 | content: "\e710"; 1101 | } 1102 | 1103 | .u-icon-mic:before { 1104 | content: "\e711"; 1105 | } 1106 | 1107 | .u-icon-copy-document:before { 1108 | content: "\e718"; 1109 | } 1110 | 1111 | .u-icon-full-screen:before { 1112 | content: "\e719"; 1113 | } 1114 | 1115 | .u-icon-switch-button:before { 1116 | content: "\e71b"; 1117 | } 1118 | 1119 | .u-icon-aim:before { 1120 | content: "\e71c"; 1121 | } 1122 | 1123 | .u-icon-crop:before { 1124 | content: "\e71d"; 1125 | } 1126 | 1127 | .u-icon-odometer:before { 1128 | content: "\e71e"; 1129 | } 1130 | 1131 | .u-icon-time:before { 1132 | content: "\e71f"; 1133 | } 1134 | 1135 | .u-icon-bangzhu:before { 1136 | content: "\e724"; 1137 | } 1138 | 1139 | .u-icon-close-notification:before { 1140 | content: "\e726"; 1141 | } 1142 | 1143 | .u-icon-microphone:before { 1144 | content: "\e727"; 1145 | } 1146 | 1147 | .u-icon-turn-off-microphone:before { 1148 | content: "\e728"; 1149 | } 1150 | 1151 | .u-icon-position:before { 1152 | content: "\e729"; 1153 | } 1154 | 1155 | .u-icon-postcard:before { 1156 | content: "\e72a"; 1157 | } 1158 | 1159 | .u-icon-message:before { 1160 | content: "\e72b"; 1161 | } 1162 | 1163 | .u-icon-chat-line-square:before { 1164 | content: "\e72d"; 1165 | } 1166 | 1167 | .u-icon-chat-dot-square:before { 1168 | content: "\e72e"; 1169 | } 1170 | 1171 | .u-icon-chat-dot-round:before { 1172 | content: "\e72f"; 1173 | } 1174 | 1175 | .u-icon-chat-square:before { 1176 | content: "\e730"; 1177 | } 1178 | 1179 | .u-icon-chat-line-round:before { 1180 | content: "\e731"; 1181 | } 1182 | 1183 | .u-icon-chat-round:before { 1184 | content: "\e732"; 1185 | } 1186 | 1187 | .u-icon-set-up:before { 1188 | content: "\e733"; 1189 | } 1190 | 1191 | .u-icon-turn-off:before { 1192 | content: "\e734"; 1193 | } 1194 | 1195 | .u-icon-open:before { 1196 | content: "\e735"; 1197 | } 1198 | 1199 | .u-icon-connection:before { 1200 | content: "\e736"; 1201 | } 1202 | 1203 | .u-icon-link:before { 1204 | content: "\e737"; 1205 | } 1206 | 1207 | .u-icon-cpu:before { 1208 | content: "\e738"; 1209 | } 1210 | 1211 | .u-icon-thumb:before { 1212 | content: "\e739"; 1213 | } 1214 | 1215 | .u-icon-female:before { 1216 | content: "\e73a"; 1217 | } 1218 | 1219 | .u-icon-male:before { 1220 | content: "\e73b"; 1221 | } 1222 | 1223 | .u-icon-guide:before { 1224 | content: "\e73c"; 1225 | } 1226 | 1227 | .u-icon-news:before { 1228 | content: "\e73e"; 1229 | } 1230 | 1231 | .u-icon-price-tag:before { 1232 | content: "\e744"; 1233 | } 1234 | 1235 | .u-icon-discount:before { 1236 | content: "\e745"; 1237 | } 1238 | 1239 | .u-icon-wallet:before { 1240 | content: "\e747"; 1241 | } 1242 | 1243 | .u-icon-coin:before { 1244 | content: "\e748"; 1245 | } 1246 | 1247 | .u-icon-money:before { 1248 | content: "\e749"; 1249 | } 1250 | 1251 | .u-icon-bank-card:before { 1252 | content: "\e74a"; 1253 | } 1254 | 1255 | .u-icon-box:before { 1256 | content: "\e74b"; 1257 | } 1258 | 1259 | .u-icon-present:before { 1260 | content: "\e74c"; 1261 | } 1262 | 1263 | .u-icon-sell:before { 1264 | content: "\e6d5"; 1265 | } 1266 | 1267 | .u-icon-sold-out:before { 1268 | content: "\e6d6"; 1269 | } 1270 | 1271 | .u-icon-shopping-bag-2:before { 1272 | content: "\e74d"; 1273 | } 1274 | 1275 | .u-icon-shopping-bag-1:before { 1276 | content: "\e74e"; 1277 | } 1278 | 1279 | .u-icon-shopping-cart-2:before { 1280 | content: "\e74f"; 1281 | } 1282 | 1283 | .u-icon-shopping-cart-1:before { 1284 | content: "\e750"; 1285 | } 1286 | 1287 | .u-icon-shopping-cart-full:before { 1288 | content: "\e751"; 1289 | } 1290 | 1291 | .u-icon-smoking:before { 1292 | content: "\e752"; 1293 | } 1294 | 1295 | .u-icon-no-smoking:before { 1296 | content: "\e753"; 1297 | } 1298 | 1299 | .u-icon-house:before { 1300 | content: "\e754"; 1301 | } 1302 | 1303 | .u-icon-table-lamp:before { 1304 | content: "\e755"; 1305 | } 1306 | 1307 | .u-icon-school:before { 1308 | content: "\e756"; 1309 | } 1310 | 1311 | .u-icon-office-building:before { 1312 | content: "\e757"; 1313 | } 1314 | 1315 | .u-icon-toilet-paper:before { 1316 | content: "\e758"; 1317 | } 1318 | 1319 | .u-icon-notebook-2:before { 1320 | content: "\e759"; 1321 | } 1322 | 1323 | .u-icon-notebook-1:before { 1324 | content: "\e75a"; 1325 | } 1326 | 1327 | .u-icon-files:before { 1328 | content: "\e75b"; 1329 | } 1330 | 1331 | .u-icon-collection:before { 1332 | content: "\e75c"; 1333 | } 1334 | 1335 | .u-icon-receiving:before { 1336 | content: "\e75d"; 1337 | } 1338 | 1339 | .u-icon-suitcase-1:before { 1340 | content: "\e760"; 1341 | } 1342 | 1343 | .u-icon-suitcase:before { 1344 | content: "\e761"; 1345 | } 1346 | 1347 | .u-icon-film:before { 1348 | content: "\e763"; 1349 | } 1350 | 1351 | .u-icon-collection-tag:before { 1352 | content: "\e765"; 1353 | } 1354 | 1355 | .u-icon-data-analysis:before { 1356 | content: "\e766"; 1357 | } 1358 | 1359 | .u-icon-pie-chart:before { 1360 | content: "\e767"; 1361 | } 1362 | 1363 | .u-icon-data-board:before { 1364 | content: "\e768"; 1365 | } 1366 | 1367 | .u-icon-data-line:before { 1368 | content: "\e76d"; 1369 | } 1370 | 1371 | .u-icon-reading:before { 1372 | content: "\e769"; 1373 | } 1374 | 1375 | .u-icon-magic-stick:before { 1376 | content: "\e76a"; 1377 | } 1378 | 1379 | .u-icon-coordinate:before { 1380 | content: "\e76b"; 1381 | } 1382 | 1383 | .u-icon-mouse:before { 1384 | content: "\e76c"; 1385 | } 1386 | 1387 | .u-icon-brush:before { 1388 | content: "\e76e"; 1389 | } 1390 | 1391 | .u-icon-headset:before { 1392 | content: "\e76f"; 1393 | } 1394 | 1395 | .u-icon-umbrella:before { 1396 | content: "\e770"; 1397 | } 1398 | 1399 | .u-icon-scissors:before { 1400 | content: "\e771"; 1401 | } 1402 | 1403 | .u-icon-mobile:before { 1404 | content: "\e773"; 1405 | } 1406 | 1407 | .u-icon-attract:before { 1408 | content: "\e774"; 1409 | } 1410 | 1411 | .u-icon-monitor:before { 1412 | content: "\e775"; 1413 | } 1414 | 1415 | .u-icon-search:before { 1416 | content: "\e778"; 1417 | } 1418 | 1419 | .u-icon-takeaway-box:before { 1420 | content: "\e77a"; 1421 | } 1422 | 1423 | .u-icon-paperclip:before { 1424 | content: "\e77d"; 1425 | } 1426 | 1427 | .u-icon-printer:before { 1428 | content: "\e77e"; 1429 | } 1430 | 1431 | .u-icon-document-add:before { 1432 | content: "\e782"; 1433 | } 1434 | 1435 | .u-icon-document:before { 1436 | content: "\e785"; 1437 | } 1438 | 1439 | .u-icon-document-checked:before { 1440 | content: "\e786"; 1441 | } 1442 | 1443 | .u-icon-document-copy:before { 1444 | content: "\e787"; 1445 | } 1446 | 1447 | .u-icon-document-delete:before { 1448 | content: "\e788"; 1449 | } 1450 | 1451 | .u-icon-document-remove:before { 1452 | content: "\e789"; 1453 | } 1454 | 1455 | .u-icon-tickets:before { 1456 | content: "\e78b"; 1457 | } 1458 | 1459 | .u-icon-folder-checked:before { 1460 | content: "\e77f"; 1461 | } 1462 | 1463 | .u-icon-folder-delete:before { 1464 | content: "\e780"; 1465 | } 1466 | 1467 | .u-icon-folder-remove:before { 1468 | content: "\e781"; 1469 | } 1470 | 1471 | .u-icon-folder-add:before { 1472 | content: "\e783"; 1473 | } 1474 | 1475 | .u-icon-folder-opened:before { 1476 | content: "\e784"; 1477 | } 1478 | 1479 | .u-icon-folder:before { 1480 | content: "\e78a"; 1481 | } 1482 | 1483 | .u-icon-edit-outline:before { 1484 | content: "\e764"; 1485 | } 1486 | 1487 | .u-icon-edit:before { 1488 | content: "\e78c"; 1489 | } 1490 | 1491 | .u-icon-date:before { 1492 | content: "\e78e"; 1493 | } 1494 | 1495 | .u-icon-c-scale-to-original:before { 1496 | content: "\e7c6"; 1497 | } 1498 | 1499 | .u-icon-view:before { 1500 | content: "\e6ce"; 1501 | } 1502 | 1503 | .u-icon-loading:before { 1504 | content: "\e6cf"; 1505 | } 1506 | 1507 | .u-icon-rank:before { 1508 | content: "\e6d1"; 1509 | } 1510 | 1511 | .u-icon-sort-down:before { 1512 | content: "\e7c4"; 1513 | } 1514 | 1515 | .u-icon-sort-up:before { 1516 | content: "\e7c5"; 1517 | } 1518 | 1519 | .u-icon-sort:before { 1520 | content: "\e6d2"; 1521 | } 1522 | 1523 | .u-icon-finished:before { 1524 | content: "\e6cd"; 1525 | } 1526 | 1527 | .u-icon-refresh-left:before { 1528 | content: "\e6c7"; 1529 | } 1530 | 1531 | .u-icon-refresh-right:before { 1532 | content: "\e6c8"; 1533 | } 1534 | 1535 | .u-icon-refresh:before { 1536 | content: "\e6d0"; 1537 | } 1538 | 1539 | .u-icon-video-play:before { 1540 | content: "\e7c0"; 1541 | } 1542 | 1543 | .u-icon-video-pause:before { 1544 | content: "\e7c1"; 1545 | } 1546 | 1547 | .u-icon-d-arrow-right:before { 1548 | content: "\e6dc"; 1549 | } 1550 | 1551 | .u-icon-d-arrow-left:before { 1552 | content: "\e6dd"; 1553 | } 1554 | 1555 | .u-icon-arrow-up:before { 1556 | content: "\e6e1"; 1557 | } 1558 | 1559 | .u-icon-arrow-down:before { 1560 | content: "\e6df"; 1561 | } 1562 | 1563 | .u-icon-arrow-right:before { 1564 | content: "\e6e0"; 1565 | } 1566 | 1567 | .u-icon-arrow-left:before { 1568 | content: "\e6de"; 1569 | } 1570 | 1571 | .u-icon-top-right:before { 1572 | content: "\e6e7"; 1573 | } 1574 | 1575 | .u-icon-top-left:before { 1576 | content: "\e6e8"; 1577 | } 1578 | 1579 | .u-icon-top:before { 1580 | content: "\e6e6"; 1581 | } 1582 | 1583 | .u-icon-bottom:before { 1584 | content: "\e6eb"; 1585 | } 1586 | 1587 | .u-icon-right:before { 1588 | content: "\e6e9"; 1589 | } 1590 | 1591 | .u-icon-back:before { 1592 | content: "\e6ea"; 1593 | } 1594 | 1595 | .u-icon-bottom-right:before { 1596 | content: "\e6ec"; 1597 | } 1598 | 1599 | .u-icon-bottom-left:before { 1600 | content: "\e6ed"; 1601 | } 1602 | 1603 | .u-icon-caret-top:before { 1604 | content: "\e78f"; 1605 | } 1606 | 1607 | .u-icon-caret-bottom:before { 1608 | content: "\e790"; 1609 | } 1610 | 1611 | .u-icon-caret-right:before { 1612 | content: "\e791"; 1613 | } 1614 | 1615 | .u-icon-caret-left:before { 1616 | content: "\e792"; 1617 | } 1618 | 1619 | .u-icon-d-caret:before { 1620 | content: "\e79a"; 1621 | } 1622 | 1623 | .u-icon-share:before { 1624 | content: "\e793"; 1625 | } 1626 | 1627 | .u-icon-menu:before { 1628 | content: "\e798"; 1629 | } 1630 | 1631 | .u-icon-s-grid:before { 1632 | content: "\e7a6"; 1633 | } 1634 | 1635 | .u-icon-s-check:before { 1636 | content: "\e7a7"; 1637 | } 1638 | 1639 | .u-icon-s-data:before { 1640 | content: "\e7a8"; 1641 | } 1642 | 1643 | .u-icon-s-opportunity:before { 1644 | content: "\e7aa"; 1645 | } 1646 | 1647 | .u-icon-s-custom:before { 1648 | content: "\e7ab"; 1649 | } 1650 | 1651 | .u-icon-s-claim:before { 1652 | content: "\e7ad"; 1653 | } 1654 | 1655 | .u-icon-s-finance:before { 1656 | content: "\e7ae"; 1657 | } 1658 | 1659 | .u-icon-s-comment:before { 1660 | content: "\e7af"; 1661 | } 1662 | 1663 | .u-icon-s-flag:before { 1664 | content: "\e7b0"; 1665 | } 1666 | 1667 | .u-icon-s-marketing:before { 1668 | content: "\e7b1"; 1669 | } 1670 | 1671 | .u-icon-s-shop:before { 1672 | content: "\e7b4"; 1673 | } 1674 | 1675 | .u-icon-s-open:before { 1676 | content: "\e7b5"; 1677 | } 1678 | 1679 | .u-icon-s-management:before { 1680 | content: "\e7b6"; 1681 | } 1682 | 1683 | .u-icon-s-ticket:before { 1684 | content: "\e7b7"; 1685 | } 1686 | 1687 | .u-icon-s-release:before { 1688 | content: "\e7b8"; 1689 | } 1690 | 1691 | .u-icon-s-home:before { 1692 | content: "\e7b9"; 1693 | } 1694 | 1695 | .u-icon-s-promotion:before { 1696 | content: "\e7ba"; 1697 | } 1698 | 1699 | .u-icon-s-operation:before { 1700 | content: "\e7bb"; 1701 | } 1702 | 1703 | .u-icon-s-unfold:before { 1704 | content: "\e7bc"; 1705 | } 1706 | 1707 | .u-icon-s-fold:before { 1708 | content: "\e7a9"; 1709 | } 1710 | 1711 | .u-icon-s-platform:before { 1712 | content: "\e7bd"; 1713 | } 1714 | 1715 | .u-icon-s-order:before { 1716 | content: "\e7be"; 1717 | } 1718 | 1719 | .u-icon-s-cooperation:before { 1720 | content: "\e7bf"; 1721 | } 1722 | 1723 | .u-icon-bell:before { 1724 | content: "\e725"; 1725 | } 1726 | 1727 | .u-icon-message-solid:before { 1728 | content: "\e799"; 1729 | } 1730 | 1731 | .u-icon-video-camera:before { 1732 | content: "\e772"; 1733 | } 1734 | 1735 | .u-icon-video-camera-solid:before { 1736 | content: "\e796"; 1737 | } 1738 | 1739 | .u-icon-camera:before { 1740 | content: "\e779"; 1741 | } 1742 | 1743 | .u-icon-camera-solid:before { 1744 | content: "\e79b"; 1745 | } 1746 | 1747 | .u-icon-download:before { 1748 | content: "\e77c"; 1749 | } 1750 | 1751 | .u-icon-upload2:before { 1752 | content: "\e77b"; 1753 | } 1754 | 1755 | .u-icon-upload:before { 1756 | content: "\e7c3"; 1757 | } 1758 | 1759 | .u-icon-picture-outline-round:before { 1760 | content: "\e75f"; 1761 | } 1762 | 1763 | .u-icon-picture-outline:before { 1764 | content: "\e75e"; 1765 | } 1766 | 1767 | .u-icon-picture:before { 1768 | content: "\e79f"; 1769 | } 1770 | 1771 | .u-icon-close:before { 1772 | content: "\e6db"; 1773 | } 1774 | 1775 | .u-icon-check:before { 1776 | content: "\e6da"; 1777 | } 1778 | 1779 | .u-icon-plus:before { 1780 | content: "\e6d9"; 1781 | } 1782 | 1783 | .u-icon-minus:before { 1784 | content: "\e6d8"; 1785 | } 1786 | 1787 | .u-icon-help:before { 1788 | content: "\e73d"; 1789 | } 1790 | 1791 | .u-icon-s-help:before { 1792 | content: "\e7b3"; 1793 | } 1794 | 1795 | .u-icon-circle-close:before { 1796 | content: "\e78d"; 1797 | } 1798 | 1799 | .u-icon-circle-check:before { 1800 | content: "\e720"; 1801 | } 1802 | 1803 | .u-icon-circle-plus-outline:before { 1804 | content: "\e723"; 1805 | } 1806 | 1807 | .u-icon-remove-outline:before { 1808 | content: "\e722"; 1809 | } 1810 | 1811 | .u-icon-zoom-out:before { 1812 | content: "\e776"; 1813 | } 1814 | 1815 | .u-icon-zoom-in:before { 1816 | content: "\e777"; 1817 | } 1818 | 1819 | .u-icon-error:before { 1820 | content: "\e79d"; 1821 | } 1822 | 1823 | .u-icon-success:before { 1824 | content: "\e79c"; 1825 | } 1826 | 1827 | .u-icon-circle-plus:before { 1828 | content: "\e7a0"; 1829 | } 1830 | 1831 | .u-icon-remove:before { 1832 | content: "\e7a2"; 1833 | } 1834 | 1835 | .u-icon-info:before { 1836 | content: "\e7a1"; 1837 | } 1838 | 1839 | .u-icon-question:before { 1840 | content: "\e7a4"; 1841 | } 1842 | 1843 | .u-icon-warning-outline:before { 1844 | content: "\e6c9"; 1845 | } 1846 | 1847 | .u-icon-warning:before { 1848 | content: "\e7a3"; 1849 | } 1850 | 1851 | .u-icon-goods:before { 1852 | content: "\e7c2"; 1853 | } 1854 | 1855 | .u-icon-s-goods:before { 1856 | content: "\e7b2"; 1857 | } 1858 | 1859 | .u-icon-star-off:before { 1860 | content: "\e717"; 1861 | } 1862 | 1863 | .u-icon-star-on:before { 1864 | content: "\e797"; 1865 | } 1866 | 1867 | .u-icon-more-outline:before { 1868 | content: "\e6cc"; 1869 | } 1870 | 1871 | .u-icon-more:before { 1872 | content: "\e794"; 1873 | } 1874 | 1875 | .u-icon-phone-outline:before { 1876 | content: "\e6cb"; 1877 | } 1878 | 1879 | .u-icon-phone:before { 1880 | content: "\e795"; 1881 | } 1882 | 1883 | .u-icon-user:before { 1884 | content: "\e6e3"; 1885 | } 1886 | 1887 | .u-icon-user-solid:before { 1888 | content: "\e7a5"; 1889 | } 1890 | 1891 | .u-icon-setting:before { 1892 | content: "\e6ca"; 1893 | } 1894 | 1895 | .u-icon-s-tools:before { 1896 | content: "\e7ac"; 1897 | } 1898 | 1899 | .u-icon-delete:before { 1900 | content: "\e6d7"; 1901 | } 1902 | 1903 | .u-icon-delete-solid:before { 1904 | content: "\e7c9"; 1905 | } 1906 | 1907 | .u-icon-eleme:before { 1908 | content: "\e7c7"; 1909 | } 1910 | 1911 | .u-icon-platform-eleme:before { 1912 | content: "\e7ca"; 1913 | } 1914 | 1915 | .u-icon-loading { 1916 | animation: rotating 2s linear infinite; 1917 | } 1918 | 1919 | .u-icon--right { 1920 | margin-left: 5px; 1921 | } 1922 | 1923 | .u-icon--left { 1924 | margin-right: 5px; 1925 | } 1926 | 1927 | @keyframes rotating { 1928 | 0% { 1929 | transform: rotateZ(0deg); 1930 | } 1931 | 100% { 1932 | transform: rotateZ(360deg); 1933 | } 1934 | } 1935 | --------------------------------------------------------------------------------