grid.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .vxe-grid {
  2. position: relative;
  3. display: flex;
  4. flex-direction: column;
  5. &.is--loading {
  6. &:before {
  7. content: "";
  8. position: absolute;
  9. top: 0;
  10. left: 0;
  11. width: 100%;
  12. height: 100%;
  13. z-index: 99;
  14. user-select: none;
  15. background-color: var(--vxe-ui-loading-background-color);
  16. }
  17. & > .vxe-table {
  18. .vxe-loading {
  19. background-color: transparent;
  20. }
  21. }
  22. }
  23. &.is--maximize {
  24. position: fixed;
  25. top: 0;
  26. left: 0;
  27. width: 100%;
  28. height: 100%;
  29. padding: 0.5em 1em;
  30. background-color: var(--vxe-ui-layout-background-color);
  31. }
  32. .vxe-grid--form-wrapper,
  33. .vxe-grid--top-wrapper,
  34. .vxe-grid--bottom-wrapper {
  35. position: relative;
  36. }
  37. .vxe-grid--table-container {
  38. display: flex;
  39. flex-direction: row;
  40. }
  41. .vxe-grid--left-wrapper,
  42. .vxe-grid--right-wrapper {
  43. flex-shrink: 0;
  44. overflow: auto;
  45. outline: 0;
  46. }
  47. .vxe-grid--table-wrapper {
  48. flex-grow: 1;
  49. overflow: hidden;
  50. }
  51. }
  52. .vxe-grid--layout-body-wrapper {
  53. display: flex;
  54. flex-direction: row;
  55. overflow: auto;
  56. flex-grow: 1;
  57. }
  58. .vxe-grid--layout-body-content-wrapper {
  59. flex-grow: 1;
  60. overflow: auto;
  61. }
  62. .vxe-grid--layout-header-wrapper,
  63. .vxe-grid--layout-footer-wrapper,
  64. .vxe-grid--layout-aside-left-wrapper,
  65. .vxe-grid--layout-aside-left-wrapper {
  66. flex-shrink: 0;
  67. }
  68. .vxe-grid--layout-aside-left-wrapper,
  69. .vxe-grid--layout-aside-left-wrapper {
  70. overflow: auto;
  71. }
  72. .vxe-grid {
  73. font-size: var(--vxe-ui-font-size-default);
  74. &.size--medium {
  75. font-size: var(--vxe-ui-font-size-medium);
  76. }
  77. &.size--small {
  78. font-size: var(--vxe-ui-font-size-small);
  79. }
  80. &.size--mini {
  81. font-size: var(--vxe-ui-font-size-mini);
  82. }
  83. }