@fastkit/vui 1.3.2 → 1.4.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -233,35 +233,41 @@ $props-map: (
233
233
  );
234
234
 
235
235
  @mixin grid-spacing($breakpoint-suffix: '', $direction: 'all') {
236
- $props: if(
237
- $direction == 'all',
238
- ('top', 'left'),
239
- if($direction == 'x', ('left'), ('top'))
240
- );
241
- $suffix: if($direction == 'all', '', '-' + $direction);
236
+ $props: ('top', 'left');
237
+
238
+ @if $direction == 'x' {
239
+ $props: ('left');
240
+ } @else if $direction == 'y' {
241
+ $props: ('top');
242
+ }
243
+
244
+ $suffix: '';
245
+
246
+ @if $direction != 'all' {
247
+ $suffix: '-' + $direction;
248
+ }
242
249
 
243
250
  @for $i from 1 through 10 {
244
- $base-value: if(
245
- $i == 0,
246
- 0,
247
- if($i == 1, var(--root-spacing), calc(var(--root-spacing) * #{$i}))
248
- );
251
+ $base-value: var(--root-spacing);
252
+
253
+ @if $i > 1 {
254
+ $base-value: calc(var(--root-spacing) * #{$i});
255
+ }
256
+
249
257
  $half-value: calc(var(--root-spacing) * #{$i + 0.5});
250
- $negative-base-value: if(
251
- $i == 1,
252
- calc(var(--root-spacing) * -1),
253
- calc(var(--root-spacing) * -#{$i})
254
- );
258
+ $negative-base-value: calc(var(--root-spacing) * -1);
259
+
260
+ @if $i > 1 {
261
+ $negative-base-value: calc(var(--root-spacing) * -#{$i});
262
+ }
263
+
255
264
  $negative-half-value: calc(var(--root-spacing) * -#{$i + 0.5});
256
- $container-width: if(
257
- $i == 0,
258
- 100%,
259
- if(
260
- $i == 1,
261
- calc(100% + var(--root-spacing)),
262
- calc(100% + (var(--root-spacing) * #{$i}))
263
- )
264
- );
265
+ $container-width: calc(100% + var(--root-spacing));
266
+
267
+ @if $i > 1 {
268
+ $container-width: calc(100% + (var(--root-spacing) * #{$i}));
269
+ }
270
+
265
271
  $container-width-half: calc(100% + (var(--root-spacing) * #{$i + 0.5}));
266
272
 
267
273
  .grid-spacing#{$suffix}-#{$i}#{$breakpoint-suffix} {
@@ -87,7 +87,11 @@ $sides-map: (
87
87
  @if $has-auto {
88
88
  #{$base-selector}-auto#{$breakpoint-suffix} {
89
89
  @each $sides-prop in $sides-props {
90
- $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
90
+ $prop-suffix: '';
91
+
92
+ @if $sides-prop != 'all' {
93
+ $prop-suffix: '-' + $sides-prop;
94
+ }
91
95
 
92
96
  #{$prop-name}#{$prop-suffix}: auto;
93
97
  }
@@ -95,16 +99,23 @@ $sides-map: (
95
99
  }
96
100
 
97
101
  @for $i from 0 through 10 {
98
- $base-value: if(
99
- $i == 0,
100
- 0,
101
- if($i == 1, var(--root-spacing), calc(var(--root-spacing) * #{$i}))
102
- );
102
+ $base-value: 0;
103
+
104
+ @if $i == 1 {
105
+ $base-value: var(--root-spacing);
106
+ } @else if $i > 1 {
107
+ $base-value: calc(var(--root-spacing) * #{$i});
108
+ }
109
+
103
110
  $half-value: calc(var(--root-spacing) * #{$i + 0.5});
104
111
 
105
112
  #{$base-selector}-#{$i}#{$breakpoint-suffix} {
106
113
  @each $sides-prop in $sides-props {
107
- $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
114
+ $prop-suffix: '';
115
+
116
+ @if $sides-prop != 'all' {
117
+ $prop-suffix: '-' + $sides-prop;
118
+ }
108
119
 
109
120
  #{$prop-name}#{$prop-suffix}: $base-value;
110
121
  }
@@ -112,7 +123,11 @@ $sides-map: (
112
123
 
113
124
  #{$base-selector}-#{$i}h#{$breakpoint-suffix} {
114
125
  @each $sides-prop in $sides-props {
115
- $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
126
+ $prop-suffix: '';
127
+
128
+ @if $sides-prop != 'all' {
129
+ $prop-suffix: '-' + $sides-prop;
130
+ }
116
131
 
117
132
  #{$prop-name}#{$prop-suffix}: $half-value;
118
133
  }
@@ -121,16 +136,21 @@ $sides-map: (
121
136
 
122
137
  @if $has-negative {
123
138
  @for $i from 1 through 10 {
124
- $base-value: if(
125
- $i == 1,
126
- calc(var(--root-spacing) * -1),
127
- calc(var(--root-spacing) * -#{$i})
128
- );
139
+ $base-value: calc(var(--root-spacing) * -1);
140
+
141
+ @if $i > 1 {
142
+ $base-value: calc(var(--root-spacing) * -#{$i});
143
+ }
144
+
129
145
  $half-value: calc(var(--root-spacing) * -#{$i + 0.5});
130
146
 
131
147
  #{$base-selector}-n#{$i}#{$breakpoint-suffix} {
132
148
  @each $sides-prop in $sides-props {
133
- $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
149
+ $prop-suffix: '';
150
+
151
+ @if $sides-prop != 'all' {
152
+ $prop-suffix: '-' + $sides-prop;
153
+ }
134
154
 
135
155
  #{$prop-name}#{$prop-suffix}: $base-value;
136
156
  }
@@ -138,7 +158,11 @@ $sides-map: (
138
158
 
139
159
  #{$base-selector}-n#{$i}h#{$breakpoint-suffix} {
140
160
  @each $sides-prop in $sides-props {
141
- $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
161
+ $prop-suffix: '';
162
+
163
+ @if $sides-prop != 'all' {
164
+ $prop-suffix: '-' + $sides-prop;
165
+ }
142
166
 
143
167
  #{$prop-name}#{$prop-suffix}: $half-value;
144
168
  }