radio.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. .cl-radio {
  2. display: inline-block;
  3. height: 40rpx;
  4. line-height: 40rpx;
  5. font-size: 26rpx;
  6. &__input {
  7. display: inline-block;
  8. vertical-align: middle;
  9. height: 40rpx;
  10. width: 40rpx;
  11. text-align: center;
  12. color: #999;
  13. margin-right: 14rpx;
  14. box-sizing: border-box;
  15. border: 1px solid #ddd;
  16. border-radius: 40rpx;
  17. transition: color 0.3s;
  18. position: relative;
  19. top: -2rpx;
  20. text {
  21. font-size: 24rpx;
  22. position: relative;
  23. top: -2rpx;
  24. }
  25. }
  26. &__label {
  27. display: inline;
  28. }
  29. &.is-checked {
  30. .cl-radio__input {
  31. background-color: $cl-color-primary;
  32. border-color: $cl-color-primary;
  33. color: #fff;
  34. }
  35. }
  36. &.is-disabled {
  37. .cl-radio__input {
  38. background-color: #f5f7fa;
  39. border-color: #e4e7ed;
  40. color: #c0c4cc;
  41. }
  42. .cl-radio__label {
  43. color: #c0c4cc;
  44. }
  45. }
  46. &.is-border {
  47. border-radius: 10rpx;
  48. padding: 14rpx 20rpx;
  49. border: 1rpx solid #ddd;
  50. .cl-radio__input {
  51. display: none;
  52. }
  53. &.is-checked {
  54. border: 1rpx solid $cl-color-primary;
  55. background-color: $cl-color-primary;
  56. color: #fff;
  57. }
  58. }
  59. }
  60. .cl-radio + .cl-radio,
  61. cl-radio + cl-radio {
  62. margin-left: 20rpx;
  63. }
  64. /* #ifdef MP-TOUTIAO */
  65. .cl-radio {
  66. margin-right: 20rpx;
  67. }
  68. /* #endif */