Squashed commit of the following:

commit c634dc6 Author: Henner R Setyono <[email protected]> Date: Tue Mar 8 15:59:05 2022 +0700 13.0.0 - Added support for Edje Library 8.0 - Slightly changed the woocommerce styling to look better - Fixed cart dialog not opening when there's 2 cart widget in 1 page commit a1012ab Author: Henner R Setyono <[email protected]> Date: Fri Feb 11 20:18:43 2022 +0700 12.1.0 WORDPRESS - Minor styling fixes on some Gutenberg blocks. WOOCOMMERCE - [Widget] Added close button on Cart widget with offcanvas style. - [Single Product] Changed the tab styling to be on the left and has icon - [Single Product] Added support for responsive tab from Edje WC 4.1.0 - [My Account] Fixed the layout in login and register page. commit ad261c7 Author: Henner R Setyono <[email protected]> Date: Thu Feb 3 10:00:11 2022 +0700 12.0.1 - Changed the location of /dist folder - Minor CSS fix for Gutenberg
hrsetyono · Mar 8, 2022 · 1788495 · 1788495
1 parent c29e03c
commit 1788495
Show file tree

Hide file tree

Showing 35 changed files with 192 additions and 163 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -32,7 +32,7 @@ const myHeader = {
   stickyRow() {
     if (!(CSS.supports && CSS.supports('position', 'sticky'))) { return; }
 
-    const target = '.header--mid-row';
+    const target = '.header';
     const $elems = [].slice.call(document.querySelectorAll(target));
 
     // Initial check if already sticky
@@ -73,9 +73,9 @@ const myHeader = {
     const isStuck = currentOffset <= stickyOffset;
 
     if (isStuck) {
-      $elem.classList.add('header--stuck');
+      $elem.classList.add('is-stuck');
     } else {
-      $elem.classList.remove('header--stuck');
+      $elem.classList.remove('is-stuck');
     }
   },
 };

diff --git a/assets/sass/components/_header-footer.sass b/assets/sass/components/_header-footer.sass
@@ -1,73 +1,48 @@
-
 ///// MAIN HEADER /////
 
+.subheader,
 .header
-  position: relative
-  z-index: 100
-  background-color: var(--siteBgColor)
-  padding-top: var(--headerPadding, 0.5rem)
-  padding-bottom: var(--headerPadding, 0.5rem)
-
-  transition: var(--gTransition)
-
-
-.header--top-row,
-.header--top-row-mobile
-  --headerPadding: 0.25rem
-
-  background-color: var(--text)
-  font-size: var(--smallFontSize)
-  color: var(--textInvert)
-
-
-.header--mid-row
-  --headerPadding: 0
-
-  position: sticky
-  top: var(--adminBarHeight)
-
-  &.header--stuck
-    box-shadow: var(--shadow1)
-
-
-// RESPONSIVE NAV
-.header--top-row,
-.header--mid-row,
-.header--bot-row
   @media ($below-nav)
     display: none
 
-.header--top-row-mobile,
-.header--mid-row-mobile,
-.header--bot-row-mobile
+.subheader-mobile,
+.header-mobile
   @media ($above-nav)
     display: none
 
-
-// STICKY NAV
-.header--sticky
-  --top: 0px
-  --topAddon: 0px
-
+.header,
+.header-mobile  
   position: sticky
+  top: var(--adminBarHeight) 
   z-index: 100
-  top: calc( var(--top) + var(--topAddon) )
 
-  @media ($above-adminbar)
-    body.admin-bar &
-      --topAddon: var(--adminBarHeight)
+  background-color: var(--siteBgColor)
+  padding-top: 0
+  padding-bottom: 0
+  transition: var(--gTransition)
 
+  &.is-stuck
+    box-shadow: var(--shadow1)
+
+.subheader,
+.subheader-mobile
+  position: relative
+  z-index: 100
+  padding-top: 0.25rem
+  padding-bottom: 0.25rem
+  background-color: var(--text)
 
-.header--stuck
-  box-shadow: var(--shadow1)
+  font-size: var(--sFontSize)
+  color: var(--textInvert)
+  transition: var(--gTransition)
 
 
 ///// OFFCANVAS /////
 
 .offcanvas
   cursor: default
   position: fixed
-  z-index: 100
+  z-index: 200
   top: 0
   bottom: 0
   right: 0
@@ -79,7 +54,7 @@
   max-width: 420px
 
   color: var(--textInvert)
-  font-size: var(--mediumFontSize)
+  font-size: var(--mFontSize)
 
   box-shadow: var(--shadow3) 
   transform: translateX(100%)
@@ -95,6 +70,15 @@ body.has-active-offcanvas
   cursor: pointer
   -webkit-tap-highlight-color: rgba(white, 0)
 
+  &::before
+    content: ""
+    display: block
+    +absolute-fill
+    z-index: 190
+    background-color: rgba(--text, .5)
+
+    transition: var(--gTransition)
+
   .offcanvas
     visibility: visible
     opacity: 1
@@ -162,14 +146,14 @@ body.has-active-offcanvas
     padding-right: var(--gridRim)
 
 
-.footer--top-row
+.footer-top
   padding-top: 1.5rem
   padding-bottom: 1.5rem
 
-.footer--bottom-row
+.footer-bottom
   padding-top: 0.25rem
   padding-bottom: 0.25rem
-  font-size: var(--smallFontSize)
+  font-size: var(--sFontSize)
 
   .textwidget p
     margin-bottom: 0
@@ -185,15 +169,12 @@ body.has-active-offcanvas
   list-style-type: none
   transition: var(--gTransition)
 
-  .header--top-row &
+  .subheader &
     --navPadding: 0.25rem 0.5rem
     --navBgHover: var(--color1Dark)
 
-  .header--mid-row &
+  .header &
     --navPadding: 2rem 0.75rem
-
-  .header--mid-row.header--stuck &
-    --navPadding: 1.25rem 0.75rem
 
   .footer &
     --navPadding: 0.25rem 0.5rem
@@ -207,7 +188,7 @@ body.has-active-offcanvas
   .offcanvas &
     --navPadding: 0.5rem
     --navBgHover: rgba(255,255,255, .1)
-    --navFontSize: var(--largeFontSize)
+    --navFontSize: var(--lFontSize)
 
     display: flex
     flex-direction: column
@@ -219,29 +200,6 @@ body.has-active-offcanvas
 .menu-item
   position: relative
 
-  > a::before
-    content: ""
-    display: block
-    visibility: hidden
-    opacity: 0
-
-    position: absolute
-    bottom: 0
-    left: 10px
-    right: 10px
-    height: 4px
-    background-color: var(--color1)
-
-    transition: var(--gTransition)
-
-    .footer &
-      display: none
-
-  > a:hover::before
-    visibility: visible
-    opacity: 1
-
-
 .menu-item > a
   display: flex
   align-items: center
@@ -253,6 +211,29 @@ body.has-active-offcanvas
   font-weight: var(--hFontWeight)
   color: inherit
 
+  &:not([href])
+    cursor: default
+
+  .header &
+    &::before
+      content: ""
+      display: block
+      visibility: hidden
+      opacity: 0
+
+      position: absolute
+      bottom: 0
+      left: 10px
+      right: 10px
+      height: 4px
+      background-color: var(--color1)
+
+      transition: var(--gTransition)
+
+    &:hover::before
+      visibility: visible
+      opacity: 1
+
   .footer &
     letter-spacing: 0.025em
     text-transform: uppercase
@@ -267,9 +248,13 @@ body.has-active-offcanvas
     background-color: rgba(white, .2)
     text-decoration: underline
 
+    &:not([href])
+      text-decoration: none
+
   .offcanvas &
     background-color: var(--navBgHover, #{rgba(--color1, .3)})
     opacity: .75
+
 
 
 // active state

diff --git a/assets/sass/components/_post-comments.sass b/assets/sass/components/_post-comments.sass
@@ -205,6 +205,22 @@ p.form-submit
 
 // Edje Toolbar
 .h-editor .toolbar
+  margin-bottom: 0.5rem
+  border: none
+
+  .tool-separator
+    width: 0.25rem
+    margin: 0
+    border: none
+    background-color: var(--siteBgColor)
+
   .tool-pre,
   .tool-code
-    display: none
+    display: none
+
+.h-editor
+  border-left: none
+
+  textarea
+    border: none
+    border-radius: var(--gRadius)
diff --git a/assets/sass/components/_post.sass b/assets/sass/components/_post.sass
@@ -9,7 +9,7 @@
   margin-top: 1rem
 
   color: var(--textDim)
-  font-size: var(--smallFontSize)
+  font-size: var(--sFontSize)
 
   > *
     display: inline-block
@@ -159,7 +159,7 @@
 // Author text
 .author-bio
   grid-column: 2 / span 1
-  font-size: var(--smallFontSize)
+  font-size: var(--sFontSize)
 
   * + *
     margin-top: 0.5rem
@@ -187,7 +187,7 @@
   grid-column: 2 / span 1
 
   margin: 0.5rem -0.5rem 0
-  font-size: var(--smallFontSize)
+  font-size: var(--sFontSize)
 
   a
     display: flex
@@ -287,7 +287,7 @@
   margin-bottom: var(--groupSpacing)
 
   color: var(--text)
-  font-size: var(--smallFontSize)
+  font-size: var(--sFontSize)
 
   a,
   select