UNPKG

@nutui/nutui-react-taro

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

2 lines (1 loc) 3.03 kB
.nut-grid-item{position:relative;box-sizing:border-box;color:var(--nutui-grid-item-text-color, var(--nutui-gray-7, #1a1a1a))}.nut-grid-item-text{color:var(--nutui-grid-item-text-color, var(--nutui-gray-7, #1a1a1a));font-size:var(--nutui-grid-item-text-font-size, var(--nutui-font-size-2, 12px));line-height:1.5;word-break:break-all;margin:var(--nutui-grid-item-text-margin, 8px) 0 0 0}.nut-grid-item-content{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:var(--nutui-grid-item-content-padding, 16px 8px);background:var(--nutui-grid-item-content-bg-color, #ffffff);border:0 solid var(--nutui-grid-border-color, var(--nutui-black-3, rgba(0, 0, 0, .06)))}.nut-grid-item-content-border{border-right-width:1px;border-bottom-width:1px}.nut-grid-item-content-surround{border-top-width:1px;border-left-width:1px}.nut-grid-item-content-center{align-items:center;justify-content:center}.nut-grid-item-content-square{position:absolute;top:0;right:0;left:0}.nut-grid-item-content-reverse{flex-direction:column-reverse}.nut-grid-item-content-reverse .nut-grid-item-text{margin:0 0 var(--nutui-grid-item-text-margin, 8px)}.nut-grid-item-content-horizontal{flex-direction:row}.nut-grid-item-content-horizontal .nut-grid-item-text{margin:0 0 0 var(--nutui-grid-item-text-margin, 8px)}.nut-grid-item-content-horizontal.nut-grid-item-content-reverse{flex-direction:row-reverse}.nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text{margin:0 var(--nutui-grid-item-text-margin, 8px) 0 0}.nut-grid-item-content-clickable{cursor:pointer}.nut-grid-item-content-clickable:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border:inherit;border-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-grid-item-content-clickable:active:before{opacity:.1}[dir=rtl] .nut-grid-item-content-border,.nut-rtl .nut-grid-item-content-border{border-right-width:0;border-left-width:1px}[dir=rtl] .nut-grid-item-content-surround,.nut-rtl .nut-grid-item-content-surround{border-left-width:0;border-right-width:1px}[dir=rtl] .nut-grid-item-content-horizontal .nut-grid-item-text,.nut-rtl .nut-grid-item-content-horizontal .nut-grid-item-text{margin:0 var(--nutui-grid-item-text-margin, 8px) 0 0}[dir=rtl] .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text,.nut-rtl .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text{margin:0 0 0 var(--nutui-grid-item-text-margin, 8px)}[dir=rtl] .nut-grid-item-content-clickable:before,.nut-rtl .nut-grid-item-content-clickable:before{left:auto;right:50%;transform:translate(50%,-50%)}.nut-grid{display:flex;flex-wrap:wrap;border:0 solid var(--nutui-grid-border-color, var(--nutui-black-3, rgba(0, 0, 0, .06)))}.nut-grid-border{border-top-width:1px;border-left-width:1px}[dir=rtl] .nut-grid-border,.nut-rtl .nut-grid-border{border-left-width:0;border-right-width:1px}