index.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. @import '../style/var';
  2. .van-checkbox {
  3. overflow: hidden;
  4. user-select: none;
  5. &__icon,
  6. &__label {
  7. display: inline-block;
  8. vertical-align: middle;
  9. line-height: @checkbox-size;
  10. }
  11. &__icon {
  12. height: @checkbox-size;
  13. .van-icon {
  14. font-size: 14px;
  15. color: transparent;
  16. text-align: center;
  17. line-height: inherit;
  18. width: @checkbox-size;
  19. height: @checkbox-size;
  20. box-sizing: border-box;
  21. border: 1px solid @checkbox-border-color;
  22. transition: @checkbox-transition-duration;
  23. }
  24. &--round {
  25. .van-icon {
  26. border-radius: 100%;
  27. }
  28. }
  29. &--checked {
  30. .van-icon {
  31. color: @white;
  32. border-color: @checkbox-checked-icon-color;
  33. background-color: @checkbox-checked-icon-color;
  34. }
  35. }
  36. &--disabled {
  37. .van-icon {
  38. border-color: @checkbox-disabled-icon-color;
  39. background-color: @checkbox-disabled-background-color;
  40. }
  41. }
  42. &--disabled&--checked {
  43. .van-icon {
  44. color: @checkbox-disabled-icon-color;
  45. }
  46. }
  47. }
  48. &__label {
  49. color: @checkbox-label-color;
  50. margin-left: @checkbox-label-margin;
  51. &--left {
  52. float: left;
  53. margin: 0 @checkbox-label-margin 0 0;
  54. }
  55. &--disabled {
  56. color: @checkbox-disabled-label-color;
  57. }
  58. }
  59. }