@dative-gpi/foundation-shared-components 1.0.27 → 1.0.28-remove-deprecated2

package/styles/components/fs_agenda.scss

@@ -0,0 +1,36 @@
+.fs-agenda-view {
+  min-height: 0;
+}
+
+.fs-agenda-label-day-container {
+  flex-shrink: 0;
+}
+
+.fs-agenda-label-day {
+  border-bottom: 1px solid var(--fs-agenda-label-day-border-bottom-color);
+  border-right: 1px solid var(--fs-agenda-label-day-border-right-color);
+  min-height: 0px;
+}
+
+.fs-agenda-label-day-now {
+  border-bottom: 4px solid var(--fs-clickable-border-color);
+}
+
+.fs-agenda-body {
+  position: relative;
+}
+
+.fs-agenda-row-day {
+  position: relative;
+  border-bottom: 1px solid var(--fs-agenda-row-day-border-bottom-color);
+}
+
+.fs-day-agenda-hour-line {
+  border-top: solid 1px var(--fs-day-agenda-hour-line-color);
+  width: 100%;
+  height: 100%;
+}
+
+.fs-agenda-header-text {
+  text-transform: capitalize !important;
+}

package/styles/components/fs_agenda_event.scss

@@ -0,0 +1,41 @@
+.fs-agenda-event {
+  position: absolute !important;
+  left: var(--fs-agenda-event-left);
+  top: var(--fs-agenda-event-top);
+
+  &.fs-agenda-event-past {
+    opacity: 0.5;
+  }
+
+  >.fs-card {
+    border-left: solid var(--fs-agenda-event-border-width) var(--fs-clickable-border-color) !important;
+  }
+}
+
+.fs-agenda-event .fs-col,
+.fs-agenda-event .fs-row {
+  overflow: hidden;
+}
+
+.fs-day-agenda .fs-agenda-event {
+  .fs-agenda-event-day-label-container {
+    overflow: visible !important;
+  }
+}
+
+.fs-week-agenda .fs-agenda-event{
+  margin-top: 3px;
+  margin-bottom: 3px;
+  height: calc(100% - 6px) !important;
+}
+
+.fs-month-agenda .fs-agenda-event {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  height: calc(100% - 4px) !important;
+}
+
+.fs-agenda-event-current span {
+  text-overflow: unset;
+  flex-shrink: 0;
+}

package/styles/components/fs_agenda_hours_col.scss

@@ -0,0 +1,4 @@
+.fs-agenda-hours-col {
+  transform: translateY(calc(-2.4% + 4px));
+  overflow: visible;
+}

package/styles/components/fs_agenda_hours_row.scss

@@ -0,0 +1,5 @@
+.fs-agenda-hours-row-marker {
+  height: 4px;
+  border-right: solid 1px var(--fs-agenda-hours-row-marker-color);
+  transform: translateY(-4px);
+}

package/styles/components/fs_agenda_time_line_marker.scss

@@ -0,0 +1,19 @@
+.fs-agenda-horizontal-time-line-marker {
+  position: absolute;
+  top: 0;
+  left: var(--fs-agenda-horizontal-time-line-marker-left);
+  width: 2px;
+  height: 100%;
+  z-index: 1;
+  background-color: var(--fs-agenda-horizontal-time-line-marker-color);
+}
+
+.fs-agenda-vertical-time-line-marker {
+  position: absolute;
+  top: var(--fs-agenda-vertical-time-line-marker-top);
+  left: 0;
+  width: 100%;
+  height: 2px;
+  z-index: 1;
+  background-color: var(--fs-agenda-vertical-time-line-marker-color);
+}

package/styles/components/fs_autocomplete_field.scss

@@ -22,19 +22,6 @@
     }
 }
 
-.fs-autocomplete-field-label {
-    color: var(--fs-autocomplete-field-color);
-}
-
-.fs-autocomplete-field-messages {
-    align-self: stretch;
-    color: var(--fs-autocomplete-field-error-color);
-}
-
-.fs-autocomplete-field-description {
-    color: var(--fs-autocomplete-field-color);
-}
-
 .v-overlay-container > .v-overlay > .v-autocomplete__content {
     box-shadow: 0px 5px 8px 0px #00000029;
     max-width: none !important;

package/styles/components/fs_breadcrumbs.scss

@@ -16,21 +16,15 @@
     }
 }
 
-.fs-breadcrumbs-divider {
-    margin-bottom: 2px !important;
-}
+// .fs-breadcrumbs-divider {
+//     margin-bottom: 2px !important;
+// }
 
