@dative-gpi/foundation-shared-components 0.0.8 → 0.0.10

package/styles/components/fs_autocomplete_field.scss

@@ -0,0 +1,123 @@
+.fs-autocomplete-field {
+    padding: 0px !important;
+    width: 100%;
+
+    & > .v-input__control > .v-field {
+        border: 1px solid var(--fs-autocomplete-field-border-color) !important;
+        cursor: var(--fs-autocomplete-field-cursor) !important;
+        border-radius: 4px !important;
+        padding: 0 16px !important;
+        gap: 8px;
+
+        &--error {
+            border-color: var(--fs-autocomplete-field-error-border-color) !important;
+        }
+
+        &:not(.v-field--error):focus-within {
+            border-color: var(--fs-autocomplete-field-active-border-color) !important;
+        }
+
+        & > .v-field__outline {
+            display: none;
+        }
+
+        & > .v-field__field > .v-field__input {
+            @extend .text-body;
+        
+            padding-inline: 0 !important;
+            color: var(--fs-autocomplete-field-color);
+            cursor: var(--fs-autocomplete-field-cursor) !important;
+        
+            @include web {
+                min-height: 38px !important;
+                height: 38px !important;
+            }
+        
+            @include mobile {
+                min-height: 34px !important;
+                height: 34px !important;
+            }
+
+            & > .v-autocomplete__selection {
+                @include web {
+                    margin-top: -16px;
+                    height: 38px !important;
+                }
+            
+                @include mobile {
+                    margin-top: -15px;
+                    height: 34px !important;
+                }
+            }
+
+            & > input {
+                @include web {
+                    top: 16px;
+                    margin-top: -16px;
+                    height: 38px !important;
+                }
+            
+                @include mobile {
+                    top: 17px;
+                    margin-top: -17px;
+                    height: 34px !important;
+                }
+            }
+        }
+
+        & > .v-field__clearable {
+            margin-inline: 0px;
+        }
+
+        & > .v-field__append-inner {
+            color: var(--fs-autocomplete-field-color);
+
+            & > i {
+                margin-inline-start: 0px;
+            }
+        }
+    }
+}
+
+.fs-autocomplete-multiple-field {
+    & > .v-input__control > .v-field {
+        & > .v-field__field > .v-field__input {
+            & > .v-autocomplete__selection {
+                @include web {
+                    margin-top: -16px;
+                    height: 38px !important;
+                }
+            
+                @include mobile {
+                    margin-top: -15px;
+                    height: 34px !important;
+                }
+            }
+
+            & > input {
+                @include web {
+                    margin-top: -16px;
+                    height: 38px !important;
+                }
+            
+                @include mobile {
+                    margin-top: -17px;
+                    height: 34px !important;
+                }
+            }
+        }
+    }
+}
+
+.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);
+}

package/styles/components/fs_button.scss

@@ -8,8 +8,8 @@
     border-color: var(--fs-button-border-color) !important;
     color: var(--fs-button-color) !important;
 
