@dialpad/dialtone 7.5.0 → 7.7.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 (4) hide show
  1. package/lib/build/less/components/avatar.less +34 -23
  2. package/lib/dist/css/dialtone.css +31 -22
  3. package/lib/dist/css/dialtone.min.css +1 -1
  4. package/package.json +3 -2
package/lib/build/less/components/avatar.less CHANGED
@@ -20,7 +20,9 @@
20
20
  // ------------------------------------------------------------------------
21
21
  --avatar--fc: var(--fc-tertiary);
22
22
  --avatar--bgc: var(--fc-primary);
23
- --avatar--size: var(--su12);
23
+ --avatar--size: var(--su24);
24
+ --presence-position-right: var(--sun2);
25
+ --presence-position-bottom: var(--sun2);
24
26
 
25
27
  position: relative;
26
28
  width: var(--avatar--size);
@@ -36,103 +38,112 @@
36
38
  border-radius: inherit;
37
39
  }
38
40
 
41
+ &__presence {
42
+ position: absolute;
43
+ right: var(--presence-position-right);
44
+ bottom: var(--presence-position-bottom);
45
+ display: flex;
46
+ }
47
+
39
48
  // -- SIZES
40
49
  // ------------------------------------------------------------------------
41
- &.d-avatar--sm {
42
- --avatar--size: var(--su24);
43
- }
50
+ //&--sm {}
44
51
 
