@dialpad/dialtone 6.12.0 → 6.13.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 (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/lib/build/less/components/button.less +0 -2
  3. package/lib/build/less/components/toggle.less +96 -0
  4. package/lib/build/less/dialtone.less +1 -0
  5. package/lib/dist/css/dialtone.css +67 -2
  6. package/lib/dist/css/dialtone.min.css +1 -1
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # [6.13.0](https://github.com/dialpad/dialtone/compare/v6.12.0...v6.13.0) (2022-01-21)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **button:** loading spinner off center ([#532](https://github.com/dialpad/dialtone/issues/532)) ([9595374](https://github.com/dialpad/dialtone/commit/9595374fadea5c006f0146b9691ea4e06d85a4ea))
7
+
8
+
9
+ ### Features
10
+
11
+ * add toggle styles ([#533](https://github.com/dialpad/dialtone/issues/533)) ([4aeeece](https://github.com/dialpad/dialtone/commit/4aeeecea4748d56003d1242980af1b438620fdcb))
12
+
1
13
  # [6.12.0](https://github.com/dialpad/dialtone/compare/v6.11.0...v6.12.0) (2022-01-13)
2
14
 
3
15
 
package/lib/build/less/components/button.less CHANGED
@@ -431,8 +431,6 @@
431
431
  // Show the loading animation
432
432
  &::before {
433
433
  position: absolute;
434
- top: calc(50% - var(--su8));
435
- left: calc(50% - var(--su8));
436
434
  width: var(--su16);
437
435
  height: var(--su16);
438
436
  border: var(--su2) solid currentColor;
package/lib/build/less/components/toggle.less ADDED
@@ -0,0 +1,96 @@
1
+ //@import (reference) '../variables/icons.less';
2
+
3
+ //
4
+ // DIALTONE
5
+ // COMPONENTS: TOGGLE
6
+ //
7
+ // These are toggle classes for Dialpad's design system Dialtone.
8
+ // For further documentation of these and other classes,
9
+ // visit https://dialpad.design/components/toggle
10
+ //
11
+ // TABLE OF CONTENTS
12
+ // • BASE STYLE
13
+ // • CHECKED STYLES
14
+ // • DISABLED STYLES
15
+ //
16
+ //
17
+ // ============================================================================
18
+ // $ BASE STYLE
19
+ // ----------------------------------------------------------------------------
20
+ .d-toggle {
21
+ // Component specific CSS Vars
22
+ // ------------------------------------------------------------------------
23
+ --toggle--ta: var(--ttf-in-out);
24
+ --toggle-ts: var(--td200);
25
+ --toggle-bc: var(--black-200);
26
+
27
+ position: relative;
28
+ display: inline-block;
29
+ box-sizing: border-box;
30
+ width: var(--su48);
31
+ height: var(--su24);
32
+ padding: 0;
33
+ line-height: var(--lh4);
34
+ vertical-align: middle;
35
+ background-color: var(--toggle-bc);
36
+ border: var(--su1) solid var(--toggle-bc);
37
+ border-radius: var(--su48);
38
+ cursor: pointer;
39
+
40
+ &__inner {
41
+ position: absolute;
42
+ top: calc(var(--su4) - var(--su1));
43
+ left: var(--su24);
44
+ width: var(--su16);
45
+ height: var(--su16);
46
+ color: var(--white);
47
+ 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");
48
+ background-repeat: no-repeat;
49
+ }
50
+
51
+ &::after {
52
+ position: absolute;
53
+ top: var(--su1);
54
+ left: var(--su1);
55
+ width: calc(var(--su16) + var(--su4));
56
+ height: calc(var(--su16) + var(--su4));
57
+ background-color: var(--white);
58
+ border-radius: var(--br-circle);
59
+ cursor: pointer;
60
+ transition: left var(--toggle-ts) var(--toggle--ta);
61
+ content: ' ';
62
+ }
63
+
64
+ &:focus-visible {
65
+ outline: none;
66
+ box-shadow: var(--bs-focus-ring);
67
+ }
68
+ }
69
+
70
+ // $$ CHECKED TOGGLE
71
+ // ----------------------------------------------------------------------------
72
+ .d-toggle--checked {
73
+ --toggle-bc: var(--primary-color);
74
+
75
+ .d-toggle__inner {
76
+ left: var(--su6);
77
+ 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");
78
+ }
79
+
80
+ &::after {
81
+ left: calc(var(--su24) + var(--su1));
82
+ }
83
+ }
84
+
85
+ // $$ DISABLED TOGGLE
86
+ // ----------------------------------------------------------------------------
87
+ .d-toggle--disabled,
88
+ .d-toggle[disabled] {
89
+ cursor: not-allowed;
90
+ opacity: 0.5;
91
+
92
+ &::after {
93
+ cursor: not-allowed;
94
+ transition-property: none;
95
+ }
96
+ }
package/lib/build/less/dialtone.less CHANGED
@@ -29,6 +29,7 @@
29
29
  @import 'components/table';
30
30
  @import 'components/tabs';
31
31
  @import 'components/tooltip';
32
+ @import 'components/toggle';
32
33
 
33
34
  // -- CONFIG
34
35
  @import 'utilities/internals';
package/lib/dist/css/dialtone.css CHANGED
@@ -905,8 +905,6 @@ body {
905
905
  }
906
906
  .d-btn--loading::before {
907
907
  position: absolute;
908
- top: calc(50% - var(--su8));
909
- left: calc(50% - var(--su8));
910
908
  width: var(--su16);
911
909
  height: var(--su16);
912
910
  border: var(--su2) solid currentColor;
@@ -2723,6 +2721,73 @@ legend .d-label {
2723
2721
  .d-tooltip__arrow--left-bottom::after {
2724
2722
  bottom: var(--su8);
2725
2723
  }
2724
+ .d-toggle {
2725
+ --toggle--ta: var(--ttf-in-out);
2726
+ --toggle-ts: var(--td200);
2727
+ --toggle-bc: var(--black-200);
2728
+ position: relative;
2729
+ display: inline-block;
2730
+ box-sizing: border-box;
2731
+ width: var(--su48);
2732
+ height: var(--su24);
2733
+ padding: 0;
2734
+ line-height: var(--lh4);
2735
+ vertical-align: middle;
2736
+ background-color: var(--toggle-bc);
2737
+ border: var(--su1) solid var(--toggle-bc);
2738
+ border-radius: var(--su48);
2739
+ cursor: pointer;
2740
+ }
2741
+ .d-toggle__inner {
2742
+ position: absolute;
2743
+ top: calc(var(--su4) - var(--su1));
2744
+ left: var(--su24);
2745
+ width: var(--su16);
2746
+ height: var(--su16);
2747
+ color: var(--white);
2748
+ 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");
2749
+ background-repeat: no-repeat;
2750
+ }
2751
+ .d-toggle::after {
2752
+ position: absolute;
2753
+ top: var(--su1);
2754
+ left: var(--su1);
2755
+ width: calc(var(--su16) + var(--su4));
2756
+ height: calc(var(--su16) + var(--su4));
2757
+ background-color: var(--white);
2758
+ border-radius: var(--br-circle);
2759
+ cursor: pointer;
2760
+ transition: left var(--toggle-ts) var(--toggle--ta);
2761
+ content: ' ';
2762
+ }
2763
+ .d-toggle.focus-visible {
2764
+ outline: none;
2765
+ box-shadow: var(--bs-focus-ring);
2766
+ }
2767
+ .d-toggle:focus-visible {
2768
+ outline: none;
2769
+ box-shadow: var(--bs-focus-ring);
2770
+ }
2771
+ .d-toggle--checked {
2772
+ --toggle-bc: var(--primary-color);
2773
+ }
2774
+ .d-toggle--checked .d-toggle__inner {
2775
+ left: var(--su6);
2776
+ 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");
2777
+ }
2778
+ .d-toggle--checked::after {
2779
+ left: calc(var(--su24) + var(--su1));
2780
+ }
2781
+ .d-toggle--disabled,
2782
+ .d-toggle[disabled] {
2783
+ cursor: not-allowed;
2784
+ opacity: 0.5;
2785
+ }
2786
+ .d-toggle--disabled::after,
2787
+ .d-toggle[disabled]::after {
2788
+ cursor: not-allowed;
2789
+ transition-property: none;
2790
+ }
2726
2791
  .d-bgg-from-black-600,
2727
2792
  .h\:d-bgg-from-black-600:hover,
2728
2793
  .f\:d-bgg-from-black-600:focus {