12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- .cl-radio {
- display: inline-block;
- height: 40rpx;
- line-height: 40rpx;
- font-size: 26rpx;
- &__input {
- display: inline-block;
- vertical-align: middle;
- height: 40rpx;
- width: 40rpx;
- text-align: center;
- color: #999;
- margin-right: 14rpx;
- box-sizing: border-box;
- border: 1px solid #ddd;
- border-radius: 40rpx;
- transition: color 0.3s;
- position: relative;
- top: -2rpx;
- text {
- font-size: 24rpx;
- position: relative;
- top: -2rpx;
- }
- }
- &__label {
- display: inline;
- }
- &.is-checked {
- .cl-radio__input {
- background-color: $cl-color-primary;
- border-color: $cl-color-primary;
- color: #fff;
- }
- }
- &.is-disabled {
- .cl-radio__input {
- background-color: #f5f7fa;
- border-color: #e4e7ed;
- color: #c0c4cc;
- }
- .cl-radio__label {
- color: #c0c4cc;
- }
- }
- &.is-border {
- border-radius: 10rpx;
- padding: 14rpx 20rpx;
- border: 1rpx solid #ddd;
- .cl-radio__input {
- display: none;
- }
- &.is-checked {
- border: 1rpx solid $cl-color-primary;
- background-color: $cl-color-primary;
- color: #fff;
- }
- }
- }
- .cl-radio + .cl-radio,
- cl-radio + cl-radio {
- margin-left: 20rpx;
- }
- /* #ifdef MP-TOUTIAO */
- .cl-radio {
- margin-right: 20rpx;
- }
- /* #endif */
|