_drawer.scss in cm-admin-2.4.0

- old
+ new
@@ -1,110 +1,27 @@
-@import "../helpers/index.scss";
-
 .cm-drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 5;
-  background-color: rgba(0, 0, 0, 0.7);
-  &__container {
-    position: relative;
-    width: 360px;
-    height: 100%;
-    background: $white;
-    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 24px;
-      background: $grey-lightest-clr;
-      &__lhs {
-        .title {
-          @include font($size: $t1-text, $color: $primary-text-clr, $weight: 600);
-          font-family: $primary-font;
-          line-height: 28px;
-          margin-bottom: 8px;
-        }
-        .description {
-          @include font($size: $t4-text, $color: $primary-text-clr);
-          font-family: $primary-font;
-          line-height: 22px;
-          margin-bottom: 0;
-        }
-      }
-      &__rhs {
-        color: $ink-lighter-clr;
-      }
-    }
-    .body {
-      padding: 24px;
-      .info-text {
-        @include font($size: $t4-text, $color: $primary-text-clr);
-        font-family: $primary-font;
-        line-height: 22px;
-      }
-    }
-  }
+  @extend .offcanvas-end;
+  width: 640px !important;
 }
 
-.drawer-slide-in {
-  animation: slideInLeft 0.3s ease-in forwards;
+.offcanvas-body {
+  padding: 0;
 }
 
-.drawer-slide-out {
-  animation: slideOutLeft 0.3s ease-in forwards;
+.drawer-btn {
+  @extend .btn-link;
+  margin-left: auto;
+  margin-bottom: 0;
+  font-size: $t3-text !important;
 }
 
-@keyframes slideInLeft {
-  0% {
-    left: -400px;
-    opacity: 0;
-  }
-  100% {
-    left: 0;
-    opacity: 1;
-  }
+.drawer-btn-group {
+  @extend .d-flex, .flex-column, .gap-2;
+  position: absolute;
+  margin: 16px 0 0 -47px;
 }
 
-@keyframes slideOutLeft {
-  0% {
-    left: 0;
-    opacity: 1;
-  }
-  100% {
-    left: -400px;
-    opacity: 0;
-  }
-}
-
-.drawer-btn {
-  cursor: pointer;
-  margin-left: 8px;
-  @include font($size: $t4-text, $color: $brand-color);
-}
-
-//Kanban drawer styles
-.kanban-drawer {
-  .cm-drawer {
-    display: flex;
-    justify-content: flex-end;
-    &__actions {
-      display: flex;
-      flex-direction: column;
-      margin: 16px;
-    }
-    &__container {
-      width: 624px;
-      [class^="col-"] {
-        width: 100% !important;
-      }
-      .show-page__inner {
-        height: calc(100vh - 126px);
-      }
-    }
-  }
+.drawer-nav-btn {
+  @extend .btn-ghost;
+  width: 31px;
+  height: 31px;
 }