bookends 3.1.6 → 3.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b3fa87c8014e344819b4bc1de6d0be0c9e92d918
-  data.tar.gz: 8d95e9003c79838500a2b7c2750d14acda55ce97
+  metadata.gz: 0b55cc233e077069b605c7c6539136824c6ddda3
+  data.tar.gz: ded73a0965b729569c9a967caf876dce670892da
 SHA512:
-  metadata.gz: 287b1b16d755740e9c0b2760364a69098534e051f9bed68311d8c8f668f2c318c1d982a20c9ddd4dd663c03c207c162d74b01d5fd52a18711a43da86bcd53fad
-  data.tar.gz: 31db76081cd414f6bc291bdcaa185218651766dc5af92235165aa7b178d103a610d6ba1d846309dca85b551b1ae064025a2def3420e71992e402f715d46eb000
+  metadata.gz: 3ada4b8d45eb0e189c5a2ecaa7c93a7f536a53cbbcbe9bece0347e825995af743544151bbd1d9600a6619a7a51af934a8fed16cbac7500d2311061458ce8a742
+  data.tar.gz: 8886ac99e4110956f80573a6bed7b399eb0e5d4d1c231fe20f9c09f0bae8058666b9fc3da18ac9f0da54504d095b8a5353011f9116a3d2866da9d79c558eac94

data/app/assets/images/bookends/icons/spaces.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23"><style>.st0{stroke-width:2}.st0,.st1{fill:none;stroke:#876aaa;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}</style><path class="st0" d="M4.2 5.7L10 2.3c.9-.5 1.9-.5 2.8 0l5.9 3.4c.9.4 1.5 1.3 1.5 2.3v6.8c0 1-.5 1.9-1.4 2.4L13 20.7c-.9.5-1.9.5-2.8 0l-5.9-3.4c-.9-.4-1.5-1.3-1.5-2.3V8.2c0-1 .5-2 1.4-2.5z"/><path class="st1" d="M6.3 12.4l1.4-.8c.2-.1.5-.1.7 0l1.4.8c.2.1.3.3.3.6v1.6c0 .2-.1.5-.3.6l-1.4.8c-.2.1-.5.1-.7 0l-1.4-.8c-.2-.2-.3-.4-.3-.6V13c0-.3.1-.5.3-.6zM9.7 6.6l1.4-.8c.2-.1.5-.1.7 0l1.4.8c.2.1.3.3.3.6v1.6c0 .2-.1.5-.3.6l-1.4.8c-.2.1-.5.1-.7 0l-1.4-.8c-.2-.2-.3-.4-.3-.6V7.2c0-.3.1-.5.3-.6zM13.2 12.3l1.4-.8c.2-.1.5-.1.7 0l1.4.8c.2.1.3.3.3.6v1.6c0 .2-.1.5-.3.6l-1.4.8c-.2.1-.5.1-.7 0l-1.4-.8c-.2-.1-.3-.3-.3-.6v-1.6c0-.2.1-.4.3-.6z"/></svg>

data/app/assets/images/nav-flyout-caret.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="6px" height="9px"
+	 viewBox="0 0 6 9" style="enable-background:new 0 0 6 9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#79589F;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<title>nav-dropdown-caret</title>
+<desc>Created with Sketch.</desc>
+<g id="Page-1" sketch:type="MSPage">
+	<g id="main_1_" transform="translate(-267.000000, -42.000000)" sketch:type="MSArtboardGroup">
+		<g id="nav" transform="translate(25.000000, 23.000000)" sketch:type="MSLayerGroup">
+			<g id="main" transform="translate(174.000000, 15.000000)" sketch:type="MSShapeGroup">
+				<path id="nav-dropdown-caret" class="st0" d="M69,5.2l4,3.3l-4,3.3"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

data/app/assets/stylesheets/bookends/_header.scss

@@ -110,7 +110,8 @@
     }
   }
 
