@odx/ui 5.2.4 → 5.3.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 (9) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/core-theme.css +1 -1
  3. package/package.json +1 -1
  4. package/scss/_breakpoints.scss +58 -0
  5. package/scss/abstract/_breakpoints.scss +58 -0
  6. package/scss/card.component.scss +10 -5
  7. package/scss/components/card.component.scss +10 -5
  8. package/scss/components/switch.component.scss +32 -28
  9. package/scss/switch.component.scss +32 -28
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "5.2.4",
3
+ "version": "5.3.0",
4
4
  "author": "Drägerwerk AG & Co.KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "peerDependencies": {
package/scss/_breakpoints.scss CHANGED
@@ -69,6 +69,64 @@ $breakpoints: (
69
69
  }
70
70
  }
71
71
 
72
+ @mixin container-up($root: null, $breakpoint) {
73
+ $min: _get-min-value($breakpoint);
74
+
75
+ @if $min {
76
+ @if $root {
77
+ @container #{$root} (width >= #{$min}) {
78
+ @content;
79
+ }
80
+ } @else {
81
+ @container (width >= #{$min}) {
82
+ @content;
83
+ }
84
+ }
85
+ } @else {
86
+ @content;
87
+ }
88
+ }
89
+
90
+ @mixin container-down($root: null, $breakpoint) {
91
+ $max: _get-max-value($breakpoint);
92
+
93
+ @if $max {
94
+ @if $root {
95
+ @container #{$root} (width < #{$max}) {
96
+ @content;
97
+ }
98
+ } @else {
99
+ @container (width < #{$max}) {
100
+ @content;
101
+ }
102
+ }
103
+ } @else {
104
+ @content;
105
+ }
106
+ }
107
+
108
+ @mixin container-only($root: null, $breakpoint) {
109
+ $min: _get-min-value($breakpoint);
110
+ $next: _get-next-value($breakpoint);
111
+ $max: _get-max-value($breakpoint);
112
+
113
+ @if $min != null and $max != null {
114
+ @if $root {
115
+ @container #{$root} (width >= #{$min}) and (width < #{$max}) {
116
+ @content;
117
+ }
118
+ } @else {
119
+ @container (width >= #{$min}) and (width < #{$max}) {
120
+ @content;
121
+ }
122
+ }
123
+ } @else if $max == null {
124
+ @include container-up($root, $breakpoint) {
125
+ @content;
126
+ }
127
+ }
128
+ }
129
+
72
130
  @mixin only($breakpoint) {
73
131
  $min: _get-min-value($breakpoint);
74
132
  $next: _get-next-value($breakpoint);
package/scss/abstract/_breakpoints.scss CHANGED
@@ -69,6 +69,64 @@ $breakpoints: (
69
69
  }
70
70
  }
71
71
 
72
+ @mixin container-up($root: null, $breakpoint) {
73
+ $min: _get-min-value($breakpoint);
74
+
75
+ @if $min {
76
+ @if $root {
77
+ @container #{$root} (width >= #{$min}) {
78
+ @content;
79
+ }
80
+ } @else {
81
+ @container (width >= #{$min}) {
82
+ @content;
83
+ }
84
+ }
85
+ } @else {
86
+ @content;
87
+ }
88
+ }
89
+
90
+ @mixin container-down($root: null, $breakpoint) {
91
+ $max: _get-max-value($breakpoint);
92
+
93
+ @if $max {
94
+ @if $root {
95
+ @container #{$root} (width < #{$max}) {
96
+ @content;
97
+ }
98
+ } @else {
99
+ @container (width < #{$max}) {
100
+ @content;
101
+ }
102
+ }
103
+ } @else {
104
+ @content;
105
+ }
106
+ }
107
+
108
+ @mixin container-only($root: null, $breakpoint) {
109
+ $min: _get-min-value($breakpoint);
110
+ $next: _get-next-value($breakpoint);
111
+ $max: _get-max-value($breakpoint);
112
+
113
+ @if $min != null and $max != null {
114
+ @if $root {
115
+ @container #{$root} (width >= #{$min}) and (width < #{$max}) {
116
+ @content;
117
+ }
118
+ } @else {
119
+ @container (width >= #{$min}) and (width < #{$max}) {
120
+ @content;
121
+ }
122
+ }
123
+ } @else if $max == null {
124
+ @include container-up($root, $breakpoint) {
125
+ @content;
126
+ }
127
+ }
128
+ }
129
+
72
130
  @mixin only($breakpoint) {
73
131
  $min: _get-min-value($breakpoint);
74
132
  $next: _get-next-value($breakpoint);
package/scss/card.component.scss CHANGED
@@ -18,23 +18,24 @@
18
18
 
19
19
  .odx-card {
20
20
  $root: &;
21
+ $main-padding: var(--odx-card-main-padding);
21
22
 
22
23
  --odx-card-main-padding: #{dimensions.get-size(math.div(12, 24))};
23
24
  --odx-card-gap: #{dimensions.get-size(math.div(12, 24))};
24
25
 
25
- $main-padding: var(--odx-card-main-padding);
26
-
27
- @include motion.transition(box-shadow color border-color);
28
- @include utils.interactive();
29
-
30
26
  background-color: var(--odx-c-background-content);
31
27
  behavior: button;
32
28
  border: var(--odx-v-outline-width-bold) solid transparent;
33
29
  border-radius: var(--odx-v-border-radius);
30
+ container-name: card-root;
31
+ container-type: inline-size;
34
32
  display: block;
35
33
  padding: $main-padding;
36
34
  position: relative;
37
35
 
36
+ @include motion.transition(box-shadow color border-color);
37
+ @include utils.interactive();
38
+
38
39
  &--image-card {
39
40
  --odx-card-main-padding: #{dimensions.get-size(1)};
40
41
 
@@ -134,6 +135,10 @@
134
135
 
135
136
  font-size: dimensions.get-size(math.div(25, 24));
136
137
  }
138
+
139
+ @include breakpoints.container-down(card-root, phone) {
140
+ margin-inline-end: dimensions.get-size(math.div(36, 24));
141
+ }
137
142
  }
138
143
  }
