首页切换标签重构
This commit is contained in:
@@ -4,39 +4,49 @@
|
||||
* @author Vben、ThinkGem
|
||||
*/
|
||||
@prefix-cls-3: ~'jeesite-multiple-tabs-3'; // Tabs style
|
||||
@multiple-height-large: 40px; // TABS_HEIGHT_LARGE
|
||||
@multiple-height-large: 36px; // TABS_HEIGHT_LARGE
|
||||
|
||||
.@{prefix-cls-3} {
|
||||
z-index: 10;
|
||||
height: @multiple-height-large + 2;
|
||||
line-height: @multiple-height-large + 2;
|
||||
height: @multiple-height-large + 8;
|
||||
line-height: @multiple-height-large + 8;
|
||||
background: rgb(240, 242, 245);
|
||||
border-top: 1px solid rgb(226 232 240);
|
||||
overflow: hidden;
|
||||
|
||||
.ant-tabs.ant-tabs-card {
|
||||
.ant-tabs-nav {
|
||||
height: @multiple-height-large;
|
||||
background-color: @content-bg;
|
||||
margin: 0;
|
||||
background-color: rgb(255, 255, 255);
|
||||
margin: 4px 12px 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 12px;
|
||||
padding: 0 8px;
|
||||
|
||||
&::before {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
height: calc(@multiple-height-large - 15px);
|
||||
line-height: calc(@multiple-height-large - 13px);
|
||||
height: calc(@multiple-height-large - 13px);
|
||||
line-height: normal;
|
||||
color: @text-color-base;
|
||||
background-color: @component-background;
|
||||
transition: none;
|
||||
border-radius: 7px !important;
|
||||
margin: 12px 0 0;
|
||||
padding-left: 10px;
|
||||
padding-right: 11px;
|
||||
margin: 4px 0 0;
|
||||
padding-left: 7px;
|
||||
padding-right: 8px;
|
||||
border: 0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.ant-tabs-tab-btn {
|
||||
transition: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@@ -46,9 +56,9 @@
|
||||
|
||||
.anticon {
|
||||
opacity: 0.8;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
margin-right: 3px;
|
||||
|
||||
svg {
|
||||
fill: @text-color-base;
|
||||
@@ -57,13 +67,13 @@
|
||||
|
||||
.ant-tabs-tab-remove {
|
||||
width: 12px;
|
||||
height: 23px;
|
||||
height: 18px;
|
||||
color: inherit;
|
||||
transition: none;
|
||||
padding: 0;
|
||||
|
||||
.anticon {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
|
||||
svg {
|
||||
width: 0.6em;
|
||||
@@ -105,10 +115,10 @@
|
||||
}
|
||||
|
||||
.ant-tabs-nav > div:nth-child(1) {
|
||||
margin-left: 13px;
|
||||
margin-left: 8px;
|
||||
|
||||
.ant-tabs-tab {
|
||||
margin-right: 6px !important;
|
||||
margin-right: 8px !important;
|
||||
|
||||
&:nth-last-child(2) {
|
||||
margin-right: 20px !important;
|
||||
@@ -206,9 +216,18 @@
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.@{prefix-cls-3} {
|
||||
background: rgb(20, 20, 20);
|
||||
border-top: 1px solid rgb(51 65 85);
|
||||
overflow: hidden;
|
||||
|
||||
.ant-tabs.ant-tabs-card {
|
||||
.ant-tabs-nav {
|
||||
background: #000;
|
||||
background: rgb(20, 20, 20);
|
||||
border-radius: 12px;
|
||||
padding: 0 8px;
|
||||
margin: 4px 12px 0;
|
||||
height: @multiple-height-large;
|
||||
box-shadow: inset 0 0 0 1px rgb(51 65 85);
|
||||
|
||||
&::before {
|
||||
border-bottom: 0;
|
||||
|
||||
Reference in New Issue
Block a user