UNPKG

@nutui/nutui-react

Version:

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

62 lines 2.5 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-primary, #ff0f23)); font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px)); } .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, 16px); box-sizing: border-box; font-weight: var(--nutui-countdown-font-weight, var(--nutui-font-weight, 400)); font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px)); line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px)) + 2px); font-family: "JD"; } .nut-countdown-number, .nut-countdown-number-primary { position: relative; min-width: var(--nutui-countdown-width, 16px); padding: var(--nutui-countdown-number-padding, 0 0); border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2px)); margin: var(--nutui-countdown-number-margin, 0 1px); 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, var(--nutui-radius-xxs, 2px)) * 2); } .nut-countdown-number { background-color: var(--nutui-countdown-number-background-color, var(--nutui-color-background-overlay, #ffffff)); color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); } .nut-countdown-number::after { border: 1px solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-specialdisabled, #ffadbe)); } .nut-countdown-number-primary { background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23)); 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, #ff0f23)); } .nut-countdown-number-text { border: 0; background-color: transparent; color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); } .nut-countdown-unit { color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23)); }