139
144
 
package/scss/components/card.component.scss CHANGED
@@ -18,23 +18,24 @@
18
18
 
19
19
  .odx-card {
20
20
  $root: &;
21
+ $main-padding: var(--odx-card-main-padding);
21
22
 
22
23
  --odx-card-main-padding: #{dimensions.get-size(math.div(12, 24))};
23
24
  --odx-card-gap: #{dimensions.get-size(math.div(12, 24))};
24
25
 
25
- $main-padding: var(--odx-card-main-padding);
26
-
27
- @include motion.transition(box-shadow color border-color);
28
- @include utils.interactive();
29
-
30
26
  background-color: var(--odx-c-background-content);
31
27
  behavior: button;
32
28
  border: var(--odx-v-outline-width-bold) solid transparent;
33
29
  border-radius: var(--odx-v-border-radius);
30
+ container-name: card-root;
31
+ container-type: inline-size;
34
32
  display: block;
35
33
  padding: $main-padding;
36
34
  position: relative;
37
35
 
36
+ @include motion.transition(box-shadow color border-color);
37
+ @include utils.interactive();
38
+
38
39
  &--image-card {
39
40
  --odx-card-main-padding: #{dimensions.get-size(1)};
40
41
 
@@ -134,6 +135,10 @@
134
135
 
135
136
  font-size: dimensions.get-size(math.div(25, 24));
136
137
  }
138
+
139
+ @include breakpoints.container-down(card-root, phone) {
140
+ margin-inline-end: dimensions.get-size(math.div(36, 24));
141
+ }
137
142
  }
138
143
  }
139
144
 
package/scss/components/switch.component.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  @use '../abstract/utils';
6
6
  @use '../abstract/motion';
7
7
 
