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

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

@@ -1,223 +1,237 @@
-@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;
-                }
-            }
-        }
-    }
-}
+@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);
+            }
+        }
+    }
+}