genesys-react-components 1.0.5 → 1.0.6

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/build/index.js +16 -16
  2. package/build/index.js.map +1 -1
  3. package/package.json +7 -7
  4. package/src/alertblock/AlertBlock.scss +24 -26
  5. package/src/codefence/CodeFence.scss +5 -7
  6. package/src/copybutton/CopyButton.scss +1 -3
  7. package/src/datatable/DataTable.scss +8 -10
  8. package/src/dxaccordion/DxAccordion.scss +4 -6
  9. package/src/dxbutton/DxButton.scss +24 -26
  10. package/src/dxitemgroup/DxCheckbox.scss +14 -16
  11. package/src/dxitemgroup/DxCheckbox.tsx +4 -1
  12. package/src/dxitemgroup/dropdown.scss +8 -10
  13. package/src/dxitemgroup/multiselect.scss +10 -12
  14. package/src/dxlabel/DxLabel.scss +2 -4
  15. package/src/dxtabbedcontent/DxTabbedContent.scss +4 -6
  16. package/src/dxtextbox/DxTextbox.scss +13 -15
  17. package/src/dxtoggle/DxToggle.scss +11 -13
  18. package/src/loadingplaceholder/LoadingPlaceholder.scss +2 -4
package/src/dxtextbox/DxTextbox.scss CHANGED
@@ -1,17 +1,15 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .dx-textbox {
4
2
  display: flex;
5
3
  flex-flow: row nowrap;
6
4
  justify-content: space-between;
7
5
  align-items: center;
8
6
  gap: 10px;
9
- border: 1px solid var($--theme-core-control-border-color);
7
+ border: 1px solid var(--theme-core-control-border-color);
10
8
  border-radius: 2px;
11
9
  margin: 0;
12
10
  padding: 0 10px;
13
11
  height: 32px;
14
- background-color: var($--theme-core-control-alt-background-color);
12
+ background-color: var(--theme-core-control-alt-background-color);
15
13
 
16
14
  &.with-label {
17
15
  margin-top: 0;
@@ -24,7 +22,7 @@
24
22
  .icon {
25
23
  display: block;
26
24
  flex: none;
27
- color: var($--theme-core-control-textbox-text-color);
25
+ color: var(--theme-core-control-textbox-text-color);
28
26
 
29
27
  &.input-icon {
30
28
  font-size: 14px;
@@ -54,7 +52,7 @@
54
52
  font-weight: normal;
55
53
  font-size: 14px;
56
54
  line-height: 16px;
57
- color: var($--theme-core-control-textbox-text-color);
55
+ color: var(--theme-core-control-textbox-text-color);
58
56
 
59
57
  &:focus-visible {
60
58
  outline: 0;
@@ -65,38 +63,38 @@
65
63
  font-weight: 300;
66
64
  font-size: 14px;
67
65
  line-height: 16px;
68
- color: var($--theme-core-control-textbox-placeholder-text-color);
66
+ color: var(--theme-core-control-textbox-placeholder-text-color);
69
67
  }
70
68
  }
71
69
 
72
70
  &.disabled {
73
- background-color: var($--theme-dxbutton-secondary-disabled-background-color);
71
+ background-color: var(--theme-dxbutton-secondary-disabled-background-color);
74
72
  cursor: not-allowed;
75
73
 
76
74
  input {
77
75
  cursor: not-allowed;
78
- color: var($--theme-dxbutton-secondary-disabled-text-color);
76
+ color: var(--theme-dxbutton-secondary-disabled-text-color);
79
77
  }
80
78
 
81
79
  .icon,
82
80
  input::placeholder {
83
- color: var($--theme-dxbutton-secondary-disabled-text-color);
81
+ color: var(--theme-dxbutton-secondary-disabled-text-color);
84
82
  }
85
83
  }
86
84
  }
87
85
 
88
86
  .dx-textarea {
89
87
  padding: 10px;
90
- border: 1px solid var($--theme-core-control-border-color);
88
+ border: 1px solid var(--theme-core-control-border-color);
91
89
  border-radius: 2px;
92
90
  width: 100%;
93
91
  font-family: 'Roboto', sans-serif;
94
92
  box-sizing: border-box;
95
- background-color: var($--theme-core-control-alt-background-color);
96
- color: var($--theme-core-control-textbox-text-color);
93
+ background-color: var(--theme-core-control-alt-background-color);
94
+ color: var(--theme-core-control-textbox-text-color);
97
95
 
98
96
  &:focus-within {
99
- outline: var($--theme-core-control-focus-color) solid 2px;
97
+ outline: var(--theme-core-control-focus-color) solid 2px;
100
98
  }
101
99
 
102
100
  &::placeholder {
@@ -105,6 +103,6 @@
105
103
  font-weight: 300;
106
104
  font-size: 14px;
107
105
  line-height: 16px;
108
- color: var($--theme-core-control-textbox-placeholder-text-color);
106
+ color: var(--theme-core-control-textbox-placeholder-text-color);
109
107
  }
110
108
  }
package/src/dxtoggle/DxToggle.scss CHANGED
@@ -1,10 +1,8 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .dx-toggle-container {
4
2
  display: inline-block;
5
3
  .dx-toggle {
6
- border: 1px solid var($--theme-core-control-border-color);
7
- background: var($--theme-core-control-background-color);
4
+ border: 1px solid var(--theme-core-control-border-color);
5
+ background: var(--theme-core-control-background-color);
8
6
  border-radius: 6px;
9
7
  height: 26px;
10
8
  // width: 72px;
@@ -18,7 +16,7 @@
18
16
 
19
17
  &:hover {
20
18
  .slider {
21
- border-color: var($--theme-core-control-focus-color);
19
+ border-color: var(--theme-core-control-focus-color);
22
20
  }
23
21
  }
24
22
 
@@ -26,7 +24,7 @@
26
24
  font-size: 10px;
27
25
  line-height: 0;
28
26
  margin: 0 5px;
29
- color: var($--theme-core-control-border-color);
27
+ color: var(--theme-core-control-border-color);
30
28
  }
31
29
 
32
30
  .clear-placeholder {
@@ -40,8 +38,8 @@
40
38
  height: 22px;
41
39
  width: 22px;
42
40
  border-radius: 22px;
43
- background-color: var($--theme-core-control-punch-color);
44
- box-shadow: 0px 1px 2px var($--theme-core-box-shadow-color);
41
+ background-color: var(--theme-core-control-punch-color);
42
+ box-shadow: 0px 1px 2px var(--theme-core-box-shadow-color);
45
43
  display: flex;
46
44
  align-items: center;
47
45
  justify-content: center;
@@ -50,7 +48,7 @@
50
48
  .icon {
51
49
  font-size: 10px;
52
50
  line-height: 0;
53
- color: var($--theme-core-control-background-color);
51
+ color: var(--theme-core-control-background-color);
54
52
  padding: 0;
55
53
  margin: 0;
56
54
  }
@@ -61,8 +59,8 @@
61
59
  .dx-toggle {
62
60
  cursor: not-allowed;
63
61
  opacity: 0.7;
64
- border-color: var($--theme-core-control-border-color);
65
- color: var($--theme-core-control-background-color);
62
+ border-color: var(--theme-core-control-border-color);
63
+ color: var(--theme-core-control-background-color);
66
64
 
67
65
  &:hover {
68
66
  .slider {
@@ -72,8 +70,8 @@
72
70
 
73
71
  .slider {
74
72
  opacity: 0.7;
75
- color: var($--theme-core-control-background-color);
76
- background-color: var($--theme-core-control-punch-color);
73
+ color: var(--theme-core-control-background-color);
74
+ background-color: var(--theme-core-control-punch-color);
77
75
  }
78
76
  }
79
77
  }
package/src/loadingplaceholder/LoadingPlaceholder.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  $size: 160px;
4
2
 
5
3
  .loading-placeholder {
@@ -20,7 +18,7 @@ $size: 160px;
20
18
  font-weight: 300;
21
19
  font-size: 16px;
22
20
  line-height: 20px;
23
- color: var($--theme-loadingplaceholder-text-color);
21
+ color: var(--theme-loadingplaceholder-text-color);
24
22
  position: relative;
25
23
  top: 5px;
26
24
  left: 5px;
@@ -29,7 +27,7 @@ $size: 160px;
29
27
 
30
28
  div {
31
29
  position: absolute;
32
- border: 4px solid var($--theme-loadingplaceholder-wave-color);
30
+ border: 4px solid var(--theme-loadingplaceholder-wave-color);
33
31
  opacity: 1;
34
32
  border-radius: 50%;
35
33
  animation: loading-placeholder 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;