@dialpad/dialtone-css 8.41.0 → 8.42.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.
Files changed (6) hide show
  1. package/lib/build/less/components/stack.less +51 -16
  2. package/lib/dist/dialtone-default-theme.css +121 -37
  3. package/lib/dist/dialtone-default-theme.min.css +1 -1
  4. package/lib/dist/dialtone.css +121 -37
  5. package/lib/dist/dialtone.min.css +1 -1
  6. package/package.json +1 -1
package/lib/build/less/components/stack.less CHANGED
@@ -8,33 +8,33 @@
8
8
  // TABLE OF CONTENTS
9
9
  // • BASE STYLE
10
10
  // • VISUAL STYLES
11
- // • RESPONSIVE STYLE
12
11
  // • SIZES
12
+ // • RESPONSIVE STYLE
13
13
 
14
14
  // @@ BASE STYLE
15
15
  // ----------------------------------------------------------------------------
16
16
 
17
17
  .direction-options() {
18
- &--column {
18
+ &-column {
19
19
  --stack-direction: column;
20
20
 
21
21
  justify-content: flex-start;
22
22
  }
23
23
 
24
- &--column-reverse {
24
+ &-column-reverse {
25
25
  --stack-direction: column-reverse;
26
26
 
27
27
  justify-content: flex-start;
28
28
  }
29
29
 
30
- &--row {
30
+ &-row {
31
31
  --stack-direction: row;
32
32
 
33
33
  align-items: center;
34
34
  justify-content: normal;
35
35
  }
36
36
 
37
- &--row-reverse {
37
+ &-row-reverse {
38
38
  --stack-direction: row-reverse;
39
39
 
40
40
  align-items: center;
@@ -42,6 +42,36 @@
42
42
  }
43
43
  }
44
44
 
45
+ .gap-options() {
46
+ &-gap-100 {
47
+ .d-stack--gap-100();
48
+ }
49
+
50
+ &-gap-200 {
51
+ .d-stack--gap-200();
52
+ }
53
+
54
+ &-gap-300 {
55
+ .d-stack--gap-300();
56
+ }
57
+
58
+ &-gap-400 {
59
+ .d-stack--gap-400();
60
+ }
61
+
62
+ &-gap-450 {
63
+ .d-stack--gap-450();
64
+ }
65
+
66
+ &-gap-500 {
67
+ .d-stack--gap-500();
68
+ }
69
+
70
+ &-gap-600 {
71
+ .d-stack--gap-600();
72
+ }
73
+ }
74
+
45
75
  .d-stack {
46
76
  --stack-gap: 0;
47
77
  --stack-direction: column;
@@ -83,6 +113,18 @@
83
113
  justify-content: normal;
84
114
  }
85
115
 
116
+ // ============================================================================
117
+ // $ SIZES
118
+ // ----------------------------------------------------------------------------
119
+ .d-stack--gap-100 { --stack-gap: var(--dt-space-100); }
120
+ .d-stack--gap-200 { --stack-gap: var(--dt-space-200); }
121
+ .d-stack--gap-300 { --stack-gap: var(--dt-space-300); }
122
+ .d-stack--gap-400 { --stack-gap: var(--dt-space-400); }
123
+ .d-stack--gap-450 { --stack-gap: var(--dt-space-450); }
124
+ .d-stack--gap-500 { --stack-gap: var(--dt-space-500); }
125
+ .d-stack--gap-600 { --stack-gap: var(--dt-space-600); }
126
+
127
+
86
128
  // ============================================================================
87
129
  // $ RESPONSIVE
88
130
  // ----------------------------------------------------------------------------
@@ -91,6 +133,7 @@
91
133
  .d-stack--xl {
92
134
  @media screen and (max-width: 1264px) {
93
135
  .direction-options();
136
+ .gap-options();
94
137
  }
95
138
  }
96
139
 
@@ -99,6 +142,7 @@
99
142
  .d-stack--lg {
100
143
  @media screen and (max-width: 980px) {
101
144
  .direction-options();
145
+ .gap-options();
102
146
  }
103
147
  }
104
148
 
@@ -107,6 +151,7 @@
107
151
  .d-stack--md {
108
152
  @media screen and (max-width: 640px) {
109
153
  .direction-options();
154
+ .gap-options();
110
155
  }
111
156
  }
112
157
 
@@ -115,16 +160,6 @@
115
160
  .d-stack--sm {
116
161
  @media screen and (max-width: 480px) {
117
162
  .direction-options();
163
+ .gap-options();
118
164
  }
119
165
  }
120
-
121
- // ============================================================================
122
- // $ SIZES
123
- // ----------------------------------------------------------------------------
124
- .d-stack--gap-100 { --stack-gap: var(--dt-space-100); }
125
- .d-stack--gap-200 { --stack-gap: var(--dt-space-200); }
126
- .d-stack--gap-300 { --stack-gap: var(--dt-space-300); }
127
- .d-stack--gap-400 { --stack-gap: var(--dt-space-400); }
128
- .d-stack--gap-450 { --stack-gap: var(--dt-space-450); }
129
- .d-stack--gap-500 { --stack-gap: var(--dt-space-500); }
130
- .d-stack--gap-600 { --stack-gap: var(--dt-space-600); }
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -397,106 +397,190 @@ template {
397
397
  align-items: center;
398
398
  justify-content: normal;
399
399
  }
400
+ .d-stack--gap-100 {
401
+ --stack-gap: var(--dt-space-100);
402
+ }
403
+ .d-stack--gap-200 {
404
+ --stack-gap: var(--dt-space-200);
405
+ }
406
+ .d-stack--gap-300 {
407
+ --stack-gap: var(--dt-space-300);
408
+ }
409
+ .d-stack--gap-400 {
410
+ --stack-gap: var(--dt-space-400);
411
+ }
412
+ .d-stack--gap-450 {
413
+ --stack-gap: var(--dt-space-450);
414
+ }
415
+ .d-stack--gap-500 {
416
+ --stack-gap: var(--dt-space-500);
417
+ }
418
+ .d-stack--gap-600 {
419
+ --stack-gap: var(--dt-space-600);
420
+ }
400
421
  @media screen and (max-width: 1264px) {
401
- .d-stack--xl--column {
422
+ .d-stack--xl-column {
402
423
  --stack-direction: column;
403
424
  justify-content: flex-start;
404
425
  }
405
- .d-stack--xl--column-reverse {
426
+ .d-stack--xl-column-reverse {
406
427
  --stack-direction: column-reverse;
407
428
  justify-content: flex-start;
408
429
  }
409
- .d-stack--xl--row {
430
+ .d-stack--xl-row {
410
431
  --stack-direction: row;
411
432
  align-items: center;
412
433
  justify-content: normal;
413
434
  }
414
- .d-stack--xl--row-reverse {
435
+ .d-stack--xl-row-reverse {
415
436
  --stack-direction: row-reverse;
416
437
  align-items: center;
417
438
  justify-content: normal;
418
439
  }
440
+ .d-stack--xl-gap-100 {
441
+ --stack-gap: var(--dt-space-100);
442
+ }
443
+ .d-stack--xl-gap-200 {
444
+ --stack-gap: var(--dt-space-200);
445
+ }
446
+ .d-stack--xl-gap-300 {
447
+ --stack-gap: var(--dt-space-300);
448
+ }
449
+ .d-stack--xl-gap-400 {
450
+ --stack-gap: var(--dt-space-400);
451
+ }
452
+ .d-stack--xl-gap-450 {
453
+ --stack-gap: var(--dt-space-450);
454
+ }
455
+ .d-stack--xl-gap-500 {
456
+ --stack-gap: var(--dt-space-500);
457
+ }
458
+ .d-stack--xl-gap-600 {
459
+ --stack-gap: var(--dt-space-600);
460
+ }
419
461
  }
420
462
  @media screen and (max-width: 980px) {
421
- .d-stack--lg--column {
463
+ .d-stack--lg-column {
422
464
  --stack-direction: column;
423
465
  justify-content: flex-start;
424
466
  }
425
- .d-stack--lg--column-reverse {
467
+ .d-stack--lg-column-reverse {
426
468
  --stack-direction: column-reverse;
427
469
  justify-content: flex-start;
428
470
  }
429
- .d-stack--lg--row {
471
+ .d-stack--lg-row {
430
472
  --stack-direction: row;
431
473
  align-items: center;
432
474
  justify-content: normal;
433
475
  }
434
- .d-stack--lg--row-reverse {
476
+ .d-stack--lg-row-reverse {
435
477
  --stack-direction: row-reverse;
436
478
  align-items: center;
437
479
  justify-content: normal;
438
480
  }
481
+ .d-stack--lg-gap-100 {
482
+ --stack-gap: var(--dt-space-100);
483
+ }
484
+ .d-stack--lg-gap-200 {
485
+ --stack-gap: var(--dt-space-200);
486
+ }
487
+ .d-stack--lg-gap-300 {
488
+ --stack-gap: var(--dt-space-300);
489
+ }
490
+ .d-stack--lg-gap-400 {
491
+ --stack-gap: var(--dt-space-400);
492
+ }
493
+ .d-stack--lg-gap-450 {
494
+ --stack-gap: var(--dt-space-450);
495
+ }
496
+ .d-stack--lg-gap-500 {
497
+ --stack-gap: var(--dt-space-500);
498
+ }
499
+ .d-stack--lg-gap-600 {
500
+ --stack-gap: var(--dt-space-600);
501
+ }
439
502
  }
440
503
  @media screen and (max-width: 640px) {
441
- .d-stack--md--column {
504
+ .d-stack--md-column {
442
505
  --stack-direction: column;
443
506
  justify-content: flex-start;
444
507
  }
445
- .d-stack--md--column-reverse {
508
+ .d-stack--md-column-reverse {
446
509
  --stack-direction: column-reverse;
447
510
  justify-content: flex-start;
448
511
  }
449
- .d-stack--md--row {
512
+ .d-stack--md-row {
450
513
  --stack-direction: row;
451
514
  align-items: center;
452
515
  justify-content: normal;
453
516
  }
454
- .d-stack--md--row-reverse {
517
+ .d-stack--md-row-reverse {
455
518
  --stack-direction: row-reverse;
456
519
  align-items: center;
457
520
  justify-content: normal;
458
521
  }
522
+ .d-stack--md-gap-100 {
523
+ --stack-gap: var(--dt-space-100);
524
+ }
525
+ .d-stack--md-gap-200 {
526
+ --stack-gap: var(--dt-space-200);
527
+ }
528
+ .d-stack--md-gap-300 {
529
+ --stack-gap: var(--dt-space-300);
530
+ }
531
+ .d-stack--md-gap-400 {
532
+ --stack-gap: var(--dt-space-400);
533
+ }
534
+ .d-stack--md-gap-450 {
535
+ --stack-gap: var(--dt-space-450);
536
+ }
537
+ .d-stack--md-gap-500 {
538
+ --stack-gap: var(--dt-space-500);
539
+ }
540
+ .d-stack--md-gap-600 {
541
+ --stack-gap: var(--dt-space-600);
542
+ }
459
543
  }
460
544
  @media screen and (max-width: 480px) {
461
- .d-stack--sm--column {
545
+ .d-stack--sm-column {
462
546
  --stack-direction: column;
463
547
  justify-content: flex-start;
464
548
  }
465
- .d-stack--sm--column-reverse {
549
+ .d-stack--sm-column-reverse {
466
550
  --stack-direction: column-reverse;
467
551
  justify-content: flex-start;
468
552
  }
469
- .d-stack--sm--row {
553
+ .d-stack--sm-row {
470
554
  --stack-direction: row;
471
555
  align-items: center;
472
556
  justify-content: normal;
473
557
  }
474
- .d-stack--sm--row-reverse {
558
+ .d-stack--sm-row-reverse {
475
559
  --stack-direction: row-reverse;
476
560
  align-items: center;
477
561
  justify-content: normal;
478
562
  }
479
- }
480
- .d-stack--gap-100 {
481
- --stack-gap: var(--dt-space-100);
482
- }
483
- .d-stack--gap-200 {
484
- --stack-gap: var(--dt-space-200);
485
- }
486
- .d-stack--gap-300 {
487
- --stack-gap: var(--dt-space-300);
488
- }
489
- .d-stack--gap-400 {
490
- --stack-gap: var(--dt-space-400);
491
- }
492
- .d-stack--gap-450 {
493
- --stack-gap: var(--dt-space-450);
494
- }
495
- .d-stack--gap-500 {
496
- --stack-gap: var(--dt-space-500);
497
- }
498
- .d-stack--gap-600 {
499
- --stack-gap: var(--dt-space-600);
563
+ .d-stack--sm-gap-100 {
564
+ --stack-gap: var(--dt-space-100);
565
+ }
566
+ .d-stack--sm-gap-200 {
567
+ --stack-gap: var(--dt-space-200);
568
+ }
569
+ .d-stack--sm-gap-300 {
570
+ --stack-gap: var(--dt-space-300);
571
+ }
572
+ .d-stack--sm-gap-400 {
573
+ --stack-gap: var(--dt-space-400);
574
+ }
575
+ .d-stack--sm-gap-450 {
576
+ --stack-gap: var(--dt-space-450);
577
+ }
578
+ .d-stack--sm-gap-500 {
579
+ --stack-gap: var(--dt-space-500);
580
+ }
581
+ .d-stack--sm-gap-600 {
582
+ --stack-gap: var(--dt-space-600);
583
+ }
500
584
  }
501
585
  .dt-item-layout {
502
586
  display: flex;