cm-admin 1.1.8 → 1.2.0

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

@@ -9,7 +9,7 @@ body {
   width: 100%;
   margin: 0px;
   padding: 0px;
-  font-family: 'Open Sans', sans-serif !important;
+  font-family: "Open Sans", sans-serif !important;
   background-color: $grey-lightest-clr !important;
 }
 
@@ -35,7 +35,6 @@ body {
   }
 }
 
-
 a:hover,
 a {
   text-decoration: none !important;
@@ -79,9 +78,12 @@ a {
   overflow: auto;
 }
 
+// TODO: Check and remove the input-wrapper styles later
 .input-wrapper {
   margin-bottom: 24px;
-  input, select, .select2 {
+  input,
+  select,
+  .select2 {
     width: 320px;
   }
   textarea {
@@ -89,6 +91,7 @@ a {
   }
 }
 
+// TODO: Check and remove the input-wrapper styles later
 .input-wrapper.disabled {
   input:disabled {
     background-color: $grey-lightest-clr;
@@ -153,10 +156,10 @@ a {
       }
       .select2-results__option--highlighted.select2-results__option--selectable {
         background: $grey-lighter-clr;
-        color: $primary-text-clr;   
+        color: $primary-text-clr;
       }
       .select2-results__option--selected {
-        color: $brand-color !important;   
+        color: $brand-color !important;
         background-color: $grey-lighter-clr !important;
       }
     }

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

@@ -1,25 +1,17 @@
 @import "../helpers/index.scss";
+@import "../dependency/bootstrap/scss/bootstrap";
 
 .show-page {
+  height: 100vh;
   overflow: auto;
 
-  &__tabs {
-    .cm-tabs-bar {
-      background-color: $white;
-      width: 100%;
-      .nav-pills {
-        margin-left: 10px;
-      }
+  &__header {
+    @extend .position-sticky, .top-0, .bg-white;
+    z-index: 5;
+    .tabs {
+      @extend .nav.nav-pills.ms-2;
       .nav-link {
-        position: static;
-        left: 0%;
-        right: 0%;
         @include font($size: $t4-text, $color: $ink-lighter-clr);
-        line-height: 22px;
-        flex: none;
-        order: 0;
-        flex-grow: 0;
-        background-color: $white;
         border-radius: 0px;
       }
       .nav-link.active {
@@ -32,36 +24,26 @@
 
   &__inner {
     padding: 24px;
-    .info-section {
-      margin-bottom: 32px;
-
+    overflow: auto;
+    .section {
+      margin-bottom: 24px;
       .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;
+        @extend .h6, .fw-semibold;
+        color: $primary-text-clr;
       }
-      .info-split {
+      .card-info {
         display: grid;
-        grid-template-columns: 140px 1fr;
+        grid-template-columns: 120px 1fr;
         grid-column-gap: 24px;
-        margin-bottom: 24px;
+        margin-bottom: 8px;
         &:nth-last-child(1) {
           margin-bottom: 0;
         }
-        &__lhs {
+        &__label {
           @include font($size: $t4-text, $color: $ink-lighter-clr);
-          line-height: 22px;
         }
-        &__rhs {
+        &__description {
           @include font($size: $t4-text, $color: $primary-text-clr);
-          line-height: 19px;
         }
       }
     }

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

@@ -1,4 +1,5 @@
 @import "../helpers/index.scss";
+@import "../dependency/bootstrap/scss/bootstrap";
 
 .cm-index-page {
   background-color: $white;
@@ -34,21 +35,13 @@
       line-height: 22px;
       margin: 0;
     }
-    &__column-action {
-      .column-btn {
-        padding: 4px 8px;
-        span:nth-child(2) {
-          margin: 0 0 0 4px;
-        }
-      }
-    }
   }
 
   //Table UI styles
   .new-admin-table {
     min-width: 720px;
     max-width: fit-content;
-    // max-height: calc(100vh - 240px); Height is dynamic 
+    // max-height: calc(100vh - 240px); Height is dynamic
     overflow: auto;
     .cm-table {
       table-layout: fixed;
@@ -170,10 +163,6 @@
                   padding: 0px;
                 }
               }
-              .tool-btn {
-                background-color: transparent;
-                border: none;
-              }
             }
           }
         }
@@ -236,7 +225,7 @@
         &__name {
           @include font($size: $t4-text, $color: $primary-text-clr);
           line-height: 22px;
-          margin-left: 4px;         
+          margin-left: 4px;
           p {
             margin: 0;
           }
@@ -319,3 +308,8 @@
     }
   }
 }
+
+//Nested table styles
+.nested-table {
+  @extend .table, .table-light, .table-hover, .table-bordered;
+}

data/app/assets/stylesheets/cm_admin/components/_buttons.scss

@@ -1,154 +1,42 @@
 @import "../helpers/index.scss";
+@import "../dependency/bootstrap/scss/bootstrap";
 
-.cta-btn {
-  padding: 5px 10px;
-  @include font($size: $t4-text, $color: $white, $weight: bold);
-  background-color: $brand-color;
-  border: none;
-  border-radius: $radius-4;
-  transition: all 0.2s linear;
-  white-space: nowrap;
-  &:hover {
-    color: $white;
-    background: $cta-hover-gradient;
-    transform: scale(1.05);
-  }
-  &:focus {
-    outline: 3px auto rgba(47, 128, 237, 0.3);
-    outline-offset: 1px;
-  }
-  &.disabled {
-    color: $disabled-clr;
-    background: $grey-lighter-clr;
-    cursor: not-allowed !important;
-    &:hover {
-      background-color: $grey-lighter-clr;
-    }
+// Custom style for icon btn
+.btn-icon {
+  i {
+    margin-right: 4px;
   }
 }
 
-.primary-btn {
-  padding: 5px 10px;
-  @include font($size: $t4-text, $color: $brand-color, $weight: bold);
-  background-color: $white;
-  border: 1px solid $brand-color;
-  border-radius: $radius-4;
-  transition: all 0.2s linear;
-  white-space: nowrap;
-  &:hover {
-    color: $brand-color;
-    background-color: $brand-hover-color;
-    transform: scale(1.05);
-  }
-  &:focus {
-    outline: 3px auto rgba(47, 128, 237, 0.3);
-    outline-offset: 2px;
-  }
-  &.disabled {
-    color: $disabled-clr;
-    background: $white;
-    border: 1px solid $grey-regular-clr;
-    cursor: not-allowed !important;
-    &:hover {
-      background-color: $white;
-    }
-  }
+// New buttons with bootstrap button styles
+.cm-admin .btn-cta {
+  @include button-variant($primary, $primary);
+  @extend .btn.btn-sm.btn-icon;
 }
 
-.secondary-btn {
-  padding: 5px 10px;
-  @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
-  background-color: $white;
-  border: 1px solid $ink-regular-clr;
-  border-radius: $radius-4;
-  transition: all 0.2s linear;
-  white-space: nowrap;
-  &:hover {
-    color: $primary-text-clr;
-    background-color: $grey-light-clr;
-    transform: scale(1.05);
-  }
-  &:focus {
-    outline: 3px auto rgba(47, 128, 237, 0.3);
-    outline-offset: 2px;
-  }
-  &.disabled {
-    color: $disabled-clr;
-    background: $white;
-    border: 1px solid $grey-regular-clr;
-    cursor: not-allowed !important;
-    &:hover {
-      background-color: $white;
-    }
-  }
-  span:nth-child(2) {
-    margin: 0 4px 0 8px;
-  }
-  span:nth-child(3) {
-    @include font($size: 10px, $color: $ink-lighter-clr, $weight: bold);
-  }
+.cm-admin .btn-primary {
+  @extend .btn.btn-outline-primary.btn-sm.btn-icon;
 }
 
-.gray-border-btn {
-  padding: 5px 10px;
-  @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
-  background-color: $white;
-  border: 1px solid $ink-regular-clr;
-  border-radius: $radius-4;
-  transition: all 0.2s linear;
-  white-space: nowrap;
-  &:hover {
-    color: $primary-text-clr;
-    background-color: $grey-light-clr;
-    transform: scale(1.05);
-  }
-  &:focus {
-    outline: 3px auto rgba(47, 128, 237, 0.3);
-    outline-offset: 2px;
-  }
-  &.disabled {
-    color: $disabled-clr;
-    background: $white;
-    border: 1px solid $grey-regular-clr;
-    cursor: not-allowed !important;
-    &:hover {
-      background-color: $white;
-    }
-  }
+.cm-admin .btn-secondary {
+  @extend .btn.btn-outline-secondary.btn-sm.btn-icon;
 }
 
-.ghost-btn {
-  padding: 5px 10px;
-  @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
-  background-color: transparent;
-  border: none;
-  border-radius: $radius-4;
-  transition: all 0.2s linear;
-  white-space: nowrap;
-  &:hover {
-    color: $primary-text-clr;
-    background: $grey-light-clr;
-    transform: scale(1.05);
-  }
-  &:focus {
-    outline: 3px auto rgba(47, 128, 237, 0.3);
-  }
-  &.disabled {
-    color: $disabled-clr;
-    background: $grey-light-clr;
-    border: none;
-    cursor: not-allowed !important;
-    &:hover {
-      background-color: $grey-light-clr;
-    }
-  }
+.cm-admin .btn-ghost {
+  @extend .btn.btn-light.btn-sm.btn-icon;
 }
 
-.text-btn {
-  border: none;
-  background-color: transparent;
-  white-space: nowrap;
-  &:focus {
-    outline: none;
-  }
+.cm-admin .btn-danger {
+  @extend .btn.btn-outline-danger.btn-sm.btn-icon;
+}
+
+.cm-admin .btn-link {
+  @extend .btn.btn-link.btn-sm.btn-icon;
+  text-decoration: underline;
 }
+
+// button mixin - We can use if needed
+// @include button-variant($background: #6554e0, $border: #6554e0);
+
+//Outline button mixin - We can use if needed
+// @include button-outline-variant($color: #6554e0);

data/app/assets/stylesheets/cm_admin/components/_modal.scss

@@ -1,34 +1,11 @@
 @import "../helpers/index.scss";
 
-// Confirm modal styles
-.confirm-modal {
-  .modal-dialog {
-    max-width: 520px;
-    .modal-content {
-      padding: 32px 32px 16px;
-      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
-      border: none;
-      .modal-header {
-        margin: 0 0 24px;
-        padding: 0;
-        border: none;
-        .modal-title {
-          @include font($size: 24px, $color: $primary-text-clr, $weight: 600);
-          line-height: 32px;
-        }
-      }
-      .modal-body {
-        padding: 0 0 16px;
-        .body-content {
-          @include font($size: $t4-text, $color: #0D102B);
-          line-height: 22px;
-          margin: 0;
-        }
-      }
-      .modal-footer {
-        padding: 16px 0 0;
-        border: none;
-      }
-    }
+.custom-modal-body {
+  .modal-info {
+    padding-bottom: 16px;
+  }
+  .modal-footer {
+    margin: 0 -16px;
+    padding-bottom: 0;
   }
 }

data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_accordion.scss

@@ -0,0 +1,158 @@
+//
+// Base styles
+//
+
+.accordion {
+  // scss-docs-start accordion-css-vars
+  --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-bg: #{$accordion-bg};
+  --#{$prefix}accordion-transition: #{$accordion-transition};
+  --#{$prefix}accordion-border-color: #{$accordion-border-color};
+  --#{$prefix}accordion-border-width: #{$accordion-border-width};
+  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
+  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
+  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+  // scss-docs-end accordion-css-vars
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+  @include font-size($font-size-base);
+  color: var(--#{$prefix}accordion-btn-color);
+  text-align: left; // Reset button style
+  background-color: var(--#{$prefix}accordion-btn-bg);
+  border: 0;
+  @include border-radius(0);
+  overflow-anchor: none;
+  @include transition(var(--#{$prefix}accordion-transition));
+
+  &:not(.collapsed) {
+    color: var(--#{$prefix}accordion-active-color);
+    background-color: var(--#{$prefix}accordion-active-bg);
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+
+    &::after {
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    flex-shrink: 0;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
+    margin-left: auto;
+    content: "";
+    background-image: var(--#{$prefix}accordion-btn-icon);
+    background-repeat: no-repeat;
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
+    outline: 0;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  color: var(--#{$prefix}accordion-color);
+  background-color: var(--#{$prefix}accordion-bg);
+  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+
+  &:first-of-type {
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+    .accordion-button {
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  // Only set a border-radius on the last item if the accordion is collapsed
+  &:last-of-type {
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+    .accordion-button {
+      &.collapsed {
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+      }
+    }
+
+    .accordion-collapse {
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+    }
+  }
+}
+
+.accordion-body {
+  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
+}
+
+
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+  .accordion-collapse {
+    border-width: 0;
+  }
+
+  .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+
+    &:first-child { border-top: 0; }
+    &:last-child { border-bottom: 0; }
+
+    .accordion-button {
+      &,
+      &.collapsed {
+        @include border-radius(0);
+      }
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .accordion-button::after {
+      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+    }
+  }
+}

data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_alert.scss

@@ -0,0 +1,68 @@
+//
+// Base styles
+//
+
+.alert {
+  // scss-docs-start alert-css-vars
+  --#{$prefix}alert-bg: transparent;
+  --#{$prefix}alert-padding-x: #{$alert-padding-x};
+  --#{$prefix}alert-padding-y: #{$alert-padding-y};
+  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+  --#{$prefix}alert-color: inherit;
+  --#{$prefix}alert-border-color: transparent;
+  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
+  --#{$prefix}alert-border-radius: #{$alert-border-radius};
+  --#{$prefix}alert-link-color: inherit;
+  // scss-docs-end alert-css-vars
+
+  position: relative;
+  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+  margin-bottom: var(--#{$prefix}alert-margin-bottom);
+  color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-bg);
+  border: var(--#{$prefix}alert-border);
+  @include border-radius(var(--#{$prefix}alert-border-radius));
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: $alert-dismissible-padding-r;
+
+  // Adjust close link position
+  .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: $stretched-link-z-index + 1;
+    padding: $alert-padding-y * 1.25 $alert-padding-x;
+  }
+}
+
+
+// scss-docs-start alert-modifiers
+// Generate contextual modifier classes for colorizing the alert
+@each $state in map-keys($theme-colors) {
+  .alert-#{$state} {
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
+  }
+}
+// scss-docs-end alert-modifiers

data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_badge.scss

@@ -0,0 +1,38 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  // scss-docs-start badge-css-vars
+  --#{$prefix}badge-padding-x: #{$badge-padding-x};
+  --#{$prefix}badge-padding-y: #{$badge-padding-y};
+  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
+  --#{$prefix}badge-font-weight: #{$badge-font-weight};
+  --#{$prefix}badge-color: #{$badge-color};
+  --#{$prefix}badge-border-radius: #{$badge-border-radius};
+  // scss-docs-end badge-css-vars
+
+  display: inline-block;
+  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+  @include font-size(var(--#{$prefix}badge-font-size));
+  font-weight: var(--#{$prefix}badge-font-weight);
+  line-height: 1;
+  color: var(--#{$prefix}badge-color);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius(var(--#{$prefix}badge-border-radius));
+  @include gradient-bg();
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}