tree-select.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. @use '../helpers/baseMixin.scss';
  2. @use '../helpers/placement.scss';
  3. .vxe-tree-select {
  4. position: relative;
  5. display: inline-block;
  6. width: 180px;
  7. color: var(--vxe-ui-font-color);
  8. text-align: left;
  9. & > .vxe-input {
  10. .vxe-input--inner {
  11. cursor: pointer;
  12. }
  13. }
  14. &.is--filterable {
  15. .vxe-tree-select-tree--wrapper {
  16. padding-top: 0;
  17. }
  18. .vxe-tree-select--panel-header {
  19. border-top: 1px solid var(--vxe-ui-base-popup-border-color);
  20. }
  21. }
  22. &.is--disabled {
  23. & > .vxe-input {
  24. .vxe-input--inner {
  25. cursor: no-drop;
  26. }
  27. }
  28. }
  29. &.is--loading {
  30. & > .vxe-input {
  31. .vxe-input--inner {
  32. cursor: progress;
  33. }
  34. }
  35. }
  36. & > .vxe-input {
  37. width: 100%;
  38. .vxe-input--suffix-icon > i {
  39. display: inline-block;
  40. @include baseMixin.createAnimationTransition(transform, .2s);
  41. }
  42. }
  43. &.is--active {
  44. &:not(.is--filter) {
  45. & > .vxe-input {
  46. border-color: var(--vxe-ui-font-primary-color);
  47. }
  48. }
  49. }
  50. }
  51. .vxe-tree-select--readonly {
  52. color: var(--vxe-ui-font-color);
  53. display: inline-flex;
  54. }
  55. .vxe-tree-select--panel {
  56. @include placement.createPlacementPanel();
  57. }
  58. .vxe-tree-select--panel-search {
  59. display: block;
  60. .vxe-tree-select-search--input {
  61. width: 100%;
  62. }
  63. }
  64. .vxe-tree-select--header-button {
  65. display: flex;
  66. flex-direction: row;
  67. }
  68. .vxe-tree-select--header-total {
  69. display: flex;
  70. flex-direction: row;
  71. align-items: center;
  72. justify-content: center;
  73. flex-shrink: 0;
  74. padding-left: 0.8em;
  75. }
  76. .vxe-tree-select--header-btns {
  77. display: flex;
  78. flex-direction: row;
  79. flex-grow: 1;
  80. justify-content: right;
  81. }
  82. .vxe-tree-select--panel-wrapper {
  83. display: inline-flex;
  84. flex-direction: column;
  85. position: relative;
  86. border-radius: var(--vxe-ui-base-border-radius);
  87. border: 1px solid var(--vxe-ui-base-popup-border-color);
  88. box-shadow: var(--vxe-ui-base-popup-box-shadow);
  89. background-color: var(--vxe-ui-layout-background-color);
  90. pointer-events: auto;
  91. }
  92. .vxe-tree-select--panel-search {
  93. display: block;
  94. padding: var(--vxe-ui-layout-padding-default);
  95. .vxe-tree-select-search--input {
  96. width: 100%;
  97. }
  98. }
  99. .vxe-tree-select--panel-header {
  100. border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
  101. }
  102. .vxe-tree-select--panel-footer {
  103. border-top: 1px solid var(--vxe-ui-base-popup-border-color);
  104. }
  105. .vxe-tree-select--panel-header,
  106. .vxe-tree-select--panel-footer {
  107. padding: 4px 0;
  108. }
  109. .vxe-tree-select-tree--wrapper {
  110. position: relative;
  111. overflow: auto;
  112. padding: var(--vxe-ui-layout-padding-default);
  113. width: 30em;
  114. outline: 0;
  115. }
  116. .vxe-tree-select--tree {
  117. width: 100%;
  118. .vxe-tree--node-item {
  119. &.is-radio--checked,
  120. &.is-checkbox--checked {
  121. & > .vxe-tree--node-item-inner {
  122. color: var(--vxe-ui-font-primary-color);
  123. }
  124. }
  125. }
  126. .vxe-tree--node-item-inner {
  127. cursor: pointer;
  128. }
  129. }
  130. .vxe-tree-select,
  131. .vxe-tree-select--panel {
  132. font-size: var(--vxe-ui-font-size-default);
  133. &.size--medium {
  134. font-size: var(--vxe-ui-font-size-medium);
  135. }
  136. &.size--small {
  137. font-size: var(--vxe-ui-font-size-small);
  138. }
  139. &.size--mini {
  140. font-size: var(--vxe-ui-font-size-mini);
  141. }
  142. }