@odx/ui 5.0.8 → 5.0.10

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/core-theme.css +1 -1
  3. package/package.json +1 -1
  4. package/scss/components/select.component.scss +13 -0
  5. package/scss/components/wizard-step.component.scss +29 -43
  6. package/scss/select.component.scss +13 -0
  7. package/scss/wizard-step.component.scss +29 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "5.0.8",
3
+ "version": "5.0.10",
4
4
  "author": "Drägerwerk AG & Co.KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "peerDependencies": {
package/scss/components/select.component.scss CHANGED
@@ -20,6 +20,7 @@
20
20
  gap: dimensions.get-size(math.div(1, 3));
21
21
  height: 100%;
22
22
  max-width: var(--odx-select-max-width);
23
+ position: relative;
23
24
  width: 100%;
24
25
 
25
26
  #{$root}.is-readonly & {
@@ -60,6 +61,18 @@
60
61
  &__control {
61
62
  height: 100%;
62
63
  width: 100%;
64
+
65
+ &:not(.is-visible) {
66
+ cursor: pointer;
67
+ left: 0;
68
+ opacity: 0;
69
+ position: absolute;
70
+ top: 0;
71
+ }
72
+
73
+ &.is-visible {
74
+ opacity: 1;
75
+ }
63
76
  }
64
77
 
65
78
  &__indicator {
package/scss/components/wizard-step.component.scss CHANGED
@@ -33,22 +33,20 @@
33
33
 
34
34
  &__label {
35
35
  @include typography.prevent-text-overflow();
36
- @include utils.with-outline();
37
- @include motion.transition(background-color, outline-color);
36
+ @include utils.with-outline-bold();
37
+ @include motion.transition(background-color outline-color);
38
38
 
39
39
  align-self: center;
40
40
  border-radius: var(--odx-v-border-radius-controls);
41
- color: var(--odx-c-secondary-disabled);
41
+ color: var(--odx-c-text-disabled);
42
42
  margin: 0 auto;
43
+ outline-color: transparent;
44
+ outline-style: solid;
43
45
  padding: dimensions.get-size(math.div(4, 24));
44
46
  user-select: none;
45
47
 
46
- #{$root}--valid & {
47
- color: var(--odx-control-color-disabled);
48
- }
49
-
50
- #{$root}--passed & {
51
- color: var(--odx-c-primary);
48
+ :is(#{$root}--valid, #{$root}--passed) & {
49
+ color: var(--odx-c-text);
52
50
  }
53
51
 
54
52
  #{$root}--active & {
@@ -56,7 +54,6 @@
56
54
  }
57
55
 
58
56
  #{$root}:focus-visible & {
59
- background-color: var(--odx-c-focus);
60
57
  outline-color: var(--odx-c-focus-outline);
61
58
  }
62
59
 
@@ -75,12 +72,12 @@
75
72
  flex: 1;
76
73
 
77
74
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
78
- border-bottom: $border-width solid var(--odx-c-secondary-disabled);
75
+ border-bottom: $border-width solid var(--odx-c-secondary);
79
76
  height: 0;
80
77
  }
81
78
 
82
79
  .#{$parent-root}--vertical & {
83
- border-left: $border-width solid var(--odx-c-secondary-disabled);
80
+ border-left: $border-width solid var(--odx-c-secondary);
84
81
  width: 0;
85
82
  }
86
83
  }
@@ -106,23 +103,23 @@
106
103
 
107
104
  #{$root}:first-of-type + & {
108
105
  .#{$parent-root}.#{$parent-root}--vertical & {
109
- border-left-color: var(--odx-c-primary);
106
+ border-left-color: var(--odx-c-text);
110
107
  }
111
108
 
112
109
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
113
- border-bottom-color: var(--odx-c-primary);
110
+ border-bottom-color: var(--odx-c-text);
114
111
  }
115
112
  }
116
113
 
