@dative-gpi/foundation-shared-components 0.0.7 → 0.0.9

package/styles/components/fs_icon_field.scss

@@ -0,0 +1,12 @@
+.fs-icon-field-label {
+    color: var(--fs-icon-field-color);
+}
+
+.fs-icon-field-messages {
+    align-self: stretch;
+    color: var(--fs-icon-field-error-color);
+}
+
+.fs-icon-field-set {
+    max-width: 100%;
+}

package/styles/components/fs_image.scss

@@ -0,0 +1,7 @@
+.fs-image {
+    border-radius: 4px;
+
+    &.v-responsive {
+        flex: 0 0 auto !important;
+    }
+}

package/styles/components/fs_load_tile.scss

@@ -0,0 +1,49 @@
+.fs-load-tile {
+    position: relative;
+}
+
+.fs-load-tile .v-skeleton-loader {
+    background-color: var(--fs-load-tile-background-color);
+
+    & .v-skeleton-loader__article {
+        gap: 8px;
+
+        @include web {
+            width: 204px;
+            height: 100px;
+        }
+
+        @include mobile {
+            width: 198px;
+            height: 90px;
+        }
+    }
+
+    & .v-skeleton-loader__heading {
+        margin: 0;
+    }
+
+    & .v-skeleton-loader__paragraph {
+        gap: 8px;
+    }
+
+    & .v-skeleton-loader__text {
+        margin: 0;
+    }
+
+    & .v-skeleton-loader__bone {
+        border-radius: 4px;
+    }
+
+    & .v-skeleton-loader__image {
+        @include web {
+            width: 100px;
+            height: 100px;
+        }
+
+        @include mobile {
+            width: 90px;
+            height: 90px;
+        }
+    }
+}

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_rich_text_field.scss

@@ -0,0 +1,67 @@
+.fs-rich-text-field {
+    width: 100%;
+    outline: none !important;
+    border: 1px solid var(--fs-rich-text-field-border-color) !important;
+    border-radius: 4px !important;
+
+    min-height: var(--fs-rich-text-field-min-height);
+    color: var(--fs-rich-text-field-color);
+    margin: 2px 2px 2px 0 !important;
+
+
+    &:focus-within {
+        border-color: var(--fs-rich-text-field-active-border-color) !important;
+    }
+        
+    @include web {
+        padding: 10px 12px !important;
+    }
+
+    @include mobile {
+        padding: 6px 16px !important;
+    }
+
+}
+
+.fs-rich-text-field-undo {
+    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    cursor: var(--fs-rich-text-field-undo-cursor);
+}
+
+.fs-rich-text-field-icon {
+    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    cursor: var(--fs-rich-text-field-icon-cursor);
+}
+
+.fs-rich-text-field-label {
+    color: var(--fs-rich-text-field-color);
+}
+
+.fs-rich-text-field-description {
+    color: var(--fs-rich-text-field-color);
+}
+
+.editor-text-underline {
+    text-decoration: underline;
+}
+
+.editor-text-bold {
+    font-weight: bold;
+}
+
+.editor-text-italic {
+    font-style: italic;
+}
+
+.editor-text-strikethrough {
+    text-decoration: line-through;
+}
+
+.editor-text-underline-strikethrough {
+    text-decoration: underline line-through;
+}
+
+.editor-link {
+    color: var(--fs-rich-text-field-link-color);
+    text-decoration: underline;
+}

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

@@ -0,0 +1,40 @@
+.fs-slider {
+    padding: 0px !important;
+    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 {
+    color: var(--fs-slider-color);
+}
+
+.fs-slider-description {
+    color: var(--fs-slider-color);
+}

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,10 +1,8 @@
-.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);
+.fs-tag-field-label {
+    color: var(--fs-tag-field-color);
+}
 
-    &:hover {
-        color: var(--fs-tag-field-dark-text) !important;
-    }
+.fs-tag-field-messages {
+    align-self: stretch;
+    color: var(--fs-tag-field-error-color);
 }

package/styles/components/fs_text_area.scss

@@ -0,0 +1,105 @@
+.fs-text-area:not(.fs-text-area-auto-grow) {
+    padding: 0px !important;
+    width: 100%;
+
+    & > .v-input__control > .v-field {
+        border: 1px solid var(--fs-text-area-border-color) !important;
+        border-radius: 4px !important;
+        padding: 0 !important;
+
+        &--error {
+            border-color: var(--fs-text-area-error-border-color) !important;
+        }
+
+        &:not(.v-field--error):focus-within {
+            border-color: var(--fs-text-area-active-border-color) !important;
+        }
+
+        & > .v-field__outline {
+            display: none;
+        }
+
+        & > .v-field__field > .v-field__input {
+            @extend .text-body;
+
+            @extend .fs-hide-y-scrollbar;
+
+            mask-image: none !important;
+            -webkit-mask-image: none !important;
+
+            padding-inline: 0 !important;
+            margin: 2px 2px 2px 0 !important;
+            cursor: var(--fs-text-area-cursor) !important;
+            min-height: var(--fs-text-area-min-height);
+            height: var(--fs-text-area-height);
+            color: var(--fs-text-area-color);
+        
+            @include web {
+                padding: 12px 0 12px 16px !important;
+            }
+        
+            @include mobile {
+                padding: 7px 0 7px 16px !important;
+            }
+        }
+    }
+}
+
+.fs-text-area-auto-grow {
+    padding: 0px !important;
+    width: 100%;
+
+    & > .v-input__control > .v-field {
+        border: 1px solid var(--fs-text-area-border-color) !important;
+        border-radius: 4px !important;
+        padding: 0 !important;
+
+        &--error {
+            border-color: var(--fs-text-area-error-border-color) !important;
+        }
+
+        &:not(.v-field--error):focus-within {
+            border-color: var(--fs-text-area-active-border-color) !important;
+        }
+
+        & > .v-field__outline {
+            display: none;
+        }
+
+        & > .v-field__field > .v-field__input {
+            @extend .text-body;
+
+            @extend .fs-hide-y-scrollbar;
+
+            mask-image: none !important;
+            -webkit-mask-image: none !important;
+
+            padding-inline: 0 !important;
+            margin: 2px 2px 2px 0 !important;
+            cursor: var(--fs-text-area-cursor) !important;
+            height: var(--fs-text-area-height);
+            color: var(--fs-text-area-color);
+        
+            @include web {
+                padding: 12px 0 12px 16px !important;
+            }
+        
+            @include mobile {
+                padding: 7px 0 7px 16px !important;
+            }
+        }
+    }
+}
+
+.fs-text-area-label {
+    color: var(--fs-text-area-color);
+}
+
+.fs-text-area-messages {
+    align-self: stretch;
+    color: var(--fs-text-area-error-color);
+}
+
+.fs-text-area-description {
+    color: var(--fs-text-area-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,18 +1,44 @@
+@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_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_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";
 @import "fs_tag_field.scss";
+@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;
 }
 
-/***************************************************************************/
+/***************************************************************************/