-  .has-dropdown {
+  // Top level nav items with dropdown
+  .main-nav > .has-dropdown {
 
     > a {
 
@@ -135,25 +136,70 @@
       }
     }
 
-    //Dropdown hover
+    // Anchor color on hover
+    &:hover {
+
+      > a {
+        color: $white;
+
+        &:after {
+          opacity: 1;
+        }
+      }
+    }
+
+  }
+
+  // All nav items with dropdown
+  .has-dropdown {
+
+    // Show dropdown on hover
     &:hover {
 
-      .dropdown {
+      > .dropdown {
         visibility: visible;
         opacity: 1;
         margin-top: 3px;
         @include transition-delay(0s);
       }
+    }
 
-      > a {
-        color: $white;
+    @media screen and (min-width: $bp-lg + 1) {
+      // Second level+ dropdowns
+      .has-dropdown {
+        position: relative;
 
-        &:after {
-          opacity: 1;
+        > .dropdown {
+          left: 180px;
+          top: -7px;
+          margin: 0;
+        }
+
+        > a {
+
+          //Caret
+          &:after {
+            content: "";
+            display: inline-block;
+            position: relative;
+            top: 1px;
+            @include size(6px 10px);
+            margin-left: 7px;
+            background-image: asset-url('nav-flyout-caret.svg');
+            background-repeat: no-repeat;
+            opacity: .7;
+          }
+        }
+
+        &:hover {
+
+          > .dropdown {
+            margin-top: 0;
+            left: 183px;
+          }
         }
       }
     }
-
   }
 
   .dropdown {
@@ -169,6 +215,7 @@
       border-radius: $border-radius;
       z-index: 3;
       padding: $dropdown-padding/2 $dropdown-padding;
+      padding-right: 0;
       overflow: visible;
       box-shadow: 0 2px 7px fade-out($black, .825);
     }
@@ -195,7 +242,7 @@
     // Transition
     visibility: hidden;
     opacity: 0;
-    @include transition(visibility 0s 0.15s, opacity 0.15s, margin-top .15s);
+    @include transition(visibility 0s 0.15s, opacity 0.15s, margin-top .15s, left .15s);
 
     li a {
       color: #444;
@@ -251,6 +298,9 @@
       &.teams:before {
         background-image: asset-url('bookends/icons/teams.svg');
       }
+      &.spaces:before {
+        background-image: asset-url('bookends/icons/spaces.svg');
+      }
     }
 
     p a {
@@ -377,6 +427,7 @@
       float: none;
       $white-space: nowrap;
       padding: 0;
+      padding-right: $dropdown-padding;
     }
 
   }
@@ -602,6 +653,15 @@
           margin-bottom: 16px;
           margin-left: 0;
 
+          // Second level+ dropdowns
+          .dropdown {
+            margin: 0;
+
+            li {
+              margin-left: 30px;
+            }
+          }
+
           &.more {
             margin-bottom: 0;
           }
@@ -634,6 +694,29 @@
 
     .mobile-nav {
       position: fixed;
+
+      span {
+
+        &:nth-child(1) {
+          top: 6px;
+          width: 0%;
+          left: 50%;
+        }
+
+        &:nth-child(2) {
+          @include transform(rotate(45deg));
+        }
+
+        &:nth-child(3) {
+          @include transform(rotate(-45deg));
+        }
+
+        &:nth-child(4) {
+          top: 6px;
+          width: 0%;
+          left: 50%;
+        }
+      }
     }
 
   }
@@ -644,6 +727,38 @@
     top: 32px;
     right: 23px;
     z-index: 12;
+    @include hide-text();
+    width: 30px;
+    height: 20px;
+    @include transform(rotate(0deg));
+    @include transition(.3s ease-in-out);
+    cursor: pointer;
+
+    span {
+      display: block;
+      position: absolute;
+      height: 2px;
+      width: 100%;
+      background: #C7BFDF;
+      border-radius: 9px;
+      opacity: 1;
+      left: 0;
+      @include transform(rotate(0deg));
+      @include transition(.15s ease-in-out);
+
+      &:nth-child(1) {
+        top: 0px;
+      }
+
+      &:nth-child(2),
+      &:nth-child(3) {
+        top: 8px;
+      }
+
+      &:nth-child(4) {
+        top: 16px;
+      }
+    }
 
     @include media($desktop) {
       display: block;

data/app/views/bookends/_header.html.erb

@@ -22,7 +22,12 @@
               <li><a class="bookends-icon redis" href="<%= Bookends::Config.host_www %>/redis">Heroku Redis</a></li>
               <li><a class="bookends-icon kafka" href="<%= Bookends::Config.host_www %>/kafka">Kafka on Heroku</a></li>
               <li><a class="bookends-icon connect" href="<%= Bookends::Config.host_www %>/connect">Heroku Connect</a></li>
-              <li><a class="bookends-icon enterprise" href="<%= Bookends::Config.host_www %>/enterprise">Heroku Enterprise</a></li>
+              <li class="has-dropdown">
+                <a class="bookends-icon enterprise" href="<%= Bookends::Config.host_www %>/enterprise">Heroku Enterprise</a>
+                <ul class="dropdown">
+                  <li><a class="bookends-icon spaces" href="<%= Bookends::Config.host_www %>/private-spaces">Private Spaces</a></li>
+                </ul>
+              </li>
               <li><a class="bookends-icon teams" href="<%= Bookends::Config.host_www %>/teams">Heroku Teams</a></li>
             </ul>
           </li>
@@ -69,7 +74,7 @@
                 <h3><a class="js-blog-link" href="https://blog.heroku.com">Heroku Blog</a></h3>
                 <p class="js-blog-date"></p>
                 <p class="js-blog-content">Find out what's new with Heroku on our blog.</p>
-                <a class="button btn-default btn-sm btn-inline" href="https://blog.heroku.com">Visit Blog</a>
+                <a class="button btn btn-default btn-sm btn-inline" href="https://blog.heroku.com">Visit Blog</a>
               </section>
             </div>
           </li>

data/lib/bookends/version.rb

@@ -1,3 +1,3 @@
 module Bookends
-  VERSION = "3.1.6".freeze
+  VERSION = '3.2.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bookends
 version: !ruby/object:Gem::Version
-  version: 3.1.6
+  version: 3.2.0
 platform: ruby
 authors:
 - Marketing Web Ops at heroku
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-11-23 00:00:00.000000000 Z
+date: 2016-12-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -243,9 +243,11 @@ files:
 - app/assets/images/bookends/icons/platform.svg
 - app/assets/images/bookends/icons/postgres.svg
 - app/assets/images/bookends/icons/redis.svg
+- app/assets/images/bookends/icons/spaces.svg
 - app/assets/images/bookends/icons/teams.svg
 - app/assets/images/logo.svg
 - app/assets/images/nav-dropdown-caret.svg
+- app/assets/images/nav-flyout-caret.svg
 - app/assets/javascripts/blog-fetcher.js
 - app/assets/javascripts/bookends.js
 - app/assets/javascripts/header.js