@vixcom/ui 1.7.2 → 1.7.4

package/src/styles/menu.scss

@@ -1,590 +0,0 @@
-@use 'sass:selector';
-@import 'mixins';
-
-/**
-* @Author vixson https://vixson.github.io
-* @Description Menu styles which includes:
-*              1. side-menu
-*              2. full-menu (fullscreen floating)
-*              2. float-menu (miniscreen corner floating)
-*/
-/* HACK: use 1% in css calc to insure the unit is applied to the variable ex: calc(1% * var(--the-variable)) */
-:root {
-  --side-menu-width-sm: 80;
-  --side-menu-width-md: 15;
-  --side-menu-width-lg: 25;
-  --side-menu-width-lg-mini: 10;
-}
-
-@mixin mini-side-menu-toggled {
-  .menu-logo {
-    display: none;
-  }
-
-  .menu-logo-alt {
-    display: block;
-  }
-
-  .nav .title {
-    opacity: 0;
-    height: 0;
-    margin-bottom: 0;
-  }
-
-  nav,
-  .nav,
-  .menu-header,
-  .menu-footer {
-    .item,
-    .title {
-      .label {
-        opacity: 0;
-        transform: translateX(100%);
-        position: absolute;
-      }
-    }
-
-    .title {
-      border-bottom: thin solid;
-      padding: 0;
-    }
-  }
-}
-
-input.main-menu-trigger {
-  /* @include absolute-content; */
-  position: fixed;
-  left: 0;
-  top: 0;
-  padding: 0;
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  transition: background-color 0.5s ease-in;
-  border-radius: 0;
-
-  &::after {
-    display: none;
-  }
-
-  &,
-  &::before,
-  &::after {
-    background-color: transparent;
-  }
-
-  &:checked {
-    ~ {
-    }
-  }
-
-  &:not(:checked) {
-    ~ {
-    }
-  }
-}
-
-.main-menu-toggle {
-  margin: auto;
-  position: relative;
-  font-size: 120%;
-}
-
-nav,
-.nav,
-.menu-header,
-.menu-footer,
-.menu-container {
-  display: flex;
-}
-
-.menu-header,
-.menu-footer {
-  align-items: center;
-}
-
-.menu-container {
-  &,
-  nav,
-  .nav {
-    gap: 0.5rem;
-  }
-}
-
-nav,
-.nav {
-  .item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.5rem 1rem;
-    text-decoration: none;
-
-    .label {
-      transition: position 0.25s linear 0.125s, transform 0.25s linear 0.125s,
-        opacity 0.5s linear 0.125s;
-    }
-  }
-}
-
-/* Menu */
-
-.main-menu-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transition: 0.5s;
-
-  &.rtl {
-    // main,
-    // .main-page {
-    //   order: -1;
-    // }
-  }
-
-  &:is(body) {
-    width: 100vw;
-    height: 100vh;
-  }
-
-  &.flex {
-    display: flex;
-
-    &:not(:has(> .side-menu)) {
-      flex-direction: column;
-    }
-
-    > .side-menu {
-      --side-menu-width: var(--side-menu-width-lg);
-    }
-  }
-
-  &.grid {
-    display: grid;
-
-    &:has(> .side-menu) {
-      grid-auto-flow: column;
-      grid-template-columns: calc(1% * var(--side-menu-width)) 1fr;
-      grid-template-rows: 10% 80% 10%;
-
-      > {
-        *:not(.side-menu) {
-          grid-column: 2;
-        }
-
-        header {
-          grid-row: 1;
-        }
-
-        footer {
-          grid-row: 3;
-        }
-      }
-    }
-  }
-  > {
-    main,
-    .main-page,
-    .content {
-      width: 100%;
-      height: 100%;
-      overflow: scroll;
-    }
-  }
-}
-
-.main-menu {
-  display: flex;
-  padding: 0;
-  margin: 0;
-  transition: transform 0.5s;
-  overflow: scroll;
-  z-index: 1;
-
-  &:not(.side-menu) {
-    .menu-header,
-    .menu-footer {
-      flex: 1 1 auto;
-    }
-  }
-
-  &:not(.side-menu:has(> .menu-snap)) {
-    flex-direction: column;
-  }
-
-  .menu-snap img {
-    max-height: 2.5rem;
-  }
-
-  .main-logo {
-    img {
-      width: 100%;
-    }
-  }
-
-  .menu-logo-alt {
-    display: none;
-  }
-
-  nav,
-  .nav {
-    font-size: 120%;
-
-    .item {
-      // NOTE: Modify this in implementations
-      /* border-radius: inherit; */
-      cursor: pointer;
-      @include before-content;
-
-      &::before {
-        background-color: currentColor;
-        opacity: 0;
-        transition: opacity 0.5s;
-      }
-
-      &.active::before {
-        opacity: 0.25;
-      }
-
-      &:hover::before {
-        opacity: 0.125;
-      }
-
-      .icon {
-        max-width: 2.5rem;
-      }
-
-      .label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  > .main-menu-toggle {
-    font-size: 150%;
-  }
-}
-
-// TODO: Add menu-snap offset for grid main-menu-container
-.menu-snap {
-  display: flex;
-  overflow: scroll;
-  flex-basis: auto;
-
-  .item {
-    padding: 0.125%;
-  }
-}
-
-// TODO: upgrade: side-menu to edge-menu, This slides menu from all edge of the screen
-.side-menu {
-  position: relative;
-  height: 100%;
-  grid-row: 1/-1;
-  flex-basis: calc(1% * var(--side-menu-width));
-  transition: flex-basis 0.5s, transform 0.5s, opacity 0.25s;
-  overflow: hidden;
-
-  /* side-menu scrollbar */
-  ::-webkit-scrollbar {
-    width: 0;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: currentColor;
-  }
-
-  .menu-header,
-  .menu-footer {
-    .title {
-      transition: height 0.5s linear 0.5s, opacity 0.5s linear 0.5s;
-    }
-  }
-
-  nav,
-  .nav,
-  .menu-container {
-    flex: 1 1 auto;
-    flex-direction: column;
-  }
-
-  .menu-container {
-    width: 100%;
-  }
-
-  #{selector.nest('nav, .nav','.item')} {
-    min-width: auto;
-  }
-}
-
-/* Mobile or PC (Tablet Excluded) */
-@media (max-width: 576px) or (min-width: 769px) {
-}
-
-/* Above Tablets/Mini PC */
-@media (min-width: 769px) {
-  .float-menu,
-  .full-menu {
-    nav,
-    .nav {
-      overflow-x: scroll;
-    }
-  }
-
-  #{selector.nest('input.main-menu-trigger:not(:checked)','~', '.side-menu > .menu-snap')} {
-    /* flex-basis: 25%; */
-  }
-
-  .main-menu-container {
-    &.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
-      --side-menu-width: 0;
-    }
-
-    &.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
-      --side-menu-width: calc(
-        var(--side-menu-width-lg-mini) /
-          ((var(--side-menu-width-lg-mini) / 100) + 1)
-      );
-
-      > .side-menu {
-        @include mini-side-menu-toggled;
-      }
-    }
-
-    &.flex {
-      input.main-menu-trigger {
-        &:checked {
-          ~ {
-            .side-menu:not(.mini) {
-              --side-menu-width: 0;
-              /* flex-basis: 0; */
-              // opacity: 0;
-              // padding: 0;
-            }
-            .side-menu.mini {
-              --side-menu-width: var(--side-menu-width-lg-mini);
-
-              &:not(:has(> .menu-snap)) {
-                --side-menu-width: calc(var(--side-menu-width-lg-mini) / 2);
-              }
-
-              @include mini-side-menu-toggled;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-/* Above Mobile */
-@media (min-width: 577px) {
-  .full-menu,
-  .float-menu {
-    .menu-container {
-      &,
-      nav,
-      .nav {
-        align-items: center;
-      }
-      nav,
-      .nav {
-        width: 100%;
-        overflow-x: scroll;
-      }
-    }
-  }
-
-  .main-menu-container {
-    &.grid:has(> .side-menu) {
-      --side-menu-width: calc(
-        var(--side-menu-width-lg) / ((var(--side-menu-width-lg) / 100) + 1)
-      );
-    }
-  }
-}
-
-/* Tablets/Mini PC (Tablet Only) */
-@media (min-width: 577px) and (max-width: 768px) {
-  // DEBUG: https://sass-lang.com/d/bogus-combinators
-  // input.main-menu-trigger:checked {
-  //   ~
-  //    {
-  //     @include unify-selector('.main-menu-container.grid', &) {
-  //       content: 'trigger in grid';
-  //     }
-  //   }
-  // }
-
-  .main-menu-container {
-    // WARN: Browser compatibility on :has pseudo-property
-    &.grid {
-      &:has(> input.main-menu-trigger:checked) {
-        > .float-menu .menu-container {
-          width: 100%;
-        }
-      }
-
-      &:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) {
-        --side-menu-width: calc(
-          var(--side-menu-width-md) / ((var(--side-menu-width-md) / 100) + 1)
-        );
-
-        > .side-menu {
-          @include mini-side-menu-toggled;
-        }
-      }
-    }
-
-    &.flex {
-      #{selector.nest('input.main-menu-trigger:checked','~','.float-menu .menu-container')} {
-        width: 100%;
-      }
-
-      #{selector.nest('input.main-menu-trigger:not(:checked)','~','.side-menu')} {
-        --side-menu-width: var(--side-menu-width-md);
-
-        &:not(:has(> .menu-snap)) {
-          --side-menu-width: calc(var(--side-menu-width-md) / 2);
-        }
-
-        @include mini-side-menu-toggled;
-      }
-    }
-  }
-}
-
-/* Tablet Below */
-@media (max-width: 768px) {
-  #{selector.nest('input.main-menu-trigger:checked','~', '.side-menu > .menu-snap')} {
-    /* flex-basis: 25%; */
-  }
-
-  input.main-menu-trigger {
-    &:not(:checked) {
-      ~ {
-        .full-menu,
-        .float-menu {
-          .menu-container {
-            nav,
-            .nav {
-              max-height: 0;
-              max-width: 0;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .float-menu {
-    .menu-container {
-      position: fixed;
-      bottom: 0;
-
-      &.right,
-      &:not(.left) {
-        right: 0;
-      }
-
-      &.left {
-        left: 0;
-      }
-    }
-  }
-}
-
-/* Mobile Below */
-@media (max-width: 576px) {
-  .side-menu {
-    --side-menu-width: var(--side-menu-width-sm);
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 80%;
-    transform: translateX(-100%);
-    opacity: 0;
-    box-shadow: 0 0 50px hsla(var(--black-hs), var(--black-l), 0.25);
-  }
-
-  .full-menu {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  // TODO: Move into main-menu-container
-  input.main-menu-trigger {
-    &:checked {
-      width: 100vw;
-      height: 100vh;
-      background-color: hsla(var(--black-hs), var(--black-l), 0.2);
-      z-index: 1;
-
-      ~ {
-        .main-menu {
-          --background-color: hsla(
-            var(--secondary-hs),
-            var(--secondary-l),
-            0.125
-          );
-          --color: var(--secondary-c);
-
-          &:not(:has(> .menu-snap), .h) {
-            flex-direction: column;
-          }
-
-          .menu-header {
-            order: -1;
-          }
-        }
-
-        .side-menu {
-          transform: translateX(0);
-          opacity: 1;
-        }
-
-        %blur-behind {
-          background-color: var(--background-color);
-          color: var(--color);
-          backdrop-filter: blur(0.75rem);
-        }
-
-        .float-menu {
-          .menu-container {
-            @extend %blur-behind;
-          }
-        }
-        .full-menu {
-          @extend %blur-behind;
-        }
-
-        .full-menu {
-          position: fixed;
-          transform: translateY(0);
-          opacity: 1;
-          font-size: 125%;
-
-          .menu-container {
-            background-color: unset;
-          }
-        }
-      }
-    }
-  }
-
-  #{selector.nest('.main-menu', 'nav, .nav')} {
-    overflow-y: scroll;
-  }
-
-  .main-menu-container {
-    #{selector.nest('input.main-menu-trigger:checked','~','.main-menu', selector.unify('nav, .nav,.menu-container',':not(.menu-snap)'))},
-    &.flex {
-      flex-direction: column;
-    }
-  }
-}

package/src/styles/polyfills.scss

@@ -1,9 +0,0 @@
-@supports not (gap: 1em) {
-  .nav-menu {
-    margin: -0.5em;
-  }
-
-  .nav-menu>* {
-    margin: 0.5em;
-  }
-}