'admin-20.12.20:完成自定义全局主题'
This commit is contained in:
lyt-Top
parent
10c1096117
commit
873bb13242
@ -2,7 +2,7 @@
|
||||
home: true
|
||||
heroImage: https://v1.vuepress.vuejs.org/hero.png
|
||||
heroText: vue-admin-wonderful
|
||||
tagline: 这是 vue3.x + vite + element plus + typescript 的开发文档
|
||||
tagline: 这是 vue3.x Composition API + vite + element plus + typescript 的开发文档
|
||||
actionText: 快速上手 →
|
||||
actionLink: /guide/
|
||||
features:
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-plus": "^1.0.1-beta.7",
|
||||
"element-plus": "^1.0.1-beta.10",
|
||||
"vue": "^3.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,8 @@
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
body,
|
||||
#app {
|
||||
width: 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-white: #ffffff !default;
|
||||
$--color-black: #000000 !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default;
|
||||
// $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default;
|
||||
// $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default;
|
||||
// $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
|
||||
// $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default;
|
||||
// $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default;
|
||||
// $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default;
|
||||
// $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default;
|
||||
// $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default;
|
||||
$--color-whites: #ffffff !default;
|
||||
$--color-blacks: #000000 !default;
|
||||
$--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default;
|
||||
$--color-primary-light-2: mix($--color-whites, $--color-primary, 20%) !default;
|
||||
$--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default;
|
||||
$--color-primary-light-4: mix($--color-whites, $--color-primary, 40%) !default;
|
||||
$--color-primary-light-5: mix($--color-whites, $--color-primary, 50%) !default;
|
||||
$--color-primary-light-6: mix($--color-whites, $--color-primary, 60%) !default;
|
||||
$--color-primary-light-7: mix($--color-whites, $--color-primary, 70%) !default;
|
||||
$--color-primary-light-8: mix($--color-whites, $--color-primary, 80%) !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 {
|
||||
--color-primary: #{$--color-primary};
|
||||
--color-white: #{$--color-white};
|
||||
--color-black: #{$--color-black};
|
||||
--color-whites: #{$--color-whites};
|
||||
--color-blacks: #{$--color-blacks};
|
||||
--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 './base.scss';
|
||||
@import './reset-element.scss';
|
||||
@import './element.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';
|
||||
|
||||
const viteConfig: UserConfig = {
|
||||
sourcemap: false,
|
||||
base: '../',
|
||||
port: 8080,
|
||||
hostname: 'localhost',
|
||||
open: false,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user