@inchurch/matcha-theme 20.0.8 → 20.276.0

package/layout/matcha-page-layout.scss

@@ -0,0 +1,776 @@
+// -----------------------------------------------------------------------------------------------------
+// @Page Layouts Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin matcha-page-layout-theme($theme) {
+    .page-layout {
+        // Theme
+        // Style
+        position: relative;
+        overflow: hidden;
+
+        &.carded {
+            // Theme
+            // Style
+            display: flex;
+            flex-direction: column;
+            flex: 1 0 auto;
+            width: 100%;
+            min-width: 100%;
+            // Top bg
+            .top-bg {
+                position: absolute;
+                z-index: 1;
+                top: 0;
+                right: 0;
+                left: 0;
+                height: 192px;
+            }
+
+            // Fullwidth
+            &.fullwidth {
+                .center {
+                    // Theme
+                    // Style
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1 0 auto;
+                    position: relative;
+                    z-index: 2;
+                    // padding: 0 16px;
+                    width: 100%;
+                    min-width: 0;
+                    max-width: 100%;
+                    height: 100%;
+                    max-height: 100%;
+
+                    .header {
+                        // Theme
+                        // Style
+                        height: calc(144px - 64px) !important;
+                        min-height: calc(144px - 64px) !important;
+                        max-height: calc(144px - 64px) !important;
+                        margin: 24px 0 32px 0;
+
+                        .title {
+                            margin: 0px 24px;
+                            span {
+                                &[class^="i-matcha-"],
+                                &[class*=" i-matcha-"] {
+                                    font-size: 32px;
+                                    line-height: 32px;
+                                    width: 32px;
+                                    height: 32px;
+                                    margin: 0px 16px 0 0px;
+                                }
+                            }
+                        }
+
+                        .header-options {
+                            align-content: center;
+                            display: flex;
+                            flex-wrap: wrap;
+                            align-items: stretch;
+                            flex-direction: row;
+                            justify-content: space-between;
+                            width: 100%;
+                            padding: 16px 24px;
+                            border-radius: 8px;
+                            background: getSurface($theme);
+                            @include elevation(1);
+                            button,
+                            form {
+                                &:nth-child(n):not(.float-btn-new):not(.btn-search-filter) {
+                                    margin: 0 0 0 16px;
+                                }
+                                &:first-child {
+                                    margin: 0;
+                                }
+                            }
+                            .title {
+                                margin: 0;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                display: flex;
+                                align-items: center;
+                            }
+                            .useful-options {
+                                display: flex;
+                                margin: 0;
+                                flex-direction: row;
+                                justify-content: flex-end;
+
+                                .more-options {
+                                    display: none;
+                                }
+
+                                form {
+                                    min-width: 192px;
+                                    width: 100%;
+                                    height: 48px;
+                                    margin: -4px 0 0 0;
+                                    .mat-form-field-outline-end {
+                                        border-radius: 0 0 0 0;
+                                    }
+                                    &.single-field {
+                                        min-width: 192px;
+                                        width: 100%;
+                                        .mat-form-field-outline-end {
+                                            border-radius: 0 8px 8px 0;
+                                        }
+                                    }
+                                }
+                                .btn-search-filter {
+                                    margin: 0 0 0 -2px;
+                                    border-radius: 0 8px 8px 0;
+                                }
+                            }
+                            .float-btn-new {
+                                position: fixed;
+                                z-index: 9999;
+                                top: calc(100vh - 72px);
+                                left: calc(100vw - 72px);
+                            }
+                        }
+                    }
+
+                    > .content-card {
+                        // Theme
+                        overflow: initial;
+                        // background: map-get($background, background);
+                        border-radius: 8px;
+                        @include elevation(1);
+                        // Style
+                        display: flex;
+                        flex-direction: column;
+                        flex: 1 0 auto;
+                        overflow: hidden;
+
+                        &.card-flat {
+                            @include elevation(0);
+                        }
+                        &.bg-card-view {
+                            // Theme
+                            @include elevation(0);
+                            // Style
+                            margin: 0 -16px;
+
+                            .content {
+                                // Theme
+                                @include elevation(0);
+                                // Style
+                                background: transparent;
+                            }
+                        }
+                        &.bg-list-view {
+                            // Theme
+                            @include elevation(0);
+                            // Style
+                            .content {
+                                // Theme
+                                @include elevation(0);
+                                // Style
+                                background: transparent;
+                            }
+                        }
+                        > .toolbar {
+                            // Theme
+                            border-bottom-color: getDisabled($theme);
+                            // Style
+                            display: flex;
+                            justify-content: flex-start;
+                            align-items: center;
+                            height: 64px;
+                            min-height: 64px;
+                            max-height: 64px;
+                        }
+
+                        > .content {
+                            flex: 1 0 auto;
+                            border-radius: 8px;
+                            // overflow: hidden;
+                        }
+                    }
+                }
+
+                // Tabbed
+                &.tabbed {
+                    > .center {
+                        width: 100%;
+                        min-width: 0;
+
+                        > .header {
+                            flex: 1 1 auto;
+                        }
+
+                        > .content-card {
+                            > .content {
+                                display: flex;
+
+                                > .mat-tab-group {
+                                    overflow: hidden;
+                                    width: 100%;
+
+                                    .mat-tab-header {
+                                        .mat-tab-label {
+                                            height: 64px;
+                                        }
+                                    }
+
+                                    .mat-tab-body {
+                                        overflow: hidden;
+
+                                        .mat-tab-body-content {
+                                            overflow: hidden;
+
+                                            .tab-content {
+                                                position: relative;
+                                                width: 100%;
+                                                height: 100%;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Inner scroll
+                &.inner-scroll {
+                    flex: 1 1 auto;
+
+                    > .center {
+                        flex: 1 1 auto;
+
+                        > .content-card {
+                            flex: 1 1 auto;
+
+                            > .content {
+                                flex: 1 1 auto;
+                                overflow: auto;
+                                -webkit-overflow-scrolling: touch;
+                            }
+                        }
+                    }
+
+                    // Tabbed
+                    &.tabbed {
+                        > .center {
+                            > .content-card {
+                                > .content {
+                                    > .mat-tab-group {
+                                        .mat-tab-body {
+                                            .mat-tab-body-content {
+                                                .tab-content {
+                                                    overflow: auto;
+                                                    -webkit-overflow-scrolling: touch;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Left / Right sidebar
+            &.left-sidebar,
+            &.right-sidebar {
+                flex-direction: row;
+
+                // Sidebar
+                .sidebar {
+                    @include elevation(7);
+
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1 1 auto;
+                    width: 240px;
+                    min-width: 240px;
+                    max-width: 240px;
+                    height: auto;
+                    overflow: hidden;
+
+                    &.locked-open {
+                        background: none;
+                        box-shadow: none;
+
+                        + .center {
+                            z-index: 1001;
+                        }
+
+                        &.left-positioned {
+                            + .center {
+                                margin-left: 0;
+                            }
+                        }
+
+                        &.right-positioned {
+                            + .center {
+                                margin-right: 0;
+                            }
+                        }
+                    }
+
+                    .header {
+                        height: 192px;
+                        min-height: 192px;
+                        max-height: 192px;
+                    }
+
+                    .content {
+                        background: transparent;
+                        flex: 1 1 auto;
+                    }
+                }
+                // Center
+                .center {
+                    .content-card {
+                        @include elevation(1);
+                        background: getSurface($theme);
+                        border-radius: 8px;
+                        > .toolbar {
+                            border-bottom-color: getDisabled($theme);
+                        }
+                    }
+
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1 1 auto;
+                    position: relative;
+                    z-index: 3;
+                    margin-left: 32px;
+                    margin-right: 32px;
+                    width: 100%;
+                    min-width: 0;
+
+                    .header {
+                        display: flex;
+                        height: 192px;
+                        min-height: 192px;
+                        max-height: 192px;
+                    }
+
+                    .content-card {
+                        display: flex;
+                        flex-direction: column;
+                        flex: 1 1 auto;
+                        overflow: hidden;
+
+                        .toolbar {
+                            display: flex;
+                            justify-content: flex-start;
+                            align-items: center;
+                            flex: 1 1 auto;
+                            border-bottom: 1px solid;
+                            height: 64px;
+                            min-height: 64px;
+                            max-height: 64px;
+
+                            .sidebar-toggle {
+                                margin: 0 8px 0 0 !important;
+                                padding: 0 !important;
+                                border-radius: 0;
+                            }
+                        }
+
+                        .content {
+                            flex: 1 1 auto;
+                        }
+                    }
+                }
+                // Tabbed
+                &.tabbed {
+                    .center {
+                        width: calc(100% - 32px);
+                        min-width: 0;
+
+                        .header {
+                            flex: 1 1 auto;
+                        }
+
+                        .content-card {
+                            .content {
+                                display: flex;
+
+                                .mat-tab-group {
+                                    overflow: hidden;
+
+                                    .mat-tab-header {
+                                        .mat-tab-label {
+                                            height: 64px;
+                                        }
+                                    }
+
+                                    .mat-tab-body {
+                                        overflow: hidden;
+
+                                        .mat-tab-body-content {
+                                            overflow: hidden;
+
+                                            .tab-content {
+                                                position: relative;
+                                                width: 100%;
+                                                height: 100%;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        @include media-breakpoint("lt-lg") {
+                            width: calc(100% - 64px);
+                        }
+                    }
+                }
+                // Inner scroll
+                &.inner-scroll {
+                    flex: 1 1 auto;
+
+                    .sidebar {
+                        .content {
+                            overflow: auto;
+                            -webkit-overflow-scrolling: touch;
+                        }
+                    }
+
+                    .center {
+                        flex: 1 1 auto;
+
+                        > .content-card {
+                            flex: 1 1 auto;
+
+                            > .content {
+                                flex: 1 1 auto;
+                                overflow: auto;
+                                -webkit-overflow-scrolling: touch;
+                            }
+                        }
+                    }
+
+                    // Tabbed
+                    &.tabbed {
+                        .center {
+                            .content-card {
+                                .content {
+                                    .mat-tab-group {
+                                        .mat-tab-body {
+                                            .mat-tab-body-content {
+                                                .tab-content {
+                                                    overflow: auto;
+                                                    -webkit-overflow-scrolling: touch;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Right sidebar specific
+            &.right-sidebar {
+                > .sidebar {
+                    order: 2;
+                }
+
+                > .center {
+                    order: 1;
+                }
+            }
+        }
+
+        // Simple layout
+        &.simple {
+            display: flex;
+            flex-direction: column;
+            flex: 1 0 auto;
+            width: 100%;
+            min-width: 100%;
+
+            // Fullwidth
+            &.fullwidth {
+                > .content {
+                    flex: 1 1 auto;
+                    min-width: 0;
+                }
+            }
+
+            &.fullwidth,
+            &.inner-sidebar {
+                > .header {
+                    height: 120px;
+                    min-height: 120px;
+                    max-height: 120px;
+                }
+            }
+
+            // Left / Right sidebar
+            &.left-sidebar,
+            &.right-sidebar {
+                flex-direction: row;
+
+                // Center
+                > .center {
+                    // Theme
+                    @include elevation(1);
+
+                    // Style
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1 1 auto;
+                    z-index: 3;
+                    min-width: 0;
+                    width: 100%;
+
+                    > .header {
+                        height: 120px;
+                        min-height: 120px;
+                        max-height: 120px;
+                    }
+
+                    > .content {
+                        // Theme
+                        background: getSurface($theme);
+
+                        // Style
+                        flex: 1 0 auto;
+                    }
+                }
+
+                // Sidebar
+                > .sidebar {
+                    // Theme
+                    @include elevation(7);
+
+                    // Style
+                    width: 240px;
+                    min-width: 240px;
+                    max-width: 240px;
+                    overflow: hidden;
+
+                    &.locked-open {
+                        background: none;
+                        box-shadow: none;
+
+                        + .center {
+                            z-index: 1001;
+                        }
+
+                        &.left-positioned {
+                            + .center {
+                                margin-left: 0;
+                            }
+                        }
+
+                        &.right-positioned {
+                            + .center {
+                                margin-right: 0;
+                            }
+                        }
+                    }
+
+                    .content {
+                        flex: 1 1 auto;
+                    }
+                }
+
+                // Inner sidebar
+                &.inner-sidebar {
+                    > .content {
+                        > .center {
+                            > .content {
+                                background: getSurface($theme);
+                                @include elevation(1);
+                            }
+                        }
+                    }
+
+                    flex-direction: column;
+                    overflow: hidden;
+                    height: 100%;
+
+                    > .content {
+                        display: flex;
+                        min-height: 0;
+
+                        > .sidebar {
+                            &.locked-open {
+                                background: none;
+                                box-shadow: none;
+                            }
+
+                            .content {
+                                overflow: auto;
+                                -webkit-overflow-scrolling: touch;
+                            }
+                        }
+
+                        > .center {
+                            flex: 1 1 auto;
+                            overflow: auto;
+                            -webkit-overflow-scrolling: touch;
+
+                            > .content {
+                                border-radius: 8px;
+                            }
+                        }
+                    }
+                }
+
+                // Inner scroll
+                &.inner-scroll {
+                    flex: 1 1 auto;
+
+                    > .sidebar {
+                        .content {
+                            overflow: auto;
+                            -webkit-overflow-scrolling: touch;
+                        }
+                    }
+
+                    > .center {
+                        flex: 1 1 auto;
+                        overflow: auto;
+                        -webkit-overflow-scrolling: touch;
+                    }
+                }
+            }
+
+            // Right sidebar specific
+            &.right-sidebar {
+                > .sidebar {
+                    order: 2;
+                }
+
+                > .center {
+                    order: 1;
+                }
+
+                // Inner sidebar
+                &.inner-sidebar {
+                    > .content {
+                        > .sidebar {
+                            order: 2;
+                        }
+
+                        > .center {
+                            order: 1;
+                        }
+                    }
+                }
+            }
+
+            // Tabbed
+            &.tabbed {
+                min-height: 100%;
+
+                > .header {
+                    height: 120px;
+                    min-height: 120px;
+                    max-height: 120px;
+                }
+
+                > .content {
+                    > .mat-tab-group {
+                        .mat-tab-labels {
+                            padding: 0 24px;
+                        }
+                    }
+                }
+            }
+        }
+
+        // Blank layout
+        &.blank {
+            width: 100%;
+            min-height: 100%;
+        }
+    }
+
+    // Small devices (Phones and Gadget, 0px and up < 600px )
+    @media screen and (max-width: 639px) {
+        .page-layout {
+            // Smaller margins
+            &.carded {
+                &.fullwidth {
+                    > .center {
+                        // padding: 0 0 0 0;
+                    }
+                }
+
+                &.left-sidebar,
+                &.right-sidebar {
+                    > .center {
+                        margin: 0 24px;
+                    }
+                }
+            }
+            // End - Smaller margins
+        }
+    }
+
+    // Medium devices (landscapes and tablets, 600px and up < 1024px )
+    @media screen and (min-width: 640px) {
+    }
+
+    // Large devices (tablets and small monitors, 1024px and up < 1440px)
+    @media screen and (min-width: 1024px) {
+        .page-layout {
+            // Carded layout
+            &.carded {
+                // Fullwidth
+                &.fullwidth {
+                    .center {
+                        // padding: 0 16px 0 0;
+                        .header {
+                            .header-options {
+                                flex-wrap: nowrap;
+                                align-items: center;
+
+                                .title {
+                                    width: 100%;
+                                    margin: 0 16px 0 0;
+                                    line-height: 48px;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                }
+
+                                .useful-options {
+                                    width: 100%;
+                                    justify-content: end;
+
+                                    .more-options {
+                                        display: flex;
+                                        margin: 0 0 0 0;
+                                    }
+                                    form {
+                                        height: 48px;
+                                        margin: -4px 0 0 16px;
+                                        max-width: 211px;
+                                    }
+                                }
+                                .float-btn-new {
+                                    display: none;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // X-Large devices (big desktops, 1440px and up < 1920)
+    @media screen and (min-width: 1280px) {
+    }
+
+    // XX-Large devices (larger desktops, 1920px and up)
+    @media screen and (min-width: 1536px) {
+    }
+}