@dative-gpi/foundation-shared-components 0.0.8 → 0.0.10

package/styles/components/fs_password_field.scss

@@ -1,10 +1,10 @@
 .fs-password-field-icon {
     opacity: 1 !important;
     cursor: var(--fs-password-field-cursor) !important;
-    color: var(--fs-password-field-base-text) !important;
+    color: var(--fs-password-field-color) !important;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
     &:hover {
-        color: var(--fs-password-field-dark-text) !important;
+        color: var(--fs-password-field-hover-color) !important;
     }
 }

package/styles/components/fs_row.scss

@@ -1,7 +1,10 @@
 .fs-row {
     display: flex;
     flex-wrap: var(--fs-row-flex-wrap);
+    padding: var(--fs-row-padding);
     gap: var(--fs-row-gap);
+    max-width: 100%;
+    max-height: 100%;
 
     &-top-left {
         align-items: flex-start;
@@ -86,6 +89,6 @@
     }
 
     &-fixed {
-        width: var(--fs-row-height);
+        height: var(--fs-row-height);
     }
 }

package/styles/components/fs_select_field.scss

@@ -0,0 +1,71 @@
+.fs-select-field {
+    padding: 0px !important;
+    width: 100%;
+
+    & > .v-input__control > .v-field {
+        border: 1px solid var(--fs-select-field-border-color) !important;
+        cursor: var(--fs-select-field-cursor) !important;
+        border-radius: 4px !important;
+        padding: 0 16px !important;
+        gap: 8px;
+
+        &--error {
+            border-color: var(--fs-select-field-error-border-color) !important;
+        }
+
+        &:not(.v-field--error):focus-within {
+            border-color: var(--fs-select-field-active-border-color) !important;
+        }
+
+        & > .v-field__outline {
+            display: none;
+        }
+
+        & > .v-field__field > .v-field__input {
+            @extend .text-body;
+        
+            padding-inline: 0 !important;
+            color: var(--fs-select-field-color);
+            cursor: var(--fs-select-field-cursor) !important;
+        
+            @include web {
+                min-height: 38px !important;
+                height: 38px !important;
+            }
+        
+            @include mobile {
+                min-height: 34px !important;
+                height: 34px !important;
+            }
+
+            & > .v-select__selection {
+                height: 100%;
+            }
+        }
+
+        & > .v-field__clearable {
+            margin-inline: 0px;
+        }
+
+        & > .v-field__append-inner {
+            color: var(--fs-select-field-color);
+
+            & > i {
+                margin-inline-start: 0px;
+            }
+        }
+    }
+}
+
+.fs-select-field-label {
+    color: var(--fs-select-field-color);
+}
+
+.fs-select-field-messages {
+    align-self: stretch;
+    color: var(--fs-select-field-error-color);
+}
+
+.fs-select-field-description {
+    color: var(--fs-select-field-color);
+}

package/styles/components/fs_slide_group.scss

@@ -0,0 +1,6 @@
+.fs-slide-group {
+    & > .v-slide-group__container > .v-slide-group__content {
+        padding: var(--fs-group-padding);
+        gap: var(--fs-group-gap);
+    }
+}

package/styles/components/fs_slider.scss

