cm-admin 1.1.9 → 1.2.1

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

@@ -1,12 +1,15 @@
 @import "../helpers/index.scss";
-@import "bootstrap/scss/bootstrap";
+@import "../dependency/bootstrap/scss/bootstrap";
 
 .show-page {
+  height: 100vh;
   overflow: auto;
 
   &__header {
+    @extend .position-sticky, .top-0, .bg-white;
+    z-index: 5;
     .tabs {
-      @extend .nav.nav-pills.ml-2;
+      @extend .nav.nav-pills.ms-2;
       .nav-link {
         @include font($size: $t4-text, $color: $ink-lighter-clr);
         border-radius: 0px;
@@ -21,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;
@@ -251,59 +252,36 @@
     }
   }
 
-  .cm-pagination {
-    position: sticky;
+  .pagination-bar {
+    @extend .position-sticky,
+      .bottom-0,
+      .start-0,
+      .d-flex,
+      .justify-content-between,
+      .align-items-center,
+      .w-100,
+      .py-2,
+      .px-4,
+      .bg-white !optional;
     bottom: 0;
     left: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    padding: 16px 24px;
-    background-color: $white;
     border: 1px solid $grey-lighter-clr;
     box-shadow: inset 0px 1px 0px rgba(148, 151, 155, 0.3);
     z-index: 2;
-    &__lhs {
-      @include font($size: $t4-text, $color: $ink-lightest-clr, $weight: bold);
-      line-height: 22px;
+    .count-text {
+      @include font($size: $t4-text, $color: var(--bs-body-color));
     }
-    &__rhs {
-      display: inline-flex;
-      align-items: center;
-      .page-move-btn {
-        @include font($size: 10px, $color: $primary-text-clr);
-        line-height: 12px;
-        padding: 10px 11px;
-        cursor: pointer;
-        &.disabled {
-          color: $disabled-clr;
-          cursor: initial;
-          pointer-events: none;
-        }
-      }
-      .page-num-btn {
-        @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 32px;
-        height: 32px;
-        margin: 0 8px;
-        border-radius: 4px;
-        cursor: pointer;
-        &:hover {
-          border: 1px solid $grey-light-clr;
-        }
-        &.active {
-          color: $primary-text-clr;
-          background-color: $grey-lightest-clr;
-          border: 1px solid $grey-light-clr;
-          border-radius: $radius-4;
-          cursor: initial;
-          pointer-events: none;
-        }
+    .pagination-actions {
+      @extend .pagination;
+      gap: 4px;
+      span {
+        @extend .d-inline-flex;
       }
     }
   }
 }
+
+//Nested table styles
+.nested-table {
+  @extend .table, .table-light, .table-hover, .table-bordered;
+}

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

@@ -1,37 +1,39 @@
 @import "../helpers/index.scss";
-@import "bootstrap/scss/bootstrap";
+@import "../dependency/bootstrap/scss/bootstrap";
 
-// Custom style for icon btn
-.btn-icon {
-  i {
-    margin-right: 4px;
-  }
+.btn-icon-spacing {
+  @extend .d-inline-flex, .align-items-center, .justify-content-center;
+  gap: 4px;
 }
 
 // New buttons with bootstrap button styles
 .cm-admin .btn-cta {
-  @include button-variant($primary, $primary);
-  @extend .btn.btn-sm.btn-icon;
+  --bs-btn-color: var(--bs-white) !important;
+  --bs-btn-bg: var(--bs-primary) !important;
+  --bs-btn-border-color: var(--bs-primary);
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #{shade-color($primary, 10%)};
+  @extend .btn, .btn-sm, .btn-icon-spacing;
 }
 
 .cm-admin .btn-primary {
-  @extend .btn.btn-outline-primary.btn-sm.btn-icon;
+  @extend .btn, .btn-outline-primary, .btn-sm, .btn-icon-spacing;
 }
 
 .cm-admin .btn-secondary {
-  @extend .btn.btn-outline-secondary.btn-sm.btn-icon;
+  @extend .btn, .btn-outline-secondary, .btn-sm, .btn-icon-spacing;
 }
 
 .cm-admin .btn-ghost {
-  @extend .btn.btn-light.btn-sm.btn-icon;
+  @extend .btn, .btn-light, .btn-sm, .btn-icon-spacing;
 }
 
 .cm-admin .btn-danger {
-  @extend .btn.btn-outline-danger.btn-sm.btn-icon;
+  @extend .btn, .btn-outline-danger, .btn-sm, .btn-icon-spacing;
 }
 
 .cm-admin .btn-link {
-  @extend .btn.btn-link.btn-sm.btn-icon;
+  @extend .btn, .btn-link, .btn-sm, .btn-icon-spacing;
   text-decoration: underline;
 }
 

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

@@ -34,30 +34,6 @@
   }
 }
 
-//Search input styles
-.search-input {
-  position: relative;
-  width: 100%;
-  padding: 5px 0 5px 38px;
-  @include font($size: $t4-text, $color: $primary-text-clr);
-  line-height: 22px;
-  background-color: $white;
-  border: 1px solid $grey-light-clr;
-  border-radius: $radius-4;
-  &::placeholder {
-    color: $ink-lightest-clr;
-  }
-  &:focus {
-    outline: 3px auto rgba(47, 128, 237, 0.3);
-  }
-}
-.search-input-icon {
-  position: absolute;
-  top: 8px;
-  left: 16px;
-  @include font($size: $t4-text, $color: $ink-lightest-clr);
-}
-
 //Normal input styles
 .normal-input {
   width: 100%;

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/components/_status-tag.scss

@@ -1,15 +1,43 @@
 @import "../helpers/index.scss";
+@import "../dependency/bootstrap/scss/bootstrap";
 
 .status-tag {
-  font-size: $t4-text;
-  line-height: 22px;
-  padding: 4px;
-  color: $primary-text-clr;
-  background: $grey-lighter-clr;
-  border-radius: 2px;
-  &.success {
-    color: $green-regular-clr;
-    background: $green-lightest-clr;
+  @extend .badge;
+  &.active {
+    background: var(--blue-100, #e7f1ff);
+    color: var(--blue-700, #084298);
+  }
+  &.active-one {
+    background: var(--Blue-100, #e7f1ff);
+    color: var(--Blue-700, #084298);
+  }
+  &.active-two {
+    background: var(--Yellow-100, #fff3cd);
+    color: var(--Yellow-700, #997404);
+  }
+  &.active-three {
+    background: var(--Orange-100, #ffe5d0);
+    color: var(--Orange-700, #984c0c);
+  }
+  &.active-four {
+    background: var(--Indigo-100, #e0cffc);
+    color: var(--Indigo-700, #3d0a91);
+  }
+  &.active-five {
+    background: var(--Cyan-100, #cff4fc);
+    color: var(--Cyan-700, #087990);
+  }
+  &.completed {
+    background: var(--green-100, #d1e7dd);
+    color: var(--green-700, #0f5132);
+  }
+  &.neutral {
+    background: var(--bs-gray-300);
+    color: var(--bs-gray-700);
+  }
+  &.danger {
+    background: var(--red-100, #f8d7da);
+    color: var(--red-700, #842029);
   }
 }
 

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;
+}

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

@@ -0,0 +1,40 @@
+.breadcrumb {
+  // scss-docs-start breadcrumb-css-vars
+  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
+  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
+  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
+  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
+  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
+  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
+  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
+  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
+  // scss-docs-end breadcrumb-css-vars
+
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
+  margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
+  @include font-size(var(--#{$prefix}breadcrumb-font-size));
+  list-style: none;
+  background-color: var(--#{$prefix}breadcrumb-bg);
+  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+
+    &::before {
+      float: left; // Suppress inline spacings and underlining of the separator
+      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+      color: var(--#{$prefix}breadcrumb-divider-color);
+      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+    }
+  }
+
+  &.active {
+    color: var(--#{$prefix}breadcrumb-item-active-color);
+  }
+}