@dialpad/dialtone 7.3.2 → 7.4.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 (10) hide show
  1. package/lib/build/less/components/toggle.less +106 -41
  2. package/lib/build/less/utilities/borders.less +21 -21
  3. package/lib/build/svg/v7/general/{x.svg → close.svg} +0 -0
  4. package/lib/dist/css/dialtone.css +155 -113
  5. package/lib/dist/css/dialtone.min.css +1 -1
  6. package/lib/dist/svg/v7/close.svg +1 -0
  7. package/lib/dist/vue/v7/Close.vue +3 -0
  8. package/package.json +1 -1
  9. package/lib/dist/svg/v7/x.svg +0 -1
  10. package/lib/dist/vue/v7/X.vue +0 -3
package/lib/build/less/components/toggle.less CHANGED
@@ -10,8 +10,11 @@
10
10
  //
11
11
  // TABLE OF CONTENTS
12
12
  // • BASE STYLE
13
- // • CHECKED STYLES
14
- // • DISABLED STYLES
13
+ // • TOGGLE VARIANTS
14
+ // • CHECKED TOGGLE
15
+ // • INDETERMINATE TOGGLE
16
+ // • FOCUSED TOGGLE
17
+ // • DISABLED TOGGLE
15
18
  //
16
19
  //
17
20
  // ============================================================================
