@underlayerdev/ui 0.15.0 → 0.17.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.
- package/containers/_containers.scss +21 -9
- package/containers/_values.scss +4 -0
- package/design-tokens/_variables.scss +20 -0
- package/fesm2022/underlayerdev-ui.mjs +2762 -120
- package/fesm2022/underlayerdev-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/foundations.css +13 -7
- package/types/underlayerdev-ui.d.ts +103 -2
|
@@ -31,9 +31,11 @@
|
|
|
31
31
|
padding-right: $spacing-spacing-16;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
// From xl up the content stops growing and stays centred (the container is a
|
|
35
|
+
// centred flex row). Only a cap, like container-form's.
|
|
34
36
|
@media (min-width: $breakpoint-xl) {
|
|
35
|
-
|
|
36
|
-
max-width:
|
|
37
|
+
> * {
|
|
38
|
+
max-width: $component-container-gallery-max-width;
|
|
37
39
|
}
|
|
38
40
|
}
|
|
39
41
|
}
|
|
@@ -52,8 +54,9 @@
|
|
|
52
54
|
@media (min-width: $breakpoint-xl) {
|
|
53
55
|
padding-left: $spacing-spacing-48;
|
|
54
56
|
padding-right: $spacing-spacing-48;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
+
|
|
58
|
+
> * {
|
|
59
|
+
max-width: $component-container-product-max-width;
|
|
57
60
|
}
|
|
58
61
|
}
|
|
59
62
|
}
|
|
@@ -61,15 +64,24 @@
|
|
|
61
64
|
// Container Form
|
|
62
65
|
@mixin container-form {
|
|
63
66
|
@include container-base;
|
|
64
|
-
padding-left: $spacing-spacing-
|
|
65
|
-
padding-right: $spacing-spacing-
|
|
67
|
+
padding-left: $spacing-spacing-4;
|
|
68
|
+
padding-right: $spacing-spacing-4;
|
|
69
|
+
|
|
70
|
+
// The container is a centred flex row, so a child that stops growing at the
|
|
71
|
+
// maximum stays in the middle. Only a cap, never a width of its own: the
|
|
72
|
+
// child may be a block that fills the row, or a row of controls that spreads.
|
|
73
|
+
> * {
|
|
74
|
+
max-width: $component-container-form-max-width;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@media (min-width: $breakpoint-sm) {
|
|
78
|
+
padding-left: $spacing-spacing-8;
|
|
79
|
+
padding-right: $spacing-spacing-8;
|
|
80
|
+
}
|
|
66
81
|
|
|
67
82
|
@media (min-width: $breakpoint-md) {
|
|
68
83
|
padding-left: $spacing-spacing-16;
|
|
69
84
|
padding-right: $spacing-spacing-16;
|
|
70
|
-
&.content {
|
|
71
|
-
max-width: 960px;
|
|
72
|
-
}
|
|
73
85
|
}
|
|
74
86
|
|
|
75
87
|
@media (min-width: $breakpoint-xl) {
|
package/containers/_values.scss
CHANGED
|
@@ -5,5 +5,9 @@ $spacing-spacing-4: 16px !default;
|
|
|
5
5
|
$spacing-spacing-8: 32px !default;
|
|
6
6
|
$spacing-spacing-16: 64px !default;
|
|
7
7
|
$spacing-spacing-48: 192px !default;
|
|
8
|
+
$component-container-gallery-max-width: 2176px !default;
|
|
9
|
+
$component-container-product-max-width: 1920px !default;
|
|
10
|
+
$component-container-form-max-width: 720px !default;
|
|
11
|
+
$breakpoint-sm: 768px !default;
|
|
8
12
|
$breakpoint-md: 1024px !default;
|
|
9
13
|
$breakpoint-xl: 1600px !default;
|
|
@@ -429,13 +429,19 @@ $iconography-font-line-height-16: 64px !default;
|
|
|
429
429
|
$iconography-font-line-height-24: 96px !default;
|
|
430
430
|
$iconography-font-line-height-32: 128px !default;
|
|
431
431
|
$component-dropdown-list-max-height: 316px !default;
|
|
432
|
+
$component-container-gallery-max-width: 2176px !default;
|
|
433
|
+
$component-container-product-max-width: 1920px !default;
|
|
434
|
+
$component-container-form-max-width: 720px !default;
|
|
435
|
+
$component-control-height-xs: 24px !default;
|
|
432
436
|
$component-control-height-sm: 32px !default;
|
|
433
437
|
$component-control-height-md: 40px !default;
|
|
434
438
|
$component-control-height-lg: 48px !default;
|
|
435
439
|
$component-control-height-xl: 64px !default;
|
|
440
|
+
$component-control-min-width-xs: 64px !default;
|
|
436
441
|
$component-control-min-width-sm: 96px !default;
|
|
437
442
|
$component-control-min-width-md: 112px !default;
|
|
438
443
|
$component-control-min-width-lg: 144px !default;
|
|
444
|
+
$component-icon-only-size-xs: 24px !default;
|
|
439
445
|
$component-icon-only-size-sm: 32px !default;
|
|
440
446
|
$component-icon-only-size-md: 40px !default;
|
|
441
447
|
$component-icon-only-size-lg: 48px !default;
|
|
@@ -1440,19 +1446,33 @@ $tokens: (
|
|
|
1440
1446
|
),
|
|
1441
1447
|
'component': (
|
|
1442
1448
|
'dropdown-list-max-height': $component-dropdown-list-max-height,
|
|
1449
|
+
'container': (
|
|
1450
|
+
'gallery': (
|
|
1451
|
+
'max-width': $component-container-gallery-max-width,
|
|
1452
|
+
),
|
|
1453
|
+
'product': (
|
|
1454
|
+
'max-width': $component-container-product-max-width,
|
|
1455
|
+
),
|
|
1456
|
+
'form': (
|
|
1457
|
+
'max-width': $component-container-form-max-width,
|
|
1458
|
+
),
|
|
1459
|
+
),
|
|
1443
1460
|
'control': (
|
|
1444
1461
|
'height': (
|
|
1462
|
+
'xs': $component-control-height-xs,
|
|
1445
1463
|
'sm': $component-control-height-sm,
|
|
1446
1464
|
'md': $component-control-height-md,
|
|
1447
1465
|
'lg': $component-control-height-lg,
|
|
1448
1466
|
'xl': $component-control-height-xl,
|
|
1449
1467
|
),
|
|
1450
1468
|
'min-width': (
|
|
1469
|
+
'xs': $component-control-min-width-xs,
|
|
1451
1470
|
'sm': $component-control-min-width-sm,
|
|
1452
1471
|
'md': $component-control-min-width-md,
|
|
1453
1472
|
'lg': $component-control-min-width-lg,
|
|
1454
1473
|
),
|
|
1455
1474
|
'icon-only-size': (
|
|
1475
|
+
'xs': $component-icon-only-size-xs,
|
|
1456
1476
|
'sm': $component-icon-only-size-sm,
|
|
1457
1477
|
'md': $component-icon-only-size-md,
|
|
1458
1478
|
'lg': $component-icon-only-size-lg,
|