123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- .n-sidebar-item {
- --sidebar-text-color: #777;
- --sidebar-selected-color: #e73535;
- --sidebar-border-width: 3px;
- --sidebar-bg-color: #f6f8fa;
- --sidebar-bg-selected-color: #fff;
- display: flex;
- padding: 30rpx 16rpx;
- gap: 10rpx;
- align-items: center;
- color: var(--sidebar-text-color);
- background: var(--sidebar-bg-color);
- transition: all linear 0.1s;
- &:nth-child(1) {
- border-top: 0;
- }
- &.selected {
- background-color: var(--sidebar-bg-selected-color);
- color: var(--sidebar-selected-color);
- .n-sidebar-item-border {
- animation: growup 0.1s;
- border-left-color: var(--sidebar-selected);
- }
- }
- &-border {
- flex-shrink: 0;
- height: 40rpx;
- border-radius: 6rpx;
- border-left-style: solid;
- border-left-width: var(--sidebar-border-width);
- border-left-color: transparent;
- }
- &-content {
- font-size: 30rpx;
- flex: 1;
- text-align: center;
- height: 40rpx;
- }
- @keyframes growup {
- 0% {
- height: 0px;
- }
- 60% {
- height: 32rpx;
- }
- 72% {
- height: 26rpx;
- }
- 100% {
- height: 40rpx;
- }
- }
- }
|