@underlayerdev/ui 0.15.0 → 0.16.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 +2 -2
- 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 +7 -1
|
@@ -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,
|
|
@@ -1465,7 +1465,7 @@ var ButtonComponent = class ButtonComponent {
|
|
|
1465
1465
|
</button>
|
|
1466
1466
|
`,
|
|
1467
1467
|
isInline: true,
|
|
1468
|
-
styles: [".ul-btn{border:none;cursor:pointer;padding:0;text-decoration-line:none;overflow:visible;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;width:100%;color:#fff}.ul-btn:focus-visible,.ul-btn:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-btn{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.ul-btn[disabled],.ul-btn:disabled{cursor:not-allowed;color:#ffffff4d}.ul-btn--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:32px;min-width:96px;padding:8px 12px;border-radius:8px;gap:4px}.ul-btn--sm.ul-btn--icon-only{min-width:32px}.ul-btn--sm .ul-icon{font-size:20px;line-height:20px}.ul-btn--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;height:40px;min-width:112px;padding:8px 16px;border-radius:12px;gap:8px}.ul-btn--md.ul-btn--icon-only{min-width:40px}.ul-btn--md .ul-icon{font-size:24px;line-height:24px}.ul-btn--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;height:48px;min-width:144px;padding:8px 32px;border-radius:16px;gap:12px}.ul-btn--lg.ul-btn--icon-only{min-width:48px}.ul-btn--lg .ul-icon{font-size:28px;line-height:28px}.ul-btn--lg.ul-btn--vertical{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;flex-direction:column;height:auto;width:164px;padding:16px 32px;border-radius:24px;gap:8px}.ul-btn--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;height:64px;min-width:144px;padding:8px 16px;border-radius:16px;gap:12px}.ul-btn--xl.ul-btn--icon-only{min-width:48px}.ul-btn--xl .ul-icon{font-size:32px;line-height:32px}.ul-btn--icon-only{padding:0}.ul-btn--fill-purple{background-color:#6f3de0;color:inherit}.ul-btn--fill-purple:hover{background-color:#7e4af7}.ul-btn--fill-purple:active{background-color:#5935af}.ul-btn--fill-purple:selected{background-color:#7e4af7}.ul-btn--fill-purple:disabled,.ul-btn--fill-purple[disabled]{background-color:#232323}.ul-btn--fill-purple{color:#fff}.ul-btn--fill-white{background-color:#fff;color:inherit}.ul-btn--fill-white:hover{background-color:#e7e7e7}.ul-btn--fill-white:active{background-color:#fff}.ul-btn--fill-white:selected{background-color:#fff}.ul-btn--fill-white:disabled,.ul-btn--fill-white[disabled]{background-color:#232323}.ul-btn--fill-white{color:#000}.ul-btn--fill-yellow{background-color:#ffe9a3;color:inherit}.ul-btn--fill-yellow:hover{background-color:#fff1c1}.ul-btn--fill-yellow:active{background-color:#ffe58f}.ul-btn--fill-yellow:selected{background-color:#fff1c1}.ul-btn--fill-yellow:disabled,.ul-btn--fill-yellow[disabled]{background-color:#232323}.ul-btn--fill-yellow{color:#000}.ul-btn--fill-red{background-color:#c33a3a;color:inherit}.ul-btn--fill-red:hover{background-color:#d64040}.ul-btn--fill-red:active{background-color:#982d2d}.ul-btn--fill-red:selected{background-color:#d64040}.ul-btn--fill-red:disabled,.ul-btn--fill-red[disabled]{background-color:#232323}.ul-btn--fill-red{color:#fff}.ul-btn--fill-green{background-color:#0b7a27;color:inherit}.ul-btn--fill-green:hover{background-color:#0e892d}.ul-btn--fill-green:active{background-color:#096620}.ul-btn--fill-green:selected{background-color:#0e892d}.ul-btn--fill-green:disabled,.ul-btn--fill-green[disabled]{background-color:#232323}.ul-btn--fill-green{color:#fff}.ul-btn--transparent-purple{background-color:#a781ff33;color:inherit}.ul-btn--transparent-purple:hover{background-color:#a781ff4d}.ul-btn--transparent-purple:active{background-color:#a781ff33}.ul-btn--transparent-purple:selected{background-color:#a781ff4d}.ul-btn--transparent-purple:disabled,.ul-btn--transparent-purple[disabled]{background-color:#ffffff0d}.ul-btn--transparent-purple{color:#c2a8ff}.ul-btn--transparent-white{background-color:#ffffff1a;color:inherit}.ul-btn--transparent-white:hover{background-color:#fff3}.ul-btn--transparent-white:active{background-color:#ffffff1a}.ul-btn--transparent-white:selected{background-color:#fff3}.ul-btn--transparent-white:disabled,.ul-btn--transparent-white[disabled]{background-color:#ffffff0d}.ul-btn--transparent-white{color:#fff}.ul-btn--transparent-red{background-color:#f3707033;color:inherit}.ul-btn--transparent-red:hover{background-color:#f370704d}.ul-btn--transparent-red:active{background-color:#f3707033}.ul-btn--transparent-red:selected{background-color:#f370704d}.ul-btn--transparent-red:disabled,.ul-btn--transparent-red[disabled]{background-color:#ffffff0d}.ul-btn--transparent-red{color:#f69d9d}.ul-btn--transparent-black{background-color:#0000004d;color:inherit}.ul-btn--transparent-black:hover{background-color:#00000080}.ul-btn--transparent-black:active{background-color:#000000b3}.ul-btn--transparent-black:selected{background-color:#00000080}.ul-btn--transparent-black:disabled,.ul-btn--transparent-black[disabled]{background-color:#ffffff0d}.ul-btn--transparent-black{color:#fff}.ul-btn--ghost-purple:hover{background-color:#a781ff4d}.ul-btn--ghost-purple:active{background-color:#a781ff33}.ul-btn--ghost-purple:selected{background-color:#a781ff4d}.ul-btn--ghost-purple{background-color:#a781ff00;color:inherit}.ul-btn--ghost-purple:disabled,.ul-btn--ghost-purple[disabled]{background-color:#a781ff00}.ul-btn--ghost-purple{color:#c2a8ff}.ul-btn--ghost-white:hover{background-color:#fff3}.ul-btn--ghost-white:active{background-color:#ffffff1a}.ul-btn--ghost-white:selected{background-color:#fff3}.ul-btn--ghost-white{background-color:#fff0;color:inherit}.ul-btn--ghost-white:disabled,.ul-btn--ghost-white[disabled]{background-color:#fff0}.ul-btn--ghost-white{color:#ffffffb3}.ul-btn--ghost-white:active,.ul-btn--ghost-white:hover{color:#fff}.ul-btn--ghost-red:hover{background-color:#f370704d}.ul-btn--ghost-red:active{background-color:#f3707033}.ul-btn--ghost-red:selected{background-color:#f370704d}.ul-btn--ghost-red{background-color:#f3707000;color:inherit}.ul-btn--ghost-red:disabled,.ul-btn--ghost-red[disabled]{background-color:#f3707000}.ul-btn--ghost-red{color:#f69d9d}.ul-btn--ghost-green:hover{background-color:#50c06c4d}.ul-btn--ghost-green:active{background-color:#50c06c33}.ul-btn--ghost-green:selected{background-color:#50c06c4d}.ul-btn--ghost-green{background-color:#50c06c00;color:inherit}.ul-btn--ghost-green:disabled,.ul-btn--ghost-green[disabled]{background-color:#50c06c00}.ul-btn--ghost-green{color:#7edc96}.ul-btn--outline-white,.ul-btn--outline-purple,.ul-btn--outline-red,.ul-btn--outline-green{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-btn--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-btn--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-btn--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-btn--outline-white:disabled,.ul-btn--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-btn--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:disabled,.ul-btn--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-btn--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:disabled,.ul-btn--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-btn--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:disabled,.ul-btn--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}\n"],
|
|
1468
|
+
styles: [".ul-btn{border:none;cursor:pointer;padding:0;text-decoration-line:none;overflow:visible;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;width:100%;color:#fff}.ul-btn:focus-visible,.ul-btn:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-btn{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.ul-btn[disabled],.ul-btn:disabled{cursor:not-allowed;color:#ffffff4d}.ul-btn--xs{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:24px;min-width:64px;padding:0 8px;border-radius:8px;gap:4px}.ul-btn--xs.ul-btn--icon-only{min-width:24px}.ul-btn--xs .ul-icon{font-size:16px;line-height:16px}.ul-btn--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:32px;min-width:96px;padding:8px 12px;border-radius:8px;gap:4px}.ul-btn--sm.ul-btn--icon-only{min-width:32px}.ul-btn--sm .ul-icon{font-size:20px;line-height:20px}.ul-btn--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;height:40px;min-width:112px;padding:8px 16px;border-radius:12px;gap:8px}.ul-btn--md.ul-btn--icon-only{min-width:40px}.ul-btn--md .ul-icon{font-size:24px;line-height:24px}.ul-btn--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;height:48px;min-width:144px;padding:8px 32px;border-radius:16px;gap:12px}.ul-btn--lg.ul-btn--icon-only{min-width:48px}.ul-btn--lg .ul-icon{font-size:28px;line-height:28px}.ul-btn--lg.ul-btn--vertical{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;flex-direction:column;height:auto;width:164px;padding:16px 32px;border-radius:24px;gap:8px}.ul-btn--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;height:64px;min-width:144px;padding:8px 16px;border-radius:16px;gap:12px}.ul-btn--xl.ul-btn--icon-only{min-width:48px}.ul-btn--xl .ul-icon{font-size:32px;line-height:32px}.ul-btn--icon-only{padding:0}.ul-btn--fill-purple{background-color:#6f3de0;color:inherit}.ul-btn--fill-purple:hover{background-color:#7e4af7}.ul-btn--fill-purple:active{background-color:#5935af}.ul-btn--fill-purple:selected{background-color:#7e4af7}.ul-btn--fill-purple:disabled,.ul-btn--fill-purple[disabled]{background-color:#232323}.ul-btn--fill-purple{color:#fff}.ul-btn--fill-white{background-color:#fff;color:inherit}.ul-btn--fill-white:hover{background-color:#e7e7e7}.ul-btn--fill-white:active{background-color:#fff}.ul-btn--fill-white:selected{background-color:#fff}.ul-btn--fill-white:disabled,.ul-btn--fill-white[disabled]{background-color:#232323}.ul-btn--fill-white{color:#000}.ul-btn--fill-yellow{background-color:#ffe9a3;color:inherit}.ul-btn--fill-yellow:hover{background-color:#fff1c1}.ul-btn--fill-yellow:active{background-color:#ffe58f}.ul-btn--fill-yellow:selected{background-color:#fff1c1}.ul-btn--fill-yellow:disabled,.ul-btn--fill-yellow[disabled]{background-color:#232323}.ul-btn--fill-yellow{color:#000}.ul-btn--fill-red{background-color:#c33a3a;color:inherit}.ul-btn--fill-red:hover{background-color:#d64040}.ul-btn--fill-red:active{background-color:#982d2d}.ul-btn--fill-red:selected{background-color:#d64040}.ul-btn--fill-red:disabled,.ul-btn--fill-red[disabled]{background-color:#232323}.ul-btn--fill-red{color:#fff}.ul-btn--fill-green{background-color:#0b7a27;color:inherit}.ul-btn--fill-green:hover{background-color:#0e892d}.ul-btn--fill-green:active{background-color:#096620}.ul-btn--fill-green:selected{background-color:#0e892d}.ul-btn--fill-green:disabled,.ul-btn--fill-green[disabled]{background-color:#232323}.ul-btn--fill-green{color:#fff}.ul-btn--transparent-purple{background-color:#a781ff33;color:inherit}.ul-btn--transparent-purple:hover{background-color:#a781ff4d}.ul-btn--transparent-purple:active{background-color:#a781ff33}.ul-btn--transparent-purple:selected{background-color:#a781ff4d}.ul-btn--transparent-purple:disabled,.ul-btn--transparent-purple[disabled]{background-color:#ffffff0d}.ul-btn--transparent-purple{color:#c2a8ff}.ul-btn--transparent-white{background-color:#ffffff1a;color:inherit}.ul-btn--transparent-white:hover{background-color:#fff3}.ul-btn--transparent-white:active{background-color:#ffffff1a}.ul-btn--transparent-white:selected{background-color:#fff3}.ul-btn--transparent-white:disabled,.ul-btn--transparent-white[disabled]{background-color:#ffffff0d}.ul-btn--transparent-white{color:#fff}.ul-btn--transparent-red{background-color:#f3707033;color:inherit}.ul-btn--transparent-red:hover{background-color:#f370704d}.ul-btn--transparent-red:active{background-color:#f3707033}.ul-btn--transparent-red:selected{background-color:#f370704d}.ul-btn--transparent-red:disabled,.ul-btn--transparent-red[disabled]{background-color:#ffffff0d}.ul-btn--transparent-red{color:#f69d9d}.ul-btn--transparent-black{background-color:#0000004d;color:inherit}.ul-btn--transparent-black:hover{background-color:#00000080}.ul-btn--transparent-black:active{background-color:#000000b3}.ul-btn--transparent-black:selected{background-color:#00000080}.ul-btn--transparent-black:disabled,.ul-btn--transparent-black[disabled]{background-color:#ffffff0d}.ul-btn--transparent-black{color:#fff}.ul-btn--ghost-purple:hover{background-color:#a781ff4d}.ul-btn--ghost-purple:active{background-color:#a781ff33}.ul-btn--ghost-purple:selected{background-color:#a781ff4d}.ul-btn--ghost-purple{background-color:#a781ff00;color:inherit}.ul-btn--ghost-purple:disabled,.ul-btn--ghost-purple[disabled]{background-color:#a781ff00}.ul-btn--ghost-purple{color:#c2a8ff}.ul-btn--ghost-white:hover{background-color:#fff3}.ul-btn--ghost-white:active{background-color:#ffffff1a}.ul-btn--ghost-white:selected{background-color:#fff3}.ul-btn--ghost-white{background-color:#fff0;color:inherit}.ul-btn--ghost-white:disabled,.ul-btn--ghost-white[disabled]{background-color:#fff0}.ul-btn--ghost-white{color:#ffffffb3}.ul-btn--ghost-white:active,.ul-btn--ghost-white:hover{color:#fff}.ul-btn--ghost-red:hover{background-color:#f370704d}.ul-btn--ghost-red:active{background-color:#f3707033}.ul-btn--ghost-red:selected{background-color:#f370704d}.ul-btn--ghost-red{background-color:#f3707000;color:inherit}.ul-btn--ghost-red:disabled,.ul-btn--ghost-red[disabled]{background-color:#f3707000}.ul-btn--ghost-red{color:#f69d9d}.ul-btn--ghost-green:hover{background-color:#50c06c4d}.ul-btn--ghost-green:active{background-color:#50c06c33}.ul-btn--ghost-green:selected{background-color:#50c06c4d}.ul-btn--ghost-green{background-color:#50c06c00;color:inherit}.ul-btn--ghost-green:disabled,.ul-btn--ghost-green[disabled]{background-color:#50c06c00}.ul-btn--ghost-green{color:#7edc96}.ul-btn--outline-white,.ul-btn--outline-purple,.ul-btn--outline-red,.ul-btn--outline-green{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-btn--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-btn--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-btn--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-btn--outline-white:disabled,.ul-btn--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-btn--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:disabled,.ul-btn--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-btn--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:disabled,.ul-btn--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-btn--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:disabled,.ul-btn--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}\n"],
|
|
1469
1469
|
dependencies: [{
|
|
1470
1470
|
kind: "directive",
|
|
1471
1471
|
type: ButtonDirective,
|
|
@@ -1507,7 +1507,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1507
1507
|
</button>
|
|
1508
1508
|
`,
|
|
1509
1509
|
encapsulation: ViewEncapsulation.None,
|
|
1510
|
-
styles: [".ul-btn{border:none;cursor:pointer;padding:0;text-decoration-line:none;overflow:visible;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;width:100%;color:#fff}.ul-btn:focus-visible,.ul-btn:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-btn{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.ul-btn[disabled],.ul-btn:disabled{cursor:not-allowed;color:#ffffff4d}.ul-btn--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:32px;min-width:96px;padding:8px 12px;border-radius:8px;gap:4px}.ul-btn--sm.ul-btn--icon-only{min-width:32px}.ul-btn--sm .ul-icon{font-size:20px;line-height:20px}.ul-btn--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;height:40px;min-width:112px;padding:8px 16px;border-radius:12px;gap:8px}.ul-btn--md.ul-btn--icon-only{min-width:40px}.ul-btn--md .ul-icon{font-size:24px;line-height:24px}.ul-btn--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;height:48px;min-width:144px;padding:8px 32px;border-radius:16px;gap:12px}.ul-btn--lg.ul-btn--icon-only{min-width:48px}.ul-btn--lg .ul-icon{font-size:28px;line-height:28px}.ul-btn--lg.ul-btn--vertical{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;flex-direction:column;height:auto;width:164px;padding:16px 32px;border-radius:24px;gap:8px}.ul-btn--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;height:64px;min-width:144px;padding:8px 16px;border-radius:16px;gap:12px}.ul-btn--xl.ul-btn--icon-only{min-width:48px}.ul-btn--xl .ul-icon{font-size:32px;line-height:32px}.ul-btn--icon-only{padding:0}.ul-btn--fill-purple{background-color:#6f3de0;color:inherit}.ul-btn--fill-purple:hover{background-color:#7e4af7}.ul-btn--fill-purple:active{background-color:#5935af}.ul-btn--fill-purple:selected{background-color:#7e4af7}.ul-btn--fill-purple:disabled,.ul-btn--fill-purple[disabled]{background-color:#232323}.ul-btn--fill-purple{color:#fff}.ul-btn--fill-white{background-color:#fff;color:inherit}.ul-btn--fill-white:hover{background-color:#e7e7e7}.ul-btn--fill-white:active{background-color:#fff}.ul-btn--fill-white:selected{background-color:#fff}.ul-btn--fill-white:disabled,.ul-btn--fill-white[disabled]{background-color:#232323}.ul-btn--fill-white{color:#000}.ul-btn--fill-yellow{background-color:#ffe9a3;color:inherit}.ul-btn--fill-yellow:hover{background-color:#fff1c1}.ul-btn--fill-yellow:active{background-color:#ffe58f}.ul-btn--fill-yellow:selected{background-color:#fff1c1}.ul-btn--fill-yellow:disabled,.ul-btn--fill-yellow[disabled]{background-color:#232323}.ul-btn--fill-yellow{color:#000}.ul-btn--fill-red{background-color:#c33a3a;color:inherit}.ul-btn--fill-red:hover{background-color:#d64040}.ul-btn--fill-red:active{background-color:#982d2d}.ul-btn--fill-red:selected{background-color:#d64040}.ul-btn--fill-red:disabled,.ul-btn--fill-red[disabled]{background-color:#232323}.ul-btn--fill-red{color:#fff}.ul-btn--fill-green{background-color:#0b7a27;color:inherit}.ul-btn--fill-green:hover{background-color:#0e892d}.ul-btn--fill-green:active{background-color:#096620}.ul-btn--fill-green:selected{background-color:#0e892d}.ul-btn--fill-green:disabled,.ul-btn--fill-green[disabled]{background-color:#232323}.ul-btn--fill-green{color:#fff}.ul-btn--transparent-purple{background-color:#a781ff33;color:inherit}.ul-btn--transparent-purple:hover{background-color:#a781ff4d}.ul-btn--transparent-purple:active{background-color:#a781ff33}.ul-btn--transparent-purple:selected{background-color:#a781ff4d}.ul-btn--transparent-purple:disabled,.ul-btn--transparent-purple[disabled]{background-color:#ffffff0d}.ul-btn--transparent-purple{color:#c2a8ff}.ul-btn--transparent-white{background-color:#ffffff1a;color:inherit}.ul-btn--transparent-white:hover{background-color:#fff3}.ul-btn--transparent-white:active{background-color:#ffffff1a}.ul-btn--transparent-white:selected{background-color:#fff3}.ul-btn--transparent-white:disabled,.ul-btn--transparent-white[disabled]{background-color:#ffffff0d}.ul-btn--transparent-white{color:#fff}.ul-btn--transparent-red{background-color:#f3707033;color:inherit}.ul-btn--transparent-red:hover{background-color:#f370704d}.ul-btn--transparent-red:active{background-color:#f3707033}.ul-btn--transparent-red:selected{background-color:#f370704d}.ul-btn--transparent-red:disabled,.ul-btn--transparent-red[disabled]{background-color:#ffffff0d}.ul-btn--transparent-red{color:#f69d9d}.ul-btn--transparent-black{background-color:#0000004d;color:inherit}.ul-btn--transparent-black:hover{background-color:#00000080}.ul-btn--transparent-black:active{background-color:#000000b3}.ul-btn--transparent-black:selected{background-color:#00000080}.ul-btn--transparent-black:disabled,.ul-btn--transparent-black[disabled]{background-color:#ffffff0d}.ul-btn--transparent-black{color:#fff}.ul-btn--ghost-purple:hover{background-color:#a781ff4d}.ul-btn--ghost-purple:active{background-color:#a781ff33}.ul-btn--ghost-purple:selected{background-color:#a781ff4d}.ul-btn--ghost-purple{background-color:#a781ff00;color:inherit}.ul-btn--ghost-purple:disabled,.ul-btn--ghost-purple[disabled]{background-color:#a781ff00}.ul-btn--ghost-purple{color:#c2a8ff}.ul-btn--ghost-white:hover{background-color:#fff3}.ul-btn--ghost-white:active{background-color:#ffffff1a}.ul-btn--ghost-white:selected{background-color:#fff3}.ul-btn--ghost-white{background-color:#fff0;color:inherit}.ul-btn--ghost-white:disabled,.ul-btn--ghost-white[disabled]{background-color:#fff0}.ul-btn--ghost-white{color:#ffffffb3}.ul-btn--ghost-white:active,.ul-btn--ghost-white:hover{color:#fff}.ul-btn--ghost-red:hover{background-color:#f370704d}.ul-btn--ghost-red:active{background-color:#f3707033}.ul-btn--ghost-red:selected{background-color:#f370704d}.ul-btn--ghost-red{background-color:#f3707000;color:inherit}.ul-btn--ghost-red:disabled,.ul-btn--ghost-red[disabled]{background-color:#f3707000}.ul-btn--ghost-red{color:#f69d9d}.ul-btn--ghost-green:hover{background-color:#50c06c4d}.ul-btn--ghost-green:active{background-color:#50c06c33}.ul-btn--ghost-green:selected{background-color:#50c06c4d}.ul-btn--ghost-green{background-color:#50c06c00;color:inherit}.ul-btn--ghost-green:disabled,.ul-btn--ghost-green[disabled]{background-color:#50c06c00}.ul-btn--ghost-green{color:#7edc96}.ul-btn--outline-white,.ul-btn--outline-purple,.ul-btn--outline-red,.ul-btn--outline-green{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-btn--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-btn--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-btn--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-btn--outline-white:disabled,.ul-btn--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-btn--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:disabled,.ul-btn--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-btn--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:disabled,.ul-btn--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-btn--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:disabled,.ul-btn--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}\n"]
|
|
1510
|
+
styles: [".ul-btn{border:none;cursor:pointer;padding:0;text-decoration-line:none;overflow:visible;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;width:100%;color:#fff}.ul-btn:focus-visible,.ul-btn:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-btn{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.ul-btn[disabled],.ul-btn:disabled{cursor:not-allowed;color:#ffffff4d}.ul-btn--xs{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:24px;min-width:64px;padding:0 8px;border-radius:8px;gap:4px}.ul-btn--xs.ul-btn--icon-only{min-width:24px}.ul-btn--xs .ul-icon{font-size:16px;line-height:16px}.ul-btn--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:32px;min-width:96px;padding:8px 12px;border-radius:8px;gap:4px}.ul-btn--sm.ul-btn--icon-only{min-width:32px}.ul-btn--sm .ul-icon{font-size:20px;line-height:20px}.ul-btn--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;height:40px;min-width:112px;padding:8px 16px;border-radius:12px;gap:8px}.ul-btn--md.ul-btn--icon-only{min-width:40px}.ul-btn--md .ul-icon{font-size:24px;line-height:24px}.ul-btn--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;height:48px;min-width:144px;padding:8px 32px;border-radius:16px;gap:12px}.ul-btn--lg.ul-btn--icon-only{min-width:48px}.ul-btn--lg .ul-icon{font-size:28px;line-height:28px}.ul-btn--lg.ul-btn--vertical{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;flex-direction:column;height:auto;width:164px;padding:16px 32px;border-radius:24px;gap:8px}.ul-btn--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;height:64px;min-width:144px;padding:8px 16px;border-radius:16px;gap:12px}.ul-btn--xl.ul-btn--icon-only{min-width:48px}.ul-btn--xl .ul-icon{font-size:32px;line-height:32px}.ul-btn--icon-only{padding:0}.ul-btn--fill-purple{background-color:#6f3de0;color:inherit}.ul-btn--fill-purple:hover{background-color:#7e4af7}.ul-btn--fill-purple:active{background-color:#5935af}.ul-btn--fill-purple:selected{background-color:#7e4af7}.ul-btn--fill-purple:disabled,.ul-btn--fill-purple[disabled]{background-color:#232323}.ul-btn--fill-purple{color:#fff}.ul-btn--fill-white{background-color:#fff;color:inherit}.ul-btn--fill-white:hover{background-color:#e7e7e7}.ul-btn--fill-white:active{background-color:#fff}.ul-btn--fill-white:selected{background-color:#fff}.ul-btn--fill-white:disabled,.ul-btn--fill-white[disabled]{background-color:#232323}.ul-btn--fill-white{color:#000}.ul-btn--fill-yellow{background-color:#ffe9a3;color:inherit}.ul-btn--fill-yellow:hover{background-color:#fff1c1}.ul-btn--fill-yellow:active{background-color:#ffe58f}.ul-btn--fill-yellow:selected{background-color:#fff1c1}.ul-btn--fill-yellow:disabled,.ul-btn--fill-yellow[disabled]{background-color:#232323}.ul-btn--fill-yellow{color:#000}.ul-btn--fill-red{background-color:#c33a3a;color:inherit}.ul-btn--fill-red:hover{background-color:#d64040}.ul-btn--fill-red:active{background-color:#982d2d}.ul-btn--fill-red:selected{background-color:#d64040}.ul-btn--fill-red:disabled,.ul-btn--fill-red[disabled]{background-color:#232323}.ul-btn--fill-red{color:#fff}.ul-btn--fill-green{background-color:#0b7a27;color:inherit}.ul-btn--fill-green:hover{background-color:#0e892d}.ul-btn--fill-green:active{background-color:#096620}.ul-btn--fill-green:selected{background-color:#0e892d}.ul-btn--fill-green:disabled,.ul-btn--fill-green[disabled]{background-color:#232323}.ul-btn--fill-green{color:#fff}.ul-btn--transparent-purple{background-color:#a781ff33;color:inherit}.ul-btn--transparent-purple:hover{background-color:#a781ff4d}.ul-btn--transparent-purple:active{background-color:#a781ff33}.ul-btn--transparent-purple:selected{background-color:#a781ff4d}.ul-btn--transparent-purple:disabled,.ul-btn--transparent-purple[disabled]{background-color:#ffffff0d}.ul-btn--transparent-purple{color:#c2a8ff}.ul-btn--transparent-white{background-color:#ffffff1a;color:inherit}.ul-btn--transparent-white:hover{background-color:#fff3}.ul-btn--transparent-white:active{background-color:#ffffff1a}.ul-btn--transparent-white:selected{background-color:#fff3}.ul-btn--transparent-white:disabled,.ul-btn--transparent-white[disabled]{background-color:#ffffff0d}.ul-btn--transparent-white{color:#fff}.ul-btn--transparent-red{background-color:#f3707033;color:inherit}.ul-btn--transparent-red:hover{background-color:#f370704d}.ul-btn--transparent-red:active{background-color:#f3707033}.ul-btn--transparent-red:selected{background-color:#f370704d}.ul-btn--transparent-red:disabled,.ul-btn--transparent-red[disabled]{background-color:#ffffff0d}.ul-btn--transparent-red{color:#f69d9d}.ul-btn--transparent-black{background-color:#0000004d;color:inherit}.ul-btn--transparent-black:hover{background-color:#00000080}.ul-btn--transparent-black:active{background-color:#000000b3}.ul-btn--transparent-black:selected{background-color:#00000080}.ul-btn--transparent-black:disabled,.ul-btn--transparent-black[disabled]{background-color:#ffffff0d}.ul-btn--transparent-black{color:#fff}.ul-btn--ghost-purple:hover{background-color:#a781ff4d}.ul-btn--ghost-purple:active{background-color:#a781ff33}.ul-btn--ghost-purple:selected{background-color:#a781ff4d}.ul-btn--ghost-purple{background-color:#a781ff00;color:inherit}.ul-btn--ghost-purple:disabled,.ul-btn--ghost-purple[disabled]{background-color:#a781ff00}.ul-btn--ghost-purple{color:#c2a8ff}.ul-btn--ghost-white:hover{background-color:#fff3}.ul-btn--ghost-white:active{background-color:#ffffff1a}.ul-btn--ghost-white:selected{background-color:#fff3}.ul-btn--ghost-white{background-color:#fff0;color:inherit}.ul-btn--ghost-white:disabled,.ul-btn--ghost-white[disabled]{background-color:#fff0}.ul-btn--ghost-white{color:#ffffffb3}.ul-btn--ghost-white:active,.ul-btn--ghost-white:hover{color:#fff}.ul-btn--ghost-red:hover{background-color:#f370704d}.ul-btn--ghost-red:active{background-color:#f3707033}.ul-btn--ghost-red:selected{background-color:#f370704d}.ul-btn--ghost-red{background-color:#f3707000;color:inherit}.ul-btn--ghost-red:disabled,.ul-btn--ghost-red[disabled]{background-color:#f3707000}.ul-btn--ghost-red{color:#f69d9d}.ul-btn--ghost-green:hover{background-color:#50c06c4d}.ul-btn--ghost-green:active{background-color:#50c06c33}.ul-btn--ghost-green:selected{background-color:#50c06c4d}.ul-btn--ghost-green{background-color:#50c06c00;color:inherit}.ul-btn--ghost-green:disabled,.ul-btn--ghost-green[disabled]{background-color:#50c06c00}.ul-btn--ghost-green{color:#7edc96}.ul-btn--outline-white,.ul-btn--outline-purple,.ul-btn--outline-red,.ul-btn--outline-green{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-btn--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-btn--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-btn--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-btn--outline-white:disabled,.ul-btn--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-btn--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:disabled,.ul-btn--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-btn--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:disabled,.ul-btn--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-btn--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:disabled,.ul-btn--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}\n"]
|
|
1511
1511
|
}]
|
|
1512
1512
|
}],
|
|
1513
1513
|
propDecorators: {
|