@dative-gpi/foundation-shared-components 1.1.24-unit-formatter → 1.1.24-unit-formatter-2

package/styles/components/fs_chip.scss

@@ -1,32 +1,3 @@
-.fs-chip-container {
-    text-decoration: none;
-}
-
 .fs-chip {
     user-select: none;
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    background-color: var(--fs-chip-background-color) !important;
-    border: 1px solid var(--fs-chip-border-color) !important;
-    height: var(--fs-chip-height) !important;
-    color: var(--fs-chip-color) !important;
-    border-radius: 50px !important;
-    padding: 2px 20px !important;
-}
-
-.fs-chip-clickable {
-    cursor: pointer !important;
-
-    &:active {
-        background-color: var(--fs-chip-active-background-color) !important;
-        border-color: var(--fs-chip-active-border-color) !important;
-        color: var(--fs-chip-active-color) !important;
-    }
-
-    @include clickscreen {
-        &:hover {
-            background-color: var(--fs-chip-hover-background-color) !important;
-            border-color: var(--fs-chip-hover-border-color) !important;
-            color: var(--fs-chip-hover-color) !important;
-        }
-    }
 }

package/styles/components/fs_filter_button.scss

@@ -1,5 +1,10 @@
 .fs-filter-button-menu {
-    width: 300px;
+    max-width: 400px;
+    overflow: hidden;
+}
+
+.fs-filter-button-menu * {
+    min-width: 0;
 }
 
 .fs-filter-button-chip {

package/styles/components/fs_map.scss

@@ -27,12 +27,18 @@
     transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  .fs-map-overlay-desktop {
+.fs-map-overlay-desktop {
     position: absolute;
     top: 0;
     left: 0;
     margin: 12px;
     max-height: calc(100% - 24px);
+    display: flex;
+    flex-direction: column;
+
+    .fs-card {
+      min-height: 0;
+    }
   }
 
   .fs-map-layer-button {

package/styles/components/fs_progress_bar.scss

@@ -1,14 +1,70 @@
-.fs-progress-bar-gradient {
+.fs-progress-bar-wrapper {
     flex: 1;
-    background-color: var(--progress-bar-background-color);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.fs-progress-bar-track {
+    position: relative;
+    background-color: var(--progress-bar-background);
     height: 8px;
     border-radius: 4px;
 
-    div {
-        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    .fs-progress-bar-fill {
+        position: absolute;
         height: 100%;
-        background: linear-gradient(to right, var(--progress-bar-gradient-start-color) 0%, var(--progress-bar-gradient-end-color) var(--progress-bar-total-relative-width));
-        width: var(--progress-bar-gradient-width);
+        left: var(--progress-bar-fill-left);
+        width: var(--progress-bar-fill-width);
+        background: linear-gradient(
+            to right,
+            var(--progress-bar-gradient-start) var(--progress-bar-gradient-start-stop),
+            var(--progress-bar-gradient-end)   var(--progress-bar-gradient-end-stop)
+        );
         border-radius: 4px;
+        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .fs-progress-bar-cursor {
+        position: absolute;
+        top: 50%;
+        left: var(--progress-bar-cursor-position);
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: linear-gradient(
+            to right,
+            var(--progress-bar-gradient-start),
+            var(--progress-bar-gradient-end)
+        );
+        transform: translate(-50%, -50%);
+        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+        .fs-progress-bar-cursor-label {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 50%;
+            transform: translateX(-50%);
+            white-space: nowrap;
+            pointer-events: none;
+        }
+    }
+}
+
+.fs-progress-bar-labels {
+    position: relative;
+    height: 16px;
+
+    .fs-progress-bar-label {
+        position: absolute;
+        transform: translateX(-50%);
+
+        &.fs-progress-bar-label--start {
+            transform: translateX(0);
+        }
+
+        &.fs-progress-bar-label--end {
+            transform: translateX(-100%);
+        }
     }
 }

package/styles/components/fs_snackbar.scss

@@ -0,0 +1,7 @@
+.fs-snackbar {
+    .v-snackbar__wrapper {
+        border-radius: var(--fs-snackbar-border-radius);
+        background-color: var(--fs-snackbar-background-color);
+        color: var(--fs-snackbar-color);
+    }
+}

package/styles/components/index.scss

@@ -12,12 +12,10 @@
 @import "fs_card.scss";
 @import "fs_checkbox.scss";
 @import "fs_chip.scss";
-@import "fs_clickable.scss";
 @import "fs_clock.scss";
 @import "fs_col.scss";
 @import "fs_color_field.scss";
 @import "fs_color.scss";
-@import "fs_color_icon.scss";
 @import "fs_data_table.scss";
 @import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";
@@ -53,6 +51,7 @@
 @import "fs_select_field.scss";
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
+@import "fs_snackbar.scss";
 @import "fs_span.scss";
 @import "fs_status_rich_card.scss";
 @import "fs_switch.scss";

package/styles/globals/overrides.scss

@@ -175,7 +175,7 @@ $nthOverlay: 25;
     color: var(--fs-group-color);
     min-width: 32px !important;
     width: 32px !important;
-    flex: 1 1 0 !important;
+    flex: 0 1 32px !important;
 
     @include touchscreen {
         display: none !important;

package/styles/components/fs_clickable.scss

@@ -1,69 +0,0 @@
-.fs-clickable {
-    border: var(--fs-clickable-border-size) var(--fs-clickable-border-style) !important;
-    border-radius: var(--fs-clickable-border-radius) !important;
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    cursor: pointer;
-    
-    background-color: var(--fs-clickable-background-color) !important;
-    border-color: var(--fs-clickable-border-color) !important;
-    color: var(--fs-clickable-color) !important;
-
-    &.fs-clickable-disabled {
-        cursor: default;
-    }
-    
-    &:not(.fs-clickable-disabled):active:not(:has( .fs-stopclick:hover)) {
-        background-color: var(--fs-clickable-active-background-color) !important;
-        border-color: var(--fs-clickable-active-border-color) !important;
-        color: var(--fs-clickable-active-color) !important;
-
-        & .fs-card-clickable {
-            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-            background-color: var(--fs-clickable-active-background-color);
-        }
-    }
-
-    @include clickscreen {
-        &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
-            background-color: var(--fs-clickable-hover-background-color) !important;
-            border-color: var(--fs-clickable-hover-border-color) !important;
-            color: var(--fs-clickable-hover-color) !important;
-    
-            & .fs-card-clickable {
-                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-                background-color: var(--fs-clickable-hover-background-color);
-            }
-        }
-    }
-}
-
-a:has(.fs-clickable) {
-    position: relative !important;
-    text-decoration: none;
-    padding: 0 !important;
-    height: var(--fs-clickable-height);
-    width: var(--fs-clickable-width);
-}
-
-button:has(.fs-clickable) {
-    position: relative;
-    height: var(--fs-clickable-height);
-    width: var(--fs-clickable-width);
-}
-
-.fs-clickable-load {
-    cursor: default;
-    position: absolute !important;
-    height: 100% !important;
-    width: 100% !important;
-    left: 0;
-    top: 0;
-    
-    & > svg {
-        height: 24px !important;
-    }
-}
-
-*:has(~ .fs-clickable-load) > * {
-    opacity: 0;
-}

package/styles/components/fs_color_icon.scss

@@ -1,3 +0,0 @@
-.fs-color-icon {
-    cursor: pointer;
-}