acud
Version:
acg react 组件库
598 lines (532 loc) • 16.7 kB
text/less
@import './config.less';
@import './header.less';
@import './sider.less';
.@{menu-prefix-cls} {
margin-bottom: 0;
line-height: 0; // Fix display inline-block gap
text-align: left;
list-style: none;
outline: none;
font-size: @menu-font-size;
background-color: @menu-bg;
&:not(&-with-icon):not(&-global):not(&-sub) {
box-shadow: @menu-shadow;
.basic-tp-config(@menu-light-tp);
}
> li {
list-style: none;
}
// Overflow ellipsis
&-overflow {
display: flex;
&-item {
flex: none;
}
}
&-hidden,
&-submenu-hidden{
display: none;
}
&-item-group-title {
height: @menu-group-height;
padding: 2 * @P 4 * @P @P;
color: @G5;
font-size: @menu-group-font-size;
line-height: 5 * @P;
}
&-item {
cursor: pointer;
position: relative;
display: flex;
}
&-item-custom {
padding: 2 * @P @menu-inline-space;
}
// :focus-visible 会添加元素聚焦
&-item,
&-submenu {
outline: none;
}
&-submenu,
&-item{
.basic-tp-config(@menu-light-tp);
font-size: @T3;
font-weight: @font-weight-400;
}
&-item a {
color: inherit;
font-size: @T3;
font-weight: @font-weight-400;
&::before {
position: absolute;
inset: 0;
background-color: transparent;
content: '';
}
}
&-sub {
border-radius: @R2;
background-color: @G11;
box-shadow: @shadow-1;
}
&-sub&-inline {
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
}
&-submenu-popup {
position: absolute;
z-index: @submenu-zindex;
transform-origin: 0 0;
background-color: @G11;
border-radius: @P;
}
&-submenu-title {
display: flex;
align-items: center;
margin: 0;
white-space: nowrap;
cursor: pointer;
position: relative;
}
&-submenu-placement-bottomCenter > &-vertical {
margin-top: -1 * @P;
}
// MODE - popover 每个模式的样式不一样 sub
&-horizontal-mode > &-vertical,
&-inline-mode > &-vertical {
.@{menu-prefix-cls}-item {
font-size: @T3;
padding-left: 5 * @P;
padding-right: 5 * @P;
display: flex;
// .basic-tp-config(@menu-item-tp);
&-selected {
color: ~'@{@{menu-light-tp}-click-color}';
}
}
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
font-size: @T3;
display: flex;
justify-content: space-between;
padding-right: 3 * @P;
.basic-tp-config(@menu-item-tp);
}
> .@{menu-prefix-cls}-submenu:hover > .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-submenu-selected > .@{menu-prefix-cls}-submenu-title {
color: ~'@{@{menu-light-tp}-click-color}';
}
}
&-horizontal-mode > &-vertical {
.@{menu-prefix-cls}-submenu {
.acud-menu-submenu-arrow::before {
transform: rotate(135deg) translateX(2.5px);
}
.acud-menu-submenu-arrow::after {
transform: rotate(45deg) translateX(-2.5px);
}
.acud-menu-title-content {
margin-right: 3 * @P;
}
}
}
// horizontal
&-horizontal {
font-size: @menu-font-size;
border: 0;
line-height: @menu-horizontal-line-height;
height: @menu-horizontal-line-height;
display: flex;
white-space: nowrap;
> .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-submenu {
padding-right: 5 * @P;
padding-left: 5 * @P;
&:last-child {
margin-right: 0;
}
}
> .@{menu-prefix-cls}-item > .@{menu-prefix-cls}-item-icon {
margin-right: @menu-item-icon-margin-right;
}
}
&-horizontal > &-item-active,
&-horizontal > &-submenu-active {
color: @menu-item-active-color;
}
&-horizontal > &-item,
&-horizontal > &-submenu {
&::after {
position: absolute;
right: 5 * @P;
bottom: 0;
left: 5 * @P;
border-bottom: 2px solid transparent;
transition: transform @animation-duration-slow @ease-in-out;
content: '';
}
}
&-horizontal > &-item-selected {
position: relative;
color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
font-size: @T3;
font-weight: @font-weight-400;
&::after {
border-bottom: 2px solid @menu-item-active-color;
}
}
&-horizontal > &-submenu-selected {
position: relative;
color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
font-size: @T3;
font-weight: @font-weight-400;
&::after {
border-bottom: 2px solid @menu-item-active-color;
}
}
&-horizontal > &-submenu > &-submenu-title {
>.@{menu-prefix-cls}-item-icon {
margin-right: @menu-item-icon-margin-right;
height: @menu-item-height;
}
>.@{menu-prefix-cls}-submenu-expand-icon {
margin-left: @P;
height: @menu-item-height;
}
}
// vertical
&-vertical {
padding: 2 * @P 0;
.@{menu-prefix-cls}-item {
display: flex;
padding: 0 5 * @P;
}
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
height: 8 * @P;
line-height: 8 * @P;
.@{menu-prefix-cls}-item-icon:first-child {
margin-right: @menu-item-icon-margin-right;
}
}
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu {
overflow: hidden;
}
.@{menu-prefix-cls}-submenu {
padding-left: 5 * @P;
}
}
// inline
&-inline {
font-size: @menu-font-size;
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
padding-left: @menu-inline-space;
padding-right: @menu-inline-space;
}
.@{menu-prefix-cls}-item-group {
> .@{menu-prefix-cls}-item-group-list {
> .@{menu-prefix-cls}-submenu {
> .@{menu-prefix-cls}-submenu-title > .@{menu-prefix-cls}-item-icon {
margin-right: @menu-item-icon-margin-right;
}
}
}
}
// Motion enhance for first level
&.@{menu-prefix-cls}-root {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
> .@{menu-prefix-cls}-title-content {
flex: auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
> * {
flex: none;
}
}
// 一级和二级菜单间没有margin
> .@{menu-prefix-cls}-submenu-open > .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list
> .@{menu-prefix-cls}-submenu-open > .@{menu-prefix-cls}-submenu-title {
margin-bottom: 0 ;
}
}
}
&-inline,
&-inline-collapsed {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
height: @menu-item-height;
line-height: @menu-item-height;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
}
// 只有一级菜单间有margin
&.@{menu-prefix-cls}-root {
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
margin-bottom: @P;
}
}
.@{menu-prefix-cls}-item-group {
> .@{menu-prefix-cls}-item-group-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.@{menu-prefix-cls}-item {
> .@{menu-prefix-cls}-item-icon {
margin-right: @menu-item-icon-margin-right;
}
&.@{menu-prefix-cls}-item-selected {
color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
background-color: ~'@{@{menu-inline-item-selected-p}-click-background-color}';
position: relative;
&::before {
content: '';
border-left: 3px solid @B6;
position: absolute;
left: 0;
top: 0;
height: 40px;
}
}
}
.@{menu-prefix-cls}-submenu-title > .@{menu-prefix-cls}-item-icon{
height: @menu-item-height;
}
&.@{menu-prefix-cls}-vertical {
padding: 0;
}
}
&-inline > &-submenu {
.@{menu-prefix-cls}-item-icon {
margin-right: 2 * @P;
}
&-selected {
.basic-tp-config(@menu-inline-item-selected-tp);
> .@{menu-prefix-cls}-submenu-title {
color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
}
}
}
&-inline-header {
height: 12 * @P;
line-height: 12 * @P;
margin-bottom: 2 * @P;
padding-left: 4 * @P;
padding-right: 4 * @P;
display: flex;
color: ~'@{@{menu-item-tp}-default-color}';
&-item {
display: flex;
width: 100%;
border-bottom: 1px solid @G8;
align-items: center;
font-weight: 600;
.@{menu-prefix-cls}-item-icon {
margin-right: 2 * @P;
}
& > &-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&-collapsed {
.@{menu-prefix-cls}-inline-header-item {
padding-left: 1.5 * @P;
}
.@{menu-prefix-cls}-item-icon {
margin-right: 0;
}
}
}
&-inline-title-pop {
box-shadow: @menu-shadow;
.@{menu-prefix-cls}:not(.@{menu-prefix-cls}-with-icon):not(.@{menu-prefix-cls}-global):not(.@{menu-prefix-cls}-sub.@{menu-prefix-cls}-inline),
.@{menu-prefix-cls}-sub {
box-shadow: none;
}
.@{menu-prefix-cls}-pop-sub-title {
height: 8 * @P;
line-height: 8 * @P;
border-bottom: 1px solid @G8;
padding-bottom: 2 * @P;
margin-top: 2 * @P;
margin-left: 5 * @P;
margin-right: 5 * @P;
display: flex;
color: ~'@{@{menu-item-tp}-default-color}';
box-sizing: content-box;
}
}
// collapsed
&-inline-collapsed {
width: 15 * @P;
}
&-inline-collapsed > &-item,
&-inline-collapsed > &-item-group > &-item-group-list > &-item,
&-inline-collapsed > &-item-group > &-item-group-list > &-submenu,
&-inline-collapsed > &-item-group > &-item-group-list > &-submenu > &-submenu-title,
&-inline-collapsed > &-submenu > &-submenu-title {
left: 0;
text-overflow: clip;
padding: 0 calc(50% - 8px);
.@{menu-prefix-cls}-submenu-arrow,
.@{menu-prefix-cls}-submenu-expand-icon {
opacity: 0;
}
.@{menu-prefix-cls}-item-icon,
.@{iconfont-css-prefix} {
margin: 0;
+ span {
display: inline-block;
opacity: 0;
}
}
}
&-inline-collapsed > &-item-group > &-item-group-title{
padding: 0 calc(50% - 8px);
}
&-inline-collapsed > &-submenu {
padding-left: 0;
}
&-inline-collapsed > &-submenu-selected > &-submenu-title {
color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
background-color: ~'@{@{menu-inline-item-selected-p}-click-background-color}';
position: relative;
&::before {
content: '';
border-left: 3px solid @B6;
position: absolute;
left: 0;
top: 0;
height: 40px;
}
}
&-inline-collapsed > &-item-custom {
font-size: @menu-item-icon-size;
color: @G2;
padding: 2 * @P calc(50% - 8px);
> .@{menu-prefix-cls}-item-custom-popup-icon:hover {
color: @menu-item-active-color;
cursor: pointer;
}
}
// todo move to menu
// arrow
&-submenu-inline {
.@{menu-prefix-cls}-submenu-arrow {
position: absolute;
top: 50%;
right: 0;
width: 16px;
color: inherit;
transform: translateY(-50%);
transition: transform @animation-duration-slow @ease-in-out;
}
.@{menu-prefix-cls}-submenu-arrow {
// →
&::before,
&::after {
position: absolute;
width: 6px;
height: 1.5px;
background-color: currentColor;
border-radius: 2px;
transition: background @animation-duration-slow @ease-in-out,
transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
color @animation-duration-slow @ease-in-out;
content: '';
}
&::before {
transform: rotate(-45deg) translateX(2.5px);
}
&::after {
transform: rotate(45deg) translateX(-2.5px);
}
}
}
&-submenu-open &-submenu-arrow{
// ↑
// transform: translateY(-2px);
&::after {
transform: translateY(-1.5px) rotate(-45deg);
}
&::before {
transform: translateY(-1.5px) translateX(3.5px) rotate(45deg);
}
}
&-submenu-arrow {
width: 16px;
&::before,
&::after {
position: absolute;
width: 6px;
height: 1.5px;
background-color: currentColor;
border-radius: 2px;
transition: background @animation-duration-slow @ease-in-out,
transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
color @animation-duration-slow @ease-in-out;
content: '';
}
&::before {
transform: rotate(-45deg) translateX(2.5px);
}
&::after {
transform: rotate(45deg) translateX(-2.5px);
}
}
// with icon - horizontal
&-icon-container {
box-shadow: @menu-shadow;
display: flex;
justify-content: space-between;
align-items: center;
height: @headermenu-height;
}
&-icon-container > &-with-icon {
flex-grow: 1;
min-width: 0;
}
&-icon-container > &-iconlist {
justify-content: flex-end;
display: flex;
height: 100%;
line-height: 100%;
> .icon-item {
cursor: pointer;
display: flex;
align-items: center;
font-size: 4 * @P;
margin-right: @menu-horizontal-withicon-margin-right;
.basic-tp-config(@menu-horizontal-withicon-tp);
}
}
.@{menu-prefix-cls}-item-icon,
.@{menu-prefix-cls}-submenu-expand-icon {
display: flex;
align-items: center;;
font-size: @menu-item-icon-size;
}
}
.@{menu-prefix-cls}-inline-header-tooltip {
padding-left: 24px;
.@{acud-prefix}-tooltip-arrow {
transform: translate(16px, -50%);
}
}