@dialpad/dialtone 6.27.0 → 6.27.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.
@@ -84,7 +84,6 @@
84
84
  width: 100%;
85
85
  max-width: var(--size628);
86
86
  max-height: 100%;
87
- padding: var(--su24);
88
87
  overflow-y: auto;
89
88
  color: var(--modal-dialog--fc);
90
89
  font-size: var(--fs16);
@@ -121,10 +120,14 @@
121
120
  display: flex;
122
121
  flex-direction: row-reverse;
123
122
  align-items: center;
124
- margin: var(--sun4);
123
+ padding: 0 var(--su24) var(--su24) var(--su24);
125
124
 
126
- > * {
127
- margin: var(--su4);
125
+ >:not(:first-child) {
126
+ margin-right: var(--su4);
127
+ }
128
+
129
+ >:not(:last-child) {
130
+ margin-left: var(--su4);
128
131
  }
129
132
  }
130
133
 
@@ -136,6 +139,7 @@
136
139
  // ----------------------------------------------------------------------------
137
140
  .d-modal__header {
138
141
  margin: 0 !important;
142
+ padding: var(--su24) var(--su24) 0;
139
143
  color: var(--modal-header--fc);
140
144
  font-weight: var(--fw-bold);
141
145
  font-size: var(--fs24);
@@ -146,7 +150,8 @@
146
150
  // ----------------------------------------------------------------------------
147
151
  .d-modal__content {
148
152
  max-width: 75ch;
149
- margin: 0;
153
+ margin: var(--su12) 0 0 !important;
154
+ padding: var(--su4) var(--su24);
150
155
  }
151
156
 
152
157
 
@@ -196,15 +201,22 @@
196
201
  flex-direction: column;
197
202
  max-width: unset;
198
203
  height: 100%;
199
- padding: var(--su32);
200
204
  border-radius: 0;
201
205
  transform: unset !important;
202
206
  }
203
207
 
208
+ .d-modal__header {
209
+ padding: var(--su32) var(--su32) 0;
210
+ }
211
+
212
+ .d-modal__content {
213
+ padding-right: 0;
214
+ padding-left: var(--su32);
215
+ }
204
216
 
205
217
  .d-modal__footer {
206
- margin: var(--sun16) var(--sun12);
207
218
  margin-top: auto !important;
219
+ padding: 0 var(--su24) var(--su32) var(--su32);
208
220
  }
209
221
 
