resources/tools/dash/app/pal/static/sass/bootstrap/mixins/_utilities.scss

   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     // Use custom CSS variable name if present, otherwise default to `class`
  24     $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
  25
  26     // State params to generate pseudo-classes
  27     $state: if(map-has-key($utility, state), map-get($utility, state), ());
  28
  29     $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
  30
  31     // Don't prefix if value key is null (e.g. with shadow class)
  32     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
  33
  34     @if map-get($utility, rfs) {
  35       // Inside the media query
  36       @if $is-rfs-media-query {
  37         $val: rfs-value($value);
  38
  39         // Do not render anything if fluid and non fluid values are the same
  40         $value: if($val == rfs-fluid-value($value), null, $val);
  41       }
  42       @else {
  43         $value: rfs-fluid-value($value);
  44       }
  45     }
  46
  47     $is-css-var: map-get($utility, css-var);
  48     $is-local-vars: map-get($utility, local-vars);
  49     $is-rtl: map-get($utility, rtl);
  50
  51     @if $value != null {
  52       @if $is-rtl == false {
  53         /* rtl:begin:remove */
  54       }
  55
  56       @if $is-css-var {
  57         .#{$property-class + $infix + $property-class-modifier} {
  58           --#{$prefix}#{$css-variable-name}: #{$value};
  59         }
  60
  61         @each $pseudo in $state {
  62           .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
  63             --#{$prefix}#{$css-variable-name}: #{$value};
  64           }
  65         }
  66       } @else {
  67         .#{$property-class + $infix + $property-class-modifier} {
  68           @each $property in $properties {
  69             @if $is-local-vars {
  70               @each $local-var, $variable in $is-local-vars {
  71                 --#{$prefix}#{$local-var}: #{$variable};
  72               }
  73             }
  74             #{$property}: $value if($enable-important-utilities, !important, null);
  75           }
  76         }
  77
  78         @each $pseudo in $state {
  79           .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
  80             @each $property in $properties {
  81               @if $is-local-vars {
  82                 @each $local-var, $variable in $is-local-vars {
  83                   --#{$prefix}#{$local-var}: #{$variable};
  84                 }
  85               }
  86               #{$property}: $value if($enable-important-utilities, !important, null);
  87             }
  88           }
  89         }
  90       }
  91
  92       @if $is-rtl == false {
  93         /* rtl:end:remove */
  94       }
  95     }
  96   }
  97 }