index.less 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. @import (reference) './variable.less';
  2. @checkboxItemPrefix: ant-checkbox-item;
  3. .@{checkboxItemPrefix} {
  4. color: @COLOR_TEXT_PRIMARY;
  5. margin-right: 16 * @rpx;
  6. &-container {
  7. display: flex;
  8. align-items: center;
  9. }
  10. &-content {
  11. padding-left: 10 * @rpx;
  12. text-align: left;
  13. }
  14. &-wrap {
  15. position: relative;
  16. width: @checkbox-size;
  17. height: @checkbox-size;
  18. flex: 0 0 @checkbox-size;
  19. }
  20. &-base {
  21. position: absolute;
  22. top: 0;
  23. left: 0;
  24. width: 100%;
  25. height: 100%;
  26. opacity: 0;
  27. }
  28. &-fake {
  29. position: absolute;
  30. top: 0;
  31. left: 0;
  32. width: 100%;
  33. height: 100%;
  34. overflow: hidden;
  35. pointer-events: none;
  36. display: flex;
  37. justify-content: center;
  38. align-items: center;
  39. &-icon {
  40. background-color: @COLOR_CARD;
  41. border: @checkbox-border-width solid @checkbox-border-color;
  42. border-radius: @checkbox-corner-radius;
  43. width: 100%;
  44. height: 100%;
  45. box-sizing: border-box;
  46. }
  47. &-checkedIcon {
  48. border-radius: @checkbox-corner-radius;
  49. background-color: @checkbox-background-color;
  50. width: 100%;
  51. height: 100%;
  52. display: flex;
  53. align-items: center;
  54. justify-content: center;
  55. &-icon {
  56. color: @COLOR_WHITE;
  57. font-size: 28 * @rpx;
  58. }
  59. }
  60. &-disbaledIcon {
  61. box-sizing: border-box;
  62. border: @checkbox-border-width solid @checkbox-border-color;
  63. border-radius: @checkbox-corner-radius;
  64. width: 100%;
  65. height: 100%;
  66. background-color: @checkbox-disabled-background;
  67. }
  68. &-disabledCheckedIcon {
  69. box-sizing: border-box;
  70. border: @checkbox-border-width solid @checkbox-border-color;
  71. background-color: @checkbox-disabled-background;
  72. border-radius: @checkbox-corner-radius;
  73. width: 100%;
  74. height: 100%;
  75. display: flex;
  76. align-items: center;
  77. justify-content: center;
  78. &-icon {
  79. color: @checkbox-border-color;
  80. font-size: 28 * @rpx;
  81. }
  82. }
  83. }
  84. &-disabled {
  85. opacity: @opacity-disabled;
  86. }
  87. }