bookends 3.1.6 → 3.2.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: b3fa87c8014e344819b4bc1de6d0be0c9e92d918
4
- data.tar.gz: 8d95e9003c79838500a2b7c2750d14acda55ce97
3
+ metadata.gz: 0b55cc233e077069b605c7c6539136824c6ddda3
4
+ data.tar.gz: ded73a0965b729569c9a967caf876dce670892da
5
5
  SHA512:
6
- metadata.gz: 287b1b16d755740e9c0b2760364a69098534e051f9bed68311d8c8f668f2c318c1d982a20c9ddd4dd663c03c207c162d74b01d5fd52a18711a43da86bcd53fad
7
- data.tar.gz: 31db76081cd414f6bc291bdcaa185218651766dc5af92235165aa7b178d103a610d6ba1d846309dca85b551b1ae064025a2def3420e71992e402f715d46eb000
6
+ metadata.gz: 3ada4b8d45eb0e189c5a2ecaa7c93a7f536a53cbbcbe9bece0347e825995af743544151bbd1d9600a6619a7a51af934a8fed16cbac7500d2311061458ce8a742
7
+ data.tar.gz: 8886ac99e4110956f80573a6bed7b399eb0e5d4d1c231fe20f9c09f0bae8058666b9fc3da18ac9f0da54504d095b8a5353011f9116a3d2866da9d79c558eac94
@@ -0,0 +1 @@
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>
@@ -0,0 +1,20 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
4
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="6px" height="9px"
5
+ viewBox="0 0 6 9" style="enable-background:new 0 0 6 9;" xml:space="preserve">
6
+ <style type="text/css">
7
+ .st0{fill:none;stroke:#79589F;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
8
+ </style>
9
+ <title>nav-dropdown-caret</title>
10
+ <desc>Created with Sketch.</desc>
11
+ <g id="Page-1" sketch:type="MSPage">
12
+ <g id="main_1_" transform="translate(-267.000000, -42.000000)" sketch:type="MSArtboardGroup">
13
+ <g id="nav" transform="translate(25.000000, 23.000000)" sketch:type="MSLayerGroup">
14
+ <g id="main" transform="translate(174.000000, 15.000000)" sketch:type="MSShapeGroup">
15
+ <path id="nav-dropdown-caret" class="st0" d="M69,5.2l4,3.3l-4,3.3"/>
16
+ </g>
17
+ </g>
18
+ </g>
19
+ </g>
20
+ </svg>
@@ -110,7 +110,8 @@
110
110
  }
111
111
  }
112
112
 
