@mediusinc/mng-commons 0.0.1-rc.2 → 0.2.0

package/scss/common/layout/_exception.scss

@@ -0,0 +1,131 @@
+.exception-body {
+    background-image: $exceptionPagesImage;
+    background-repeat: no-repeat;
+    background-size: contain;
+    box-sizing: border-box;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    &.notfound {
+        .exception-panel {
+            h1 {
+                color: #0F8BFD;
+                text-shadow: 0px 0px 50px rgba(#0F8BFD, 0.2);
+            }
+
+            h3 {
+                color: darken(#0F8BFD, 30%);
+            }
+        }
+    }
+
+    &.accessdenied {
+        .exception-panel {
+            h1 {
+                color: #0F8BFD;
+                text-shadow: 0px 0px 50px rgba(#0F8BFD, 0.2);
+            }
+
+            h3 {
+                color: darken(#0F8BFD, 30%);
+            }
+        }
+    }
+
+    &.error {
+        .exception-panel {
+            h1 {
+                color: #FC6161;
+                text-shadow: 0px 0px 50px rgba(#FC6161, 0.2);
+            }
+
+            h3 {
+                color: lighten(#FC6161, 10%);
+                max-width: 720px;
+            }
+        }
+    }
+
+    .exception-panel {
+        text-align: center;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        margin-top: -200px;
+
+        h1 {
+            font-size: 140px;
+            font-weight: 900;
+            margin-bottom: 0;
+        }
+
+        h3 {
+            font-size: 80px;
+            font-weight: 900;
+            margin-top: -90px;
+            margin-bottom: 50px;
+        }
+
+        p {
+            font-size: 24px;
+            font-weight: 400;
+            max-width: 320px;
+        }
+
+        button {
+            margin-top: 50px;
+        }
+    }
+
+    .exception-footer {
+        position: absolute;
+        bottom: 60px;
+        align-items: center;
+        display: flex;
+
+        .exception-logo {
+            width: 34px;
+        }
+
+        .exception-appname {
+            width: 72px;
+            margin-left: 1rem;
+        }
+    }
+}
+
+@media (max-width: $phoneBreakpoint) {
+    .exception-body {
+        background-size: auto;
+
+        &.accessdenied, &.error {
+            .exception-panel {
+                h1 {
+                    font-size: 70px;
+                }
+
+                h3 {
+                    font-size: 40px;
+                    margin-top: -30px;
+                }
+            }
+        }
+
+        .exception-panel {
+            margin-top: 0;
+
+            h3 {
+                line-height: .75;
+            }
+
+            button {
+                margin-top: 0;
+            }
+        }
+    }
+}

package/scss/common/layout/_footer.scss

@@ -0,0 +1,29 @@
+.layout-footer {
+    height: 4rem;
+    padding: 0 2rem;
+    @include flex();
+    @include flex-align-center();
+    @include flex-justify-between();
+
+    .footer-logo-container {
+        @include flex();
+        @include flex-align-center();
+
+        img {
+            width: 2rem;
+            height: 2rem;
+        }
+
+        .app-name {
+            font-size: 1rem;
+            font-weight: 600;
+            letter-spacing: .2px;
+            margin-left: .5rem;
+        }
+    }
+
+    .copyright {
+        font-size: .875rem;
+        color: $textSecondaryColor;
+    }
+}

package/scss/common/layout/_help.scss

@@ -0,0 +1,157 @@
+.help-page {
+    p {
+        margin: 0;
+    }
+
+    .help-search {
+        background: $helpHeaderBg;
+        backdrop-filter: blur(200px);
+        padding: 0;
+        margin-bottom: 4rem;
+
+        .help-search-content {
+            padding: 50px 60px;
+        }
+
+        .help-search-effect {
+            background: $bodyImage;
+            background-repeat: no-repeat;
+            transform:  matrix(-1, 0, 0, 1, 0, 0);
+        }
+
+        .search-container {
+            font-size: 1.5rem;
+            position: relative;
+
+            input {
+                appearance: none;
+                text-indent: 2.5rem;
+                width: 100%;
+
+                &::placeholder {
+                    color: $textThirdColor;
+                }
+            }
+
+            i {
+                color: $textColor;
+                width: 2rem;
+                position: absolute;
+                margin-left: 1rem;
+                top: 50%;
+                margin-top: -.5rem;
+            }
+        }
+    }
+
+    .status-card {
+        margin-top: 30px;
+
+        h6 {
+            margin-bottom: 0;
+        }
+
+        p {
+            color: $textThirdColor;
+        }
+
+        .status-bars {
+            margin-top: 1rem;
+            @include flex();
+
+            .status-bar {
+                flex: 1 1 0;
+                -ms-flex: 1 1 0px;
+                background: #0BD18A;
+                box-shadow: 0px 0px 10px rgba(11, 209, 138, 0.3);
+                height: 50px;
+                margin-right: .25rem;
+                transition: transform $transitionDuration;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
+                &.status-bar-failure {
+                    background: #FC6161;
+                    box-shadow: 0px 0px 10px rgba(252, 97, 97, 0.3);
+                }
+
+                &:hover {
+                    transform: scale(1.1);
+                }
+            }
+        }
+
+        .status-bar-footer {
+            padding: 1rem 0 0 0;
+            @include flex();
+            @include flex-justify-between();
+            color: $textThirdColor;
+        }
+    }
+
+    .articles-card {
+        h6 {
+            margin-bottom: 0;
+        }
+
+        p {
+            color: $textThirdColor;
+        }
+
+        .blog-post {
+            height: 130px;
+            border-radius: 8px;
+            margin: 1rem 0;
+            position: relative;
+            background-repeat: no-repeat;
+
+            &:last-child {
+                margin-bottom: 1rem;
+            }
+
+            .blog-text {
+                position: absolute;
+                left: 74px;
+                bottom: 12px;
+
+                h6 {
+                    margin-bottom: 0;
+                    line-height: 20px;
+                }
+
+                span {
+                    color: $textSecondaryColor;
+                    line-height: 16px;
+                    font-size: 12px;
+                }
+            }
+
+            .blog-profile {
+                position: absolute;
+                top: 68px;
+                left: 12px;
+
+                img {
+                    width: 50px;
+                    height: 50px;
+                    border-radius: 50%;
+
+                }
+            }
+
+            &:nth-child(1) {
+                background-image: linear-gradient(180deg, rgba(28, 28, 44, 0) 33.85%, rgba(27, 27, 44, 0.8) 80.77%), url("#{$baseHref}assets/images/mng/pages/help/blog1.jpg");
+            }
+
+            &:nth-child(2) {
+                background-image: linear-gradient(186.73deg, rgba(28, 28, 44, 0) 46.89%, rgba(27, 27, 44, 0.8) 95.1%), url("#{$baseHref}assets/images/mng/pages/help/blog2.jpg");
+            }
+
+            &:nth-child(3) {
+                background-image: linear-gradient(180deg, rgba(28, 28, 44, 0) 33.85%, rgba(27, 27, 44, 0.8) 80.77%), url("#{$baseHref}assets/images/mng/pages/help/blog3.jpg");
+            }
+        }
+    }
+}

package/scss/common/layout/_inlinemenu.scss

@@ -0,0 +1,55 @@
+.layout-inline-menu {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border: 0 none;
+    padding-bottom: 1.5rem;
+
+    &.layout-inline-menu-active {
+        .layout-inline-menu-icon {
+            transform: rotate(-180deg);
+        }
+    }
+
+    .layout-inline-menu-action {
+        cursor: pointer;
+        padding: 2rem 2rem 1rem 2rem;
+        color: $textColor;
+
+        img {
+            border-radius: 22px;
+            border: 2px solid transparent;
+        }
+
+        .layout-inline-menu-text {
+            font-weight: 500;
+        }
+    }
+
+    .layout-inline-menu-action-panel {
+        padding: 0 1.5rem;
+
+        .layout-inline-menu-action-item {
+            border-radius: $borderRadius;
+            transition: all $transitionDuration;
+            cursor: pointer;
+            user-select: none;
+            margin-top: .2rem;
+
+            &:last-child {
+                margin-bottom: .5rem;
+            }
+
+            a {
+                padding: 0.5rem 1rem;
+                border-left: 8px solid transparent;
+                border-radius: 8px;
+                color: $textColor;
+
+                i {
+                    margin-right: .75rem;
+                }
+            }
+        }
+    }
+}

package/scss/common/layout/_invoice.scss

@@ -0,0 +1,176 @@
+.p-button-outlined.invoice-button {
+    color: inherit;
+}
+
+.invoice {
+    padding: 2.429rem;
+
+    .invoice-header {
+        @include flex();
+        @include flex-justify-between();
+
+        .invoice-company {
+            .invoice-logo {
+                height: 2.25rem;
+            }
+
+            .invoice-appname {
+                height: 1.25rem;
+                margin-left: .75rem;
+            }
+        }
+
+        .customer-id {
+            line-height: 16px;
+            text-align: right;
+            color: $textSecondaryColor;
+        }
+
+        .invoice-address {
+            font-size: .786rem;
+            line-height: 16px;
+            color: $textThirdColor;
+        }
+    }
+
+    .invoice-to {
+        margin-top: 1.5rem;
+        padding-top: 1.5rem;
+        line-height: 1.429rem;
+        border-top: 1px solid $dividerColor;
+
+        .invoice-date {
+            font-size: .786rem;
+            font-weight: 500;
+            color: $textThirdColor;
+        }
+
+        .invoice-id {
+            font-size: 1.714rem;
+            font-weight: 500;
+
+            span {
+                margin-left: .5rem;
+                font-size: 1.429rem;
+                font-weight: 300;
+                color: $textThirdColor;
+            }
+        }
+
+        .invoice-to-name {
+            margin-top: 2rem;
+            font-size: 1.143rem;
+            font-weight: 600;
+        }
+
+        .invoice-to-info {
+            margin-top: .25rem;
+            color: $textThirdColor;
+            font-size: 0.857rem;
+        }
+    }
+
+    .invoice-items {
+        margin-top: 2rem;
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+
+            thead tr {
+                border-bottom: 1px solid $dividerColor;
+            }
+
+            tbody tr:last-child {
+                border-bottom: 1px solid $dividerColor;
+            }
+
+            th {
+                font-size: 0.714rem;
+                color: $textThirdColor;
+            }
+
+            th, td {
+                padding: .5rem 1rem;
+                text-align: right;
+            }
+
+            tr{
+                &:first-child {
+                    td {
+                        padding-top: 1rem;
+                    }
+                }
+
+                &:last-child {
+                    td {
+                        padding-bottom: 1rem;
+                    }
+                }
+            }
+
+            th:first-child, td:first-child {
+                text-align: left;
+            }
+        }
+    }
+
+    .invoice-summary {
+        margin-top: 1rem;
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+
+            tbody tr {
+                &:last-child {
+                    font-weight: 600;
+                    border-bottom: 1px solid $primaryColor;
+
+                    td {
+                        padding-bottom: 1rem;
+                    }
+                }
+
+                &:first-child, &:nth-child(2) {
+                    td:first-child {
+                        color: $textThirdColor;
+                    }
+                }
+
+                td:last-child {
+                    text-align: right;
+                }
+
+                td {
+                    padding: .5rem 1rem;
+                }
+            }
+        }
+    }
+
+    .invoice-notes {
+        margin-top: 2rem;
+        padding-left: .5rem;
+    }
+}
+
+@media print{
+    body * {
+        visibility: hidden;
+    }
+    #invoice-content * {
+        visibility: visible;
+    }
+    #invoice-content {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+
+