// 每个主题特有的设置
|
.theme-#{$theme-name} {
|
.el-message {
|
&.el-message--info {
|
background-color: $theme-message-info-background-color;
|
color: $theme-message-info-text-color;
|
border-color: $theme-message-info-border-color;
|
}
|
}
|
|
.el-card {
|
&.d2-card {
|
border: $theme-container-border-outer;
|
.el-card__header {
|
border-bottom: $theme-container-border-outer;
|
}
|
}
|
}
|
|
// 背景图片和遮罩
|
.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;
|
}
|
%el-menu-icon {
|
i {
|
display: inline-block;
|
width: 14px;
|
text-align: center;
|
margin-right: 5px;
|
}
|
svg {
|
margin: 0px;
|
height: 14px;
|
width: 14px;
|
margin-right: 5px;
|
}
|
}
|
.el-submenu__title {
|
@extend %unable-select;
|
@extend %el-menu-icon;
|
}
|
.el-menu-item {
|
@extend %unable-select;
|
@extend %el-menu-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 {
|
// border-bottom: 1px solid #ccc;
|
// 顶栏菜单空间不足时显示的滚动控件
|
.d2-theme-header-menu {
|
.d2-theme-header-menu__prev,
|
.d2-theme-header-menu__next {
|
color: $theme-header-item-color;
|
background: $theme-header-item-background-color;
|
&:hover {
|
color: $theme-header-item-color-hover;
|
background: $theme-header-item-background-color-hover;
|
}
|
}
|
}
|
// 切换按钮
|
.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 {
|
&.is-active {
|
.el-submenu__title {
|
color: $theme-header-item-color-active;
|
background: $theme-header-item-background-color-active;
|
i.fa {
|
color: inherit;
|
}
|
}
|
}
|
.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;
|
fill: $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;
|
fill: $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;
|
fill: $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;
|
|
&:first-child {
|
border-left: none;
|
&:hover {
|
padding: 0px 20px;
|
}
|
}
|
}
|
.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-ghost 隐形布局组件
|
.d2-container-ghost {
|
.d2-container-ghost__header {
|
border-bottom: $theme-container-border-outer;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
background: $theme-container-header-footer-background-color;
|
}
|
.d2-container-ghost__footer {
|
border-top: $theme-container-border-outer;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
background: $theme-container-header-footer-background-color;
|
}
|
}
|
// [组件]
|
// d2-container-ghost-bs 隐形布局组件 滚动优化
|
.d2-container-ghost-bs {
|
.d2-container-ghost-bs__header {
|
border-bottom: $theme-container-border-outer;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
background: $theme-container-header-footer-background-color;
|
}
|
.d2-container-ghost-bs__footer {
|
border-top: $theme-container-border-outer;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
background: $theme-container-header-footer-background-color;
|
}
|
}
|
// [组件]
|
// d2-container-card 卡片型
|
.d2-container-card {
|
.d2-container-card__header {
|
border-bottom: $theme-container-border-inner;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
background: $theme-container-header-footer-background-color;
|
}
|
.d2-container-card__body {
|
.d2-container-card__body-card {
|
background: $theme-container-background-color;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
border-bottom: $theme-container-border-outer;
|
}
|
}
|
.d2-container-card__footer {
|
border-top: $theme-container-border-outer;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
background: $theme-container-header-footer-background-color;
|
}
|
}
|
// [组件]
|
// d2-container-card-bs 卡片型 滚动优化
|
.d2-container-card-bs {
|
.d2-container-card-bs__header {
|
border-bottom: $theme-container-border-inner;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
background: $theme-container-header-footer-background-color;
|
}
|
.d2-container-card-bs__body {
|
.d2-container-card-bs__body-card {
|
background: $theme-container-background-color;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
border-bottom: $theme-container-border-outer;
|
}
|
}
|
.d2-container-card-bs__footer {
|
border-top: $theme-container-border-outer;
|
border-left: $theme-container-border-outer;
|
border-right: $theme-container-border-outer;
|
background: $theme-container-header-footer-background-color;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