113
- .has-dropdown {
113
+ // Top level nav items with dropdown
114
+ .main-nav > .has-dropdown {
114
115
 
115
116
  > a {
116
117
 
@@ -135,25 +136,70 @@
135
136
  }
136
137
  }
137
138
 
138
- //Dropdown hover
139
+ // Anchor color on hover
140
+ &:hover {
141
+
142
+ > a {
143
+ color: $white;
144
+
145
+ &:after {
146
+ opacity: 1;
147
+ }
148
+ }
149
+ }
150
+
151
+ }
152
+
153
+ // All nav items with dropdown
154
+ .has-dropdown {
155
+
156
+ // Show dropdown on hover
139
157
  &:hover {
140
158
 
141
- .dropdown {
159
+ > .dropdown {
142
160
  visibility: visible;
143
161
  opacity: 1;
144
162
  margin-top: 3px;
145
163
  @include transition-delay(0s);
146
164
  }
165
+ }
147
166
 
148
- > a {
149
- color: $white;
167
+ @media screen and (min-width: $bp-lg + 1) {
168
+ // Second level+ dropdowns
169
+ .has-dropdown {
170
+ position: relative;
150
171
 
151
- &:after {
152
- opacity: 1;
172
+ > .dropdown {
173
+ left: 180px;
174
+ top: -7px;
175
+ margin: 0;
176
+ }
177
+
178
+ > a {
179
+
180
+ //Caret
181
+ &:after {
182
+ content: "";
183
+ display: inline-block;
184
+ position: relative;
185
+ top: 1px;
186
+ @include size(6px 10px);
187
+ margin-left: 7px;
188
+ background-image: asset-url('nav-flyout-caret.svg');
189
+ background-repeat: no-repeat;
190
+ opacity: .7;
191
+ }
192
+ }
193
+
194
+ &:hover {
195
+
196
+ > .dropdown {
197
+ margin-top: 0;
198
+ left: 183px;
199
+ }
153
200
  }
154
201
  }
155
202
  }
156
-
157
203
  }
158
204
 
159
205
  .dropdown {
@@ -169,6 +215,7 @@
169
215
  border-radius: $border-radius;
170
216
  z-index: 3;
171
217
  padding: $dropdown-padding/2 $dropdown-padding;
218
+ padding-right: 0;
172
219
  overflow: visible;
173
220
  box-shadow: 0 2px 7px fade-out($black, .825);
174
221
  }
@@ -195,7 +242,7 @@
195
242
  // Transition
196
243
  visibility: hidden;
197
244
  opacity: 0;
198
- @include transition(visibility 0s 0.15s, opacity 0.15s, margin-top .15s);
245
+ @include transition(visibility 0s 0.15s, opacity 0.15s, margin-top .15s, left .15s);
199
246
 
200
247
  li a {
201
248
  color: #444;
@@ -251,6 +298,9 @@
251
298
  &.teams:before {
252
299
  background-image: asset-url('bookends/icons/teams.svg');
253
300
  }
301
+ &.spaces:before {
302
+ background-image: asset-url('bookends/icons/spaces.svg');
303
+ }
254
304
  }
255
305
 
256
306
  p a {
@@ -377,6 +427,7 @@
377
427
  float: none;
378
428
  $white-space: nowrap;
379
429
  padding: 0;
430
+ padding-right: $dropdown-padding;
380
431
  }
381
432
 
382
433
  }
@@ -602,6 +653,15 @@
602
653
  margin-bottom: 16px;
603
654
  margin-left: 0;
604
655
 
656
+ // Second level+ dropdowns
657
+ .dropdown {
658
+ margin: 0;
659
+
660
+ li {
661
+ margin-left: 30px;
662
+ }
663
+ }
664
+
605
665
  &.more {
606
666
  margin-bottom: 0;
607
667
  }
@@ -634,6 +694,29 @@
634
694
 
635
695
  .mobile-nav {
636
696
  position: fixed;
697
+
698
+ span {
699
+
700
+ &:nth-child(1) {
701
+ top: 6px;
702
+ width: 0%;
703
+ left: 50%;
704
+ }
705
+
706
+ &:nth-child(2) {
707
+ @include transform(rotate(45deg));
708
+ }
709
+
710
+ &:nth-child(3) {
711
+ @include transform(rotate(-45deg));
712
+ }
713
+
714
+ &:nth-child(4) {
715
+ top: 6px;
716
+ width: 0%;
717
+ left: 50%;
718
+ }
719
+ }
637
720
  }
638
721
 
639
722
  }
@@ -644,6 +727,38 @@
644
727
  top: 32px;
645
728
  right: 23px;
646
729
  z-index: 12;
730
+ @include hide-text();
731
+ width: 30px;
732
+ height: 20px;
733
+ @include transform(rotate(0deg));
734
+ @include transition(.3s ease-in-out);
735
+ cursor: pointer;
736
+
737
+ span {
738
+ display: block;
739
+ position: absolute;
740
+ height: 2px;
741
+ width: 100%;
742
+ background: #C7BFDF;
743
+ border-radius: 9px;
744
+ opacity: 1;
745
+ left: 0;
746
+ @include transform(rotate(0deg));
747
+ @include transition(.15s ease-in-out);
748
+
749
+ &:nth-child(1) {
750
+ top: 0px;
751
+ }
752
+
753
+ &:nth-child(2),
754
+ &:nth-child(3) {
755
+ top: 8px;
756
+ }
757
+
758
+ &:nth-child(4) {
759
+ top: 16px;
760
+ }
761
+ }
647
762
 
648
763
  @include media($desktop) {
649
764
  display: block;
@@ -22,7 +22,12 @@
22
22
  <li><a class="bookends-icon redis" href="<%= Bookends::Config.host_www %>/redis">Heroku Redis</a></li>
23
23
  <li><a class="bookends-icon kafka" href="<%= Bookends::Config.host_www %>/kafka">Kafka on Heroku</a></li>
24
24
  <li><a class="bookends-icon connect" href="<%= Bookends::Config.host_www %>/connect">Heroku Connect</a></li>
25
- <li><a class="bookends-icon enterprise" href="<%= Bookends::Config.host_www %>/enterprise">Heroku Enterprise</a></li>
25
+ <li class="has-dropdown">
26
+ <a class="bookends-icon enterprise" href="<%= Bookends::Config.host_www %>/enterprise">Heroku Enterprise</a>
27
+ <ul class="dropdown">
28
+ <li><a class="bookends-icon spaces" href="<%= Bookends::Config.host_www %>/private-spaces">Private Spaces</a></li>
29
+ </ul>
30
+ </li>
26
31
  <li><a class="bookends-icon teams" href="<%= Bookends::Config.host_www %>/teams">Heroku Teams</a></li>
27
32
  </ul>
28
33
  </li>
@@ -69,7 +74,7 @@
69
74
  <h3><a class="js-blog-link" href="https://blog.heroku.com">Heroku Blog</a></h3>
70
75
  <p class="js-blog-date"></p>
71
76
  <p class="js-blog-content">Find out what's new with Heroku on our blog.</p>
72
- <a class="button btn-default btn-sm btn-inline" href="https://blog.heroku.com">Visit Blog</a>
77
+ <a class="button btn btn-default btn-sm btn-inline" href="https://blog.heroku.com">Visit Blog</a>
73
78
  </section>
74
79
  </div>
75
80
  </li>
@@ -1,3 +1,3 @@
1
1
  module Bookends
2
- VERSION = "3.1.6".freeze
2
+ VERSION = '3.2.0'.freeze
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bookends
3
3
  version: !ruby/object:Gem::Version
4
- version: 3.1.6
4
+ version: 3.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Marketing Web Ops at heroku
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-11-23 00:00:00.000000000 Z
11
+ date: 2016-12-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -243,9 +243,11 @@ files:
243
243
  - app/assets/images/bookends/icons/platform.svg
244
244
  - app/assets/images/bookends/icons/postgres.svg
245
245
  - app/assets/images/bookends/icons/redis.svg
246
+ - app/assets/images/bookends/icons/spaces.svg
246
247
  - app/assets/images/bookends/icons/teams.svg
247
248
  - app/assets/images/logo.svg
248
249
  - app/assets/images/nav-dropdown-caret.svg
250
+ - app/assets/images/nav-flyout-caret.svg
249
251
  - app/assets/javascripts/blog-fetcher.js
250
252
  - app/assets/javascripts/bookends.js
251
253
  - app/assets/javascripts/header.js