ng-zenduit 1.0.0

package/styles/page-layout.scss

@@ -0,0 +1,82 @@
+.header-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  gap: 16px;
+
+  .header-group {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    h3 {
+      font-size: 20px;
+      font-weight: 500;
+      color: #4f4f4f;
+      margin: 0px;
+    }
+
+    .back-wrapper {
+      color: #828282;
+      display: flex;
+      align-items: center;
+      font-weight: 400;
+      font-size: 16px;
+      cursor: pointer;
+    }
+
+    .page-title {
+      font-size: 24px;
+      color: #060c1b;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 140%;
+      margin: 0;
+    }
+  }
+}
+
+.tab-header-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  border-bottom: 1px solid #ececed;
+  margin-bottom: 16px;
+
+  .tab-header {
+    border-bottom: 3px solid transparent;
+    text-align: center;
+    padding: 0 16px 13px;
+    cursor: pointer;
+
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 130%;
+    color: #657281;
+
+    &.tab-header-active {
+      font-weight: 500;
+      color: $color-primary;
+      border-bottom: 3px solid $color-primary;
+    }
+  }
+}
+
+.toolbar-wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  .tools-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .search-wrapper {
+      width: 280px;
+    }
+  }
+}

package/styles/snackbar.scss

@@ -0,0 +1,91 @@
+/**
+The MIT License (MIT)
+Original here: https://github.com/polonel/SnackBar/blob/master/LICENSE
+**/
+
+.snackbar-container {
+    transition: all 0.5s ease;
+    transition-property: top, right, bottom, left, opacity;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    min-height: 14px;
+    background-color: #070b0e;
+    position: fixed;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    line-height: 22px;
+    padding: 18px 24px;
+    bottom: -100px;
+    top: -100px;
+    opacity: 0;
+    z-index: 9999;
+}
+.snackbar-container .action {
+    background: inherit;
+    display: inline-block;
+    border: none;
+    font-size: inherit;
+    text-transform: uppercase;
+    color: #4caf50;
+    margin: 0 0 0 24px;
+    padding: 0;
+    min-width: min-content;
+    cursor: pointer;
+}
+@media (min-width: 640px) {
+    .snackbar-container {
+        min-width: 288px;
+        max-width: 568px;
+        display: inline-flex;
+        border-radius: 2px;
+        margin: 24px;
+    }
+}
+@media (max-width: 640px) {
+    .snackbar-container {
+        left: 0;
+        right: 0;
+        width: 100%;
+    }
+}
+.snackbar-pos.bottom-center {
+    top: auto !important;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+.snackbar-pos.bottom-left {
+    top: auto !important;
+    bottom: 0;
+    left: 0;
+}
+.snackbar-pos.bottom-right {
+    top: auto !important;
+    bottom: 0;
+    right: 0;
+}
+.snackbar-pos.top-left {
+    bottom: auto !important;
+    top: 0;
+    left: 0;
+}
+.snackbar-pos.top-center {
+    bottom: auto !important;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+.snackbar-pos.top-right {
+    bottom: auto !important;
+    top: 0;
+    right: 0;
+}
+@media (max-width: 640px) {
+    .snackbar-pos.bottom-center,
+    .snackbar-pos.top-center {
+        left: 0;
+        transform: none;
+    }
+}

package/styles/table.scss

@@ -0,0 +1,107 @@
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.table-wrapper {
+  overflow: auto;
+  // add the padding for shadow on hover  
+  padding-bottom: 10px;
+  box-sizing: border-box;
+
+  &.with-pagination {
+    margin-bottom: 16px;
+  }
+
+  .table-ui {
+    border-collapse: collapse;
+    box-sizing: border-box;
+    text-align: left;
+    width: 100%;
+
+    thead {
+      th {
+        padding: 10px 16px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 130%;
+        background: $color-blue-tint-1;
+        color: $color-primary;
+        height: unset;
+
+        .sort-header {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          gap: 8px;
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        cursor: pointer;
+        z-index: 0;
+        position: relative;
+
+        &:hover {
+          z-index: 1;
+          box-shadow: 0 4px 10px rgba(6, 12, 27, 0.15);
+        }
+
+        &.with-action {
+
+          td:last-of-type {
+            padding-right: 36px;
+          }
+
+          &:hover {
+            td:last-of-type {
+              &::after {
+                font-family: 'Material Icons';
+                content: "keyboard_arrow_right";
+                line-height: 20px;
+                font-size: 14px;
+                font-weight: 600;
+                color: $color-grey-shade-2;
+                position: absolute;
+                width: 20px;
+                height: 20px;
+                right: 8px;
+                top: 50%;
+                transform: translateY(-50%);
+                border-radius: 10px;
+                background: $color-white-tint-1;
+                text-align: center;
+              }
+            }
+          }
+        }
+
+        td {
+          padding: 8px 16px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 130%;
+          background: $color-white-primary;
+          color: $color-grey-shade-2;
+          height: unset;
+          box-shadow: inset 0px -1px 0px $color-white-tint-2;
+
+          .additional-groups {
+            color: $color-primary;
+          }
+        }
+      }
+    }
+
+    &.sticky-header {
+      thead th {
+        position: sticky;
+        z-index: 1;
+        top: 0;
+      }
+    }
+  }
+}