117
114
  .#{$parent-root}:not(.#{$parent-root}--vertical):has(#{$root}:last-of-type#{$root}--touched) & {
118
115
  &:last-of-type {
119
- border-bottom-color: var(--odx-control-color-disabled);
116
+ border-bottom-color: var(--odx-c-text);
120
117
  }
121
118
  }
122
119
 
123
120
  .#{$parent-root}--vertical:has(#{$root}:last-of-type#{$root}--touched) & {
124
121
  &:last-of-type {
125
- border-left-color: var(--odx-control-color-disabled);
122
+ border-left-color: var(--odx-c-text);
126
123
  }
127
124
  }
128
125
  }
@@ -140,21 +137,21 @@
140
137
 
141
138
  #{$root}--touched & {
142
139
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
143
- border-bottom-color: var(--odx-control-color-disabled);
140
+ border-bottom-color: var(--odx-c-text);
144
141
  }
145
142
 
146
143
  .#{$parent-root}--vertical & {
147
- border-left-color: var(--odx-control-color-disabled);
144
+ border-left-color: var(--odx-c-text);
148
145
  }
149
146
  }
150
147
 
151
148
  #{$root}--passed & {
152
149
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
153
- border-bottom-color: var(--odx-c-primary);
150
+ border-bottom-color: var(--odx-c-text);
154
151
  }
155
152
 
156
153
  .#{$parent-root}--vertical & {
157
- border-left-color: var(--odx-c-primary);
154
+ border-left-color: var(--odx-c-text);
158
155
  }
159
156
  }
160
157
  }
@@ -162,11 +159,11 @@
162
159
  &__line-after {
163
160
  #{$root}--touched:not(#{$root}--is-last-touched) & {
164
161
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
165
- border-bottom-color: var(--odx-control-color-disabled);
162
+ border-bottom-color: var(--odx-c-text);
166
163
  }
167
164
 
168
165
  .#{$parent-root}--vertical & {
169
- border-left-color: var(--odx-control-color-disabled);
166
+ border-left-color: var(--odx-c-text);
170
167
  }
171
168
  }
172
169
 
@@ -182,11 +179,11 @@
182
179
 
183
180
  #{$root}--passed:not(#{$root}--active) & {
184
181
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
185
- border-bottom-color: var(--odx-c-primary);
182
+ border-bottom-color: var(--odx-c-text);
186
183
  }
187
184
 
188
185
  .#{$parent-root}--vertical & {
189
- border-left-color: var(--odx-c-primary);
186
+ border-left-color: var(--odx-c-text);
190
187
  }
191
188
  }
192
189
  }
@@ -202,35 +199,24 @@
202
199
  }
203
200
 
204
201
  &__circle {
205
- @include motion.transition(background-color, color);
202
+ @include motion.transition(background-color color);
206
203
 
207
204
  align-items: center;
208
- border: $border-width solid var(--odx-c-secondary-disabled);
205
+ border: $border-width solid var(--odx-c-secondary);
209
206
  border-radius: 50%;
210
- color: var(--odx-c-secondary-disabled);
207
+ color: var(--odx-c-text-disabled);
211
208
  display: flex;
212
209
  height: $step-size;
213
210
  justify-content: center;
214
211
  width: $step-size;
215
212
 
216
- #{$root}--touched & {
217
- border-color: var(--odx-control-color-disabled);
218
- color: var(--odx-control-color-disabled);
213
+ :is(#{$root}--touched, #{$root}--passed) & {
214
+ border-color: var(--odx-c-text);
215
+ color: var(--odx-c-text);
219
216
  }
220
217
 
221
- #{$root}--active & {
222
- background-color: var(--odx-c-primary);
223
- border-color: var(--odx-c-primary);
224
- color: var(--odx-c-primary);
225
- }
226
-
227
- #{$root}--active#{$root}--valid & {
228
- color: var(--white);
229
- }
230
-
231
- #{$root}--passed & {
232
- border-color: var(--odx-c-primary);
233
- color: var(--odx-c-primary);
218
+ #{$root}--active:not(#{$root}--valid) & {
219
+ background-color: var(--odx-c-text);
234
220
  }
