UNPKG

@nutui/nutui-react

Version:

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

62 lines 2.24 kB
/* #ifdef harmony */ /* #endif */ /* #ifndef harmony */ /* #endif */ .nut-countdown { display: var(--nutui-countdown-display, flex); flex-direction: row; align-items: center; color: var(--nutui-countdown-color, var(--nutui-color-title)); font-size: var(--nutui-countdown-font-size, 14px); } .nut-countdown-number-primary, .nut-countdown-number, .nut-countdown-number-text, .nut-countdown-unit { display: flex; align-items: center; justify-content: center; height: var(--nutui-countdown-height, 14px); box-sizing: border-box; font-weight: var(--nutui-countdown-font-weight, 400); font-size: var(--nutui-countdown-font-size, 14px); line-height: calc(var(--nutui-countdown-font-size, 14px) + 2px); font-family: "JD"; } .nut-countdown-number, .nut-countdown-number-primary { position: relative; min-width: var(--nutui-countdown-width, 20px); padding: var(--nutui-countdown-number-padding, 0 1px); border-radius: var(--nutui-countdown-number-border-radius, 2px); margin: var(--nutui-countdown-number-margin, 0 2px); text-align: center; } .nut-countdown-number::after, .nut-countdown-number-primary::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; transform: scale(0.5); border-radius: calc(var(--nutui-countdown-number-border-radius, 2px) * 2); } .nut-countdown-number { background-color: var(--nutui-countdown-number-background-color, transparent); color: var(--nutui-countdown-number-color, var(--nutui-color-primary)); } .nut-countdown-number::after { border: 1px solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-light-pressed)); } .nut-countdown-number-primary { background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary)); color: var(--nutui-countdown-number-primary-color, #ffffff); } .nut-countdown-number-primary::after { border: 1px solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary)); } .nut-countdown-number-text { border: 0; background-color: transparent; color: var(--nutui-countdown-number-color, var(--nutui-color-primary)); } .nut-countdown-unit { color: var(--nutui-countdown-color, var(--nutui-color-title)); }