UNPKG

@nutui/nutui-react-taro

Version:

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

104 lines 3.55 kB
/* #ifdef harmony */ /* #endif */ /* #ifndef harmony */ /* #endif */ .nut-empty { box-sizing: border-box; width: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: var(--nutui-empty-padding, 20px); } .nut-empty-image img, .nut-empty-image image { width: 100%; height: 100%; } .nut-empty-title { text-align: center; color: var(--nutui-empty-title-color, var(--nutui-color-title)); font-weight: var(--nutui-font-weight-bold); } .nut-empty-description { text-align: center; color: var(--nutui-empty-description-color, var(--nutui-color-text-help)); font-weight: var(--nutui-font-weight); } .nut-empty-actions { display: flex; flex-direction: row; justify-content: center; } .nut-empty-action { margin-right: scale-px(6px); margin-left: scale-px(6px); } .nut-empty-partial-body { display: flex; flex-direction: row; align-items: center; max-width: 100%; } .nut-empty-content { flex: 1; min-width: 0; } .nut-empty--full { padding-top: var(--nutui-empty-full-padding-top, 160px); } .nut-empty--full .nut-empty-image { width: var(--nutui-empty-full-image-size, 160px); height: var(--nutui-empty-full-image-size, 160px); } .nut-empty--full .nut-empty-title { font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, 16px)); line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-8))); } .nut-empty--full .nut-empty-description { font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-text)); line-height: var(--nutui-empty-full-description-line-height, 22px); } .nut-empty--full .nut-empty-actions { margin-top: var(--nutui-empty-full-actions-margin-top, 8px); } .nut-empty--half .nut-empty-image { width: var(--nutui-empty-half-image-size, 80px); height: var(--nutui-empty-half-image-size, 80px); } .nut-empty--half .nut-empty-title { font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-text-small)); line-height: var(--nutui-empty-half-title-line-height, 22px); } .nut-empty--half .nut-empty-description { font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small))); line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px))); } .nut-empty--half .nut-empty-actions { margin-top: var(--nutui-empty-half-actions-margin-top, 8px); } .nut-empty--partial { padding: var(--nutui-empty-partial-padding, 0px 16px); } .nut-empty--partial .nut-empty-partial-body { gap: var(--nutui-empty-partial-content-gap, 8px); } .nut-empty--partial .nut-empty-image { width: var(--nutui-empty-partial-image-size, 32px); height: var(--nutui-empty-partial-image-size, 32px); } .nut-empty--partial .nut-empty-title { text-align: left; font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small))); line-height: var(--nutui-empty-partial-description-line-height, 32px); color: var(--nutui-empty-title-color, var(--nutui-color-title)); font-weight: var(--nutui-font-weight); } .nut-empty--partial .nut-empty-description { text-align: left; font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small))); line-height: var(--nutui-empty-partial-description-line-height, 32px); color: var(--nutui-empty-description-color, var(--nutui-color-text-help)); font-weight: var(--nutui-font-weight); }