@dialpad/dialtone 7.3.2 → 7.4.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/toggle.less +106 -41
  2. package/lib/dist/css/dialtone.css +66 -24
  3. package/lib/dist/css/dialtone.min.css +1 -1
  4. package/package.json +1 -1
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/dist/css/dialtone.css CHANGED
@@ -3305,65 +3305,104 @@ legend .d-label {
3305
3305
  bottom: var(--su8);
3306
3306
  }
3307
3307
  .d-toggle {
3308
- --toggle--ta: var(--ttf-in-out);
3308
+ --toggle-ta: var(--ttf-in-out);
3309
3309
  --toggle-ts: var(--td200);
3310
- --toggle-bc: var(--black-400);
3310
+ --toggle-bgc: var(--black-400);
3311
+ --toggle-height: var(--su24);
3312
+ --toggle-width: var(--su48);
3313
+ --toggle-icon-size: var(--su16);
3311
3314
  position: relative;
3312
3315
  display: inline-block;
3313
3316
  box-sizing: border-box;
3314
- width: var(--su48);
3315
- height: var(--su24);
3317
+ width: var(--toggle-width);
3318
+ height: var(--toggle-height);
3316
3319
  padding: 0;
3317
3320
  line-height: var(--lh4);
3318
3321
  vertical-align: middle;
3319
- background-color: var(--toggle-bc);
3320
- border: var(--su1) solid var(--toggle-bc);
3321
- border-radius: var(--su48);
3322
+ background-color: var(--toggle-bgc);
3323
+ border: var(--su1) solid var(--toggle-bgc);
3324
+ border-radius: var(--toggle-width);
3322
3325
  cursor: pointer;
3323
3326
  }
3324
- .d-toggle-copy {
3325
- margin-right: var(--su6);
3326
- }
3327
3327
  .d-toggle__inner {
3328
3328
  position: absolute;
3329
3329
  top: calc(var(--su4) - var(--su1));
3330
3330
  left: var(--su24);
3331
- width: var(--su16);
3332
- height: var(--su16);
3331
+ width: var(--toggle-icon-size);
3332
+ height: var(--toggle-icon-size);
3333
3333
  color: var(--white);
3334
- 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");
3334
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjM4MTI4IDUuMzgxMjhDNS43MjI5OSA1LjAzOTU3IDYuMjc3MDEgNS4wMzk1NyA2LjYxODcyIDUuMzgxMjhMMTIgMTAuNzYyNkwxNy4zODEzIDUuMzgxMjhDMTcuNzIzIDUuMDM5NTcgMTguMjc3IDUuMDM5NTcgMTguNjE4NyA1LjM4MTI4QzE4Ljk2MDQgNS43MjI5OSAxOC45NjA0IDYuMjc3MDEgMTguNjE4NyA2LjYxODcyTDEzLjIzNzQgMTJMMTguNjE4NyAxNy4zODEzQzE4Ljk2MDQgMTcuNzIzIDE4Ljk2MDQgMTguMjc3IDE4LjYxODcgMTguNjE4N0MxOC4yNzcgMTguOTYwNCAxNy43MjMgMTguOTYwNCAxNy4zODEzIDE4LjYxODdMMTIgMTMuMjM3NEw2LjYxODcyIDE4LjYxODdDNi4yNzcwMSAxOC45NjA0IDUuNzIyOTkgMTguOTYwNCA1LjM4MTI4IDE4LjYxODdDNS4wMzk1NyAxOC4yNzcgNS4wMzk1NyAxNy43MjMgNS4zODEyOCAxNy4zODEzTDEwLjc2MjYgMTJMNS4zODEyOCA2LjYxODcyQzUuMDM5NTcgNi4yNzcwMSA1LjAzOTU3IDUuNzIyOTkgNS4zODEyOCA1LjM4MTI4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
3335
3335
  background-repeat: no-repeat;
3336
+ background-size: cover;
3337
+ }
3338
+ .d-toggle--small .d-toggle__inner {
3339
+ top: var(--su1);
3340
+ left: calc(var(--su16) + var(--su1));
3341
+ }
3342
+ .d-toggle--indeterminate .d-toggle__inner {
3343
+ display: none;
3336
3344
  }
