tree.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. @use '../helpers/baseMixin.scss';
  2. .vxe-tree {
  3. position: relative;
  4. color: var(--vxe-ui-font-color);
  5. font-family: var(--vxe-ui-font-family);
  6. &.node--trigger {
  7. .vxe-tree--node-item {
  8. cursor: pointer;
  9. }
  10. }
  11. .vxe-tree--node-item {
  12. &.is--current {
  13. background-color: var(--vxe-ui-tree-node-current-background-color);
  14. }
  15. }
  16. &.checkbox--highlight {
  17. .vxe-tree--node-item {
  18. &.is-checkbox--checked {
  19. background-color: var(--vxe-ui-tree-node-checkbox-checked-background-color);
  20. }
  21. }
  22. }
  23. &.radio--highlight {
  24. .vxe-tree--node-item {
  25. &.is-radio--checked {
  26. background-color: var(--vxe-ui-tree-node-radio-checked-background-color);
  27. }
  28. }
  29. }
  30. &.node--hover {
  31. .vxe-tree--node-item {
  32. &:hover {
  33. background-color: var(--vxe-ui-tree-node-hover-background-color);
  34. &.is--current {
  35. background-color: var(--vxe-ui-tree-node-hover-current-background-color);
  36. }
  37. }
  38. }
  39. &.radio--highlight {
  40. .vxe-tree--node-item {
  41. &.is-radio--checked {
  42. &:hover {
  43. background-color: var(--vxe-ui-tree-node-hover-radio-checked-background-color);
  44. }
  45. }
  46. }
  47. }
  48. &.checkbox--highlight {
  49. .vxe-tree--node-item {
  50. &.is-checkbox--checked {
  51. &:hover {
  52. background-color: var(--vxe-ui-tree-node-hover-checkbox-checked-background-color);
  53. }
  54. }
  55. }
  56. }
  57. }
  58. &.show--line {
  59. .vxe-tree--node-child-line {
  60. position: absolute;
  61. top: 0;
  62. left: 0;
  63. height: calc(100% - 0.7em);
  64. transform: translateX(-0.6em);
  65. border-left-width: var(--vxe-ui-tree-node-line-width);
  66. border-left-style: var(--vxe-ui-tree-node-line-style);
  67. border-left-color: var(--vxe-ui-tree-node-line-color);
  68. pointer-events: none;
  69. z-index: 5;
  70. }
  71. }
  72. }
  73. .vxe-tree--node-line-wrapper {
  74. position: relative;
  75. display: block;
  76. height: 0;
  77. }
  78. .vxe-tree--node-line {
  79. position: absolute;
  80. bottom: calc(var(--vxe-ui-tree-node-height) / 2 * -1);
  81. left: 0.6em;
  82. width: 0.6em;
  83. border-width: 0 0 var(--vxe-ui-tree-node-line-width) var(--vxe-ui-tree-node-line-width);
  84. border-style: var(--vxe-ui-tree-node-line-style);
  85. border-color: var(--vxe-ui-tree-node-line-color);
  86. pointer-events: none;
  87. }
  88. .vxe-tree--node-list-wrapper {
  89. overflow-y: auto;
  90. overflow-x: hidden;
  91. }
  92. .vxe-tree--node-child-wrapper {
  93. position: relative;
  94. }
  95. .vxe-tree--node-item {
  96. display: flex;
  97. flex-direction: row;
  98. height: var(--vxe-ui-tree-node-height);
  99. line-height: var(--vxe-ui-tree-node-height);
  100. }
  101. .vxe-tree--node-item-switcher {
  102. position: relative;
  103. width: 1.4em;
  104. flex-shrink: 0;
  105. user-select: none;
  106. }
  107. .vxe-tree--node-item-icon {
  108. position: absolute;
  109. display: inline-flex;
  110. top: 50%;
  111. left: 50%;
  112. transform: translate(-50%, -50%);
  113. cursor: pointer;
  114. text-align: center;
  115. z-index: 7;
  116. & > i {
  117. display: inline-flex;
  118. @include baseMixin.createAnimationTransition(all, 0.2s);
  119. }
  120. }
  121. .vxe-tree--node-item-inner {
  122. display: flex;
  123. flex-direction: row;
  124. flex-grow: 1;
  125. overflow: hidden;
  126. .vxe-tree--node-item-title {
  127. flex-grow: 1;
  128. overflow: hidden;
  129. text-overflow: ellipsis;
  130. white-space: nowrap;
  131. }
  132. .vxe-tree--node-item-extra {
  133. flex-shrink: 0
  134. }
  135. }
  136. .vxe-tree--checkbox-option {
  137. padding-right: 0.4em;
  138. @include baseMixin.createCheckboxIcon();
  139. }
  140. .vxe-tree--radio-option {
  141. padding-right: 0.4em;
  142. @include baseMixin.createRadioIcon();
  143. }
  144. .vxe-tree--empty-placeholder {
  145. margin-top: 1.4em;
  146. text-align: center;
  147. height: var(--vxe-ui-tree-node-height);
  148. color: var(--vxe-ui-input-placeholder-color);
  149. }
  150. .vxe-tree--y-space {
  151. width: 0;
  152. float: left;
  153. }
  154. .vxe-tree {
  155. font-size: var(--vxe-ui-font-size-default);
  156. &.size--medium {
  157. font-size: var(--vxe-ui-font-size-medium);
  158. }
  159. &.size--small {
  160. font-size: var(--vxe-ui-font-size-small);
  161. }
  162. &.size--mini {
  163. font-size: var(--vxe-ui-font-size-mini);
  164. }
  165. }