@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/styles/components/fs_data_table.scss

@@ -41,6 +41,7 @@
   
   th {
     box-shadow: none !important;
+    min-width: 40px;
 
     &:hover .fs-header-button {
       opacity: 1;
@@ -120,17 +121,13 @@
 }
 
 .fs-data-table-pagination {
-  @include web {
-    max-width: 280px;
-  }
-
-  @include mobile {
-    max-width: 274px;
-  }
+  max-width: 280px;
 }
 
 .fs-data-table-intersection {
-  margin-top: -8px;
-  height: 10px;
+  height: 8px;
+  position: absolute;
+  bottom: 0;
+  pointer-events: none;
   width: 100%;
 }

package/styles/components/fs_dialog.scss

@@ -1,18 +1,8 @@
-.fs-dialog-mobile {
-  & > .v-overlay__content {
-    max-height: calc(100% - 40px) !important;
-    max-width: 100% !important;
-    width: 100% !important;
-    margin: 0 !important;
-    align-self: flex-end;
-  }
+.fs-dialog-mobile > .v-overlay__content {
+  max-height: 100dvh !important;
+  max-width: 100vw !important;
+  width: 100% !important;
+  margin: 0 !important;
+  position: absolute;
+  bottom: 0;
 }
-
-.fs-dialog {
-  & > .v-overlay__content {
-    max-height: calc(100% - 40px) !important;
-    max-width: calc(100% - 40px) !important;
-    min-width: 35vw !important;
-    width: fit-content !important;
-  }
-}

package/styles/components/fs_dialog_menu.scss

@@ -1,11 +1,13 @@
 .v-overlay__content:has(.fs-dialog-menu) {
     width: fit-content !important;
-    max-height: calc(100vh - 40px) !important;
+    max-height: calc(100dvh - 40px) !important;
+    max-width: calc(100vw - 40px) !important;
     justify-content: center;
     align-items: center;
+    margin: 20px;
 }
 
 .fs-dialog-menu {
-    max-height: calc(100vh - 40px) !important;
+    max-height: calc(100dvh - 40px) !important;
     max-width: calc(100vw - 40px) !important;
 }

package/styles/components/fs_edit_image.scss

@@ -2,6 +2,14 @@
     color: var(--fs-edit-image-overline-text-color) !important;
 }
 
+.fs-edit-image-standard-row {
+    min-width: 0;
+}
+
+.fs-edit-image-standard-label-wrapper {
+    min-width: 0;
+}
+
 .fs-edit-image-hidden-button {
     display: none;
 }

package/styles/components/fs_fade_out.scss

@@ -2,10 +2,18 @@
     @extend .fs-hide-y-scrollbar;
     
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow-x: var(--fs-fade-out-x-overflow);
     max-height: var(--fs-fade-out-max-height);
-    padding: var(--fs-fade-out-padding);
+    min-height: var(--fs-fade-out-height);
     height: var(--fs-fade-out-height);
-    width: var(--fs-fade-out-width);
+    padding: var(--fs-fade-out-padding);
+
+    // Petit hack pour que la barre de scroll elle soit à droite du container
+    padding-right: calc(var(--fs-fade-out-padding) + var(--fs-fade-out-padding-offset));
+    width: calc(var(--fs-fade-out-width) + var(--fs-fade-out-width-offset));
+    margin-right: var(--fs-fade-out-margin-right);
+
+
     flex-direction: column;
     position: relative;
     display: flex;

package/styles/components/fs_filter_button.scss

@@ -1,10 +1,5 @@
 .fs-filter-button-menu {
-    @include web {
-        min-width: 200px !important;
-    }
-    @include mobile {
-        min-width: 180px !important;
-    }
+    width: 300px;
 }
 
 .fs-filter-button-chip {

package/styles/components/fs_gradient_field.scss

@@ -1,16 +1,16 @@
+.fs-gradient-field-select > .v-input__control > .v-field {
+  display: flex;
 
-.fs-gradient-select-field .v-select__selection {
-  width: 100%;
-
-  
-}
+  & > .v-field__prepend-inner {
+    flex: 1;
+  }
 
-.fs-gradient-field-preview {
-  padding: 13px 20px;
-  > span {
-    height: 12px;
-    background: var(--fs-gradient-field-background) !important;
-    width: 100%;
+  & > .v-field__field {
+    flex: 0;
   }
 }
 
+.fs-gradient-field-preview {
+  background: var(--fs-gradient-field-background) !important;
+  min-width: 100%;
+}

package/styles/components/fs_hidden_button.scss

@@ -1,12 +1,7 @@
 .fs-hidden-button-menu {
-    @include web {
-        min-width: 200px !important;
-    }
-    @include mobile {
-        min-width: 180px !important;
-    }
+    width: 300px;
 }
 
 .fs-hidden-button-chip {
-    width: calc(100% - 16px) !important;
+    width: 100%;
 }

package/styles/components/fs_image_card.scss

@@ -1,7 +1,7 @@
 .fs-image-card {
   > .fs-card {
     background-image: var(--fs-image-card-background);
-    background-size: 100%;
+    background-size: cover;
     background-position: center;
   }
 
@@ -11,8 +11,10 @@
   }
 }
 
-.fs-image-card:hover {
-  > .fs-card {
-    background-size: 105%;
+@include clickscreen {
+  .fs-image-card:hover {
+    > .fs-card {
+      background-size: 105%;
+    }
   }
 }

package/styles/components/fs_magic_config_field.scss

@@ -1,5 +1,4 @@
-.fs-magic-config-field > .fs-col:has(.v-switch) {
-    margin: 0 0 6px 0;
+.fs-magic-config-field > :has(.v-switch) {
     align-self: end;
 }
 

package/styles/components/fs_map.scss

@@ -92,11 +92,13 @@
     align-items: center;
     justify-content: center;
 
-    &:hover {
-      filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
-
-      > * {
-        transform: scale(1.15);
+    @include clickscreen {
+      &:hover {
+        filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
+  
+        > * {
+          transform: scale(1.15);
+        }
       }
     }
   }
@@ -128,8 +130,10 @@
     opacity: 0.6;
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    &:hover {
-      opacity: 1;
+    @include clickscreen {
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }

package/styles/components/fs_meta_field.scss

@@ -1,6 +1,4 @@
-// If the custom property value is a boolean or an icon, hide the FSTextField input value in a FSMetaField while on mobile
-.fs-meta-field .v-field:has(.v-field__prepend-inner:not(:empty)) input {
-    @include mobile {
-        content-visibility: hidden;
-    }
+// If the custom property value is an icon, hide the input value to show only the icon
+.fs-meta-icon-field .v-field .v-field__input {
+    content-visibility: hidden;
 }

package/styles/components/fs_option_group.scss

@@ -1,8 +1,18 @@
 .fs-option-group {
-    border-radius: var(--fs-option-group-border-radius) !important;
-    border: var(--fs-option-group-border-size) solid !important;
-    background-color: var(--fs-option-group-background-color) !important;
-    width: fit-content;
+  border-radius: var(--fs-option-group-border-radius) !important;
+  border: var(--fs-option-group-border-size) solid !important;
+  background-color: var(--fs-option-group-background-color) !important;
+  border-color: var(--fs-option-group-border-color) !important;
+  width: fit-content;
+}
 
-    border-color: var(--fs-option-group-border-color) !important;
+.fs-option-group-full-width {
+  border-radius: var(--fs-option-group-border-radius) !important;
+  border: var(--fs-option-group-border-size) solid !important;
+  background-color: var(--fs-option-group-background-color) !important;
+  border-color: var(--fs-option-group-border-color) !important;
+
+  & > * {
+    width: 100% !important;
+  }
 }

package/styles/components/fs_password_field.scss

@@ -4,7 +4,9 @@
     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-hover-color) !important;
+    @include clickscreen {
+        &:hover {
+            color: var(--fs-password-field-hover-color) !important;
+        }
     }
 }

package/styles/components/fs_progress_bar.scss

@@ -0,0 +1,14 @@
+.fs-progress-bar-gradient {
+    flex: 1;
+    background-color: var(--progress-bar-background-color);
+    height: 8px;
+    border-radius: 4px;
+
+    div {
+        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+        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);
+        border-radius: 4px;
+    }
+}

package/styles/components/fs_radio.scss

@@ -11,15 +11,4 @@
 
 .fs-radio-description {
     color: var(--fs-radio-color) !important;
-}
-
-.fs-radio-label .v-input__control {
-    @include web {
-        height: 40px !important;
-    }
-
-    @include mobile {            
-        height: 36px !important;
-    }
-    grid-area: 1 / 2 / 3 / 3 !important;
 }

package/styles/components/fs_rich_text_field.scss

@@ -1,6 +1,7 @@
 .fs-rich-text-field {
     width: 100%;
     min-width: 120px;
+    padding: var(--fs-rich-text-field-padding) !important;
     border: 1px solid var(--fs-rich-text-field-border-color) !important;
     border-radius: 4px !important;
 
@@ -25,15 +26,6 @@
     &: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 {

package/styles/components/fs_select_date_settings.scss

@@ -0,0 +1,3 @@
+.fs-select-field.fs-select-date-setting {
+    min-width: 160px;
+}

package/styles/components/fs_select_field.scss

@@ -21,19 +21,6 @@
     }
 }
 
-.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);
-}
-
 .v-overlay-container > .v-overlay > .v-select__content > .v-list {
     @extend .fs-hide-y-scrollbar;
 
@@ -45,4 +32,8 @@
         border-radius: 4px !important;
         margin-top: 2px !important;
     }
+}
+
+.fs-select-field-multiple-slide-group {
+    opacity: var(--fs-select-field-multiple-opacity);
 }

package/styles/components/fs_slide_group.scss

@@ -1,5 +1,12 @@
 .fs-slide-group {
+    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/fs_span.scss

@@ -1,21 +1,30 @@
 .fs-span {
-    padding-inline-end: 2px;
+    display: flex;
+
+    max-width: 100%;
+    min-width: 0;
+}
+
+.fs-span > span {
+    text-align: var(--fs-span-text-align);
+    align-content: center;
     max-width: 100%;
 }
 
-.fs-span-line-clamp {
+.fs-span-line-clamp > span {
     overflow: hidden;
     display: -webkit-box;
+    line-clamp: var(--fs-span-line-clamp);
     -webkit-box-orient: vertical;
     -webkit-line-clamp: var(--fs-span-line-clamp);
 }
 
-.fs-span-ellipsis {
+.fs-span-ellipsis > span {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.fs-span-pre-wrap {
+.fs-span-pre-wrap > span {
     white-space: pre-wrap;
 }

package/styles/components/fs_switch.scss

@@ -31,6 +31,7 @@
 .fs-switch-label {
     cursor: var(--fs-switch-cursor) !important;
     color: var(--fs-switch-color) !important;
+    padding-top: 2px;
     user-select: none;
 }
 

package/styles/components/fs_tabs.scss

@@ -2,15 +2,9 @@
     display: flex !important;
     width: 100% !important;
 
-    @include web {
-        height: 48px !important;
-        max-height: 48px;
-    }
-
-    @include mobile {
-        height: 40px !important;
-        max-height: 40px;
-    }
+    height: var(--fs-tab-height) !important;
+    max-height: var(--fs-tab-height);
+    min-height: var(--fs-tab-height);
 }
 
 .fs-tab {
@@ -21,23 +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;
-    }
-
-    @include mobile {
-        height: 40px !important;
-        max-height: 40px;
+    @include clickscreen {
+        &:hover {
+            border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
+            color: var(--fs-group-hover-color) !important;
+        }
     }
 }
 
@@ -46,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;
+        }
     }
 }
 
@@ -58,14 +50,8 @@
     color: var(--fs-tab-tag-color);
     display: flex;
     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,7 +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;
-        height: var(--fs-text-area-height);
+        padding: var(--fs-text-area-padding) !important;
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -25,21 +25,17 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
-        
-        @include web {
-            padding: 11px 16px !important;
-        }
-    
-        @include mobile {
-            padding: 10px 16px !important;
-        }
+    } 
+
+    & > .v-input__append  {
+        padding-top: 0px;
     }
 }
 
 .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;
@@ -61,13 +57,13 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
-        
-        @include web {
-            padding: 11px 16px !important;
-        }
-    
-        @include mobile {
-            padding: 10px 16px !important;
+
+        & > .v-field__clearable {
+            align-items: flex-start;
         }
     }
+
+    & > .v-input__append  {
+        padding-top: 0px;
+    }
 }

package/styles/components/fs_tile.scss

@@ -1,16 +1,28 @@
 .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);
+    bottom: 0px;
+    left: 0;
+    width: 100%;
     height: 3px;
-    background: var(--fs-tile-border-color);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background: var(--fs-tile-bottom-border-color);
+}
+
+
+.fs-tile-left {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 3px;
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+    background: var(--fs-tile-left-border-color);
 }
 
 .fs-tile-checkbox {
@@ -20,14 +32,8 @@
     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;
 }