@dative-gpi/foundation-shared-components 1.0.128-fix-mobile-3 → 1.0.128-fix-mobile-4

package/components/FSBreadcrumbs.vue

@@ -9,7 +9,7 @@
       #title="{ item }"
     >
       <FSSpan
-        :class="classes(item)"
+        class="fs-breadcrumbs-label"
       >
         {{ item.title }}
       </FSSpan>
@@ -76,18 +76,9 @@ export default defineComponent({
       return props.items;
     });
 
-    const classes = (item: FSBreadcrumbItem): string[] => {
-      const classNames = ["fs-breadcrumbs-label"];
-      if (item.disabled) {
-        classNames.push("fs-breadcrumbs-label-disabled");
-      }
-      return classNames;
-    };
-
     return {
       items,
-      style,
-      classes
+      style
     };
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.128-fix-mobile-3",
+  "version": "1.0.128-fix-mobile-4",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-3",
-    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-3"
+    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-4",
+    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-4"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "900221b1b1a38a793a1cc7b98f9a00a300557d10"
+  "gitHead": "d1100161a35367a5a51a504ce2869c9a7398ccad"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -1,32 +1,16 @@
-.fs-breadcrumbs-label {
-    cursor: pointer;
-    user-select: none;
-    color: var(--fs-breadcrumbs-color);
-
-    &-disabled {
-        color: var(--fs-breadcrumbs-disabled-color) !important;
-    }
-
-    @include clickscreen {
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    &:active {
-        color: var(--fs-breadcrumbs-active-color) !important;
-    }
-}
-
-.fs-breadcrumbs.v-breadcrumbs {
+.fs-breadcrumbs {
     height: var(--fs-breadcrumbs-height) !important;
-    display: flex !important;
     padding: 0 !important;
-    gap: 8px !important;
+    gap: 0 !important;
+
+    max-width: 100%;
 }
 
-.v-breadcrumbs-item {
+.v-breadcrumbs-item,
+.v-breadcrumbs-item--link {
     padding: 0 !important;
+    user-select: none;
+    cursor: pointer;
 
     align-self: stretch;
     display: flex;
@@ -39,15 +23,14 @@
         opacity: 1 !important;
         color: var(--fs-breadcrumbs-disabled-color) !important;
     }
+}
 
-    &:last-child > .fs-breadcrumbs-label-disabled {
-        @extend .text-button;
+.v-breadcrumbs-item:last-child > .fs-breadcrumbs-label {
+    @extend .text-button;
 
-        color: var(--fs-breadcrumbs-active-color) !important;
-    }
+    color: var(--fs-breadcrumbs-active-color) !important;
 }
 
 .v-breadcrumbs-divider {
-    padding: 0 !important;
     color: var(--fs-breadcrumbs-color) !important;
 }

package/styles/components/fs_span.scss

@@ -1,12 +1,18 @@
 .fs-span {
-    align-self: stretch;
     display: flex;
     flex: 1 0 0;
 
-    max-width: fit-content;
     min-width: 0;
 }
 
+:not(.fs-col) > .fs-span {
+    max-width: fit-content;
+}
+
+.fs-col > .fs-span {
+    max-width: 100%;
+}
+
 .fs-span > span {
     text-align: var(--fs-span-text-align);
     align-content: center;