@mediusinc/mng-commons 0.0.1-rc.4 → 0.2.4

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;
+    }
+}
+
+
+