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.24 kB
CSS
.nut-radiogroup{display:flex;flex-wrap:wrap;align-items:flex-start}.nut-radiogroup .nut-radio{margin:var(--nutui-radiogroup-radio-margin, 0 16px 16px 0)}.nut-radiogroup .nut-radio__label{margin:var(--nutui-radiogroup-radio-label-margin, 0 0 0 4px)}.nut-radiogroup--vertical{display:inherit}.nut-radiogroup--vertical .nut-radio.nut-radio--reverse{width:100%;justify-content:space-between}.nut-radiogroup--vertical .nut-radio__button{border:1px solid var(--nutui-radio-button-background, var(--nsui-gray-color-2, #F5F5F5))}.nut-radiogroup--vertical .nut-radio__button--active{border-color:var(--nutui-radio-label-button-border-color, var(--nsui-brand-color-guide, #2C68FF));background-color:var(--nutui-radio-label-button-background, #F4F7FF)}.nut-radiogroup--horizontal .nut-radio{display:inline-flex}.nut-radiogroup--horizontal .nut-radio__button--active{border-color:var(--nutui-radio-label-button-border-color, var(--nsui-brand-color-guide, #2C68FF));background-color:var(--nutui-radio-label-button-background, #F4F7FF)}.nut-radiogroup .nut-radio__button--active.nut-radio__button--disabled{background:var(--nutui-radio-button-disabled-active-background, #F4F7FF);color:var(--nutui-radio-button-disabled-active-color, #A3C6FF);border:1px solid var(--nutui-radio-button-disabled-active-border-color, #A3C6FF)}.nut-radio{display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}.nut-radio:last-child{margin-bottom:0;margin-right:0}.nut-radio.nut-radio--reverse .nut-radio__label{margin-right:var(--nutui-radio-label-margin-left, 4px);margin-left:0}.nut-radio__button{display:inline-flex;align-items:center;padding:var(--nutui-radio-button-padding, 4px 16px);font-size:var(--nutui-radio-button-font-size, 14px);line-height:var(--nutui-radio-button-font-line-height, 22px);background:var(--nutui-radio-button-background, var(--nsui-gray-color-2, #F5F5F5));border-radius:var(--nutui-radio-button-border-radius, 16px);color:var(--nutui-radio-label-font-color, var(--nsui-gray-color-8, #595959));box-sizing:border-box;border:1px solid var(--nutui-radio-button-background, var(--nsui-gray-color-2, #F5F5F5))}.nut-radio__button--active{background:var(--nutui-radio-label-button-background, #F4F7FF);color:var(--nutui-radio-label-font-active-color, var(--nsui-brand-color-guide, #2C68FF));border:1px solid var(--nutui-radio-label-button-border-color, var(--nsui-brand-color-guide, #2C68FF))}.nut-radio__button--disabled{background:var(--nutui-radio-button-background, var(--nsui-gray-color-4, #E5E5E5));color:var(--nutui-radio-label-disable-color, var(--nsui-gray-color-6, #BFBFBF));border:1px solid var(--nutui-radio-button-background, var(--nsui-gray-color-4, #E5E5E5))}.nut-radio .nut-radio__button--active.nut-radio__button--disabled{background:var(--nutui-radio-button-disabled-active-background, #F4F7FF);color:var(--nutui-radio-button-disabled-active-color, #A3C6FF);border:1px solid var(--nutui-radio-button-disabled-active-border-color, #A3C6FF)}.nut-radio__label{margin-left:var(--nutui-radio-label-margin-left, 4px);font-size:var(--nutui-radio-label-font-size, 16px);line-height:var(--nutui-radio-label-font-line-height, 24px);color:var(--nutui-radio-label-font-color, var(--nsui-gray-color-8, #595959))}.nut-radio__label--disabled{color:var(--nutui-radio-label-disable-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-radio__icon{color:var(--nutui-radio-label-font-active-color, var(--nsui-brand-color-guide, #2C68FF));transition-duration:.3s;transition-property:color,border-color,background-color;font-size:var(--nutui-radio-icon-font-size, 18px)}.nut-radio__icon--unchecked{color:var(--nutui-radio-icon-unchecked-color, var(--nsui-gray-color-5, #D9D9D9))}.nut-radio__icon--disable{color:var(--nutui-radio-icon-disable-color, var(--nsui-gray-color-3, #F0F0F0))}.nut-radio--small .nut-radio__label{font-size:var(--nutui-radio-label-font-size-small, 14px);line-height:var(--nutui-radio-label-font-line-height-small, 22px)}.nut-radio--small .nut-radio__button{padding:var(--nutui-radio-button-padding-small, 2px 12px);font-size:var(--nutui-radio-button-font-size-small, 12px);line-height:var(--nutui-radio-button-font-line-height-small, 18px);border-radius:var(--nutui-radio-button-border-radius, 16px)}