@pepperi-addons/ngx-lib 0.2.59-query-builder.13 → 0.2.61-beta.2

package/src/core/style/components/general.scss

@@ -1,1088 +1,988 @@
-.pepperi-report-fields, .pep-report-fields {
-    height: inherit;
-
-    span {
-        display: block;
-        @include ellipsis();
-    }
-}
-
-// -----------------------------------------------------
-//  Override material style
-// -----------------------------------------------------
-.mat-form-title {
-    margin: 0;
-    padding: $spacing-2xs 0;
-    height: $form-field-title-height;
-    line-height: 1rem;
-    // display: block;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-
-    .mat-icon {
-        // line-height: 0.875rem;
-        // vertical-align: top;
-        height: 0.75rem;
-        width: 0.75rem;
-    }
-
-    mat-label {
-        @include ellipsis();
-        display: inline-block; // WAS UNSET , CAUSE TO LABEL TO BE LONGER THEN THE CONTAINER - AVNER ,
-        // Than was blocked - cause the label to catch 100% of the row -> prob whith limited line
-        vertical-align: top;
-    }
-
-    .mat-button {
-        min-width: unset;
-        line-height: 1rem;
-        padding: unset;
-        width: 1rem;
-        height: 1rem;
-
-        .mat-icon {
-            width: inherit;
-            height: inherit;
-            font-size: unset;
-        }
-    }
-}
-
-@mixin pep-field-icon($inside-button: false) {
-    .mat-icon {
-        height: calc(#{$form-field-button-size});
-        width: calc(#{$form-field-button-size});
-
-        .svg-icon {
-            height: $form-field-button-icon-size; // 1rem;
-            width: $form-field-button-icon-size; // 1rem;
-        }
-    }
-
-    @if ($inside-button) {
-        &.regular {
-            .mat-icon {
-                height: calc(#{$form-field-button-size} - 2px); // - 2px is the border size of the regular
-                width: calc(#{$form-field-button-size} - 2px); // - 2px is the border size of the regular
-            }
-        }
-    }
-}
-
-.mat-form-field {
-    @include fix-inline-z-index();
-    display: flow-root !important;
-    width: 100%;
-
-    .mat-form-field-wrapper {
-        width: inherit;
-        margin: 0;
-        padding-bottom: 0;
-
-        .mat-form-field-flex {
-            padding-left: $spacing-md;
-            padding-right: $spacing-md;
-            margin: 0;
-            min-height: $form-field-height; // 2.5rem;
-            align-items: center;
-
-            .mat-form-field-outline {
-                top: 0; // Override material default.
-            }
-
-            .mat-form-field-prefix,
-            .mat-form-field-suffix {
-                top: 0; // Override material default.
-                display: flex;
-                align-self: center;
-                z-index: $z-index-lowest + 1;
-                
-                @include pep-field-icon();
-
-                .mat-button {
-                    min-width: unset;
-                    line-height: unset;
-                    padding: unset;
-
-                    height: $form-field-button-size; // 1.5rem;
-                    width: $form-field-button-size; // 1.5rem;
-
-                    @include pep-field-icon(true);
-                }
-            }
-
-            .mat-form-field-infix {
-                border-top: 0;
-                padding: 0;
-                line-height: 2.5rem;
-                width: 100%;
-                display: flex;
-
-                .mat-input-element {
-                    // vertical-align: unset;
-                    z-index: $z-index-lowest;
-                    margin-top: unset;
-                    text-overflow: ellipsis;
-                }
-
-                .mat-form-field-label-wrapper {
-                    display: none;
-                }
-            }
-        }
-
-        .mat-form-field-subscript-wrapper {
-            position: relative;
-            margin-top: 0;
-            padding: 0;
-            font-weight: $font-weight-bold;
-            z-index: $z-index-medium - 4;
-            border-radius: $border-radius-md;
-
-            .mat-error {
-                padding: $spacing-xs $spacing-sm;
-            }
-        }
-    }
-
-    .mat-form-field-flex {
-        border-radius: $border-radius-md;
-    }
-
-}
-
-@mixin pep-field-size($size: 'md') {
-    // Default is md
-    $field-height: $spacing-3xl;
-    $field-padding: $spacing-md;
-
-    @if $size == 'xl' {
-        $field-height: $spacing-5xl;
-        $field-padding: $spacing-xl;
-    }
-    @else if $size == 'lg' {
-        $field-height: $spacing-4xl;
-        $field-padding: $spacing-lg;
-    }
-    @else if $size == 'sm' {
-        $field-height: $spacing-2xl;
-        $field-padding: $spacing-sm;
-    }
-    @else if $size == 'xs' {
-        $field-height: $spacing-xl;
-        $field-padding: $spacing-xs;
-    }
-
-    .mat-form-field .mat-form-field-wrapper {
-        .mat-form-field-flex {
-            min-height: $field-height;
-            height: $field-height;
-            padding-left: $field-padding;
-            padding-right: $field-padding;
-        }
-    }
-}
-
-.xl {
-    @include pep-field-size('xl');
-}
-.lg {
-    @include pep-field-size('lg');
-}
-.md {
-    @include pep-field-size('md');
-}
-.sm {
-    @include pep-field-size('sm');
-}
-.xs {
-    @include pep-field-size('xs');
-}
-
-.mat-grid-tile {
-    overflow: inherit !important;
-}
-
-/* make content to be on top (to be on the first row - if the field is declared on more than one row but it's UI is only on one row) */
-.mat-grid-tile .mat-figure {
-    justify-content: flex-start !important ;
-    align-items: flex-start !important;
-}
-
-//  Form view
-// ------------------------
-.form-view {
-    margin-top: $content-margin;
-    margin-bottom: $content-margin;
-    margin-inline: 0.25rem;
-}
-
-//  Table view
-// ------------------------
-$sorting-width: 1rem;
-
-// .below-sticky-top-bar {
-//     .table-header {
-//         top: calc(#{$top-bar-height});
-//     }
-// }
-
-.table-header {
-    position: sticky;
-    z-index: $z-index-medium - 5;
-    // @include box-sizing(border-box);
-    box-sizing: border-box;
-    width: inherit;
-    height: calc(#{$table-field-height} + #{$table-spacing} + #{$table-half-spacing});
-
-    .table-header-padding-top {
-        height: $table-spacing;
-        width: 100%;
-    }
-
-    .row-selection {
-        margin: 0 calc(#{$spacing-sm} + calc(#{$spacing-xs} / 2)); // 0 0.625rem;
-        height: inherit;
-        display: flex;
-        align-items: center;
-    }
-
-    .table-header-fieldset {
-        border-radius: $table-border-radius;
-        height: $table-field-height; // 2rem;
-        margin-bottom: $table-half-spacing; // 0.25rem;
-
-        fieldset {
-            height: inherit;
-        }
-
-        .header-column {
-            padding: 0 $spacing-sm;
-            box-sizing: border-box;
-            //cursor: pointer;
-            height: inherit;
-            display: flex;
-            align-items: center;
-
-            .header-label {
-                width: 100%;
-                // @include box-sizing(border-box);
-                box-sizing: border-box;
-                user-select: none;
-                // @include calc(max-width, '100% - 0');
-                max-width: 100%;
-                @include ellipsis();
-                font-weight: 600 !important;
-                line-height: 2rem !important;
-                margin-bottom: 0;
-                // cursor: text;
-                display: flex;
-                align-items: center;
-    
-                .required,
-                .mandatory {
-                    height: 0.75rem;
-                    width: 0.75rem;
-                }
-            }
-
-            img {
-                height: 1.5rem;
-                width: 1.5rem;
-                margin: -5px auto 0 auto;
-                display: block;
-            }
-
-            &.support-sorting {
-                .sorting-box {
-                    display: none;
-                    width: $sorting-width;
-                    height: 1rem;
-                    margin: 0.5rem 0;
-
-                    .mat-icon {
-                        background-repeat: no-repeat;
-                        display: flex;
-                        height: inherit;
-                        width: inherit;
-
-                        &:hover {
-                            cursor: pointer;
-                        }
-
-                        &.sort-by {
-                            display: none !important;
-                        }
-                    }
-
-                    &.has-sorting {
-                        display: block;
-                    }
-                }
-            }
-
-            .resize-box {
-                display: none;
-                cursor: w-resize;
-                margin-inline-end: calc((#{$spacing-sm} + #{$sorting-width}) * -1); // header column padding + sorting width.
-                height: $table-field-height; // 2rem;
-                align-items: center;
-
-                // .mat-icon,
-                .splitter {
-                    width: 0.125rem;
-                    height: 1rem;
-                    line-height: $table-field-height; // 2rem;
-                    // padding: 0 0.625rem 0 0.375rem;
-
-                    padding-inline-end: 0.425rem;
-                    border:none;
-                    border-inline-end-width: 1px;
-                    border-inline-end-style: dashed;
-                }
-            }
-
-            &:hover {
-                &.support-sorting {
-                    cursor: pointer;
-                    .header-label {
-                        cursor: pointer;
-                        padding-inline-end: 1rem;
-                    }
-
-                    .sorting-box {
-                        display: block;
-                    }
-                }
-            }
-
-            &.has-sorting {
-                &.support-sorting {
-                    .header-label {
-                        padding-inline-end: 1rem;
-                    }
-                }
-            }
-
-            &.is-resizing {
-                .sorting-box {
-                    display: block;
-                }
-            }
-
-            &.is-first {
-                // border-radius: $table-border-radius 0 0 $table-border-radius;
-                border-start-start-radius: $table-border-radius;
-                border-start-end-radius: $table-border-radius;
-            }
-
-            &.is-last {
-                // border-radius: 0 $table-border-radius $table-border-radius 0;
-                border-start-end-radius: $table-border-radius;
-                border-end-end-radius: $table-border-radius;
-                
-                &:hover {
-                    .resize-box {
-                        // width: 1rem;
-                        // border-radius: 0 $table-border-radius $table-border-radius 0;
-                        border-start-end-radius: $table-border-radius;
-                        border-end-end-radius: $table-border-radius;
-                    }
-                }
-            }
-        }
-    }
-
-    &:hover {
-        .resize-box {
-            display: flex !important;
-        }
-    }
-}
-[dir='rtl'] {
-    .table-header {
-        .table-header-fieldset {
-            .header-column {
-                // .resize-box {
-                //     // margin-right: unset;
-                //     // margin-left: calc((#{$spacing-sm} + #{$sorting-width}) * -1); // header column padding + sorting width.
-
-                //     // .mat-icon,
-                //     .splitter {
-                //         // padding-right: unset;
-                //         // padding-left: 0.425rem;
-
-                //         // border:none;
-                //         // border-left-width: 1px;
-                //         // border-left-style: dashed;
-                //     }
-                // }
-
-                // &:hover {
-                //     &.support-sorting {
-                //         .header-label {
-                //             padding-right: unset;
-                //             padding-left: 1rem;
-                //         }
-                //     }
-                // }
-
-                // &.has-sorting {
-                //     &.support-sorting {
-                //         .header-label {
-                //             padding-right: unset;
-                //             padding-left: 1rem;
-                //         }
-                //     }
-                // }
-
-                // &.is-first {
-                //     border-radius: 0 $table-border-radius $table-border-radius 0;
-                // }
-
-                // &.is-last {
-                //     border-radius: $table-border-radius 0 0 $table-border-radius;
-
-                //     &:hover {
-                //         .resize-box {
-                //             border-radius: $table-border-radius 0 0 $table-border-radius;
-                //         }
-                //     }
-                // }
-            }
-        }
-    }
-}
-
-.table-body {
-    width: inherit;
-    position: relative;
-
-    .table-row {
-        // @include box-sizing(border-box);
-        box-sizing: border-box;
-        width: inherit;
-        height: $table-row-height; // 3rem;
-        padding: $table-half-spacing 0; // 0.25rem 0;
-        // padding: $table-half-spacing $spacing-sm; // 0.25rem 0.5rem;
-        border-radius: $table-border-radius;
-
-        .row-selection {
-            margin: 0 calc(#{$spacing-sm} + #{$spacing-2xs});
-            height: $table-row-fieldset-height; // 2.5rem;
-            display: flex;
-            align-items: center;
-
-            &.mat-radio-button {
-                display: inline-flex;
-            }
-        }
-
-        fieldset {
-            height: $table-row-fieldset-height; // 2.5rem;
-            border-radius: $table-border-radius;
-            // padding: 0 $spacing-2xs;
-            .table-cell {
-                box-sizing: border-box;
-                padding: 0 $spacing-2xs;
-
-                &:first-of-type {
-                    // padding: 0 $spacing-2xs 0 $spacing-xs;
-                    padding-inline: $spacing-xs $spacing-2xs;
-                }
-
-                &:last-of-type {
-                    // padding: 0 $spacing-xs 0 $spacing-2xs;
-                    padding-inline: $spacing-2xs $spacing-xs;
-                }
-            }
-
-            .pepperi-input, .pep-input {
-                padding: 0 $spacing-md;
-                height: $table-field-height; // 2rem;
-            }
-
-            // -----------------------------------------------------
-            //  Override material style
-            // -----------------------------------------------------
-            .mat-form-field .mat-form-field-wrapper {
-                .mat-form-field-flex {
-                    min-height: $table-field-height; // 2rem;
-                    height: $table-field-height; // 2rem;
-                    padding: 0 $spacing-xs;
-                }
-
-                // .mat-select-arrow {
-                //     margin-right: $spacing-xs;
-                //     margin-left: $spacing-xs;
-                // }
-            }
-        }
-
-        &:hover,
-        &.highlighted,
-        &:active,
-        &.selected {
-            .pepperi-form, .pep-form {
-                z-index: $z-index-lowest + 1;
-            }
-        }
-    }
-}
-
-[dir='rtl'] {
-    .table-body {
-        .table-row {
-            fieldset {
-                .table-cell {
-                    // &:first-of-type {
-                    //     padding: 0 $spacing-xs 0 $spacing-2xs;
-                    // }
-
-                    // &:last-of-type {
-                    //     padding: 0 $spacing-2xs 0 $spacing-xs;
-                    // }
-                }
-            }
-        }
-    }
-}
-
-.table-total {
-    position: sticky;
-    z-index: $z-index-medium - 5;
-    // @include box-sizing(border-box);
-    box-sizing: border-box;
-    width: inherit;
-    height: calc(#{$table-field-height} + #{$table-spacing} + #{$table-half-spacing});
-    padding-top: $table-half-spacing;
-
-    .table-header-fieldset {
-        border-radius: $table-border-radius;
-        height: $table-field-height; // 2rem;
-        margin-bottom: $table-half-spacing; // 0.25rem;
-
-        .total-column {
-            padding: 0 $spacing-sm;
-            height: inherit;
-            display: flex;
-            align-items: center;
-
-            .total-label {
-                width: 100%;
-                // @include box-sizing(border-box);
-                box-sizing: border-box;
-                user-select: none;
-                // @include calc(max-width, '100% - 0');
-                max-width: 100%;
-                @include ellipsis();
-                font-weight: $font-weight-bold !important;
-                line-height: $table-field-height; // 2rem !important;
-                margin-bottom: 0;
-            }
-        }
-    }
-}
-
-.list-pager {
-    .pager-container {
-        position: sticky;
-        bottom: 0;
-        z-index: $z-index-medium - 5;
-        width: inherit;
-        height: auto;
-    }
-}
-
-
-//  Card view & Line view
-// ------------------------
-.cards-body {
-    position: relative;
-    margin: 0 (calc(#{$content-margin} * -1) / 2); // -0.5rem;
-    padding-bottom: $content-padding;
-}
-
-.line-view,
-.card-view {
-    margin: 0;
-    padding: 0 !important;
-
-    .card-selection {
-        // margin: $spacing-xs calc(#{$content-margin} * -1) 0 $spacing-xs;
-        margin-top: $spacing-xs;
-        margin-inline: $spacing-xs calc(#{$content-margin} * -1);
-        height: 1rem;
-        width: 1rem;
-        position: relative;
-        z-index: $z-index-lowest;
-    }
-
-    fieldset {
-        border-radius: $card-border-radius;
-        margin: $spacing-md; // spacing between cards.
-        position: relative;
-
-        .card-spacing {
-            margin: $spacing-lg !important; // spacing inside card.
-        }
-
-        // Showing two labels in the same row with ellipsis.
-        .card-flex-container {
-            // display: flex;
-            display: grid;
-            grid-auto-flow: column;
-
-            &.pepperi-button, &.pep-button {
-                background: unset; // Cancel the default background and shows background only on the declared states (hover, etc).
-            }
-
-            .title {
-                // flex-grow: 0;
-                flex-shrink: 5000;
-                @include ellipsis();
-                // padding: $spacing-2xs;
-                height: inherit;
-
-                &.no-shrink {
-                    flex-shrink: 1;
-                    // white-space:normal;
-                    // overflow: unset;
-                }
-            }
-
-            .value {
-                // flex-grow: 0;
-                flex-shrink: 1;
-                margin: 0 $spacing-xs;
-                @include ellipsis();
-                height: inherit;
-
-                &.wrap {
-                    white-space:normal;
-                }
-            }
-
-            .card-edit-button {
-                flex-basis: $card-field-button-size;
-                flex-shrink: 0;
-
-                width: $card-field-button-size;
-                height: $card-field-button-size;
-                line-height: $card-field-button-size;
-                min-width: unset;
-                padding: 0;
-                pointer-events: none;
-                align-self: center;
-
-                &.self-end {
-                    align-self: flex-end;
-                }
-
-                .mat-icon {
-                    // line-height: 0.5rem !important;
-                    width: $card-field-button-icon-size;
-
-                    .svg-icon {
-                        width: $card-field-button-icon-size; // $card-field-button-size - 0.25rem !important;
-                        // height: $card-field-button-size - 0.25rem !important;
-                    }
-                }
-            }
-        }
-
-        // -----------------------------------------------------
-        //  Override material style
-        // -----------------------------------------------------
-        .one-row {
-            &.card-flex-container {
-                align-items: center;
-            }
-
-            .pepperi-button:not(.card-edit-button), .pep-button:not(.card-edit-button) {
-                // height: $card-field-height !important; // 1.5rem !important;
-                // line-height: 1.5rem !important;
-                padding: 0 $spacing-xs;
-            }
-
-            .mat-form-field .mat-form-field-wrapper {
-                .mat-form-field-flex {
-                    height: $card-field-height !important; // 1.5rem !important;
-                    min-height: $card-field-height; // 1.5rem;
-                    padding: 0 $spacing-xs;
-                }
-
-                .pepperi-button, .pep-button,
-                .mat-select-trigger,
-                .mat-form-field-infix {
-                    height: $card-field-height !important; // 1.5rem !important;
-                    // line-height: $card-field-height !important;
-                }
-
-                .mat-input-element {
-                    font-size: $fs-sm !important;
-                    // line-height: inherit !important;
-                }
-            }
-        }
-    }
-
-    // For the campaign style.
-    &.flat {
-        fieldset {
-            box-shadow: unset !important;
-            margin: 0.25rem;
-
-            mat-grid-list {
-                margin: 0 !important;
-            }
-        }
-    }
-}
-
-//  Card views type sizes
-.line-view {
-    width:100%;
-}
-.card-view {
-    $screen-almost-full-width: 99.99%;
-
-    /* > XLarge */
-    @media (min-width: $screen-max-size-xl) {
-        // @include calc(min-width, $screen-almost-full-width + ' / 6');
-        min-width: calc(#{$screen-almost-full-width} / 6);
-
-        &.small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 8');
-            min-width: calc(#{$screen-almost-full-width} / 8);
-        }
-
-        &.x-small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 9');
-            min-width: calc(#{$screen-almost-full-width} / 9);
-        }
-    }
-    /* Large - XLarge */
-    @media (max-width: $screen-max-size-xl) and (min-width: $screen-max-size-lg) {
-        // @include calc(min-width, $screen-almost-full-width + ' / 4');
-        min-width: calc(#{$screen-almost-full-width} / 4);
-
-        &.small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 6');
-            min-width: calc(#{$screen-almost-full-width} / 6);
-        }
-
-        &.x-small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 7');
-            min-width: calc(#{$screen-almost-full-width} / 7);
-        }
-    }
-    /* Medium - Large */
-    @media (max-width: $screen-max-size-lg) and (min-width: $screen-max-size-md) {
-        // @include calc(min-width, $screen-almost-full-width + ' / 3');
-        min-width: calc(#{$screen-almost-full-width} / 3);
-
-        &.small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 4');
-            min-width: calc(#{$screen-almost-full-width} / 4);
-        }
-
-        &.x-small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 5');
-            min-width: calc(#{$screen-almost-full-width} / 5);
-        }
-    }
-    /* Small - Medium */
-    @media (max-width: $screen-max-size-md) and (min-width: $screen-max-size-sm) {
-        // @include calc(min-width, $screen-almost-full-width + ' / 3');
-        min-width: calc(#{$screen-almost-full-width} / 3);
-
-        &.small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 3');
-            min-width: calc(#{$screen-almost-full-width} / 3);
-        }
-
-        &.x-small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 4');
-            min-width: calc(#{$screen-almost-full-width} / 4);
-        }
-    }
-    /* Extra small - Small */
-    @media (max-width: $screen-max-size-sm) and (min-width: $screen-max-size-xs) {
-        // @include calc(min-width, $screen-almost-full-width + ' / 2');
-        min-width: calc(#{$screen-almost-full-width} / 2);
-
-        &.small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 2');
-            min-width: calc(#{$screen-almost-full-width} / 2);
-        }
-
-        &.x-small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 2');
-            min-width: calc(#{$screen-almost-full-width} / 2);
-        }
-    }
-    /* < Extra small */
-    @media (max-width: $screen-max-size-xs) {
-        // @include calc(min-width, $screen-almost-full-width + ' / 1');
-        min-width: calc(#{$screen-almost-full-width} / 1);
-
-        &.small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 1');
-            min-width: calc(#{$screen-almost-full-width} / 1);
-        }
-
-        &.x-small-card {
-            // @include calc(min-width, $screen-almost-full-width + ' / 1');
-            min-width: calc(#{$screen-almost-full-width} / 1);
-        }
-    }
-}
-
-[dir='rtl'] {
-    .line-view,
-    .card-view {
-        // .card-selection {
-        //     margin: $spacing-xs $spacing-xs 0 calc(#{$content-margin} * -1);
-        // }
-    }
-}
-
-//  Custom field (added for stand alone field).
-// ---------------------------------------------
-.pepperi-field, .pep-field {
-    &:not(.pep-field-no-spacing) {
-        min-height: $form-row-height;
-        margin-bottom: $form-spacing;
-    }
-}
-
-@mixin pep-general-theme($pepperi-theme) {
-    .required,
-    .mandatory {
-        color: get-pep-color($pepperi-theme, color-system-caution, color-base);
-
-        .svg-icon {
-            fill: get-pep-color($pepperi-theme, color-system-caution, color-base);
-        }
-    }
-
-    .svg-icon {
-        @include state-icon($pepperi-theme);
-    }
-
-    .pepperi-report-fields, .pep-report-fields {
-        .pepperi-input, .pep-input {
-            background: transparent !important;
-        }
-    }
-
-    // -----------------------------------------------------
-    //  Override material style
-    // -----------------------------------------------------
-    .mat-form-title {
-        &.disable {
-            color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-        }
-    }
-
-    .mat-form-field-appearance-outline .mat-form-field-outline-end,
-    .mat-form-field-appearance-outline .mat-form-field-outline-start {
-        border-color: transparent; //red !important;
-    }
-
-    .mat-form-field-appearance-outline .mat-form-field-wrapper {
-        margin-top: unset;
-        margin-bottom: unset;
-    }
-
-    .mat-form-field {
-        .mat-form-field-wrapper {
-            .mat-form-field-prefix,
-            .mat-form-field-suffix {
-                color: get-pep-color($pepperi-theme, color-weak, color-flat-r-20);
-
-                // For non icons symbols.
-                .pep-text-icon {
-                    color: get-pep-color($pepperi-theme, color-weak, color-flat-r-20);
-                }
-            }
-
-            .mat-form-field-infix {
-                .mat-input-element {
-                    &:disabled {
-                        color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                    }
-                }
-            }
-        }
-
-        .mat-form-field-flex {
-            border-radius: $border-radius-md;
-        }
-
-        @include pep-form-field-states($pepperi-theme);
-
-        // Invalid (Error)
-        &.mat-form-field-invalid {
-            .mat-form-field-wrapper {
-                @include state-error-wrapper($pepperi-theme);
-
-                .mat-form-field-flex {
-                    @include state-error($pepperi-theme);
-                }
-
-                .mat-form-field-subscript-wrapper {
-                    background: get-pep-color($pepperi-theme, color-system-caution, color-base);
-
-                    .mat-error {
-                        color: get-pep-color($pepperi-theme, color-text, color-invert);
-                    }
-                }
-            }
-
-            // Focused & Error
-            &.mat-focused .mat-form-field-wrapper {
-                @include focus($pepperi-theme);
-                z-index: $z-index-medium - 3; // To show error on table above the next row element.
-
-                .mat-form-field-flex {
-                    box-shadow: unset !important;
-                }
-            }
-        }
-    }
-
-    //  Table view
-    // ------------------------
-    .table-total,
-    .table-header {
-        // @include state-list-body-default($pepperi-theme);
-        background: transparent;
-
-        .table-header-padding-top {
-            background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-        }
-
-        .table-header-fieldset {
-            background-color: get-pep-color($pepperi-theme, color-weak, color-flat-r-30);
-            color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-
-            .header-column {
-                .sorting-box {
-                    .mat-icon {
-                        .svg-icon {
-                            fill: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                        }
-                    }
-                }
-
-                .resize-box {
-                    .splitter {
-                        border-color: get-pep-color($pepperi-theme, color-weak, color-tran-50);
-                    }
-                }
-
-                &:hover {
-                    color: get-pep-color($pepperi-theme, color-weak, color-tran-80);
-                    background-color: get-pep-color($pepperi-theme, color-weak, color-tran-20);
-
-                    .resize-box {
-                        background: get-pep-color($pepperi-theme, color-text, color-link-highlight);
-
-                        .splitter {
-                            border-color: get-pep-color($pepperi-theme, color-weak, color-tran-80);
-                        }
-
-                        &:hover {
-                            background: get-pep-color($pepperi-theme, color-text, color-link-focus);
-
-                            .splitter {
-                                border-color: get-pep-color($pepperi-theme, color-weak, color-base);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .list-pager {
-        .pager-container {
-            background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-        }
-    }
-    // .table-header {
-    //     .table-header-fieldset {
-    //         box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, soft);
-    //     }
-    // }
-
-    .table-body {
-        @include state-list-body-default($pepperi-theme);
-
-        .table-row {
-            .table-row-fieldset {
-                @include state-table-row-default($pepperi-theme);
-            }
-
-            &:hover,
-            &.highlighted {
-                .table-row-fieldset {
-                    @include state-table-row-hover($pepperi-theme);
-                }
-            }
-
-            &:active {
-                .table-row-fieldset {
-                    @include state-table-row-active($pepperi-theme);
-                }
-            }
-
-            &.selected {
-                .table-row-fieldset {
-                    @include state-table-row-selected($pepperi-theme);
-                }
-            }
-        }
-    }
-
-    //  Card view & Line view
-    // ------------------------
-    .line-view,
-    .card-view {
-        @include state-list-body-default($pepperi-theme);
-
-        fieldset {
-            @include state-card-default($pepperi-theme);
-
-            &:hover {
-                @include state-card-hover($pepperi-theme);
-            }
-
-            &:active {
-                @include state-card-active($pepperi-theme);
-            }
-
-            .title {
-                color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-            }
-        }
-
-        &.selected {
-            fieldset {
-                @include state-card-selected($pepperi-theme);
-            }
-        }
-
-        // If we wand the blue focus to be only on specific .selectable class instead of &:active state.
-        // &.selectable {
-        //     fieldset {
-        //         &:active {
-        //             @include state-card-active($pepperi-theme);
-        //         }
-        //     }
-        // }
-    }
-
-}
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
+.pepperi-report-fields, .pep-report-fields {
+    height: inherit;
+
+    span {
+        display: block;
+        @include mixins.ellipsis();
+    }
+}
+
+// -----------------------------------------------------
+//  Override material style
+// -----------------------------------------------------
+.mat-form-title {
+    margin: 0;
+    padding: variables.$spacing-2xs 0;
+    height: variables.$form-field-title-height;
+    line-height: 1rem;
+    // display: block;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+
+    .mat-icon {
+        // line-height: 0.875rem;
+        // vertical-align: top;
+        height: 0.75rem;
+        width: 0.75rem;
+    }
+
+    mat-label {
+        @include mixins.ellipsis();
+        display: inline-block; // WAS UNSET , CAUSE TO LABEL TO BE LONGER THEN THE CONTAINER - AVNER ,
+        // Than was blocked - cause the label to catch 100% of the row -> prob whith limited line
+        vertical-align: top;
+    }
+
+    .mat-button {
+        min-width: unset;
+        line-height: 1rem;
+        padding: unset;
+        width: 1rem;
+        height: 1rem;
+
+        .mat-icon {
+            width: inherit;
+            height: inherit;
+            font-size: unset;
+        }
+    }
+}
+
+@mixin pep-field-icon($inside-button: false) {
+    .mat-icon {
+        height: calc(#{variables.$form-field-button-size});
+        width: calc(#{variables.$form-field-button-size});
+
+        .svg-icon {
+            height: variables.$form-field-button-icon-size; // 1rem;
+            width: variables.$form-field-button-icon-size; // 1rem;
+        }
+    }
+
+    @if ($inside-button) {
+        &.regular {
+            .mat-icon {
+                height: calc(#{variables.$form-field-button-size} - 2px); // - 2px is the border size of the regular
+                width: calc(#{variables.$form-field-button-size} - 2px); // - 2px is the border size of the regular
+            }
+        }
+    }
+}
+
+.mat-form-field {
+    @include mixins.fix-inline-z-index();
+    display: flow-root !important;
+    width: 100%;
+
+    .mat-form-field-wrapper {
+        width: inherit;
+        margin: 0;
+        padding-bottom: 0;
+
+        .mat-form-field-flex {
+            padding-left: variables.$spacing-md;
+            padding-right: variables.$spacing-md;
+            margin: 0;
+            min-height: variables.$form-field-height; // 2.5rem;
+            align-items: center;
+
+            .mat-form-field-outline {
+                top: 0; // Override material default.
+            }
+
+            .mat-form-field-prefix,
+            .mat-form-field-suffix {
+                top: 0; // Override material default.
+                display: flex;
+                align-self: center;
+                z-index: variables.$z-index-lowest + 1;
+                
+                @include pep-field-icon();
+
+                .mat-button {
+                    min-width: unset;
+                    line-height: unset;
+                    padding: unset;
+
+                    height: variables.$form-field-button-size; // 1.5rem;
+                    width: variables.$form-field-button-size; // 1.5rem;
+
+                    @include pep-field-icon(true);
+                }
+            }
+
+            .mat-form-field-infix {
+                border-top: 0;
+                padding: 0;
+                line-height: 2.5rem;
+                width: 100%;
+                display: flex;
+
+                .mat-input-element {
+                    // vertical-align: unset;
+                    z-index: variables.$z-index-lowest;
+                    margin-top: unset;
+                    text-overflow: ellipsis;
+                }
+
+                .mat-form-field-label-wrapper {
+                    display: none;
+                }
+            }
+        }
+
+        .mat-form-field-subscript-wrapper {
+            position: relative;
+            margin-top: 0;
+            padding: 0;
+            font-weight: variables.$font-weight-bold;
+            z-index: variables.$z-index-medium - 4;
+            border-radius: variables.$border-radius-md;
+
+            .mat-error {
+                padding: variables.$spacing-xs variables.$spacing-sm;
+            }
+        }
+    }
+
+    .mat-form-field-flex {
+        border-radius: variables.$border-radius-md;
+    }
+
+}
+
+@mixin pep-field-size($size: 'md') {
+    // Default is md
+    $field-height: variables.$spacing-3xl;
+    $field-padding: variables.$spacing-md;
+
+    @if $size == 'xl' {
+        $field-height: variables.$spacing-5xl;
+        $field-padding: variables.$spacing-xl;
+    }
+    @else if $size == 'lg' {
+        $field-height: variables.$spacing-4xl;
+        $field-padding: variables.$spacing-lg;
+    }
+    @else if $size == 'sm' {
+        $field-height: variables.$spacing-2xl;
+        $field-padding: variables.$spacing-sm;
+    }
+    @else if $size == 'xs' {
+        $field-height: variables.$spacing-xl;
+        $field-padding: variables.$spacing-xs;
+    }
+
+    .mat-form-field .mat-form-field-wrapper {
+        .mat-form-field-flex {
+            min-height: $field-height;
+            height: $field-height;
+            padding-left: $field-padding;
+            padding-right: $field-padding;
+        }
+    }
+}
+
+.xl {
+    @include pep-field-size('xl');
+}
+.lg {
+    @include pep-field-size('lg');
+}
+.md {
+    @include pep-field-size('md');
+}
+.sm {
+    @include pep-field-size('sm');
+}
+.xs {
+    @include pep-field-size('xs');
+}
+
+.mat-grid-tile {
+    overflow: inherit !important;
+}
+
+/* make content to be on top (to be on the first row - if the field is declared on more than one row but it's UI is only on one row) */
+.mat-grid-tile .mat-figure {
+    justify-content: flex-start !important ;
+    align-items: flex-start !important;
+}
+
+//  Form view
+// ------------------------
+.form-view {
+    margin-top: variables.$content-margin;
+    margin-bottom: variables.$content-margin;
+    margin-inline: 0.25rem;
+}
+
+//  Table view
+// ------------------------
+$sorting-width: 1rem;
+
+// .below-sticky-top-bar {
+//     .table-header {
+//         top: calc(#{variables.$top-bar-height});
+//     }
+// }
+
+.table-header {
+    position: sticky;
+    z-index: variables.$z-index-medium - 5;
+    // @include mixins.box-sizing(border-box);
+    box-sizing: border-box;
+    width: inherit;
+    height: calc(#{variables.$table-field-height} + #{variables.$table-spacing} + #{variables.$table-half-spacing});
+
+    .table-header-padding-top {
+        height: variables.$table-spacing;
+        width: 100%;
+    }
+
+    .row-selection {
+        margin: 0 calc(#{variables.$spacing-sm} + calc(#{variables.$spacing-xs} / 2)); // 0 0.625rem;
+        height: inherit;
+        display: flex;
+        align-items: center;
+    }
+
+    .table-header-fieldset {
+        border-radius: variables.$table-border-radius;
+        height: variables.$table-field-height; // 2rem;
+        margin-bottom: variables.$table-half-spacing; // 0.25rem;
+
+        fieldset {
+            height: inherit;
+        }
+
+        .header-column {
+            padding: 0 variables.$spacing-sm;
+            box-sizing: border-box;
+            //cursor: pointer;
+            height: inherit;
+            display: flex;
+            align-items: center;
+
+            .header-label {
+                width: 100%;
+                // @include mixins.box-sizing(border-box);
+                box-sizing: border-box;
+                user-select: none;
+                // @include mixins.calc(max-width, '100% - 0');
+                max-width: 100%;
+                @include mixins.ellipsis();
+                font-weight: 600 !important;
+                line-height: 2rem !important;
+                margin-bottom: 0;
+                // cursor: text;
+                display: flex;
+                align-items: center;
+    
+                .required,
+                .mandatory {
+                    height: 0.75rem;
+                    width: 0.75rem;
+                }
+            }
+
+            img {
+                height: 1.5rem;
+                width: 1.5rem;
+                margin: -5px auto 0 auto;
+                display: block;
+            }
+
+            &.support-sorting {
+                .sorting-box {
+                    display: none;
+                    width: $sorting-width;
+                    height: 1rem;
+                    margin: 0.5rem 0;
+
+                    .mat-icon {
+                        background-repeat: no-repeat;
+                        display: flex;
+                        height: inherit;
+                        width: inherit;
+
+                        &:hover {
+                            cursor: pointer;
+                        }
+
+                        &.sort-by {
+                            display: none !important;
+                        }
+                    }
+
+                    &.has-sorting {
+                        display: block;
+                    }
+                }
+            }
+
+            .resize-box {
+                display: none;
+                cursor: w-resize;
+                margin-inline-end: calc((#{variables.$spacing-sm} + #{$sorting-width}) * -1); // header column padding + sorting width.
+                height: variables.$table-field-height; // 2rem;
+                align-items: center;
+
+                // .mat-icon,
+                .splitter {
+                    width: 0.125rem;
+                    height: 1rem;
+                    line-height: variables.$table-field-height; // 2rem;
+                    // padding: 0 0.625rem 0 0.375rem;
+
+                    padding-inline-end: 0.425rem;
+                    border:none;
+                    border-inline-end-width: 1px;
+                    border-inline-end-style: dashed;
+                }
+            }
+
+            &:hover {
+                &.support-sorting {
+                    cursor: pointer;
+                    .header-label {
+                        cursor: pointer;
+                        padding-inline-end: 1rem;
+                    }
+
+                    .sorting-box {
+                        display: block;
+                    }
+                }
+            }
+
+            &.has-sorting {
+                &.support-sorting {
+                    .header-label {
+                        padding-inline-end: 1rem;
+                    }
+                }
+            }
+
+            &.is-resizing {
+                .sorting-box {
+                    display: block;
+                }
+            }
+
+            &.is-first {
+                // border-radius: variables.$table-border-radius 0 0 variables.$table-border-radius;
+                border-start-start-radius: variables.$table-border-radius;
+                border-start-end-radius: variables.$table-border-radius;
+            }
+
+            &.is-last {
+                // border-radius: 0 variables.$table-border-radius variables.$table-border-radius 0;
+                border-start-end-radius: variables.$table-border-radius;
+                border-end-end-radius: variables.$table-border-radius;
+                
+                &:hover {
+                    .resize-box {
+                        // width: 1rem;
+                        // border-radius: 0 variables.$table-border-radius variables.$table-border-radius 0;
+                        border-start-end-radius: variables.$table-border-radius;
+                        border-end-end-radius: variables.$table-border-radius;
+                    }
+                }
+            }
+        }
+    }
+
+    &:hover {
+        .resize-box {
+            display: flex !important;
+        }
+    }
+}
+
+.table-body {
+    width: inherit;
+    position: relative;
+
+    .table-row {
+        // @include mixins.box-sizing(border-box);
+        box-sizing: border-box;
+        width: inherit;
+        height: variables.$table-row-height; // 3rem;
+        padding: variables.$table-half-spacing 0; // 0.25rem 0;
+        // padding: variables.$table-half-spacing variables.$spacing-sm; // 0.25rem 0.5rem;
+        border-radius: variables.$table-border-radius;
+
+        .row-selection {
+            margin: 0 calc(#{variables.$spacing-sm} + #{variables.$spacing-2xs});
+            height: variables.$table-row-fieldset-height; // 2.5rem;
+            display: flex;
+            align-items: center;
+
+            &.mat-radio-button {
+                display: inline-flex;
+            }
+        }
+
+        fieldset {
+            height: variables.$table-row-fieldset-height; // 2.5rem;
+            border-radius: variables.$table-border-radius;
+            // padding: 0 variables.$spacing-2xs;
+            .table-cell {
+                box-sizing: border-box;
+                padding: 0 variables.$spacing-2xs;
+
+                &:first-of-type {
+                    // padding: 0 variables.$spacing-2xs 0 variables.$spacing-xs;
+                    padding-inline: variables.$spacing-xs variables.$spacing-2xs;
+                }
+
+                &:last-of-type {
+                    // padding: 0 variables.$spacing-xs 0 variables.$spacing-2xs;
+                    padding-inline: variables.$spacing-2xs variables.$spacing-xs;
+                }
+            }
+
+            .pepperi-input, .pep-input {
+                padding: 0 variables.$spacing-md;
+                height: variables.$table-field-height; // 2rem;
+            }
+
+            // -----------------------------------------------------
+            //  Override material style
+            // -----------------------------------------------------
+            .mat-form-field .mat-form-field-wrapper {
+                .mat-form-field-flex {
+                    min-height: variables.$table-field-height; // 2rem;
+                    height: variables.$table-field-height; // 2rem;
+                    padding: 0 variables.$spacing-xs;
+                }
+
+                // .mat-select-arrow {
+                //     margin-right: variables.$spacing-xs;
+                //     margin-left: variables.$spacing-xs;
+                // }
+            }
+        }
+
+        &:hover,
+        &.highlighted,
+        &:active,
+        &.selected {
+            .pepperi-form, .pep-form {
+                z-index: variables.$z-index-lowest + 1;
+            }
+        }
+    }
+}
+
+.table-total {
+    position: sticky;
+    z-index: variables.$z-index-medium - 5;
+    // @include mixins.box-sizing(border-box);
+    box-sizing: border-box;
+    width: inherit;
+    height: calc(#{variables.$table-field-height} + #{variables.$table-spacing} + #{variables.$table-half-spacing});
+    padding-top: variables.$table-half-spacing;
+
+    .table-header-fieldset {
+        border-radius: variables.$table-border-radius;
+        height: variables.$table-field-height; // 2rem;
+        margin-bottom: variables.$table-half-spacing; // 0.25rem;
+
+        .total-column {
+            padding: 0 variables.$spacing-sm;
+            height: inherit;
+            display: flex;
+            align-items: center;
+
+            .total-label {
+                width: 100%;
+                // @include mixins.box-sizing(border-box);
+                box-sizing: border-box;
+                user-select: none;
+                // @include mixins.calc(max-width, '100% - 0');
+                max-width: 100%;
+                @include mixins.ellipsis();
+                font-weight: variables.$font-weight-bold !important;
+                line-height: variables.$table-field-height; // 2rem !important;
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+.list-pager {
+    .pager-container {
+        position: sticky;
+        bottom: 0;
+        z-index: variables.$z-index-medium - 5;
+        width: inherit;
+        height: auto;
+    }
+}
+
+
+//  Card view & Line view
+// ------------------------
+.cards-body {
+    position: relative;
+    margin: 0 (calc(#{variables.$content-margin} * -1) / 2); // -0.5rem;
+    padding-bottom: variables.$content-padding;
+}
+
+.line-view,
+.card-view {
+    margin: 0;
+    padding: 0 !important;
+
+    .card-selection {
+        // margin: variables.$spacing-xs calc(#{variables.$content-margin} * -1) 0 variables.$spacing-xs;
+        margin-top: variables.$spacing-xs;
+        margin-inline: variables.$spacing-xs calc(#{variables.$content-margin} * -1);
+        height: 1rem;
+        width: 1rem;
+        position: relative;
+        z-index: variables.$z-index-lowest;
+    }
+
+    fieldset {
+        border-radius: variables.$card-border-radius;
+        margin: variables.$spacing-md; // spacing between cards.
+        position: relative;
+
+        .card-spacing {
+            margin: variables.$spacing-lg !important; // spacing inside card.
+        }
+
+        // Showing two labels in the same row with ellipsis.
+        .card-flex-container {
+            // display: flex;
+            display: grid;
+            grid-auto-flow: column;
+
+            &.pepperi-button, &.pep-button {
+                background: unset; // Cancel the default background and shows background only on the declared states (hover, etc).
+            }
+
+            .title {
+                // flex-grow: 0;
+                flex-shrink: 5000;
+                @include mixins.ellipsis();
+                // padding: variables.$spacing-2xs;
+                height: inherit;
+
+                &.no-shrink {
+                    flex-shrink: 1;
+                    // white-space:normal;
+                    // overflow: unset;
+                }
+            }
+
+            .value {
+                // flex-grow: 0;
+                flex-shrink: 1;
+                margin: 0 variables.$spacing-xs;
+                @include mixins.ellipsis();
+                height: inherit;
+
+                &.wrap {
+                    white-space:normal;
+                }
+            }
+
+            .card-edit-button {
+                flex-basis: variables.$card-field-button-size;
+                flex-shrink: 0;
+
+                width: variables.$card-field-button-size;
+                height: variables.$card-field-button-size;
+                line-height: variables.$card-field-button-size;
+                min-width: unset;
+                padding: 0;
+                pointer-events: none;
+                align-self: center;
+
+                &.self-end {
+                    align-self: flex-end;
+                }
+
+                .mat-icon {
+                    // line-height: 0.5rem !important;
+                    width: variables.$card-field-button-icon-size;
+
+                    .svg-icon {
+                        width: variables.$card-field-button-icon-size; // variables.$card-field-button-size - 0.25rem !important;
+                        // height: variables.$card-field-button-size - 0.25rem !important;
+                    }
+                }
+            }
+        }
+
+        // -----------------------------------------------------
+        //  Override material style
+        // -----------------------------------------------------
+        .one-row {
+            &.card-flex-container {
+                align-items: center;
+            }
+
+            .pepperi-button:not(.card-edit-button), .pep-button:not(.card-edit-button) {
+                // height: variables.$card-field-height !important; // 1.5rem !important;
+                // line-height: 1.5rem !important;
+                padding: 0 variables.$spacing-xs;
+            }
+
+            .mat-form-field .mat-form-field-wrapper {
+                .mat-form-field-flex {
+                    height: variables.$card-field-height !important; // 1.5rem !important;
+                    min-height: variables.$card-field-height; // 1.5rem;
+                    padding: 0 variables.$spacing-xs;
+                }
+
+                .pepperi-button, .pep-button,
+                .mat-select-trigger,
+                .mat-form-field-infix {
+                    height: variables.$card-field-height !important; // 1.5rem !important;
+                    // line-height: variables.$card-field-height !important;
+                }
+
+                .mat-input-element {
+                    font-size: variables.$fs-sm !important;
+                    // line-height: inherit !important;
+                }
+            }
+        }
+    }
+
+    // For the campaign style.
+    &.flat {
+        fieldset {
+            box-shadow: unset !important;
+            margin: 0.25rem;
+
+            mat-grid-list {
+                margin: 0 !important;
+            }
+        }
+    }
+}
+
+//  Card views type sizes
+.line-view {
+    width:100%;
+}
+.card-view {
+    $screen-almost-full-width: 99.99%;
+
+    /* > XLarge */
+    @media (min-width: variables.$screen-max-size-xl) {
+        min-width: calc(#{$screen-almost-full-width} / 6);
+
+        &.small-card {
+            min-width: calc(#{$screen-almost-full-width} / 8);
+        }
+
+        &.x-small-card {
+            min-width: calc(#{$screen-almost-full-width} / 9);
+        }
+    }
+    /* Large - XLarge */
+    @media (max-width: variables.$screen-max-size-xl) and (min-width: variables.$screen-max-size-lg) {
+        min-width: calc(#{$screen-almost-full-width} / 4);
+
+        &.small-card {
+            min-width: calc(#{$screen-almost-full-width} / 6);
+        }
+
+        &.x-small-card {
+            min-width: calc(#{$screen-almost-full-width} / 7);
+        }
+    }
+    /* Medium - Large */
+    @media (max-width: variables.$screen-max-size-lg) and (min-width: variables.$screen-max-size-md) {
+        min-width: calc(#{$screen-almost-full-width} / 3);
+
+        &.small-card {
+            min-width: calc(#{$screen-almost-full-width} / 4);
+        }
+
+        &.x-small-card {
+            min-width: calc(#{$screen-almost-full-width} / 5);
+        }
+    }
+    /* Small - Medium */
+    @media (max-width: variables.$screen-max-size-md) and (min-width: variables.$screen-max-size-sm) {
+        min-width: calc(#{$screen-almost-full-width} / 3);
+
+        &.small-card {
+            min-width: calc(#{$screen-almost-full-width} / 3);
+        }
+
+        &.x-small-card {
+            min-width: calc(#{$screen-almost-full-width} / 4);
+        }
+    }
+    /* Extra small - Small */
+    @media (max-width: variables.$screen-max-size-sm) and (min-width: variables.$screen-max-size-xs) {
+        min-width: calc(#{$screen-almost-full-width} / 2);
+
+        &.small-card {
+            min-width: calc(#{$screen-almost-full-width} / 2);
+        }
+
+        &.x-small-card {
+            min-width: calc(#{$screen-almost-full-width} / 2);
+        }
+    }
+    /* < Extra small */
+    @media (max-width: variables.$screen-max-size-xs) {
+        min-width: calc(#{$screen-almost-full-width} / 1);
+
+        &.small-card {
+            min-width: calc(#{$screen-almost-full-width} / 1);
+        }
+
+        &.x-small-card {
+            min-width: calc(#{$screen-almost-full-width} / 1);
+        }
+    }
+}
+
+//  Custom field (added for stand alone field).
+// ---------------------------------------------
+.pepperi-field, .pep-field {
+    &:not(.pep-field-no-spacing) {
+        min-height: variables.$form-row-height;
+        margin-bottom: variables.$form-spacing;
+    }
+}
+
+@mixin pep-general-theme() {
+    .required,
+    .mandatory {
+        color: functions.get-pep-color(color-system-caution, color-base);
+
+        .svg-icon {
+            fill: functions.get-pep-color(color-system-caution, color-base);
+        }
+    }
+
+    .svg-icon {
+        @include mixins.state-icon();
+    }
+
+    .pepperi-report-fields, .pep-report-fields {
+        .pepperi-input, .pep-input {
+            background: transparent !important;
+        }
+    }
+
+    // -----------------------------------------------------
+    //  Override material style
+    // -----------------------------------------------------
+    .mat-form-title {
+        &.disable {
+            color: functions.get-pep-color(color-text, color-dimmed);
+        }
+    }
+
+    .mat-form-field-appearance-outline .mat-form-field-outline-end,
+    .mat-form-field-appearance-outline .mat-form-field-outline-start {
+        border-color: transparent; //red !important;
+    }
+
+    .mat-form-field-appearance-outline .mat-form-field-wrapper {
+        margin-top: unset;
+        margin-bottom: unset;
+    }
+
+    .mat-form-field {
+        .mat-form-field-wrapper {
+            .mat-form-field-prefix,
+            .mat-form-field-suffix {
+                color: functions.get-pep-color(color-weak, color-flat-r-20);
+
+                // For non icons symbols.
+                .pep-text-icon {
+                    color: functions.get-pep-color(color-weak, color-flat-r-20);
+                }
+            }
+
+            .mat-form-field-infix {
+                .mat-input-element {
+                    &:disabled {
+                        color: functions.get-pep-color(color-text, color-dimmed);
+                    }
+                }
+            }
+        }
+
+        .mat-form-field-flex {
+            border-radius: variables.$border-radius-md;
+        }
+
+        @include mixins.pep-form-field-states();
+
+        // Invalid (Error)
+        &.mat-form-field-invalid {
+            .mat-form-field-wrapper {
+                @include mixins.state-error-wrapper();
+
+                .mat-form-field-flex {
+                    @include mixins.state-error();
+                }
+
+                .mat-form-field-subscript-wrapper {
+                    background: functions.get-pep-color(color-system-caution, color-base);
+
+                    .mat-error {
+                        color: functions.get-pep-color(color-text, color-invert);
+                    }
+                }
+            }
+
+            // Focused & Error
+            &.mat-focused .mat-form-field-wrapper {
+                @include mixins.focus();
+                z-index: variables.$z-index-medium - 3; // To show error on table above the next row element.
+
+                .mat-form-field-flex {
+                    box-shadow: unset !important;
+                }
+            }
+        }
+    }
+
+    //  Table view
+    // ------------------------
+    .table-total,
+    .table-header {
+        // @include mixins.state-list-body-default();
+        background: transparent;
+
+        .table-header-padding-top {
+            background: functions.get-pep-color(color-system-primary-invert, color-base);
+        }
+
+        .table-header-fieldset {
+            background-color: functions.get-pep-color(color-weak, color-flat-r-30);
+            color: functions.get-pep-color(color-text, color-dimmed);
+
+            .header-column {
+                .sorting-box {
+                    .mat-icon {
+                        .svg-icon {
+                            fill: functions.get-pep-color(color-text, color-dimmed);
+                        }
+                    }
+                }
+
+                .resize-box {
+                    .splitter {
+                        border-color: functions.get-pep-color(color-weak, color-tran-50);
+                    }
+                }
+
+                &:hover {
+                    color: functions.get-pep-color(color-weak, color-tran-80);
+                    background-color: functions.get-pep-color(color-weak, color-tran-20);
+
+                    .resize-box {
+                        background: functions.get-pep-color(color-text, color-link-highlight);
+
+                        .splitter {
+                            border-color: functions.get-pep-color(color-weak, color-tran-80);
+                        }
+
+                        &:hover {
+                            background: functions.get-pep-color(color-text, color-link-focus);
+
+                            .splitter {
+                                border-color: functions.get-pep-color(color-weak, color-base);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .list-pager {
+        .pager-container {
+            background: functions.get-pep-color(color-system-primary-invert, color-base);
+        }
+    }
+
+    .table-body {
+        @include mixins.state-list-body-default();
+
+        .table-row {
+            .table-row-fieldset {
+                @include mixins.state-table-row-default();
+            }
+
+            &:hover,
+            &.highlighted {
+                .table-row-fieldset {
+                    @include mixins.state-table-row-hover();
+                }
+            }
+
+            &:active {
+                .table-row-fieldset {
+                    @include mixins.state-table-row-active();
+                }
+            }
+
+            &.selected {
+                .table-row-fieldset {
+                    @include mixins.state-table-row-selected();
+                }
+            }
+        }
+    }
+
+    //  Card view & Line view
+    // ------------------------
+    .line-view,
+    .card-view {
+        @include mixins.state-list-body-default();
+
+        fieldset {
+            @include mixins.state-card-default();
+
+            &:hover {
+                @include mixins.state-card-hover();
+            }
+
+            &:active {
+                @include mixins.state-card-active();
+            }
+
+            .title {
+                color: functions.get-pep-color(color-text, color-dimmed);
+            }
+        }
+
+        &.selected {
+            fieldset {
+                @include mixins.state-card-selected();
+            }
+        }
+
+        // If we wand the blue focus to be only on specific .selectable class instead of &:active state.
+        // &.selectable {
+        //     fieldset {
+        //         &:active {
+        //             @include mixins.state-card-active();
+        //         }
+        //     }
+        // }
+    }
+
+}