index.less 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. @import './var.less';
  2. :root {
  3. --van-radio-size: @radio-size;
  4. --van-radio-border-color: @radio-border-color;
  5. --van-radio-transition-duration: @radio-transition-duration;
  6. --van-radio-label-margin: @radio-label-margin;
  7. --van-radio-label-color: @radio-label-color;
  8. --van-radio-checked-icon-color: @radio-checked-icon-color;
  9. --van-radio-disabled-icon-color: @radio-disabled-icon-color;
  10. --van-radio-disabled-label-color: @radio-disabled-label-color;
  11. --van-radio-disabled-background-color: @radio-disabled-background-color;
  12. }
  13. .van-radio {
  14. display: flex;
  15. align-items: center;
  16. overflow: hidden;
  17. cursor: pointer;
  18. user-select: none;
  19. &--disabled {
  20. cursor: not-allowed;
  21. }
  22. &--label-disabled {
  23. cursor: default;
  24. }
  25. &--horizontal {
  26. margin-right: var(--van-padding-sm);
  27. }
  28. &__icon {
  29. flex: none;
  30. height: 1em;
  31. font-size: var(--van-radio-size);
  32. line-height: 1em;
  33. cursor: pointer;
  34. .van-icon {
  35. display: block;
  36. box-sizing: border-box;
  37. width: 1.25em;
  38. height: 1.25em;
  39. color: transparent;
  40. font-size: 0.8em;
  41. line-height: 1.25;
  42. text-align: center;
  43. border: 1px solid var(--van-radio-border-color);
  44. transition-duration: var(--van-radio-transition-duration);
  45. transition-property: color, border-color, background-color;
  46. }
  47. &--round {
  48. .van-icon {
  49. border-radius: 100%;
  50. }
  51. }
  52. &--checked {
  53. .van-icon {
  54. color: var(--van-white);
  55. background-color: var(--van-radio-checked-icon-color);
  56. border-color: var(--van-radio-checked-icon-color);
  57. }
  58. }
  59. &--disabled {
  60. cursor: not-allowed;
  61. .van-icon {
  62. background-color: var(--van-radio-disabled-background-color);
  63. border-color: var(--van-radio-disabled-icon-color);
  64. }
  65. }
  66. &--disabled&--checked {
  67. .van-icon {
  68. color: var(--van-radio-disabled-icon-color);
  69. }
  70. }
  71. }
  72. &__label {
  73. margin-left: var(--van-radio-label-margin);
  74. color: var(--van-radio-label-color);
  75. line-height: var(--van-radio-size);
  76. &--left {
  77. margin: 0 var(--van-radio-label-margin) 0 0;
  78. }
  79. &--disabled {
  80. color: var(--van-radio-disabled-label-color);
  81. }
  82. }
  83. }