_ag-theme-alpine-mixin.scss 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. @import "../../ag-theme-base/sass/ag-theme-base";
  2. @import "./ag-theme-alpine-default-params";
  3. @mixin ag-theme-alpine($params: ()) {
  4. @include ag-allow-color-param-access-with-ag-param(false);
  5. $params: ag-process-theme-variables($params, $ag-theme-alpine-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. font-weight: 700;
  13. @include ag-color-property(color, header-foreground-color);
  14. }
  15. %ag-pinned-row-end {
  16. content: '';
  17. position: absolute;
  18. height: calc(100% - 20px);
  19. top: 10px;
  20. width: 1px;
  21. @include ag-color-property(background-color, border-color);
  22. }
  23. .ag-ltr {
  24. .ag-pinned-right-header .ag-header-row:after {
  25. @extend %ag-pinned-row-end;
  26. right: 0;
  27. }
  28. }
  29. .ag-rtl {
  30. .ag-pinned-left-header .ag-header-row:before {
  31. @extend %ag-pinned-row-end;
  32. left: 0;
  33. }
  34. }
  35. .ag-row {
  36. font-size: ag-param(font-size) + 1;
  37. }
  38. %ag-text-input {
  39. min-height: ag-param(grid-size) * 4;
  40. border-radius: ag-param(border-radius);
  41. @include ag-theme-rtl((
  42. padding-left: ag-param(grid-size),
  43. ));
  44. }
  45. .ag-tab {
  46. padding: ag-param(grid-size) * 1.5;
  47. transition: color 0.4s;
  48. }
  49. .ag-tab-selected {
  50. @include ag-color-property(color, alpine-active-color);
  51. }
  52. .ag-menu {
  53. @include ag-color-property(background-color, control-panel-background-color);
  54. }
  55. .ag-menu-header {
  56. @include ag-color-property(background-color, control-panel-background-color);
  57. padding-top: 1px; // hack to align column menu tab header border with header row border
  58. }
  59. .ag-tabs-header {
  60. @include ag-border(primary, bottom);
  61. }
  62. .ag-charts-settings-group-title-bar,
  63. .ag-charts-data-group-title-bar,
  64. .ag-charts-format-top-level-group-title-bar {
  65. padding: ag-param(grid-size) ag-param(grid-size) * 2;
  66. line-height: ag-param(icon-size) + ag-param(grid-size) - 2;
  67. }
  68. .ag-chart-mini-thumbnail {
  69. @include ag-color-property(background-color, background-color);
  70. }
  71. .ag-chart-settings-nav-bar {
  72. @include ag-border(secondary, top);
  73. }
  74. .ag-group-title-bar-icon {
  75. @include ag-theme-rtl((margin-right: ag-param(grid-size)))
  76. }
  77. .ag-charts-format-top-level-group-toolbar {
  78. margin-top: ag-param(grid-size);
  79. @include ag-theme-rtl((padding-left: ag-param(icon-size) / 2 + ag-param(grid-size) * 2));
  80. }
  81. .ag-charts-format-sub-level-group {
  82. border-left: dashed 1px;
  83. @include ag-color-property(border-left-color, border-color);
  84. padding-left: ag-param(grid-size);
  85. margin-bottom: ag-param(grid-size) * 2;
  86. }
  87. .ag-charts-format-sub-level-group-title-bar {
  88. padding-top: 0;
  89. padding-bottom: 0;
  90. background: none;
  91. font-weight: 700;
  92. }
  93. .ag-charts-format-sub-level-group-container {
  94. padding-bottom: 0;
  95. }
  96. .ag-charts-format-sub-level-group-item:last-child {
  97. margin-bottom: 0;
  98. }
  99. .ag-dnd-ghost {
  100. font-size: ag-param(font-size) - 1;
  101. font-weight: 700;
  102. }
  103. .ag-side-buttons {
  104. width: ag-param(grid-size) * 5;
  105. }
  106. .ag-standard-button {
  107. appearance: none;
  108. -webkit-appearance: none;
  109. border-radius: ag-param(border-radius);
  110. border: 1px solid;
  111. @include ag-color-property(border-color, alpine-active-color);
  112. @include ag-color-property(color, alpine-active-color);
  113. @include ag-color-property(background-color, background-color);
  114. font-weight: 600;
  115. padding: ag-param(grid-size) ag-param(grid-size) * 2;
  116. &:hover {
  117. @include ag-color-property(border-color, alpine-active-color);
  118. @include ag-color-property(background-color, row-hover-color);
  119. }
  120. &:active {
  121. @include ag-color-property(border-color, alpine-active-color);
  122. @include ag-color-property(background-color, alpine-active-color);
  123. @include ag-color-property(color, background-color);
  124. }
  125. &:disabled {
  126. @include ag-color-property(color, disabled-foreground-color);
  127. @include ag-color-property(background-color, input-disabled-background-color);
  128. @include ag-color-property(border-color, input-disabled-border-color);
  129. }
  130. }
  131. .ag-menu-header {
  132. min-width: 240px;
  133. }
  134. .ag-column-drop-vertical {
  135. min-height: 75px;
  136. max-height: 175px;
  137. }
  138. .ag-tool-panel-wrapper {
  139. width: 250px;
  140. }
  141. .ag-column-drop-vertical-title-bar {
  142. padding: ag-param(grid-size) * 2;
  143. padding-bottom: 0px;
  144. }
  145. .ag-column-drop-vertical-empty-message {
  146. display: flex;
  147. align-items: center;
  148. border: dashed 1px;
  149. @include ag-color-property(border-color, border-color);
  150. margin: ag-param(grid-size) * 2;
  151. padding: ag-param(grid-size) * 2;
  152. }
  153. .ag-column-drop-empty-message {
  154. @include ag-color-property(color, foreground-color);
  155. opacity: 0.75;
  156. }
  157. .ag-status-bar {
  158. font-weight: normal;
  159. }
  160. .ag-status-name-value-value {
  161. font-weight: 700;
  162. }
  163. .ag-paging-number, .ag-paging-row-summary-panel-number {
  164. font-weight: 700;
  165. }
  166. .ag-column-drop-cell-button {
  167. opacity: 0.5;
  168. &:hover {
  169. opacity: 0.75;
  170. }
  171. }
  172. .ag-header-cell-menu-button,
  173. .ag-side-button-button,
  174. .ag-tab,
  175. .ag-panel-title-bar-button,
  176. .ag-header-expand-icon,
  177. .ag-column-group-icons,
  178. .ag-group-expanded .ag-icon,
  179. .ag-group-contracted .ag-icon,
  180. .ag-chart-settings-prev,
  181. .ag-chart-settings-next,
  182. .ag-group-title-bar-icon,
  183. .ag-column-select-header-icon,
  184. .ag-floating-filter-button-button,
  185. .ag-filter-toolpanel-expand,
  186. .ag-chart-menu-icon {
  187. &:hover {
  188. @include ag-color-property(color, alpine-active-color);
  189. }
  190. }
  191. .ag-chart-settings-card-item.ag-not-selected:hover {
  192. opacity: 0.35;
  193. }
  194. .ag-panel-title-bar-button {
  195. @include ag-theme-rtl((
  196. margin-left: ag-param(grid-size) * 2,
  197. margin-right: ag-param(grid-size)
  198. ));
  199. }
  200. .ag-filter-toolpanel-group-container {
  201. padding-left: ag-param(grid-size);
  202. }
  203. .ag-filter-toolpanel-instance-filter {
  204. border: none;
  205. @include ag-color-property(background-color, control-panel-background-color);
  206. border-left: dashed 1px;
  207. @include ag-color-property(border-left-color, border-color);
  208. margin-left: ag-param(grid-size) + ag-param(icon-size) / 2 - 1px;
  209. padding-left: ag-param(icon-size) / 2;
  210. margin-right: ag-param(grid-size) * 2;
  211. }
  212. .ag-set-filter-list {
  213. padding-top: ag-param(grid-size) / 2;
  214. padding-bottom: ag-param(grid-size) / 2;
  215. }
  216. .ag-overlay-no-rows-wrapper.ag-layout-auto-height {
  217. padding-top: 60px;
  218. }
  219. .ag-date-time-list-page-entry-is-current {
  220. @include ag-color-property(background-color, alpine-active-color);
  221. }
  222. @include ag-allow-color-param-access-with-ag-param(true);
  223. }