@vixcom/ui 1.4.0 → 1.6.0

package/src/styles/menu.scss

@@ -121,7 +121,7 @@ nav,
 nav,
 .nav,
 .menu-container {
-  flex: 1 1 auto;
+  flex: 1 1 100%;
   gap: 0.5rem;
 }
 
@@ -133,7 +133,6 @@ nav,
     gap: 0.75rem;
     padding: 0.5rem 1rem;
     text-decoration: none;
-    color: currentColor;
 
     .label {
       transition: position 0.25s linear 0.125s, transform 0.25s linear 0.125s,
@@ -158,6 +157,10 @@ nav,
     }
   }
 
+  img {
+    max-height: 5rem;
+  }
+
   .menu-logo {
     min-width: 7.5rem;
   }
@@ -226,6 +229,10 @@ nav,
   transition: transform 0.5s;
   z-index: 1;
 
+  &:not(.side-menu:has(> .menu-snap)) {
+    flex-direction: column;
+  }
+
   nav,
   .nav {
     font-size: 120%;
@@ -233,6 +240,7 @@ nav,
     .item {
       // NOTE: Modify this in implementations
       /* border-radius: inherit; */
+      cursor: pointer;
       @include before-content;
 
       &::before {
@@ -262,9 +270,19 @@ nav,
   }
 }
 
+// TODO: Add menu-snap offset for grid main-menu-container
+.menu-snap {
+  display: flex;
+  overflow: scroll;
+
+  .item {
+    padding: 0.125%;
+    z-index: 1;
+  }
+}
+
 // TODO: upgrade: side-menu to edge-menu, This slides menu from all edge of the screen
 .side-menu {
-  flex-direction: column;
   position: relative;
   height: 100%;
   transition: flex-basis 0.5s, transform 0.5s, opacity 0.25s;
@@ -327,9 +345,14 @@ main {
       }
     }
 
+    #{selector.nest('input.main-menu-trigger:not(:checked)','~,~ *', '.side-menu > .menu-snap')} {
+      flex-basis: 25%;
+    }
+
     &.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
       grid-template-columns: 0fr 1fr;
     }
+
     &.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
       grid-template-columns: 1fr 20fr;
       @include mini-side-menu-toggled;
@@ -347,6 +370,10 @@ main {
             }
             .side-menu.mini {
               flex-basis: 5%;
+
+              &:has(> .menu-snap) {
+                flex-basis: 10%;
+              }
               @include mini-side-menu-toggled;
             }
           }
@@ -398,16 +425,14 @@ main {
     }
 
     &.flex {
-      input.main-menu-trigger {
-        &:not(:checked) {
-          ~,
-          ~ * {
-            .side-menu {
-              flex-basis: 8.25%;
-              @include mini-side-menu-toggled;
-            }
-          }
+      #{selector.nest('input.main-menu-trigger:not(:checked)','~,~ *','.side-menu')} {
+        flex-basis: 8.25%;
+
+        &:has(> .menu-snap) {
+          flex-basis: 16.5%;
         }
+
+        @include mini-side-menu-toggled;
       }
     }
   }
@@ -420,6 +445,10 @@ main {
 /* Tablet Below */
 @media (max-width: 768px) {
   .main-menu-container {
+    #{selector.nest('input.main-menu-trigger:checked','~,~ *', '.side-menu > .menu-snap')} {
+      flex-basis: 25%;
+    }
+
     input.main-menu-trigger {
       &:not(:checked) {
         ~,
@@ -459,7 +488,6 @@ main {
 /* Mobile Below */
 @media (max-width: 576px) {
   // TODO: Move into main-menu-container
-
   input.main-menu-trigger {
     &:checked {
       width: 100vw;
@@ -470,7 +498,9 @@ main {
       ~,
       ~ * {
         .main-menu {
-          flex-direction: column;
+          &:not(:has(> .menu-snap)) {
+            flex-direction: column;
+          }
 
           .menu-header {
             order: -1;
@@ -517,7 +547,7 @@ main {
   }
 
   .main-menu-container {
-    #{selector.nest('.main-menu', 'nav, .nav,.menu-container')},
+    #{selector.nest('input.main-menu-trigger:checked','~,~ *','.main-menu', 'nav, .nav,.menu-container')},
     &.flex {
       flex-direction: column;
     }

package/src/styles/sizes.scss

@@ -158,38 +158,3 @@ $directions: (
     }
   }
 }
-
-$heading-start: (
-  k: 1,
-  v: 200,
-);
-$heading-end: (
-  k: 6,
-  v: 100,
-);
-$heading-difference: math.div(
-  (map-get($heading-start, 'v') - map-get($heading-end, 'v')),
-  (map-get($heading-end, 'k') - map-get($heading-start, 'k'))
-);
-
-@for $n from map-get($heading-start, 'k') through map-get($heading-end, 'k') {
-  $_value: map-get($heading-start, 'v') - (($n - 1) * $heading-difference);
-
-  h#{$n},
-  .h#{$n},
-  .font-#{(map-get($heading-end, 'k') - ($n+1))} {
-    font-size: #{$_value}#{'%'};
-  }
-}
-
-.font-sm {
-  font-size: 75%;
-}
-
-.font-md {
-  font-size: 90%;
-}
-
-.font-lg {
-  font-size: 250%;
-}

package/src/styles/variables.scss

@@ -2,13 +2,13 @@
 
 :root {
   --font-size: var(--o-font-size, #{$font-size});
-  --card-shadow: #{$card-shadow};
+  --card-shadow: var(--shadow-1);
   --background-color: #{$background-color};
   --heading-start: 200%;
   --heading-end: 100%;
 
   /* Color Variables */
-  @each $k, $v in $app-colors-mapped {
+  @each $k, $v in $colors-mapped {
     /* ---COLOR-#{$k}-START--- */
     --#{$k}: #{map-get($v, 'bg')};
     /* ---HSL-#{$k}--- */
@@ -23,7 +23,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 576px) {
   :root {
     --font-size: calc(var(--o-font-size) / 1.15);
   }