genesys-react-components 1.0.5-DEVENGAGE-2962-date-format-config.664 → 1.0.6-devengage-2942-fix.676

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 +5 -5
  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/codefence/CodeFence.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .fence {
4
2
  border-radius: 0;
5
3
  margin: 40px 0;
@@ -13,11 +11,11 @@
13
11
  }
14
12
 
15
13
  .fence-header {
16
- background-color: var($--theme-codefence-header-background-color);
17
- color: var($--theme-codefence-header-text-color);
14
+ background-color: var(--theme-codefence-header-background-color);
15
+ color: var(--theme-codefence-header-text-color);
18
16
  font-size: 14px;
19
17
  border-radius: 4px 4px 0px 0px;
20
- border-bottom: 1px solid var($--theme-codefence-border-color);
18
+ border-bottom: 1px solid var(--theme-codefence-border-color);
21
19
  margin: 0;
22
20
  padding: 5px 16px;
23
21
  min-height: 24px;
@@ -40,7 +38,7 @@
40
38
  .copy-button {
41
39
  font-size: 14px;
42
40
  padding: 0;
43
- color: var($--theme-codefence-header-text-color);
41
+ color: var(--theme-codefence-header-text-color);
44
42
  }
45
43
 
46
44
  .fence-title {
@@ -75,7 +73,7 @@
75
73
  margin: 0 !important;
76
74
  padding: 0 !important;
77
75
  border-radius: 0 0 4px 4px;
78
- background: var($--theme-codefence-background-color) !important;
76
+ background: var(--theme-codefence-background-color) !important;
79
77
  height: 100%;
80
78
  width: 100%;
81
79
  box-sizing: border-box;
package/src/copybutton/CopyButton.scss CHANGED
@@ -1,8 +1,6 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .copy-button {
4
2
  cursor: pointer;
5
3
  border: 0;
6
4
  background: transparent;
7
- color: var($--theme-core-text-color);
5
+ color: var(--theme-core-text-color);
8
6
  }
package/src/datatable/DataTable.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  $cellWidthPadding: 10px;
4
2
 
5
3
  .table-container {
@@ -13,7 +11,7 @@ $cellWidthPadding: 10px;
13
11
  box-sizing: border-box;
14
12
 
15
13
  .filter-toggle {
16
- color: var($--theme-core-link-color);
14
+ color: var(--theme-core-link-color);
17
15
  font-size: 12px;
18
16
  line-height: 0;
19
17
  margin: 6px 0 0 10px;
@@ -21,7 +19,7 @@ $cellWidthPadding: 10px;
21
19
  align-self: flex-start;
22
20
 
23
21
  &:hover {
24
- color: var($--theme-core-link-hover-color);
22
+ color: var(--theme-core-link-hover-color);
25
23
  }
26
24
  }
27
25
  }
@@ -29,14 +27,14 @@ $cellWidthPadding: 10px;
29
27
  .table {
30
28
  width: 100%;
31
29
  margin: 0 30px 0 0;
32
- color: var($--theme-datatable-text-color);
33
- background-color: var($--theme-datatable-background-color);
30
+ color: var(--theme-datatable-text-color);
31
+ background-color: var(--theme-datatable-background-color);
34
32
 
35
33
  // Remove paragraph padding from all cells
36
34
  td {
37
35
  border-width: 0 0 1px 0;
38
36
  border-style: solid;
39
- border-color: var($--theme-datatable-border-color);
37
+ border-color: var(--theme-datatable-border-color);
40
38
  vertical-align: top;
41
39
  min-width: 80px;
42
40
 
@@ -48,7 +46,7 @@ $cellWidthPadding: 10px;
48
46
 
49
47
  thead {
50
48
  tr {
51
- color: var($--theme-datatable-text-color);
49
+ color: var(--theme-datatable-text-color);
52
50
  font-weight: bold;
53
51
  font-size: 14px;
54
52
  line-height: 24px;
@@ -103,7 +101,7 @@ $cellWidthPadding: 10px;
103
101
  }
104
102
 
105
103
  &.filter-row {
106
- background-color: var($--theme-datatable-filter-background-color);
104
+ background-color: var(--theme-datatable-filter-background-color);
107
105
 
108
106
  td {
109
107
  border-width: 1px 0;
@@ -181,7 +179,7 @@ $cellWidthPadding: 10px;
181
179
 
182
180
  .sort-icon,
183
181
  .filter-active-icon {
184
- color: var($--theme-core-link-color);
182
+ color: var(--theme-core-link-color);
185
183
  }
186
184
 
187
185
  &.unsorted .sort-icon {
package/src/dxaccordion/DxAccordion.scss CHANGED
@@ -1,17 +1,15 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .dx-accordion {
4
2
  margin: 0;
5
3
 
6
4
  .accordion-heading {
7
5
  border-width: 0 0 1px 0;
8
6
  border-style: solid;
9
- border-color: var($--theme-core-layout-border-color);
7
+ border-color: var(--theme-core-layout-border-color);
10
8
  font-style: normal;
11
9
  font-weight: bold;
12
10
  font-size: 14px;
13
11
  line-height: 14px;
14
- color: var($--theme-core-text-color);
12
+ color: var(--theme-core-text-color);
15
13
  padding: 13px 20px;
16
14
  display: flex;
17
15
  flex-flow: row nowrap;
@@ -29,9 +27,9 @@
29
27
  }
30
28
 
31
29
  .accordion-content {
32
- color: var($--theme-core-text-color);
30
+ color: var(--theme-core-text-color);
33
31
  padding: 13px 20px 20px 20px;
34
- border-bottom: 1px solid var($--theme-core-layout-border-color);
32
+ border-bottom: 1px solid var(--theme-core-layout-border-color);
35
33
 
36
34
  // Clear excess margins from content, we provide the padding
37
35
  & > *:first-child {
package/src/dxbutton/DxButton.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .dx-button {
4
2
  margin: 15px 10px;
5
3
  border-radius: 2px;
@@ -8,68 +6,68 @@
8
6
  font-weight: 500;
9
7
 
10
8
  &-primary {
11
- color: var($--theme-dxbutton-primary-text-color);
12
- border: 1px solid var($--theme-dxbutton-primary-background-color);
13
- background-color: var($--theme-dxbutton-primary-background-color);
9
+ color: var(--theme-dxbutton-primary-text-color);
10
+ border: 1px solid var(--theme-dxbutton-primary-background-color);
11
+ background-color: var(--theme-dxbutton-primary-background-color);
14
12
 
15
13
  &:hover {
16
- background-color: var($--theme-dxbutton-primary-hover-background-color);
17
- border-color: var($--theme-dxbutton-primary-hover-background-color);
14
+ background-color: var(--theme-dxbutton-primary-hover-background-color);
15
+ border-color: var(--theme-dxbutton-primary-hover-background-color);
18
16
  transition: 0.1s;
19
17
  }
20
18
 
21
19
  &:focus {
22
- background-color: var($--theme-dxbutton-primary-background-color);
23
- border-color: var($--theme-dxbutton-primary-background-color);
24
- box-shadow: 0 0 0 2px var($--theme-dxbutton-primary-shadow-color);
20
+ background-color: var(--theme-dxbutton-primary-background-color);
21
+ border-color: var(--theme-dxbutton-primary-background-color);
22
+ box-shadow: 0 0 0 2px var(--theme-dxbutton-primary-shadow-color);
25
23
  transition: 0.1s;
26
24
  }
27
25
 
28
26
  &:disabled {
29
- background-color: var($--theme-dxbutton-primary-disabled-background-color);
30
- border-color: var($--theme-dxbutton-primary-disabled-background-color);
27
+ background-color: var(--theme-dxbutton-primary-disabled-background-color);
28
+ border-color: var(--theme-dxbutton-primary-disabled-background-color);
31
29
  transition: 0.1s;
32
30
  cursor: not-allowed;
33
31
  }
34
32
  }
35
33
 
36
34
  &-secondary {
37
- background-color: var($--theme-dxbutton-secondary-background-color);
38
- border: 1px solid var($--theme-dxbutton-secondary-border-color);
39
- color: var($--theme-dxbutton-secondary-border-color);
35
+ background-color: var(--theme-dxbutton-secondary-background-color);
36
+ border: 1px solid var(--theme-dxbutton-secondary-border-color);
37
+ color: var(--theme-dxbutton-secondary-border-color);
40
38
 
41
39
  &:hover {
42
- color: var($--theme-dxbutton-secondary-hover-border-color);
43
- border-color: var($--theme-dxbutton-secondary-border-color);
40
+ color: var(--theme-dxbutton-secondary-hover-border-color);
41
+ border-color: var(--theme-dxbutton-secondary-border-color);
44
42
  transition: 0.1s;
45
43
  }
46
44
 
47
45
  &:focus {
48
- color: var($--theme-dxbutton-secondary-border-color);
49
- border-color: var($--theme-dxbutton-secondary-border-color);
50
- box-shadow: 0 0 0 2px var($--theme-dxbutton-secondary-shadow-color);
46
+ color: var(--theme-dxbutton-secondary-border-color);
47
+ border-color: var(--theme-dxbutton-secondary-border-color);
48
+ box-shadow: 0 0 0 2px var(--theme-dxbutton-secondary-shadow-color);
51
49
  transition: 0.1s;
52
50
  }
53
51
 
54
52
  &:disabled {
55
- color: var($--theme-dxbutton-secondary-disabled-text-color);
56
- background-color: var($--theme-dxbutton-secondary-disabled-background-color);
57
- border-color: var($--theme-dxbutton-secondary-disabled-background-color);
53
+ color: var(--theme-dxbutton-secondary-disabled-text-color);
54
+ background-color: var(--theme-dxbutton-secondary-disabled-background-color);
55
+ border-color: var(--theme-dxbutton-secondary-disabled-background-color);
58
56
  transition: 0.1s;
59
57
  cursor: not-allowed;
60
58
  }
61
59
  }
62
60
 
63
61
  &-link {
64
- color: var($--theme-core-link-color);
62
+ color: var(--theme-core-link-color);
65
63
  background: transparent;
66
64
  margin: 0;
67
65
  padding: 0 2px;
68
66
  border: 0;
69
67
 
70
68
  &:hover {
71
- color: var($--theme-core-link-hover-color);
72
- border-color: var($--theme-dxbutton-secondary-border-color);
69
+ color: var(--theme-core-link-hover-color);
70
+ border-color: var(--theme-dxbutton-secondary-border-color);
73
71
  }
74
72
 
75
73
  &:disabled {
package/src/dxitemgroup/DxCheckbox.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .dx-checkbox {
4
2
  display: flex;
5
3
  flex-flow: row nowrap;
@@ -16,7 +14,7 @@
16
14
  font-weight: normal;
17
15
  font-size: 12px;
18
16
  line-height: 18px;
19
- color: var($--theme-core-text-color);
17
+ color: var(--theme-core-text-color);
20
18
  }
21
19
 
22
20
  input[type='checkbox'] {
@@ -28,9 +26,9 @@
28
26
  margin: 0 8px 0 0;
29
27
  width: 16px;
30
28
  height: 16px;
31
- border: 1px solid var($--theme-core-control-border-color);
29
+ border: 1px solid var(--theme-core-control-border-color);
32
30
  border-radius: 2px;
33
- background-color: var($--theme-core-control-background-color);
31
+ background-color: var(--theme-core-control-background-color);
34
32
  flex-shrink: 0;
35
33
  }
36
34
 
@@ -41,7 +39,7 @@
41
39
 
42
40
  // Fill in background on check
43
41
  input[type='checkbox']:checked {
44
- background-color: var($--theme-core-control-background-color);
42
+ background-color: var(--theme-core-control-background-color);
45
43
  }
46
44
 
47
45
  // Display checkmark on check
@@ -52,7 +50,7 @@
52
50
  left: 3px;
53
51
  font-size: 9px;
54
52
  line-height: 0;
55
- color: var($--theme-core-control-punch-color);
53
+ color: var(--theme-core-control-punch-color);
56
54
 
57
55
  // genesys-dev-icons app-check
58
56
  content: '✓';
@@ -68,12 +66,12 @@
68
66
 
69
67
  // Hover - checkbox
70
68
  input[type='checkbox']:not(:disabled):hover {
71
- border-color: var($--theme-core-control-punch-color);
69
+ border-color: var(--theme-core-control-punch-color);
72
70
  }
73
71
 
74
72
  // Focus - checkbox
75
73
  input[type='checkbox']:not(:disabled):focus {
76
- outline: var($--theme-core-control-focus-color) solid 2px;
74
+ outline: var(--theme-core-control-focus-color) solid 2px;
77
75
  }
78
76
  // Disable default focus outline
79
77
  input[type='checkbox']:not(:disabled):focus-visible {
@@ -91,9 +89,9 @@
91
89
  margin: 0 8px 0 0;
92
90
  width: 16px;
93
91
  height: 16px;
94
- border: 1px solid var($--theme-core-control-border-color);
92
+ border: 1px solid var(--theme-core-control-border-color);
95
93
  border-radius: 8px;
96
- background-color: var($--theme-core-control-background-color);
94
+ background-color: var(--theme-core-control-background-color);
97
95
  flex-shrink: 0;
98
96
  }
99
97
 
@@ -112,17 +110,17 @@
112
110
  position: relative;
113
111
  top: 2px;
114
112
  left: 2px;
115
- background-color: var($--theme-core-control-punch-color);
113
+ background-color: var(--theme-core-control-punch-color);
116
114
  }
117
115
 
118
116
  // Hover - radio button
119
117
  input[type='radio']:not(:disabled):hover {
120
- border-color: var($--theme-core-control-punch-color);
118
+ border-color: var(--theme-core-control-punch-color);
121
119
  }
122
120
 
123
121
  // Focus - radio button
124
122
  input[type='radio']:not(:disabled):focus {
125
- outline: var($--theme-core-control-focus-color) solid 2px;
123
+ outline: var(--theme-core-control-focus-color) solid 2px;
126
124
  }
127
125
  // Disable default focus outline
128
126
  input[type='radio']:not(:disabled):focus-visible {
@@ -133,13 +131,13 @@
133
131
  cursor: not-allowed;
134
132
 
135
133
  input {
136
- border-color: var($--theme-core-control-disabled-border-color);
134
+ border-color: var(--theme-core-control-disabled-border-color);
137
135
  cursor: not-allowed;
138
136
  }
139
137
 
140
138
  // Fill in background on check
141
139
  input:checked {
142
- background-color: var($--theme-core-control-disabled-background-color);
140
+ background-color: var(--theme-core-control-disabled-background-color);
143
141
  cursor: not-allowed;
144
142
  }
145
143
  }
package/src/dxitemgroup/DxCheckbox.tsx CHANGED
@@ -39,8 +39,11 @@ export default function DxCheckbox(props: IProps) {
39
39
  checked={checked}
40
40
  onChange={(e) => setChecked(e.target.checked)}
41
41
  disabled={props.disabled === true}
42
+ title={props.description}
42
43
  />
43
- <span className='label-text'>{props.label}</span>
44
+ <span className="label-text" title={props.description}>
45
+ {props.label}
46
+ </span>
44
47
  </label>
45
48
  );
46
49
  }
package/src/dxitemgroup/dropdown.scss CHANGED
@@ -1,24 +1,22 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .dx-select-group {
4
2
  appearance: none;
5
3
  position: relative;
6
4
 
7
5
  select {
8
- border: 1px solid var($--theme-core-control-border-color);
6
+ border: 1px solid var(--theme-core-control-border-color);
9
7
  border-radius: 2px;
10
- background-color: var($--theme-core-control-alt-background-color);
8
+ background-color: var(--theme-core-control-alt-background-color);
11
9
  font-style: normal;
12
10
  font-weight: 300;
13
11
  font-size: 12px;
14
12
  line-height: 14px;
15
- color: var($--theme-core-control-textbox-text-color);
13
+ color: var(--theme-core-control-textbox-text-color);
16
14
  padding: 8px 32px 8px 12px;
17
15
  width: 100%;
18
16
  appearance: none;
19
17
 
20
18
  &:focus-visible {
21
- outline: 2px solid var($--theme-core-control-focus-color);
19
+ outline: 2px solid var(--theme-core-control-focus-color);
22
20
  }
23
21
  }
24
22
 
@@ -42,13 +40,13 @@
42
40
 
43
41
  &.disabled {
44
42
  &::after {
45
- color: var($--theme-core-control-disabled-text-color);
43
+ color: var(--theme-core-control-disabled-text-color);
46
44
  }
47
45
 
48
46
  select:disabled {
49
- background-color: var($--theme-core-control-disabled-background-color);
50
- border-color: var($--theme-core-control-disabled-border-color);
51
- color: var($--theme-core-control-disabled-text-color);
47
+ background-color: var(--theme-core-control-disabled-background-color);
48
+ border-color: var(--theme-core-control-disabled-border-color);
49
+ color: var(--theme-core-control-disabled-text-color);
52
50
  cursor: not-allowed;
53
51
  }
54
52
  }
package/src/dxitemgroup/multiselect.scss CHANGED
@@ -1,23 +1,21 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .dx-multiselect-group {
4
2
  appearance: none;
5
3
  position: relative;
6
4
 
7
5
  select {
8
- border: 1px solid var($--theme-core-control-border-color);
6
+ border: 1px solid var(--theme-core-control-border-color);
9
7
  border-radius: 2px;
10
- background-color: var($--theme-core-control-alt-background-color);
8
+ background-color: var(--theme-core-control-alt-background-color);
11
9
  font-style: normal;
12
10
  font-weight: 300;
13
11
  font-size: 12px;
14
12
  line-height: 14px;
15
- color: var($--theme-core-control-textbox-text-color);
13
+ color: var(--theme-core-control-textbox-text-color);
16
14
  width: 100%;
17
15
  appearance: none;
18
16
 
19
17
  &:focus-visible {
20
- outline: 2px solid var($--theme-core-control-focus-color);
18
+ outline: 2px solid var(--theme-core-control-focus-color);
21
19
  }
22
20
 
23
21
  option {
@@ -30,11 +28,11 @@
30
28
  font-size: 12px;
31
29
  line-height: 31px;
32
30
  padding: 8px 12px;
33
- color: var($--theme-core-control-textbox-text-color);
31
+ color: var(--theme-core-control-textbox-text-color);
34
32
 
35
33
  &:checked {
36
- color: var($--theme-core-tag-text-color);
37
- background-color: var($--theme-core-tag-background-color);
34
+ color: var(--theme-core-tag-text-color);
35
+ background-color: var(--theme-core-tag-background-color);
38
36
  }
39
37
 
40
38
  &:disabled {
@@ -65,12 +63,12 @@
65
63
 
66
64
  &.disabled {
67
65
  select:disabled {
68
- background-color: var($--theme-core-control-disabled-background-color);
69
- border-color: var($--theme-core-control-disabled-border-color);
66
+ background-color: var(--theme-core-control-disabled-background-color);
67
+ border-color: var(--theme-core-control-disabled-border-color);
70
68
  cursor: not-allowed;
71
69
 
72
70
  option {
73
- color: var($--theme-core-control-disabled-text-color);
71
+ color: var(--theme-core-control-disabled-text-color);
74
72
  }
75
73
  }
76
74
  }
package/src/dxlabel/DxLabel.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .dx-label {
4
2
  margin: 20px 0;
5
3
  display: block;
@@ -12,7 +10,7 @@
12
10
  font-weight: 400;
13
11
  font-size: 12px;
14
12
  line-height: 14px;
15
- color: var($--theme-core-control-label-color);
13
+ color: var(--theme-core-control-label-color);
16
14
  }
17
15
 
18
16
  .label-text {
@@ -26,7 +24,7 @@
26
24
  gap: 8px;
27
25
 
28
26
  .icon {
29
- color: var($--theme-alertblock-info-icon-color);
27
+ color: var(--theme-alertblock-info-icon-color);
30
28
  line-height: 0;
31
29
  }
32
30
  }
package/src/dxtabbedcontent/DxTabbedContent.scss CHANGED
@@ -1,10 +1,8 @@
1
- @import '../theme/variables.scss';
2
-
3
1
  .dx-tabbed-content {
4
2
  margin: 40px 0;
5
3
 
6
4
  .tab-titles {
7
- border-bottom: 1px solid var($--theme-core-layout-border-color);
5
+ border-bottom: 1px solid var(--theme-core-layout-border-color);
8
6
  font-weight: normal;
9
7
  font-size: 14px;
10
8
  line-height: 20px;
@@ -16,11 +14,11 @@
16
14
  cursor: pointer;
17
15
 
18
16
  &:hover {
19
- border-color: var($--theme-core-control-punch-color);
17
+ border-color: var(--theme-core-control-punch-color);
20
18
  }
21
19
 
22
20
  &.active {
23
- border-bottom-color: var($--theme-core-control-punch-color);
21
+ border-bottom-color: var(--theme-core-control-punch-color);
24
22
  font-weight: bold;
25
23
  }
26
24
 
@@ -34,7 +32,7 @@
34
32
 
35
33
  .tab-content {
36
34
  padding: 13px 20px 20px 20px;
37
- border-bottom: 1px solid var($--theme-core-layout-border-color);
35
+ border-bottom: 1px solid var(--theme-core-layout-border-color);
38
36
 
39
37
  // Clear excess margins from content, we provide the padding
40
38
  & > *:first-child {
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
  }