235
221
  }
236
222
 
package/scss/select.component.scss CHANGED
@@ -20,6 +20,7 @@
20
20
  gap: dimensions.get-size(math.div(1, 3));
21
21
  height: 100%;
22
22
  max-width: var(--odx-select-max-width);
23
+ position: relative;
23
24
  width: 100%;
24
25
 
25
26
  #{$root}.is-readonly & {
@@ -60,6 +61,18 @@
60
61
  &__control {
61
62
  height: 100%;
62
63
  width: 100%;
64
+
65
+ &:not(.is-visible) {
66
+ cursor: pointer;
67
+ left: 0;
68
+ opacity: 0;
69
+ position: absolute;
70
+ top: 0;
71
+ }
72
+
73
+ &.is-visible {
74
+ opacity: 1;
75
+ }
63
76
  }
64
77
 
65
78
  &__indicator {
package/scss/wizard-step.component.scss CHANGED
@@ -33,22 +33,20 @@
33
33
 
34
34
  &__label {
35
35
  @include typography.prevent-text-overflow();
36
- @include utils.with-outline();
37
- @include motion.transition(background-color, outline-color);
36
+ @include utils.with-outline-bold();
37
+ @include motion.transition(background-color outline-color);
38
38
 
39
39
  align-self: center;
40
40
  border-radius: var(--odx-v-border-radius-controls);
41
- color: var(--odx-c-secondary-disabled);
41
+ color: var(--odx-c-text-disabled);
42
42
  margin: 0 auto;
43
+ outline-color: transparent;
44
+ outline-style: solid;
43
45
  padding: dimensions.get-size(math.div(4, 24));
44
46
  user-select: none;
45
47
 
46
- #{$root}--valid & {
47
- color: var(--odx-control-color-disabled);
48
- }
49
-
50
- #{$root}--passed & {
51
- color: var(--odx-c-primary);
48
+ :is(#{$root}--valid, #{$root}--passed) & {
49
+ color: var(--odx-c-text);
52
50
  }
53
51
 
54
52
  #{$root}--active & {
@@ -56,7 +54,6 @@
56
54
  }
57
55
 
58
56
  #{$root}:focus-visible & {
59
- background-color: var(--odx-c-focus);
60
57
  outline-color: var(--odx-c-focus-outline);
61
58
  }
62
59
 
@@ -75,12 +72,12 @@
75
72
  flex: 1;
76
73
 
77
74
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
78
- border-bottom: $border-width solid var(--odx-c-secondary-disabled);
75
+ border-bottom: $border-width solid var(--odx-c-secondary);
79
76
  height: 0;
80
77
  }
81
78
 
82
79
  .#{$parent-root}--vertical & {
83
- border-left: $border-width solid var(--odx-c-secondary-disabled);
80
+ border-left: $border-width solid var(--odx-c-secondary);
84
81
  width: 0;
85
82
  }
86
83
  }
@@ -106,23 +103,23 @@
106
103
 
107
104
  #{$root}:first-of-type + & {
108
105
  .#{$parent-root}.#{$parent-root}--vertical & {
109
- border-left-color: var(--odx-c-primary);
106
+ border-left-color: var(--odx-c-text);
110
107
  }
111
108
 
112
109
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
113
- border-bottom-color: var(--odx-c-primary);
110
+ border-bottom-color: var(--odx-c-text);
114
111
  }
115
112
  }
116
113
 
117
114
  .#{$parent-root}:not(.#{$parent-root}--vertical):has(#{$root}:last-of-type#{$root}--touched) & {
118
115
  &:last-of-type {
119
- border-bottom-color: var(--odx-control-color-disabled);
116
+ border-bottom-color: var(--odx-c-text);
120
117
  }
