@dative-gpi/foundation-shared-components 1.0.66 → 1.0.67-map-carousel

package/styles/components/fs_chip.scss

@@ -1,3 +1,7 @@
+.fs-chip-container {
+    text-decoration: none;
+}
+
 .fs-chip {
     user-select: none;
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@@ -9,18 +13,20 @@
     padding: 2px 20px !important;
 }
 
-.fs-chip-editable {
+.fs-chip-clickable {
     cursor: pointer !important;
 
-    &:hover {
-        background-color: var(--fs-chip-hover-background-color) !important;
-        border-color: var(--fs-chip-hover-border-color) !important;
-        color: var(--fs-chip-hover-color) !important;
-    }
-
     &:active {
         background-color: var(--fs-chip-active-background-color) !important;
         border-color: var(--fs-chip-active-border-color) !important;
         color: var(--fs-chip-active-color) !important;
     }
+
+    @include clickscreen {
+        &:hover {
+            background-color: var(--fs-chip-hover-background-color) !important;
+            border-color: var(--fs-chip-hover-border-color) !important;
+            color: var(--fs-chip-hover-color) !important;
+        }
+    }
 }

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

@@ -17,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_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,5 +1,5 @@
 .fs-filter-button-menu {
-    min-width: 300px !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_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_slider.scss

@@ -1,50 +1,10 @@
 .fs-slider {
-    padding: 0px !important;
-    width: calc(100% - 16px);
-
-    & .v-slider__container {
-        cursor: var(--fs-slider-cursor);
-        margin-left: 8px;
-        margin-right: 8px;
-        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 !important;
-        }
-
-        &__surface:after {
-            display: none !important;
-        }
-
-        &__ripple {
-            display: none !important;
-        }
-    }
-}
-
-.fs-slider-label {
-    color: var(--fs-slider-color);
-}
-
-.fs-slider-description {
-    color: var(--fs-slider-color);
 }

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);
+}