cm-admin 0.2.0 → 0.3.0

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

@@ -0,0 +1,199 @@
+@import "../helpers/index.scss";
+
+.cm-filters-v2 {
+  position: fixed;
+  top: 140px;
+  left: 225px;
+  width: calc(100% - 225px);
+  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;
+      margin-left: 16px;
+      cursor: pointer;
+      span {
+        margin-right: 4px;
+      }
+    }
+    .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;
+      }
+    }
+  }
+}
+
+.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/app/assets/stylesheets/cm_admin/base/form.scss

@@ -0,0 +1,262 @@
+@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;
+
+  &__top-bar {
+    position: fixed;
+    top: 60px;
+    left: 250px;
+    display: flex;
+    align-items: center;
+    width: calc(100% - 250px);
+    height: 60px;
+    padding: 0 20px;
+    background-color: $white;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
+    z-index: 9;
+    .back-btn {
+      @include font($size: $t1-text, $color: #091e42);
+      cursor: pointer;
+      span {
+        color: #0099ff;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  &__inner {
+    margin-top: 120px;
+    padding: 20px;
+    .paper {
+      padding: 20px;
+      background-color: $white;
+      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+      border: 1px solid #ebecf0;
+      border-radius: $radius-4;
+    }
+  }
+
+  .custom-form {
+    max-width: 700px;
+    .form-field {
+      margin-bottom: 20px;
+      .form-label {
+        font-weight: 600;
+        color: #172b4d;
+        font-size: 14px;
+        margin-bottom: 0.5rem;
+      }
+      .form-input {
+        label {
+          @include font($size: $t4-text, $color: #172b4d, $weight: bold);
+        }
+        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;
+          }
+        }
+      }
+
+      .form-select {
+        //select2 styles
+        .select2 {
+          width: 100% !important;
+          .selection {
+            //single-select-styles
+            .select2-selection--single {
+              height: 39px;
+              border: 1px solid #c1c7d0;
+              border-radius: $radius-2;
+              &:focus {
+                border-color: #66afe9;
+                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: #0099ff transparent transparent transparent;
+                }
+              }
+            }
+            //multi-select-styles
+            .select2-selection--multiple {
+              max-height: 39px;
+              border: 1px solid #c1c7d0;
+              border-radius: $radius-2;
+              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 #0099ff transparent;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .file-upload {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 250px;
+        height: 80px;
+        border: 2px dashed #c1c7d0;
+        border-radius: $radius-4;
+        cursor: pointer;
+        input[type="file"] {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          opacity: 0;
+          cursor: pointer;
+        }
+        span {
+          text-align: center;
+          color: #0099ff;
+          margin: 0;
+          cursor: pointer;
+        }
+        i {
+          color: #0099ff;
+          margin-left: 8px;
+        }
+      }
+
+      .radio-label {
+        color: #172b4d;
+        font-size: size(16);
+        font-weight: weight(bold);
+        margin-left: 8px;
+      }
+
+      .checkbox-label {
+        color: #172b4d;
+        font-size: size(16);
+        font-weight: weight(bold);
+        margin-left: 8px;
+      }
+    }
+
+    .form-actions {
+      input {
+        padding: 5px 10px;
+        color: $white;
+        background-color: #0099ff;
+        border: none;
+        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;
+}