-.v-breadcrumbs {
+.fs-breadcrumbs.v-breadcrumbs {
+    line-height: normal!important;
     padding: 0 !important;
     gap: 8px !important;
-
-    @include web {
-        height: 24px;
-    }
-
-    @include mobile {
-        height: 20px;
-    }
+    height: 20px;
 }
 
 .v-breadcrumbs-item {

package/styles/components/fs_card.scss

@@ -12,7 +12,6 @@
     &-elevation {
         box-shadow: 0px 1px 8px 0px #00000029;
         border-radius: 4px;
-        margin: 4px;
     }
 
     &-background {

package/styles/components/fs_clickable.scss

@@ -17,7 +17,8 @@
         border-color: var(--fs-clickable-hover-border-color) !important;
         color: var(--fs-clickable-hover-color) !important;
 
-        & .fs-background {
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             background-color: var(--fs-clickable-hover-background-color);
         }
     }
@@ -27,7 +28,8 @@
         border-color: var(--fs-clickable-active-border-color) !important;
         color: var(--fs-clickable-active-color) !important;
 
-        & .fs-background {
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             background-color: var(--fs-clickable-active-background-color);
         }
     }
@@ -42,7 +44,7 @@ a:has(.fs-clickable) {
 }
 
 button:has(.fs-clickable) {
-    position: relative !important;
+    position: relative;
     height: var(--fs-clickable-height);
     width: var(--fs-clickable-width);
 }
@@ -50,20 +52,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_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,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: 100vh !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_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,9 +2,18 @@
     @extend .fs-hide-y-scrollbar;
     
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    max-height: var(--fs-fade-out-height);
+    overflow-x: var(--fs-fade-out-x-overflow);
+    max-height: var(--fs-fade-out-max-height);
+    min-height: var(--fs-fade-out-height);
+    height: var(--fs-fade-out-height);
     padding: var(--fs-fade-out-padding);
-    width: var(--fs-fade-out-width);
+
+    // 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;
   }
 

package/styles/components/fs_magic_config_field.scss

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

package/styles/components/fs_map.scss

@@ -5,53 +5,54 @@
 
   .fs-leaflet-container {
     width: 100%;
-    height: var(--fs-map-leaflet-container-height);
+    height: 100%;
     filter: grayscale(var(--fs-map-container-grayscale));
   }
 
-  .fs-map-overlay-edit-button {
+  .fs-map-overlay-mobile {
     position: absolute;
-    top: 0;
+    bottom: 0;
+    left: 0;
     right: 0;
-    z-index: 960;
-    margin: 8px;
+    width: 100%;
+    margin: 0;
+    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  .fs-map-overlay-right-top {
+  .fs-map-overlay-desktop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 12px;
+    max-height: calc(100% - 24px);
+  }
+
+  .fs-map-layer-button {
     position: absolute;
     top: 0;
     right: 0;
-    margin: 4px 8px;
+    margin: 12px;
   }
 
-  .fs-map-overlay-right-bottom {
+  .fs-map-control-buttons {
     position: absolute;
     bottom: 0;
     right: 0;
-    z-index: 1000;
-    margin: 4px 8px;
-    width: calc(100% - 16px);
-
+    margin: 12px;
+    margin-bottom: calc(12px + var(--fs-map-control-buttons-margin-bottom));
 
-    .fs-map-zoom-overlay {
-      position: absolute;
-      bottom: 100%;
-      right: 0;
-      z-index: 1001;
-      margin-bottom: calc(var(--fs-map-leaflet-bottom-overlay-margin) + 8px);
+    .fs-map-zoom-plus-button > * {
+      border-bottom-left-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
 
-      button.fs-map-zoom-plus > * {
-        border-bottom-left-radius: 0 !important;
-        border-bottom-right-radius: 0 !important;
-      }
+      border-bottom: 0px !important;
+    }
 
-      button.fs-map-zoom-minus > * {
-        margin-top: 1px;
-        border-top-left-radius: 0 !important;
-        border-top-right-radius: 0 !important;
+    .fs-map-zoom-minus-button > * {
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
 
-        border-top: solid 1px var(--fs-card-border-color) !important;
-      }
+      border-top: 0px !important;
     }
   }
 
@@ -76,6 +77,11 @@
     }
   }
 
+  .fs-map-point-pin {
+    background-color: var(--fs-map-point-pin-color);
+    border-radius: 100%;
+  }
+
   .fs-map-location > div {
     display: flex;
     height: 100%;
@@ -105,11 +111,11 @@
 
     @keyframes fs-map-shadow-location {
       0% {
-        box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
+        box-shadow: 0 0 0px 0px var(--fs-map-location-pin-color-alpha);
       }
 
       50% {
-        box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
+        box-shadow: 0 0 0px 7px var(--fs-map-location-pin-color-alpha);
       }
 
       100% {

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

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,11 +1,12 @@
 .fs-span {
-    padding-inline-end: 2px;
     max-width: 100%;
+    text-align: left;
 }
 
 .fs-span-line-clamp {
     overflow: hidden;
     display: -webkit-box;
+    line-clamp: var(--fs-span-line-clamp);
     -webkit-box-orient: vertical;
     -webkit-line-clamp: var(--fs-span-line-clamp);
 }

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