cm-admin 0.2.0 → 0.3.0

data/app/assets/stylesheets/cm_admin/base/main-nav.scss

@@ -0,0 +1,47 @@
+@import "../helpers/index.scss";
+
+.main-nav {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 225px;
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 225px);
+  height: 140px;
+  padding: 24px 24px 16px;
+  background-color: $white;
+  z-index: 2;
+  &__lhs {
+    .bread-crumb-area {
+      .breadcrumb-text {
+        font-size: $t4-text;
+        line-height: 22px;     
+        color: $ink-lighter-clr;
+        margin: 0 0 16px;
+        a {
+          color: inherit;
+        }
+      }
+    }
+    .nav-title-area {
+      .title-text {
+        font-size: 24px;
+        font-weight: 600;
+        line-height: 32px;
+        color: $primary-text-clr;
+        margin: 0 0 8px;
+      }
+      .title-sub-text {
+        font-size: $t4-text;
+        line-height: 22px;
+        color: $primary-text-clr;
+        margin: 0;
+      }
+    }
+  }
+
+  &__rhs {
+    
+  }
+}

data/app/assets/stylesheets/cm_admin/base/navbar.scss

@@ -0,0 +1,67 @@
+@import "../helpers/index.scss";
+
+.cm-navbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 225px;
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 225px);
+  height: 140px;
+  padding: 24px 24px 16px;
+  background-color: $white;
+  z-index: 2;
+  &__lhs {
+    .bread-crumb-area {
+      .breadcrumb-text {
+        @include font($size: $t4-text, $color: $ink-lighter-clr);
+        line-height: 22px;
+        margin: 0 0 16px;
+        a {
+          color: inherit;
+        }
+      }
+    }
+    .nav-title-area {
+      .title-text {
+        @include font($size: 24px, $color: $primary-text-clr, $weight: 600);
+        line-height: 32px;
+        margin: 0 0 8px;
+      }
+      .title-sub-text {
+        @include font($size: $t4-text, $color: $primary-text-clr);
+        line-height: 22px;
+        margin: 0;
+      }
+    }
+  }
+
+  &__rhs {
+    display: flex;
+    align-items: center;
+
+    .export-container {
+      position: relative;
+      .export-popup {
+        top: 45px;
+        width: 156px;
+        padding: 8px 0;
+        animation: fadeIn .2s ease-in-out;
+        .popup-option {
+          padding: 8px 16px;
+          @include font($size: $t4-text, $color: $primary-text-clr);
+          line-height: 22px;
+          transition: all .2s linear;
+          cursor: pointer;
+          &:hover {
+            background-color: $grey-lighter-clr;
+          }
+          span {
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/cm_admin/base/quicksearch.scss

@@ -0,0 +1,69 @@
+@import "../helpers/index.scss";
+
+.quick-search-modal {
+  .modal-dialog {
+    max-width: 526px;
+    height: auto;
+    .modal-content {
+      .modal-body {
+        padding: 24px 24px 0;
+      }
+    }
+  }
+  .quick-search-field {
+    .clear-search {
+      position: absolute;
+      top: 8px;
+      right: 16px;
+      font-size: $t4-text;
+      line-height: 22px;
+      color: $ink-lighter-clr;
+      cursor: pointer;
+    }
+  }
+  .search-results-container {
+    margin: 16px 0;
+    .result-item {
+      padding: 8px 16px;
+      font-size: $t4-text;
+      line-height: 22px;
+      span:nth-child(1) {
+        color: #828282;
+      }
+      span:nth-child(2) {
+        margin-left: 8px;
+        color: $primary-text-clr;
+      }
+    }
+  }
+  .results-action {
+    display: flex;
+    align-items: center;
+    padding: 4px 16px;
+    box-shadow: inset 0px 1px 0px rgba(148, 151, 155, 0.15);
+    .select {
+      font-size: $t6-text;
+      line-height: 16px;
+      color: $ink-lightest-clr;
+      cursor: pointer;
+      .move-arrow {
+        font-size: 10px;
+        margin-right: 4px;
+        &:nth-child(2) {
+          margin-right: 8px;
+        }
+      }
+    }
+    .enter-btn {
+      @include font($size: $t6-text, $color: $ink-lightest-clr, $weight: 600);
+      line-height: 16px;
+      margin: 0 8px 0 24px;
+      padding: 0;
+    }
+    .open-btn {
+      @include font($size: $t6-text, $color: $ink-lightest-clr);
+      line-height: 16px;
+      padding: 0;
+    }
+  }
+}

data/app/assets/stylesheets/cm_admin/base/scaffold.scss

@@ -0,0 +1,61 @@
+@import "../helpers/index.scss";
+
+body {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0px;
+  padding: 0px;
+  font-family: 'Open Sans', sans-serif !important;
+  background-color: $grey-lightest-clr !important;
+}
+
+//main-layout-styles
+.cm-admin {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  .panel-area {
+    width: calc(100% - 225px);
+    margin-left: 225px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .components {
+    margin-top: 140px;
+    padding: 10px 30px;
+    .field-container {
+      max-width: 400px;
+    }
+  }
+}
+
+
+a:hover,
+a {
+  text-decoration: none !important;
+}
+
+// daterangepicker theme styles
+.daterangepicker {
+  .active {
+    background-color: $brand-color !important;
+  }
+  .drp-buttons {
+    .btn-primary {
+      background-color: $brand-color !important;
+    }
+  }
+}
+
+// datepicker theme styles
+.datepicker {
+  .active {
+    background-color: $brand-color !important;
+  }
+}
+
+.opacity-1 {
+  opacity: 1 !important;
+}

data/app/assets/stylesheets/cm_admin/base/show.scss

@@ -0,0 +1,54 @@
+@import "../helpers/index.scss";
+
+.show-page {
+  margin-top: 194px;
+  
+  &__tabs {
+    .cm-tabs-bar {
+      // If you want to overwrite tabs styles ---> add styles here
+    }
+  }
+
+  &__inner {
+    padding: 24px;
+    .info-section {
+      margin-bottom: 32px;
+
+      .section-heading {
+        @include font($size: $t3-text, $color: $primary-text-clr, $weight: 600);
+        line-height: 24px;
+        margin: 0 0 16px;
+      }
+      .paper {
+        max-width: 752px;
+        padding: 24px;
+        background-color: $white;
+        border: 1px solid $grey-light-clr;
+        border-radius: $radius-4;
+      }
+      .info-split {
+        display: flex;
+        margin-bottom: 24px;
+        &:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+        &__lhs {
+          width: 20%;
+          p {
+            @include font($size: $t4-text, $color: $ink-lighter-clr);
+            line-height: 22px;
+            margin: 0;
+          }
+        }
+        &__rhs {
+          width: 80%;
+          p {
+            @include font($size: $t4-text, $color: #172b4d);
+            line-height: 19px;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/cm_admin/base/sidebar.scss

@@ -0,0 +1,225 @@
+@import "../helpers/index.scss";
+
+.cm-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 225px;
+  height: 100%;
+  background-color: #252525;
+  // overflow: hidden;
+  z-index: 2;
+
+  &__logo-header {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: cover;
+    }
+  }
+
+  &__quick-search {
+    position: relative;
+    padding: 12px;
+    box-shadow: inset 0px -1px 0px rgba(255, 255, 255, 0.15);
+    input {
+      width: 100%;
+      position: relative;
+      @include font($size: $t4-text, $color: $ink-lightest-clr);
+      line-height: 22px;
+      padding-left: 34px;
+      background-color: transparent;
+      border: none;
+      &:focus {
+        outline: none;
+      }
+    }
+    span {
+      position: absolute;
+      top: 14px;
+      left: 24px;
+      font-size: $t4-text;
+      color: $ink-lightest-clr;
+    }
+  }
+
+  &__menu-wrapper {
+    height: calc(100vh - 180px);
+    padding: 16px 0;
+    overflow-y: auto;
+    .menu-item {
+      font-size: $t4-text;
+      color: $ink-lightest-clr;
+      padding: 8px 24px;
+      transition: all 0.2s linear;
+      cursor: pointer;
+      .menu-icon {
+        margin-right: 8px;
+      }
+      .list-arrow {
+        font-size: 10px;
+        margin-left: 8px;
+        vertical-align: text-bottom;
+      }
+      &:hover {
+        color: $white;
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    .menu-sub-list {
+      .menu-sub-item {
+        font-size: $t4-text;
+        color: $ink-lightest-clr;
+        padding: 8px 8px 8px 45px;
+        transition: all 0.2s linear;
+        &:hover {
+          color: $white;
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+    .menu-link {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  &__tabs-wrapper {
+    height: calc(100vh - 115px);
+    padding: 16px 0;
+    overflow-y: auto;
+
+    .tab-link {
+      padding: 0;
+      text-decoration: none;
+      color: $white;
+      cursor: pointer;
+      .tab-item {
+        position: relative;
+        padding: 10px 0;
+        transition: all 0.2s linear;
+        cursor: pointer;
+        &:hover {
+          background-color: #4b4b4b;
+        }
+        &.active {
+          background-color: $black;
+          border-left: 4px solid $brand-color;
+        }
+        .tab-name {
+          color: $white;
+        }
+      }
+    }
+  }
+
+  &__footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: 20px 24px;
+    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.15);
+    .profile-name {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+      font-size: $t4-text;
+      line-height: 22px;
+      color: $ink-lightest-clr;
+      cursor: pointer;
+      .profile-avatar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        margin-right: 8px;
+        color: $white;
+        font-size: 10px;
+        font-weight: 900;
+        background-color: $brand-color;
+        border-radius: $circle;
+        vertical-align: middle;
+      }
+    }
+    .profile-popup {
+      position: absolute;
+      left: 228px;
+      bottom: 10px;
+      width: 268px;
+      height: 186px;
+      background-color: $white;
+      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
+      border-radius: $radius-4;
+      animation: fadeIn 0.2s linear;
+      .profile-info {
+        display: grid;
+        grid-template-columns: 1fr 32px;
+        grid-gap: 9px;
+        padding: 8px 16px;
+        box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
+        &__left {
+          .name-text {
+            font-size: $t4-text;
+            line-height: 22px;
+            color: $primary-text-clr;
+            margin: 0;
+          }
+          .email-text {
+            font-size: $t4-text;
+            line-height: 22px;
+            color: $ink-lightest-clr;
+            margin: 0;
+          }
+        }
+        &__right {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 32px;
+          height: 32px;
+          @include font($size: $t3-text, $color: $white, $weight: 600);
+          background-color: $brand-color;
+          border-radius: $circle;
+          vertical-align: middle;
+        }
+      }
+      .page-options {
+        padding: 8px 0;
+        box-shadow: inset 0px -1px 0px rgba(148, 151, 155, 0.15);
+        .page-link {
+          display: block;
+          font-size: $t4-text;
+          line-height: 22px;
+          color: $primary-text-clr;
+          padding: 4px 16px;
+          border: none;
+          transition: all 0.2s linear;
+          &:hover {
+            background-color: $grey-lighter-clr;
+          }
+        }
+      }
+      .auth-option {
+        padding: 8px 0;
+        .auth-link {
+          display: block;
+          font-size: $t4-text;
+          line-height: 22px;
+          color: $primary-text-clr;
+          padding: 4px 16px;
+          transition: all 0.2s linear;
+          &:hover {
+            background-color: $grey-lighter-clr;
+          }
+        }
+      }
+    }
+  }
+}
+
+