export.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. /**Variable**/
  2. @import './base/checked.scss';
  3. .vxe-export--panel-column > ul {
  4. list-style-type: none;
  5. overflow: auto;
  6. margin: 0;
  7. padding: 0;
  8. user-select: none;
  9. & > li {
  10. overflow: hidden;
  11. text-overflow: ellipsis;
  12. white-space: nowrap;
  13. cursor: pointer;
  14. }
  15. }
  16. .vxe-export--panel {
  17. & > table {
  18. width: 100%;
  19. border: 0;
  20. table-layout: fixed;
  21. tr {
  22. td {
  23. padding: 0 10px;
  24. &:nth-child(1) {
  25. text-align: right;
  26. width: 30%;
  27. font-weight: 700;
  28. padding: 8px 10px;
  29. }
  30. &:nth-child(2) {
  31. width: 70%;
  32. }
  33. & > .vxe-input,
  34. & > .vxe-select {
  35. width: 80%;
  36. }
  37. }
  38. }
  39. }
  40. .vxe-export--panel-column {
  41. width: 80%;
  42. border: 1px solid $vxe-input-border-color;
  43. margin: 3px 0;
  44. border-radius: $vxe-border-radius;
  45. user-select: none;
  46. & > ul {
  47. & > li {
  48. padding: 0.2em 1em 0.2em 2.3em;
  49. @for $i from 2 through 8 {
  50. $interval: $i - 1 + 0.2;
  51. &.level--#{$i}{
  52. padding-left: #{$interval + 2.3}em;
  53. .vxe-checkbox--icon {
  54. left: #{$interval + 0.6}em;
  55. }
  56. }
  57. }
  58. }
  59. }
  60. .vxe-export--panel-column-header {
  61. padding: 0.1em 0;
  62. background-color: $vxe-table-header-background-color;
  63. font-weight: 700;
  64. border-bottom: 1px solid $vxe-table-border-color;
  65. }
  66. .vxe-export--panel-column-body {
  67. padding: 0.2em 0;
  68. min-height: 10em;
  69. max-height: 17.6em;
  70. }
  71. }
  72. .vxe-import-selected--file {
  73. padding-right: 40px;
  74. position: relative;
  75. overflow: hidden;
  76. text-overflow: ellipsis;
  77. white-space: nowrap;
  78. user-select: none;
  79. & > i {
  80. display: none;
  81. position: absolute;
  82. top: 50%;
  83. right: 15px;
  84. transform: translateY(-50%);
  85. font-size: 16px;
  86. cursor: pointer;
  87. }
  88. &:hover {
  89. & > i {
  90. display: block;
  91. }
  92. color: $vxe-primary-color;
  93. }
  94. }
  95. .vxe-import-select--file {
  96. border: 1px dashed $vxe-input-border-color;
  97. padding: 6px 34px;
  98. border-radius: $vxe-border-radius;
  99. user-select: none;
  100. cursor: pointer;
  101. &:hover {
  102. color: $vxe-primary-color;
  103. border-color: $vxe-primary-color;
  104. }
  105. }
  106. .vxe-export--panel-btns {
  107. text-align: right;
  108. padding: 0.25em;
  109. }
  110. }
  111. .vxe-export--panel-column-option {
  112. @extend %XECheckbox;
  113. .vxe-checkbox--icon {
  114. left: 0.6em;
  115. top: 0.38em;
  116. }
  117. &:hover {
  118. background-color: $vxe-table-row-hover-background-color;
  119. }
  120. }
  121. .vxe-modal--wrapper {
  122. .vxe-export--panel-column-option {
  123. & > .vxe-checkbox--icon {
  124. font-size: $vxe-checkbox-font-size-default;
  125. }
  126. }
  127. &.size--medium {
  128. .vxe-export--panel-column-option {
  129. & > .vxe-checkbox--icon {
  130. font-size: $vxe-checkbox-font-size-medium;
  131. }
  132. }
  133. }
  134. &.size--small {
  135. .vxe-export--panel-column-option {
  136. & > .vxe-checkbox--icon {
  137. font-size: $vxe-checkbox-font-size-small;
  138. }
  139. }
  140. }
  141. &.size--mini {
  142. .vxe-export--panel-column-option {
  143. & > .vxe-checkbox--icon {
  144. font-size: $vxe-checkbox-font-size-mini;
  145. }
  146. }
  147. }
  148. }