[Summary view] [Print] [Text view]

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