121
118
  }
122
119
 
123
120
  .#{$parent-root}--vertical:has(#{$root}:last-of-type#{$root}--touched) & {
124
121
  &:last-of-type {
125
- border-left-color: var(--odx-control-color-disabled);
122
+ border-left-color: var(--odx-c-text);
126
123
  }
127
124
  }
128
125
  }
@@ -140,21 +137,21 @@
140
137
 
141
138
  #{$root}--touched & {
142
139
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
143
- border-bottom-color: var(--odx-control-color-disabled);
140
+ border-bottom-color: var(--odx-c-text);
144
141
  }
145
142
 
146
143
  .#{$parent-root}--vertical & {
147
- border-left-color: var(--odx-control-color-disabled);
144
+ border-left-color: var(--odx-c-text);
148
145
  }
149
146
  }
150
147
 
151
148
  #{$root}--passed & {
152
149
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
153
- border-bottom-color: var(--odx-c-primary);
150
+ border-bottom-color: var(--odx-c-text);
154
151
  }
155
152
 
156
153
  .#{$parent-root}--vertical & {
157
- border-left-color: var(--odx-c-primary);
154
+ border-left-color: var(--odx-c-text);
158
155
  }
159
156
  }
160
157
  }
@@ -162,11 +159,11 @@
162
159
  &__line-after {
163
160
  #{$root}--touched:not(#{$root}--is-last-touched) & {
164
161
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
165
- border-bottom-color: var(--odx-control-color-disabled);
162
+ border-bottom-color: var(--odx-c-text);
166
163
  }
167
164
 
168
165
  .#{$parent-root}--vertical & {
169
- border-left-color: var(--odx-control-color-disabled);
166
+ border-left-color: var(--odx-c-text);
170
167
  }
171
168
  }
172
169
 
@@ -182,11 +179,11 @@
182
179
 
183
180
  #{$root}--passed:not(#{$root}--active) & {
184
181
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
185
- border-bottom-color: var(--odx-c-primary);
182
+ border-bottom-color: var(--odx-c-text);
186
183
  }
187
184
 
188
185
  .#{$parent-root}--vertical & {
189
- border-left-color: var(--odx-c-primary);
186
+ border-left-color: var(--odx-c-text);
190
187
  }
191
188
  }
192
189
  }
@@ -202,35 +199,24 @@
202
199
  }
203
200
 
204
201
  &__circle {
205
- @include motion.transition(background-color, color);
202
+ @include motion.transition(background-color color);
206
203
 
207
204
  align-items: center;
208
- border: $border-width solid var(--odx-c-secondary-disabled);
205
+ border: $border-width solid var(--odx-c-secondary);
209
206
  border-radius: 50%;
210
- color: var(--odx-c-secondary-disabled);
207
+ color: var(--odx-c-text-disabled);
211
208
  display: flex;
212
209
  height: $step-size;
213
210
  justify-content: center;
214
211
  width: $step-size;
215
212
 
216
- #{$root}--touched & {
217
- border-color: var(--odx-control-color-disabled);
218
- color: var(--odx-control-color-disabled);
213
+ :is(#{$root}--touched, #{$root}--passed) & {
214
+ border-color: var(--odx-c-text);
215
+ color: var(--odx-c-text);
219
216
  }
220
217
 
221
- #{$root}--active & {
222
- background-color: var(--odx-c-primary);
223
- border-color: var(--odx-c-primary);
224
- color: var(--odx-c-primary);
225
- }
226
-
227
- #{$root}--active#{$root}--valid & {
228
- color: var(--white);
229
- }
230
-
231
- #{$root}--passed & {
232
- border-color: var(--odx-c-primary);
233
- color: var(--odx-c-primary);
218
+ #{$root}--active:not(#{$root}--valid) & {
219
+ background-color: var(--odx-c-text);
234
220
  }
235
221
  }
236
222