@pepperi-addons/ngx-lib 0.2.60 → 0.2.61-beta.4

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

@@ -1,152 +1,160 @@
+@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: $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 {
+    ::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;
-                    justify-items: center;
+                    width: 100%;
+                    max-width: 100%;
+                    height: inherit;
+                    text-align: center;
 
-                    a {
+                    .pepperi-file-message, .pep-file-message {
                         display: grid;
                         align-items: center;
                         justify-items: center;
-                    }
 
-                    span {
-                        width: 100%;
+                        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-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;
+                    .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;
+                        }
 
-                    mat-icon {
-                        vertical-align: middle;
+                        &.right-alignment {
+                            right: unset;
+                            left: 0;
+                            border-radius: variables.$border-radius-md 0 variables.$border-radius-md 0;
+                        }
                     }
 
-                    &.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;
                     }
+
                 }
 
-                input {
+                .hidden-input {
                     position: absolute;
-                    height: 100%;
-                    width: 100%;
+                    top: 0;
                     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%;
+                    z-index: $file-input-z-index;
+                    width: 100%;
+                    height: 100%;
 
-                &.signature {
-                    z-index: $file-input-z-index + 5;
+                    &.signature {
+                        z-index: $file-input-z-index + 5;
+                    }
                 }
             }
-        }
 
-        // -----------------------------------------------------
-        //  Override material style
-        // -----------------------------------------------------
-        &.mat-form-field-disabled {
-            .hidden-input {
-                cursor: auto !important;
+            // -----------------------------------------------------
+            //  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 {
+        ::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 $border-radius-md $border-radius-md 0;
+                        .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: $border-radius-md 0 0 $border-radius-md;
+                            &.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: $border-radius-md;
+    border-radius: variables.$border-radius-md;
 }
 
 // -----------------------------------------------------
@@ -155,65 +163,75 @@ $file-input-z-index: 1;
 .pepperi-file-container, .pep-file-container {
     display: grid;
 
-    .mat-form-field {
-        .mat-form-field-flex {
-            padding: 0 !important;
+    ::ng-deep {
+        .mat-form-field {
+            .mat-form-field-flex {
+                padding: 0 !important;
 
-            .mat-form-field-infix {
-                display: block !important;
-                width: 100%;
+                .mat-form-field-infix {
+                    display: block !important;
+                    width: 100%;
+                }
             }
         }
     }
 }
 
-@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);
-
-                .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);
+        ::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: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                    }
+                        .svg-icon {
+                            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);
+                        .pepperi-file-preview, .pep-file-preview {
+                            a {
+                                color: functions.get-pep-color(color-text, color-link);
 
-                            .svg-icon {
-                                fill: get-pep-color($pepperi-theme, 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;
+                // 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);
+            }
+        }
     }
 }