45
- &.d-avatar--md {
52
+ &--md {
46
53
  --avatar--size: var(--su32);
54
+ --presence-position-right: var(--sun1);
55
+ --presence-position-bottom: var(--sun1);
47
56
  }
48
57
 
49
- &.d-avatar--lg {
58
+ &--lg {
50
59
  --avatar--size: var(--su48);
60
+ --presence-position-right: var(--su1);
61
+ --presence-position-bottom: var(--su1);
51
62
  }
52
63
 
53
64
  // -- COLORS
54
65
  // ------------------------------------------------------------------------
55
- &.d-avatar--purple-600 {
66
+ &--purple-600 {
56
67
  --avatar--fc: var(--white);
57
68
  --avatar--bgc: var(--purple-600);
58
69
  }
59
70
 
60
- &.d-avatar--purple-500 {
71
+ &--purple-500 {
61
72
  --avatar--fc: var(--white);
62
73
  --avatar--bgc: var(--purple-500);
63
74
  }
64
75
 
65
- &.d-avatar--purple-400 {
76
+ &--purple-400 {
66
77
  --avatar--fc: var(--white);
67
78
  --avatar--bgc: var(--purple-400);
68
79
  }
69
80
 
70
- &.d-avatar--purple-300 {
81
+ &--purple-300 {
71
82
  --avatar--fc: var(--purple-600);
72
83
  --avatar--bgc: var(--purple-300);
73
84
  }
74
85
 
75
- &.d-avatar--purple-200 {
86
+ &--purple-200 {
76
87
  --avatar--fc: var(--purple-600);
77
88
  --avatar--bgc: var(--purple-200);
78
89
  }
79
90
 
80
- &.d-avatar--orange-500 {
91
+ &--orange-500 {
81
92
  --avatar--fc: var(--white);
82
93
  --avatar--bgc: var(--orange-500);
83
94
  }
84
95
 
85
- &.d-avatar--orange-400 {
96
+ &--orange-400 {
86
97
  --avatar--fc: var(--orange-600);
87
98
  --avatar--bgc: var(--orange-400);
88
99
  }
89
100
 
90
- &.d-avatar--orange-300 {
101
+ &--orange-300 {
91
102
  --avatar--fc: var(--orange-600);
92
103
  --avatar--bgc: var(--orange-300);
93
104
  }
94
105
 
95
- &.d-avatar--orange-200 {
106
+ &--orange-200 {
96
107
  --avatar--fc: var(--orange-600);
97
108
  --avatar--bgc: var(--orange-200);
98
109
  }
99
110
 
100
- &.d-avatar--magenta-400 {
111
+ &--magenta-400 {
101
112
  --avatar--fc: var(--white);
102
113
  --avatar--bgc: var(--magenta-400);
103
114
  }
104
115
 
105
- &.d-avatar--magenta-300 {
116
+ &--magenta-300 {
106
117
  --avatar--fc: var(--white);
107
118
  --avatar--bgc: var(--magenta-300);
108
119
  }
109
120
 
110
- &.d-avatar--magenta-200 {
121
+ &--magenta-200 {
111
122
  --avatar--fc: var(--magenta-500);
112
123
  --avatar--bgc: var(--magenta-200);
113
124
  }
114
125
 
115
- &.d-avatar--magenta-100 {
126
+ &--magenta-100 {
116
127
  --avatar--fc: var(--magenta-500);
117
128
  --avatar--bgc: var(--magenta-100);
118
129
  }
119
130
 
120
- &.d-avatar--gold-500 {
131
+ &--gold-500 {
121
132
  --avatar--fc: var(--white);
122
133
  --avatar--bgc: var(--gold-500);
123
134
  }
124
135
 
125
- &.d-avatar--gold-300 {
136
+ &--gold-300 {
126
137
  --avatar--fc: var(--gold-500);
127
138
  --avatar--bgc: var(--gold-300);
128
139
  }
129
140
 
130
- &.d-avatar--gold-200 {
141
+ &--gold-200 {
131
142
  --avatar--fc: var(--gold-500);
132
143
  --avatar--bgc: var(--gold-200);
133
144
  }
134
145
 
135
- &.d-avatar--gold-100 {
146
+ &--gold-100 {
136
147
  --avatar--fc: var(--gold-500);
137
148
  --avatar--bgc: var(--gold-100);
138
149
  }
package/lib/dist/css/dialtone.css CHANGED
@@ -449,7 +449,9 @@ body {
449
449
  .d-avatar {
450
450
  --avatar--fc: var(--fc-tertiary);
451
451
  --avatar--bgc: var(--fc-primary);
452
- --avatar--size: var(--su12);
452
+ --avatar--size: var(--su24);
453
+ --presence-position-right: var(--sun2);
454
+ --presence-position-bottom: var(--sun2);
453
455
  position: relative;
454
456
  width: var(--avatar--size);
455
457
  height: var(--avatar--size);
@@ -463,80 +465,87 @@ body {
463
465
  object-fit: cover;
464
466
  border-radius: inherit;
465
467
  }
466
- .d-avatar.d-avatar--sm {
467
- --avatar--size: var(--su24);
468
+ .d-avatar__presence {
469
+ position: absolute;
470
+ right: var(--presence-position-right);
471
+ bottom: var(--presence-position-bottom);
472
+ display: flex;
468
473
  }
469
- .d-avatar.d-avatar--md {
474
+ .d-avatar--md {
470
475
  --avatar--size: var(--su32);
476
+ --presence-position-right: var(--sun1);
477
+ --presence-position-bottom: var(--sun1);
471
478
  }
472
- .d-avatar.d-avatar--lg {
479
+ .d-avatar--lg {
473
480
  --avatar--size: var(--su48);
481
+ --presence-position-right: var(--su1);
482
+ --presence-position-bottom: var(--su1);
474
483
  }
475
- .d-avatar.d-avatar--purple-600 {
484
+ .d-avatar--purple-600 {
476
485
  --avatar--fc: var(--white);
477
486
  --avatar--bgc: var(--purple-600);
478
487
  }
479
- .d-avatar.d-avatar--purple-500 {
488
+ .d-avatar--purple-500 {
480
489
  --avatar--fc: var(--white);
481
490
  --avatar--bgc: var(--purple-500);
482
491
  }
483
- .d-avatar.d-avatar--purple-400 {
492
+ .d-avatar--purple-400 {
484
493
  --avatar--fc: var(--white);
485
494
  --avatar--bgc: var(--purple-400);
486
495
  }
487
- .d-avatar.d-avatar--purple-300 {
496
+ .d-avatar--purple-300 {
488
497
  --avatar--fc: var(--purple-600);
489
498
  --avatar--bgc: var(--purple-300);
490
499
  }
491
- .d-avatar.d-avatar--purple-200 {
500
+ .d-avatar--purple-200 {
492
501
  --avatar--fc: var(--purple-600);
493
502
  --avatar--bgc: var(--purple-200);
494
503
  }
495
- .d-avatar.d-avatar--orange-500 {
504
+ .d-avatar--orange-500 {
496
505
  --avatar--fc: var(--white);
497
506
  --avatar--bgc: var(--orange-500);
498
507
  }
499
- .d-avatar.d-avatar--orange-400 {
508
+ .d-avatar--orange-400 {
500
509
  --avatar--fc: var(--orange-600);
501
510
  --avatar--bgc: var(--orange-400);
502
511
  }
503
- .d-avatar.d-avatar--orange-300 {
512
+ .d-avatar--orange-300 {
504
513
  --avatar--fc: var(--orange-600);
505
514
  --avatar--bgc: var(--orange-300);
506
515
  }
507
- .d-avatar.d-avatar--orange-200 {
516
+ .d-avatar--orange-200 {
508
517
  --avatar--fc: var(--orange-600);
509
518
  --avatar--bgc: var(--orange-200);
510
519
  }
511
- .d-avatar.d-avatar--magenta-400 {
520
+ .d-avatar--magenta-400 {
512
521
  --avatar--fc: var(--white);
513
522
  --avatar--bgc: var(--magenta-400);
514
523
  }
515
- .d-avatar.d-avatar--magenta-300 {
524
+ .d-avatar--magenta-300 {
516
525
  --avatar--fc: var(--white);
517
526
  --avatar--bgc: var(--magenta-300);
518
527
  }
519
- .d-avatar.d-avatar--magenta-200 {
528
+ .d-avatar--magenta-200 {
520
529
  --avatar--fc: var(--magenta-500);
521
530
  --avatar--bgc: var(--magenta-200);
522
531
  }
523
- .d-avatar.d-avatar--magenta-100 {
532
+ .d-avatar--magenta-100 {
524
533
  --avatar--fc: var(--magenta-500);
525
534
  --avatar--bgc: var(--magenta-100);
526
535
  }
527
- .d-avatar.d-avatar--gold-500 {
536
+ .d-avatar--gold-500 {
528
537
  --avatar--fc: var(--white);
529
538
  --avatar--bgc: var(--gold-500);
530
539
  }
531
- .d-avatar.d-avatar--gold-300 {
540
+ .d-avatar--gold-300 {
532
541
  --avatar--fc: var(--gold-500);
533
542
  --avatar--bgc: var(--gold-300);
534
543
  }
535
- .d-avatar.d-avatar--gold-200 {
544
+ .d-avatar--gold-200 {
536
545
  --avatar--fc: var(--gold-500);
537
546
  --avatar--bgc: var(--gold-200);
538
547
  }
539
- .d-avatar.d-avatar--gold-100 {
548
+ .d-avatar--gold-100 {
540
549
  --avatar--fc: var(--gold-500);
541
550
  --avatar--bgc: var(--gold-100);
542
551
  }