list.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. @select-prefix: ~'rc-cascader';
  2. .@{select-prefix} {
  3. &-dropdown {
  4. min-height: auto;
  5. }
  6. &-menus {
  7. display: flex;
  8. flex-wrap: nowrap;
  9. }
  10. &-menu {
  11. flex: none;
  12. margin: 0;
  13. padding: 0;
  14. list-style: none;
  15. border-left: 1px solid blue;
  16. height: 180px;
  17. min-width: 100px;
  18. overflow: auto;
  19. &:first-child {
  20. border-left: 0;
  21. }
  22. &-item {
  23. display: flex;
  24. flex-wrap: nowrap;
  25. padding-right: 20px;
  26. position: relative;
  27. &:hover {
  28. background: rgba(0, 0, 255, 0.1);
  29. }
  30. &-selected {
  31. background: rgba(0, 0, 255, 0.05);
  32. }
  33. &-active {
  34. background: rgba(0, 255, 0, 0.1);
  35. }
  36. &-disabled {
  37. opacity: 0.5;
  38. }
  39. &-content {
  40. flex: auto;
  41. }
  42. &-expand-icon {
  43. position: absolute;
  44. right: 4px;
  45. top: 50%;
  46. transform: translateY(-50%);
  47. }
  48. }
  49. }
  50. &-checkbox {
  51. position: relative;
  52. display: block;
  53. flex: none;
  54. width: 20px;
  55. height: 20px;
  56. border: 1px solid blue;
  57. &::after {
  58. position: absolute;
  59. top: 50%;
  60. left: 50%;
  61. transform: translate(-50%, -50%);
  62. content: '';
  63. }
  64. &-checked::after {
  65. content: '✔️';
  66. }
  67. &-indeterminate::after {
  68. content: '➖';
  69. }
  70. }
  71. // ====================== RTL ======================
  72. &-rtl {
  73. direction: rtl;
  74. .@{select-prefix}-menu {
  75. flex: none;
  76. margin: 0;
  77. padding: 0;
  78. list-style: none;
  79. border-left: none;
  80. border-right: 1px solid blue;
  81. &:first-child {
  82. border-right: 0;
  83. }
  84. }
  85. }
  86. }