3337
3345
  .d-toggle::after {
3338
3346
  position: absolute;
3339
3347
  top: var(--su1);
3340
3348
  left: var(--su1);
3341
- width: calc(var(--su16) + var(--su4));
3342
- height: calc(var(--su16) + var(--su4));
3349
+ width: calc(var(--toggle-icon-size) + var(--su4));
3350
+ height: calc(var(--toggle-icon-size) + var(--su4));
3343
3351
  background-color: var(--white);
3344
3352
  border-radius: var(--br-circle);
3345
3353
  cursor: pointer;
3346
- transition: left var(--toggle-ts) var(--toggle--ta);
3354
+ transition: left var(--toggle-ts) var(--toggle-ta);
3347
3355
  content: ' ';
3348
3356
  }
3349
- .d-toggle.focus-visible.js-focus-visible, .js-focus-visible .d-toggle.focus-visible {
3350
- outline: none;
3351
- box-shadow: var(--bs-focus-ring);
3357
+ .d-toggle--small {
3358
+ --toggle-height: calc(var(--su16) + var(--su2));
3359
+ --toggle-width: calc(var(--su32) + var(--su4));
3360
+ --toggle-icon-size: calc(var(--su12) + var(--su2));
3352
3361
  }
3353
- .d-toggle:focus-visible {
3354
- outline: none;
3355
- box-shadow: var(--bs-focus-ring);
3362
+ .d-toggle--small::before {
3363
+ position: absolute;
3364
+ top: calc(var(--su4) * -1);
3365
+ right: 0;
3366
+ bottom: calc(var(--su4) * -1);
3367
+ left: 0;
3368
+ content: '';
3369
+ }
3370
+ .d-toggle--small::after {
3371
+ width: var(--toggle-icon-size);
3372
+ height: var(--toggle-icon-size);
3356
3373
  }
3357
3374
  .d-toggle--checked {
3358
- --toggle-bc: var(--primary-color);
3375
+ --toggle-bgc: var(--primary-color);
3359
3376
  }
3360
3377
  .d-toggle--checked .d-toggle__inner {
3361
3378
  left: var(--su6);
3362
- 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");
3379
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC42MTg3IDUuMzgxMjhDMjAuOTYwNCA1LjcyMjk5IDIwLjk2MDQgNi4yNzcwMSAyMC42MTg3IDYuNjE4NzJMOS42MTg3MiAxNy42MTg3QzkuMjc3MDEgMTcuOTYwNCA4LjcyMjk5IDE3Ljk2MDQgOC4zODEyOCAxNy42MTg3TDMuMzgxMjggMTIuNjE4N0MzLjAzOTU3IDEyLjI3NyAzLjAzOTU3IDExLjcyMyAzLjM4MTI4IDExLjM4MTNDMy43MjI5OSAxMS4wMzk2IDQuMjc3MDEgMTEuMDM5NiA0LjYxODcyIDExLjM4MTNMOSAxNS43NjI2TDE5LjM4MTMgNS4zODEyOEMxOS43MjMgNS4wMzk1NyAyMC4yNzcgNS4wMzk1NyAyMC42MTg3IDUuMzgxMjhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
3380
+ }
3381
+ .d-toggle--checked.d-toggle--small .d-toggle__inner {
3382
+ left: calc(var(--su2) + var(--su1));
3363
3383
  }
3364
3384
  .d-toggle--checked::after {
3365
3385
  left: calc(var(--su24) + var(--su1));
3366
3386
  }
3387
+ .d-toggle--checked.d-toggle--small::after {
3388
+ right: var(--su1);
3389
+ left: auto;
3390
+ }
3391
+ .d-toggle--indeterminate__inner {
3392
+ display: none;
3393
+ }
3394
+ .d-toggle--indeterminate::after {
3395
+ left: 50%;
3396
+ transform: translate(-50%, 0);
3397
+ }
3398
+ .d-toggle.focus-visible.js-focus-visible, .js-focus-visible .d-toggle.focus-visible {
3399
+ outline: none;
3400
+ box-shadow: var(--bs-focus-ring);
3401
+ }
3402
+ .d-toggle:focus-visible {
3403
+ outline: none;
3404
+ box-shadow: var(--bs-focus-ring);
3405
+ }
3367
3406
  .d-toggle--disabled,
3368
3407
  .d-toggle[disabled] {
3369
3408
  cursor: not-allowed;
@@ -3374,6 +3413,9 @@ legend .d-label {
3374
3413
  cursor: not-allowed;
3375
3414
  transition-property: none;
3376
3415
  }
3416
+ .d-toggle-group {
3417
+ gap: var(--su8);
3418
+ }
3377
3419
  .d-presence {
3378
3420
  --color-border-base: var(--black-100);
3379
3421
  --color-border-offline: var(--black-400);