@odx/ui 7.2.1 → 7.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "7.2.1",
3
+ "version": "7.3.0",
4
4
  "author": "Drägerwerk AG & Co.KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "peerDependencies": {
@@ -11,15 +11,4 @@
11
11
  &--reverse {
12
12
  flex-direction: row-reverse;
13
13
  }
14
-
15
- > .odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
16
- /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
17
- @extend .odx-button--ghost;
18
-
19
- color: inherit;
20
-
21
- &:hover {
22
- color: inherit;
23
- }
24
- }
25
14
  }
@@ -11,15 +11,4 @@
11
11
  &--reverse {
12
12
  flex-direction: row-reverse;
13
13
  }
14
-
15
- > .odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
16
- /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
17
- @extend .odx-button--ghost;
18
-
19
- color: inherit;
20
-
21
- &:hover {
22
- color: inherit;
23
- }
24
- }
25
14
  }
@@ -12,7 +12,7 @@
12
12
  @include utils.interactive();
13
13
 
14
14
  &:hover {
15
- background-color: var(--blue-700-5);
15
+ background-color: var(--odx-color-background-transparent-hover);
16
16
  }
17
17
 
18
18
  &:active {
@@ -4,7 +4,9 @@
4
4
  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
5
5
  line-height: var(--odx-typography-line-height-text-lg);
6
6
  margin-block-end: var(--odx-spacing-25);
7
+ overflow: clip;
7
8
  padding: calc(var(--odx-spacing-12) * 3) var(--odx-spacing-75);
9
+ text-overflow: ellipsis;
8
10
  transition: var(--odx-motion-transition-default);
9
11
  transition-property: background-color, color;
10
12
  user-select: none;
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  &:hover {
25
- background-color: var(--blue-700-5);
25
+ background-color: var(--odx-color-background-transparent-hover);
26
26
  }
27
27
 
28
28
  .odx-icon {
@@ -2,7 +2,7 @@
2
2
  --odx-table-background-color: var(--white);
3
3
  --odx-table-head-border-color: var(--odx-color-stroke-neutral-strong);
4
4
  --odx-table-cell-border-color: var(--odx-color-stroke-neutral-subtle);
5
- --odx-table-cell-background-color-hover: var(--blue-700-5);
5
+ --odx-table-cell-background-color-hover: var(--odx-color-background-transparent-hover);
6
6
  --odx-table-cell-background-color-striped: var(--gray-50);
7
7
  --odx-table-cell-background-color-active: var(--cyan-500-15);
8
8
 
@@ -44,7 +44,7 @@
44
44
  margin-top: calc(#{$gap} / -2);
45
45
 
46
46
  &:hover {
47
- background-color: var(--blue-700-5);
47
+ background-color: var(--odx-color-background-transparent-hover);
48
48
  }
49
49
  }
50
50
 
@@ -57,7 +57,7 @@
57
57
 
58
58
  &.is-active {
59
59
  &:not(.is-disabled, .is-readonly):hover {
60
- background-color: var(--blue-700-5);
60
+ background-color: var(--odx-color-background-transparent-hover);
61
61
  }
62
62
  }
63
63
  }
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  #{$root}-group.is-active &:hover #{$root}__indicator {
72
- background-color: var(--blue-700-5);
72
+ background-color: var(--odx-color-background-transparent-hover);
73
73
  }
74
74
  }
75
75
  }
@@ -54,7 +54,7 @@
54
54
  }
55
55
 
56
56
  #{$root}:hover & {
57
- background-color: var(--blue-700-5);
57
+ background-color: var(--odx-color-background-transparent-hover);
58
58
  }
59
59
 
60
60
  .#{$parent-root}--vertical & {
@@ -12,7 +12,7 @@
12
12
  @include utils.interactive();
13
13
 
14
14
  &:hover {
15
- background-color: var(--blue-700-5);
15
+ background-color: var(--odx-color-background-transparent-hover);
16
16
  }
17
17
 
18
18
  &:active {
@@ -4,7 +4,9 @@
4
4
  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
5
5
  line-height: var(--odx-typography-line-height-text-lg);
6
6
  margin-block-end: var(--odx-spacing-25);
7
+ overflow: clip;
7
8
  padding: calc(var(--odx-spacing-12) * 3) var(--odx-spacing-75);
9
+ text-overflow: ellipsis;
8
10
  transition: var(--odx-motion-transition-default);
9
11
  transition-property: background-color, color;
10
12
  user-select: none;
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  &:hover {
25
- background-color: var(--blue-700-5);
25
+ background-color: var(--odx-color-background-transparent-hover);
26
26
  }
27
27
 
28
28
  .odx-icon {
@@ -2,7 +2,7 @@
2
2
  --odx-table-background-color: var(--white);
3
3
  --odx-table-head-border-color: var(--odx-color-stroke-neutral-strong);
4
4
  --odx-table-cell-border-color: var(--odx-color-stroke-neutral-subtle);
5
- --odx-table-cell-background-color-hover: var(--blue-700-5);
5
+ --odx-table-cell-background-color-hover: var(--odx-color-background-transparent-hover);
6
6
  --odx-table-cell-background-color-striped: var(--gray-50);
7
7
  --odx-table-cell-background-color-active: var(--cyan-500-15);
8
8
 
@@ -44,7 +44,7 @@
44
44
  margin-top: calc(#{$gap} / -2);
45
45
 
46
46
  &:hover {
47
- background-color: var(--blue-700-5);
47
+ background-color: var(--odx-color-background-transparent-hover);
48
48
  }
49
49
  }
50
50
 
@@ -57,7 +57,7 @@
57
57
 
58
58
  &.is-active {
59
59
  &:not(.is-disabled, .is-readonly):hover {
60
- background-color: var(--blue-700-5);
60
+ background-color: var(--odx-color-background-transparent-hover);
61
61
  }
62
62
  }
63
63
  }
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  #{$root}-group.is-active &:hover #{$root}__indicator {
72
- background-color: var(--blue-700-5);
72
+ background-color: var(--odx-color-background-transparent-hover);
73
73
  }
74
74
  }
75
75
  }
@@ -26,7 +26,7 @@
26
26
  --blue-100: var(--odx-palette-blue-70);
27
27
  --blue-600: var(--odx-palette-blue-20);
28
28
  --blue-700: var(--odx-palette-blue-10);
29
- --blue-700-5: var(--odx-palette-blue-80-5);
29
+ --blue-700-5: var(--odx-color-background-transparent-hover);
30
30
  --blue-700-10: var(--odx-palette-blue-80-15);
31
31
  --blue-900: var(--odx-palette-blue-10);
32
32
 
@@ -54,7 +54,7 @@
54
54
  }
55
55
 
56
56
  #{$root}:hover & {
57
- background-color: var(--blue-700-5);
57
+ background-color: var(--odx-color-background-transparent-hover);
58
58
  }
59
59
 
60
60
  .#{$parent-root}--vertical & {