@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序
2 lines (1 loc) • 4.32 kB
CSS
.nut-elevator{position:relative;display:flex;width:100%}.nut-elevator-list{position:relative;top:0;display:flex;width:100%;overflow:hidden}.nut-elevator-list-inner{display:flex;flex-direction:column;min-height:100%;width:100%;background-color:var(--nutui-elevator-list-bg-color, #ffffff);overflow:auto}.nut-elevator-list-item{display:flex}.nut-elevator-list-item-sublist{display:flex;flex-direction:column}.nut-elevator-list-item-code{display:flex;align-items:center;height:var(--nutui-elevator-list-item-code-height, 34px);font-size:var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-2, 15px));color:var(--nutui-elevator-list-item-code-color, var(--nutui-color-text-help, var(--nutui-color-text-disabled, #999999)));font-weight:var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 700))}.nut-elevator-list-item-name{display:flex;align-items:center;height:var(--nutui-elevator-list-item-name-height, 34px);font-size:var(--nutui-elevator-list-font-size, var(--nutui-font-size-2, 15px));color:var(--nutui-elevator-list-color, var(--nutui-color-title, #0d0d0d))}.nut-elevator-list-item-name-highcolor{color:var(--nutui-color-primary, #006dfc);font-weight:600}.nut-elevator-list-fixed{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;width:100%;padding:var(--nutui-elevator-list-item-padding, 0 36px 0 20px);height:var(--nutui-elevator-list-item-code-height, 34px);box-sizing:border-box;box-shadow:var(--nutui-elevator-list-fixed-box-shadow, 0 0 10px #eee);background-color:var(--nutui-elevator-list-fixed-bg-color, #ffffff)}.nut-elevator-list-fixed-title{font-size:var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-2, 15px));color:var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #006dfc));font-weight:var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 700))}.nut-elevator-code-current{position:absolute;right:var(--nutui-elevator-list-item-code-current-right, 60px);top:var(--nutui-elevator-list-item-code-current-top, 50%);transform:var(--nutui-elevator-bars-transform, translateY(-50%));display:flex;align-items:center;justify-content:center;width:var(--nutui-elevator-list-item-code-current-width, 45px);height:var(--nutui-elevator-list-item-code-current-height, 45px);border-radius:var(--nutui-elevator-list-item-code-current-border-radius, 50%);background:var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #999999));box-shadow:0 3px 3px 1px #f0f0f0;color:var(--nutui-elevator-list-item-code-current-color, #ffffff)}.nut-elevator-bars{position:absolute;right:var(--nutui-elevator-bars-right, 16px);top:var(--nutui-elevator-bars-top, 50%);transform:var(--nutui-elevator-bars-transform, translateY(-50%));z-index:var(--nutui-elevator-bars-z-index, 1)}.nut-elevator-bars-inner{display:flex;flex-direction:column}.nut-elevator-bars-inner-item{display:inline-flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:50%;margin:1px 0;color:var(--nutui-elevator-bars-color, var(--nutui-color-text-help, var(--nutui-color-text-disabled, #999999)));font-size:var(--nutui-elevator-bars-font-size, var(--nutui-font-size-0, 11px));cursor:pointer}.nut-elevator-bars-inner-item-active{font-weight:var(--nutui-font-weight-bold, 700);color:var(--nutui-elevator-bars-active-color, #ffffff);background:linear-gradient(to right,#ff475d,#ff0f23);background:#ff0f23}.nut-elevator-horizontal .nut-elevator-list-item-code{width:var(--nutui-elevator-list-item-code-width, 34px);justify-content:center}.nut-elevator-vertical .nut-elevator-list-item{flex-direction:column}.nut-elevator-vertical .nut-elevator-list-item-code{border-bottom:var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-color-border, #e6e6e6))}.nut-elevator-vertical .nut-elevator-list-item-name,.nut-elevator-vertical .nut-elevator-list-item-code{padding:var(--nutui-elevator-list-item-padding, 0 36px 0 20px)}[dir=rtl] .nut-elevator-list-fixed,.nut-rtl .nut-elevator-list-fixed{left:auto;right:0}[dir=rtl] .nut-elevator-code-current,.nut-rtl .nut-elevator-code-current{right:auto;left:var(--nutui-elevator-list-item-code-current-right, 60px)}[dir=rtl] .nut-elevator-bars,.nut-rtl .nut-elevator-bars{right:auto;left:var(--nutui-elevator-bars-right, 16px)}