// color1 1阶色 - 底色
|
// color2 2阶色
|
// color3 3阶色
|
// color4 4阶色
|
// color5 5阶色
|
// color6 6阶色 - 主色系
|
// color7 7阶色
|
// color8 8阶色
|
// color9 9阶色
|
// color10 10阶色
|
@mixin viewstyle($color1, $color2, $color3, $color4, $color5, $color6, $color7) {
|
#root > .mk-main-view {
|
>.mk-tabview-wrap {
|
>.content-header {
|
>.ant-tabs {
|
>.ant-tabs-bar {
|
.ant-tabs-tab:hover {
|
color: $color5;
|
}
|
.ant-tabs-tab.ant-tabs-tab-active {
|
color: $color6;
|
}
|
.ant-tabs-ink-bar {
|
background-color: $color6;
|
}
|
}
|
}
|
}
|
}
|
>.mk-breadview-wrap {
|
>.ant-breadcrumb {
|
.anticon-redo:hover, .anticon-home:hover {
|
color: $color5;
|
}
|
}
|
}
|
}
|
.custom-data-card-box, .custom-prop-card-box {
|
.data-zoom.radio.active, .data-zoom.checkbox.active {
|
.mk-card:not(.active):not(.selected):hover {
|
> .card-item-box {
|
border-color: $color4 !important;
|
box-shadow: 0 0 4px $color4 !important;
|
}
|
}
|
.mk-card.active {
|
> .card-item-box {
|
border-color: $color6!important;
|
box-shadow: 0 0 4px $color6!important;
|
}
|
}
|
.mk-card.selected {
|
> .card-item-box {
|
border-color: $color4!important;
|
box-shadow: 0 0 4px $color4!important;
|
}
|
}
|
}
|
.data-zoom.radio.backFont, .data-zoom.checkbox.backFont {
|
.mk-card:hover, .mk-card.active, .mk-card.selected {
|
> .card-item-box {
|
border-color: $color6!important;
|
background-color: $color1!important;
|
.ant-mk-text:not(.sign-font) {
|
color: $color6;
|
}
|
}
|
}
|
}
|
.data-zoom.radio.font, .data-zoom.checkbox.font {
|
.mk-card:hover, .mk-card.active, .mk-card.selected {
|
> .card-item-box {
|
border-color: $color6!important;
|
.ant-mk-text:not(.sign-font) {
|
color: $color6;
|
}
|
}
|
}
|
}
|
.data-zoom.radio.tabs, .data-zoom.checkbox.tabs {
|
.mk-card {
|
> .card-item-box {
|
border-top: none!important;
|
border-left: none!important;
|
border-right: none!important;
|
border-radius: 0px!important;
|
border-bottom: 2px solid transparent!important;
|
transition: all 0.3s;
|
cursor: pointer;
|
}
|
}
|
.mk-card:hover {
|
> .card-item-box {
|
.ant-mk-text:not(.sign-font) {
|
color: $color6;
|
}
|
}
|
}
|
.mk-card.active, .mk-card.selected {
|
> .card-item-box {
|
border-bottom-color: $color6!important;
|
.ant-mk-text:not(.sign-font) {
|
color: $color6;
|
}
|
}
|
}
|
}
|
}
|
.normal-group-wrap {
|
.print-button:hover, .print-button:focus, .print-button:active {
|
color: $color5;
|
}
|
}
|
// 搜索栏
|
.mk-search-wrap {
|
>.ant-row {
|
.ant-col.search-button {
|
.ant-btn:not(.ant-btn-primary):not(.ant-btn-link):active, .ant-btn:not(.ant-btn-primary):not(.ant-btn-link).active, .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):hover, .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):focus {
|
color: $color7;
|
border-color: $color7;
|
}
|
.ant-btn-primary {
|
background-color: $color6;
|
border-color: $color6;
|
}
|
.ant-btn-link {
|
color: $color6;
|
}
|
}
|
}
|
.advanced-list {
|
.advance-value {
|
color: $color6;
|
}
|
}
|
}
|
// 表格
|
.normal-data-table, .normal-custom-table, .edit-custom-table {
|
table {
|
.ant-table-tbody {
|
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
|
background-color: $color1;
|
}
|
> tr.ant-table-row-selected:not(.background) td {
|
background-color: $color1;
|
}
|
> tr.ant-table-row-selected:not(.background):hover .ant-table-column-sort {
|
background-color: $color1;
|
}
|
> tr.mk-row-active:not(.background) td {
|
background-color: $color3;
|
}
|
> tr.ant-table-row-selected.mk-row-active:not(.background):hover .ant-table-column-sort {
|
background-color: $color3;
|
}
|
}
|
}
|
}
|
// 弹窗按钮
|
.popview-modal {
|
.ant-modal-footer {
|
.ant-btn:not(.ant-btn-primary):active, .ant-btn:not(.ant-btn-primary).active, .ant-btn:not(.ant-btn-primary):hover, .ant-btn:not(.ant-btn-primary):focus {
|
color: $color7;
|
border-color: $color7;
|
}
|
}
|
}
|
// 表单弹窗
|
.action-modal {
|
.ant-modal-footer {
|
.ant-btn:not(.ant-btn-primary):active, .ant-btn:not(.ant-btn-primary).active, .ant-btn:not(.ant-btn-primary):hover, .ant-btn:not(.ant-btn-primary):focus {
|
color: $color7;
|
border-color: $color7;
|
}
|
.ant-btn-primary {
|
background-color: $color6;
|
border-color: $color6;
|
}
|
}
|
}
|
// 是否框
|
.ant-modal-confirm-confirm {
|
.ant-modal-confirm-btns {
|
.ant-btn:not(.ant-btn-primary):active, .ant-btn:not(.ant-btn-primary).active, .ant-btn:not(.ant-btn-primary):hover, .ant-btn:not(.ant-btn-primary):focus {
|
color: $color7;
|
border-color: $color7;
|
}
|
.ant-btn-primary {
|
background-color: $color6;
|
border-color: $color6;
|
}
|
}
|
}
|
|
.ant-tabs-nav .ant-tabs-tab-active {
|
color: $color6;
|
}
|
.ant-tabs-nav .ant-tabs-ink-bar {
|
background-color: $color6;
|
}
|
.ant-tabs-nav .ant-tabs-tab:active {
|
color: $color7;
|
}
|
.ant-tabs-nav .ant-tabs-tab:hover {
|
color: $color5;
|
}
|
|
// 系统样式修改
|
.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
|
background-color: $color1;
|
}
|
.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
|
background-color: $color1;
|
}
|
// 单选框
|
.ant-radio-checked .ant-radio-inner {
|
border-color: $color6;
|
}
|
.ant-radio-checked::after {
|
border: 1px solid $color6;
|
}
|
.ant-radio-inner::after {
|
background-color: $color6;
|
}
|
.ant-radio-wrapper:hover .ant-radio, .ant-radio:hover .ant-radio-inner, .ant-radio-input:focus + .ant-radio-inner {
|
border-color: $color6;
|
}
|
// 复选框
|
.ant-checkbox-checked .ant-checkbox-inner {
|
background-color: $color6;
|
border-color: $color6;
|
}
|
.ant-checkbox-checked::after {
|
border: 1px solid $color6;
|
}
|
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
|
background-color: $color6;
|
}
|
.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner {
|
border-color: $color6;
|
}
|
// 下拉框
|
.ant-select-selection:hover {
|
border-color: $color5;
|
}
|
.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active {
|
border-color: $color5;
|
box-shadow: 0 0 0 2px $color2;
|
}
|
// 切换
|
.ant-switch-checked {
|
background-color: $color6;
|
}
|
// 输入框
|
.ant-input:hover {
|
border-color: $color5;
|
}
|
.ant-input:focus, .ant-input:active {
|
border-color: $color5;
|
box-shadow: 0 0 0 2px $color2;
|
}
|
.ant-input-number-focused {
|
border-color: $color5;
|
box-shadow: 0 0 0 2px $color2;
|
}
|
.ant-input-number:hover, .ant-input-number:focus, .ant-input-number:active, .ant-input-number-input:hover, .ant-input-number-input:focus, .ant-input-number-input:active, .ant-input-number-focused:hover, .ant-input-number-focused:focus, .ant-input-number-focused:active {
|
border-color: $color5;
|
}
|
.ant-input-number:focus, .ant-input-number:active {
|
box-shadow: 0 0 0 2px $color2;
|
}
|
.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
|
border-color: $color5;
|
}
|
// 日历
|
.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) {
|
border-color: $color5;
|
}
|
// 分页
|
.ant-pagination {
|
.ant-pagination-item-active {
|
border-color: $color6;
|
a {
|
color: $color6;
|
}
|
}
|
.ant-pagination-item:hover a {
|
color: $color6;
|
}
|
.ant-pagination-prev:hover .ant-pagination-item-link {
|
color: $color6;
|
}
|
.ant-pagination-next:hover .ant-pagination-item-link {
|
color: $color6;
|
}
|
.ant-pagination-options {
|
> div:not(:first-child) {
|
z-index: 1;
|
}
|
}
|
}
|
// 表格排序图标
|
.ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-up.on, .ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-down.on {
|
color: $color6;
|
}
|
.mk-water-mark {
|
color: $color4;
|
}
|
.mk-form-split-line {
|
color: $color6;
|
}
|
.system-color {
|
color: $color6;
|
}
|
|
.custom-tab-form-box .mk-normal-form-title.mkbtn {
|
.form-title {
|
color: $color6;
|
border-color: $color6;
|
}
|
.form-title.active {
|
background: $color6;
|
color: #ffffff;
|
}
|
}
|
.ant-input-search .ant-input-group-addon .ant-input-search-button {
|
background-color: $color6;
|
border-color: $color6;
|
}
|
.ant-modal-wrap .ant-modal-footer, .ant-drawer .ant-drawer-footer {
|
.ant-btn:not(.ant-btn-primary):hover {
|
color: $color6;
|
border-color: $color6;
|
}
|
.ant-btn-primary {
|
background-color: $color6;
|
border-color: $color6;
|
}
|
}
|
.ant-carousel {
|
.slick-dots {
|
>li {
|
button {
|
background-color: $color3;
|
}
|
}
|
>li.slick-active {
|
button {
|
background-color: $color6;
|
}
|
}
|
}
|
}
|
.ant-spin {
|
.ant-spin-dot-item {
|
background-color: $color6;
|
}
|
}
|
.ant-tree li .ant-tree-node-content-wrapper:hover {
|
background-color: $color1;
|
}
|
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
background-color: $color2;
|
}
|
}
|
|
body.hidden-split-line #root { // 去除登录页分割线
|
.login-container {
|
.logo {
|
border-color: transparent;
|
}
|
.login-middle {
|
border-color: transparent;
|
}
|
}
|
}
|
|
// 皮肤背景与字体颜色
|
body[class*='-black'] {
|
--mk-sys-background: #000000;
|
--mk-sys-light-background: #434343;
|
--mk-sys-font-color: rgba(255, 255, 255, 0.85);
|
--mk-sys-light-font-color: rgba(255, 255, 255, 0.65);
|
}
|
body[class*='-white'] {
|
--mk-sys-background: #ffffff;
|
--mk-sys-light-background: #ffffff;
|
--mk-sys-font-color: rgba(0, 0, 0, 0.85);
|
--mk-sys-light-font-color: rgba(0, 0, 0, 0.65);
|
}
|
|
body[class*='mk-blue-'] {
|
--mk-sys-color: #1890ff;
|
--mk-sys-color1: #e6f7ff;
|
--mk-sys-color2: #bae7ff;
|
--mk-sys-color3: #91d5ff;
|
--mk-sys-color4: #69c0ff;
|
--mk-sys-color5: #40a9ff;
|
@include viewstyle(#e6f7ff, #bae7ff, #91d5ff, #69c0ff, #40a9ff, #1890ff, #096dd9);
|
}
|
|
body[class*='mk-red-'] {
|
--mk-sys-color: #f5222d;
|
--mk-sys-color1: #fff1f0;
|
--mk-sys-color2: #ffccc7;
|
--mk-sys-color3: #ffa39e;
|
--mk-sys-color4: #ff7875;
|
--mk-sys-color5: #ff4d4f;
|
@include viewstyle(#fff1f0, #ffccc7, #ffa39e, #ff7875, #ff4d4f, #f5222d, #cf1322);
|
}
|
|
body[class*='mk-orange-red-'] {
|
--mk-sys-color: #fa541c;
|
--mk-sys-color1: #fff2e8;
|
--mk-sys-color2: #ffd8bf;
|
--mk-sys-color3: #ffbb96;
|
--mk-sys-color4: #ff9c6e;
|
--mk-sys-color5: #ff7a45;
|
@include viewstyle(#fff2e8, #ffd8bf, #ffbb96, #ff9c6e, #ff7a45, #fa541c, #d4380d);
|
}
|
|
body[class*='mk-orange-'] {
|
--mk-sys-color: #fa8c16;
|
--mk-sys-color1: #fff7e6;
|
--mk-sys-color2: #ffe7ba;
|
--mk-sys-color3: #ffd591;
|
--mk-sys-color4: #ffc069;
|
--mk-sys-color5: #ffa940;
|
@include viewstyle(#fff7e6, #ffe7ba, #ffd591, #ffc069, #ffa940, #fa8c16, #d46b08);
|
}
|
|
body[class*='mk-orange-yellow-'] {
|
--mk-sys-color: #faad14;
|
--mk-sys-color1: #fffbe6;
|
--mk-sys-color2: #fff1b8;
|
--mk-sys-color3: #ffe58f;
|
--mk-sys-color4: #ffd666;
|
--mk-sys-color5: #ffc53d;
|
@include viewstyle(#fffbe6, #fff1b8, #ffe58f, #ffd666, #ffc53d, #faad14, #d48806);
|
}
|
|
body[class*='mk-yellow-'] {
|
--mk-sys-color: #fadb14;
|
--mk-sys-color1: #feffe6;
|
--mk-sys-color2: #ffffb8;
|
--mk-sys-color3: #fffb8f;
|
--mk-sys-color4: #fff566;
|
--mk-sys-color5: #ffec3d;
|
@include viewstyle(#feffe6, #ffffb8, #fffb8f, #fff566, #ffec3d, #fadb14, #d4b106);
|
}
|
|
body[class*='mk-yellow-green-'] {
|
--mk-sys-color: #a0d911;
|
--mk-sys-color1: #fcffe6;
|
--mk-sys-color2: #f4ffb8;
|
--mk-sys-color3: #eaff8f;
|
--mk-sys-color4: #d3f261;
|
--mk-sys-color5: #bae637;
|
@include viewstyle(#fcffe6, #f4ffb8, #eaff8f, #d3f261, #bae637, #a0d911, #7cb305);
|
}
|
|
body[class*='mk-green-'] {
|
--mk-sys-color: #52c41a;
|
--mk-sys-color1: #f6ffed;
|
--mk-sys-color2: #d9f7be;
|
--mk-sys-color3: #b7eb8f;
|
--mk-sys-color4: #95de64;
|
--mk-sys-color5: #73d13d;
|
@include viewstyle(#f6ffed, #d9f7be, #b7eb8f, #95de64, #73d13d, #52c41a, #389e0d);
|
}
|
|
body[class*='mk-cyan-'] {
|
--mk-sys-color: #13c2c2;
|
--mk-sys-color1: #e6fffb;
|
--mk-sys-color2: #b5f5ec;
|
--mk-sys-color3: #87e8de;
|
--mk-sys-color4: #5cdbd3;
|
--mk-sys-color5: #36cfc9;
|
@include viewstyle(#e6fffb, #b5f5ec, #87e8de, #5cdbd3, #36cfc9, #13c2c2, #08979c);
|
}
|
|
body[class*='mk-blue-purple-'] {
|
--mk-sys-color: #2f54eb;
|
--mk-sys-color1: #f0f5ff;
|
--mk-sys-color2: #d6e4ff;
|
--mk-sys-color3: #adc6ff;
|
--mk-sys-color4: #85a5ff;
|
--mk-sys-color5: #597ef7;
|
@include viewstyle(#f0f5ff, #d6e4ff, #adc6ff, #85a5ff, #597ef7, #2f54eb, #1d39c4);
|
}
|
|
body[class*='mk-purple-'] {
|
--mk-sys-color: #722ed1;
|
--mk-sys-color1: #f9f0ff;
|
--mk-sys-color2: #efdbff;
|
--mk-sys-color3: #d3adf7;
|
--mk-sys-color4: #b37feb;
|
--mk-sys-color5: #9254de;
|
@include viewstyle(#f9f0ff, #efdbff, #d3adf7, #b37feb, #9254de, #722ed1, #531dab);
|
}
|
|
body[class*='mk-magenta-'] {
|
--mk-sys-color: #eb2f96;
|
--mk-sys-color1: #fff0f6;
|
--mk-sys-color2: #ffd6e7;
|
--mk-sys-color3: #ffadd2;
|
--mk-sys-color4: #ff85c0;
|
--mk-sys-color5: #f759ab;
|
@include viewstyle(#fff0f6, #ffd6e7, #ffadd2, #ff85c0, #f759ab, #eb2f96, #c41d7f);
|
}
|
|
body[class*='mk-grass-green-'] {
|
--mk-sys-color: #aeb303;
|
--mk-sys-color1: #f2efda;
|
--mk-sys-color2: #e6de97;
|
--mk-sys-color3: #d9d26c;
|
--mk-sys-color4: #ccc845;
|
--mk-sys-color5: #bfbf22;
|
@include viewstyle(#f2efda, #e6de97, #d9d26c, #ccc845, #bfbf22, #aeb303, #838c00);
|
}
|
|
body[class*='mk-deep-red-'] {
|
--mk-sys-color: #c32539;
|
--mk-sys-color1: #fff0f0;
|
--mk-sys-color2: #f5cbcb;
|
--mk-sys-color3: #e89b9e;
|
--mk-sys-color4: #db7077;
|
--mk-sys-color5: #cf4856;
|
@include viewstyle(#fff0f0, #f5cbcb, #e89b9e, #db7077, #cf4856, #c32539, #9c162c);
|
}
|
|
body[class*='mk-deep-blue-'] {
|
--mk-sys-color: #1d3661;
|
--mk-sys-color1: #eff1f4;
|
--mk-sys-color2: #e0e3e9;
|
--mk-sys-color3: #dbdfe6;
|
--mk-sys-color4: #c6cede;
|
--mk-sys-color5: #394c6f;
|
@include viewstyle(#eff1f4, #e0e3e9, #dbdfe6, #c6cede, #394c6f, #1d3661, #1d3661);
|
}
|
