test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 4.13 kB
CSS
.nut-grid-item{position:relative;box-sizing:border-box;flex-shrink:0;color:var(--nutui-grid-item-text-color, var(--nutui-gray-0, #262626))}.nut-grid-item__text{color:var(--nutui-grid-item-text-color, var(--nutui-gray-0, #262626));font-size:var(--nutui-grid-item-text-font-size, 13px);line-height:var(--nutui-grid-item-text-line-height, 20px);word-break:break-all;margin:var(--nutui-grid-item-text-margin, 4px) 0 0 0;padding:0 var(--nutui-grid-item-text-padding, 4px);text-align:center}.nut-grid-item__desc{color:var(--nutui-grid-item-desc-color, var(--nsui-gray-color-7, #8C8C8C));font-size:var(--nutui-grid-item-desc-font-size, 11px);line-height:var(--nutui-grid-item-desc-line-height, 16px);word-break:break-all;margin:var(--nutui-grid-item-desc-margin, 0px) 0 0 0;padding:0 var(--nutui-grid-item-desc-padding, 4px);text-align:center}.nut-grid-item__content{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:var(--nutui-grid-item-content-padding, 16px 4px);background:var(--nutui-grid-item-content-bg-color, var(--nutui-gray-6, #ffffff));border:0 solid var(--nutui-grid-border-color, #f5f6f7)}.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:var(--nutui-grid-item-content-align-items, center);justify-content:var(--nutui-grid-item-content-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, 4px)}.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, 4px);text-align:left}.nut-grid-item__content--horizontal .nut-grid-item__desc{margin:0 0 0 var(--nutui-grid-item-desc-margin-horizontal, 4px);text-align:left}.nut-grid-item__content--has-desc{padding:var(--nutui-grid-item-content-padding, 18px 4px)}.nut-grid-item__content--horizontal.nut-grid-item__content--has-desc{align-items:flex-start}.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, 4px) 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-gray-0, #262626);border:inherit;border-color:var(--nutui-gray-0, #262626);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-grid-item__content--clickable:active:before{opacity:.1}.nut-grid{position:relative}.nut-grid__scroll{padding:var(--nutui-grid-scroll-padding, 0px 16px 0px 0px)}.nut-grid__scroll .nut-grid__container{flex-wrap:nowrap}.nut-grid__container{position:relative;display:flex;flex-wrap:wrap;border:0 solid var(--nutui-grid-border-color, #f5f6f7);overflow-y:auto}.nut-grid__container::-webkit-scrollbar{height:0;background-color:transparent}.nut-grid__container::-webkit-scrollbar-thumb{background-color:transparent}.nut-grid__container::-webkit-scrollbar-track{background-color:transparent}.nut-grid__container--mp-scroll{overflow:hidden;width:fit-content}.nut-grid__container--mp-scroll .nut-grid-item{flex:1}.nut-grid__scroll--screen{width:var(--nutui-grid-scroll-screen-width, 7px);height:var(--nutui-grid-scroll-screen-height, 68px);position:absolute;top:50%;right:var(--nutui-grid-scroll-screen-right, 8px);transform:translateY(-50%);opacity:var(--nutui-grid-scroll-screen-opacity, .4);background:#FFFFFF;box-shadow:var(--nutui-grid-scroll-screen-box-shadow, -1px 0px 7px 0px rgba(0, 0, 0, .3));z-index:2}.nut-grid__scroll--block{position:absolute;top:0;right:0;width:var(--nutui-grid-block-width, 16px);height:100%;background-color:var(--nutui-grid-block-background, var(--nsui-white-color-1, #FFFFFF));z-index:3}.nut-grid__border{border-top-width:1px;border-left-width:1px}