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

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

@@ -1,4 +1,7 @@
-@import '../abstracts/mixins';
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
 // -----------------------------------------------------
 //  Checkbox
 // -----------------------------------------------------
@@ -39,7 +42,7 @@
 .mat-checkbox-checked {
     .mat-checkbox-layout {
         .mat-checkbox-background {
-            border-radius: $border-radius-md;
+            border-radius: variables.$border-radius-md;
         }
     }
 }
@@ -79,7 +82,7 @@
     align-items: center;
 
     .mat-checkbox {
-        @include fix-inline-z-index();
+        @include mixins.fix-inline-z-index();
         height: inherit;
         display: flex;
         align-items: center;
@@ -99,7 +102,7 @@
 
     .emoji-icon {
         line-height: 1rem;
-        border-radius: $border-radius-md;
+        border-radius: variables.$border-radius-md;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         padding: 0;
         background: transparent;
@@ -194,11 +197,11 @@
         // padding: 0 0.25rem;
         // padding: 0;
         padding-top: 0;
-        height: $card-field-height; // 1.5rem;
+        height: variables.$card-field-height; // 1.5rem;
         line-height: 1rem;
 
         &.no-title {
-            width: $card-field-height !important; // 1.5rem !important;
+            width: variables.$card-field-height !important; // 1.5rem !important;
 
             .mat-checkbox-inner-container {
                 // margin: auto 0.5rem auto 0rem !important;
@@ -218,7 +221,7 @@
             // margin-left: 0.25rem;
             height: 1rem;
             width: 1rem;
-            @include font-size($fs-xs);
+            @include mixins.font-size(variables.$fs-xs);
         }
 
         .mat-checkbox-layout {
@@ -226,7 +229,7 @@
         }
 
         .mat-checkbox-inner-container {
-            border-radius: $border-radius-md;
+            border-radius: variables.$border-radius-md;
 
             @include pep-checkbox-size('sm');
         }
@@ -243,7 +246,7 @@
 }
 
 .mat-checkbox-layout {
-    @include fix-inline-z-index();
+    @include mixins.fix-inline-z-index();
     // height: inherit;
     margin-bottom: unset; // Cancel bootstrap defaults for Label.
     width: fit-content;
@@ -255,7 +258,7 @@
     grid-auto-flow: column;
 
     .mat-checkbox-inner-container {
-        border-radius: $border-radius-md;
+        border-radius: variables.$border-radius-md;
 
         @include pep-checkbox-size('lg');
 
@@ -266,7 +269,7 @@
 
     .mat-checkbox-label {
         display: block;
-        @include ellipsis();
+        @include mixins.ellipsis();
         span {
             margin: 0 0.25rem;
         }
@@ -276,7 +279,7 @@
         height: inherit;
         width: inherit;
         display: flex;
-        border-radius: $border-radius-md;
+        border-radius: variables.$border-radius-md;
     }
 }
 
@@ -314,25 +317,25 @@
     }
 }
 
-@mixin pep-checkbox-theme($pepperi-theme) {
+@mixin pep-checkbox-theme() {
     .pepperi-checkbox-container, .pep-checkbox-container {
-        @include state-weak-default($pepperi-theme);
+        @include mixins.state-weak-default();
         &.no-default-background {
             background: unset;
         }
         
         &:hover:not(.disable) {
-            @include state-weak-hover($pepperi-theme);
+            @include mixins.state-weak-hover();
         }
         &:focus:not(.disable) {
-            @include state-weak-focus($pepperi-theme);
+            @include mixins.state-weak-focus();
         }
         // &:active {
-        //     @include state-weak-active($pepperi-theme);
+        //     @include mixins.state-weak-active();
         // }
         &.disable,
         &:disabled {
-            @include state-weak-disable($pepperi-theme);
+            @include mixins.state-weak-disable();
         }
 
         .emoji-icon {
@@ -341,13 +344,13 @@
         &:not(.disable) {
             .emoji-icon {
                 &:focus {
-                    @include focus($pepperi-theme);
+                    @include mixins.focus();
                 }
             }
         }
 
         &.pepperi-card-checkbox, &.pep-card-checkbox {
-            background: get-pep-color($pepperi-theme, color-weak, color-tran-10);
+            background: functions.get-pep-color(color-weak, color-tran-10);
         }
 
     }
@@ -357,7 +360,7 @@
         justify-content: center;
 
         .svg-icon {
-            fill: get-pep-color($pepperi-theme, color-system-caution, color-base);
+            fill: functions.get-pep-color(color-system-caution, color-base);
         }
     }
 
@@ -367,19 +370,19 @@
     .mat-checkbox-layout {
         &:hover {
             .mat-checkbox-frame {
-                @include state-regular-hover($pepperi-theme, true);
+                @include mixins.state-regular-hover(true);
             }
         }
 
         &:active {
             .mat-checkbox-frame {
-                @include state-regular-active($pepperi-theme, true);
+                @include mixins.state-regular-active(true);
             }
         }
 
         .mat-checkbox-frame {
             // border: unset;
-            @include state-regular-default($pepperi-theme, true);
+            @include mixins.state-regular-default(true);
         }
     }
 
@@ -389,26 +392,26 @@
         .mat-checkbox-layout {
             &:hover {
                 .mat-checkbox-background {
-                    @include state-regular-hover($pepperi-theme, true);
+                    @include mixins.state-regular-hover(true);
                     opacity: 0.7;
                 }
             }
 
             &:active {
                 .mat-checkbox-background {
-                    @include state-regular-active($pepperi-theme, true);
+                    @include mixins.state-regular-active(true);
                 }
             }
 
             .mat-checkbox-background {
-                @include state-regular-default($pepperi-theme, true);
+                @include mixins.state-regular-default(true);
             }
         }
     }
 
     .mat-checkbox-indeterminate {
         .mat-checkbox-mixedmark {
-            background: get-pep-color($pepperi-theme, color-text, color-dimmed) !important;
+            background: functions.get-pep-color(color-text, color-dimmed) !important;
         }
     }
 
@@ -417,20 +420,20 @@
         .mat-checkbox-layout {
             &:hover {
                 .mat-checkbox-frame {
-                    @include state-regular-hover($pepperi-theme, true);
-                    @include focus($pepperi-theme);
+                    @include mixins.state-regular-hover(true);
+                    @include mixins.focus();
                 }
             }
 
             &:active {
                 .mat-checkbox-frame {
-                    @include state-regular-active($pepperi-theme, true);
-                    @include focus($pepperi-theme);
+                    @include mixins.state-regular-active(true);
+                    @include mixins.focus();
                 }
             }
 
             .mat-checkbox-frame {
-                @include state-regular-focus($pepperi-theme, true);
+                @include mixins.state-regular-focus(true);
             }
         }
     }
@@ -440,7 +443,7 @@
         .mat-checkbox-layout {
             &:hover {
                 .mat-checkbox-background {
-                    @include state-regular-disable($pepperi-theme, true);
+                    @include mixins.state-regular-disable(true);
                     box-shadow: unset;
                     opacity: 0.35;
                 }
@@ -448,25 +451,25 @@
 
             &:active {
                 .mat-checkbox-background {
-                    @include state-regular-disable($pepperi-theme, true);
+                    @include mixins.state-regular-disable(true);
                     box-shadow: unset;
                     opacity: 0.35;
                 }
             }
 
             .mat-checkbox-frame {
-                @include state-regular-disable($pepperi-theme, true);
+                @include mixins.state-regular-disable(true);
                 box-shadow: unset;
             }
 
             .mat-checkbox-background {
-                @include state-regular-disable($pepperi-theme, true);
+                @include mixins.state-regular-disable(true);
                 box-shadow: unset;
                 opacity: 0.35;
             }
 
             .mat-checkbox-label {
-                color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+                color: functions.get-pep-color(color-text, color-dimmed);
             }
         }
     }

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

@@ -1,3 +1,7 @@
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
 // -----------------------------------------------------
 //  Date time
 // -----------------------------------------------------
@@ -18,5 +22,161 @@
     }
 }
 
