igniteui-theming 1.0.0-beta.14 → 1.0.0-beta.16
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.16",
|
|
4
4
|
"description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -138,3 +138,40 @@
|
|
|
138
138
|
calc(var(--is-small, 1) * #{$sm})
|
|
139
139
|
);
|
|
140
140
|
}
|
|
141
|
+
|
|
142
|
+
/// Used to add spacing.
|
|
143
|
+
/// @access public
|
|
144
|
+
/// @param {Number} $sm - The preferred value when the component's size is small.
|
|
145
|
+
/// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
|
|
146
|
+
/// @param {Number} $lg [$md] - The preferred value when the component's size is large.
|
|
147
|
+
/// @param {Number} $dir [null] - The preferred direction - inline or block.
|
|
148
|
+
/// @return {Function} - The evaluated value.
|
|
149
|
+
@function pad($sm, $md: $sm, $lg: $md, $dir: null) {
|
|
150
|
+
$spacing: if($dir, --ig-spacing-#{$dir}, --ig-spacing);
|
|
151
|
+
|
|
152
|
+
@return max(
|
|
153
|
+
calc(var(--is-large, 1) * #{$lg} * var(#{$spacing}-large, var(#{$spacing}, --ig-spacing))),
|
|
154
|
+
calc(var(--is-medium, 1) * #{$md} * var(#{$spacing}-medium, var(#{$spacing}, --ig-spacing))),
|
|
155
|
+
calc(var(--is-small, 1) * #{$sm} * var(#{$spacing}-small, var(#{$spacing}, --ig-spacing)))
|
|
156
|
+
);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/// Used to add inline spacing.
|
|
160
|
+
/// @access public
|
|
161
|
+
/// @param {Number} $sm - The preferred value when the component's size is small.
|
|
162
|
+
/// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
|
|
163
|
+
/// @param {Number} $lg [$md] - The preferred value when the component's size is large.
|
|
164
|
+
/// @return {Function} - The evaluated value.
|
|
165
|
+
@function pad-inline($sm, $md: $sm, $lg: $md) {
|
|
166
|
+
@return pad($sm, $md, $lg, $dir: inline);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/// Used to add block spacing.
|
|
170
|
+
/// @access public
|
|
171
|
+
/// @param {Number} $sm - The preferred value when the component's size is small.
|
|
172
|
+
/// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
|
|
173
|
+
/// @param {Number} $lg [$md] - The preferred value when the component's size is large.
|
|
174
|
+
/// @return {Function} - The evaluated value.
|
|
175
|
+
@function pad-block($sm, $md: $sm, $lg: $md) {
|
|
176
|
+
@return pad($sm, $md, $lg, $dir: block);
|
|
177
|
+
}
|
package/test/_themes.spec.scss
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* stylelint-disable max-line-length */
|
|
1
2
|
/* stylelint-disable value-no-vendor-prefix */
|
|
2
3
|
/* stylelint-disable color-function-notation */
|
|
3
4
|
/* stylelint-disable max-nesting-depth */
|
|
@@ -280,5 +281,76 @@ $schema: (
|
|
|
280
281
|
}
|
|
281
282
|
}
|
|
282
283
|
}
|
|
284
|
+
|
|
285
|
+
@include describe('Spacing') {
|
|
286
|
+
@include it('should use customizable spacing when declaring padding/margin') {
|
|
287
|
+
@include assert() {
|
|
288
|
+
@include output() {
|
|
289
|
+
padding: pad(14px);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
@include expect() {
|
|
293
|
+
padding:
|
|
294
|
+
max(
|
|
295
|
+
calc(
|
|
296
|
+
var(--is-large, 1) * 14px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing))
|
|
297
|
+
),
|
|
298
|
+
calc(
|
|
299
|
+
var(--is-medium, 1) * 14px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing))
|
|
300
|
+
),
|
|
301
|
+
calc(
|
|
302
|
+
var(--is-small, 1) * 14px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing))
|
|
303
|
+
)
|
|
304
|
+
);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
@include it('should use customizable inline spacing when declaring inline padding/margin') {
|
|
310
|
+
@include assert() {
|
|
311
|
+
@include output() {
|
|
312
|
+
padding-inline: pad-inline(14px);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
@include expect() {
|
|
316
|
+
padding-inline:
|
|
317
|
+
max(
|
|
318
|
+
calc(
|
|
319
|
+
var(--is-large, 1) * 14px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing))
|
|
320
|
+
),
|
|
321
|
+
calc(
|
|
322
|
+
var(--is-medium, 1) * 14px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing))
|
|
323
|
+
),
|
|
324
|
+
calc(
|
|
325
|
+
var(--is-small, 1) * 14px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing))
|
|
326
|
+
)
|
|
327
|
+
);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
@include it('should use customizable block spacing when declaring inline padding/margin') {
|
|
333
|
+
@include assert() {
|
|
334
|
+
@include output() {
|
|
335
|
+
padding-block: pad-block(4px, 8px, 16px);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
@include expect() {
|
|
339
|
+
padding-block:
|
|
340
|
+
max(
|
|
341
|
+
calc(
|
|
342
|
+
var(--is-large, 1) * 16px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing))
|
|
343
|
+
),
|
|
344
|
+
calc(
|
|
345
|
+
var(--is-medium, 1) * 8px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing))
|
|
346
|
+
),
|
|
347
|
+
calc(
|
|
348
|
+
var(--is-small, 1) * 4px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing))
|
|
349
|
+
)
|
|
350
|
+
);
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
}
|
|
283
355
|
}
|
|
284
356
|
}
|