toolbar.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /*toolbar*/
  2. .vxe-toolbar {
  3. position: relative;
  4. display: flex;
  5. flex-direction: row;
  6. align-items: center;
  7. padding: 0.6em 0;
  8. color: var(--vxe-ui-font-color);
  9. font-family: var(--vxe-ui-font-family);
  10. background-color: var(--vxe-ui-layout-background-color);
  11. &:after {
  12. content: "";
  13. display: block;
  14. clear: both;
  15. height: 0;
  16. overflow: hidden;
  17. visibility: hidden;
  18. }
  19. &.is--perfect {
  20. border: 1px solid var(--vxe-ui-table-border-color);
  21. border-bottom-width: 0;
  22. background-color: var(--vxe-ui-table-header-background-color);
  23. }
  24. &.is--loading {
  25. &:before {
  26. content: "";
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. width: 100%;
  31. height: 100%;
  32. z-index: 999;
  33. user-select: none;
  34. background-color: var(--vxe-ui-loading-background-color);
  35. }
  36. }
  37. .vxe-buttons--wrapper {
  38. flex-grow: 1;
  39. & > .vxe-button+.vxe-button--item,
  40. & > .vxe-button--item+.vxe-button,
  41. & > .vxe-button--item+.vxe-button--item {
  42. margin-left: 0.8em;
  43. }
  44. & > .vxe-button--item {
  45. display: inline-block;
  46. }
  47. }
  48. .vxe-tools--wrapper {
  49. & > .vxe-button+.vxe-tool--item,
  50. & > .vxe-tool--item+.vxe-button,
  51. & > .vxe-tool--item+.vxe-tool--item {
  52. margin-left: 0.8em;
  53. }
  54. & > .vxe-tool--item {
  55. display: inline-block;
  56. }
  57. }
  58. .vxe-tools--wrapper {
  59. & > .vxe-button {
  60. display: flex;
  61. align-items: center;
  62. justify-content: center;
  63. }
  64. }
  65. .vxe-buttons--wrapper,
  66. .vxe-tools--wrapper,
  67. .vxe-tools--operate {
  68. display: flex;
  69. align-items: center;
  70. }
  71. .vxe-buttons--wrapper,
  72. .vxe-tools--wrapper {
  73. flex-wrap: wrap;
  74. }
  75. .vxe-tools--operate {
  76. flex-shrink: 0;
  77. }
  78. .vxe-custom--wrapper {
  79. position: relative;
  80. &.is--active {
  81. & > .vxe-button {
  82. background-color: var(--vxe-ui-toolbar-custom-active-background-color);
  83. border-radius: 50%;
  84. }
  85. }
  86. }
  87. }
  88. .vxe-toolbar {
  89. font-size: var(--vxe-ui-font-size-default);
  90. &.size--medium {
  91. font-size: var(--vxe-ui-font-size-medium);
  92. }
  93. &.size--small {
  94. font-size: var(--vxe-ui-font-size-small);
  95. }
  96. &.size--mini {
  97. font-size: var(--vxe-ui-font-size-mini);
  98. }
  99. }