'admin-20.12.20:完成自定义全局主题'
This commit is contained in:
lyt-Top
parent
10c1096117
commit
873bb13242
@ -2,7 +2,7 @@
|
|||||||
home: true
|
home: true
|
||||||
heroImage: https://v1.vuepress.vuejs.org/hero.png
|
heroImage: https://v1.vuepress.vuejs.org/hero.png
|
||||||
heroText: vue-admin-wonderful
|
heroText: vue-admin-wonderful
|
||||||
tagline: 这是 vue3.x + vite + element plus + typescript 的开发文档
|
tagline: 这是 vue3.x Composition API + vite + element plus + typescript 的开发文档
|
||||||
actionText: 快速上手 →
|
actionText: 快速上手 →
|
||||||
actionLink: /guide/
|
actionLink: /guide/
|
||||||
features:
|
features:
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
"build": "vite build"
|
"build": "vite build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"element-plus": "^1.0.1-beta.7",
|
"element-plus": "^1.0.1-beta.10",
|
||||||
"vue": "^3.0.4"
|
"vue": "^3.0.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body,
|
||||||
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,39 +1,117 @@
|
|||||||
|
/**
|
||||||
|
* scss 怎么动态创建变量
|
||||||
|
* 本来想用 @function，@for 好像不可以动态创建
|
||||||
|
* 2020.12.19 lyt 记录
|
||||||
|
**/
|
||||||
|
|
||||||
/* 定义初始颜色
|
/* 定义初始颜色
|
||||||
------------------------------- */
|
------------------------------- */
|
||||||
// $root: (
|
|
||||||
// primary: #409eff,
|
|
||||||
// success: #67c23a,
|
|
||||||
// warning: #e6a23c,
|
|
||||||
// danger: #f56c6c,
|
|
||||||
// info: #909399,
|
|
||||||
// whites: #ffffff,
|
|
||||||
// blacks: #000000,
|
|
||||||
// );
|
|
||||||
|
|
||||||
/* 循环赋值给:root
|
|
||||||
------------------------------- */
|
|
||||||
// :root {
|
|
||||||
// @each $key, $value in $root {
|
|
||||||
// --color-#{$key}: #{$value};
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
$--color-primary: #409eff !default;
|
$--color-primary: #409eff !default;
|
||||||
$--color-white: #ffffff !default;
|
$--color-whites: #ffffff !default;
|
||||||
$--color-black: #000000 !default;
|
$--color-blacks: #000000 !default;
|
||||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default;
|
$--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default;
|
||||||
// $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default;
|
$--color-primary-light-2: mix($--color-whites, $--color-primary, 20%) !default;
|
||||||
// $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default;
|
$--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default;
|
||||||
// $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
|
$--color-primary-light-4: mix($--color-whites, $--color-primary, 40%) !default;
|
||||||
// $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default;
|
$--color-primary-light-5: mix($--color-whites, $--color-primary, 50%) !default;
|
||||||
// $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default;
|
$--color-primary-light-6: mix($--color-whites, $--color-primary, 60%) !default;
|
||||||
// $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default;
|
$--color-primary-light-7: mix($--color-whites, $--color-primary, 70%) !default;
|
||||||
// $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default;
|
$--color-primary-light-8: mix($--color-whites, $--color-primary, 80%) !default;
|
||||||
// $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default;
|
$--color-primary-light-9: mix($--color-whites, $--color-primary, 90%) !default;
|
||||||
|
$--color-success: #67c23a !default;
|
||||||
|
$--color-success-light-1: mix($--color-whites, $--color-success, 10%) !default;
|
||||||
|
$--color-success-light-2: mix($--color-whites, $--color-success, 20%) !default;
|
||||||
|
$--color-success-light-3: mix($--color-whites, $--color-success, 30%) !default;
|
||||||
|
$--color-success-light-4: mix($--color-whites, $--color-success, 40%) !default;
|
||||||
|
$--color-success-light-5: mix($--color-whites, $--color-success, 50%) !default;
|
||||||
|
$--color-success-light-6: mix($--color-whites, $--color-success, 60%) !default;
|
||||||
|
$--color-success-light-7: mix($--color-whites, $--color-success, 70%) !default;
|
||||||
|
$--color-success-light-8: mix($--color-whites, $--color-success, 80%) !default;
|
||||||
|
$--color-success-light-9: mix($--color-whites, $--color-success, 90%) !default;
|
||||||
|
$--color-info: #909399 !default;
|
||||||
|
$--color-info-light-1: mix($--color-whites, $--color-info, 10%) !default;
|
||||||
|
$--color-info-light-2: mix($--color-whites, $--color-info, 20%) !default;
|
||||||
|
$--color-info-light-3: mix($--color-whites, $--color-info, 30%) !default;
|
||||||
|
$--color-info-light-4: mix($--color-whites, $--color-info, 40%) !default;
|
||||||
|
$--color-info-light-5: mix($--color-whites, $--color-info, 50%) !default;
|
||||||
|
$--color-info-light-6: mix($--color-whites, $--color-info, 60%) !default;
|
||||||
|
$--color-info-light-7: mix($--color-whites, $--color-info, 70%) !default;
|
||||||
|
$--color-info-light-8: mix($--color-whites, $--color-info, 80%) !default;
|
||||||
|
$--color-info-light-9: mix($--color-whites, $--color-info, 90%) !default;
|
||||||
|
$--color-warning: #e6a23c !default;
|
||||||
|
$--color-warning-light-1: mix($--color-whites, $--color-warning, 10%) !default;
|
||||||
|
$--color-warning-light-2: mix($--color-whites, $--color-warning, 20%) !default;
|
||||||
|
$--color-warning-light-3: mix($--color-whites, $--color-warning, 30%) !default;
|
||||||
|
$--color-warning-light-4: mix($--color-whites, $--color-warning, 40%) !default;
|
||||||
|
$--color-warning-light-5: mix($--color-whites, $--color-warning, 50%) !default;
|
||||||
|
$--color-warning-light-6: mix($--color-whites, $--color-warning, 60%) !default;
|
||||||
|
$--color-warning-light-7: mix($--color-whites, $--color-warning, 70%) !default;
|
||||||
|
$--color-warning-light-8: mix($--color-whites, $--color-warning, 80%) !default;
|
||||||
|
$--color-warning-light-9: mix($--color-whites, $--color-warning, 90%) !default;
|
||||||
|
$--color-danger: #f56c6c !default;
|
||||||
|
$--color-danger-light-1: mix($--color-whites, $--color-danger, 10%) !default;
|
||||||
|
$--color-danger-light-2: mix($--color-whites, $--color-danger, 20%) !default;
|
||||||
|
$--color-danger-light-3: mix($--color-whites, $--color-danger, 30%) !default;
|
||||||
|
$--color-danger-light-4: mix($--color-whites, $--color-danger, 40%) !default;
|
||||||
|
$--color-danger-light-5: mix($--color-whites, $--color-danger, 50%) !default;
|
||||||
|
$--color-danger-light-6: mix($--color-whites, $--color-danger, 60%) !default;
|
||||||
|
$--color-danger-light-7: mix($--color-whites, $--color-danger, 70%) !default;
|
||||||
|
$--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
|
||||||
|
$--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
|
||||||
|
|
||||||
|
/* 赋值给:root
|
||||||
|
------------------------------- */
|
||||||
:root {
|
:root {
|
||||||
--color-primary: #{$--color-primary};
|
--color-primary: #{$--color-primary};
|
||||||
--color-white: #{$--color-white};
|
--color-whites: #{$--color-whites};
|
||||||
--color-black: #{$--color-black};
|
--color-blacks: #{$--color-blacks};
|
||||||
--color-primary-light-1: #{$--color-primary-light-1};
|
--color-primary-light-1: #{$--color-primary-light-1};
|
||||||
|
--color-primary-light-2: #{$--color-primary-light-2};
|
||||||
|
--color-primary-light-3: #{$--color-primary-light-3};
|
||||||
|
--color-primary-light-4: #{$--color-primary-light-4};
|
||||||
|
--color-primary-light-5: #{$--color-primary-light-5};
|
||||||
|
--color-primary-light-6: #{$--color-primary-light-6};
|
||||||
|
--color-primary-light-7: #{$--color-primary-light-7};
|
||||||
|
--color-primary-light-8: #{$--color-primary-light-8};
|
||||||
|
--color-primary-light-9: #{$--color-primary-light-9};
|
||||||
|
--color-success: #{$--color-success};
|
||||||
|
--color-success-light-1: #{$--color-success-light-1};
|
||||||
|
--color-success-light-2: #{$--color-success-light-2};
|
||||||
|
--color-success-light-3: #{$--color-success-light-3};
|
||||||
|
--color-success-light-4: #{$--color-success-light-4};
|
||||||
|
--color-success-light-5: #{$--color-success-light-5};
|
||||||
|
--color-success-light-6: #{$--color-success-light-6};
|
||||||
|
--color-success-light-7: #{$--color-success-light-7};
|
||||||
|
--color-success-light-8: #{$--color-success-light-8};
|
||||||
|
--color-success-light-9: #{$--color-success-light-9};
|
||||||
|
--color-info: #{$--color-info};
|
||||||
|
--color-info-light-1: #{$--color-info-light-1};
|
||||||
|
--color-info-light-2: #{$--color-info-light-2};
|
||||||
|
--color-info-light-3: #{$--color-info-light-3};
|
||||||
|
--color-info-light-4: #{$--color-info-light-4};
|
||||||
|
--color-info-light-5: #{$--color-info-light-5};
|
||||||
|
--color-info-light-6: #{$--color-info-light-6};
|
||||||
|
--color-info-light-7: #{$--color-info-light-7};
|
||||||
|
--color-info-light-8: #{$--color-info-light-8};
|
||||||
|
--color-info-light-9: #{$--color-info-light-9};
|
||||||
|
--color-warning: #{$--color-warning};
|
||||||
|
--color-warning-light-1: #{$--color-warning-light-1};
|
||||||
|
--color-warning-light-2: #{$--color-warning-light-2};
|
||||||
|
--color-warning-light-3: #{$--color-warning-light-3};
|
||||||
|
--color-warning-light-4: #{$--color-warning-light-4};
|
||||||
|
--color-warning-light-5: #{$--color-warning-light-5};
|
||||||
|
--color-warning-light-6: #{$--color-warning-light-6};
|
||||||
|
--color-warning-light-7: #{$--color-warning-light-7};
|
||||||
|
--color-warning-light-8: #{$--color-warning-light-8};
|
||||||
|
--color-warning-light-9: #{$--color-warning-light-9};
|
||||||
|
--color-danger: #{$--color-danger};
|
||||||
|
--color-danger-light-1: #{$--color-danger-light-1};
|
||||||
|
--color-danger-light-2: #{$--color-danger-light-2};
|
||||||
|
--color-danger-light-3: #{$--color-danger-light-3};
|
||||||
|
--color-danger-light-4: #{$--color-danger-light-4};
|
||||||
|
--color-danger-light-5: #{$--color-danger-light-5};
|
||||||
|
--color-danger-light-6: #{$--color-danger-light-6};
|
||||||
|
--color-danger-light-7: #{$--color-danger-light-7};
|
||||||
|
--color-danger-light-8: #{$--color-danger-light-8};
|
||||||
|
--color-danger-light-9: #{$--color-danger-light-9};
|
||||||
}
|
}
|
||||||
|
|||||||
798
vue-admin-wonderful-next/src/theme/element.scss
Normal file
798
vue-admin-wonderful-next/src/theme/element.scss
Normal file
@ -0,0 +1,798 @@
|
|||||||
|
@import 'mixins/function.scss';
|
||||||
|
@import 'mixins/element-mixins.scss';
|
||||||
|
|
||||||
|
/* Button 按钮
|
||||||
|
------------------------------- */
|
||||||
|
// text
|
||||||
|
.el-button--text {
|
||||||
|
color: set-color(primary);
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: set-color(primary-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// default
|
||||||
|
.el-button--default:hover,
|
||||||
|
.el-button--default:focus {
|
||||||
|
@include Button(primary, primary-light-8, primary-light-6);
|
||||||
|
}
|
||||||
|
.el-button--default.is-plain:hover,
|
||||||
|
.el-button--default.is-plain:focus {
|
||||||
|
@include Button(primary, whites, primary-light-1);
|
||||||
|
}
|
||||||
|
// primary
|
||||||
|
.el-button--primary {
|
||||||
|
@include Button(whites, primary, primary);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, primary-light-3, primary-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button--primary.is-plain {
|
||||||
|
@include Button(primary, primary-light-8, primary-light-6);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, primary, primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button--primary.is-disabled,
|
||||||
|
.el-button--primary.is-disabled:active,
|
||||||
|
.el-button--primary.is-disabled:focus,
|
||||||
|
.el-button--primary.is-disabled:hover {
|
||||||
|
@include Button(whites, primary-light-7, primary-light-7);
|
||||||
|
}
|
||||||
|
// success
|
||||||
|
.el-button--success {
|
||||||
|
@include Button(whites, success, success);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, success-light-3, success-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button--success.is-plain {
|
||||||
|
@include Button(success, success-light-8, success-light-6);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, success, success);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// info
|
||||||
|
.el-button--info {
|
||||||
|
@include Button(whites, info, info);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, info-light-3, info-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button--info.is-plain {
|
||||||
|
@include Button(info, info-light-8, info-light-6);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, info, info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-button--warning {
|
||||||
|
@include Button(whites, warning, warning);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, warning-light-3, warning-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button--warning.is-plain {
|
||||||
|
@include Button(warning, warning-light-8, warning-light-6);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, warning, warning);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// danger
|
||||||
|
.el-button--danger {
|
||||||
|
@include Button(whites, danger, danger);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, danger-light-3, danger-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button--danger.is-plain {
|
||||||
|
@include Button(danger, danger-light-8, danger-light-6);
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@include Button(whites, danger, danger);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Link 文字链接
|
||||||
|
------------------------------- */
|
||||||
|
// default
|
||||||
|
.el-link.el-link--default:hover {
|
||||||
|
color: set-color(primary-light-3);
|
||||||
|
}
|
||||||
|
// primary
|
||||||
|
.el-link.el-link--primary {
|
||||||
|
color: set-color(primary);
|
||||||
|
&:hover {
|
||||||
|
color: set-color(primary-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-link.el-link--default::after,
|
||||||
|
.el-link.is-underline:hover::after,
|
||||||
|
.el-link.el-link--primary.is-underline:hover::after,
|
||||||
|
.el-link.el-link--primary::after {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
// success
|
||||||
|
.el-link.el-link--success {
|
||||||
|
color: set-color(success);
|
||||||
|
&:hover {
|
||||||
|
color: set-color(success-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-link.el-link--success.is-underline:hover::after,
|
||||||
|
.el-link.el-link--success::after {
|
||||||
|
border-color: set-color(success);
|
||||||
|
}
|
||||||
|
// info
|
||||||
|
.el-link.el-link--info {
|
||||||
|
color: set-color(info);
|
||||||
|
&:hover {
|
||||||
|
color: set-color(info-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-link.el-link--info.is-underline:hover::after,
|
||||||
|
.el-link.el-link--info::after {
|
||||||
|
border-color: set-color(info);
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-link.el-link--warning {
|
||||||
|
color: set-color(warning);
|
||||||
|
&:hover {
|
||||||
|
color: set-color(warning-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-link.el-link--warning.is-underline:hover::after,
|
||||||
|
.el-link.el-link--warning::after {
|
||||||
|
border-color: set-color(warning);
|
||||||
|
}
|
||||||
|
// danger
|
||||||
|
.el-link.el-link--danger {
|
||||||
|
color: set-color(danger);
|
||||||
|
&:hover {
|
||||||
|
color: set-color(danger-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-link.el-link--danger.is-underline:hover::after,
|
||||||
|
.el-link.el-link--danger::after {
|
||||||
|
border-color: set-color(danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Radio 单选框
|
||||||
|
------------------------------- */
|
||||||
|
.el-radio__input.is-checked + .el-radio__label,
|
||||||
|
.el-radio-button__inner:hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-radio__input.is-checked .el-radio__inner {
|
||||||
|
@include RadioCheckbox(primary);
|
||||||
|
}
|
||||||
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||||
|
color: set-color(whites);
|
||||||
|
@include RadioCheckbox(primary);
|
||||||
|
box-shadow: -1px 0 0 0 set-color(primary);
|
||||||
|
}
|
||||||
|
.el-radio.is-bordered.is-checked,
|
||||||
|
.el-radio__inner:hover {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checkbox 多选框
|
||||||
|
------------------------------- */
|
||||||
|
.el-checkbox__input.is-checked + .el-checkbox__label,
|
||||||
|
.el-checkbox-button__inner:hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||||
|
@include RadioCheckbox(primary);
|
||||||
|
}
|
||||||
|
.el-checkbox__input.is-focus .el-checkbox__inner,
|
||||||
|
.el-checkbox__inner:hover,
|
||||||
|
.el-checkbox.is-bordered.is-checked,
|
||||||
|
.el-checkbox-button.is-focus .el-checkbox-button__inner {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-checkbox-button.is-checked .el-checkbox-button__inner {
|
||||||
|
color: set-color(whites);
|
||||||
|
@include RadioCheckbox(primary);
|
||||||
|
box-shadow: -1px 0 0 0 set-color(primary);
|
||||||
|
}
|
||||||
|
.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
|
||||||
|
border-left-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-checkbox__input.is-checked .el-checkbox__inner,
|
||||||
|
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||||
|
background-color: set-color(primary);
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input 输入框、InputNumber 计数器
|
||||||
|
------------------------------- */
|
||||||
|
.el-input__inner:focus,
|
||||||
|
.el-input-number__decrease:hover:not(.is-disabled)
|
||||||
|
~ .el-input
|
||||||
|
.el-input__inner:not(.is-disabled),
|
||||||
|
.el-input-number__increase:hover:not(.is-disabled)
|
||||||
|
~ .el-input
|
||||||
|
.el-input__inner:not(.is-disabled),
|
||||||
|
.el-textarea__inner:focus {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-input-number__increase:hover,
|
||||||
|
.el-input-number__decrease:hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Select 选择器
|
||||||
|
------------------------------- */
|
||||||
|
.el-range-editor.is-active,
|
||||||
|
.el-range-editor.is-active:hover,
|
||||||
|
.el-select .el-input.is-focus .el-input__inner,
|
||||||
|
.el-select .el-input__inner:focus {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-select-dropdown__item.selected {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cascader 级联选择器
|
||||||
|
------------------------------- */
|
||||||
|
.el-cascader .el-input .el-input__inner:focus,
|
||||||
|
.el-cascader .el-input.is-focus .el-input__inner {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-cascader-node.in-active-path,
|
||||||
|
.el-cascader-node.is-active,
|
||||||
|
.el-cascader-node.is-selectable.in-checked-path {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Switch 开关
|
||||||
|
------------------------------- */
|
||||||
|
.el-switch.is-checked .el-switch__core {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
background-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-switch__label.is-active {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slider 滑块
|
||||||
|
------------------------------- */
|
||||||
|
.el-slider__bar {
|
||||||
|
background-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-slider__button {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TimePicker 时间选择器
|
||||||
|
------------------------------- */
|
||||||
|
.el-time-panel__btn.confirm,
|
||||||
|
.el-time-spinner__arrow:hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DatePicker 日期选择器
|
||||||
|
------------------------------- */
|
||||||
|
.el-date-table td.today span,
|
||||||
|
.el-date-table td.available:hover,
|
||||||
|
.el-date-picker__header-label.active,
|
||||||
|
.el-date-picker__header-label:hover,
|
||||||
|
.el-picker-panel__icon-btn:hover,
|
||||||
|
.el-year-table td.today .cell,
|
||||||
|
.el-year-table td .cell:hover,
|
||||||
|
.el-year-table td.current:not(.disabled) .cell,
|
||||||
|
.el-month-table td .cell:hover,
|
||||||
|
.el-month-table td.today .cell,
|
||||||
|
.el-month-table td.current:not(.disabled) .cell,
|
||||||
|
.el-picker-panel__shortcut:hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-date-table td.current:not(.disabled) span,
|
||||||
|
.el-date-table td.selected span {
|
||||||
|
color: set-color(whites);
|
||||||
|
background-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-date-table td.end-date span,
|
||||||
|
.el-date-table td.start-date span {
|
||||||
|
background-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-date-table td.in-range div,
|
||||||
|
.el-date-table td.in-range div:hover,
|
||||||
|
.el-date-table.is-week-mode .el-date-table__row.current div,
|
||||||
|
.el-date-table.is-week-mode .el-date-table__row:hover div,
|
||||||
|
.el-date-table td.selected div {
|
||||||
|
background-color: set-color(primary-light-9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Upload 上传
|
||||||
|
------------------------------- */
|
||||||
|
.el-upload-list__item.is-success .el-upload-list__item-name:focus,
|
||||||
|
.el-upload-list__item.is-success .el-upload-list__item-name:hover,
|
||||||
|
.el-upload-list__item .el-icon-close-tip,
|
||||||
|
.el-upload-dragger .el-upload__text em {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-upload-list__item:hover {
|
||||||
|
background-color: set-color(primary-light-9);
|
||||||
|
}
|
||||||
|
.el-upload--picture-card:hover,
|
||||||
|
.el-upload:focus {
|
||||||
|
color: set-color(primary);
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-upload-dragger:hover,
|
||||||
|
.el-upload:focus .el-upload-dragger {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transfer 穿梭框
|
||||||
|
------------------------------- */
|
||||||
|
.el-transfer-panel__item:hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table 表格
|
||||||
|
------------------------------- */
|
||||||
|
.el-table .descending .sort-caret.descending {
|
||||||
|
border-top-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-table .ascending .sort-caret.ascending {
|
||||||
|
border-bottom-color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tag 标签
|
||||||
|
------------------------------- */
|
||||||
|
// primary
|
||||||
|
.el-tag {
|
||||||
|
@include Tag(primary, primary-light-8, primary-light-6);
|
||||||
|
}
|
||||||
|
.el-tag .el-tag__close {
|
||||||
|
color: set-color(primary);
|
||||||
|
&:hover {
|
||||||
|
@include TagDark(whites, primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--dark {
|
||||||
|
@include TagDark(whites, primary);
|
||||||
|
}
|
||||||
|
.el-tag--dark .el-tag__close {
|
||||||
|
color: set-color(whites);
|
||||||
|
&:hover {
|
||||||
|
background-color: set-color(primary-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--plain {
|
||||||
|
@include Tag(primary, whites, primary-light-3);
|
||||||
|
}
|
||||||
|
// success
|
||||||
|
.el-tag.el-tag--success {
|
||||||
|
@include Tag(success, success-light-8, success-light-6);
|
||||||
|
}
|
||||||
|
.el-tag.el-tag--success .el-tag__close {
|
||||||
|
color: set-color(success);
|
||||||
|
&:hover {
|
||||||
|
@include TagDark(whites, success);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--dark.el-tag--success {
|
||||||
|
@include TagDark(whites, success);
|
||||||
|
}
|
||||||
|
.el-tag--dark.el-tag--success .el-tag__close {
|
||||||
|
color: set-color(whites);
|
||||||
|
&:hover {
|
||||||
|
background-color: set-color(success-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--plain.el-tag--success {
|
||||||
|
@include Tag(success, whites, success-light-3);
|
||||||
|
}
|
||||||
|
// info
|
||||||
|
.el-tag.el-tag--info {
|
||||||
|
@include Tag(info, info-light-8, info-light-6);
|
||||||
|
}
|
||||||
|
.el-tag.el-tag--info .el-tag__close {
|
||||||
|
color: set-color(info);
|
||||||
|
&:hover {
|
||||||
|
@include TagDark(whites, info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--dark.el-tag--info {
|
||||||
|
@include TagDark(whites, info);
|
||||||
|
}
|
||||||
|
.el-tag--dark.el-tag--info .el-tag__close {
|
||||||
|
color: set-color(whites);
|
||||||
|
&:hover {
|
||||||
|
background-color: set-color(info-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--plain.el-tag--info {
|
||||||
|
@include Tag(info, whites, info-light-3);
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-tag.el-tag--warning {
|
||||||
|
@include Tag(warning, warning-light-8, warning-light-6);
|
||||||
|
}
|
||||||
|
.el-tag.el-tag--warning .el-tag__close {
|
||||||
|
color: set-color(warning);
|
||||||
|
&:hover {
|
||||||
|
@include TagDark(whites, warning);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--dark.el-tag--warning {
|
||||||
|
@include TagDark(whites, warning);
|
||||||
|
}
|
||||||
|
.el-tag--dark.el-tag--warning .el-tag__close {
|
||||||
|
color: set-color(whites);
|
||||||
|
&:hover {
|
||||||
|
background-color: set-color(warning-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--plain.el-tag--warning {
|
||||||
|
@include Tag(warning, whites, warning-light-3);
|
||||||
|
}
|
||||||
|
// danger
|
||||||
|
.el-tag.el-tag--danger {
|
||||||
|
@include Tag(danger, danger-light-8, danger-light-6);
|
||||||
|
}
|
||||||
|
.el-tag.el-tag--danger .el-tag__close {
|
||||||
|
color: set-color(danger);
|
||||||
|
&:hover {
|
||||||
|
@include TagDark(whites, danger);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--dark.el-tag--danger {
|
||||||
|
@include TagDark(whites, danger);
|
||||||
|
}
|
||||||
|
.el-tag--dark.el-tag--danger .el-tag__close {
|
||||||
|
color: set-color(whites);
|
||||||
|
&:hover {
|
||||||
|
background-color: set-color(danger-light-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tag--plain.el-tag--danger {
|
||||||
|
@include Tag(danger, whites, danger-light-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tag 标签
|
||||||
|
------------------------------- */
|
||||||
|
// primary
|
||||||
|
.el-progress-bar__inner {
|
||||||
|
background-color: set-color(primary);
|
||||||
|
}
|
||||||
|
// success
|
||||||
|
.el-progress.is-success .el-progress-bar__inner {
|
||||||
|
background-color: set-color(success);
|
||||||
|
}
|
||||||
|
.el-progress.is-success .el-progress__text {
|
||||||
|
color: set-color(success);
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-progress.is-warning .el-progress-bar__inner {
|
||||||
|
background-color: set-color(warning);
|
||||||
|
}
|
||||||
|
.el-progress.is-warning .el-progress__text {
|
||||||
|
color: set-color(warning);
|
||||||
|
}
|
||||||
|
// danger
|
||||||
|
.el-badge__content,
|
||||||
|
.el-progress.is-exception .el-progress-bar__inner {
|
||||||
|
background-color: set-color(danger);
|
||||||
|
}
|
||||||
|
.el-progress.is-exception .el-progress__text {
|
||||||
|
color: set-color(danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pagination 分页
|
||||||
|
------------------------------- */
|
||||||
|
.el-pager li.active,
|
||||||
|
.el-pager li:hover,
|
||||||
|
.el-pagination button:hover,
|
||||||
|
.el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-pagination__sizes .el-input .el-input__inner:hover {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||||
|
background-color: set-color(primary);
|
||||||
|
color: set-color(whites);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badge 标记
|
||||||
|
------------------------------- */
|
||||||
|
// primary
|
||||||
|
.el-badge__content--primary {
|
||||||
|
background-color: set-color(primary);
|
||||||
|
}
|
||||||
|
// success
|
||||||
|
.el-badge__content--success {
|
||||||
|
background-color: set-color(success);
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-badge__content--warning {
|
||||||
|
background-color: set-color(warning);
|
||||||
|
}
|
||||||
|
// danger
|
||||||
|
.el-badge__content--danger {
|
||||||
|
background-color: set-color(danger);
|
||||||
|
}
|
||||||
|
// info
|
||||||
|
.el-badge__content--info {
|
||||||
|
background-color: set-color(info);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Alert 警告
|
||||||
|
------------------------------- */
|
||||||
|
// success
|
||||||
|
.el-alert--success.is-light {
|
||||||
|
@include Alert(success, success-light-9, success-light-8);
|
||||||
|
}
|
||||||
|
.el-alert--success.is-dark {
|
||||||
|
@include Alert(whites, success, success-light-8);
|
||||||
|
}
|
||||||
|
.el-alert--success.is-light .el-alert__description {
|
||||||
|
color: set-color(success);
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-alert--warning.is-light {
|
||||||
|
@include Alert(warning, warning-light-9, warning-light-8);
|
||||||
|
}
|
||||||
|
.el-alert--warning.is-dark {
|
||||||
|
@include Alert(whites, warning, warning-light-8);
|
||||||
|
}
|
||||||
|
.el-alert--warning.is-light .el-alert__description {
|
||||||
|
color: set-color(warning);
|
||||||
|
}
|
||||||
|
// info
|
||||||
|
.el-alert--info.is-light {
|
||||||
|
@include Alert(info, info-light-9, info-light-8);
|
||||||
|
}
|
||||||
|
.el-alert--info.is-dark {
|
||||||
|
@include Alert(whites, info, info-light-8);
|
||||||
|
}
|
||||||
|
.el-alert--info.is-light .el-alert__description {
|
||||||
|
color: set-color(info);
|
||||||
|
}
|
||||||
|
// error
|
||||||
|
.el-alert--error.is-light {
|
||||||
|
@include Alert(danger, danger-light-9, danger-light-8);
|
||||||
|
}
|
||||||
|
.el-alert--error.is-dark {
|
||||||
|
@include Alert(whites, danger, danger-light-8);
|
||||||
|
}
|
||||||
|
.el-alert--error.is-light .el-alert__description {
|
||||||
|
color: set-color(danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading 加载
|
||||||
|
------------------------------- */
|
||||||
|
.el-loading-spinner .path {
|
||||||
|
stroke: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-loading-spinner .el-loading-text,
|
||||||
|
.el-loading-spinner i {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Message 消息提示
|
||||||
|
------------------------------- */
|
||||||
|
// default/info
|
||||||
|
.el-message {
|
||||||
|
background-color: set-color(info-light-9);
|
||||||
|
border-color: set-color(info-light-8);
|
||||||
|
min-width: unset !important;
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
|
.el-message .el-message__content,
|
||||||
|
.el-message .el-icon-info {
|
||||||
|
color: set-color(info);
|
||||||
|
}
|
||||||
|
// success
|
||||||
|
.el-message--success {
|
||||||
|
background-color: set-color(success-light-9);
|
||||||
|
border-color: set-color(success-light-8);
|
||||||
|
}
|
||||||
|
.el-message--success .el-message__content,
|
||||||
|
.el-message .el-icon-success {
|
||||||
|
color: set-color(success);
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-message--warning {
|
||||||
|
background-color: set-color(warning-light-9);
|
||||||
|
border-color: set-color(warning-light-8);
|
||||||
|
}
|
||||||
|
.el-message--warning .el-message__content,
|
||||||
|
.el-message .el-icon-warning {
|
||||||
|
color: set-color(warning);
|
||||||
|
}
|
||||||
|
// error
|
||||||
|
.el-message--error {
|
||||||
|
background-color: set-color(danger-light-9);
|
||||||
|
border-color: set-color(danger-light-8);
|
||||||
|
}
|
||||||
|
.el-message--error .el-message__content,
|
||||||
|
.el-message .el-icon-error {
|
||||||
|
color: set-color(danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MessageBox 弹框
|
||||||
|
------------------------------- */
|
||||||
|
.el-message-box__headerbtn:focus .el-message-box__close,
|
||||||
|
.el-message-box__headerbtn:hover .el-message-box__close {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
// success
|
||||||
|
.el-message-box__status.el-icon-success {
|
||||||
|
color: set-color(success);
|
||||||
|
}
|
||||||
|
// info
|
||||||
|
.el-message-box__status.el-icon-info {
|
||||||
|
color: set-color(info);
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-message-box__status.el-icon-warning {
|
||||||
|
color: set-color(warning);
|
||||||
|
}
|
||||||
|
// error
|
||||||
|
.el-message-box__status.el-icon-error {
|
||||||
|
color: set-color(danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Notification 通知
|
||||||
|
------------------------------- */
|
||||||
|
// success
|
||||||
|
.el-notification .el-icon-success {
|
||||||
|
color: set-color(success);
|
||||||
|
}
|
||||||
|
// info
|
||||||
|
.el-notification .el-icon-info {
|
||||||
|
color: set-color(info);
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-notification .el-icon-warning {
|
||||||
|
color: set-color(warning);
|
||||||
|
}
|
||||||
|
// error
|
||||||
|
.el-notification .el-icon-error {
|
||||||
|
color: set-color(danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NavMenu 导航菜单
|
||||||
|
------------------------------- */
|
||||||
|
// horizontal
|
||||||
|
.el-menu--horizontal > .el-menu-item.is-active,
|
||||||
|
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||||||
|
border-bottom-color: set-color(primary);
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
|
||||||
|
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
|
||||||
|
.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
|
||||||
|
.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
|
||||||
|
.el-menu--horizontal .el-menu .el-menu-item.is-active,
|
||||||
|
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
// default
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-menu-item:focus,
|
||||||
|
.el-menu-item:hover,
|
||||||
|
.el-submenu__title:focus,
|
||||||
|
.el-submenu__title:hover {
|
||||||
|
background-color: set-color(primary-light-9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabs 标签页
|
||||||
|
------------------------------- */
|
||||||
|
.el-tabs__item.is-active,
|
||||||
|
.el-tabs__item:hover,
|
||||||
|
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
|
||||||
|
.el-tabs--border-card
|
||||||
|
> .el-tabs__header
|
||||||
|
.el-tabs__item:not(.is-disabled):hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-tabs__active-bar {
|
||||||
|
background-color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Breadcrumb 面包屑
|
||||||
|
------------------------------- */
|
||||||
|
.el-breadcrumb__inner a:hover,
|
||||||
|
.el-breadcrumb__inner.is-link:hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dropdown 下拉菜单
|
||||||
|
------------------------------- */
|
||||||
|
.el-dropdown-menu__item:focus,
|
||||||
|
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||||
|
color: set-color(primary);
|
||||||
|
background-color: set-color(primary-light-9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Steps 步骤条
|
||||||
|
------------------------------- */
|
||||||
|
// default
|
||||||
|
.el-step__title.is-finish,
|
||||||
|
.el-step__description.is-finish,
|
||||||
|
.el-step__head.is-finish {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
.el-step__head.is-finish {
|
||||||
|
border-color: set-color(primary);
|
||||||
|
}
|
||||||
|
// success
|
||||||
|
.el-step__title.is-success,
|
||||||
|
.el-step__head.is-success {
|
||||||
|
color: set-color(success);
|
||||||
|
}
|
||||||
|
.el-step__head.is-success {
|
||||||
|
border-color: set-color(success);
|
||||||
|
}
|
||||||
|
// error
|
||||||
|
.el-step__title.is-error,
|
||||||
|
.el-step__head.is-error {
|
||||||
|
color: set-color(danger);
|
||||||
|
}
|
||||||
|
.el-step__head.is-error {
|
||||||
|
border-color: set-color(danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dialog 对话框
|
||||||
|
------------------------------- */
|
||||||
|
.el-dialog__headerbtn:focus .el-dialog__close,
|
||||||
|
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||||
|
color: set-color(primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timeline 时间线
|
||||||
|
------------------------------- */
|
||||||
|
// success
|
||||||
|
.el-timeline-item__node--success {
|
||||||
|
background-color: set-color(success);
|
||||||
|
}
|
||||||
|
// warning
|
||||||
|
.el-timeline-item__node--warning {
|
||||||
|
background-color: set-color(warning);
|
||||||
|
}
|
||||||
|
// danger
|
||||||
|
.el-timeline-item__node--danger {
|
||||||
|
background-color: set-color(danger);
|
||||||
|
}
|
||||||
|
// info
|
||||||
|
.el-timeline-item__node--info {
|
||||||
|
background-color: set-color(info);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Calendar 日历
|
||||||
|
------------------------------- */
|
||||||
|
.el-calendar-table td.is-today {
|
||||||
|
color: set-color(primary);
|
||||||
|
background-color: set-color(primary-light-9);
|
||||||
|
}
|
||||||
|
.el-calendar-table .el-calendar-day:hover,
|
||||||
|
.el-calendar-table td.is-selected {
|
||||||
|
background-color: set-color(primary-light-9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tag 标签
|
||||||
|
------------------------------- */
|
||||||
|
.el-backtop {
|
||||||
|
color: set-color(primary);
|
||||||
|
&:hover {
|
||||||
|
background-color: set-color(primary-light-9);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
@import './app.scss';
|
@import './app.scss';
|
||||||
@import './base.scss';
|
@import './base.scss';
|
||||||
@import './reset-element.scss';
|
@import './element.scss';
|
||||||
@import './media.scss';
|
@import './media.scss';
|
||||||
|
|||||||
@ -0,0 +1,34 @@
|
|||||||
|
/* Button 按钮
|
||||||
|
------------------------------- */
|
||||||
|
@mixin Button($main, $c1, $c2) {
|
||||||
|
color: set-color($main);
|
||||||
|
background: set-color($c1);
|
||||||
|
border-color: set-color($c2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Radio 单选框、Checkbox 多选框
|
||||||
|
------------------------------- */
|
||||||
|
@mixin RadioCheckbox($name) {
|
||||||
|
background-color: set-color($name);
|
||||||
|
border-color: set-color($name);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tag 标签
|
||||||
|
------------------------------- */
|
||||||
|
@mixin Tag($main, $c1, $c2) {
|
||||||
|
color: set-color($main);
|
||||||
|
background-color: set-color($c1);
|
||||||
|
border-color: set-color($c2);
|
||||||
|
}
|
||||||
|
@mixin TagDark($main, $c1) {
|
||||||
|
color: set-color($main);
|
||||||
|
background-color: set-color($c1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Alert 警告
|
||||||
|
------------------------------- */
|
||||||
|
@mixin Alert($main, $c1, $c2) {
|
||||||
|
color: set-color($main);
|
||||||
|
background: set-color($c1);
|
||||||
|
border: 1px solid set-color($c2);
|
||||||
|
}
|
||||||
@ -1,13 +0,0 @@
|
|||||||
@import 'mixins/function.scss';
|
|
||||||
|
|
||||||
/* Button 按钮
|
|
||||||
------------------------------- */
|
|
||||||
.el-button--primary {
|
|
||||||
background-color: set-color(primary);
|
|
||||||
border-color: set-color(primary);
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background: set-color(primary-light-1);
|
|
||||||
border-color: set-color(primary-light-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
39
vue-admin-wonderful-next/src/utils/theme.ts
Normal file
39
vue-admin-wonderful-next/src/utils/theme.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
|
||||||
|
// hex颜色转rgb颜色
|
||||||
|
export function hexToRgb(str: any) {
|
||||||
|
let hexs: any = '';
|
||||||
|
let reg = /^\#?[0-9A-F]{6}$/;
|
||||||
|
if (!reg.test(str)) return ElMessage({ type: 'warning', message: "输入错误的hex" });
|
||||||
|
str = str.replace("#", "");
|
||||||
|
hexs = str.match(/../g);
|
||||||
|
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
|
||||||
|
return hexs;
|
||||||
|
}
|
||||||
|
|
||||||
|
// rgb颜色转Hex颜色
|
||||||
|
export function rgbToHex(r: any, g: any, b: any) {
|
||||||
|
let reg = /^\d{1,3}$/;
|
||||||
|
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage({ type: 'warning', message: "输入错误的rgb颜色值" });
|
||||||
|
let hexs = [r.toString(16), g.toString(16), b.toString(16)];
|
||||||
|
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
|
||||||
|
return `#${hexs.join("")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加深颜色值，level为加深的程度，限0-1之间
|
||||||
|
export function getDarkColor(color: any, level: number) {
|
||||||
|
let reg = /^\#?[0-9A-F]{6}$/;
|
||||||
|
if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" });
|
||||||
|
let rgb = hexToRgb(color);
|
||||||
|
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
|
||||||
|
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 变浅颜色值，level为加深的程度，限0-1之间
|
||||||
|
export function getLightColor(color: any, level: number) {
|
||||||
|
let reg = /^\#?[0-9A-F]{6}$/;
|
||||||
|
if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" });
|
||||||
|
let rgb = hexToRgb(color);
|
||||||
|
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
||||||
|
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||||
|
}
|
||||||
@ -2,6 +2,8 @@ import type { UserConfig } from 'vite';
|
|||||||
import path from 'path';
|
import path from 'path';
|
||||||
|
|
||||||
const viteConfig: UserConfig = {
|
const viteConfig: UserConfig = {
|
||||||
|
sourcemap: false,
|
||||||
|
base: '../',
|
||||||
port: 8080,
|
port: 8080,
|
||||||
hostname: 'localhost',
|
hostname: 'localhost',
|
||||||
open: false,
|
open: false,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user