| | |
| | | |
| | | .light-border { |
| | | &::after { |
| | | content: ''; |
| | | display: block; |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | display: block; |
| | | width: 2px; |
| | | content: ''; |
| | | background-color: @primary-color; |
| | | } |
| | | } |
| | |
| | | position: relative; |
| | | z-index: 1; |
| | | padding: 12px 20px; |
| | | transition: all @transition-time @ease-in-out; |
| | | color: @menu-dark-subsidiary-color; |
| | | cursor: pointer; |
| | | transition: all @transition-time @ease-in-out; |
| | | |
| | | &-icon { |
| | | position: absolute; |
| | | top: 50%; |
| | | right: 18px; |
| | | transition: transform @transition-time @ease-in-out; |
| | | transform: translateY(-50%) rotate(-90deg); |
| | | transition: transform @transition-time @ease-in-out; |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | &-selected { |
| | | color: #fff; |
| | | background-color: @primary-color !important; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | &-selected { |
| | | z-index: 2; |
| | | color: @primary-color; |
| | | background-color: fade(@primary-color, 10); |
| | | color: @primary-color; |
| | | |
| | | .light-border(); |
| | | } |
| | |
| | | .content(); |
| | | .content() { |
| | | .@{menu-prefix-cls} { |
| | | position: relative; |
| | | display: block; |
| | | position: relative; |
| | | width: 100%; |
| | | padding: 0; |
| | | margin: 0; |
| | | font-size: @font-size-base; |
| | | color: @text-color-base; |
| | | list-style: none; |
| | | padding: 0; |
| | | outline: none; |
| | | color: @text-color-base; |
| | | font-size: @font-size-base; |
| | | list-style: none; |
| | | |
| | | // .collapse-transition { |
| | | // transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, |
| | |
| | | } |
| | | |
| | | &-item { |
| | | display: flex; |
| | | position: relative; |
| | | z-index: 1; |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: @font-size-base; |
| | | outline: none; |
| | | color: inherit; |
| | | font-size: @font-size-base; |
| | | list-style: none; |
| | | cursor: pointer; |
| | | outline: none; |
| | | |
| | | &:hover, |
| | | &:active { |
| | |
| | | white-space: nowrap; |
| | | cursor: pointer; |
| | | |
| | | &:hover { |
| | | color: @primary-color; |
| | | } |
| | | // &:hover { |
| | | // color: @primary-color; |
| | | // } |
| | | |
| | | .@{menu-prefix-cls}-tooltip { |
| | | width: calc(100% - 0px); |
| | |
| | | &-light&-vertical &-item { |
| | | &-active:not(.@{menu-prefix-cls}-submenu) { |
| | | z-index: 2; |
| | | color: @primary-color; |
| | | background-color: fade(@primary-color, 10); |
| | | color: @primary-color; |
| | | |
| | | .light-border(); |
| | | } |
| | | &-active.@{menu-prefix-cls}-submenu { |
| | | color: @primary-color; |
| | | } |
| | | |
| | | &:not(&-selected):hover { |
| | | background-color: rgb(0 0 0 / 6%); |
| | | } |
| | | } |
| | | |
| | | &-light&-vertical &-submenu-title { |
| | | &:not(&-selected):hover { |
| | | background-color: rgb(0 0 0 / 6%); |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | &::before { |
| | | content: ''; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 3px; |
| | | height: 100%; |
| | | content: ''; |
| | | background-color: @primary-color; |
| | | } |
| | | } |
| | |
| | | &-dark&-vertical &-submenu-title { |
| | | color: @menu-dark-subsidiary-color; |
| | | &-active:not(.@{menu-prefix-cls}-submenu) { |
| | | color: #fff !important; |
| | | background-color: @primary-color !important; |
| | | color: #fff !important; |
| | | } |
| | | |
| | | &:hover { |
| | |
| | | > li.@{menu-prefix-cls}-item-active, |
| | | .@{menu-prefix-cls}-submenu-active { |
| | | position: relative; |
| | | color: #fff !important; |
| | | background-color: @sider-dark-darken-bg-color !important; |
| | | color: #fff !important; |
| | | |
| | | &::before { |
| | | content: ''; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 3px; |
| | | height: 100%; |
| | | content: ''; |
| | | background-color: @primary-color; |
| | | } |
| | | |
| | |
| | | &-dark&-vertical &-submenu &-item { |
| | | &-active, |
| | | &-active:hover { |
| | | color: #fff; |
| | | border-right: none; |
| | | color: #fff; |
| | | } |
| | | } |
| | | |