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

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

@@ -1,22 +1,182 @@
-// -----------------------------------------------------
-//  Date time
-// -----------------------------------------------------
-
-// -----------------------------------------------------
-//  Override material style
-// -----------------------------------------------------
-.mat-form-field {
-    .mat-form-field-wrapper {
-        .mat-form-field-prefix,
-        .mat-form-field-suffix {
-            .mat-datetimepicker-toggle {
-                &.mat-button {
-                    padding: 0;
-                }
-            }
-        }
-    }
-}
-
-@mixin pep-datetime-theme($pepperi-theme) {
-}
+// @use '../abstracts/variables';
+// @use '../abstracts/mixins';
+// @use '../abstracts/functions';
+
+// // -----------------------------------------------------
+// //  Date time
+// // -----------------------------------------------------
+
+// // -----------------------------------------------------
+// //  Override material style
+// // -----------------------------------------------------
+// .mat-form-field {
+//     .mat-form-field-wrapper {
+//         .mat-form-field-prefix,
+//         .mat-form-field-suffix {
+//             .mat-datetimepicker-toggle {
+//                 &.mat-button {
+//                     padding: 0;
+//                 }
+//             }
+//         }
+//     }
+// }
+
+// @mixin pep-datetime-theme() {
+//     // -----------------------------------------------------
+//     //  Override material style
+//     // -----------------------------------------------------
+//     .mat-datetimepicker-dialog {
+//         max-width: 90vw !important;
+//     }
+
+//     .mat-datetimepicker-content {
+//         border-radius: inherit;
+
+//         .mat-datetimepicker-calendar-header {
+//             @include mixins.state-strong-default();
+//         }
+
+//         .mat-datetimepicker-calendar-content {
+//             .mat-month-content {
+//                 .mat-datetimepicker-calendar-controls {
+//                     color: functions.get-pep-color(color-text, color-main);
+
+//                     .mat-datetimepicker-calendar-previous-button {
+//                         @include mixins.select-arrow();
+//                         transform: rotate(90deg);
+
+//                         svg {
+//                             @include mixins.state-icon();
+//                         }
+//                     }
+
+//                     // .mat-datetimepicker-calendar-period-button {
+//                     // }
+
+//                     .mat-datetimepicker-calendar-next-button {
+//                         @include mixins.select-arrow();
+//                         transform: rotate(-90deg);
+
+//                         svg {
+//                             @include mixins.state-icon();
+//                         }
+//                     }
+//                 }
+//             }
+
+//             mat-datetimepicker-year-view,
+//             mat-datetimepicker-month-view {
+//                 .mat-datetimepicker-calendar-table {
+//                     // Days string (sun, mon...)
+//                     .mat-datetimepicker-calendar-table-header {
+//                         color: functions.get-pep-color(color-text, color-dimmed);
+//                     }
+
+//                     // Days numbers
+//                     .mat-datetimepicker-calendar-body {
+//                         color: functions.get-pep-color(color-text, color-main);
+
+//                         .mat-datetimepicker-calendar-body-label {
+//                             color: functions.get-pep-color(color-text, color-dimmed);
+//                         }
+
+//                         .mat-datetimepicker-calendar-body-cell {
+//                             // @include mixins.state-weak-default();
+
+//                             &:hover {
+//                                 .mat-datetimepicker-calendar-body-cell-content {
+//                                     @include mixins.state-weak-hover();
+//                                 }
+//                             }
+
+//                             &:active {
+//                                 .mat-datetimepicker-calendar-body-cell-content {
+//                                     @include mixins.state-weak-active(color-weak, true, true);
+//                                 }
+//                             }
+
+//                             // Regular cell
+//                             .mat-datetimepicker-calendar-body-cell-content {
+                                
+//                                 // Today cell
+//                                 &.mat-datetimepicker-calendar-body-today {
+//                                     @include mixins.state-regular-default(true);
+
+//                                     &:hover {
+//                                         @include mixins.state-regular-hover(true);
+//                                     }
+
+//                                     &:active {
+//                                         @include mixins.state-regular-focus(true);
+//                                     }
+//                                 }
+
+//                                 // Active cell
+//                                 &.mat-datetimepicker-calendar-body-selected {
+//                                     // color:white ;
+//                                     @include mixins.state-strong-default();
+
+//                                     &:hover {
+//                                         @include mixins.state-strong-hover();
+//                                     }
+
+//                                     &:active {
+//                                         @include mixins.state-strong-focus();
+//                                     }
+//                                 }
+//                             }
+
+//                         }
+//                     }
+//                 }
+//             }
+
+//             mat-datetimepicker-clock {
+//                 .mat-datetimepicker-clock {
+//                     // background-color: yellowgreen;
+//                     @include mixins.state-weak-default();
+
+//                     .mat-datetimepicker-clock-center {
+//                         // background-color: yellow;
+//                         @include mixins.state-strong-default();
+//                     }
+
+//                     .mat-datetimepicker-clock-hand {
+//                         // color: blue;
+//                         // background-color: yellow;
+//                         @include mixins.state-strong-default();
+
+//                         &::before {
+//                             // background-color: yellow;
+//                             @include mixins.state-strong-default();
+//                         }
+//                     }
+
+//                     .mat-datetimepicker-clock-hours,
+//                     .mat-datetimepicker-clock-minutes {
+//                         .mat-datetimepicker-clock-cell {
+//                             color: functions.get-pep-color(color-text, color-main);
+
+//                             &:hover {
+//                                 @include mixins.state-weak-hover();
+//                             }
+
+//                             &.mat-datetimepicker-clock-cell-selected {
+//                                 @include mixins.state-strong-default();
+
+//                                 &:hover {
+//                                     @include mixins.state-strong-hover();
+//                                 }
+
+//                                 &:active {
+//                                     @include mixins.state-strong-focus();
+//                                 }
+//                             }
+//                         }
+//                     }
+//                 }
+//             }
+//         }
+//     }
+// }

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

