@vixcom/ui 1.5.0 → 1.6.1

package/src/styles/main.scss

@@ -9,7 +9,6 @@ script {
 * {
   scrollbar-color: hsl(var(--muted-hs), calc(var(--muted-l) + 40%)) transparent;
   scrollbar-width: thin;
-  cursor: default;
   word-break: break-word;
 }
 
@@ -36,11 +35,7 @@ script {
   padding: 0.5rem;
 }
 
-::-moz-selection {
-  color: var(--white);
-  background: hsl(var(--muted-hs), calc(var(--muted-l) + 20%));
-}
-
+::-moz-selection,
 ::selection {
   color: var(--white);
   background: hsl(var(--muted-hs), calc(var(--muted-l) + 20%));
@@ -122,13 +117,15 @@ b {
   filter: blur(5px);
 }
 
-a,
-.link {
-  color: var(--secondary);
-  cursor: pointer;
+@layer settings {
+  a,
+  .link {
+    color: var(--secondary);
+    cursor: pointer;
 
-  &:hover {
-    color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 10%));
+    &:hover {
+      color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 10%));
+    }
   }
 }
 
@@ -244,6 +241,7 @@ a:not(.link) {
 
 .icon {
   @include flex-center;
+  font-size: 150%;
 }
 
 .icon-container {
@@ -260,10 +258,6 @@ a:not(.link) {
   &.h .icon {
     margin: 0 0.5rem;
   }
-
-  .icon {
-    font-size: 150%;
-  }
 }
 
 [class*='sq-'] {
@@ -450,7 +444,7 @@ input {
     &:not(.default) {
       width: 2rem;
       min-width: 2rem;
-      height: 1rem;
+      height: 1.25rem;
     }
 
     &::before {
@@ -851,7 +845,7 @@ option[disabled]:first-of-type {
   display: flex;
   overflow-x: scroll;
   flex-wrap: nowrap;
-  width: 100%;
+  /* width: 100%; */
   gap: 0.5rem;
 
   > .tab {
@@ -1270,7 +1264,7 @@ table {
 
 .scrollable {
   position: relative;
-  height: 100%;
+  /* height: 100%; */
   /* flex: 1 1 auto; */
   overflow-y: scroll;
   overflow-x: hidden;
@@ -1349,11 +1343,6 @@ table {
       background-color: inherit;
       z-index: 0;
     }
-
-    .bg-svg {
-      -webkit-mask-image: url('/assets/images/card-bg.svg');
-      mask-image: url('/assets/images/card-bg.svg');
-    }
   }
 
   .img,
@@ -1371,13 +1360,11 @@ table {
 
   .img {
     flex: 1 1 40%;
-    width: 40%;
     border-radius: inherit;
   }
 
   .icon {
     flex: 1 1 25%;
-    width: 25%;
     /* padding-left: 0.75rem; */
     /* font-weight: bold; */
   }
@@ -1385,7 +1372,6 @@ table {
   .addon {
     align-self: stretch;
     flex: 1 1 25%;
-    width: 25%;
 
     > * {
       flex: 1 1 auto;
@@ -1429,7 +1415,7 @@ table {
   }
 }
 
-.text-strick-line {
+.strike-line {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   align-items: center;
@@ -1516,7 +1502,8 @@ table {
 }
 
 .flex-list,
-.item-list {
+.item-list,
+.menu {
   margin: 1.5rem 0;
   list-style: none;
   display: flex;
@@ -1755,6 +1742,7 @@ table {
 
 img {
   max-width: 100%;
+  object-fit: contain;
 }
 
 .img-fullwidth {
@@ -1799,6 +1787,14 @@ img {
   }
 }
 
+.bg-svg {
+  height: 100%;
+  background-color: currentColor;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
 .rounded-inherit {
   border-radius: inherit;
 }
@@ -1854,7 +1850,8 @@ section {
 
 /* Above Tablets/Mini PC */
 @media (min-width: 769px) {
-  .item-list {
+  .item-list,
+  .menu {
     .item > .value {
       margin-left: 1rem;
       text-align: right;
@@ -1933,7 +1930,8 @@ section {
     width: 100%;
   }
 
-  .item-list {
+  .item-list,
+  .menu {
     &:not(.has-connector) {
       gap: 1rem;
     }

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;
 }
 
@@ -225,6 +225,14 @@ nav,
   transition: transform 0.5s;
   z-index: 1;
 
+  &:not(.side-menu:has(> .menu-snap)) {
+    flex-direction: column;
+  }
+
+  img {
+    max-height: 5rem;
+  }
+
   nav,
   .nav {
     font-size: 120%;
@@ -232,6 +240,7 @@ nav,
     .item {
       // NOTE: Modify this in implementations
       /* border-radius: inherit; */
+      cursor: pointer;
       @include before-content;
 
       &::before {
@@ -261,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;
@@ -326,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;
@@ -346,6 +370,10 @@ main {
             }
             .side-menu.mini {
               flex-basis: 5%;
+
+              &:has(> .menu-snap) {
+                flex-basis: 10%;
+              }
               @include mini-side-menu-toggled;
             }
           }
@@ -397,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;
       }
     }
   }
@@ -419,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) {
         ~,
@@ -458,7 +488,6 @@ main {
 /* Mobile Below */
 @media (max-width: 576px) {
   // TODO: Move into main-menu-container
-
   input.main-menu-trigger {
     &:checked {
       width: 100vw;
@@ -469,7 +498,9 @@ main {
       ~,
       ~ * {
         .main-menu {
-          flex-direction: column;
+          &:not(:has(> .menu-snap)) {
+            flex-direction: column;
+          }
 
           .menu-header {
             order: -1;
@@ -516,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

@@ -104,9 +104,9 @@ $directions: (
     min-width: $_value;
   }
 
-  .gap-#{$breakPointKey}#{$sizeKey} {
-    gap: $_value;
-  }
+  // .gap-#{$breakPointKey}#{$sizeKey} {
+  //   gap: $_value;
+  // }
 }
 
 @each $size in $number-sizes {