side-bar-item.wxss 2.1 KB

1
  1. @import '../common/style/index.wxss';.t-side-bar-item{display:flex;align-items:center;position:relative;padding:32rpx;font-size:var(--td-side-bar-font-size,32rpx);color:var(--td-side-bar-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));background:var(--td-side-bar-bg-color,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)));min-height:var(--td-side-bar-item-height,112rpx);box-sizing:border-box;white-space:wrap;line-height:var(--td-side-bar-item-line-height,48rpx)}.t-side-bar-item--active{font-weight:600;background:var(--td-bg-color-container,var(--td-font-white-1,#fff));color:var(--td-side-bar-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));--td-badge-content-text-color:var(--td-side-bar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))}.t-side-bar-item__icon{font-size:var(--td-side-bar-icon-size,40rpx);margin-right:4rpx}.t-side-bar-item__prefix,.t-side-bar-item__suffix{z-index:1;position:absolute;right:0;width:100%;height:calc(var(--td-side-bar-border-radius,18rpx) * 2);background:var(--td-bg-color-container,var(--td-font-white-1,#fff));pointer-events:none}.t-side-bar-item__prefix::after,.t-side-bar-item__suffix::after{content:'';display:block;width:100%;height:100%;background-color:var(--td-side-bar-bg-color,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)))}.t-side-bar-item__prefix{top:calc(var(--td-side-bar-border-radius,18rpx) * -2)}.t-side-bar-item__prefix::after{border-bottom-right-radius:var(--td-side-bar-border-radius,18rpx)}.t-side-bar-item__suffix{bottom:calc(var(--td-side-bar-border-radius,18rpx) * -2)}.t-side-bar-item__suffix::after{border-top-right-radius:var(--td-side-bar-border-radius,18rpx)}.t-side-bar-item--disabled{color:var(--td-side-bar-disabled-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))))}.t-side-bar-item__line{width:6rpx;height:28rpx;position:absolute;left:0;top:50%;transform:translateY(-50%);background:var(--td-side-bar-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));border-radius:8rpx}