@@ -1,219 +1,237 @@
-// -----------------------------------------------------
-//  File
-// -----------------------------------------------------
-$file-input-z-index: 1;
-
-.pepperi-file-container, .pep-file-container {
-    .mat-form-field {
-        .pepperi-file-wrapper, .pep-file-wrapper {
-            position: relative;
-            border-radius: $border-radius-md;
-            cursor: pointer;
-            padding: 1px 0.25rem;
-
-            .pepperi-file, .pep-file {
-                border-radius: $border-radius-md;
-                display: grid;
-                justify-content: center;
-                align-items: center;
-                width: 100%;
-                max-width: 100%;
-                height: inherit;
-                text-align: center;
-
-                .pepperi-file-message, .pep-file-message {
-                    display: grid;
-                    align-items: center;
-                    justify-items: center;
-
-                    a {
-                        display: grid;
-                        align-items: center;
-                        justify-items: center;
-                    }
-
-                    span {
-                        width: 100%;
-                    }
-                }
-
-                .pepperi-file-preview, .pep-file-preview {
-                    display: grid;
-                    align-items: center;
-                    justify-items: center;
-                    z-index: $file-input-z-index + 1;
-
-                    img {
-                        object-fit: contain;
-                        max-height: 100%;
-                        max-height: stretch;
-                        max-width: 100%;
-                        max-width: stretch;
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                    }
-                }
-
-                .pepperi-button, .pep-button {
-                    // + 2px for the border top + bottom (as :after)
-                    height: calc(2.5rem + 2px);
-                    max-height: calc(2.5rem + 2px);
-                    width: 2.5rem;
-                    max-width: 2.5rem;
-                    position: absolute;
-                    z-index: $file-input-z-index + 8;
-                    top: 0;
-                    right: 0;
-                    border-radius: 0 $border-radius-md 0 $border-radius-md;
-                    padding: 0;
-                    justify-content: center;
-
-                    mat-icon {
-                        vertical-align: middle;
-                    }
-
-                    &.right-alignment {
-                        right: unset;
-                        left: 0;
-                        border-radius: $border-radius-md 0 $border-radius-md 0;
-                    }
-                }
-
-                input {
-                    position: absolute;
-                    height: 100%;
-                    width: 100%;
-                    opacity: 0;
-                    cursor: pointer;
-                    z-index: $file-input-z-index + 4;
-                }
-
-            }
-
-            .hidden-input {
-                position: absolute;
-                top: 0;
-                opacity: 0;
-                cursor: pointer;
-                z-index: $file-input-z-index;
-                width: 100%;
-                height: 100%;
-
-                &.signature {
-                    z-index: $file-input-z-index + 5;
-                }
-            }
-        }
-
-        // -----------------------------------------------------
-        //  Override material style
-        // -----------------------------------------------------
-        &.mat-form-field-disabled {
-            .hidden-input {
-                cursor: auto !important;
-            }
-        }
-    }
-
-    &.one-row {
-        .mat-form-field {
-            .pepperi-file-wrapper, .pep-file-wrapper {
-                .pepperi-file, .pep-file {
-                    .pepperi-file-message, .pep-file-message {
-                        display: flex;
-
-                        a {
-                            display: flex;
-                        }
-                    }
-
-                    .pepperi-button, .pep-button {
-                        border-radius: 0 $border-radius-md $border-radius-md 0;
-
-                        &.right-alignment {
-                            right: unset;
-                            left: 0.0625rem;
-                            border-radius: $border-radius-md 0 0 $border-radius-md;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.pepperi-report-file, .pep-report-file {
-    cursor: pointer;
-    border-radius: $border-radius-md;
-}
-
-// -----------------------------------------------------
-//  Override material style
-// -----------------------------------------------------
-.pepperi-file-container, .pep-file-container {
-    display: grid;
-
-    .mat-form-field {
-        .mat-form-field-flex {
-            padding: 0 !important;
-
-            .mat-form-field-infix {
-                display: block !important;
-                width: 100%;
-            }
-        }
-    }
-}
-
-@mixin pep-file-theme($pepperi-theme) {
-    .pepperi-file-container, .pep-file-container {
-        .mat-form-field {
-            .pepperi-file-wrapper, .pep-file-wrapper {
-                color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                @include inline(get-pep-color($pepperi-theme, color-system-primary, color-flat-r-20), 1px, dashed);
-
-                .pepperi-file, .pep-file {
-                    .pepperi-button, .pep-button {
-                        color: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-
-                        &.delete {
-                            background-color: get-pep-color($pepperi-theme, color-system-primary, color-tran-70);
-
-                            .svg-icon {
-                                fill: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-                            }
-
-                            &:hover {
-                                background: get-pep-color($pepperi-theme, color-system-caution, color-base);
-                                box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, regular);
-                            }
-                        }
-                    }
-
-                    .svg-icon {
-                        fill: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                    }
-
-                    .pepperi-file-preview, .pep-file-preview {
-                        a {
-                            color: get-pep-color($pepperi-theme, color-text, color-link);
-
-                            .svg-icon {
-                                fill: get-pep-color($pepperi-theme, color-text, color-link);
-                            }
-                        }
-                    }
-                }
-            }
-
-            // Disabled
-            &.mat-form-field-disabled {
-                .pepperi-file-wrapper:after, .pep-file-wrapper:after {
-                    border: unset;
-                }
-            }
-        }
-    }
-}
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
+// -----------------------------------------------------
+//  File
+// -----------------------------------------------------
+$file-input-z-index: 1;
+
+.pepperi-file-container, .pep-file-container {
+    ::ng-deep {
+        .mat-form-field {
+            .pepperi-file-wrapper, .pep-file-wrapper {
+                position: relative;
+                border-radius: variables.$border-radius-md;
+                cursor: pointer;
+                padding: 1px 0.25rem;
+
+                .pepperi-file, .pep-file {
+                    border-radius: variables.$border-radius-md;
+                    display: grid;
+                    justify-content: center;
+                    align-items: center;
+                    width: 100%;
+                    max-width: 100%;
+                    height: inherit;
+                    text-align: center;
+
+                    .pepperi-file-message, .pep-file-message {
+                        display: grid;
+                        align-items: center;
+                        justify-items: center;
+
+                        a {
+                            display: grid;
+                            align-items: center;
+                            justify-items: center;
+                        }
+
+                        span {
+                            width: 100%;
+                        }
+                    }
+
+                    .pepperi-file-preview, .pep-file-preview {
+                        display: grid;
+                        align-items: center;
+                        justify-items: center;
+                        z-index: $file-input-z-index + 1;
+
+                        img {
+                            object-fit: contain;
+                            max-height: 100%;
+                            max-height: stretch;
+                            max-width: 100%;
+                            max-width: stretch;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                        }
+                    }
+
+                    .pepperi-button, .pep-button {
+                        // + 2px for the border top + bottom (as :after)
+                        height: calc(2.5rem + 2px);
+                        max-height: calc(2.5rem + 2px);
+                        width: 2.5rem;
+                        max-width: 2.5rem;
+                        position: absolute;
+                        z-index: $file-input-z-index + 8;
+                        top: 0;
+                        right: 0;
+                        border-radius: 0 variables.$border-radius-md 0 variables.$border-radius-md;
+                        padding: 0;
+                        justify-content: center;
+
+                        mat-icon {
+                            vertical-align: middle;
+                        }
+
+                        &.right-alignment {
+                            right: unset;
+                            left: 0;
+                            border-radius: variables.$border-radius-md 0 variables.$border-radius-md 0;
+                        }
+                    }
+
+                    input {
+                        position: absolute;
+                        height: 100%;
+                        width: 100%;
+                        opacity: 0;
+                        cursor: pointer;
+                        z-index: $file-input-z-index + 4;
+                    }
+
+                }
+
+                .hidden-input {
+                    position: absolute;
+                    top: 0;
+                    opacity: 0;
+                    cursor: pointer;
+                    z-index: $file-input-z-index;
+                    width: 100%;
+                    height: 100%;
+
+                    &.signature {
+                        z-index: $file-input-z-index + 5;
+                    }
+                }
+            }
+
+            // -----------------------------------------------------
+            //  Override material style
+            // -----------------------------------------------------
+            &.mat-form-field-disabled {
+                .hidden-input {
+                    cursor: auto !important;
+                }
+            }
+        }
+    }
+
+    &.one-row {
+        ::ng-deep {
+            .mat-form-field {
+                .pepperi-file-wrapper, .pep-file-wrapper {
+                    .pepperi-file, .pep-file {
+                        .pepperi-file-message, .pep-file-message {
+                            display: flex;
+
+                            a {
+                                display: flex;
+                            }
+                        }
+
+                        .pepperi-button, .pep-button {
+                            border-radius: 0 variables.$border-radius-md variables.$border-radius-md 0;
+
+                            &.right-alignment {
+                                right: unset;
+                                left: 0.0625rem;
+                                border-radius: variables.$border-radius-md 0 0 variables.$border-radius-md;
+                            }
+                        }
+                    }
+                }
+            }
+        }    
+    }
+}
+
+.pepperi-report-file, .pep-report-file {
+    cursor: pointer;
+    border-radius: variables.$border-radius-md;
+}
+
+// -----------------------------------------------------
+//  Override material style
+// -----------------------------------------------------
+.pepperi-file-container, .pep-file-container {
+    display: grid;
+
+    ::ng-deep {
+        .mat-form-field {
+            .mat-form-field-flex {
+                padding: 0 !important;
+
+                .mat-form-field-infix {
+                    display: block !important;
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+
+@mixin pep-file-theme() {
+    .pepperi-file-container, .pep-file-container {
+        ::ng-deep {
+            .mat-form-field {
+                .pepperi-file-wrapper, .pep-file-wrapper {
+                    color: functions.get-pep-color(color-text, color-dimmed);
+                    @include mixins.inline(functions.get-pep-color(color-system-primary, color-flat-r-20), 1px, dashed);
+
+                    .pepperi-file, .pep-file {
+                        .pepperi-button, .pep-button {
+                            color: functions.get-pep-color(color-system-primary-invert, color-base);
+
+                            &.delete {
+                                background-color: functions.get-pep-color(color-system-primary, color-tran-70);
+
+                                .svg-icon {
+                                    fill: functions.get-pep-color(color-system-primary-invert, color-base);
+                                }
+
+                                &:hover {
+                                    background: functions.get-pep-color(color-system-caution, color-base);
+                                    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+                                }
+                            }
+                        }
+
+                        .svg-icon {
+                            fill: functions.get-pep-color(color-text, color-dimmed);
+                        }
+
+                        .pepperi-file-preview, .pep-file-preview {
+                            a {
+                                color: functions.get-pep-color(color-text, color-link);
+
+                                .svg-icon {
+                                    fill: functions.get-pep-color(color-text, color-link);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Disabled
+                &.mat-form-field-disabled {
+                    .pepperi-file-wrapper:after, .pep-file-wrapper:after {
+                        border: unset;
+                    }
+                }
+            }
+        }
+
+        .modal-dialog {
+            .modal-content {
+                color: functions.get-pep-color(color-text, color-dimmed);
+            }
+        }
+    }
+}