14c921e6b1
Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]] Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55 Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a] Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938 Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02 Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9 Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5
324 lines
9.7 KiB
SCSS
324 lines
9.7 KiB
SCSS
// 每个主题特有的设置
|
|
.theme-#{$theme-name} {
|
|
|
|
// 背景图片和遮罩
|
|
.d2-layout-header-aside-group {
|
|
background-color: $theme-bg-color;
|
|
.d2-layout-header-aside-mask {
|
|
background: $theme-bg-mask;
|
|
}
|
|
}
|
|
|
|
// 菜单项目
|
|
@mixin theme-menu-hover-style {
|
|
color: $theme-menu-item-color-hover;
|
|
i.fa {
|
|
color: $theme-menu-item-color-hover;
|
|
}
|
|
background: $theme-menu-item-background-color-hover;
|
|
}
|
|
%icon {
|
|
i.fa {
|
|
display: inline-block;
|
|
width: 15px;
|
|
text-align: center;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.el-submenu__title {
|
|
@extend %unable-select;
|
|
@extend %icon;
|
|
}
|
|
.el-menu-item {
|
|
@extend %unable-select;
|
|
@extend %icon;
|
|
}
|
|
.el-submenu__title:hover {
|
|
@include theme-menu-hover-style;
|
|
}
|
|
.el-menu-item:hover {
|
|
@include theme-menu-hover-style;
|
|
}
|
|
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
|
|
@include theme-menu-hover-style;
|
|
}
|
|
.el-menu--horizontal .el-menu .el-submenu__title:hover {
|
|
@include theme-menu-hover-style;
|
|
}
|
|
|
|
// 顶栏
|
|
.d2-theme-header {
|
|
// 切换按钮
|
|
.toggle-aside-btn {
|
|
i {
|
|
color: $theme-header-item-color;
|
|
background: $theme-header-item-background-color;
|
|
&:hover {
|
|
color: $theme-header-item-color-hover;
|
|
}
|
|
}
|
|
}
|
|
// 顶栏菜单
|
|
.el-menu {
|
|
.el-menu-item {
|
|
transition: border-top-color 0s;
|
|
color: $theme-header-item-color;
|
|
background: $theme-header-item-background-color;
|
|
i.fa { color: inherit; }
|
|
&:hover {
|
|
color: $theme-header-item-color-hover;
|
|
background: $theme-header-item-background-color-hover;
|
|
i.fa { color: inherit; }
|
|
}
|
|
&:focus {
|
|
color: $theme-header-item-color-focus;
|
|
background: $theme-header-item-background-color-focus;
|
|
i.fa { color: inherit; }
|
|
}
|
|
&.is-active {
|
|
color: $theme-header-item-color-active;
|
|
background: $theme-header-item-background-color-active;
|
|
i.fa { color: inherit; }
|
|
}
|
|
}
|
|
.el-submenu {
|
|
.el-submenu__title {
|
|
transition: border-top-color 0s;
|
|
color: $theme-header-item-color;
|
|
background: $theme-header-item-background-color;
|
|
i.fa { color: inherit; }
|
|
.el-submenu__icon-arrow {
|
|
color: $theme-header-item-color;
|
|
}
|
|
&:hover {
|
|
color: $theme-header-item-color-hover;
|
|
background: $theme-header-item-background-color-hover;
|
|
i.fa { color: inherit; }
|
|
.el-submenu__icon-arrow {
|
|
color: $theme-header-item-color-hover;
|
|
}
|
|
}
|
|
&:focus {
|
|
color: $theme-header-item-color-focus;
|
|
background: $theme-header-item-background-color-focus;
|
|
i.fa { color: inherit; }
|
|
.el-submenu__icon-arrow {
|
|
color: $theme-header-item-color-focus;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 顶栏右侧
|
|
.d2-header-right {
|
|
.btn-text {
|
|
color: $theme-header-item-color;
|
|
&.can-hover {
|
|
&:hover {
|
|
color: $theme-header-item-color-hover;
|
|
background: $theme-header-item-background-color-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// [布局] 顶栏下面
|
|
.d2-theme-container {
|
|
// 侧边栏
|
|
.d2-theme-container-aside {
|
|
// 菜单为空的时候显示的信息
|
|
.d2-layout-header-aside-menu-empty {
|
|
background: $theme-aside-menu-empty-background-color;
|
|
i {
|
|
color: $theme-aside-menu-empty-icon-color;
|
|
}
|
|
span {
|
|
color: $theme-aside-menu-empty-text-color;
|
|
}
|
|
&:hover {
|
|
background: $theme-aside-menu-empty-background-color-hover;
|
|
i {
|
|
color: $theme-aside-menu-empty-icon-color-hover;
|
|
}
|
|
span {
|
|
color: $theme-aside-menu-empty-text-color-hover;
|
|
}
|
|
}
|
|
}
|
|
// [菜单] 正常状态
|
|
.el-menu {
|
|
.el-menu-item {
|
|
color: $theme-aside-item-color;
|
|
background: $theme-aside-item-background-color;
|
|
i {
|
|
color: $theme-aside-item-color;
|
|
}
|
|
&:hover {
|
|
color: $theme-aside-item-color-hover;
|
|
background: $theme-aside-item-background-color-hover;
|
|
i {
|
|
color: $theme-aside-item-color-hover;
|
|
}
|
|
}
|
|
&:focus {
|
|
color: $theme-aside-item-color-focus;
|
|
background: $theme-aside-item-background-color-focus;
|
|
i {
|
|
color: $theme-aside-item-color-focus;
|
|
}
|
|
}
|
|
&.is-active {
|
|
color: $theme-aside-item-color-active;
|
|
background: $theme-aside-item-background-color-active;
|
|
i {
|
|
color: $theme-aside-item-color-active;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.el-submenu {
|
|
.el-submenu__title {
|
|
color: $theme-aside-item-color;
|
|
background: $theme-aside-item-background-color;
|
|
i {
|
|
color: $theme-aside-item-color;
|
|
}
|
|
.el-submenu__icon-arrow {
|
|
color: $theme-aside-item-color;
|
|
}
|
|
&:hover {
|
|
color: $theme-aside-item-color-hover;
|
|
background: $theme-aside-item-background-color-hover;
|
|
i {
|
|
color: $theme-aside-item-color-hover;
|
|
}
|
|
.el-submenu__icon-arrow {
|
|
color: $theme-aside-item-color-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.d2-theme-container-main {
|
|
// 主体部分分为多页面控制器 和主体
|
|
.d2-theme-container-main-header {
|
|
// 多页面控制器
|
|
.d2-multiple-page-control {
|
|
.el-tabs__header.is-top {
|
|
border-bottom-color: $theme-multiple-page-control-border-color;
|
|
}
|
|
.el-tabs__nav {
|
|
border-color: $theme-multiple-page-control-border-color;
|
|
.el-tabs__item {
|
|
@extend %unable-select;
|
|
color: $theme-multiple-page-control-color;
|
|
background-color: $theme-multiple-page-control-background-color;
|
|
border-left-color: $theme-multiple-page-control-border-color;
|
|
&:first-child {
|
|
border-left: none;
|
|
&:hover {
|
|
padding: 0px 20px;
|
|
}
|
|
.el-icon-close {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.el-tabs__item.is-active {
|
|
color: $theme-multiple-page-control-color-active;
|
|
background-color: $theme-multiple-page-control-background-color-active;
|
|
border-bottom-color: $theme-multiple-page-control-border-color-active;
|
|
}
|
|
}
|
|
%el-tabs__nav {
|
|
font-size: 20px;
|
|
}
|
|
.el-tabs__nav-prev {
|
|
@extend %el-tabs__nav;
|
|
color: $theme-multiple-page-control-nav-prev-color;
|
|
}
|
|
.el-tabs__nav-next {
|
|
@extend %el-tabs__nav;
|
|
color: $theme-multiple-page-control-nav-next-color;
|
|
}
|
|
}
|
|
// 多页控制器的关闭控制
|
|
.d2-multiple-page-control-btn {
|
|
.el-dropdown {
|
|
.el-button-group {
|
|
.el-button {
|
|
border-color: $theme-multiple-page-control-border-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 主体
|
|
.d2-theme-container-main-body {
|
|
// 布局组件
|
|
.container-component {
|
|
// [组件]
|
|
// d2-container-full 填充型
|
|
.d2-container-full {
|
|
border: $theme-container-border-outer;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
.d2-container-full__header {
|
|
border-bottom: $theme-container-border-inner;
|
|
background: $theme-container-header-footer-background-color;
|
|
}
|
|
.d2-container-full__body {
|
|
background: $theme-container-background-color;
|
|
}
|
|
.d2-container-full__footer {
|
|
border-top: $theme-container-border-inner;
|
|
background: $theme-container-header-footer-background-color;
|
|
}
|
|
}
|
|
// [组件]
|
|
// d2-container-full-bs 填充型 滚动优化
|
|
.d2-container-full-bs {
|
|
border: $theme-container-border-outer;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
.d2-container-full-bs__header {
|
|
border-bottom: $theme-container-border-inner;
|
|
background: $theme-container-header-footer-background-color;
|
|
}
|
|
.d2-container-full-bs__body {
|
|
background: $theme-container-background-color;
|
|
}
|
|
.d2-container-full-bs__footer {
|
|
border-top: $theme-container-border-inner;
|
|
background: $theme-container-header-footer-background-color;
|
|
}
|
|
}
|
|
// [组件]
|
|
// d2-container-card 卡片型
|
|
.d2-container-card {
|
|
border: $theme-container-border-outer;
|
|
border-top: none;
|
|
background: transparent;
|
|
&>.el-card__header {
|
|
border-bottom: $theme-container-border-inner;
|
|
background: $theme-container-header-footer-background-color;
|
|
}
|
|
&>.el-card__body {
|
|
background: $theme-container-background-color;
|
|
}
|
|
}
|
|
// 隐形布局组件
|
|
.d2-container-ghost {
|
|
.d2-container-ghost-header {
|
|
border: $theme-container-border-outer;
|
|
&>.el-card__body {
|
|
background: $theme-container-header-footer-background-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|