index.less 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. @import (reference) './variable.less';
  2. @radioItemPrefix: ant-radio-item;
  3. .@{radioItemPrefix} {
  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: @radio-size;
  17. height: @radio-size;
  18. flex: 0 0 @radio-size;
  19. }
  20. &-base {
  21. position: absolute;
  22. top: 0;
  23. left: 0;
  24. width: 100%;
  25. height: 100%;
  26. z-index: 2;
  27. opacity: 0;
  28. }
  29. &-fake {
  30. position: absolute;
  31. top: 0;
  32. left: 0;
  33. width: 100%;
  34. height: 100%;
  35. overflow: hidden;
  36. pointer-events: none;
  37. display: flex;
  38. justify-content: center;
  39. align-items: center;
  40. &-icon {
  41. background-color: @COLOR_CARD;
  42. border: @radio-border-width solid @radio-border-color;
  43. border-radius: @radio-corner-radius;
  44. width: 100%;
  45. height: 100%;
  46. box-sizing: border-box;
  47. }
  48. &-checkedIcon {
  49. border-radius: @radio-corner-radius;
  50. background-color: @radio-background-color;
  51. width: 100%;
  52. height: 100%;
  53. display: flex;
  54. align-items: center;
  55. justify-content: center;
  56. &-icon {
  57. color: @COLOR_WHITE;
  58. font-size: 28 * @rpx;
  59. }
  60. }
  61. &-disbaledIcon {
  62. box-sizing: border-box;
  63. border: @radio-border-width solid @radio-border-color;
  64. border-radius: @radio-corner-radius;
  65. width: 100%;
  66. height: 100%;
  67. background-color: @radio-disabled-background;
  68. }
  69. &-disabledCheckedIcon {
  70. box-sizing: border-box;
  71. border: @radio-border-width solid @radio-border-color;
  72. background-color: @radio-disabled-background;
  73. border-radius: @radio-corner-radius;
  74. width: 100%;
  75. height: 100%;
  76. display: flex;
  77. align-items: center;
  78. justify-content: center;
  79. &-icon {
  80. color: @radio-border-color;
  81. font-size: 28 * @rpx;
  82. }
  83. }
  84. }
  85. &-disabled {
  86. opacity: @opacity-disabled;
  87. }
  88. // .ant-list-item-image-container {
  89. // display: flex;
  90. // justify-content: center;
  91. // align-items: center;
  92. // }
  93. }