@haniffalab/cherita-react 1.4.1-dev.2025-10-23.e95b5a90 → 1.4.1-dev.2025-10-23.55fbe6ff

package/scss/components/layouts.scss

@@ -3,9 +3,7 @@
   display: flex;
   flex-direction: column;
   overflow: auto;
-}
 
-.cherita-app {
   .cherita-navbar {
     @extend .m-3;
     @extend .d-block;
@@ -17,16 +15,13 @@
     left: 0;
     right: 0;
     border-radius: 0.25rem;
-    @media (min-width: 992px) and (max-width: 1199px) {
-      margin-left: calc(33.33333333% + 1rem) !important;
+
+    @media (width >= 992px) and (width <= 1199px) {
+      margin-left: calc(33.3333% + 1rem) !important;
     }
   }
 }
 
-.cherita-app-canvas {
-  position: relative;
-}
-
 .cherita-app-obs {
   @extend .col;
   @extend .d-none;
@@ -73,8 +68,8 @@
     align-items: center;
     width: 100%;
 
-    &:after {
-      content: "";
+    &::after {
+      content: '';
       flex-shrink: 0;
       width: var(--geeks-accordion-btn-icon-width);
       height: var(--geeks-accordion-btn-icon-width);
@@ -90,7 +85,7 @@
     color: var(--geeks-accordion-active-color);
     background-color: var(--geeks-accordion-active-bg);
 
-    &:after {
+    &::after {
       background-image: var(--geeks-accordion-btn-active-icon);
       transform: var(--geeks-accordion-btn-icon-transform);
     }
@@ -126,6 +121,7 @@
   .offcanvas-header {
     @extend .pb-0;
   }
+
   .offcanvas-body {
     @extend .pt-1;
 
@@ -145,6 +141,8 @@
 }
 
 .cherita-app-canvas {
+  position: relative;
+
   .cherita-plot {
     position: relative;
     height: 100%;
@@ -154,6 +152,7 @@
 
 .cherita-app-container {
   @extend .p-0;
+
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
@@ -168,6 +167,7 @@
 
   .cherita-app-canvas {
     @extend .p-0;
+
     flex: 1 1 auto;
     min-width: 375px;
     position: relative;
@@ -178,6 +178,7 @@
     .cherita-navbar {
       @extend .m-0;
       @extend .d-block;
+
       position: relative;
     }
   }
@@ -189,7 +190,7 @@
     position: relative;
   }
 
-  @media (max-width: 1400px) {
+  @media (width <= 1400px) {
     .cherita-app-obs,
     .cherita-app-sidebar {
       max-width: 25%;

package/scss/components/lists.scss

@@ -1,11 +1,13 @@
 .list-group.cherita-list {
   .virtualized-list-wrapper {
-    padding: 0 0.25rem 0.25rem 0.25rem;
+    padding: 0 0.25rem 0.25rem;
   }
+
   .list-group-item.unstyled {
     background-color: transparent;
     padding-left: 1rem;
   }
+
   .list-group-item {
     border: 0;
     padding: 0.375rem 0.75rem;
@@ -14,13 +16,15 @@
     background-color: var(--#{$prefix}tertiary-bg);
     border-radius: var(--#{$prefix}border-radius);
   }
+
   .list-group-item.active {
     background-color: var(--#{$prefix}secondary-bg);
   }
 }
+
 .obs-statistics {
   border: 0;
-  margin: 0 0.25rem 0.25rem 0.25rem;
+  margin: 0 0.25rem 0.25rem;
   padding: 0.375rem 0.75rem;
   line-height: 1.5;
   color: var(--#{$prefix}body-color);
@@ -29,7 +33,7 @@
 }
 
 .cherita-list.var-set-list > .list-group-item {
-  filter: brightness(0.95); // darken background
+  filter: brightness(0.95);
   padding-right: 0;
   padding-left: 0.35rem;
 }
@@ -40,4 +44,4 @@
       cursor: pointer;
     }
   }
-}
+}

package/scss/components/plotly.scss

@@ -9,6 +9,7 @@
       .modebar-group {
         @extend .bg-primary;
         @extend .mx-1;
+
         border-radius: 5px;
         padding: 4px !important;