.cl-checkbox { display: inline-flex; align-items: center; height: $cl-height; margin-right: 60rpx; position: relative; &__input { display: inline-flex; align-items: center; justify-content: center; color: #fff; position: relative; box-sizing: border-box; border: $cl-border-width solid $cl-border-color; border-radius: $cl-border-radius; height: $cl-checkbox-size; width: $cl-checkbox-size; text { font-size: 24rpx; position: absolute; } } &__label { line-height: 1; font-size: 28rpx; margin-left: 16rpx; flex: 1; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } &.is-checked { .cl-checkbox__input { background-color: $cl-color-primary; border-color: $cl-color-primary; color: #fff; } &.is-text { .cl-checkbox__label { color: $cl-color-primary; } } } &.is-disabled { .cl-checkbox__input { background-color: $cl-color-disabled-bg; border-color: transparent; color: $cl-color-disabled; } .cl-checkbox__label { color: $cl-color-disabled; } } &.is-text { .cl-checkbox__input { display: none; } .cl-checkbox__label { margin-left: 0; } } &.is-border { border-radius: $cl-border-radius; padding: 0 20rpx; margin: 0 20rpx 20rpx 0; border: $cl-border-width solid $cl-border-color; box-sizing: border-box; line-height: normal; &.is-checked { color: $cl-color-primary; border-color: $cl-color-primary; .cl-checkbox__label { color: $cl-color-primary; } } } &.is-fill { margin-right: 0; width: 100%; } &.is-round { border-radius: $cl-checkbox-size; .cl-checkbox__input { border-radius: 100%; } } } /* #ifdef MP */ cl-checkbox { display: inline-flex; } .cl-checkbox-group { &.is-fill { cl-checkbox { display: inline; } } } /* #endif */