| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264 |
- @import "./ag-grid-mixins";
- @import "./ag-theme-params";
- @mixin ag-inherit-text-styles() {
- color: inherit;
- font-family: inherit;
- font-size: inherit;
- font-weight: inherit;
- line-height: inherit;
- }
- @mixin ag-border($border-type, $sides: null, $radius: null, $width: 1px, $style: solid, $none: false) {
- @if ag-should-draw-border($border-type) {
- $color-param: if($border-type == secondary, secondary-border-color, border-color);
- @if $sides {
- @each $side in $sides {
- @if $none {
- border-#{$side}: none;
- }
- @else {
- border-#{$side}: $style $width;
- @include ag-color-property(border-#{$side}-color, $color-param);
- }
- }
- }
- @else {
- @if $none {
- border: none;
- }
- @else {
- border: $style $width;
- @include ag-color-property(border-color, $color-param);
- }
- }
- @if $radius {
- border-radius: $radius;
- }
- }
- }
- @mixin ag-keyboard-focus($selectors, $offset) {
- .ag-keyboard-focus {
- @each $selector in $selectors {
- .#{$selector}:focus {
- outline: none;
- &:after {
- content: '';
- position: absolute;
- background-color: transparent;
- pointer-events: none;
- top: $offset;
- left: $offset;
- display: block;
- width: calc(100% - #{$offset * 2});
- height: calc(100% - #{$offset * 2});
- border: 1px solid;
- @include ag-color-property(border-color, input-focus-border-color);
- }
- }
- }
- }
- }
- @mixin ag-vertical-widget-container {
- padding: ag-param(widget-container-vertical-padding) ag-param(widget-container-horizontal-padding);
- padding-bottom: ag-param(widget-container-vertical-padding) - ag-param(widget-vertical-spacing);
- & > * {
- margin-bottom: ag-param(widget-vertical-spacing);
- }
- }
- @function ag-should-draw-border($type) {
- $valid-types: (
- critical: ag-param(borders-critical),
- primary: ag-param(borders),
- side-button: ag-param(borders-side-button),
- secondary: ag-param(borders-secondary)
- );
- $draw-border: false;
- @if not map-has-key($valid-types, $type) {
- @error "Invalid border type '#{inspect($type)}'";
- }
- @return map-get($valid-types, $type);
- }
- @function ag-icon-char($name) {
- $icon-map: -ag-param-unchecked(icons-font-codes);
- @if type-of($icon-map) != map {
- @error "Expected icons-font-codes param to be a map, but got #{type-of($icon-map)} (#{inspect($icon-map)})";
- }
- @if not map-has-key($icon-map, $name) {
- @error "No such icon: #{$name}";
- }
- @return map-get($icon-map, $name);
- }
- @mixin ag-card() {
- @include ag-border(primary);
-
- @include ag-color-property(background, background-color);
- border-radius: ag-param(card-radius);
- box-shadow: ag-param(card-shadow);
- padding: ag-param(grid-size);
- }
- @mixin ag-icon-element($icon, $code) {
- .ag-icon-#{$icon} {
- &:before {
- content: $code;
- }
- }
- }
- @mixin ag-icons-font-face() {
- @if ag-param(icons-data) {
- @at-root {
- @font-face {
- font-family: '#{ag-param(icon-font-family)}';
- src: ag-param(icons-data);
- font-weight: normal;
- font-style: normal;
- }
- }
- }
- }
- @mixin ag-icon() {
- font-family: '#{ag-param(icon-font-family)}';
- font-size: ag-param(icon-size);
- line-height: ag-param(icon-size);
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
-
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- @mixin ag-icons-webfont() {
- .ag-icon {
- @include ag-icon();
- }
- @include ag-icon-element('aggregation', ag-icon-char(aggregation));
- @include ag-icon-element('arrows', ag-icon-char(arrows));
- @include ag-icon-element('asc', ag-icon-char(asc));
- @include ag-icon-element('cancel', ag-icon-char(cancel));
- @include ag-icon-element('chart', ag-icon-char(chart));
- @include ag-icon-element('color-picker', ag-icon-char(color-picker));
- @include ag-icon-element('columns', ag-icon-char(columns));
- @include ag-icon-element('contracted', ag-icon-char(contracted));
- @include ag-icon-element('copy', ag-icon-char(copy));
- @include ag-icon-element('cross', ag-icon-char(cross));
- @include ag-icon-element('desc', ag-icon-char(desc));
- @include ag-icon-element('expanded', ag-icon-char(expanded));
- @include ag-icon-element('eye-slash', ag-icon-char(eye-slash));
- @include ag-icon-element('eye', ag-icon-char(eye));
- @include ag-icon-element('filter', ag-icon-char(filter));
- @include ag-icon-element('first', ag-icon-char(first));
- @include ag-icon-element('grip', ag-icon-char(grip));
- @include ag-icon-element('group', ag-icon-char(group));
- @include ag-icon-element('last', ag-icon-char(last));
- @include ag-icon-element('left', ag-icon-char(left));
- @include ag-icon-element('linked', ag-icon-char(linked));
- @include ag-icon-element('loading', ag-icon-char(loading));
- @include ag-icon-element('maximize', ag-icon-char(maximize));
- @include ag-icon-element('menu', ag-icon-char(menu));
- @include ag-icon-element('minimize', ag-icon-char(minimize));
- @include ag-icon-element('next', ag-icon-char(next));
- @include ag-icon-element('none', ag-icon-char(none));
- @include ag-icon-element('not-allowed', ag-icon-char(not-allowed));
- @include ag-icon-element('paste', ag-icon-char(paste));
- @include ag-icon-element('pin', ag-icon-char(pin));
- @include ag-icon-element('pivot', ag-icon-char(pivot));
- @include ag-icon-element('previous', ag-icon-char(previous));
- @include ag-icon-element('right', ag-icon-char(right));
- @include ag-icon-element('save', ag-icon-char(save));
- @include ag-icon-element('small-down', ag-icon-char(small-down));
- @include ag-icon-element('small-left', ag-icon-char(small-left));
- @include ag-icon-element('small-right', ag-icon-char(small-right));
- @include ag-icon-element('small-up', ag-icon-char(small-up));
- @include ag-icon-element('tick', ag-icon-char(tick));
- @include ag-icon-element('tree-closed', ag-icon-char(tree-closed));
- @include ag-icon-element('tree-indeterminate', ag-icon-char(tree-indeterminate));
- @include ag-icon-element('tree-open', ag-icon-char(tree-open));
- @include ag-icon-element('unlinked', ag-icon-char(unlinked));
- .ag-icon-row-drag:before {
- content: ag-icon-char(grip);
- }
- .ag-right-arrow:before {
- content: ag-icon-char(left);
- }
- .ag-right-arrow:before {
- content: ag-icon-char(right);
- }
- }
- $-ag-included-themes: () !default;
- @mixin ag-include-theme-once-only() {
- $name: nth(nth(&, 1), 1); // returns name of top-level selector, e.g. ".ag-theme-balham"
- @if index($-ag-included-themes, $name) != null {
- @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.";
- }
- $-ag-included-themes: append($-ag-included-themes, $name) !global;
- }
- // Like ag-unthemed-rtl, automatically generate rtl styles from provided ltr styles by flipping
- // "left" and "right" in property names and values. However this mixin is for use in themes. Because the
- // div with the theme class is outside the div with the .ag-rtl class, we need to keep the theme class
- // higher than the .ag-rtl.
- //
- // For example:
- //
- // .ag-theme-xyz {
- // .foo {
- // @include ag-theme-rtl((margin-left: 10px));
- // }
- // }
- //
- // Will emit:
- //
- // .ag-theme-xyz .ag-ltr .foo {
- // margin-left: 10px;
- // }
- // .ag-theme-xyz .ag-rtl .foo {
- // margin-right: 10px;
- // }
- //
- // Note how the .ag-ltr class is inserted between the theme class and the rest of the selector
- @mixin ag-theme-rtl($rules, $color-param: null) {
- @if length(nth(&, 1)) < 2 {
- @error "ag-theme-rtl() can't be used at the top level of a SCSS file, only nested in a selector.";
- }
- @at-root {
- #{ag-insert-class-after-theme(&, ".ag-ltr")} {
- @each $property, $value in $rules {
- #{$property}: $value;
- @if $color-param {
- @include ag-color-property(#{$property}-color, $color-param);
- }
- }
- }
- #{ag-insert-class-after-theme(&, ".ag-rtl")} {
- @each $property, $value in ag-get-rtl-rules($rules) {
- #{$property}: $value;
- @if $color-param {
- @include ag-color-property(#{$property}-color, $color-param);
- }
- }
- }
- }
- }
|