Merge pull request #9 from rakeshAlgo/nav-menu-ui

Nav menu Styling Completed

Author: amarantha-k

src/css/component-frame.css

@@ -1,9 +1,10 @@
 .component-frame {
   /* rgba(87, 160, 255, 1) */
-  /* background: rgba(var(--color-blue-rgb), 0.07); */
+  background: var(--color-brand-gray6);
   padding: 12px 30px 12px 15px;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .frame-body {
@@ -13,7 +14,8 @@
 
 .frame-body .title {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
   font-weight: var(--weight-semibold);
   color: var(--color-brand-gray1);
 }

src/css/contributor.css

@@ -1,5 +1,5 @@
 .contributor-list-box {
-  display: flex;
+  /* display: flex; */
   align-items: center;
   flex-wrap: wrap;
   margin: 15px 0 0;

src/css/doc.css

@@ -142,12 +142,16 @@
 .doc caption {
   font-size: 1rem;
   font-weight: var(--weight-semibold);
-  letter-spacing: -0.025em;
+  /* letter-spacing: -0.025em; */
   line-height: 1.2;
   margin-bottom: 0.75rem;
   color: var(--color-brand-gray3);
 }
 
+.ulist div.title {
+  margin-left: -10px;
+}
+
 .doc hr {
   margin: 1rem 0;
   border: 0 solid var(--color-border);

src/css/main.css

@@ -133,6 +133,7 @@ main p {
 
   .article-header {
     margin-bottom: 0;
+    margin-top: var(--base-space);
     align-items: flex-start;
   }
 }

src/css/nav.css

@@ -2,7 +2,7 @@
   background-color: var(--color-brand-gray7);
   position: fixed;
   width: inherit;
-  overflow-y: scroll;
+  overflow-y: auto;
   font-size: 1rem;
   line-height: 24px;
 }
@@ -23,6 +23,8 @@
     margin-bottom: 1.5rem;
     height: var(--height-nav);
     z-index: var(--z-index-nav);
+    border-left: 2px solid #eee;
+    border-right: 2px solid #eee;
   }
 }
 
@@ -43,18 +45,21 @@
   display: flex;
   word-break: break-all;
   align-items: center;
+  font-size: 20px;
+  line-height: 28px;
+  font-family: "Open Sans", sans-serif;
+  color: var(--color-brand-gray1);
+  font-weight: var(--weight-semibold);
 }
 
 .nav-line .fas {
   color: var(--color-brand-gray3);
-}
-
-.nav-item.is-active .nav-line[data-depth="0"] .fas {
-  color: var(--color-brand-blue);
+  display: none;
 }
 
 .nav-menu .nav-text {
-  margin-left: 0.75rem;
+  /* margin-left: 0.75rem; */
+  margin-left: 0;
 }
 
 .nav-menu a.nav-link {
@@ -73,6 +78,27 @@
   padding: 0;
 }
 
+.nav-menu .nav-list .nav-list .nav-line {
+  padding-left: 1.65rem;
+}
+
+.nav-menu .nav-list .nav-list .nav-line[data-depth="2"] {
+  padding-left: 3rem;
+}
+
+.nav-menu .nav-list .nav-list .nav-line[data-depth="3"] {
+  padding-left: 4.2rem;
+}
+
+.nav-menu .nav-list .nav-list .nav-line[data-depth="4"] {
+  padding-left: 5.5rem;
+}
+
+.nav-menu .nav-list li a {
+  font-size: 0.875rem;
+  font-weight: var(--weight-normal);
+}
+
 .nav-menu > .nav-list {
   /* margin: 1rem 1.875rem; */
   margin: 1.5rem 0;
@@ -84,8 +110,8 @@
   margin-bottom: 0.625rem;
   */
   margin-bottom: 0.75rem;
-  margin-left: 3.6875rem;
-  border-left: 1px solid var(--color-brand-gray5);
+  /* margin-left: 1rem; */
+  /* border-left: 1px solid var(--color-brand-gray5); */
 }
 
 /* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-list {
@@ -123,25 +149,53 @@
 } */
 
 .nav-line[data-depth="0"] {
-  padding: 0.625rem 1.875rem;
+  padding: 0.625rem 1.25rem;
   color: var(--brand-color-gray2);
 }
 