@@ -20,81 +23,143 @@
20
23
  .d-toggle {
21
24
  // Component specific CSS Vars
22
25
  // ------------------------------------------------------------------------
23
- --toggle--ta: var(--ttf-in-out);
26
+ --toggle-ta: var(--ttf-in-out);
24
27
  --toggle-ts: var(--td200);
25
- --toggle-bc: var(--black-400);
28
+ --toggle-bgc: var(--black-400);
29
+ --toggle-height: var(--su24);
30
+ --toggle-width: var(--su48);
31
+ --toggle-icon-size: var(--su16);
26
32
 
33
+ // $$ BASE STYLE
34
+ // ----------------------------------------------------------------------------
27
35
  position: relative;
28
36
  display: inline-block;
29
37
  box-sizing: border-box;
30
- width: var(--su48);
31
- height: var(--su24);
38
+ width: var(--toggle-width);
39
+ height: var(--toggle-height);
32
40
  padding: 0;
33
41
  line-height: var(--lh4);
34
42
  vertical-align: middle;
35
- background-color: var(--toggle-bc);
36
- border: var(--su1) solid var(--toggle-bc);
37
- border-radius: var(--su48);
43
+ background-color: var(--toggle-bgc);
44
+ border: var(--su1) solid var(--toggle-bgc);
45
+ border-radius: var(--toggle-width);
38
46
  cursor: pointer;
39
47
 
40
- &-copy {
41
- margin-right: var(--su6);
42
- }
43
-
44
48
  &__inner {
45
49
  position: absolute;
46
50
  top: calc(var(--su4) - var(--su1));
47
51
  left: var(--su24);
48
- width: var(--su16);
49
- height: var(--su16);
52
+ width: var(--toggle-icon-size);
53
+ height: var(--toggle-icon-size);
54
+
55
+ .d-toggle--small & {
56
+ top: var(--su1);
57
+ left: calc(var(--su16) + var(--su1));
58
+ }
59
+
60
+ .d-toggle--indeterminate & {
61
+ display: none;
62
+ }
63
+
50
64
  color: var(--white);
51
- background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3e%3cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill='%23fff' /%3e%3c/svg%3e");
65
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjM4MTI4IDUuMzgxMjhDNS43MjI5OSA1LjAzOTU3IDYuMjc3MDEgNS4wMzk1NyA2LjYxODcyIDUuMzgxMjhMMTIgMTAuNzYyNkwxNy4zODEzIDUuMzgxMjhDMTcuNzIzIDUuMDM5NTcgMTguMjc3IDUuMDM5NTcgMTguNjE4NyA1LjM4MTI4QzE4Ljk2MDQgNS43MjI5OSAxOC45NjA0IDYuMjc3MDEgMTguNjE4NyA2LjYxODcyTDEzLjIzNzQgMTJMMTguNjE4NyAxNy4zODEzQzE4Ljk2MDQgMTcuNzIzIDE4Ljk2MDQgMTguMjc3IDE4LjYxODcgMTguNjE4N0MxOC4yNzcgMTguOTYwNCAxNy43MjMgMTguOTYwNCAxNy4zODEzIDE4LjYxODdMMTIgMTMuMjM3NEw2LjYxODcyIDE4LjYxODdDNi4yNzcwMSAxOC45NjA0IDUuNzIyOTkgMTguOTYwNCA1LjM4MTI4IDE4LjYxODdDNS4wMzk1NyAxOC4yNzcgNS4wMzk1NyAxNy43MjMgNS4zODEyOCAxNy4zODEzTDEwLjc2MjYgMTJMNS4zODEyOCA2LjYxODcyQzUuMDM5NTcgNi4yNzcwMSA1LjAzOTU3IDUuNzIyOTkgNS4zODEyOCA1LjM4MTI4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
52
66
  background-repeat: no-repeat;
67
+ background-size: cover;
53
68
  }
54
69
 
55
70
  &::after {
56
71
  position: absolute;
57
72
  top: var(--su1);
58
73
  left: var(--su1);
59
- width: calc(var(--su16) + var(--su4));
60
- height: calc(var(--su16) + var(--su4));
74
+ width: calc(var(--toggle-icon-size) + var(--su4));
75
+ height: calc(var(--toggle-icon-size) + var(--su4));
61
76
  background-color: var(--white);
62
77
  border-radius: var(--br-circle);
63
78
  cursor: pointer;
64
- transition: left var(--toggle-ts) var(--toggle--ta);
79
+ transition: left var(--toggle-ts) var(--toggle-ta);
65
80
  content: ' ';
66
81
  }
67
82
 
68
- &:focus-visible {
69
- outline: none;
70
- box-shadow: var(--bs-focus-ring);
83
+ // $$ TOGGLE VARIANTS
84
+ // ----------------------------------------------------------------------------
85
+ &--small {
86
+ --toggle-height: calc(var(--su16) + var(--su2));
87
+ --toggle-width: calc(var(--su32) + var(--su4));
88
+ --toggle-icon-size: calc(var(--su12) + var(--su2));
89
+
90
+ &::before {
91
+ position: absolute;
92
+ top: calc(var(--su4) * -1);
93
+ right: 0;
94
+ bottom: calc(var(--su4) * -1);
95
+ left: 0;
96
+ content: '';
97
+ }
71
98
  }
72
- }
73
99
 
74
- // $$ CHECKED TOGGLE
75
- // ----------------------------------------------------------------------------
76
- .d-toggle--checked {
77
- --toggle-bc: var(--primary-color);
100
+ &--small::after {
101
+ width: var(--toggle-icon-size);
102
+ height: var(--toggle-icon-size);
103
+ }
104
+
105
+ // $$ CHECKED TOGGLE
106
+ // ----------------------------------------------------------------------------
107
+ &--checked {
108
+ --toggle-bgc: var(--primary-color);
109
+
110
+ .d-toggle__inner {
111
+ left: var(--su6);
112
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC42MTg3IDUuMzgxMjhDMjAuOTYwNCA1LjcyMjk5IDIwLjk2MDQgNi4yNzcwMSAyMC42MTg3IDYuNjE4NzJMOS42MTg3MiAxNy42MTg3QzkuMjc3MDEgMTcuOTYwNCA4LjcyMjk5IDE3Ljk2MDQgOC4zODEyOCAxNy42MTg3TDMuMzgxMjggMTIuNjE4N0MzLjAzOTU3IDEyLjI3NyAzLjAzOTU3IDExLjcyMyAzLjM4MTI4IDExLjM4MTNDMy43MjI5OSAxMS4wMzk2IDQuMjc3MDEgMTEuMDM5NiA0LjYxODcyIDExLjM4MTNMOSAxNS43NjI2TDE5LjM4MTMgNS4zODEyOEMxOS43MjMgNS4wMzk1NyAyMC4yNzcgNS4wMzk1NyAyMC42MTg3IDUuMzgxMjhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
113
+ }
78
114
 
79
- .d-toggle__inner {
80
- left: var(--su6);
81
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
115
+ &.d-toggle--small .d-toggle__inner {
116
+ left: calc(var(--su2) + var(--su1));
117
+ }
118
+
119
+ &::after {
120
+ left: calc(var(--su24) + var(--su1));
121
+ }
122
+
123
+ &.d-toggle--small::after {
124
+ right: var(--su1);
125
+ left: auto;
126
+ }
82
127
  }
83
128
 
84
- &::after {
85
- left: calc(var(--su24) + var(--su1));
129
+ // $$ INDETERMINATE TOGGLE
130
+ // ----------------------------------------------------------------------------
131
+ &--indeterminate {
132
+ &__inner {
133
+ display: none;
134
+ }
135
+
136
+ &::after {
137
+ left: 50%;
138
+ transform: translate(-50%, 0);
139
+ }
86
140
  }
87
- }
88
141
 
89
- // $$ DISABLED TOGGLE
90
- // ----------------------------------------------------------------------------
91
- .d-toggle--disabled,
92
- .d-toggle[disabled] {
93
- cursor: not-allowed;
94
- opacity: 0.5;
142
+ // $$ FOCUSED TOGGLE
143
+ // ----------------------------------------------------------------------------
144
+ &:focus-visible {
145
+ outline: none;
146
+ box-shadow: var(--bs-focus-ring);
147
+ }
95
148
 
96
- &::after {
149
+ // $$ DISABLED TOGGLE
150
+ // ----------------------------------------------------------------------------
151
+ &--disabled,
152
+ &[disabled] {
97
153
  cursor: not-allowed;
98
- transition-property: none;
154
+ opacity: 0.5;
155
+
156
+ &::after {
157
+ cursor: not-allowed;
158
+ transition-property: none;
159
+ }
99
160
  }
100
161
  }
162
+
163
+ .d-toggle-group {
164
+ gap: var(--su8);
165
+ }
package/lib/build/less/utilities/borders.less CHANGED
@@ -32,11 +32,11 @@
32
32
 
33
33
  // $$ DIRECTION
34
34
  // ----------------------------------------------------------------------------
35
- .d-ba { border: var(--su1) solid currentColor !important; }
36
- .d-bt { border-top: var(--su1) solid currentColor !important; }
37
- .d-br { border-right: var(--su1) solid currentColor !important; }
38
- .d-bb { border-bottom: var(--su1) solid currentColor !important; }
39
- .d-bl { border-left: var(--su1) solid currentColor !important; }
35
+ .d-ba { border: var(--su1) solid !important; }
36
+ .d-bt { border-top: var(--su1) solid !important; }
37
+ .d-br { border-right: var(--su1) solid !important; }
38
+ .d-bb { border-bottom: var(--su1) solid !important; }
39
+ .d-bl { border-left: var(--su1) solid !important; }
40
40
  .d-bx { .d-br(); .d-bl(); }
41
41
  .d-by { .d-bt(); .d-bb(); }
42
42
  .d-ba-none { border: none !important; }
@@ -173,29 +173,29 @@
173
173
  .d-divide-y > * + * {
174
174
  --divide-y-reverse: 0;
175
175
 
176
- border-top: calc(~'1px * (1 - var(--divide-y-reverse))') solid currentColor !important;
177
- border-bottom: calc(~'1px * var(--divide-y-reverse)') solid currentColor !important;
176
+ border-top: calc(~'1px * (1 - var(--divide-y-reverse))') solid !important;
177
+ border-bottom: calc(~'1px * var(--divide-y-reverse)') solid !important;
178
178
  }
179
179
 
180
180
  .d-divide-y0 > * + * {
181
181
  --divide-y-reverse: 0;
182
182
 
183
- border-top: calc(~'0 * (1 - var(--divide-y-reverse))') solid currentColor !important;
184
- border-bottom: calc(~'0 * var(--divide-y-reverse)') solid currentColor !important;
183
+ border-top: calc(~'0 * (1 - var(--divide-y-reverse))') solid !important;
184
+ border-bottom: calc(~'0 * var(--divide-y-reverse)') solid !important;
185
185
  }
186
186
 
187
187
  .d-divide-y2 > * + * {
188
188
  --divide-y-reverse: 0;
189
189
 
190
- border-top: calc(~'2px * (1 - var(--divide-y-reverse))') solid currentColor !important;
191
- border-bottom: calc(~'2px * var(--divide-y-reverse)') solid currentColor !important;
190
+ border-top: calc(~'2px * (1 - var(--divide-y-reverse))') solid !important;
191
+ border-bottom: calc(~'2px * var(--divide-y-reverse)') solid !important;
192
192
  }
193
193
 
194
194
  .d-divide-y4 > * + * {
195
195
  --divide-y-reverse: 0;
196
196
 
197
- border-top: calc(~'4px * (1 - var(--divide-y-reverse))') solid currentColor !important;
198
- border-bottom: calc(~'4px * var(--divide-y-reverse)') solid currentColor !important;
197
+ border-top: calc(~'4px * (1 - var(--divide-y-reverse))') solid !important;
198
+ border-bottom: calc(~'4px * var(--divide-y-reverse)') solid !important;
199
199
  }
200
200
  .d-divide-y-reverse > * + * { --divide-y-reverse: 1; }
201
201
 
@@ -204,28 +204,28 @@
204
204
  .d-divide-x > * + * {
205
205
  --divide-x-reverse: 0;
206
206
 
207
- border-right: calc(~'1px * var(--divide-x-reverse)') solid currentColor !important;
208
- border-left: calc(~'1px * (1 - var(--divide-x-reverse))') solid currentColor !important;
207
+ border-right: calc(~'1px * var(--divide-x-reverse)') solid !important;
208
+ border-left: calc(~'1px * (1 - var(--divide-x-reverse))') solid !important;
209
209
  }
210
210
 
211
211
  .d-divide-x0 > * + * {
212
212
  --divide-x-reverse: 0;
213
213
 
214
- border-right: calc(~'0 * var(--divide-x-reverse)') solid currentColor !important;
215
- border-left: calc(~'0 * (1 - var(--divide-x-reverse))') solid currentColor !important;
214
+ border-right: calc(~'0 * var(--divide-x-reverse)') solid !important;
215
+ border-left: calc(~'0 * (1 - var(--divide-x-reverse))') solid !important;
216
216
  }
217
217
 
218
218
  .d-divide-x2 > * + * {
219
219
  --divide-x-reverse: 0;
220
220
 
221
- border-right: calc(~'2px * var(--divide-x-reverse)') solid currentColor !important;
222
- border-left: calc(~'2px * (1 - var(--divide-x-reverse))') solid currentColor !important;
221
+ border-right: calc(~'2px * var(--divide-x-reverse)') solid !important;
222
+ border-left: calc(~'2px * (1 - var(--divide-x-reverse))') solid !important;
223
223
  }
224
224
 
225
225
  .d-divide-x4 > * + * {
226
226
  --divide-x-reverse: 0;
227
227
 
228
- border-right: calc(~'4px * var(--divide-x-reverse)') solid currentColor !important;
229
- border-left: calc(~'4px * (1 - var(--divide-x-reverse))') solid currentColor !important;
228
+ border-right: calc(~'4px * var(--divide-x-reverse)') solid !important;
229
+ border-left: calc(~'4px * (1 - var(--divide-x-reverse))') solid !important;
230
230
  }
231
231
  .d-divide-x-reverse > * + * { --divide-x-reverse: 1; }
package/lib/build/svg/v7/general/{x.svg → close.svg} RENAMED
File without changes