toolbar.scss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. /**Variable**/
  2. @import './base/checked.scss';
  3. /*toolbar*/
  4. .vxe-toolbar {
  5. position: relative;
  6. display: flex;
  7. flex-direction: row;
  8. align-items: center;
  9. padding: 0.6em 0;
  10. color: $vxe-font-color;
  11. font-family: $vxe-font-family;
  12. background-color: $vxe-toolbar-background-color;
  13. &:after {
  14. content: "";
  15. display: block;
  16. clear: both;
  17. height: 0;
  18. overflow: hidden;
  19. visibility: hidden;
  20. }
  21. &.is--perfect {
  22. border: 1px solid $vxe-table-border-color;
  23. border-bottom-width: 0;
  24. background-color: $vxe-table-header-background-color;
  25. }
  26. &.is--loading {
  27. &:before {
  28. content: "";
  29. position: absolute;
  30. top: 0;
  31. left: 0;
  32. width: 100%;
  33. height: 100%;
  34. z-index: $vxe-loading-z-index;
  35. user-select: none;
  36. background-color: $vxe-loading-background-color;
  37. }
  38. }
  39. .vxe-buttons--wrapper {
  40. flex-grow: 1;
  41. & > .vxe-button+.vxe-button--item,
  42. & > .vxe-button--item+.vxe-button,
  43. & > .vxe-button--item+.vxe-button--item {
  44. margin-left: 0.8em;
  45. }
  46. & > .vxe-button--item {
  47. display: inline-block;
  48. }
  49. }
  50. .vxe-tools--wrapper {
  51. & > .vxe-button+.vxe-tool--item,
  52. & > .vxe-tool--item+.vxe-button,
  53. & > .vxe-tool--item+.vxe-tool--item {
  54. margin-left: 0.8em;
  55. }
  56. & > .vxe-tool--item {
  57. display: inline-block;
  58. }
  59. }
  60. .vxe-tools--wrapper {
  61. & > .vxe-button {
  62. display: flex;
  63. align-items: center;
  64. justify-content: center;
  65. }
  66. }
  67. .vxe-buttons--wrapper,
  68. .vxe-tools--wrapper,
  69. .vxe-tools--operate {
  70. display: flex;
  71. align-items: center;
  72. }
  73. .vxe-buttons--wrapper,
  74. .vxe-tools--wrapper {
  75. flex-wrap: wrap;
  76. }
  77. .vxe-tools--operate {
  78. flex-shrink: 0;
  79. }
  80. .vxe-custom--wrapper {
  81. position: relative;
  82. margin-left: 0.8em;
  83. &.is--active {
  84. & > .vxe-button {
  85. background-color: $vxe-toolbar-custom-active-background-color;
  86. border-radius: 50%;
  87. }
  88. .vxe-custom--option-wrapper {
  89. display: block;
  90. }
  91. }
  92. }
  93. .vxe-custom--option-wrapper {
  94. display: none;
  95. position: absolute;
  96. right: 2px;
  97. text-align: left;
  98. background-color: $vxe-toolbar-panel-background-color;
  99. z-index: 19;
  100. border: 1px solid $vxe-table-border-color;
  101. border-radius: $vxe-border-radius;
  102. box-shadow: 0 1px 6px rgba(0,0,0,.2);
  103. .vxe-custom--header {
  104. padding: 0.28em 0;
  105. font-weight: 700;
  106. border-bottom: 1px solid $vxe-table-popup-border-color;
  107. }
  108. .vxe-custom--body {
  109. padding: 0.2em 0;
  110. max-height: 17.6em;
  111. .vxe-custom--option {
  112. &:hover {
  113. background-color: $vxe-table-row-hover-background-color;
  114. }
  115. }
  116. }
  117. .vxe-custom--header,
  118. .vxe-custom--body {
  119. & > li {
  120. max-width: 16em;
  121. min-width: 12.5em;
  122. padding: 0.2em 1em 0.2em 1em;
  123. @for $i from 2 through 8 {
  124. $interval: $i - 1 + 0.2;
  125. &.level--#{$i}{
  126. padding-left: #{$interval + 2.3}em;
  127. .vxe-checkbox--icon {
  128. left: #{$interval + 0.6}em;
  129. }
  130. }
  131. }
  132. }
  133. }
  134. .vxe-custom--footer {
  135. border-top: 1px solid $vxe-table-popup-border-color;
  136. text-align: right;
  137. button {
  138. background-color: transparent;
  139. width: 50%;
  140. height: 2.5em;
  141. border: 0;
  142. color: $vxe-font-color;
  143. text-align: center;
  144. cursor: pointer;
  145. &:focus {
  146. outline: none;
  147. }
  148. &:hover {
  149. color: $vxe-primary-color;
  150. }
  151. }
  152. }
  153. }
  154. }
  155. .vxe-custom--option-wrapper .vxe-custom--header,
  156. .vxe-custom--option-wrapper .vxe-custom--body {
  157. list-style-type: none;
  158. overflow-x: hidden;
  159. overflow-y: auto;
  160. margin: 0;
  161. padding: 0;
  162. user-select: none;
  163. & > li {
  164. overflow: hidden;
  165. text-overflow: ellipsis;
  166. white-space: nowrap;
  167. }
  168. }
  169. .vxe-custom--option {
  170. @extend %XECheckboxIcon;
  171. }
  172. .vxe-toolbar {
  173. font-size: $vxe-font-size;
  174. &.size--medium {
  175. font-size: $vxe-font-size-medium;
  176. }
  177. &.size--small {
  178. font-size: $vxe-font-size-small;
  179. }
  180. &.size--mini {
  181. font-size: $vxe-font-size-mini;
  182. }
  183. }