-.nav-item.is-active .nav-line[data-depth="0"] {
-  background: rgba(var(--color-gray-rgb), 0.06);
+/* .nav-item.is-active .nav-line[data-depth="0"] {
+  background: #4287D60F;
+  margin-bottom: 0.625rem;
+  border-right: 4px solid rgba(66, 135, 214, 0.44);
+} */
+
+/* .nav-item.is-active > .nav-line[data-depth="0"], */
+.nav-item.open > .nav-line[data-depth="0"],
+.nav-item.is-current-path.is-active-depth-2:not(.is-active) > .nav-line,
+.nav-item.is-current-page > .nav-line {
+  background: #4287d60f;
   margin-bottom: 0.625rem;
+  border-right: 4px solid rgba(66, 135, 214, 0.44);
 }
 
 .nav-item.is-active .nav-line[data-depth="0"] .nav-text {
-  color: var(--color-brand-blue);
+  /* color: var(--color-brand-blue); */
   font-weight: var(--weight-semibold);
 }
 
+.nav-item.is-active .nav-line[data-depth="0"] .fas {
+  color: var(--color-brand-blue);
+}
+
 .nav-menu .nav-item.is-current-page > .nav-line > a.nav-link {
   color: var(--color-text);
   font-weight: var(--weight-medium);
 }
 
+.nav-item.is-current-path.is-active[data-depth='1'] .in-toggle[data-depth='1'],
+.nav-item.is-current-page.is-active[data-depth='1'] .in-toggle[data-depth='1'],
+.nav-item.is-current-path.is-active[data-depth='2'] .in-toggle[data-depth='2'],
+.nav-item.is-current-page.is-active[data-depth='2'] .in-toggle[data-depth='2'],
+.nav-item.is-current-path.is-active[data-depth='3'] .in-toggle[data-depth='3'],
+.nav-item.is-current-page.is-active[data-depth='3'] .in-toggle[data-depth='3'] {
+  transform: rotate(90deg);
+}
+
+.nav-menu .nav-item.is-active[data-depth='2'] > .nav-line .nav-link {
+  /* color: var(--color-brand-blue); */
+  font-weight: var(--weight-semibold);
+}
+
 .nav-menu .nav-toggle {
   background: none;
   border: 0;
@@ -190,24 +244,29 @@ html.is-clipped--nav {
 }
 
 .main-nav-parent {
-  font-size: 16px;
+  font-size: var(--font-small);
   line-height: 20px;
-  color: var(--color-brand-gray2);
+  color: var(--color-brand-blue);
   display: flex;
-  margin: 10px 0;
+  margin: 15px 0 -20px;
   text-decoration: none;
   align-items: center;
   flex-wrap: wrap;
-  background: rgba(var(--color-blue-rgb), 0.06);
+  /* background: rgba(var(--color-blue-rgb), 0.06);
   padding: 10px 0;
   border-top: 1px solid var(--color-brand-gray5);
-  border-bottom: 2px solid var(--color-brand-gray5);
+  border-bottom: 2px solid var(--color-brand-gray5); */
 }
 
 .main-nav-parent .back-to-menu {
-  padding: 0 40px;
+  padding: 0 22px;
   width: 100%;
-  background: url(../img/back-arrow.png) no-repeat 20px center;
+  /* background: url(../img/back-arrow.png) no-repeat 20px center; */
+  cursor: pointer;
+}
+
+.main-nav-parent .back-to-menu .fas {
+  margin-right: 8px;
 }
 
 .main-nav-parent .nav-text {
@@ -224,7 +283,7 @@ html.is-clipped--nav {
 }
 
 .in-toggle {
-  display: none;
+  /* display: none; */
   cursor: pointer;
   /* margin-right: 10px; */
 }
@@ -233,16 +292,19 @@ html.is-clipped--nav {
   display: none;
 }
 
-.nav-line[data-depth="1"],
-.nav-line[data-depth="2"] {
+.nav-menu .nav-item .nav-line {
   display: flex;
-  justify-content: flex-end;
-  padding: 0.625rem 1rem;
-  flex-direction: row-reverse;
+  /* justify-content: flex-end; */
+  padding: 0.625rem 1.375rem;
+  /* flex-direction: row-reverse; */
 }
 
 .nav-line[data-depth="1"] .nav-link {
-  color: var(--color-brand-gray4);
+  /* color: var(--color-brand-gray4); */
+  color: var(--color-brand-black);
+  font-size: var(--font-base);
+  line-height: var(--line-height-base);
+  font-weight: var(--weight-semibold);
 }
 
 .is-active[data-depth='0'] .is-active > .nav-line[data-depth="1"] {
@@ -258,12 +320,13 @@ html.is-clipped--nav {
   transform: rotate(90deg);
 } */
 
-.nav-menu .nav-item.is-active[data-depth='1'] .nav-list {
+/* .nav-menu .nav-item.is-active[data-depth='1'] .nav-list {
   margin-left: 1.5rem;
-}
+} */
 
 .nav-menu .nav-item[data-depth='2'] {
-  margin: 0 8px 8px 0;
+  /* margin: 0px 0px 8px 0px; */
+  margin-bottom: 8px;
 }
 
 .nav-menu .nav-item.is-active[data-depth='1'] > .nav-line .nav-link {
@@ -274,18 +337,31 @@ html.is-clipped--nav {
   color: var(--color-brand-gray1);
 }
 
-.nav-menu .nav-item.is-active[data-depth='2'] > .nav-line .nav-link {
-  color: var(--color-brand-blue);
-  font-weight: 900;
-}
-
 .nav-item[data-depth='1'] .in-toggle {
-  background: url(../img/back-arrow.png) no-repeat center center;
-  transform: rotate(180deg);
-  width: 20px;
-  height: 20px;
-  margin-left: 5px;
-}
+  position: relative;
+  /* left: -5px; */
+  width: 0;
+  height: 0;
+  margin-right: 10px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 10px solid var(--color-brand-gray5);
+}
+
+/* .nav-item[data-depth='1'] .in-toggle::after {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 8px solid red;
+  top: 0;
+  position: absolute;
+  content: '';
+  cursor: pointer;
+  right: -15px;
+  bottom: 0;
+  margin: auto;
+} */
 
 @media screen and (min-width: 769px) {
   .nav-control {

src/css/table.css

@@ -118,12 +118,13 @@ table.table-tutorial tr td:last-child {
     /* margin-top: 2.5rem; */
   }
 
-  table.tableblock .title {
+  table.tableblock caption.title {
     position: absolute;
     left: 0;
     top: -30px;
   }
 
+  div + table.tableblock,
   div.paragraph + table.tableblock,
   div.ulist + table.tableblock,
   table.tableblock + table.tableblock {

src/css/vars.css

@@ -64,8 +64,8 @@
   --hljs-string: #295d1e;
   --hljs-number: #0711ba;
   /* --height-navbar: 4rem; */
-  --height-spacer: 1.3rem;
-  --height-navbar: 6.09rem;
+  --height-spacer: 1rem;
+  --height-navbar: 6rem;
   --height-to-body: calc(var(--height-navbar) + var(--height-spacer));
   --height-min-body: calc(100vh - var(--height-to-body));
   --height-nav: calc(var(--height-min-body) + var(--height-spacer));
@@ -97,6 +97,7 @@
   /* New  design font style */
 
   --font-base: 1rem; /* ~16px */
+  --font-small: 0.875rem; /* ~14px */
   --labels-font-size: 0.75rem; /* ~12px */
   --labels-line-height: 1;
 

src/js/01-nav.js

@@ -97,6 +97,7 @@
         otherNavs[i].classList.add('is-inactive')
       }
     }
+    this.classList.toggle('open')
     this.classList.toggle('is-active')
   }
 
@@ -140,6 +141,8 @@
     return el
   }
 
+  // has children in li
+  // $('ul.nav-list li.nav-item ul.nav-list .nav-item').has('ul.nav-list').addClass('has-children')
   function concealEvent (e) {
     e.stopPropagation()
   }