-    &.fs-button--disabled {
-        cursor: default !important;
+    &.fs-button-full-width {
+        width: 100%;
     }
 
     &:not(.fs-button--disabled):hover {
@@ -24,8 +24,8 @@
     }
 
     @include web {
-        min-width: 48px !important;
-        height: 48px !important;
+        min-width: 40px !important;
+        height: 40px !important;
     }
 
     @include mobile {
@@ -37,8 +37,6 @@
 .fs-button-icon {
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;
-    width: 20px !important;
-    height: 20px !important;
 
     &:not(.fs-button--disabled):hover {
         color: var(--fs-button-hover-color) !important;

package/styles/components/fs_calendar.scss

@@ -11,6 +11,29 @@
     }
 }
 
+.fs-calendar-half {
+    background-color: var(--fs-calendar-background-color) !important;
+    color: var(--fs-calendar-color) !important;
+
+    & > .v-locale-provider > .v-date-picker-month {
+        padding: 0 !important;
+    }
+}
+
+.fs-calendar-left {
+    padding-right: 8px !important;
+}
+
+.fs-calendar-right {
+    padding-left: 8px !important;
+}
+
+.fs-calendar-twin {
+    border: 1px solid var(--fs-calendar-border-color) !important;
+    border-radius: 4px !important;
+    padding: 8px !important;
+}
+
 .fs-calendar-header {
     justify-content: space-between !important;
     padding: 8px 0 !important;
@@ -82,7 +105,7 @@
         color: var(--fs-calendar-hover-color);
     }
 
-    & .v-date-picker-month__day--selected ~ .v-date-picker-month__day > button {
+    & .v-date-picker-month__day--selected:not(.v-date-picker-month__day--adjacent) ~ .v-date-picker-month__day > button {
         background-color: var(--fs-calendar-background-color);
         border-color: transparent;
         border: none;

package/styles/components/fs_card.scss

@@ -1,7 +1,4 @@
 .fs-card {
-    padding: 8px;
-    display: flex;
-    border: 1px solid var(--fs-card-border-color);
-    border-radius: 4px;
-    background-color: var(--fs-card-background-color);
+    width: var(--fs-card-width);
+    height: var(--fs-card-height);
 }

package/styles/components/fs_carousel.scss

@@ -0,0 +1,4 @@
+.fs-carousel {
+    background-color: var(--fs-carousel-background-color);
+    height: var(--fs-carousel-height) !important;
+}

package/styles/components/fs_chip.scss

@@ -0,0 +1,33 @@
+.fs-chip {
+    user-select: none;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color: var(--fs-chip-background-color) !important;
+    border: 1px solid var(--fs-chip-border-color) !important;
+    color: var(--fs-chip-color) !important;
+    border-radius: 50px !important;
+    padding: 2px 20px !important;
+
+    @include web {
+        height: 24px !important;
+    }
+
+    @include mobile {
+        height: 20px !important;
+    }
+}
+
+.fs-chip-editable {
+    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;
+    }
+}

package/styles/components/fs_clock.scss

@@ -0,0 +1,43 @@
+.fs-clock-field {
+    padding: 0px !important;
+    width: 72px !important;
+
+    &.v-input {
+        flex: 0 0 auto !important;
+    }
+
+    & > .v-input__control > .v-field {
+        background-color: var(--fs-clock-field-background-color) !important;
+        border: 1px solid var(--fs-clock-field-border-color) !important;
+        border-radius: 4px !important;
+        padding: 0 16px !important;
+
+        &:not(.v-field--error):focus-within {
+            border-color: var(--fs-clock-field-active-border-color) !important;
+        }
+
+        & > .v-field__outline {
+            display: none;
+        }
+
+        & > .v-field__field > input {
+            @extend .text-h3;
+        
+            display: flex;
+            padding-inline: 0 !important;
+            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

@@ -1,7 +1,9 @@
 .fs-col {
     display: flex;
     flex-direction: column;
+    padding: var(--fs-col-padding);
     gap: var(--fs-col-gap);
+    max-width: 100%;
 
     &-top-left {
         justify-content: flex-start;

package/styles/components/fs_color_icon.scss

@@ -0,0 +1,37 @@
+.fs-color-icon {
+    background-color: var(--fs-icon-background-color);
+    border-radius: 4px;
+
+    &.fs-icon-s {
+        @include web {
+            width: 20px;
+            height: 20px;
+        }
+        @include mobile {
+            width: 18px;
+            height: 18px;
+        }
+    }
+
+    &.fs-icon-m {
+        @include web {
+            width: 26px;
+            height: 26px;
+        }
+        @include mobile {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    &.fs-icon-l {
+        @include web {
+            width: 40px;
+            height: 40px;
+        }
+        @include mobile {
+            width: 36px;
+            height: 36px;
+        }
+    }
+}

package/styles/components/fs_container.scss

@@ -0,0 +1,16 @@
+.fs-container {
+    display: flex;
+    padding: var(--fs-container-padding);
+    background-color: var(--fs-container-background-color);
+
+    &-border {
+        border-radius: 4px;
+        border: 1px solid var(--fs-container-border-color);
+    }
+
+    &-elevation {
+        margin: 4px;
+        border-radius: 4px;
+        box-shadow: 0px 1px 8px 0px #00000029;
+    }
+}

package/styles/components/fs_data_iterator_item.scss

@@ -0,0 +1,19 @@
+.fs-data-iterator-item {
+    position: relative;
+    min-height: 36px;
+
+    & > .fs-col > .fs-row:first-of-type > :last-child {
+        padding-right: 22px;
+    }
+}
+
+.fs-data-iterator-item-checkbox {
+    border-radius: 4px;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    top: 1px;
+    right: 1px;
+    width: 32px;
+    height: 32px;
+}

package/styles/components/fs_data_table.scss

@@ -0,0 +1,97 @@
+.fs-data-table {
+    th,
+    td {
+        position: relative;
+        background-color: var(--fs-data-table-background-color) !important;
+    }
+    
+    th {
+        box-shadow: none !important;
+    
+        &:hover .fs-header-button {
+            opacity: 1;
+        }
+    }
+    
+    th:after {
+        content: "";
+        position: absolute;
+        bottom: 8px;
+        right: 0;
+        height: calc(100% - 16px);
+        border-right: 1px solid var(--fs-data-table-border-color);
+    }
+    
+    td {
+        border-bottom: none !important;
+    }
+    
+    th:last-of-type:after,
+    td:last-of-type:after {
+        border-right: none;
+    }
+    
+    th:before,
+    td:not(.fs-data-table-group-header):before {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        border-bottom: 1px solid var(--fs-data-table-border-color);
+    }
+    
+    th:first-of-type:before,
+    td:first-of-type:before {
+        left: 8px;
+        width: calc(100% - 8px);
+    }
+    
+    th:last-of-type:before,
+    td:last-of-type:before {
+        right: 8px;
+        width: calc(100% - 8px);
+    }
+}
+
+.fs-data-table-grouped {
+    & th:first-of-type {
+        display: none;
+    }
+
+    & td:first-of-type {
+        display: none;
+    }
+
+    & .fs-data-table-group-header {
+        padding: 0 !important;
+
+        &:after {
+            content: none !important;
+        }
+    }
+}
+
+.fs-data-table-iterator {
+    width: 100%;
+}
+
+.fs-data-table-footer {
+    background-color: var(--fs-data-table-background-color);
+}
+
+.fs-data-table-pagination {
+    @include web {
+        width: 172px;
+    }
+
+    @include mobile {
+        width: 172px;
+    }
+}
+
+.fs-data-table-intersection {
+    margin-top: -8px;
+    height: 10px;
+    width: 100%;
+}

package/styles/components/fs_date_field.scss

@@ -0,0 +1,8 @@
+.fs-date-field-label {
+    color: var(--fs-date-field-color);
+}
+
+.fs-date-field-messages {
+    align-self: stretch;
+    color: var(--fs-date-field-error-color);
+}

package/styles/components/fs_dialog.scss

@@ -0,0 +1,30 @@
+.v-overlay__scrim:has(.v-overlay__content:has(.fs-dialog-mobile)) {
+    display: flex;
+}
+
+.v-overlay__content:has(.fs-dialog-mobile) {
+    justify-content: flex-end;
+    align-self: flex-end;
+    margin-top: 20vh !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0px !important;
+}
+
+.fs-dialog {
+    position: relative;
+    max-width: 90vw !important;
+    max-height: 90vw !important;
+
+    &.fs-dialog-mobile {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        max-width: 100vw !important;
+    }
+}
+
+.fs-dialog-close-button {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+}

package/styles/components/fs_divider.scss

@@ -0,0 +1,5 @@
+.fs-divider {
+    width: var(--fs-divider-width);
+    border-bottom: 1.3px solid var(--fs-divider-color);
+    border-radius: 3px;
+}

package/styles/components/fs_fade_out.scss

@@ -1,12 +1,18 @@
 .fs-fade-out {
     @extend .fs-hide-y-scrollbar;
+    
+    flex-direction: column;
+    position: relative;
+    display: flex;
 }
 
 .fs-fade-out-top {
     pointer-events: none;
     position: sticky;
-    z-index: 2;
+    display: flex;
+    z-index: 10;
     height: var(--fs-fade-out-top-mask-height);
+    min-height: var(--fs-fade-out-top-mask-height);
     width: 100%;
     top: 0;
     left: 0;
@@ -17,8 +23,10 @@
 .fs-fade-out-bottom {
     pointer-events: none;
     position: sticky;
-    z-index: 2;
+    display: flex;
+    z-index: 10;
     height: var(--fs-fade-out-bottom-mask-height);
+    min-height: var(--fs-fade-out-bottom-mask-height);
     width: 100%;
     bottom: 0;
     left: 0;

package/styles/components/fs_filter_button.scss

@@ -0,0 +1,21 @@
+.fs-filter-button-menu {
+    @include web {
+        min-width: 200px !important;
+    }
+    @include mobile {
+        min-width: 180px !important;
+    }
+}
+
+.fs-filter-button-all {
+    width: calc(100% - 16px) !important;
+}
+
+.fs-filter-button-fade {
+    padding-right: 8px;
+    max-height: 360px;
+}
+
+.fs-filter-button-chip {
+    width: 100%;
+}

package/styles/components/fs_header_button.scss

@@ -0,0 +1,4 @@
+.fs-header-button {
+    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    opacity: 0;
+}

package/styles/components/fs_hidden_button.scss

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

package/styles/components/fs_icon.scss

@@ -1,11 +1,27 @@
 .fs-icon-s {
-    font-size: 12px !important;
+    @include web {
+        font-size: 16px !important;
+    }
+    @include mobile {
+        font-size: 14px !important;
+    }
 }
 
 .fs-icon-m {
-    font-size: 20px !important;
+    @include web {
+        font-size: 20px !important;
+    }
+    @include mobile {
+        font-size: 16px !important;
+    }
 }
 
 .fs-icon-l {
-    font-size: 24px !important;
+    @include web {
+        font-size: 24px !important;
+    }
+
+    @include mobile {
+        font-size: 20px !important;
+    }
 }

package/styles/components/fs_icon_field.scss

@@ -0,0 +1,12 @@
+.fs-icon-field-label {
+    color: var(--fs-icon-field-color);
+}
+
+.fs-icon-field-messages {
+    align-self: stretch;
+    color: var(--fs-icon-field-error-color);
+}
+
+.fs-icon-field-set {
+    max-width: 100%;
+}

package/styles/components/fs_image.scss

@@ -0,0 +1,7 @@
+.fs-image {
+    border-radius: 4px;
+
+    &.v-responsive {
+        flex: 0 0 auto !important;
+    }
+}

package/styles/components/fs_load_tile.scss

@@ -0,0 +1,49 @@
+.fs-load-tile {
+    position: relative;
+}
+
+.fs-load-tile .v-skeleton-loader {
+    background-color: var(--fs-load-tile-background-color);
+
+    & .v-skeleton-loader__article {
+        gap: 8px;
+
+        @include web {
+            width: 204px;
+            height: 100px;
+        }
+
+        @include mobile {
+            width: 198px;
+            height: 90px;
+        }
+    }
+
+    & .v-skeleton-loader__heading {
+        margin: 0;
+    }
+
+    & .v-skeleton-loader__paragraph {
+        gap: 8px;
+    }
+
+    & .v-skeleton-loader__text {
+        margin: 0;
+    }
+
+    & .v-skeleton-loader__bone {
+        border-radius: 4px;
+    }
+
+    & .v-skeleton-loader__image {
+        @include web {
+            width: 100px;
+            height: 100px;
+        }
+
+        @include mobile {
+            width: 90px;
+            height: 90px;
+        }
+    }
+}