@dative-gpi/foundation-shared-components 1.0.69 → 1.0.71-groupings-2

package/styles/components/fs_tabs.scss

@@ -2,17 +2,9 @@
     display: flex !important;
     width: 100% !important;
 
-    @include web {
-        height: 48px !important;
-        max-height: 48px;
-        min-height: 48px;
-    }
-
-    @include mobile {
-        height: 40px !important;
-        max-height: 40px;
-        min-height: 40px;
-    }
+    height: var(--fs-tab-height) !important;
+    max-height: var(--fs-tab-height);
+    min-height: var(--fs-tab-height);
 }
 
 .fs-tab {
@@ -23,25 +15,19 @@
     align-items: center !important;
     display: flex;
 
+    height: var(--fs-tab-height) !important;
+    max-height: var(--fs-tab-height);
+    min-height: var(--fs-tab-height);
+
     & .fs-tab-label {
         @extend .text-button;
     }
 
-    &:hover {
-        border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
-        color: var(--fs-group-hover-color) !important;
-    }
-
-    @include web {
-        height: 48px !important;
-        max-height: 48px;
-        min-height: 48px;
-    }
-
-    @include mobile {
-        height: 40px !important;
-        max-height: 40px;
-        min-height: 40px;
+    @include clickscreen {
+        &:hover {
+            border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
+            color: var(--fs-group-hover-color) !important;
+        }
     }
 }
 
@@ -50,8 +36,10 @@
     color: var(--fs-group-hover-color) !important;
     border-bottom: 0 !important;
 
-    &:hover {
-        border-bottom: 0 !important;
+    @include clickscreen {
+        &:hover {
+            border-bottom: 0 !important;
+        }
     }
 }
 
@@ -64,13 +52,6 @@
     align-items: center;
     justify-content: center;
 
-    @include web {
-        min-width: 28px;
-        height: 28px;
-    }
-
-    @include mobile {
-        min-width: 24px;
-        height: 24px;
-    }
+    min-width: var(--fs-tab-tag-size);
+    height: var(--fs-tab-tag-size);
 }

package/styles/components/fs_tag.scss

@@ -3,14 +3,6 @@
     border-radius: 2px !important;
     background-color: var(--fs-tag-background-color) !important;
     color: var(--fs-tag-color) !important;
