110 lines
2.6 KiB
Plaintext
110 lines
2.6 KiB
Plaintext
@import "~ant-design-vue/es/style/themes/default";
|
|
|
|
@global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';
|
|
|
|
@pro-header-bg: @component-background;
|
|
@pro-header-hover-bg: @component-background;
|
|
@pro-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
@pro-header-hover-trigger-action-bg: rgba(0,0,0,.025);
|
|
|
|
.@{global-header-prefix-cls} {
|
|
position: relative;
|
|
height: @layout-header-height;
|
|
padding: 0;
|
|
background: @pro-header-bg;
|
|
box-shadow: @pro-header-box-shadow;
|
|
|
|
&-index-right {
|
|
float: right;
|
|
height: 100%;
|
|
margin-left: auto;
|
|
overflow: hidden;
|
|
|
|
.@{global-header-prefix-cls}-index-action {
|
|
display: inline-block;
|
|
height: 100%;
|
|
padding: 0 12px;
|
|
cursor: pointer;
|
|
transition: all .3s;
|
|
|
|
&:hover {
|
|
background: @pro-header-hover-trigger-action-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-logo {
|
|
display: inline-block;
|
|
height: @layout-header-height;
|
|
padding: 0 0 0 24px;
|
|
font-size: 20px;
|
|
line-height: @layout-header-height;
|
|
vertical-align: top;
|
|
cursor: pointer;
|
|
img, svg {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
&-menu {
|
|
.anticon {
|
|
margin-right: 8px;
|
|
}
|
|
.ant-dropdown-menu-item {
|
|
min-width: 160px;
|
|
}
|
|
}
|
|
|
|
&-trigger {
|
|
height: @layout-header-height;
|
|
line-height: @layout-header-height;
|
|
vertical-align: top;
|
|
padding: 0 22px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
transition: all 0.3s, padding 0s;
|
|
.anticon {
|
|
font-size: 20px;
|
|
vertical-align: -0.225em;
|
|
}
|
|
&:hover {
|
|
background: @pro-header-hover-trigger-action-bg;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
height: @layout-header-height;
|
|
line-height: @layout-header-height;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dark {
|
|
height: @layout-header-height;
|
|
.action {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
> i {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
&:hover,
|
|
&.opened {
|
|
background: @primary-color;
|
|
}
|
|
.ant-badge {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-pro-global-header-index-action {
|
|
i {
|
|
color: rgba(0,0,0,.65);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
}
|