1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- @import './var.less';
- :root {
- --van-sidebar-font-size: @sidebar-font-size;
- --van-sidebar-line-height: @sidebar-line-height;
- --van-sidebar-text-color: @sidebar-text-color;
- --van-sidebar-disabled-text-color: @sidebar-disabled-text-color;
- --van-sidebar-padding: @sidebar-padding;
- --van-sidebar-active-color: @sidebar-active-color;
- --van-sidebar-background-color: @sidebar-background-color;
- --van-sidebar-selected-font-weight: @sidebar-selected-font-weight;
- --van-sidebar-selected-text-color: @sidebar-selected-text-color;
- --van-sidebar-selected-border-width: @sidebar-selected-border-width;
- --van-sidebar-selected-border-height: @sidebar-selected-border-height;
- --van-sidebar-selected-border-color: @sidebar-selected-border-color;
- --van-sidebar-selected-background-color: @sidebar-selected-background-color;
- }
- .van-sidebar-item {
- position: relative;
- display: block;
- box-sizing: border-box;
- padding: var(--van-sidebar-padding);
- overflow: hidden;
- color: var(--van-sidebar-text-color);
- font-size: var(--van-sidebar-font-size);
- line-height: var(--van-sidebar-line-height);
- background: var(--van-sidebar-background-color);
- cursor: pointer;
- user-select: none;
- &:active {
- background-color: var(--van-sidebar-active-color);
- }
- &:not(:last-child)::after {
- border-bottom-width: 1px;
- }
- &__text {
- // https://github.com/vant-ui/vant/issues/7455
- word-break: break-all;
- }
- &--select {
- color: var(--van-sidebar-selected-text-color);
- font-weight: var(--van-sidebar-selected-font-weight);
- &,
- &:active {
- background-color: var(--van-sidebar-selected-background-color);
- }
- &::before {
- position: absolute;
- top: 50%;
- left: 0;
- width: var(--van-sidebar-selected-border-width);
- height: var(--van-sidebar-selected-border-height);
- background-color: var(--van-sidebar-selected-border-color);
- transform: translateY(-50%);
- content: '';
- }
- }
- &--disabled {
- color: var(--van-sidebar-disabled-text-color);
- cursor: not-allowed;
- &:active {
- background-color: var(--van-sidebar-background-color);
- }
- }
- }
|