-
-    @include web {
-        height: 28px !important;
-    }
-
-    @include mobile {
-        height: 24px !important;
-    }
 }
 
 .fs-tag-button {
@@ -21,25 +13,19 @@
     background-color: var(--fs-tag-background-color) !important;
     color: var(--fs-tag-color) !important;
 
-    &:hover {
-        background-color: var(--fs-tag-hover-background-color) !important;
-        color: var(--fs-tag-hover-color) !important;
-    }
+    min-width: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
 
     &:active {
         background-color: var(--fs-tag-active-background-color) !important;
         color: var(--fs-tag-active-color) !important;
     }
 
-    @include web {
-        min-width: 20px !important;
-        width: 20px !important;
-        height: 20px !important;
-    }
-
-    @include mobile {
-        min-width: 20px !important;
-        width: 20px !important;
-        height: 16px !important;
+    @include clickscreen {
+        &:hover {
+            background-color: var(--fs-tag-hover-background-color) !important;
+            color: var(--fs-tag-hover-color) !important;
+        }
     }
 }

package/styles/components/fs_text_area.scss

@@ -1,6 +1,7 @@
 .fs-text-area:not(.fs-text-area-auto-grow) {
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
+        padding: var(--fs-text-area-padding) !important;
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -24,18 +25,6 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
-
-        & > .v-field__clearable {
-            align-items: flex-start;
-        }
-        
-        @include web {
-            padding: 11px 16px !important;
-        }
-    
-        @include mobile {
-            padding: 10px 16px !important;
-        }
     } 
 
     & > .v-input__append  {
@@ -46,7 +35,7 @@
 .fs-text-area-auto-grow {
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
-        padding: 0 !important;
+        padding: var(--fs-text-area-padding) !important;
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -72,14 +61,6 @@
         & > .v-field__clearable {
             align-items: flex-start;
         }
-        
-        @include web {
-            padding: 11px 16px !important;
-        }
-    
-        @include mobile {
-            padding: 10px 16px !important;
-        }
     }
 
     & > .v-input__append  {

package/styles/components/fs_tile.scss

@@ -25,25 +25,6 @@
     background: var(--fs-tile-left-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;
-    }
-}
-
 .fs-location-tile-text-container {
     min-width: 0;
 }

package/styles/components/fs_window.scss

@@ -1,7 +1,9 @@
 .fs-window {
-    width: var(--fs-window-width);
+    overflow: var(--fs-window-overflow) !important;
     height: var(--fs-window-height);
+    width: var(--fs-window-width);
 }
+
 .fs-window-item {
     height: 100%;
     min-height: 0;

package/styles/components/fs_wrap_group.scss

@@ -2,8 +2,11 @@
     height: var(--fs-group-height);
     width: var(--fs-group-width);
     max-width: 100%;
+    margin: 0 -1px 0 0;
 
     & > .v-slide-group__container > .v-slide-group__content {
+        margin: 0 1px 0 0;
+        
         padding: var(--fs-group-padding);
         gap: var(--fs-group-gap);
 

package/styles/components/index.scss

@@ -19,7 +19,6 @@
 @import "fs_color.scss";
 @import "fs_color_icon.scss";
 @import "fs_data_table.scss";
-@import "fs_data_iterator_item.scss";
 @import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";
 @import "fs_divider.scss";
@@ -33,7 +32,6 @@
 @import "fs_grid.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_image_card.scss";
@@ -48,24 +46,22 @@
 @import "fs_option_group.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";
+@import "fs_progress_bar.scss";
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";
-@import "fs_search_field.scss";
 @import "fs_select_field.scss";
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
 @import "fs_span.scss";
+@import "fs_status_rich_card.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_time_field.scss";
-@import "fs_timeslot_field.scss";
 @import "fs_tooltip.scss";
 @import "fs_translate_field.scss";
 @import "fs_tree_view_field.scss";

package/styles/globals/index.scss

@@ -1,9 +1,5 @@
 // Warning: Imports are loaded in order. If you need to use a variable / property / mixin, import it after the file that defines it
-@import 'breakpoints.scss';
 @import 'text_fonts.scss';
 @import 'touchscreen.scss';
 @import 'scrollbars.scss';
-@import 'overrides.scss';
-
-// Find a better way to fix this
-@import 'fixes.scss';
+@import 'overrides.scss';

package/styles/globals/overrides.scss

@@ -45,16 +45,6 @@
         width: 100%;
     }
 
-    &.v-checkbox {
-        @include web {
-            min-width: 24px;
-        }
-
-        @include mobile {
-            min-width: 20px;
-        }
-    }
-
     &:has(.v-input__control):has(.v-input__append) > .v-input__append {
         margin-inline-start: 8px !important;
     }
@@ -90,29 +80,27 @@
         }
     }
 
-    &:not(.fs-text-area) > .v-input__control > .v-field {
-        padding: 0 12px 0 16px !important;
+    &:not(.fs-text-area) > .v-input__control > .v-field > .v-field__field {
+        min-height: var(--fs-base-field-input-height) !important;
+        height: var(--fs-base-field-input-height) !important;
 
-        & > .v-field__field > .v-field__input {
-            @extend .text-body;
+        & > .v-field__input {
+            min-height: var(--fs-base-field-input-height) !important;
+            height: var(--fs-base-field-input-height) !important;
             
             padding-bottom: 0px !important;
             padding-inline: 0px !important;
             padding-top: 0px !important;
             flex-wrap: nowrap;
             overflow: hidden;
-        
-            @include web {
-                min-height: 38px !important;
-                height: 38px !important;
-            }
-        
-            @include mobile {
-                min-height: 34px !important;
-                height: 34px !important;
-            }
+
+            @extend .text-body;
         }
     }
+
+    &:not(.fs-text-area):not(.fs-clock-field) > .v-input__control > .v-field {
+        padding: 0 12px 0 16px !important;
+    }
 }
 
 // If there is a prepend, it has a padding on the right and an opacity of 100%
@@ -141,26 +129,24 @@
 .v-text-field__suffix {
     padding: 0 8px 0 0 !important;
 
-    @include web {
-        min-height: 38px !important;
-        height: 38px !important;
-    }
-
-    @include mobile {
-        min-height: 34px !important;
-        height: 34px !important;
-    }
+    min-height: var(--fs-base-field-input-height) !important;
+    height: var(--fs-base-field-input-height) !important;
 
     & > .v-text-field__suffix__text {
         @extend .text-body;
     }
 }
 
-// Ellipsis on input of all fields
 input {
+    // Ellipsis on all fields
     text-overflow: ellipsis;
 }
 
+input, select, textarea {
+    // No zoom on focus for user of a certain version of Chrome, and who ask their mobile to zoom if font-size < 16px
+    touch-action: none;
+}
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -196,13 +182,7 @@ $nthOverlay: 25;
     }
     
     & > .v-icon {
-        @include web {
-            font-size: 24px !important;
-        }
-    
-        @include mobile {
-            font-size: 20px !important;
-        }
+        font-size: var(--fs-group-icon-size) !important;
     }
 }
 
@@ -212,9 +192,11 @@ $nthOverlay: 25;
 }
 
 // Change color on arrows when hovered
