_ag-theme-material-mixin.scss 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. @import "../../ag-theme-base/sass/ag-theme-base";
  2. @import "./ag-theme-material-default-params";
  3. @mixin ag-theme-material($params: ()) {
  4. @include ag-allow-color-param-access-with-ag-param(false);
  5. $params: ag-process-theme-variables($params, $ag-theme-material-default-params);
  6. @include ag-theme-base($params);
  7. .ag-filter-toolpanel-header,
  8. .ag-filter-toolpanel-search,
  9. .ag-status-bar,
  10. .ag-header-row,
  11. .ag-panel-title-bar-title,
  12. .ag-side-button-button {
  13. font-size: ag-param(font-size) - 1;
  14. font-weight: 600;
  15. @include ag-color-property(color, header-foreground-color);
  16. }
  17. .ag-tab {
  18. height: ag-param(grid-size) * 4.5;
  19. }
  20. .ag-tabs-header,
  21. .ag-column-drop-horizontal {
  22. @include ag-color-property(background-color, subheader-background-color);
  23. }
  24. .ag-tabs-body {
  25. padding: ag-param(grid-size) / 2 0;
  26. }
  27. .ag-tabs-body .ag-menu-list {
  28. padding-top: 0;
  29. padding-bottom: 0;
  30. }
  31. .ag-header-cell, .ag-header-group-cell {
  32. transition: background-color 0.5s;
  33. }
  34. .ag-row-last .ag-cell-inline-editing {
  35. bottom: 0;
  36. }
  37. .ag-cell-inline-editing {
  38. padding: ag-param(grid-size);
  39. height: ag-param(row-height) + ag-param(grid-size) * 3;
  40. }
  41. .ag-side-button-button {
  42. @include ag-color-property(color, secondary-foreground-color);
  43. }
  44. .ag-column-drop-vertical {
  45. border-bottom: solid 1px;
  46. @include ag-color-property(border-bottom-color, border-color);
  47. padding-top: ag-param(grid-size);
  48. &.ag-last-column-drop {
  49. border-bottom: none;
  50. }
  51. }
  52. .ag-column-drop-vertical-cell {
  53. margin-left: 0;
  54. }
  55. .ag-set-filter-select-all {
  56. border-bottom: solid 1px;
  57. @include ag-color-property(border-bottom-color, border-color);
  58. }
  59. .ag-column-drop-vertical-empty-message {
  60. font-size: ag-param(font-size) - 1;
  61. font-weight: 600;
  62. @include ag-color-property(color, disabled-foreground-color);
  63. @include ag-theme-rtl((
  64. padding-left: ag-param(icon-size) + ag-param(grid-size) * 2,
  65. padding-right: ag-param(grid-size)
  66. ));
  67. }
  68. .ag-status-bar {
  69. border: solid 1px;
  70. @include ag-color-property(border-color, border-color);
  71. }
  72. .ag-column-panel-column-select {
  73. border-top: solid 1px;
  74. @include ag-color-property(border-top-color, border-color);
  75. }
  76. .ag-column-select, .ag-column-select-header {
  77. border-bottom: solid 1px;
  78. @include ag-color-property(border-bottom-color, border-color);
  79. }
  80. .ag-column-select-header {
  81. height: ag-param(header-height);
  82. }
  83. .ag-group-title-bar {
  84. padding: ag-param(grid-size) * 0.75 ag-param(grid-size);
  85. }
  86. .ag-charts-format-sub-level-group-title-bar {
  87. padding: ag-param(grid-size) * 0.5 ag-param(grid-size);
  88. }
  89. .ag-chart-data-section,
  90. .ag-chart-format-section {
  91. padding-bottom: ag-param(grid-size) * 0.5;
  92. }
  93. .ag-group-toolbar {
  94. @if ag-param(subheader-background-color) {
  95. background-color: rgba(ag-param(subheader-background-color), 0.5);
  96. }
  97. }
  98. %ag-text-input {
  99. background: transparent;
  100. @include ag-color-property(color, foreground-color);
  101. font-family: inherit;
  102. font-size: inherit;
  103. height: ag-param(grid-size) * 5;
  104. padding-bottom: ag-param(grid-size);
  105. border-width: 0;
  106. border-bottom: 2px solid;
  107. @include ag-color-property(border-bottom-color, border-color);
  108. &:focus {
  109. border-bottom: 2px solid;
  110. @include ag-color-property(border-bottom-color, material-primary-color);
  111. outline: none;
  112. box-shadow: none;
  113. }
  114. &::placeholder {
  115. @include ag-color-property(color, disabled-foreground-color);
  116. }
  117. &:disabled {
  118. border-bottom: 1px solid;
  119. @include ag-color-property(border-bottom-color, border-color);
  120. }
  121. }
  122. .ag-standard-button {
  123. appearance: none;
  124. background-color: transparent;
  125. border: 0;
  126. @include ag-color-property(color, material-primary-color);
  127. font-family: inherit;
  128. font-size: inherit;
  129. margin: 0;
  130. padding: 0;
  131. text-transform: uppercase;
  132. &:disabled {
  133. @include ag-color-property(color, disabled-foreground-color);
  134. @include ag-color-property(background-color, input-disabled-background-color);
  135. @include ag-color-property(border-color, input-disabled-border-color);
  136. }
  137. }
  138. .ag-dnd-ghost {
  139. font-size: ag-param(font-size) - 1;
  140. font-weight: 600;
  141. }
  142. .ag-filter-toolpanel-header {
  143. height: ag-param(grid-size) * 4;
  144. }
  145. .ag-filter-toolpanel-group-level-0-header {
  146. height: ag-param(grid-size) * 7;
  147. }
  148. .ag-overlay-no-rows-wrapper.ag-layout-auto-height {
  149. padding-top: 60px;
  150. }
  151. @include ag-allow-color-param-access-with-ag-param(true);
  152. }