@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序
2 lines (1 loc) • 4.92 kB
CSS
.nut-badge{position:relative;display:inline-flex;vertical-align:middle;box-sizing:content-box;width:auto}.nut-badge-icon{display:flex;justify-content:center;align-items:center;background:var(--nutui-badge-background-color, var(--nutui-color-danger, var(--nutui-color-error, #ff4949)));padding:var(--nutui-badge-icon-padding, 2px);text-align:center;z-index:var(--nutui-badge-z-index, 1)}.nut-badge-icon .nut-icon{width:var(--nutui-badge-icon-size, 10px);height:var(--nutui-badge-icon-size, 10px);font-size:var(--nutui-badge-icon-size, 10px)}.nut-badge-sup,.nut-badge-icon{border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px))}.nut-badge-sup:after,.nut-badge-icon:after{content:"";position:absolute;top:-50%;bottom:-50%;left:-50%;right:-50%;transform:scale(.5);border:var(--nutui-badge-border, 1px solid #ffffff);border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px))}.nut-badge-sup{display:inline-flex;text-align:center;min-width:var(--nutui-badge-min-width, 6px);padding:var(--nutui-badge-padding, 1px 4px);box-sizing:border-box;color:var(--nutui-badge-color, #ffffff);font-size:var(--nutui-badge-font-size, var(--nutui-font-size-0, 11px));line-height:12px;white-space:nowrap;font-weight:400;vertical-align:middle;background:var(--nutui-badge-background-color, var(--nutui-color-danger, var(--nutui-color-error, #ff4949)));z-index:1}.nut-badge-disabled{background:var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #999999))}.nut-badge-number{font-family:JD}.nut-badge-one{height:var(--nutui-badge-height, 14px);width:var(--nutui-badge-height, 14px)}.nut-badge-content{position:absolute;transform:var(--nutui-badge-content-transform, translate(50%, -50%))}.nut-badge-dot{padding:0;border-radius:50%}.nut-badge-dot:after{border:var(--nutui-badge-dot-border, 1px solid #ffffff);border-radius:50%}.nut-badge-dot-normal{min-width:var(--nutui-badge-dot-width, 6px);width:var(--nutui-badge-dot-width, 6px);height:var(--nutui-badge-dot-width, 6px)}.nut-badge-dot-small{min-width:var(--nutui-badge-dot-small-width, 4px);width:var(--nutui-badge-dot-small-width, 4px);height:var(--nutui-badge-dot-small-width, 4px)}.nut-badge-dot-large{min-width:var(--nutui-badge-dot-large-width, 8px);width:var(--nutui-badge-dot-large-width, 8px);height:var(--nutui-badge-dot-large-width, 8px)}.nut-badge-outline{background:#fff;color:var(--nutui-badge-outline-color, var(--nutui-color-primary, #006dfc))}.nut-badge-outline:after{border:var(--nutui-badge-outline-border, 1px solid var(--nutui-color-primary, #006dfc))}.nut-tabbar-item{display:flex;flex-direction:column;align-items:center;flex:1;padding:6px 0 2px;color:var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #0d0d0d));height:100%}.nut-tabbar-item .nut-icon{width:24px;height:24px;font-size:24px;color:var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #0d0d0d));color:inherit}.nut-tabbar-item-text{display:block;color:var(--nutui-color-text, #666666);font-size:var(--nutui-tabbar-text-font-size, var(--nutui-font-size-0, 11px));line-height:var(--nutui-tabbar-text-font-size, var(--nutui-font-size-0, 11px));margin-top:var(--nutui-tabbar-text-margin-top, 4px)}.nut-tabbar-item .nut-image-default{width:38px;height:38px;border-radius:38px}.nut-tabbar-item-large{justify-content:center;padding:0}.nut-tabbar-item-large .nut-tabbar-item-text{font-size:var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-3, 17px));margin-top:0;line-height:var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-3, 17px));font-weight:var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400))}.nut-tabbar-item-active{color:var(--nutui-tabbar-active-color, var(--nutui-color-primary, #006dfc))}.nut-tabbar-item-active .nut-tabbar-item-text,.nut-tabbar-item-active .nut-icon{color:var(--nutui-tabbar-active-color, var(--nutui-color-primary, #006dfc));color:inherit}.nut-tabbar{border:0px;box-shadow:var(--nutui-tabbar-box-shadow, none);border-bottom:var(--nutui-tabbar-border-bottom, 0);border-top:var(--nutui-tabbar-border-top, 0);width:100%;background:var(--nutui-color-background-overlay, var(--nutui-color-white, #ffffff))}.nut-tabbar-wrap{height:var(--nutui-tabbar-height, 46px);display:flex}.nut-tabbar-wrap-3{padding:0 16px}.nut-tabbar-wrap-2{padding:0 32px}.nut-tabbar-wrap-horizontal{align-items:center}.nut-tabbar-wrap-horizontal .nut-tabbar-item{flex-direction:row;justify-content:center}.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon{width:20px;height:20px}.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text{margin:0 4px 0 6px;font-size:14px}.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup:after{border:0}.nut-tabbar-fixed{position:fixed;bottom:0;left:0}[dir=rtl] .nut-tabbar:last-child,.nut-rtl .nut-tabbar:last-child{border-right:none;border-left:0}[dir=rtl] .nut-tabbar-fixed,.nut-rtl .nut-tabbar-fixed{left:auto;right:0}