github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 11:54:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode

Browse Source
This commit is contained in:
Vben
2021-04-07 23:14:51 +08:00
parent f05cc6d34e
commit 5b8eb4a49a
109 changed files with 871 additions and 2873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/layouts/default/tabs/index.less
View File

@@ -1,10 +1,19 @@
@prefix-cls: ~'@{namespace}-multiple-tabs';
html[data-theme='dark'] {
.@{prefix-cls} {
.ant-tabs-tab {
border-bottom: 1px solid @border-color-base;
}
}
}
.@{prefix-cls} {
z-index: 10;
height: @multiple-height + 2;
line-height: @multiple-height + 2;
background: @white;
background: @component-background;
border-bottom: 1px solid @border-color-base;
box-shadow: 0 1px 2px 0 rgba(29, 35, 41, 0.05);
.ant-tabs-small {
@@ -15,7 +24,7 @@
.ant-tabs-card-bar {
height: @multiple-height;
margin: 0;
background: @white;
background: @component-background;
border: 0;
box-shadow: none;
@@ -28,35 +37,14 @@
height: calc(@multiple-height - 2px);
padding-right: 12px;
line-height: calc(@multiple-height - 2px);
color: @text-color-call-out;
background: @white;
border-bottom: 1px solid @header-light-bottom-border-color;
color: @text-color-base;
background: @component-background;
transition: none;
// &:not(.ant-tabs-tab-active)::before {
// position: absolute;
// top: -1px;
// left: 50%;
// width: 100%;
// height: 2px;
// background-color: @primary-color;
// content: '';
// opacity: 0;
// transform: translate(-50%, 0) scaleX(0);
// transform-origin: center;
// transition: none;
// }
&:hover {
.ant-tabs-close-x {
opacity: 1;
}
// &:not(.ant-tabs-tab-active)::before {
// opacity: 1;
// transform: translate(-50%, 0) scaleX(1);
// transition: all 0.3s ease-in-out;
// }
}
.ant-tabs-close-x {
@@ -85,26 +73,20 @@
}
}
.ant-tabs-tab:not(.ant-tabs-tab-active) {
&:hover {
color: @primary-color;
}
}
.ant-tabs-tab-active {
position: relative;
padding-left: 26px;
padding-left: 18px;
color: @white;
background: fade(@primary-color, 100%);
background: @primary-color;
border: 0;
transition: none;
&::before {
position: absolute;
top: calc(50% - 3px);
left: 8px;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
content: '';
transition: none;
}
.ant-tabs-close-x {
opacity: 1;
}
@@ -158,10 +140,10 @@
width: 36px;
height: @multiple-height;
line-height: @multiple-height;
color: #666;
color: @text-color-secondary;
text-align: center;
cursor: pointer;
border-left: 1px solid #eee;
border-left: 1px solid @border-color-base;
&:hover {
color: @text-color-base;