-.v-slide-group__prev:hover,
-.v-slide-group__next:hover {
-    color: var(--fs-group-hover-color);
+@include clickscreen {
+    .v-slide-group__prev:hover,
+    .v-slide-group__next:hover {
+        color: var(--fs-group-hover-color);
+    }
 }
 
 /***************************************************************************/

package/styles/globals/scrollbars.scss

@@ -14,6 +14,7 @@
   .fs-hide-x-scrollbar {
     overflow-x: scroll !important;
 
+    // Styles pour WebKit (Chrome, Safari)
     &::-webkit-scrollbar {
       height: 8px;
     }
@@ -25,11 +26,15 @@
     &:hover {
       --scrollbar-x-color: #00000022;
     }
+    &:not(:hover) {
+      --scrollbar-y-color: #00000000;
+    }
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll !important;
 
+    // Styles pour WebKit (Chrome, Safari)
     &::-webkit-scrollbar {
       width: 8px;
     }
@@ -41,6 +46,9 @@
     &:hover {
       --scrollbar-y-color: #00000022;
     }
+    &:not(:hover) {
+      --scrollbar-y-color: #00000000;
+    }
   }
 }
 

package/styles/globals/text_fonts.scss

@@ -7,17 +7,9 @@
     font-style: normal !important;
     font-weight: 700 !important;
 
-    @include web {
-        font-size: 36px !important;
-        line-height: 40px !important;
-        letter-spacing: -0.72px !important;
-    }
-
-    @include mobile {
-        font-size: 28px !important;
-        line-height: 32px !important;
-        letter-spacing: -1.4px !important;
-    }
+    font-size: var(--fs-font-h1-font-size) !important;
+    line-height: var(--fs-font-h1-line-height) !important;
+    letter-spacing: var(--fs-font-h1-letter-spacing) !important;
 }
 
 .text-h2 {
@@ -25,17 +17,9 @@
     font-style: normal !important;
     font-weight: 600 !important;
 
-    @include web {
-        font-size: 26px !important;
-        line-height: 32px !important;
-        letter-spacing: -0.78px !important;
-    }
-
-    @include mobile {
-        font-size: 22px !important;
-        line-height: 24px !important;
-        letter-spacing: -0.88px !important;
-    }
+    font-size: var(--fs-font-h2-font-size) !important;
+    line-height: var(--fs-font-h2-line-height) !important;
+    letter-spacing: var(--fs-font-h2-letter-spacing) !important;
 }
 
 .text-h3 {
@@ -43,17 +27,9 @@
     font-style: normal !important;
     font-weight: 600 !important;
 
-    @include web {
-        font-size: 20px !important;
-        line-height: 24px !important;
-        letter-spacing: -0.6px !important;
-    }
-
-    @include mobile {
-        font-size: 16px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.48px !important;
-    }
+    font-size: var(--fs-font-h3-font-size) !important;
+    line-height: var(--fs-font-h3-line-height) !important;
+    letter-spacing: var(--fs-font-h3-letter-spacing) !important;
 }
 
 .text-body {
@@ -62,17 +38,9 @@
     font-weight: 500 !important;
     text-transform: none !important;
 
-    @include web {
-        font-size: 14px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.42px !important;
-    }
-
-    @include mobile {
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.36px !important;
-    }
+    font-size: var(--fs-font-body-font-size) !important;
+    line-height: var(--fs-font-body-line-height) !important;
+    letter-spacing: var(--fs-font-body-letter-spacing) !important;
 }
 
 .text-button {
@@ -81,17 +49,9 @@
     font-weight: 700 !important;
     text-transform: none !important;
 
-    @include web {
-        font-size: 14px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.42px !important;
-    }
-
-    @include mobile {
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.36px !important;
-    }
+    font-size: var(--fs-font-button-font-size) !important;
+    line-height: var(--fs-font-button-line-height) !important;
+    letter-spacing: var(--fs-font-button-letter-spacing) !important;
 }
 
 .text-overline {
@@ -100,15 +60,7 @@
     text-transform: none !important;
     font-weight: 600 !important;
 
-    @include web {
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: 0 !important;
-    }
-
-    @include mobile {
-        font-size: 10px !important;
-        line-height: 16px !important;
-        letter-spacing: 0 !important;
-    }
+    font-size: var(--fs-font-overline-font-size) !important;
+    line-height: var(--fs-font-overline-line-height) !important;
+    letter-spacing: var(--fs-font-overline-letter-spacing) !important;
 }

package/styles/globals/touchscreen.scss

@@ -1,11 +1,11 @@
 @mixin touchscreen {
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse), (pointer: none) {
         @content;
     }
 }
 
 @mixin clickscreen {
-    @media not all and (hover: none) {
+    @media (hover: hover), (pointer: fine) {
         @content;
     }
 }