forstok-ui-lib 6.0.3 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "6.0.3",
+  "version": "6.1.0",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/stylesheets/shares.styles.ts

@@ -3460,9 +3460,9 @@ export const NavList = styled.ul`
   ${clearList}
   position: fixed; 
   overflow: auto;
-  height: calc(100vh - 50px);
-  width: 256px;
-  padding: 20px 1em 0 1.275em;
+  height: calc(100vh - 48px);
+  width: 187px;
+  padding: .5rem .5rem 0;
   @media only screen and (min-width: 1366px) {
     width: 220px;
   }
@@ -3470,68 +3470,170 @@ export const NavList = styled.ul`
     width: 80%;
   }
 `
+export const NavMobileHeaderWrapper = styled.div` 
+  display: none;
+  grid-template-columns: auto 15px;
+  margin-bottom: 15px;
+  @media (min-width: 1280px) {
+    margin-bottom: 25px;
+  }
+`
+export const NavContainerStyles = css`
+  display: none;
+  background-color: var(--pri-clr-bg);
+  @keyframes navleftslide {
+    0% { 
+      left: -150px; 
+    }
+    100% { 
+      left: 0px; 
+    }
+  }
+  @media only screen and (min-width: 1280px) {
+    position: relative;
+    display: inline-grid;
+    border-right: 1px solid var(--lay-clr-ln);
+    min-height: calc(100vh - 48px);
+  }
+  @media only screen and (max-width: 1279px) {
+    &.mobile-shown {
+      top: 0px;
+      display: block;
+      position: fixed; 
+      z-index: 11;
+      ${NavMobileOverlay} {
+        display: block;
+      }
+      ${NavMobileHeaderWrapper} {
+        display: grid;
+      }
+      ${NavList} {
+        animation: navleftslide .15s ease;
+        background: var(--pri-clr-bg);
+        height: 100%;
+        z-index: 102;
+      }
+    }
+  }
+`
+
+export const NavContainer = styled.nav`
+  ${NavContainerStyles}
+`
 export const NavMainItem = styled.li<{ $activated?: boolean }>` 
+  line-height: 1.25rem;
+  font-style: normal;
+  font-weight: 400;
+  color: var(--nav-clr);
   position: relative;
-  margin-bottom: 15px;
+  margin-bottom: .35rem;
   ._refCollapseNav {
     cursor: pointer;
     &.is-active {
-      font-weight: 600;
+      font-weight: 500;
+      color: rgba(28, 32, 36, 1)
     }
     &::after {
       position: absolute;
       content: '';
-      right: 3px;
-      top: 4px;
+      right: 10px;
+      top: 14px;
       padding: 2px;
       border-style: solid;
-      border-width: 0 2px 2px 0;
+      border-width: 0 1px 1px 0;
       transform: rotate(-45deg);
       margin-bottom: 2px;
+      border-color: var(--nav-clr);
     }
-    &:hover {
-      color: var(--sec-clr-lnk__hvr);
-    }
-  }
-  @media only screen and (max-width: 767.9px) {
-    margin-bottom: 20px;
   }
-  ${({ $activated }:{ $activated?: boolean }) => {
-    if ($activated) {
-      return css` 
-        > div > a {
-          font-weight: 600;
-          font-size: 14px;
-        } 
-      `
+  ${({ $activated }) => $activated && css`
+    > div {
+      background-color: var(--nav-clr-bg__hvr);
+      border-radius: var(--nav-rd);
     }
-  }}
+    > div > a {
+      &, &:hover {
+        color: var(--pri-clr-lnk__hvr) !important;
+      }
+    } 
+  `}
 `
-export const NavMainItemWrapper = styled.div` 
-  display: inline-grid;
-  grid-gap: 6px;
-  align-items: end;
-  font-size: 14px;
+export const NavChildLine = styled.hr`
+  border-top: 1px solid var(--sec-clr-ln);
+  margin: 0;
+  height: 0px;
+  border-bottom: 0;
 `
-export const NavChildItem = styled.div<{ $activated?: boolean, $mode?: string }>`
+export const NavChildItem = styled.div<{ $activated?: boolean, $mode?: 'counter' }>`
   display: grid;
   position: relative;
   grid-gap: 6px;
-  margin-bottom: 13px;
-  align-items: end;
+  margin-left: 1.5rem;
+  margin-top: .125rem;
+  margin-bottom: .125rem;
+  padding-top: .25rem;
+  padding-bottom: .25rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  font-weight: 400;
+  align-items: center;
+  height: auto;
+  min-height: 32px;
+  > a, > span  {
+    color: var(--nav-clr);
+  }
+  &:hover {
+    background-color: var(--nav-clr-bg__hvr);
+    border-radius: var(--nav-rd);
+    > a, > span {
+      &, &:hover {
+        color: var(--nav-clr);
+      } 
+    }
+  }
   .counter > span {
     font-size: 11px;
     padding: 2px 4px;
     position: absolute; 
     background-color: var(--mt-clr-bg__fc);
     border-radius: var(--ter-rd);
-    top: 0;
-    right: 0;
+    top: 50%;
+    right: 8px;
+    line-height: 11px;
+    transform: translateY(-50%);
   }
-  @media only screen and (max-width: 767px) {
-    margin-bottom: 18px;
+  ${({ $activated }) => $activated && css`
+    background-color: var(--nav-clr-bg__hvr);
+    border-radius: var(--nav-rd);
+    > a, > span {
+      &, &:hover {
+        color: var(--pri-clr-lnk__hvr) !important;
+      }
+    }
+  `}
+  ${({ $mode }) => $mode === 'counter' && css`
+    grid-template-columns: auto 20px;
+  `}
+`
+export const NavMainItemWrapper = styled.div` 
+  display: grid;
+  grid-template-columns: 15px auto;
+  grid-gap: .5rem;
+  align-items: center;
+  padding-top: .375rem;
+  padding-bottom: .375rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  &:hover {
+    background-color: var(--nav-clr-bg__hvr);
+    border-radius: var(--nav-rd);
+    > a {
+      &, 
+      &:hover {
+        color: var(--nav-clr);
+      }
+    }
   }
-  ${getNavChildItemModFunc}
 `
 export const TotalLabel = styled.span`
   letter-spacing: 1.25px;