@odx/ui 3.4.1 → 3.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 3.4.3
+
+### Patch Changes
+
+- a0b9ae3: Use browser native text decoration for links
+
+## 3.4.2
+
+### Patch Changes
+
+- ce320b1: Automatically break words in card titles with long words
+
 ## 3.4.1
 
 ### Patch Changes

package/core-theme.css

@@ -3155,6 +3155,7 @@ html body .odx-fs-italic {
 .odx-card--launch-tile .odx-card__title, .odx-card--launch-tile-centered .odx-card__title {
   font-size: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
   line-height: calc(var(--odx-vertical-rythm-base-size) * 1.25);
+  overflow-wrap: anywhere;
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
   -webkit-box-orient: block-axis;
@@ -4333,41 +4334,20 @@ html body .odx-fs-italic {
   outline-color: transparent;
   pointer-events: none;
 }
-.odx-link::before {
-  transition-delay: 0ms;
-  transition-duration: var(--odx-v-transition-duration);
-  transition-property: width;
-  transition-timing-function: var(--odx-v-transition-easing-fn);
-  background-color: currentcolor;
-  bottom: 1px;
-  content: "";
-  height: 1px;
-  left: 50%;
-  position: absolute;
-  transform: translateX(-50%);
-  width: 0;
-}
 @media (hover: hover){
 .odx-link:hover {
   color: var(--odx-c-link-hover);
-}
-}
-@media (hover: hover){
-.odx-link:hover::before {
-  width: 98%;
+  text-decoration: underline;
 }
 }
 .odx-link:active {
   color: var(--odx-c-link-active);
 }
 .odx-link.is-disabled {
-  color: var(--odx-c-link-disabled) !important;
+  color: var(--odx-c-link-disabled);
   pointer-events: none;
   text-decoration: none;
 }
-.odx-link.is-disabled::before {
-  content: none;
-}
 
 .odx-list {
   display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "3.4.1",
+  "version": "3.4.3",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/components/card.component.scss

@@ -86,6 +86,7 @@
     #{$root}__title {
       font-size: dimensions.get-size(math.div(20, 24));
       line-height: dimensions.get-size(math.div(30, 24));
+      overflow-wrap: anywhere;
 
       @include typography.font-weight(medium);
       @include typography.line-clamp(3);

package/scss/components/link.component.scss

@@ -11,25 +11,9 @@
   position: relative;
   user-select: auto;
 
-  &::before {
-    @include motion.transition(width);
-
-    background-color: currentcolor;
-    bottom: 1px;
-    content: '';
-    height: 1px;
-    left: 50%;
-    position: absolute;
-    transform: translateX(-50%);
-    width: 0;
-  }
-
   &:hover {
     color: var(--odx-c-link-hover);
-
-    &::before {
-      width: 98%;
-    }
+    text-decoration: underline;
   }
 
   &:active {
@@ -37,12 +21,8 @@
   }
 
   &.is-disabled {
-    color: var(--odx-c-link-disabled) !important;
+    color: var(--odx-c-link-disabled);
     pointer-events: none;
     text-decoration: none;
-
-    &::before {
-      content: none;
-    }
   }
 }