@dative-gpi/foundation-shared-components 1.0.57 → 1.0.58-groupings

package/styles/components/fs_clickable.scss

@@ -11,18 +11,7 @@
     &.fs-clickable-disabled {
         cursor: default;
     }
-
-    &: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);
-        }
-    }
-
+    
     &: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;
@@ -33,6 +22,19 @@
             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) {
@@ -52,20 +54,11 @@ button:has(.fs-clickable) {
 .fs-clickable-load {
     cursor: default;
     position: absolute !important;
+    height: 100% !important;
     width: 100% !important;
     left: 0;
     top: 0;
-
-    @include web {
-        height: 40px !important;
-        padding: 8px 0;
-    }
-
-    @include mobile {
-        height: 36px !important;
-        padding: 6px 0;
-    }
-
+    
     & > svg {
         height: 24px !important;
     }

package/styles/components/fs_clock.scss

@@ -33,16 +33,6 @@
             text-align: center;
             cursor: var(--fs-clock-field-cursor) !important;
             color: var(--fs-clock-field-color);
-        
-            @include web {
-                min-height: 38px !important;
-                height: 38px !important;
-            }
-        
-            @include mobile {
-                min-height: 34px !important;
-                height: 34px !important;
-            }
         }
     }
 }

package/styles/components/fs_col.scss

@@ -4,7 +4,7 @@
     overflow-y: var(--fs-col-overflow);
     padding: var(--fs-col-padding);
     gap: var(--fs-col-gap);
-    max-width: 100%;
+    max-width: var(--fs-col-max-width);
 
     &-top-left {
         justify-content: flex-start;

package/styles/components/fs_color_field.scss

@@ -1,5 +1,6 @@
 .fs-color-field .fs-card {
   cursor: var(--fs-color-field-cursor) !important;
+  min-width: var(--fs-base-field-min-width);
   border-color: var(--fs-color-field-border-color) !important;
   .fs-text {
     color: var(--fs-color-field-color) !important;
@@ -16,8 +17,4 @@
   background: none !important;
   min-width: auto !important;
   width: 100% !important;
-}
-
-.fs-color-field-description {
-  color: var(--fs-color-field-color);
 }

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,14 +1,8 @@
 .fs-dialog-mobile > .v-overlay__content {
-  max-height: calc(100% - 40px) !important;
-  max-width: 100% !important;
+  max-height: 100dvh !important;
+  max-width: 100vw !important;
   width: 100% !important;
   margin: 0 !important;
-  align-self: flex-end;
+  position: absolute;
+  bottom: 0;
 }
-
-.fs-dialog > .v-overlay__content {
-  max-height: calc(100vh - 40px) !important;
-  max-width: calc(100vw - 40px) !important;
-  width: fit-content !important;
-  margin: 20px !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_draggable.scss

@@ -1,10 +1,5 @@
 .fs-draggable-item {
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
- 
-  &:has(.fs-data-iterator-item) {
-    flex: 1 1 0 !important;
-    width: 100% !important;
-  }
 }
 
 .fs-draggable-dragging {

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_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

@@ -6,7 +6,15 @@
   .fs-leaflet-container {
     width: 100%;
     height: 100%;
-    filter: grayscale(var(--fs-map-container-grayscale));
+    z-index: 0;
+
+    .fs-map-tile-base-layer {
+      filter: grayscale(var(--fs-map-container-grayscale));
+    }
+
+    .fs-map-tile-grayscale-layer {
+      filter: grayscale(100%);
+    }
   }
 
   .fs-map-overlay-mobile {
@@ -77,31 +85,26 @@
     }
   }
 
-  .fs-map-point-pin {
-    background-color: var(--fs-map-point-pin-color);
-    border-radius: 100%;
-  }
-
-  .fs-map-location > div {
+  .fs-map-marker > div {
     display: flex;
     height: 100%;
-    color: var(--fs-map-location-pin-color);
     border-radius: 50%;
-    background-color: white;
     filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
     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);
+        }
       }
     }
   }
 
-  .fs-map-location-full > div {
+  .fs-map-cluster-marker > div {
     background-color: var(--fs-map-location-pin-color);
     color: white;
   }
@@ -124,12 +127,49 @@
     }
   }
 
+  .fs-map-location > div {
+    color: var(--fs-map-location-pin-color);
+    background-color: white;
+  }
+
+  .fs-map-pin > div {
+    background-color: var(--fs-map-point-pin-color);
+    position: relative;
+
+    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .fs-map-pin > div::before {
+    content: "";
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    border-radius: 50%;
+    border: 2px solid var(--fs-map-point-pin-color);
+    opacity: 0.4;
+
+    @include clickscreen {
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .fs-map-pin-selected > div {
+    transform: scale(1.35);
+  }
+
+
   .fs-map-site {
     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;
 
@@ -27,16 +28,6 @@
     }
 }
 
-.fs-rich-text-field-readonly {
-    @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);

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,22 +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%;
-    text-align: left;
 }
 
-.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_status_rich_card.scss

@@ -0,0 +1,6 @@
+.fs-status-rich-card {
+  position: relative;
+  flex-grow: 1;
+  background-color: var(--fs-status-rich-card-background-color);
+  border-color: var(--fs-status-rich-card-border-color);
+}

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

@@ -1,17 +1,10 @@
 .fs-tabs {
     display: flex !important;
     width: 100% !important;
-    flex-shrink: 0;
 
-    @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 {
@@ -22,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;
+        }
     }
 }
 
@@ -47,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;
+        }
     }
 }
 
@@ -59,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);
 }