toolbar.scss 4.3 KB

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