8
- @mixin indicator-color($background, $stroke: null) {
8
+ @mixin track-color($background, $stroke: null) {
9
9
  background-color: $background;
10
10
 
11
11
  @if $stroke {
@@ -58,7 +58,7 @@
58
58
  @include utils.visually-hidden();
59
59
 
60
60
  &:focus-visible {
61
- ~ #{$root}__indicator:before {
61
+ ~ #{$root}__track #{$root}__thumb {
62
62
  border-width: 0;
63
63
  box-shadow: inset 0 0 0 calc(var(--odx-v-outline-box-shadow-width)) var(--odx-c-focus-inner);
64
64
  outline-color: var(--odx-c-focus-outline);
@@ -68,9 +68,9 @@
68
68
  }
69
69
  }
70
70
 
71
- &__indicator {
72
- $indicator-width: dimensions.get-size(1.5);
73
- $indicator-height: dimensions.get-size(math.div(1, 6));
71
+ &__track {
72
+ $track-width: dimensions.get-size(1.5);
73
+ $track-height: dimensions.get-size(math.div(1, 6));
74
74
  $track-size: dimensions.get-size(math.div(20, 24));
75
75
  $border: 1px solid var(--odx-control-outline-color);
76
76
 
@@ -78,12 +78,12 @@
78
78
 
79
79
  background-color: var(--odx-control-background-color);
80
80
  border: $border;
81
- border-radius: calc(#{$indicator-height} / 2);
82
- height: $indicator-height;
81
+ border-radius: calc(#{$track-height} / 2);
82
+ height: $track-height;
83
83
  position: relative;
84
- width: $indicator-width;
84
+ width: $track-width;
85
85
 
86
- &::before {
86
+ #{$root}__thumb {
87
87
  @include motion.transition(background-color transform border-color);
88
88
 
89
89
  @include utils.with-outline() {
@@ -103,34 +103,38 @@
103
103
  top: calc(#{$track-size} / -2 + 50%);
104
104
  transform: translateX(-1px);
105
105
  width: $track-size;
106
+
107
+ #{$root}__icon {
108
+ font-size: dimensions.get-size(math.div(12, 24));
109
+ }
106
110
  }
107
111
 
108
- #{$root}:hover &::before {
112
+ #{$root}:hover & #{$root}__thumb {
109
113
  background-color: var(--odx-control-background-color-hover);
110
114
  }
111
115
 
112
- #{$root}.is-active:not(.is-disabled):hover &::before {
113
- @include indicator-color(var(--odx-c-highlight-hover));
116
+ #{$root}.is-active:not(.is-disabled):hover & #{$root}__thumb {
117
+ @include track-color(var(--odx-c-highlight-hover));
114
118
  }
115
119
 
116
120
  #{$root}.is-active &,
117
121
  #{$root}__input:indeterminate ~ &,
118
122
  #{$root}__input:checked ~ & {
119
- @include indicator-color(var(--odx-control-background-color-selected));
123
+ @include track-color(var(--odx-control-background-color-selected));
120
124
 
121
- &::before {
122
- @include indicator-color(var(--odx-control-background-color-selected));
125
+ #{$root}__thumb {
126
+ @include track-color(var(--odx-control-background-color-selected));
123
127
 
124
128
  color: var(--odx-control-color-selected);
125
- transform: translateX(calc((#{$indicator-width} - #{$track-size}) - 1px));
129
+ transform: translateX(calc((#{$track-width} - #{$track-size}) - 1px));
126
130
  }
127
131
  }
128
132
 
129
133
  #{$root}.has-error & {
130
- @include indicator-color(var(--odx-control-background-color-error));
134
+ @include track-color(var(--odx-control-background-color-error));
131
135
 
132
- &::before {
133
- @include indicator-color(var(--odx-control-background-color-error));
136
+ #{$root}__thumb {
137
+ @include track-color(var(--odx-control-background-color-error));
134
138
  }
135
139
  }
136
140
 
@@ -139,10 +143,10 @@
139
143
  }
140
144
 
141
145
  #{$root}.is-disabled & {
142
- @include indicator-color(var(--odx-c-secondary-disabled));
146
+ @include track-color(var(--odx-c-secondary-disabled));
143
147
 
144
- &::before {
145
- @include indicator-color(var(--odx-c-secondary-disabled));
148
+ #{$root}__thumb {
149
+ @include track-color(var(--odx-c-secondary-disabled));
146
150
 
147
151
  outline-color: transparent;
148
152
  }
@@ -151,18 +155,18 @@
151
155
  #{$root}.is-disabled.is-active &,
152
156
  #{$root}.is-disabled ~ #{$root}__input:checked,
153
157
  #{$root}.is-disabled ~ #{$root}__input:indeterminate {
154
- @include indicator-color(var(--odx-control-background-color-disabled-selected));
158
+ @include track-color(var(--odx-control-background-color-disabled-selected));
155
159
 
156
- &::before {
157
- @include indicator-color(var(--odx-control-background-color-disabled-selected));
160
+ #{$root}__thumb {
161
+ @include track-color(var(--odx-control-background-color-disabled-selected));
158
162
  }
159
163
  }
160
164
 
161
165
  #{$root}.is-disabled:not(.is-active) & {
162
- @include indicator-color(var(--odx-control-background-color-disabled));
166
+ @include track-color(var(--odx-control-background-color-disabled));
163
167
 
164
- &::before {
165
- @include indicator-color(var(--odx-control-background-color-disabled));
168
+ #{$root}__thumb {
169
+ @include track-color(var(--odx-control-background-color-disabled));
166
170
  }
167
171
  }
168
172
  }
package/scss/switch.component.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  @use '../abstract/utils';
6
6
  @use '../abstract/motion';
7
7
 
8
- @mixin indicator-color($background, $stroke: null) {
8
+ @mixin track-color($background, $stroke: null) {
9
9
  background-color: $background;
10
10
 
11
11
  @if $stroke {
@@ -58,7 +58,7 @@
58
58
  @include utils.visually-hidden();
59
59
 
60
60
  &:focus-visible {
61
- ~ #{$root}__indicator:before {
61
+ ~ #{$root}__track #{$root}__thumb {
62
62
  border-width: 0;
63
63
  box-shadow: inset 0 0 0 calc(var(--odx-v-outline-box-shadow-width)) var(--odx-c-focus-inner);
64
64
  outline-color: var(--odx-c-focus-outline);
@@ -68,9 +68,9 @@
68
68
  }
69
69
  }
70
70
 
71
- &__indicator {
72
- $indicator-width: dimensions.get-size(1.5);
73
- $indicator-height: dimensions.get-size(math.div(1, 6));
71
+ &__track {
72
+ $track-width: dimensions.get-size(1.5);
73
+ $track-height: dimensions.get-size(math.div(1, 6));
74
74
  $track-size: dimensions.get-size(math.div(20, 24));
75
75
  $border: 1px solid var(--odx-control-outline-color);
76
76
 
@@ -78,12 +78,12 @@
78
78
 
79
79
  background-color: var(--odx-control-background-color);
80
80
  border: $border;
81
- border-radius: calc(#{$indicator-height} / 2);
82
- height: $indicator-height;
81
+ border-radius: calc(#{$track-height} / 2);
82
+ height: $track-height;
83
83
  position: relative;
84
- width: $indicator-width;
84
+ width: $track-width;
85
85
 
86
- &::before {
86
+ #{$root}__thumb {
87
87
  @include motion.transition(background-color transform border-color);
88
88
 
89
89
  @include utils.with-outline() {
@@ -103,34 +103,38 @@
103
103
  top: calc(#{$track-size} / -2 + 50%);
104
104
  transform: translateX(-1px);
105
105
  width: $track-size;
106
+
107
+ #{$root}__icon {
108
+ font-size: dimensions.get-size(math.div(12, 24));
109
+ }
106
110
  }
107
111
 
108
- #{$root}:hover &::before {
112
+ #{$root}:hover & #{$root}__thumb {
109
113
  background-color: var(--odx-control-background-color-hover);
110
114
  }
111
115
 
112
- #{$root}.is-active:not(.is-disabled):hover &::before {
113
- @include indicator-color(var(--odx-c-highlight-hover));
116
+ #{$root}.is-active:not(.is-disabled):hover & #{$root}__thumb {
117
+ @include track-color(var(--odx-c-highlight-hover));
114
118
  }
115
119
 
116
120
  #{$root}.is-active &,
117
121
  #{$root}__input:indeterminate ~ &,
118
122
  #{$root}__input:checked ~ & {
119
- @include indicator-color(var(--odx-control-background-color-selected));
123
+ @include track-color(var(--odx-control-background-color-selected));
120
124
 
121
- &::before {
122
- @include indicator-color(var(--odx-control-background-color-selected));
125
+ #{$root}__thumb {
126
+ @include track-color(var(--odx-control-background-color-selected));
123
127
 
124
128
  color: var(--odx-control-color-selected);
125
- transform: translateX(calc((#{$indicator-width} - #{$track-size}) - 1px));
129
+ transform: translateX(calc((#{$track-width} - #{$track-size}) - 1px));
126
130
  }
127
131
  }
128
132
 
129
133
  #{$root}.has-error & {
130
- @include indicator-color(var(--odx-control-background-color-error));
134
+ @include track-color(var(--odx-control-background-color-error));
131
135
 
132
- &::before {
133
- @include indicator-color(var(--odx-control-background-color-error));
136
+ #{$root}__thumb {
137
+ @include track-color(var(--odx-control-background-color-error));
134
138
  }
135
139
  }
136
140
 
@@ -139,10 +143,10 @@
139
143
  }
140
144
 
141
145
  #{$root}.is-disabled & {
142
- @include indicator-color(var(--odx-c-secondary-disabled));
146
+ @include track-color(var(--odx-c-secondary-disabled));
143
147
 
144
- &::before {
145
- @include indicator-color(var(--odx-c-secondary-disabled));
148
+ #{$root}__thumb {
149
+ @include track-color(var(--odx-c-secondary-disabled));
146
150
 
147
151
  outline-color: transparent;
148
152
  }
@@ -151,18 +155,18 @@
151
155
  #{$root}.is-disabled.is-active &,
152
156
  #{$root}.is-disabled ~ #{$root}__input:checked,
153
157
  #{$root}.is-disabled ~ #{$root}__input:indeterminate {
154
- @include indicator-color(var(--odx-control-background-color-disabled-selected));
158
+ @include track-color(var(--odx-control-background-color-disabled-selected));
155
159
 
156
- &::before {
157
- @include indicator-color(var(--odx-control-background-color-disabled-selected));
160
+ #{$root}__thumb {
161
+ @include track-color(var(--odx-control-background-color-disabled-selected));
158
162
  }
159
163
  }
160
164
 
161
165
  #{$root}.is-disabled:not(.is-active) & {
162
- @include indicator-color(var(--odx-control-background-color-disabled));
166
+ @include track-color(var(--odx-control-background-color-disabled));
163
167
 
164
- &::before {
165
- @include indicator-color(var(--odx-control-background-color-disabled));
168
+ #{$root}__thumb {
169
+ @include track-color(var(--odx-control-background-color-disabled));
166
170
  }
167
171
  }
168
172
  }