@pepperi-addons/ngx-lib 0.2.60 → 0.2.61-query-builder.1

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,223 @@
-// -----------------------------------------------------
-//  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 {
+    .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 {
+        .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;
+
+    .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 {
+        .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;
+                }
+            }
+        }
+    }
+}