@dialpad/dialtone-css 8.41.0 → 8.42.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.
Files changed (18) hide show
  1. package/lib/build/less/components/emoji-text-wrapper.less +0 -5
  2. package/lib/build/less/components/emoji.less +8 -0
  3. package/lib/build/less/components/stack.less +51 -16
  4. package/lib/dist/dialtone-default-theme.css +178 -92
  5. package/lib/dist/dialtone-default-theme.min.css +1 -1
  6. package/lib/dist/dialtone.css +129 -43
  7. package/lib/dist/dialtone.min.css +1 -1
  8. package/lib/dist/tokens/tokens-base-dark.css +5 -5
  9. package/lib/dist/tokens/tokens-base-light.css +5 -5
  10. package/lib/dist/tokens/tokens-dp-dark.css +44 -44
  11. package/lib/dist/tokens/tokens-dp-light.css +44 -44
  12. package/lib/dist/tokens/tokens-expressive-dark.css +50 -50
  13. package/lib/dist/tokens/tokens-expressive-light.css +50 -50
  14. package/lib/dist/tokens/tokens-expressive-sm-dark.css +50 -50
  15. package/lib/dist/tokens/tokens-expressive-sm-light.css +50 -50
  16. package/lib/dist/tokens/tokens-tmo-dark.css +44 -44
  17. package/lib/dist/tokens/tokens-tmo-light.css +44 -44
  18. package/package.json +2 -2
package/lib/build/less/components/emoji-text-wrapper.less CHANGED
@@ -1,14 +1,9 @@
1
1
  .d-emoji-text-wrapper {
2
2
  .d-emoji {
3
- position: relative;
4
3
  height: 1em;
5
- vertical-align: middle;
6
4
 
7
5
  .d-icon {
8
- position: absolute;
9
6
  top: calc(50% - 1px);
10
- display: block;
11
- transform: translateY(-50%);
12
7
  }
13
8
  }
14
9
  }
package/lib/build/less/components/emoji.less CHANGED
@@ -1,4 +1,12 @@
1
1
  .d-emoji {
2
+ position: relative;
2
3
  display: inline-block;
3
4
  vertical-align: middle;
5
+
6
+ .d-icon {
7
+ position: absolute;
8
+ top: 50%;
9
+ display: block;
10
+ transform: translateY(-50%);
11
+ }
4
12
  }
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); }