@@ -1,6 +1,34 @@
 .fs-slider {
     padding: 0px !important;
-    width: 100%;
+    width: calc(100% - 16px);
+
+    & .v-slider__container {
+        cursor: var(--fs-slider-cursor);
+        opacity: 1 !important;
+    }
+
+    & .v-slider-track__background {
+        background-color: var(--fs-slider-track-color);
+        height: 6px !important;
+        opacity: 1;
+    }
+
+    & .v-slider-track__fill {
+        display: none;
+    }
+
+    & .v-slider-track__tick {
+        background-color: var(--fs-slider-thumb-color);
+        border-radius: 50%;
+    }
+
+    & .v-slider-thumb {
+        color: var(--fs-slider-thumb-color);
+
+        &__surface:before {
+            display: none;
+        }
+    }
 }
 
 .fs-slider-label {
@@ -9,12 +37,4 @@
 
 .fs-slider-description {
     color: var(--fs-slider-color);
-}
-
-.v-slider-thumb__ripple {
-    display: none;
-}
-
-.v-slider-thumb__surface:after {
-    content: none;
 }

package/styles/components/fs_span.scss

@@ -1,5 +1,13 @@
 .fs-span {
     padding-inline-end: 2px;
+    max-width: 100%;
+}
+
+.fs-span-line-clamp {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 }
 
 .fs-span-ellipsis {

package/styles/components/fs_submit_dialog.scss

@@ -0,0 +1,9 @@
+.fs-submit-dialog {
+    min-width: 35vw !important;
+}
+
+.fs-submit-dialog-actions {
+    position: sticky;
+    right: 8px;
+    bottom: 8px;
+}

package/styles/components/fs_tabs.scss

@@ -15,6 +15,8 @@
     padding: 0 16px;
     border-bottom: 1px solid var(--fs-group-color) !important;
     color: var(--fs-group-color) !important;
+    display: flex;
+    align-items: center;
 
     & .fs-tab-label {
         @extend .text-button;
@@ -49,6 +51,8 @@
     border-radius: 4px;
     background-color: var(--fs-tab-tag-background-color);
     color: var(--fs-tab-tag-color);
+    display: flex;
+    align-items: center;
 
     @include web {
         min-width: 28px;

package/styles/components/fs_tag_field.scss

@@ -1,14 +1,3 @@
-.fs-tag-field-icon {
-    opacity: 1 !important;
-    cursor: var(--fs-tag-field-cursor) !important;
-    color: var(--fs-tag-field-base-text) !important;
-    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-
-    &:hover {
-        color: var(--fs-tag-field-dark-text) !important;
-    }
-}
-
 .fs-tag-field-label {
     color: var(--fs-tag-field-color);
 }

package/styles/components/fs_text_field.scss

@@ -4,8 +4,10 @@
 
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-field-border-color) !important;
+        cursor: var(--fs-text-field-cursor) !important;
         border-radius: 4px !important;
         padding: 0 16px !important;
+        gap: 8px;
 
         &--error {
             border-color: var(--fs-text-field-error-border-color) !important;
@@ -19,23 +21,29 @@
             display: none;
         }
 
-        & > .v-field__field > input {
-            @extend .text-body;
-        
-            padding-inline: 0 !important;
-            cursor: var(--fs-text-field-cursor) !important;
-            color: var(--fs-text-field-color);
-        
-            @include web {
-                min-height: 46px !important;
-                height: 46px !important;
-            }
-        
-            @include mobile {
-                min-height: 34px !important;
-                height: 34px !important;
+        & > .v-field__field {
+            &  > input {
+                @extend .text-body;
+            
+                padding-inline: 0 !important;
+                color: var(--fs-text-field-color);
+                cursor: var(--fs-select-field-cursor) !important;
+            
+                @include web {
+                    min-height: 38px !important;
+                    height: 38px !important;
+                }
+            
+                @include mobile {
+                    min-height: 34px !important;
+                    height: 34px !important;
+                }
             }
         }
+
+        & > .v-field__clearable {
+            margin-inline: 0px;
+        }
     }
 }
 

package/styles/components/fs_tile.scss

@@ -0,0 +1,33 @@
+.fs-tile {
+    position: relative;
+    border-bottom-left-radius: 0px !important;
+    border-bottom-right-radius: 0px !important;
+}
+
+.fs-tile-bottom {
+    position: absolute;
+    bottom: -1px;
+    left: -1px;
+    width: calc(100% + 2px);
+    height: 3px;
+    background: var(--fs-tile-border-color);
+}
+
+.fs-tile-checkbox {
+    border-radius: 4px;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    top: 1px;
+    right: 1px;
+
+    @include web {
+        width: 40px;
+        height: 40px;
+    }
+
+    @include mobile {
+        width: 32px;
+        height: 32px;
+    }
+}

package/styles/components/fs_tooltip.scss

@@ -0,0 +1,5 @@
+.fs-tooltip > .v-overlay__content {
+    background: none !important;
+    color: initial !important;
+    padding: 0 !important;
+}

package/styles/components/fs_wrap_group.scss

@@ -1,12 +1,11 @@
+.fs-wrap-group {
+    & > .v-slide-group__container > .v-slide-group__content {
+        padding: var(--fs-group-padding);
+        gap: var(--fs-group-gap);
 
-@include clickscreen {
-    .fs-wrap-group {
-        & .v-slide-group__container .v-slide-group__content {
-            flex: 0 1 auto !important;
-
-            & .fs-row {
-                flex-wrap: wrap !important;
-            }
+        @include clickscreen {
+            flex: 0 1 auto;
+            flex-wrap: wrap;
         }
     }
 }

package/styles/components/index.scss

@@ -1,19 +1,38 @@
+@import "fs_autocomplete_field.scss";
 @import "fs_breadcrumbs.scss";
 @import "fs_button.scss";
 @import "fs_calendar.scss";
 @import "fs_card.scss";
+@import "fs_carousel.scss";
 @import "fs_checkbox.scss";
+@import "fs_chip.scss";
+@import "fs_clock.scss";
 @import "fs_col.scss";
 @import "fs_color.scss";
-@import "fs_date_picker.scss";
+@import "fs_color_icon.scss";
+@import "fs_container.scss";
+@import "fs_data_table.scss";
+@import "fs_data_iterator_item.scss";
+@import "fs_date_field.scss";
+@import "fs_dialog.scss";
+@import "fs_divider.scss";
 @import "fs_fade_out.scss";
+@import "fs_filter_button.scss";
+@import "fs_header_button.scss";
+@import "fs_hidden_button.scss";
+@import "fs_icon_field.scss";
 @import "fs_icon.scss";
+@import "fs_image.scss";
+@import "fs_load_tile.scss";
 @import "fs_password_field.scss";
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";
+@import "fs_select_field.scss";
+@import "fs_slide_group.scss";
 @import "fs_slider.scss";
 @import "fs_span.scss";
+@import "fs_submit_dialog.scss";
 @import "fs_switch.scss";
 @import "fs_tag.scss";
 @import "fs_tabs.scss";
@@ -21,4 +40,6 @@
 @import "fs_text_area.scss";
 @import "fs_text_field.scss";
 @import "fs_text.scss";
+@import "fs_tile.scss";
+@import "fs_tooltip.scss";
 @import "fs_wrap_group.scss";

package/styles/globals/breakpoints.scss

@@ -1,5 +1,12 @@
+$extra-small-breakpoint: 599px;
 $mobile-breakpoint: 1264px;
 
+@mixin extra-small {
+    @media only screen and (max-width: $extra-small-breakpoint) {
+        @content;
+    }
+}
+
 @mixin mobile {
     @media only screen and (max-width: $mobile-breakpoint) {
         @content;

package/styles/globals/overrides.scss

@@ -30,34 +30,47 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 0; 
 }
 
+.v-overlay__content {
+    min-width: 0 !important;
+}
+
 /***** Applies to all slide groups (FSTabs, FSSlideGroup, FSWrapGroup) *****/
 
 // On touchscreen, hide arrows
 // Otherwise show small ones with base text color
 .v-slide-group__prev,
 .v-slide-group__next {
-    transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--fs-group-color);
     min-width: 24px !important;
     width: 24px !important;
     flex: 1 1 0 !important;
-    color: var(--fs-group-color);
 
     @include touchscreen {
         display: none !important;
     }
 }
 
-// Light background color & dark text color on arrows when hovered
+// Change color on arrows when hovered
 .v-slide-group__prev:hover,
 .v-slide-group__next:hover {
-    background-color: var(--fs-group-hover-background-color);
     color: var(--fs-group-hover-color);
 }
 
-// Light text color on arrows when disabled
+// remove arrows when disabled
 .v-slide-group__prev--disabled,
 .v-slide-group__next--disabled {
-    color: var(--fs-group-disabled-color) !important;
+    display: none !important;
+}
+
+// Badges are totally overriden
+.v-badge__badge {
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 3px 4px 3px 4px !important;
+    font-size: 10px !important;
+    font-weight: 900;
+    min-width: 16px !important;
+    height: 16px !important;
 }
 
-/***************************************************************************/
+/***************************************************************************/

package/styles/globals/text_fonts.scss

@@ -63,14 +63,14 @@
     text-transform: none !important;
 
     @include web {
-        font-size: 16px !important;
-        line-height: 20px !important;
+        font-size: 14px !important;
+        line-height: 16px !important;
         letter-spacing: -0.48px !important;
     }
 
     @include mobile {
-        font-size: 13px !important;
-        line-height: 16px !important;
+        font-size: 12px !important;
+        line-height: 14px !important;
         letter-spacing: -0.39px !important;
     }
 }
@@ -82,14 +82,14 @@
     text-transform: none !important;
 
     @include web {
-        font-size: 16px !important;
-        line-height: 20px !important;
+        font-size: 14px !important;
+        line-height: 16px !important;
         letter-spacing: -0.48px !important;
     }
 
     @include mobile {
-        font-size: 13px !important;
-        line-height: 16px !important;
+        font-size: 12px !important;
+        line-height: 14px !important;
         letter-spacing: -0.39px !important;
     }
 }

package/themes/default.ts

@@ -1,22 +1,12 @@
 import { ThemeDefinition } from "vuetify";
 
-export enum ColorBase {
-    Background = "background",
-    Light      = "light",
-    Dark       = "dark",
-    Primary    = "primary",
-    Error      = "error",
-    Warning    = "warning",
-    Success    = "success"
-};
-
 export const DefaultTheme: ThemeDefinition = {
     dark: false,
     colors: {
         "background": "#F9F9F9",
         "light"     : "#E1E2E3", // hsv(216, 1,   89)
         "dark"      : "#3F4040", // hsv(211, 1,   25)
-        "primary"   : "#0058E6", // hsv(217, 100, 90)
+        "primary"   : "#0059E5", // hsv(217, 100, 90)
         "success"   : "#6DE038", // hsv(101, 75,  88)
         "warning"   : "#E6A52E", // hsv(39,  80,  90)
         "error"     : "#E01212"  // hsv(0,   92,  88)

package/utils/css.ts

@@ -0,0 +1,11 @@
+export const sizeToVar = (value: string | number | null, nullValue: string = "fit-content", unit: "px" | "%" | "em"| "vw" | "vh" = "px"): string => {
+    if (value == null) {
+        return nullValue;
+    }
+    return typeof value === 'string' ? value : `${value}${unit}`;
+};
+
+export const varToSize = (value: string): number => {
+    const parsed = parseInt(value.replace(/[^0-9.]/g, ''));
+    return isNaN(parsed) ? 0 : parsed;
+}