210
222
  .d-modal__banner {
@@ -219,6 +231,7 @@
219
231
  .d-modal__dialog--scrollable {
220
232
  display: flex;
221
233
  flex-direction: column;
234
+ overflow: hidden;
222
235
 
223
236
  .d-modal__content {
224
237
  overflow-y: auto;
@@ -1669,7 +1669,6 @@ legend .d-label {
1669
1669
  width: 100%;
1670
1670
  max-width: var(--size628);
1671
1671
  max-height: 100%;
1672
- padding: var(--su24);
1673
1672
  overflow-y: auto;
1674
1673
  color: var(--modal-dialog--fc);
1675
1674
  font-size: var(--fs16);
@@ -1699,13 +1698,17 @@ legend .d-label {
1699
1698
  display: flex;
1700
1699
  flex-direction: row-reverse;
1701
1700
  align-items: center;
1702
- margin: var(--sun4);
1701
+ padding: 0 var(--su24) var(--su24) var(--su24);
1703
1702
  }
1704
- .d-modal__footer > * {
1705
- margin: var(--su4);
1703
+ .d-modal__footer > :not(:first-child) {
1704
+ margin-right: var(--su4);
1705
+ }
1706
+ .d-modal__footer > :not(:last-child) {
1707
+ margin-left: var(--su4);
1706
1708
  }
1707
1709
  .d-modal__header {
1708
1710
  margin: 0 !important;
1711
+ padding: var(--su24) var(--su24) 0;
1709
1712
  color: var(--modal-header--fc);
1710
1713
  font-weight: var(--fw-bold);
1711
1714
  font-size: var(--fs24);
@@ -1713,7 +1716,8 @@ legend .d-label {
1713
1716
  }
1714
1717
  .d-modal__content {
1715
1718
  max-width: 75ch;
1716
- margin: 0;
1719
+ margin: var(--su12) 0 0 !important;
1720
+ padding: var(--su4) var(--su24);
1717
1721
  }
1718
1722
  .d-modal__close {
1719
1723
  position: absolute;
@@ -1745,13 +1749,19 @@ legend .d-label {
1745
1749
  flex-direction: column;
1746
1750
  max-width: unset;
1747
1751
  height: 100%;
1748
- padding: var(--su32);
1749
1752
  border-radius: 0;
1750
1753
  transform: unset !important;
1751
1754
  }
1755
+ .d-modal--full .d-modal__header {
1756
+ padding: var(--su32) var(--su32) 0;
1757
+ }
1758
+ .d-modal--full .d-modal__content {
1759
+ padding-right: 0;
1760
+ padding-left: var(--su32);
1761
+ }
1752
1762
  .d-modal--full .d-modal__footer {
1753
- margin: var(--sun16) var(--sun12);
1754
1763
  margin-top: auto !important;
1764
+ padding: 0 var(--su24) var(--su32) var(--su32);
1755
1765
  }
1756
1766
  .d-modal--full .d-modal__banner {
1757
1767
  max-width: unset;
@@ -1761,6 +1771,7 @@ legend .d-label {
1761
1771
  .d-modal__dialog--scrollable {
1762
1772
  display: flex;
1763
1773
  flex-direction: column;
1774
+ overflow: hidden;
1764
1775
  }
1765
1776
  .d-modal__dialog--scrollable .d-modal__content {
1766
1777
  overflow-y: auto;
@@ -20139,7 +20150,6 @@ body.theme-dark {
20139
20150
  width: 100%;
20140
20151
  max-width: var(--size628);
20141
20152
  max-height: 100%;
20142
- padding: var(--su24);
20143
20153
  overflow-y: auto;
20144
20154
  color: var(--modal-dialog--fc);
20145
20155
  font-size: var(--fs16);
@@ -20169,13 +20179,17 @@ body.theme-dark {
20169
20179
  display: flex;
20170
20180
  flex-direction: row-reverse;
20171
20181
  align-items: center;
20172
- margin: var(--sun4);
20182
+ padding: 0 var(--su24) var(--su24) var(--su24);
20173
20183
  }
20174
- .sm\:d-modal__footer > * {
20175
- margin: var(--su4);
20184
+ .sm\:d-modal__footer > :not(:first-child) {
20185
+ margin-right: var(--su4);
20186
+ }
20187
+ .sm\:d-modal__footer > :not(:last-child) {
20188
+ margin-left: var(--su4);
20176
20189
  }
20177
20190
  .sm\:d-modal__header {
20178
20191
  margin: 0 !important;
20192
+ padding: var(--su24) var(--su24) 0;
20179
20193
  color: var(--modal-header--fc);
20180
20194
  font-weight: var(--fw-bold);
20181
20195
  font-size: var(--fs24);
@@ -20183,7 +20197,8 @@ body.theme-dark {
20183
20197
  }
20184
20198
  .sm\:d-modal__content {
20185
20199
  max-width: 75ch;
20186
- margin: 0;
20200
+ margin: var(--su12) 0 0 !important;
20201
+ padding: var(--su4) var(--su24);
20187
20202
  }
20188
20203
  .sm\:d-modal__close {
20189
20204
  position: absolute;
@@ -20215,13 +20230,19 @@ body.theme-dark {
20215
20230
  flex-direction: column;
20216
20231
  max-width: unset;
20217
20232
  height: 100%;
20218
- padding: var(--su32);
20219
20233
  border-radius: 0;
20220
20234
  transform: unset !important;
20221
20235
  }
20236
+ .sm\:d-modal--full .d-modal__header {
20237
+ padding: var(--su32) var(--su32) 0;
20238
+ }
20239
+ .sm\:d-modal--full .d-modal__content {
20240
+ padding-right: 0;
20241
+ padding-left: var(--su32);
20242
+ }
20222
20243
  .sm\:d-modal--full .d-modal__footer {
20223
- margin: var(--sun16) var(--sun12);
20224
20244
  margin-top: auto !important;
20245
+ padding: 0 var(--su24) var(--su32) var(--su32);
20225
20246
  }
20226
20247
  .sm\:d-modal--full .d-modal__banner {
20227
20248
  max-width: unset;
@@ -20231,6 +20252,7 @@ body.theme-dark {
20231
20252
  .sm\:d-modal__dialog--scrollable {
20232
20253
  display: flex;
20233
20254
  flex-direction: column;
20255
+ overflow: hidden;
20234
20256
  }
20235
20257
  .sm\:d-modal__dialog--scrollable .d-modal__content {
20236
20258
  overflow-y: auto;
@@ -21315,7 +21337,6 @@ body.theme-dark {
21315
21337
  width: 100%;
21316
21338
  max-width: var(--size628);
21317
21339
  max-height: 100%;
21318
- padding: var(--su24);
21319
21340
  overflow-y: auto;
21320
21341
  color: var(--modal-dialog--fc);
21321
21342
  font-size: var(--fs16);
@@ -21345,13 +21366,17 @@ body.theme-dark {
21345
21366
  display: flex;
21346
21367
  flex-direction: row-reverse;
21347
21368
  align-items: center;
21348
- margin: var(--sun4);
21369
+ padding: 0 var(--su24) var(--su24) var(--su24);
21349
21370
  }
21350
- .md\:d-modal__footer > * {
21351
- margin: var(--su4);
21371
+ .md\:d-modal__footer > :not(:first-child) {
21372
+ margin-right: var(--su4);
21373
+ }
21374
+ .md\:d-modal__footer > :not(:last-child) {
21375
+ margin-left: var(--su4);
21352
21376
  }
21353
21377
  .md\:d-modal__header {
21354
21378
  margin: 0 !important;
21379
+ padding: var(--su24) var(--su24) 0;
21355
21380
  color: var(--modal-header--fc);
21356
21381
  font-weight: var(--fw-bold);
21357
21382
  font-size: var(--fs24);
@@ -21359,7 +21384,8 @@ body.theme-dark {
21359
21384
  }
21360
21385
  .md\:d-modal__content {
21361
21386
  max-width: 75ch;
21362
- margin: 0;
21387
+ margin: var(--su12) 0 0 !important;
21388
+ padding: var(--su4) var(--su24);
21363
21389
  }
21364
21390
  .md\:d-modal__close {
21365
21391
  position: absolute;
@@ -21391,13 +21417,19 @@ body.theme-dark {
21391
21417
  flex-direction: column;
21392
21418
  max-width: unset;
21393
21419
  height: 100%;
21394
- padding: var(--su32);
21395
21420
  border-radius: 0;
21396
21421
  transform: unset !important;
21397
21422
  }
21423
+ .md\:d-modal--full .d-modal__header {
21424
+ padding: var(--su32) var(--su32) 0;
21425
+ }
21426
+ .md\:d-modal--full .d-modal__content {
21427
+ padding-right: 0;
21428
+ padding-left: var(--su32);
21429
+ }
21398
21430
  .md\:d-modal--full .d-modal__footer {
21399
- margin: var(--sun16) var(--sun12);
21400
21431
  margin-top: auto !important;
21432
+ padding: 0 var(--su24) var(--su32) var(--su32);
21401
21433
  }
21402
21434
  .md\:d-modal--full .d-modal__banner {
21403
21435
  max-width: unset;
@@ -21407,6 +21439,7 @@ body.theme-dark {
21407
21439
  .md\:d-modal__dialog--scrollable {
21408
21440
  display: flex;
21409
21441
  flex-direction: column;
21442
+ overflow: hidden;
21410
21443
  }
21411
21444
  .md\:d-modal__dialog--scrollable .d-modal__content {
21412
21445
  overflow-y: auto;
@@ -22491,7 +22524,6 @@ body.theme-dark {
22491
22524
  width: 100%;
22492
22525
  max-width: var(--size628);
22493
22526
  max-height: 100%;
22494
- padding: var(--su24);
22495
22527
  overflow-y: auto;
22496
22528
  color: var(--modal-dialog--fc);
22497
22529
  font-size: var(--fs16);
@@ -22521,13 +22553,17 @@ body.theme-dark {
22521
22553
  display: flex;
22522
22554
  flex-direction: row-reverse;
22523
22555
  align-items: center;
22524
- margin: var(--sun4);
22556
+ padding: 0 var(--su24) var(--su24) var(--su24);
22525
22557
  }
22526
- .lg\:d-modal__footer > * {
22527
- margin: var(--su4);
22558
+ .lg\:d-modal__footer > :not(:first-child) {
22559
+ margin-right: var(--su4);
22560
+ }
22561
+ .lg\:d-modal__footer > :not(:last-child) {
22562
+ margin-left: var(--su4);
22528
22563
  }
22529
22564
  .lg\:d-modal__header {
22530
22565
  margin: 0 !important;
22566
+ padding: var(--su24) var(--su24) 0;
22531
22567
  color: var(--modal-header--fc);
22532
22568
  font-weight: var(--fw-bold);
22533
22569
  font-size: var(--fs24);
@@ -22535,7 +22571,8 @@ body.theme-dark {
22535
22571
  }
22536
22572
  .lg\:d-modal__content {
22537
22573
  max-width: 75ch;
22538
- margin: 0;
22574
+ margin: var(--su12) 0 0 !important;
22575
+ padding: var(--su4) var(--su24);
22539
22576
  }
22540
22577
  .lg\:d-modal__close {
22541
22578
  position: absolute;
@@ -22567,13 +22604,19 @@ body.theme-dark {
22567
22604
  flex-direction: column;
22568
22605
  max-width: unset;
22569
22606
  height: 100%;
22570
- padding: var(--su32);
22571
22607
  border-radius: 0;
22572
22608
  transform: unset !important;
22573
22609
  }
22610
+ .lg\:d-modal--full .d-modal__header {
22611
+ padding: var(--su32) var(--su32) 0;
22612
+ }
22613
+ .lg\:d-modal--full .d-modal__content {
22614
+ padding-right: 0;
22615
+ padding-left: var(--su32);
22616
+ }
22574
22617
  .lg\:d-modal--full .d-modal__footer {
22575
- margin: var(--sun16) var(--sun12);
22576
22618
  margin-top: auto !important;
22619
+ padding: 0 var(--su24) var(--su32) var(--su32);
22577
22620
  }
22578
22621
  .lg\:d-modal--full .d-modal__banner {
22579
22622
  max-width: unset;
@@ -22583,6 +22626,7 @@ body.theme-dark {
22583
22626
  .lg\:d-modal__dialog--scrollable {
22584
22627
  display: flex;
22585
22628
  flex-direction: column;
22629
+ overflow: hidden;
22586
22630
  }
22587
22631
  .lg\:d-modal__dialog--scrollable .d-modal__content {
22588
22632
  overflow-y: auto;
@@ -23667,7 +23711,6 @@ body.theme-dark {
23667
23711
  width: 100%;
23668
23712
  max-width: var(--size628);
23669
23713
  max-height: 100%;
23670
- padding: var(--su24);
23671
23714
  overflow-y: auto;
23672
23715
  color: var(--modal-dialog--fc);
23673
23716
  font-size: var(--fs16);
@@ -23697,13 +23740,17 @@ body.theme-dark {
23697
23740
  display: flex;
23698
23741
  flex-direction: row-reverse;
23699
23742
  align-items: center;
23700
- margin: var(--sun4);
23743
+ padding: 0 var(--su24) var(--su24) var(--su24);
23744
+ }
23745
+ .xl\:d-modal__footer > :not(:first-child) {
23746
+ margin-right: var(--su4);
23701
23747
  }
23702
- .xl\:d-modal__footer > * {
23703
- margin: var(--su4);
23748
+ .xl\:d-modal__footer > :not(:last-child) {
23749
+ margin-left: var(--su4);
23704
23750
  }
23705
23751
  .xl\:d-modal__header {
23706
23752
  margin: 0 !important;
23753
+ padding: var(--su24) var(--su24) 0;
23707
23754
  color: var(--modal-header--fc);
23708
23755
  font-weight: var(--fw-bold);
23709
23756
  font-size: var(--fs24);
@@ -23711,7 +23758,8 @@ body.theme-dark {
23711
23758
  }
23712
23759
  .xl\:d-modal__content {
23713
23760
  max-width: 75ch;
23714
- margin: 0;
23761
+ margin: var(--su12) 0 0 !important;
23762
+ padding: var(--su4) var(--su24);
23715
23763
  }
23716
23764
  .xl\:d-modal__close {
23717
23765
  position: absolute;
@@ -23743,13 +23791,19 @@ body.theme-dark {
23743
23791
  flex-direction: column;
23744
23792
  max-width: unset;
23745
23793
  height: 100%;
23746
- padding: var(--su32);
23747
23794
  border-radius: 0;
23748
23795
  transform: unset !important;
23749
23796
  }
23797
+ .xl\:d-modal--full .d-modal__header {
23798
+ padding: var(--su32) var(--su32) 0;
23799
+ }
23800
+ .xl\:d-modal--full .d-modal__content {
23801
+ padding-right: 0;
23802
+ padding-left: var(--su32);
23803
+ }
23750
23804
  .xl\:d-modal--full .d-modal__footer {
23751
- margin: var(--sun16) var(--sun12);
23752
23805
  margin-top: auto !important;
23806
+ padding: 0 var(--su24) var(--su32) var(--su32);
23753
23807
  }
23754
23808
  .xl\:d-modal--full .d-modal__banner {
23755
23809
  max-width: unset;
@@ -23759,6 +23813,7 @@ body.theme-dark {
23759
23813
  .xl\:d-modal__dialog--scrollable {
23760
23814
  display: flex;
23761
23815
  flex-direction: column;
23816
+ overflow: hidden;
23762
23817
  }
23763
23818
  .xl\:d-modal__dialog--scrollable .d-modal__content {
23764
23819
  overflow-y: auto;