_ag-theme-mixins.scss 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. @import "./ag-grid-mixins";
  2. @import "./ag-theme-params";
  3. @mixin ag-inherit-text-styles() {
  4. color: inherit;
  5. font-family: inherit;
  6. font-size: inherit;
  7. font-weight: inherit;
  8. line-height: inherit;
  9. }
  10. @mixin ag-border($border-type, $sides: null, $radius: null, $width: 1px, $style: solid, $none: false) {
  11. @if ag-should-draw-border($border-type) {
  12. $color-param: if($border-type == secondary, secondary-border-color, border-color);
  13. @if $sides {
  14. @each $side in $sides {
  15. @if $none {
  16. border-#{$side}: none;
  17. }
  18. @else {
  19. border-#{$side}: $style $width;
  20. @include ag-color-property(border-#{$side}-color, $color-param);
  21. }
  22. }
  23. }
  24. @else {
  25. @if $none {
  26. border: none;
  27. }
  28. @else {
  29. border: $style $width;
  30. @include ag-color-property(border-color, $color-param);
  31. }
  32. }
  33. @if $radius {
  34. border-radius: $radius;
  35. }
  36. }
  37. }
  38. @mixin ag-keyboard-focus($selectors, $offset) {
  39. .ag-keyboard-focus {
  40. @each $selector in $selectors {
  41. .#{$selector}:focus {
  42. outline: none;
  43. &:after {
  44. content: '';
  45. position: absolute;
  46. background-color: transparent;
  47. pointer-events: none;
  48. top: $offset;
  49. left: $offset;
  50. display: block;
  51. width: calc(100% - #{$offset * 2});
  52. height: calc(100% - #{$offset * 2});
  53. border: 1px solid;
  54. @include ag-color-property(border-color, input-focus-border-color);
  55. }
  56. }
  57. }
  58. }
  59. }
  60. @mixin ag-vertical-widget-container {
  61. padding: ag-param(widget-container-vertical-padding) ag-param(widget-container-horizontal-padding);
  62. padding-bottom: ag-param(widget-container-vertical-padding) - ag-param(widget-vertical-spacing);
  63. & > * {
  64. margin-bottom: ag-param(widget-vertical-spacing);
  65. }
  66. }
  67. @function ag-should-draw-border($type) {
  68. $valid-types: (
  69. critical: ag-param(borders-critical),
  70. primary: ag-param(borders),
  71. side-button: ag-param(borders-side-button),
  72. secondary: ag-param(borders-secondary)
  73. );
  74. $draw-border: false;
  75. @if not map-has-key($valid-types, $type) {
  76. @error "Invalid border type '#{inspect($type)}'";
  77. }
  78. @return map-get($valid-types, $type);
  79. }
  80. @function ag-icon-char($name) {
  81. $icon-map: -ag-param-unchecked(icons-font-codes);
  82. @if type-of($icon-map) != map {
  83. @error "Expected icons-font-codes param to be a map, but got #{type-of($icon-map)} (#{inspect($icon-map)})";
  84. }
  85. @if not map-has-key($icon-map, $name) {
  86. @error "No such icon: #{$name}";
  87. }
  88. @return map-get($icon-map, $name);
  89. }
  90. @mixin ag-card() {
  91. @include ag-border(primary);
  92. @include ag-color-property(background, background-color);
  93. border-radius: ag-param(card-radius);
  94. box-shadow: ag-param(card-shadow);
  95. padding: ag-param(grid-size);
  96. }
  97. @mixin ag-icon-element($icon, $code) {
  98. .ag-icon-#{$icon} {
  99. &:before {
  100. content: $code;
  101. }
  102. }
  103. }
  104. @mixin ag-icons-font-face() {
  105. @if ag-param(icons-data) {
  106. @at-root {
  107. @font-face {
  108. font-family: '#{ag-param(icon-font-family)}';
  109. src: ag-param(icons-data);
  110. font-weight: normal;
  111. font-style: normal;
  112. }
  113. }
  114. }
  115. }
  116. @mixin ag-icon() {
  117. font-family: '#{ag-param(icon-font-family)}';
  118. font-size: ag-param(icon-size);
  119. line-height: ag-param(icon-size);
  120. font-style: normal;
  121. font-weight: normal;
  122. font-variant: normal;
  123. text-transform: none;
  124. /* Better Font Rendering =========== */
  125. -webkit-font-smoothing: antialiased;
  126. -moz-osx-font-smoothing: grayscale;
  127. }
  128. @mixin ag-icons-webfont() {
  129. .ag-icon {
  130. @include ag-icon();
  131. }
  132. @include ag-icon-element('aggregation', ag-icon-char(aggregation));
  133. @include ag-icon-element('arrows', ag-icon-char(arrows));
  134. @include ag-icon-element('asc', ag-icon-char(asc));
  135. @include ag-icon-element('cancel', ag-icon-char(cancel));
  136. @include ag-icon-element('chart', ag-icon-char(chart));
  137. @include ag-icon-element('color-picker', ag-icon-char(color-picker));
  138. @include ag-icon-element('columns', ag-icon-char(columns));
  139. @include ag-icon-element('contracted', ag-icon-char(contracted));
  140. @include ag-icon-element('copy', ag-icon-char(copy));
  141. @include ag-icon-element('cross', ag-icon-char(cross));
  142. @include ag-icon-element('desc', ag-icon-char(desc));
  143. @include ag-icon-element('expanded', ag-icon-char(expanded));
  144. @include ag-icon-element('eye-slash', ag-icon-char(eye-slash));
  145. @include ag-icon-element('eye', ag-icon-char(eye));
  146. @include ag-icon-element('filter', ag-icon-char(filter));
  147. @include ag-icon-element('first', ag-icon-char(first));
  148. @include ag-icon-element('grip', ag-icon-char(grip));
  149. @include ag-icon-element('group', ag-icon-char(group));
  150. @include ag-icon-element('last', ag-icon-char(last));
  151. @include ag-icon-element('left', ag-icon-char(left));
  152. @include ag-icon-element('linked', ag-icon-char(linked));
  153. @include ag-icon-element('loading', ag-icon-char(loading));
  154. @include ag-icon-element('maximize', ag-icon-char(maximize));
  155. @include ag-icon-element('menu', ag-icon-char(menu));
  156. @include ag-icon-element('minimize', ag-icon-char(minimize));
  157. @include ag-icon-element('next', ag-icon-char(next));
  158. @include ag-icon-element('none', ag-icon-char(none));
  159. @include ag-icon-element('not-allowed', ag-icon-char(not-allowed));
  160. @include ag-icon-element('paste', ag-icon-char(paste));
  161. @include ag-icon-element('pin', ag-icon-char(pin));
  162. @include ag-icon-element('pivot', ag-icon-char(pivot));
  163. @include ag-icon-element('previous', ag-icon-char(previous));
  164. @include ag-icon-element('right', ag-icon-char(right));
  165. @include ag-icon-element('save', ag-icon-char(save));
  166. @include ag-icon-element('small-down', ag-icon-char(small-down));
  167. @include ag-icon-element('small-left', ag-icon-char(small-left));
  168. @include ag-icon-element('small-right', ag-icon-char(small-right));
  169. @include ag-icon-element('small-up', ag-icon-char(small-up));
  170. @include ag-icon-element('tick', ag-icon-char(tick));
  171. @include ag-icon-element('tree-closed', ag-icon-char(tree-closed));
  172. @include ag-icon-element('tree-indeterminate', ag-icon-char(tree-indeterminate));
  173. @include ag-icon-element('tree-open', ag-icon-char(tree-open));
  174. @include ag-icon-element('unlinked', ag-icon-char(unlinked));
  175. .ag-icon-row-drag:before {
  176. content: ag-icon-char(grip);
  177. }
  178. .ag-right-arrow:before {
  179. content: ag-icon-char(left);
  180. }
  181. .ag-right-arrow:before {
  182. content: ag-icon-char(right);
  183. }
  184. }
  185. $-ag-included-themes: () !default;
  186. @mixin ag-include-theme-once-only() {
  187. $name: nth(nth(&, 1), 1); // returns name of top-level selector, e.g. ".ag-theme-balham"
  188. @if index($-ag-included-themes, $name) != null {
  189. @error "Theme CSS for #{$name} has been generated twice. This can happen when you @import ag-theme-xyz.scss twice, or @import the legacy ag-theme-xyz.scss and then also @include the ag-theme-xyz() mixin. If you're using the mixin, just @import ag-theme-xyz-mixin.scss.";
  190. }
  191. $-ag-included-themes: append($-ag-included-themes, $name) !global;
  192. }
  193. // Like ag-unthemed-rtl, automatically generate rtl styles from provided ltr styles by flipping
  194. // "left" and "right" in property names and values. However this mixin is for use in themes. Because the
  195. // div with the theme class is outside the div with the .ag-rtl class, we need to keep the theme class
  196. // higher than the .ag-rtl.
  197. //
  198. // For example:
  199. //
  200. // .ag-theme-xyz {
  201. // .foo {
  202. // @include ag-theme-rtl((margin-left: 10px));
  203. // }
  204. // }
  205. //
  206. // Will emit:
  207. //
  208. // .ag-theme-xyz .ag-ltr .foo {
  209. // margin-left: 10px;
  210. // }
  211. // .ag-theme-xyz .ag-rtl .foo {
  212. // margin-right: 10px;
  213. // }
  214. //
  215. // Note how the .ag-ltr class is inserted between the theme class and the rest of the selector
  216. @mixin ag-theme-rtl($rules, $color-param: null) {
  217. @if length(nth(&, 1)) < 2 {
  218. @error "ag-theme-rtl() can't be used at the top level of a SCSS file, only nested in a selector.";
  219. }
  220. @at-root {
  221. #{ag-insert-class-after-theme(&, ".ag-ltr")} {
  222. @each $property, $value in $rules {
  223. #{$property}: $value;
  224. @if $color-param {
  225. @include ag-color-property(#{$property}-color, $color-param);
  226. }
  227. }
  228. }
  229. #{ag-insert-class-after-theme(&, ".ag-rtl")} {
  230. @each $property, $value in ag-get-rtl-rules($rules) {
  231. #{$property}: $value;
  232. @if $color-param {
  233. @include ag-color-property(#{$property}-color, $color-param);
  234. }
  235. }
  236. }
  237. }
  238. }