@dialpad/dialtone 7.16.1 → 7.17.1
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/lib/build/less/components/modal.less +8 -2
- package/lib/build/less/components/popover.less +12 -13
- package/lib/build/less/components/stack.less +110 -0
- package/lib/build/less/dialtone.less +1 -0
- package/lib/dist/css/dialtone.css +132 -9
- package/lib/dist/css/dialtone.min.css +1 -1
- package/package.json +16 -12
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
--modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
|
|
31
31
|
--modal-dialog-padding: var(--space-600);
|
|
32
32
|
--modal-dialog-color-background: var(--bgc-primary);
|
|
33
|
+
--modal-dialog-color-border: hsla(var(--black-900-hsl) / 0.1);
|
|
33
34
|
--modal-dialog-color-text: var(--fc-tertiary);
|
|
34
35
|
--modal-header-color-text: var(--fc-secondary);
|
|
35
|
-
--modal-dialog-
|
|
36
|
-
--modal-dialog-shadow: 0 0 0 var(--size-100) var(--modal-dialog-color-shadow), var(--bs-card);
|
|
36
|
+
--modal-dialog-shadow: var(--bs-card);
|
|
37
37
|
|
|
38
38
|
position: fixed;
|
|
39
39
|
top: 0;
|
|
@@ -83,6 +83,8 @@
|
|
|
83
83
|
font-size: var(--fs-200);
|
|
84
84
|
line-height: var(--lh-400);
|
|
85
85
|
background-color: var(--modal-dialog-color-background);
|
|
86
|
+
background-clip: padding-box;
|
|
87
|
+
border: var(--size-100) solid var(--modal-dialog-color-border);
|
|
86
88
|
border-radius: var(--size-500);
|
|
87
89
|
box-shadow: var(--modal-dialog-shadow);
|
|
88
90
|
transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
|
|
@@ -168,6 +170,9 @@
|
|
|
168
170
|
font-size: var(--fs-200);
|
|
169
171
|
line-height: var(--lh-300);
|
|
170
172
|
background-color: var(--modal-banner-color-background);
|
|
173
|
+
background-clip: padding-box;
|
|
174
|
+
border: var(--size-100) solid var(--modal-dialog-color-border);
|
|
175
|
+
border-bottom-width: 0;
|
|
171
176
|
border-radius: var(--size-500) var(--size-500) 0 0;
|
|
172
177
|
box-shadow: var(--modal-dialog-shadow);
|
|
173
178
|
|
|
@@ -204,6 +209,7 @@
|
|
|
204
209
|
}
|
|
205
210
|
|
|
206
211
|
&:not(.d-d-none) + .d-modal__dialog {
|
|
212
|
+
border-top-width: 0;
|
|
207
213
|
border-top-left-radius: 0;
|
|
208
214
|
border-top-right-radius: 0;
|
|
209
215
|
}
|
|
@@ -8,31 +8,28 @@
|
|
|
8
8
|
//
|
|
9
9
|
// TABLE OF CONTENTS
|
|
10
10
|
// • POPOVER
|
|
11
|
+
// • POPOVER DIALOG
|
|
11
12
|
// • CSS CUSTOM PROPERTIES
|
|
12
13
|
// • POPOVER DIALOG
|
|
13
14
|
// - Base dialog style
|
|
14
15
|
// - Content
|
|
15
16
|
// - Header / Footer
|
|
16
17
|
|
|
17
|
-
// $ CSS CUSTOM PROPERTIES
|
|
18
|
-
// ----------------------------------------------------------------------------
|
|
19
|
-
body {
|
|
20
|
-
--popover-color-background: var(--black-100);
|
|
21
|
-
--popover-border-width: var(--size-100); // 8
|
|
22
|
-
--popover-border-radius: var(--size-400);
|
|
23
|
-
--popover-color-shadow: hsla(var(--black-900-hsl) ~' / ' 10%);
|
|
24
|
-
--popover-color-border: var(--popover-color-shadow);
|
|
25
|
-
--popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
18
|
// $ POPOVER
|
|
29
19
|
// ----------------------------------------------------------------------------
|
|
30
20
|
.d-popover {
|
|
31
|
-
|
|
32
|
-
|
|
33
21
|
// $ POPOVER DIALOG
|
|
34
22
|
// ----------------------------------------------------------------------------
|
|
23
|
+
|
|
35
24
|
&__dialog {
|
|
25
|
+
// $$ CSS CUSTOM PROPERTIES
|
|
26
|
+
// ----------------------------------------------------------------------------
|
|
27
|
+
--popover-color-background: var(--bgc-secondary);
|
|
28
|
+
--popover-border-width: var(--size-100); // 8
|
|
29
|
+
--popover-border-radius: var(--size-400);
|
|
30
|
+
--popover-color-border: hsla(var(--black-900-hsl) / 0.1);
|
|
31
|
+
--popover-shadow: var(--bs-card);
|
|
32
|
+
|
|
36
33
|
&,
|
|
37
34
|
*,
|
|
38
35
|
*::before,
|
|
@@ -44,6 +41,8 @@ body {
|
|
|
44
41
|
grid-template-rows: 1fr;
|
|
45
42
|
overflow: auto;
|
|
46
43
|
background-color: var(--popover-color-background);
|
|
44
|
+
background-clip: padding-box;
|
|
45
|
+
border: var(--popover-border-width) solid var(--popover-color-border);
|
|
47
46
|
border-radius: var(--popover-border-radius);
|
|
48
47
|
box-shadow: var(--popover-shadow);
|
|
49
48
|
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
//
|
|
2
|
+
// DIALTONE
|
|
3
|
+
// COMPONENTS: STACK
|
|
4
|
+
//
|
|
5
|
+
// These are the styles for stack component.
|
|
6
|
+
//
|
|
7
|
+
//
|
|
8
|
+
// TABLE OF CONTENTS
|
|
9
|
+
// • BASE STYLE
|
|
10
|
+
// • VISUAL STYLES
|
|
11
|
+
// • RESPONSIVE STYLE
|
|
12
|
+
// • SIZES
|
|
13
|
+
|
|
14
|
+
// @@ BASE STYLE
|
|
15
|
+
// ----------------------------------------------------------------------------
|
|
16
|
+
|
|
17
|
+
.direction-options() {
|
|
18
|
+
&--column {
|
|
19
|
+
--stack-direction: column;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&--column-reverse {
|
|
23
|
+
--stack-direction: column-reverse;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&--row {
|
|
27
|
+
--stack-direction: row;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&--row-reverse {
|
|
31
|
+
--stack-direction: row-reverse;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.d-stack {
|
|
36
|
+
--stack-gap: 0;
|
|
37
|
+
--stack-direction: column;
|
|
38
|
+
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: var(--stack-direction);
|
|
41
|
+
gap: var(--stack-gap);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// ============================================================================
|
|
45
|
+
// $ VISUAL STYLES
|
|
46
|
+
// ----------------------------------------------------------------------------
|
|
47
|
+
// $$ COLUMN-REVERSE
|
|
48
|
+
// ----------------------------------------------------------------------------
|
|
49
|
+
.d-stack--column-reverse {
|
|
50
|
+
--stack-direction: column-reverse;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// ----------------------------------------------------------------------------
|
|
54
|
+
// $$ ROW
|
|
55
|
+
// ----------------------------------------------------------------------------
|
|
56
|
+
.d-stack--row {
|
|
57
|
+
--stack-direction: row;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// ----------------------------------------------------------------------------
|
|
61
|
+
// $$ ROW-REVERSE
|
|
62
|
+
// ----------------------------------------------------------------------------
|
|
63
|
+
.d-stack--row-reverse {
|
|
64
|
+
--stack-direction: row-reverse;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// ============================================================================
|
|
68
|
+
// $ RESPONSIVE
|
|
69
|
+
// ----------------------------------------------------------------------------
|
|
70
|
+
// $$ EXTRA LARGE
|
|
71
|
+
// ----------------------------------------------------------------------------
|
|
72
|
+
.d-stack--xl {
|
|
73
|
+
@media screen and (max-width: 1264px) {
|
|
74
|
+
.direction-options();
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// $$ LARGE
|
|
79
|
+
// ----------------------------------------------------------------------------
|
|
80
|
+
.d-stack--lg {
|
|
81
|
+
@media screen and (max-width: 980px) {
|
|
82
|
+
.direction-options();
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// $$ MEDIUM
|
|
87
|
+
// ----------------
|
|
88
|
+
.d-stack--md {
|
|
89
|
+
@media screen and (max-width: 640px) {
|
|
90
|
+
.direction-options();
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// $$ SMALL
|
|
95
|
+
// ----------------------------------------------------------------------------
|
|
96
|
+
.d-stack--sm {
|
|
97
|
+
@media screen and (max-width: 480px) {
|
|
98
|
+
.direction-options();
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// ============================================================================
|
|
103
|
+
// $ SIZES
|
|
104
|
+
// ----------------------------------------------------------------------------
|
|
105
|
+
.d-stack--gap-100 { --stack-gap: var(--space-100); }
|
|
106
|
+
.d-stack--gap-200 { --stack-gap: var(--space-200); }
|
|
107
|
+
.d-stack--gap-300 { --stack-gap: var(--space-300); }
|
|
108
|
+
.d-stack--gap-400 { --stack-gap: var(--space-400); }
|
|
109
|
+
.d-stack--gap-500 { --stack-gap: var(--space-500); }
|
|
110
|
+
.d-stack--gap-600 { --stack-gap: var(--space-500); }
|
|
@@ -2036,10 +2036,10 @@ legend .d-label {
|
|
|
2036
2036
|
--modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
|
|
2037
2037
|
--modal-dialog-padding: var(--space-600);
|
|
2038
2038
|
--modal-dialog-color-background: var(--bgc-primary);
|
|
2039
|
+
--modal-dialog-color-border: hsla(var(--black-900-hsl) / 0.1);
|
|
2039
2040
|
--modal-dialog-color-text: var(--fc-tertiary);
|
|
2040
2041
|
--modal-header-color-text: var(--fc-secondary);
|
|
2041
|
-
--modal-dialog-
|
|
2042
|
-
--modal-dialog-shadow: 0 0 0 var(--size-100) var(--modal-dialog-color-shadow), var(--bs-card);
|
|
2042
|
+
--modal-dialog-shadow: var(--bs-card);
|
|
2043
2043
|
position: fixed;
|
|
2044
2044
|
top: 0;
|
|
2045
2045
|
right: 0;
|
|
@@ -2083,6 +2083,8 @@ legend .d-label {
|
|
|
2083
2083
|
font-size: var(--fs-200);
|
|
2084
2084
|
line-height: var(--lh-400);
|
|
2085
2085
|
background-color: var(--modal-dialog-color-background);
|
|
2086
|
+
background-clip: padding-box;
|
|
2087
|
+
border: var(--size-100) solid var(--modal-dialog-color-border);
|
|
2086
2088
|
border-radius: var(--size-500);
|
|
2087
2089
|
box-shadow: var(--modal-dialog-shadow);
|
|
2088
2090
|
transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
|
|
@@ -2137,6 +2139,9 @@ legend .d-label {
|
|
|
2137
2139
|
font-size: var(--fs-200);
|
|
2138
2140
|
line-height: var(--lh-300);
|
|
2139
2141
|
background-color: var(--modal-banner-color-background);
|
|
2142
|
+
background-clip: padding-box;
|
|
2143
|
+
border: var(--size-100) solid var(--modal-dialog-color-border);
|
|
2144
|
+
border-bottom-width: 0;
|
|
2140
2145
|
border-radius: var(--size-500) var(--size-500) 0 0;
|
|
2141
2146
|
box-shadow: var(--modal-dialog-shadow);
|
|
2142
2147
|
}
|
|
@@ -2166,6 +2171,7 @@ legend .d-label {
|
|
|
2166
2171
|
content: '';
|
|
2167
2172
|
}
|
|
2168
2173
|
.d-modal__banner:not(.d-d-none) + .d-modal__dialog {
|
|
2174
|
+
border-top-width: 0;
|
|
2169
2175
|
border-top-left-radius: 0;
|
|
2170
2176
|
border-top-right-radius: 0;
|
|
2171
2177
|
}
|
|
@@ -2502,19 +2508,18 @@ legend .d-label {
|
|
|
2502
2508
|
--notice-color-text: var(--fc-primary);
|
|
2503
2509
|
--notice-color-icon: var(--notice-color-text);
|
|
2504
2510
|
}
|
|
2505
|
-
|
|
2506
|
-
--popover-color-background: var(--
|
|
2511
|
+
.d-popover__dialog {
|
|
2512
|
+
--popover-color-background: var(--bgc-secondary);
|
|
2507
2513
|
--popover-border-width: var(--size-100);
|
|
2508
2514
|
--popover-border-radius: var(--size-400);
|
|
2509
|
-
--popover-color-
|
|
2510
|
-
--popover-
|
|
2511
|
-
--popover-shadow: 0 0 0 1px var(--popover-color-shadow), var(--bs-card);
|
|
2512
|
-
}
|
|
2513
|
-
.d-popover__dialog {
|
|
2515
|
+
--popover-color-border: hsla(var(--black-900-hsl) / 0.1);
|
|
2516
|
+
--popover-shadow: var(--bs-card);
|
|
2514
2517
|
display: grid;
|
|
2515
2518
|
grid-template-rows: 1fr;
|
|
2516
2519
|
overflow: auto;
|
|
2517
2520
|
background-color: var(--popover-color-background);
|
|
2521
|
+
background-clip: padding-box;
|
|
2522
|
+
border: var(--popover-border-width) solid var(--popover-color-border);
|
|
2518
2523
|
border-radius: var(--popover-border-radius);
|
|
2519
2524
|
box-shadow: var(--popover-shadow);
|
|
2520
2525
|
}
|
|
@@ -3552,6 +3557,96 @@ body {
|
|
|
3552
3557
|
flex-direction: column;
|
|
3553
3558
|
height: 100vh;
|
|
3554
3559
|
}
|
|
3560
|
+
.d-stack {
|
|
3561
|
+
--stack-gap: 0;
|
|
3562
|
+
--stack-direction: column;
|
|
3563
|
+
display: flex;
|
|
3564
|
+
flex-direction: var(--stack-direction);
|
|
3565
|
+
gap: var(--stack-gap);
|
|
3566
|
+
}
|
|
3567
|
+
.d-stack--column-reverse {
|
|
3568
|
+
--stack-direction: column-reverse;
|
|
3569
|
+
}
|
|
3570
|
+
.d-stack--row {
|
|
3571
|
+
--stack-direction: row;
|
|
3572
|
+
}
|
|
3573
|
+
.d-stack--row-reverse {
|
|
3574
|
+
--stack-direction: row-reverse;
|
|
3575
|
+
}
|
|
3576
|
+
@media screen and (max-width: 1264px) {
|
|
3577
|
+
.d-stack--xl--column {
|
|
3578
|
+
--stack-direction: column;
|
|
3579
|
+
}
|
|
3580
|
+
.d-stack--xl--column-reverse {
|
|
3581
|
+
--stack-direction: column-reverse;
|
|
3582
|
+
}
|
|
3583
|
+
.d-stack--xl--row {
|
|
3584
|
+
--stack-direction: row;
|
|
3585
|
+
}
|
|
3586
|
+
.d-stack--xl--row-reverse {
|
|
3587
|
+
--stack-direction: row-reverse;
|
|
3588
|
+
}
|
|
3589
|
+
}
|
|
3590
|
+
@media screen and (max-width: 980px) {
|
|
3591
|
+
.d-stack--lg--column {
|
|
3592
|
+
--stack-direction: column;
|
|
3593
|
+
}
|
|
3594
|
+
.d-stack--lg--column-reverse {
|
|
3595
|
+
--stack-direction: column-reverse;
|
|
3596
|
+
}
|
|
3597
|
+
.d-stack--lg--row {
|
|
3598
|
+
--stack-direction: row;
|
|
3599
|
+
}
|
|
3600
|
+
.d-stack--lg--row-reverse {
|
|
3601
|
+
--stack-direction: row-reverse;
|
|
3602
|
+
}
|
|
3603
|
+
}
|
|
3604
|
+
@media screen and (max-width: 640px) {
|
|
3605
|
+
.d-stack--md--column {
|
|
3606
|
+
--stack-direction: column;
|
|
3607
|
+
}
|
|
3608
|
+
.d-stack--md--column-reverse {
|
|
3609
|
+
--stack-direction: column-reverse;
|
|
3610
|
+
}
|
|
3611
|
+
.d-stack--md--row {
|
|
3612
|
+
--stack-direction: row;
|
|
3613
|
+
}
|
|
3614
|
+
.d-stack--md--row-reverse {
|
|
3615
|
+
--stack-direction: row-reverse;
|
|
3616
|
+
}
|
|
3617
|
+
}
|
|
3618
|
+
@media screen and (max-width: 480px) {
|
|
3619
|
+
.d-stack--sm--column {
|
|
3620
|
+
--stack-direction: column;
|
|
3621
|
+
}
|
|
3622
|
+
.d-stack--sm--column-reverse {
|
|
3623
|
+
--stack-direction: column-reverse;
|
|
3624
|
+
}
|
|
3625
|
+
.d-stack--sm--row {
|
|
3626
|
+
--stack-direction: row;
|
|
3627
|
+
}
|
|
3628
|
+
.d-stack--sm--row-reverse {
|
|
3629
|
+
--stack-direction: row-reverse;
|
|
3630
|
+
}
|
|
3631
|
+
}
|
|
3632
|
+
.d-stack--gap-100 {
|
|
3633
|
+
--stack-gap: var(--space-100);
|
|
3634
|
+
}
|
|
3635
|
+
.d-stack--gap-200 {
|
|
3636
|
+
--stack-gap: var(--space-200);
|
|
3637
|
+
}
|
|
3638
|
+
.d-stack--gap-300 {
|
|
3639
|
+
--stack-gap: var(--space-300);
|
|
3640
|
+
}
|
|
3641
|
+
.d-stack--gap-400 {
|
|
3642
|
+
--stack-gap: var(--space-400);
|
|
3643
|
+
}
|
|
3644
|
+
.d-stack--gap-500 {
|
|
3645
|
+
--stack-gap: var(--space-500);
|
|
3646
|
+
}
|
|
3647
|
+
.d-stack--gap-600 {
|
|
3648
|
+
--stack-gap: var(--space-500);
|
|
3649
|
+
}
|
|
3555
3650
|
.d-bgg-from-black-600,
|
|
3556
3651
|
.h\:d-bgg-from-black-600:hover,
|
|
3557
3652
|
.f\:d-bgg-from-black-600:focus {
|
|
@@ -21256,6 +21351,13 @@ body.theme-dark {
|
|
|
21256
21351
|
.sm\:d-g-cols12 {
|
|
21257
21352
|
grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
|
|
21258
21353
|
}
|
|
21354
|
+
.sm\:d-stack {
|
|
21355
|
+
--stack-gap: 0;
|
|
21356
|
+
--stack-direction: column;
|
|
21357
|
+
display: flex;
|
|
21358
|
+
flex-direction: var(--stack-direction);
|
|
21359
|
+
gap: var(--stack-gap);
|
|
21360
|
+
}
|
|
21259
21361
|
.sm\:d-h0 {
|
|
21260
21362
|
height: 0 !important;
|
|
21261
21363
|
}
|
|
@@ -21776,6 +21878,13 @@ body.theme-dark {
|
|
|
21776
21878
|
.md\:d-g-cols12 {
|
|
21777
21879
|
grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
|
|
21778
21880
|
}
|
|
21881
|
+
.md\:d-stack {
|
|
21882
|
+
--stack-gap: 0;
|
|
21883
|
+
--stack-direction: column;
|
|
21884
|
+
display: flex;
|
|
21885
|
+
flex-direction: var(--stack-direction);
|
|
21886
|
+
gap: var(--stack-gap);
|
|
21887
|
+
}
|
|
21779
21888
|
.md\:d-h0 {
|
|
21780
21889
|
height: 0 !important;
|
|
21781
21890
|
}
|
|
@@ -22296,6 +22405,13 @@ body.theme-dark {
|
|
|
22296
22405
|
.lg\:d-g-cols12 {
|
|
22297
22406
|
grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
|
|
22298
22407
|
}
|
|
22408
|
+
.lg\:d-stack {
|
|
22409
|
+
--stack-gap: 0;
|
|
22410
|
+
--stack-direction: column;
|
|
22411
|
+
display: flex;
|
|
22412
|
+
flex-direction: var(--stack-direction);
|
|
22413
|
+
gap: var(--stack-gap);
|
|
22414
|
+
}
|
|
22299
22415
|
.lg\:d-h0 {
|
|
22300
22416
|
height: 0 !important;
|
|
22301
22417
|
}
|
|
@@ -22816,6 +22932,13 @@ body.theme-dark {
|
|
|
22816
22932
|
.xl\:d-g-cols12 {
|
|
22817
22933
|
grid-template-columns: [full-start] repeat(12, [col-start] var(--col-width, minmax(0, 1fr)) [col-end]) [full-end] !important;
|
|
22818
22934
|
}
|
|
22935
|
+
.xl\:d-stack {
|
|
22936
|
+
--stack-gap: 0;
|
|
22937
|
+
--stack-direction: column;
|
|
22938
|
+
display: flex;
|
|
22939
|
+
flex-direction: var(--stack-direction);
|
|
22940
|
+
gap: var(--stack-gap);
|
|
22941
|
+
}
|
|
22819
22942
|
.xl\:d-h0 {
|
|
22820
22943
|
height: 0 !important;
|
|
22821
22944
|
}
|