-@mixin pep-datetime-theme($pepperi-theme) {
+@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,3 +1,7 @@
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
 // -----------------------------------------------------
 //  File
 // -----------------------------------------------------
@@ -7,12 +11,12 @@ $file-input-z-index: 1;
     .mat-form-field {
         .pepperi-file-wrapper, .pep-file-wrapper {
             position: relative;
-            border-radius: $border-radius-md;
+            border-radius: variables.$border-radius-md;
             cursor: pointer;
             padding: 1px 0.25rem;
 
             .pepperi-file, .pep-file {
-                border-radius: $border-radius-md;
+                border-radius: variables.$border-radius-md;
                 display: grid;
                 justify-content: center;
                 align-items: center;
@@ -66,7 +70,7 @@ $file-input-z-index: 1;
                     z-index: $file-input-z-index + 8;
                     top: 0;
                     right: 0;
-                    border-radius: 0 $border-radius-md 0 $border-radius-md;
+                    border-radius: 0 variables.$border-radius-md 0 variables.$border-radius-md;
                     padding: 0;
                     justify-content: center;
 
@@ -77,7 +81,7 @@ $file-input-z-index: 1;
                     &.right-alignment {
                         right: unset;
                         left: 0;
-                        border-radius: $border-radius-md 0 $border-radius-md 0;
+                        border-radius: variables.$border-radius-md 0 variables.$border-radius-md 0;
                     }
                 }
 
@@ -130,12 +134,12 @@ $file-input-z-index: 1;
                     }
 
                     .pepperi-button, .pep-button {
-                        border-radius: 0 $border-radius-md $border-radius-md 0;
+                        border-radius: 0 variables.$border-radius-md variables.$border-radius-md 0;
 
                         &.right-alignment {
                             right: unset;
                             left: 0.0625rem;
-                            border-radius: $border-radius-md 0 0 $border-radius-md;
+                            border-radius: variables.$border-radius-md 0 0 variables.$border-radius-md;
                         }
                     }
                 }
@@ -146,7 +150,7 @@ $file-input-z-index: 1;
 
 .pepperi-report-file, .pep-report-file {
     cursor: pointer;
-    border-radius: $border-radius-md;
+    border-radius: variables.$border-radius-md;
 }
 
 // -----------------------------------------------------
@@ -167,41 +171,41 @@ $file-input-z-index: 1;
     }
 }
 
-@mixin pep-file-theme($pepperi-theme) {
+@mixin pep-file-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);
+                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: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
+                        color: functions.get-pep-color(color-system-primary-invert, color-base);
 
                         &.delete {
-                            background-color: get-pep-color($pepperi-theme, color-system-primary, color-tran-70);
+                            background-color: functions.get-pep-color(color-system-primary, color-tran-70);
 
                             .svg-icon {
-                                fill: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
+                                fill: functions.get-pep-color(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);
+                                background: functions.get-pep-color(color-system-caution, color-base);
+                                box-shadow: functions.get-pep-shadow(shadow-xs, regular);
                             }
                         }
                     }
 
                     .svg-icon {
-                        fill: get-pep-color($pepperi-theme, color-text, color-dimmed);
+                        fill: functions.get-pep-color(color-text, color-dimmed);
                     }
 
                     .pepperi-file-preview, .pep-file-preview {
                         a {
-                            color: get-pep-color($pepperi-theme, color-text, color-link);
+                            color: functions.get-pep-color(color-text, color-link);
 
                             .svg-icon {
-                                fill: get-pep-color($pepperi-theme, color-text, color-link);
+                                fill: functions.get-pep-color(color-text, color-link);
                             }
                         }
                     }