Merge pull request #4 from peiche/v1.0.6

V1.0.6
peiche · Apr 21, 2017 · aa2041e · aa2041e
2 parents 005b1ea + f815ac4
commit aa2041e
Show file tree

Hide file tree

Showing 18 changed files with 125 additions and 137 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
 
+**1.0.6 - 4/21/2017**
+- Replaced Transformicons with SVG.
+- Added Morpheus SVG for navbar icon animation.
+
 **1.0.5 - 4/12/2017**
 - Fixed link styles for mini menu, overlay, and post/page headers.
 - Fixed featured content slider styles.

diff --git a/README.md b/README.md
@@ -113,9 +113,9 @@ All other resources are licensed as follows:
 
 * [Font Awesome SVG PNG](https://github.com/encharm/Font-Awesome-SVG-PNG) - [MIT](https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/LICENSE)
 * [Headroom](http://wicky.nillia.ms/headroom.js/) - [MIT](https://github.com/WickyNilliams/headroom.js/blob/master/LICENSE)
-* [Transformicons](http://www.transformicons.com/) - [MIT](https://github.com/grayghostvisuals/transformicons/blob/master/LICENSE.md)
 * [FlexSlider](http://flexslider.woothemes.com) - [GPL v2.0 or later](https://github.com/woocommerce/FlexSlider/blob/master/LICENSE.md)
 * [Bourbon Neat](http://neat.bourbon.io/) - [MIT](https://github.com/thoughtbot/neat/blob/master/LICENSE.md)
+* [Morpheus SVG](http://alexk111.github.io/SVG-Morpheus/) - [MIT](https://github.com/alexk111/SVG-Morpheus/blob/master/LICENSE)
 
 ## Inspiration
 

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -4,19 +4,25 @@
 
 ( function( $ ) {
 	var $window   = $( window ),
-			$document = $( document ),
-			resizeTimer,
-			toolbarHeight,
-			siteHeader = $( '.site-header' ),
-			menuOverlay = $( '.overlay--menu' ),
-			searchOverlay = $( '.overlay--search' ),
-			chapterOverlay = $( '.overlay--chapter' ),
-			body = $( 'body' ),
-			menuToggle = $( '.menu-toggle' ),
-			searchToggle = $( '.search-toggle' ),
-			chapterToggle = $( '.chapter-toggle' ),
-			button = '<button class="showsub-toggle" aria-expanded="false">' + menuToggleText.icon + '<span class="screen-reader-text">' + menuToggleText.open + '</span></button>',
-			headroom;
+		$document = $( document ),
+		resizeTimer,
+		siteHeader = $( '.site-header' ),
+		menuOverlay = $( '.overlay--menu' ),
+		searchOverlay = $( '.overlay--search' ),
+		chapterOverlay = $( '.overlay--chapter' ),
+		body = $( 'body' ),
+		menuToggle = $( '.menu-toggle' ),
+		searchToggle = $( '.search-toggle' ),
+		chapterToggle = $( '.chapter-toggle' ),
+		button = '<button class="showsub-toggle" aria-expanded="false">' + menuToggleText.icon + '<span class="screen-reader-text">' + menuToggleText.open + '</span></button>',
+		headroom,
+		morpheusConfig = {
+			duration: 200,
+			rotation: 'none'
+		},
+		menuIcon = new SVGMorpheus( '#svg-icon-menu-icon', morpheusConfig ),
+		searchIcon = new SVGMorpheus( '#svg-icon-search-icon', morpheusConfig ),
+		bookmarkIcon = $( '#svg-icon-bookmark-icon' ).length > 0 ? new SVGMorpheus( '#svg-icon-bookmark-icon', morpheusConfig ) : undefined;
 
 	/**
 	 * Header
@@ -58,6 +64,8 @@
 			$this.toggleClass( 'toggle-on' );
 			$this.attr( 'aria-expanded', 'false' == $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' );
 
+			menuIcon.to( $this.hasClass( 'toggle-on' ) ? 'svg-icon-menu-close' : 'svg-icon-menu' );
+
 			searchToggle.toggleClass( 'hide' );
 			chapterToggle.toggleClass( 'hide' );
 		} );
@@ -74,6 +82,8 @@
 			$this.toggleClass( 'toggle-on' );
 			$this.attr( 'aria-expanded', 'false' == $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' );
 
+			searchIcon.to( $this.hasClass( 'toggle-on' ) ? 'svg-icon-search-close' : 'svg-icon-search' );
+
 			menuToggle.toggleClass( 'hide' );
 			chapterToggle.toggleClass( 'hide' );
 
@@ -95,6 +105,8 @@
 			$this.toggleClass( 'toggle-on' );
 			$this.attr( 'aria-expanded', 'false' == $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' );
 
+			bookmarkIcon.to( $this.hasClass( 'toggle-on' ) ? 'svg-icon-bookmark-close' : 'svg-icon-bookmark' );
+
 			menuToggle.toggleClass( 'hide' );
 			searchToggle.toggleClass( 'hide' );
 		} );
@@ -175,6 +187,7 @@
 			chapterOverlay.removeClass( 'show' ).resize();
 			menuToggle.removeClass( 'hide' );
 			searchToggle.removeClass( 'hide' );
+			bookmarkIcon.to( 'svg-icon-bookmark' );
 		} );
 	}
 
@@ -189,6 +202,7 @@
 			menuOverlay.removeClass( 'show' ).resize();
 			searchToggle.removeClass( 'hide' );
 			chapterToggle.removeClass( 'hide' );
+			menuIcon.to( 'svg-icon-menu' );
 		}
 
 		if ( 27 === e.keyCode && searchOverlay.hasClass( 'show' ) ) {
@@ -198,6 +212,7 @@
 			searchOverlay.removeClass( 'show' ).resize();
 			menuToggle.removeClass( 'hide' );
 			chapterToggle.removeClass( 'hide' );
+			searchIcon.to( 'svg-icon-search' );
 		}
 
 		if ( 27 === e.keyCode && chapterOverlay.hasClass( 'show' ) ) {
@@ -207,6 +222,7 @@
 			chapterOverlay.removeClass( 'show' ).resize();
 			menuToggle.removeClass( 'hide' );
 			searchToggle.removeClass( 'hide' );
+			bookmarkIcon.to( 'svg-icon-bookmark' );
 		}
 	} );
 

diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss
@@ -1,8 +1,3 @@
-/*--------------------------------------------------------------
-# Transformicons
---------------------------------------------------------------*/
-@import "components/transformicons";
-
 /*--------------------------------------------------------------
 # Header
 --------------------------------------------------------------*/
@@ -24,7 +19,7 @@
 @import "components/icons";
 
 /*--------------------------------------------------------------
-# SVG Icons and PNG Fallbacks
+# Avatars
 --------------------------------------------------------------*/
 @import "components/avatars";
 

diff --git a/assets/stylesheets/components/_icons.scss b/assets/stylesheets/components/_icons.scss
@@ -6,6 +6,11 @@
   position: relative;
   width: 1em;
 
+  .nav-toggle & {
+    height: inherit;
+    width: inherit;
+  }
+
   .showsub-toggle.sub-on & {
     transform: rotate(180deg);
   }
@@ -37,6 +42,6 @@
   }
 }
 
-body > svg {
+svg.hide {
   display: none;
 }
diff --git a/assets/stylesheets/components/_overlay.scss b/assets/stylesheets/components/_overlay.scss
@@ -1,27 +1,38 @@
 @import "navigation-vertical";
 
-button.menu-toggle,
-button.search-toggle {
+.nav-toggle {
   background-color: transparent;
-  display: block;
-  left: auto;
-  line-height: 0;
-	padding: 0;
+  border: 0;
+  color: inherit;
+  height: 30px;
+  padding: 0;
   position: absolute;
-	right: 20px;
-	top: 22px;
+  right: 20px;
+  top: 24px;
+  transform-origin: center;
+  transition: all $timing__default;
+  width: 30px;
+
+  &:hover {
+    background-color: transparent;
+    color: inherit;
+  }
 
   &.hide {
     opacity: 0;
     visibility: hidden;
   }
 
-  &:hover {
-    border: 0;
+  .overlay-open & {
+    color: $color__text-main;
+  }
+
+  .overlay-dark.overlay-open & {
+    color: $color__white;
   }
 }
 
-button.search-toggle {
+.search-toggle {
 
   &.has-sidebar {
     right: 70px;
@@ -32,72 +43,11 @@ button.search-toggle {
   }
 }
 
-button.chapter-toggle {
-  background-color: transparent;
-  border: 0;
-  height: 30px;
-  position: absolute;
+.chapter-toggle {
   right: 120px;
-  top: 24px;
-  transition: all $timing__default;
-  width: 30px;
-
-  &:hover {
-    background-color: transparent;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:before {
-    border: 0 solid #fff;
-    border-bottom-color: transparent;
-    border-radius: 3px 3px 0 0;
-    border-width: 24px 10px 6px;
-    content: "";
-    display: block;
-    height: 0;
-    left: 0;
-    margin: auto;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 0;
-  }
-
-  &.hide {
-    opacity: 0;
-    visibility: hidden;
-  }
 
   &.toggle-on {
     right: 20px;
-    transform: rotate(45deg);
-
-    &:before,
-    &:after {
-      background-color: $color__text-main;
-      border: 0;
-      border-color: transparent;
-      border-radius: 1px;
-      bottom: 0;
-      content: "";
-      height: 4px;
-      margin: auto;
-      position: absolute;
-      top: 0;
-      width: 24px;
-
-      .overlay-dark & {
-        background-color: $color__white;
-      }
-    }
-
-    &:after {
-      left: 4px;
-      transform: rotate(90deg);
-    }
   }
 }
 

diff --git a/assets/stylesheets/mixins/_mixins-base.scss b/assets/stylesheets/mixins/_mixins-base.scss
@@ -1,5 +1,4 @@
 @import "colors";
 @import "typography";
 @import "structure";
-@import "transformicons";
 @import "animation";
diff --git a/assets/stylesheets/plugins/_featured-video-plus.scss b/assets/stylesheets/plugins/_featured-video-plus.scss
@@ -1,23 +1,18 @@
-button.video-toggle {
+.video-toggle {
   @include center-block;
 
   border: 0;
-  color: $color__white;
+  color: inherit;
   font-size: 18vh;
   line-height: 0;
-  outline: none;
   padding: 0;
 
   &:hover {
     background-color: transparent;
   }
 
   .overlay--video & {
-    height: auto;
-    position: absolute;
-    right: 20px;
     top: 0;
-    width: auto;
-    z-index: $z-index__default;
+    width: 30px;
   }
 }
diff --git a/assets/stylesheets/style.scss b/assets/stylesheets/style.scss
@@ -4,7 +4,7 @@ Theme URI: http://eichefam.net/projects/cover2
 Author: Paul Eiche
 Author URI: https://eichefam.net
 Description: A content-driven blogging theme for WordPress.
-Version: 1.0.5
+Version: 1.0.6
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: cover2

diff --git a/assets/stylesheets/variables/_variables-base.scss b/assets/stylesheets/variables/_variables-base.scss
@@ -2,4 +2,3 @@
 @import "typography";
 @import "structure";
 @import "timings";
-@import "transformicons";
diff --git a/components/header/header-nav.php b/components/header/header-nav.php
@@ -8,9 +8,16 @@
 $has_sidebar = false;
 if ( is_active_sidebar( 'sidebar-overlay' ) || has_nav_menu( 'top' ) || has_nav_menu( 'jetpack-social-menu' ) ) :
 	$has_sidebar = true; ?>
-	<button type="button" class="menu-toggle tcon tcon-menu--xcross" aria-label="toggle menu" aria-expanded="false">
-	  <span class="tcon-menu__lines" aria-hidden="true"></span>
-	  <span class="screen-reader-text"><?php echo _x( 'Toggle Menu', 'toggle menu overlay button', 'cover2' ); ?></span>
+	<button class="nav-toggle menu-toggle" aria-label="toggle menu" aria-expanded="false">
+		<!-- <?php echo cover2_get_svg( array( 'icon' => 'icon_bg_bars', 'title' => _x( 'Toggle menu', 'toggle menu overlay button', 'cover2' ) ) ); ?> -->
+		<svg id="svg-icon-menu-icon" class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 1792">
+			<g id="svg-icon-menu-close" style="display: none;">
+				<path d="M1298 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
+			</g>
+			<g id="svg-icon-menu">
+				<path d="M1536 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/>
+			</g>
+		</svg>
 	</button>
 <?php endif;
 
@@ -20,15 +27,30 @@
 endif;
 ?>
 
-<button type="button" class="search-toggle tcon tcon-search--xcross<?php echo $search_button_class; ?>" aria-label="toggle search" aria-expanded="false">
-	<span class="tcon-search__item" aria-hidden="true"></span>
-	<span class="screen-reader-text"><?php echo _x( 'Toggle Search', 'toggle search overlay button', 'cover2' ); ?></span>
+<button type="button" class="nav-toggle search-toggle<?php echo $search_button_class; ?>" aria-label="toggle search" aria-expanded="false">
+	<!-- <?php echo cover2_get_svg( array( 'icon' => 'icon_bg_search', 'title' => _x( 'Toggle search', 'toggle search overlay button', 'cover2' ) ) ); ?> -->
+	<svg id="svg-icon-search-icon" class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 1792">
+		<g id="svg-icon-search-close" style="display: none;">
+			<path d="M1298 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
+		</g>
+		<g id="svg-icon-search">
+			<path d="M1152 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"/>
+		</g>
+	</svg>
 </button>
 
 <?php if ( is_object( $post ) && has_shortcode( $post->post_content, 'aesop_chapter' ) ) : ?>
 
-<button type="button" class="chapter-toggle" aria-label="toggle chapter list" aria-expanded="false">
-	<span class="screen-reader-text"></span>
+<button type="button" class="nav-toggle chapter-toggle" aria-label="toggle chapter list" aria-expanded="false">
+	<!-- <?php echo cover2_get_svg( array( 'icon' => 'icon_bg_bookmark', 'title' => _x( 'Toggle chapters', 'toggle chapter overlay button', 'cover2' ) ) ); ?> -->
+	<svg id="svg-icon-bookmark-icon" class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 1792">
+		<g id="svg-icon-bookmark-close" style="display: none;">
+			<path d="M1298 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
+		</g>
+		<g id="svg-icon-bookmark">
+			<path d="M1164 128q23 0 44 9 33 13 52.5 41t19.5 62v1289q0 34-19.5 62t-52.5 41q-19 8-44 8-48 0-83-32l-441-424-441 424q-36 33-83 33-23 0-44-9-33-13-52.5-41t-19.5-62v-1289q0-34 19.5-62t52.5-41q21-9 44-9h1048z"/>
+		</g>
+	</svg>
 </button>
 
 <?php endif; ?>
diff --git a/components/header/header-overlay.php b/components/header/header-overlay.php
@@ -33,9 +33,8 @@
 
   <div class="overlay overlay--video">
 
-		<button type="button" class="video-toggle video-stop tcon tcon-menu--xcross toggle-on" aria-label="toggle menu" aria-expanded="false">
-		  <span class="tcon-menu__lines" aria-hidden="true"></span>
-		  <span class="screen-reader-text"><?php echo _x( 'Toggle Menu', 'toggle menu overlay button', 'cover2' ); ?></span>
+		<button type="button" class="nav-toggle video-toggle video-stop toggle-on" aria-label="toggle menu" aria-expanded="false">
+		  <?php echo cover2_get_svg( array( 'icon' => 'icon_bg_times', 'title' => _x( 'Close', 'close video overlay button', 'cover2' ) ) ); ?>
 		</button>
 
     <?php