You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

97 lines
3.3 KiB

5 months ago
  1. // Utility generator
  2. // Used to generate utilities & print utilities
  3. @mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
  4. $values: map-get($utility, values);
  5. // If the values are a list or string, convert it into a map
  6. @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
  7. $values: zip($values, $values);
  8. }
  9. @each $key, $value in $values {
  10. $properties: map-get($utility, property);
  11. // Multiple properties are possible, for example with vertical or horizontal margins or paddings
  12. @if type-of($properties) == "string" {
  13. $properties: append((), $properties);
  14. }
  15. // Use custom class if present
  16. $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
  17. $property-class: if($property-class == null, "", $property-class);
  18. // Use custom CSS variable name if present, otherwise default to `class`
  19. $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
  20. // State params to generate pseudo-classes
  21. $state: if(map-has-key($utility, state), map-get($utility, state), ());
  22. $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
  23. // Don't prefix if value key is null (e.g. with shadow class)
  24. $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
  25. @if map-get($utility, rfs) {
  26. // Inside the media query
  27. @if $is-rfs-media-query {
  28. $val: rfs-value($value);
  29. // Do not render anything if fluid and non fluid values are the same
  30. $value: if($val == rfs-fluid-value($value), null, $val);
  31. }
  32. @else {
  33. $value: rfs-fluid-value($value);
  34. }
  35. }
  36. $is-css-var: map-get($utility, css-var);
  37. $is-local-vars: map-get($utility, local-vars);
  38. $is-rtl: map-get($utility, rtl);
  39. @if $value != null {
  40. @if $is-rtl == false {
  41. /* rtl:begin:remove */
  42. }
  43. @if $is-css-var {
  44. .#{$property-class + $infix + $property-class-modifier} {
  45. --#{$prefix}#{$css-variable-name}: #{$value};
  46. }
  47. @each $pseudo in $state {
  48. .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
  49. --#{$prefix}#{$css-variable-name}: #{$value};
  50. }
  51. }
  52. } @else {
  53. .#{$property-class + $infix + $property-class-modifier} {
  54. @each $property in $properties {
  55. @if $is-local-vars {
  56. @each $local-var, $variable in $is-local-vars {
  57. --#{$prefix}#{$local-var}: #{$variable};
  58. }
  59. }
  60. #{$property}: $value if($enable-important-utilities, !important, null);
  61. }
  62. }
  63. @each $pseudo in $state {
  64. .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
  65. @each $property in $properties {
  66. @if $is-local-vars {
  67. @each $local-var, $variable in $is-local-vars {
  68. --#{$prefix}#{$local-var}: #{$variable};
  69. }
  70. }
  71. #{$property}: $value if($enable-important-utilities, !important, null);
  72. }
  73. }
  74. }
  75. }
  76. @if $is-rtl == false {
  77. /* rtl:end:remove */
  78. }
  79. }
  80. }
  81. }