source: imaps-frontend/node_modules/bootstrap/scss/mixins/_utilities.scss@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 3.3 KB
Line 
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}
Note: See TracBrowser for help on using the repository browser.