5.4.0

CSS - Update to Edje 3.1 - All colors are stored in `$h-colors` and will be outputted as CSS Variable. GUTENBERG - Changed Table block CSS due to them wrapping the table in `<figure>`
hrsetyono · Sep 3, 2019 · df3bbe4 · df3bbe4
1 parent b9f97b0
commit df3bbe4
Show file tree

Hide file tree

Showing 22 changed files with 275 additions and 210 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
diff --git a/assets/css/framework.css b/assets/css/framework.css
diff --git a/assets/css/admin-gutenberg.css → assets/css/my-block-editor.css b/assets/css/admin-gutenberg.css → assets/css/my-block-editor.css
@@ -1,26 +1,27 @@
-:root{--main: #1976d2;--mainRGB: 25, 118, 210
-      ;--main-dark: #0e4377;--main-darkRGB: 14, 67, 119
-      ;--main-light: #bbdefb;--main-lightRGB: 187, 222, 251
-      ;--sub: #b0bec5;--subRGB: 176, 190, 197
-      ;--sub-dark: #90a4ae;--sub-darkRGB: 144, 164, 174
-      ;--sub-light: #eceff1;--sub-lightRGB: 236, 239, 241
-      ;--red: #d32f2f;--redRGB: 211, 47, 47
+/*!
+  EDJE Functional Sass v3.0.0
+  Documentation: https://github.com/hrsetyono/edje/wiki
+*/:root{--red: #d32f2f;--redRGB: 211, 47, 47
+      ;--red-dark: #b71c1c;--red-darkRGB: 183, 28, 28
       ;--red-light: #ffcdd2;--red-lightRGB: 255, 205, 210
-      ;--yellow: #ffee58;--yellowRGB: 255, 238, 88
-      ;--yellow-light: #fff9c4;--yellow-lightRGB: 255, 249, 196
       ;--orange: #fB8c00;--orangeRGB: 251, 140, 0
+      ;--orange-dark: #e65100;--orange-darkRGB: 230, 81, 0
       ;--orange-light: #ffe0b2;--orange-lightRGB: 255, 224, 178
+      ;--yellow: #ffee58;--yellowRGB: 255, 238, 88
+      ;--yellow-dark: #ffd600;--yellow-darkRGB: 255, 214, 0
+      ;--yellow-light: #fff9c4;--yellow-lightRGB: 255, 249, 196
       ;--green: #4caf50;--greenRGB: 76, 175, 80
+      ;--green-dark: #2e7d32;--green-darkRGB: 46, 125, 50
       ;--green-light: #c8e6c9;--green-lightRGB: 200, 230, 201
       ;--blue: #1976d2;--blueRGB: 25, 118, 210
+      ;--blue-dark: #1565c0;--blue-darkRGB: 21, 101, 192
       ;--blue-light: #bbdefb;--blue-lightRGB: 187, 222, 251
-      ;--black: #000;--blackRGB: 0, 0, 0
-      ;--white: #fff;--whiteRGB: 255, 255, 255
       ;--gray: #b0bec5;--grayRGB: 176, 190, 197
-      ;--gray-light: #eceff1;--gray-lightRGB: 236, 239, 241
       ;--gray-dark: #90a4ae;--gray-darkRGB: 144, 164, 174
-      ;--text: #222;--textRGB: 34, 34, 34
+      ;--gray-light: #eceff1;--gray-lightRGB: 236, 239, 241
+      ;--black: #000;--blackRGB: 0, 0, 0
+      ;--white: #fff;--whiteRGB: 255, 255, 255
+      ;--main: var(--blue);--main-dark: var(--blue-dark);--main-light: var(--blue-light);--sub: var(--gray);--sub-dark: var(--gray-dark);--sub-light: var(--gray-light);--text: #222;--textRGB: 34, 34, 34
       ;--passive: #888;--passiveRGB: 136, 136, 136
-      ;--header: #222;--headerRGB: 34, 34, 34
-      ;--body: #fff;--bodyRGB: 255, 255, 255
+      ;--header: var(--text);--body: #fff;--bodyRGB: 255, 255, 255
       }
diff --git a/assets/css/shop.css b/assets/css/shop.css
diff --git a/assets/js/admin-gutenberg.js → assets/js/my-block-editor.js b/assets/js/admin-gutenberg.js → assets/js/my-block-editor.js
diff --git a/assets/sass/_app-gutenberg.sass b/assets/sass/_app-gutenberg.sass
@@ -9,18 +9,6 @@
 ///// GENERAL
 
 article
-  letter-spacing: 0.01 * $font-size
-
-  h1, h2, h3, h4, h5, h6
-    +h( mb1_5 )
-
-  p a,
-  li a
-    +h( bb1-solid )
-
-    &:hover
-      +h( bg-black_10 )
-
   p,
   ul,
   ol,
@@ -29,6 +17,10 @@ article
   table,
   figure
     +h( mb1_5 )
+
+  p a,
+  li a
+    +h( td-u )
 
   ul, ol
     +h( pl1_5 )
@@ -42,12 +34,14 @@ article
   img
     +h( brad )
 
-  h1, h2, h3, h4, h5, h6
-    +h( clear-both )
 
-
-// Main wrapper
 .the-content
+  letter-spacing: 0.01 * $font-size
+
+  h1, h2, h3, h4, h5, h6
+    +h( mb1_5 clear-both )
+    color: var(--textColor)
+
 
   // all woocommerce page become alignwide
   > .woocommerce
@@ -67,15 +61,17 @@ article
     padding-right: $grid-rim
     padding-left: $grid-rim
 
-
 // Alignments
-.alignright
+.alignright,
+.has-text-align-right
   +h( ta-right )
 
-.alignleft
+.alignleft,
+.has-text-align-left
   +h( ta-left )
 
-.aligncenter
+.aligncenter,
+.has-text-align-center
   +h( ta-center )
 
 .alignwide
@@ -152,12 +148,6 @@ article
   +h( relative z2 c-white )
   width: $content-width
 
-  h1, h2, h3, h4, h5, h6
-    +h( c-white )
-
-  p, li
-    +h( fs-m )
-
   @media (below($grid-max-width))
     padding-right: $grid-rim
     padding-left: $grid-rim
@@ -214,7 +204,7 @@ p.has-background
 
 .wp-block-quote
   +h( p1 )
-  border-left: 4px solid $font-color
+  border-left: 4px solid var(--text)
 
   p,
   li
@@ -230,21 +220,21 @@ p.has-background
   &.is-style-large
     +h( fs-h4 ta-center )
     border-left: none
-    border-top: 3px solid $font-color
-    border-bottom: 3px solid $font-color
+    border-top: 3px solid var(--text)
+    border-bottom: 3px solid var(--text)
 
     cite
       +h( fs-body )
 
   &[style="text-align:right"],
   &[style="text-align: right"]
     border-left: none
-    border-right: 4px solid $font-color
+    border-right: 4px solid var(--text)
 
   &[style="text-align:center"],
   &[style="text-align: center"]
     border-left: none
-    border-top: 4px solid $font-color
+    border-top: 4px solid var(--text)
 
 
 ///// PULLQUOTE
@@ -460,7 +450,8 @@ p.has-background
 
 ///// TABLE
 
-.wp-block-table
+table.wp-block-table,
+.wp-block-table table
   +h( w100p bg-white )
   --tableBorder: var(--black)
   --tableHeader: var(--gray-light)
@@ -480,6 +471,13 @@ p.has-background
   td
     +h( pv0_5 ph1 b1-solid bc-black_10 )
 
+  //
+  @media ($below-s)
+    td
+      +h( pv0_25 ph0_5 )
+
+// Table styles
+.wp-block-table
   &.is-style-stripes
     tr:nth-child(even)
       background-color: var(--tableBg)
@@ -489,26 +487,21 @@ p.has-background
     table-layout: fixed
 
   // default color palette 
-  &.has-subtle-pale-green-background-color
+  .has-subtle-pale-green-background-color
     --tableBorder: var(--green)
     --tableHeader: var(--green-light)
     --tableBg: rgba(var(--greenRGB), .1)
 
-  &.has-subtle-pale-blue-background-color
+  .has-subtle-pale-blue-background-color
     --tableBorder: var(--blue)
     --tableHeader: var(--blue-light)
     --tableBg: rgba(var(--blueRGB), .1)
 
-  &.has-subtle-pale-pink-background-color
+  .has-subtle-pale-pink-background-color
     --tableBorder: var(--red)
     --tableHeader: var(--red-light)
     --tableBg: rgba(var(--redRGB), .1)
 
-  //
-  @media ($below-s)
-    td
-      +h( pv0_25 ph0_5 )
-
 
 ///// BUTTON
 

diff --git a/assets/sass/_app-nav.sass b/assets/sass/_app-nav.sass
@@ -187,7 +187,7 @@ body.has-active-cart
     content: ""
     +h( absolute top100p )
     right: 10px
-    +triangle( s, $main, 12px, 5px)
+    +triangle( s, var(--main), 12px, 5px)
 
   a:hover &
     +h( v-visible o100 )

diff --git a/assets/sass/_fw-blog.sass b/assets/sass/_fw-blog.sass
@@ -71,8 +71,8 @@ $output-infinite-scroll: false
 
 .blog-nav
   +h( d-flex fw-wrap mv2 pv0_5 )
-  border-bottom: 2px solid $font-color
-  border-top: 1px solid $gray
+  border-bottom: 2px solid var(--text)
+  border-top: 1px solid var(--gray)
 
   a
     +h( d-inline-block pv0_25 ph0_5 )

diff --git a/assets/sass/_fw-jetpack.scss b/assets/sass/_fw-jetpack.scss
@@ -29,7 +29,7 @@ $social-logos: (
 .sharedaddy {
   margin: 2em 0 2em;
   padding-top: 2em;
-  border-top: 1px solid $gray;
+  border-top: 1px solid var(--gray);
 
   .share-end {
     display: none;