_ag-grid-mixins.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. // Automatically generate rtl styles from provided ltr styles by flipping "left" and "right"
  2. // in property names and values.
  3. //
  4. // For example:
  5. //
  6. // .foo {
  7. // @include ag-unthemed-rtl((margin-left: 10px));
  8. // }
  9. //
  10. // Will emit:
  11. //
  12. // .ag-ltr .foo {
  13. // margin-left: 10px;
  14. // }
  15. // .ag-rtl .foo {
  16. // margin-right: 10px;
  17. // }
  18. @mixin ag-unthemed-rtl($rules) {
  19. @if length(nth(&, 1)) < 1 {
  20. @error "ag-unthemed-rtl() can't be used at the top level of a css file, only nested in a selector.";
  21. }
  22. @if str-index(nth(nth(&, 1), 1), ".ag-theme-") != null {
  23. @error "ag-unthemed-rtl() should not be used in a theme, use ag-theme-rtl() instead.";
  24. }
  25. .ag-ltr & {
  26. @each $property, $value in $rules {
  27. #{$property}: $value;
  28. }
  29. }
  30. .ag-rtl & {
  31. @each $property, $value in ag-get-rtl-rules($rules) {
  32. #{$property}: $value;
  33. }
  34. }
  35. }
  36. @function ag-get-rtl-rules($ltr-rules) {
  37. $rtl-rules: ();
  38. @each $property, $value in $ltr-rules {
  39. @if str-index($property, "-right") {
  40. $rtl-property: ag-str-replace($property, "-right", "-left");
  41. $rtl-rules: map-merge($rtl-rules, ($rtl-property: $value));
  42. }
  43. @else if str-index($property, "-left") {
  44. $rtl-property: ag-str-replace($property, "-left", "-right");
  45. $rtl-rules: map-merge($rtl-rules, ($rtl-property: $value));
  46. }
  47. @else if $property == "right" {
  48. $rtl-rules: map-merge($rtl-rules, (left: $value));
  49. }
  50. @else if $property == "left" {
  51. $rtl-rules: map-merge($rtl-rules, (right: $value));
  52. }
  53. @else if $value == "right" {
  54. $rtl-rules: map-merge($rtl-rules, ($property: left));
  55. }
  56. @else if $value == "left" {
  57. $rtl-rules: map-merge($rtl-rules, (property: right));
  58. }
  59. @else {
  60. @error "ag-get-rtl-rules doesn't know how to process the \"#{$property}\" property"
  61. }
  62. }
  63. @return $rtl-rules;
  64. }
  65. @function ag-insert-class-after-theme($selectors, $class) {
  66. // this needs to do a 2-level loop, because the selector list returned by & in Sass is a 2D list,
  67. // e.g. .foo .bar, .foo .baz { ... } is ((".foo", ".bar"), (".foo", ".baz"))
  68. $selector-list: ();
  69. @each $selector in $selectors {
  70. $result: ();
  71. @for $i from 1 through length($selector) {
  72. $item: nth($selector, $i);
  73. $result: append($result, $item);
  74. @if $i == 1 {
  75. $result: append($result, $class);
  76. }
  77. }
  78. $selector-list: append($selector-list, $result, comma);
  79. }
  80. @return $selector-list;
  81. }
  82. @function ag-str-replace($string, $search, $replace: '') {
  83. $index: str-index($string, $search);
  84. @if $index {
  85. @return str-slice($string, 1, $index - 1)
  86. + $replace
  87. + ag-str-replace(str-slice($string, $index
  88. + str-length($search)), $search, $replace);
  89. }
  90. @return $string;
  91. }
  92. @mixin ag-selectable($value) {
  93. @if $value == null {
  94. $value: none;
  95. }
  96. -moz-user-select: $value;
  97. -webkit-user-select: $value;
  98. -ms-user-select: $value;
  99. user-select: $value;
  100. }