cm-admin 0.2.0 → 0.4.2

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

@@ -0,0 +1,200 @@
+@import "../helpers/index.scss";
+
+.cm-filters-v2 {
+  min-height: 64px;
+  padding: 16px 24px;
+  background-color: $white;
+  z-index: 1;
+  &__inner {
+    @include flex(row, flex-start, center, wrap);
+    .filter-chips-wrapper {
+      .filter-chip {
+        margin-left: 16px;
+      }
+    }
+    .add-filter-btn {
+      font-size: $t4-text;
+      line-height: 22px;
+      font-weight: 600;
+      color: $primary-text-clr;
+      cursor: pointer;
+      span {
+        margin-right: 4px;
+      }
+      &:hover {
+        color: $brand-color;
+      }
+    }
+    .clear-btn {
+      position: relative;
+      font-size: $t4-text;
+      line-height: 22px;
+      font-weight: 600;
+      color: $ink-lighter-clr;
+      margin-left: 32px;
+      cursor: pointer;
+      &::before {
+        content: '';
+        position: absolute;
+        top: -5px;
+        left: -16px;
+        height: 32px;
+        border-left: 1px solid $grey-regular-clr;
+      }
+      &:hover {
+        color: $primary-text-clr;
+      }
+    }
+  }
+}
+
+.cm-filters {
+  @include flex(row, space-between, flex-start, nowrap);
+  position: fixed;
+  top: 140px;
+  width: 100%;
+  min-height: 60px;
+  padding: 10px 20px;
+  background-color: $white;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
+  z-index: 1;
+  @media screen and (max-width: 1280px) {
+    flex-wrap: wrap;
+  }
+  &__lhs {
+    @include flex(row, flex-start, center, wrap);
+    width: 75%;
+    .filter-field {
+      position: relative;
+      width: 250px;
+      margin: 4px 10px 4px 0;
+      align-self: center;
+      @media screen and (max-width: 1280px) {
+        margin-bottom: 10px;
+      }
+
+      //input-styles
+      input {
+        width: 100%;
+        height: 39px;
+        border: 1px solid #ccc;
+        border-radius: $radius-4;
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        &:focus {
+          border-color: $brand-color !important;
+          outline: 0 !important;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
+        }
+      }
+
+      //select2 styles
+      .select2 {
+        width: 100% !important;
+        .selection {
+          //single-select-styles
+          .select2-selection--single {
+            height: 39px;
+            border: 1px solid #ccc;
+            border-radius: $radius-4;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+            &:focus {
+              border-color: $brand-color;
+              outline: 0;
+              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+            }
+            .select2-selection__rendered {
+              color: #555555;
+              line-height: 36px;
+              .select2-search--inline {
+                .select2-search__field {
+                  height: 26px !important;
+                }
+              }
+            }
+            .select2-selection__arrow {
+              top: 7px;
+              b {
+                border-color: $brand-color transparent transparent transparent;
+              }
+            }
+          }
+          //multi-select-styles
+          .select2-selection--multiple {
+            max-height: 39px;
+            border: 1px solid #ccc;
+            border-radius: $radius-4;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+            overflow-y: auto;
+            .select2-selection__rendered {
+              .select2-search--inline {
+                .select2-search__field {
+                  height: 26px !important;
+                  border: none;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      //single-select-arrow-styles
+      .select2-container--open {
+        .selection {
+          .select2-selection--single {
+            .select2-selection__arrow {
+              top: 7px;
+              b {
+                border-color: transparent transparent $brand-color transparent;
+              }
+            }
+          }
+        }
+      }
+
+      .filter-rangepicker {
+        padding: 6px 12px;
+        color: #172b4d;
+        font-size: 16px;
+      }
+
+      .field-area {
+        display: block;
+        padding: 6px 12px;
+        font-size: 16px;
+        color: #555555;
+      }
+      .search-icon {
+        position: absolute;
+        top: 10px;
+        right: 15px;
+        color: $brand-color;
+      }
+      .down-arrow-icon {
+        position: absolute;
+        top: 10px;
+        right: 15px;
+        font-size: 20px;
+        color: $brand-color;
+      }
+    }
+  }
+  &__rhs {
+    width: 25%;
+    text-align: right;
+    .filter-btn {
+      padding: 5px 10px;
+      color: $white;
+      font-size: 16px;
+      background-color: $brand-color;
+      border: none;
+      border-radius: $radius-4;
+      transition: all 0.2s linear;
+      &:hover {
+        transform: scale(1.2);
+      }
+      span {
+        margin-right: 5px;
+      }
+    }
+  }
+}

data/{lib/generators/cm_admin/templates/assets/stylesheets → app/assets/stylesheets/cm_admin}/base/form.scss

@@ -1,7 +1,42 @@
-@import "_variable.scss";
+@import "../helpers/index.scss";
 
+@function size($size) {
+  @return map-get($font-size, $size);
+}
+
+@function weight($weight) {
+  @return map-get($font-weight, $weight);
+}
+
+.form-page {
+  margin-top: 140px;
+  padding: 24px;
+  background-color: $white;
+  &__inner {
+    max-width: 752px;
+  }
+  .form-wrapper {
+    .form-container {
+      .form-title {
+        @include font($size: $t3-text, $color: $primary-text-clr, $weight: bold);
+        line-height: 24px;
+        margin: 0 0 16px;
+      }
+      &__inner {
+        padding: 24px;
+        border: 1px solid $grey-light-clr;
+        border-radius: $radius-4;
+        .form-field {
+          max-width: 320px;
+        }
+      }
+    }
+  }
+}
+
+//Old form code
 .form-wrapper {
-  margin-top: 60px;
+  // margin-top: 60px;
 
   &__top-bar {
     position: fixed;
@@ -16,8 +51,7 @@
     box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
     z-index: 9;
     .back-btn {
-      color: #091e42;
-      font-size: 20px;
+      @include font($size: $t1-text, $color: #091e42);
       cursor: pointer;
       span {
         color: #0099ff;
@@ -34,7 +68,7 @@
       background-color: $white;
       box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
       border: 1px solid #ebecf0;
-      border-radius: 4px;
+      border-radius: $radius-4;
     }
   }
 
@@ -50,15 +84,13 @@
       }
       .form-input {
         label {
-          font-weight: 600;
-          color: #172b4d;
-          font-size: 14px;
+          @include font($size: $t4-text, $color: #172b4d, $weight: bold);
         }
         input {
           width: 100%;
           padding: 5px 10px;
           border: 1px solid #c1c7d0;
-          border-radius: 2px;
+          border-radius: $radius-2;
           &:focus {
             border-color: #66afe9 !important;
             outline: 0 !important;
@@ -75,7 +107,7 @@
         width: 250px;
         height: 80px;
         border: 2px dashed #c1c7d0;
-        border-radius: 4px;
+        border-radius: $radius-4;
         cursor: pointer;
         input[type="file"] {
           position: absolute;
@@ -118,8 +150,48 @@
         color: $white;
         background-color: #0099ff;
         border: none;
-        border-radius: 4px;
+        border-radius: $radius-4;
+      }
+    }
+  }
+}
+
+//cocoon field styles
+.fields-group {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  .field-item {
+    margin: 0 5px;
+    label {
+      @include font($size: $t4-text, $color: #172b4d, $weight: bold);
+      margin-bottom: 4px;
+    }
+    input {
+      width: 100%;
+      padding: 5px 10px;
+      border: 1px solid #c1c7d0;
+      border-radius: $radius-2;
+      &:focus {
+        border-color: #66afe9 !important;
+        outline: 0 !important;
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
+      }
+    }
+  }
+  .field-remove {
+    margin-top: 25px;
+    a {
+      @include font($size: $t1-text, $color: #ff5656);
+      @include transition-linear;
+      &:hover {
+        transform: scale(1.1);
       }
     }
   }
 }
+
+.add-field-btn {
+  font-size: 14px;
+  margin: 10px 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,65 @@
+@import "../helpers/index.scss";
+
+.cm-navbar {
+  top: 0;
+  right: 0;
+  left: 225px;
+  display: flex;
+  justify-content: space-between;
+  min-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,76 @@
+@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;
+    }
+  }
+  .active-item {
+    background: #D9DEE3;
+    width: 100%;
+    height: 40px;
+    float: left;
+    border-radius: 2px;
+  }
+}

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

@@ -0,0 +1,96 @@
+@import "../helpers/index.scss";
+
+html {
+  overflow: hidden;
+}
+
+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;
+  }
+
+  .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;
+}
+
+.page-container {
+  height: 100vh;
+}
+
+.sticky-container {
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  z-index: 1;
+}
+
+.scrollable {
+  overflow: auto;
+}
+
+.datetime-wrapper {
+  position: relative;
+}
+
+.cm-admin-static {
+  width: auto;
+  text-align: center;
+  padding: 0 15px;
+}
+
+.date-filter-wrapper {
+  position: absolute;
+  line-height: 28px;
+  top: 0;
+  opacity: 0;
+  z-index: -1;
+}

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

@@ -0,0 +1,76 @@
+@import "../helpers/index.scss";
+
+.show-page {
+  overflow: auto;
+  
+  &__tabs {
+    .cm-tabs-bar {
+      background-color: #FFF;
+      width: 100%;
+      .nav-pills {
+        margin-left: 20px;
+      }
+      .nav-link {
+        position: static;
+        left: 0%;
+        right: 0%;
+        font-size: 14px;
+        line-height: 22px;
+        flex: none;
+        order: 0;
+        flex-grow: 0;
+        color: #6B7586;
+        background-color: #FFF;
+        border-radius: 0px;
+      }
+      .nav-link.active {
+        color: #6554E0;
+        border-bottom: 3px #6554E0 solid;
+        background-color: #FFF;
+      }
+    }
+  }
+
+  &__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;
+          }
+        }
+      }
+    }
+  }
+}