forever_style_guide 3.4.14 → 3.4.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c6a820aff8f7845313f708f74fadcdebbe7384c3a99f8db8b69a3e0ec404723
-  data.tar.gz: 3839e8aebb3fc496bfb4f702e2925f48cbb895b8451c212fc491dc3191ed6665
+  metadata.gz: 4fbbf75f02980128f2d1e023f9651019f0d11201c64d8a94841a8fbb19726711
+  data.tar.gz: 983921699f49aecc018d0f150f4e6cdc2080bc074c4a879bef8dbd4e2cec36b8
 SHA512:
-  metadata.gz: 7bbb8aec261db940ede260e2011bb0f9ee391d9b77565346d1db090b99184e211971d34fa8262268b4d49ec2466161882a4e97f4f9ec80cef0ea61619c2c02e6
-  data.tar.gz: b4c383e6a744bd47fb81a0e133c4d7d6747b7b76880ba34400607a9cd5acdbc44c7e6228c44931577510a9c2a0e4ad611a340bec44e56244e8d1ed1f2415abe3
+  metadata.gz: 0ae4dd1e27f9e013c44703fd8638c4562816562691bd08617ab66e096e59f3cb6a00e7f56e82343901267474a2ca179051d8deef9a1d3d3290e89e28bae81eb8
+  data.tar.gz: 61f300d55f38f50b66b8150001d0deb6130ea92e7fd3c6a45025567489352a1fbd65cf0544a3b806467d1c4194b1cfcb879c22a794f2beae4e44cbc133483655

data/app/assets/stylesheets/forever_style_guide/globals/_colors.scss

@@ -61,6 +61,10 @@ $color-live18-blue:         colorify('live18-blue', #008ccf) !default;
 $color-live18-orange:       colorify('live18-orange', #f57e25) !default;
 $color-live18-grey:         colorify('live18-grey', #a4abb6) !default;
 
+// Gradients
+$gradient-ambassador-alt: linear-gradient(to left, mix($color-black, $color-forever_purple, 10%), mix($color-black, $color-forever_ambassador, 10%));
+$gradient-ambassador: linear-gradient(to left, mix($color-black, $color-forever_valet, 10%), mix($color-black, $color-forever_services, 10%));
+
 @each $id, $color in $colors {
   .color-#{$id} {
     color: #{$color};

data/app/assets/stylesheets/forever_style_guide/globals/_variables.scss

@@ -73,5 +73,6 @@ $in-front-of-primary-nav: $zindex-navbar-fixed + 2;
 $in-front-of-primary-and-banner: $zindex-navbar-fixed + 3;
 $in-front-of-primary-and-banner-and-impersonation: $zindex-navbar-fixed + 4;
 
-$ambassador-banner-text-height: 32px;
+$ambassador-banner-height-assigned: 32px;
+$ambassador-banner-height-unassigned: 50px;
 $impersonation-banner-height: 20px;

data/app/assets/stylesheets/forever_style_guide/modules/_ambassador_banner.scss

@@ -1,42 +1,30 @@
-$banner-vertical-padding: 6px;
-$banner-text-max-width: 70%;
+$banner-vertical-padding-assigned: 6px;
+$banner-vertical-padding-unassigned: 10px;
+$banner-max-width: 70%;
 
-$banner-unassigned-bg-color: #d4edf7;
-$banner-background-gradient: linear-gradient(to left, mix($color-black, $color-forever_valet, 10%), mix($color-black, $color-forever_services, 10%));
 $banner-background-visible: 0.1;
-$banner-text-color: transparentize($color-white, 0.2);
+$banner-color: transparentize($color-white, 0.2);
 
 $banner-hover-effect-speed: 0.15s;
 $chevron-rotate-effect-speed: 0.25s;
 $dropdown-entrance-and-exit-effect-speed: 0.22s;
 
-a.ambassador_banner {
-  display: block;
-  &:hover,
-  &:focus,
-  &:active,
-  &:active:focus {
-    text-decoration: none;
-  }
-}
-
-.ambassador_banner-text {
+@mixin ambassador_banner($banner-background-gradient, $height) {
   position: relative;
-  height: $ambassador-banner-text-height;
-  padding-top: $banner-vertical-padding;
-  padding-bottom: $banner-vertical-padding;
-  color: $banner-text-color;
+  height: $height;
+  color: $banner-color;
   background-image: $banner-background-gradient;
   cursor: pointer;
   z-index: $in-front-of-primary-nav;
 
   &.is-behind_fixed-nav {
     z-index: $behind-primary-nav;
+    height: $ambassador-banner-height-assigned;
   }
 
   &::after {
     position: absolute;
-    height: $ambassador-banner-text-height;
+    height: $height;
     top: 0;
     left: 0;
     width: 100%;
@@ -53,39 +41,88 @@ a.ambassador_banner {
       opacity: $banner-background-visible;
     }
   }
+}
 
-  &.open { 
+a.ambassador_banner {
+  display: block;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:active:focus {
+    text-decoration: none;
+  }
+}
+
+.ambassador_banner-assigned {
+  @include ambassador_banner($gradient-ambassador, $ambassador-banner-height-assigned);
+  padding-top: $banner-vertical-padding-assigned;
+  padding-bottom: $banner-vertical-padding-assigned;
+  height: $ambassador-banner-height-assigned;
+
+  &::after {
+    height: $ambassador-banner-height-assigned;
+  }
+
+  &.open {
     .fa-chevron-down {
       @include transform(rotate(180deg));
     }
-    &::after {
-      opacity: $banner-background-visible;
-    }
   }
 
   .fa-chevron-down {
     @include transition(all $chevron-rotate-effect-speed linear);
   }
+}
+
+.ambassador_banner-unassigned {
+  @include ambassador_banner($gradient-ambassador-alt, $ambassador-banner-height-unassigned);
+  padding-top: $banner-vertical-padding-unassigned;
+  padding-bottom: $banner-vertical-padding-unassigned;
+
+  &.is-behind_fixed-nav {
+    .ambassador_banner-btn {
+      display: none;
+    }
+  }
+}
 
-  &.ambassador_banner-text-no_ambassador {
-    background-image: none;
-    background-color: $banner-unassigned-bg-color;
+// make the lead-in text just look like a btn on small devices
+.ambassador_banner-unassigned-text {
+  @media (max-width: $screen-xs-max) {
+    display: inline-block;
+    height: 30px;
+    padding: 4px 12px 8px;
+    line-height: 1.3;
+    border: 2px solid $color-white;
+    border-radius: $border-radius-button;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 
-.ambassador_banner-text-content {
+.ambassador_banner-btn {
+  padding-top: 4px;
+  margin-left: 20px;
+  height: 30px;
+  font-size: $font-size-200;
+}
+
+.ambassador_banner-content {
   display: inline-block;
   vertical-align: middle;
 }
 
-.ambassador_banner-text-name {
-  max-width: $banner-text-max-width;
+.ambassador_banner-name {
+  max-width: $banner-max-width;
   vertical-align: middle;
 }
 
 .ambassador_banner-dropdown_container {
   position: absolute;
-  top: $ambassador-banner-text-height;
+  top: $ambassador-banner-height-assigned;
   left: 0;
   visibility: hidden;
   width: 100%;
@@ -109,7 +146,7 @@ a.ambassador_banner {
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  background-image: $banner-background-gradient;
+  background-image: $gradient-ambassador;
   border-top: 2px solid transparentize($color-white, 0.9);
 }
 

data/app/assets/stylesheets/forever_style_guide/modules/_impersonation_banner.scss

@@ -15,7 +15,7 @@
     margin-top: $impersonation-banner-height;
   }
   .ambassador_banner-dropdown_container.open {
-    top: $ambassador-banner-text-height + $impersonation-banner-height;
+    top: $ambassador-banner-height-assigned + $impersonation-banner-height;
   }
   .nav-mobile-menu.in {
     @media (max-width: $grid-float-breakpoint-max) {

data/app/assets/stylesheets/forever_style_guide/modules/_nav-fixed.scss

@@ -5,7 +5,7 @@
   left: 0;
   z-index: $zindex-navbar-fixed;
 
-  .affix {
-    position: relative;
+  &:not(.affix) {
+    position: static; // respect the z-index of all the nav stuff + don't break small heroes like on the /find_ambassador page
   }
 }

data/lib/forever_style_guide/version.rb

@@ -1,3 +1,3 @@
 module ForeverStyleGuide
-  VERSION = "3.4.14"
+  VERSION = "3.4.15"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: forever_style_guide
 version: !ruby/object:Gem::Version
-  version: 3.4.14
+  version: 3.4.15
 platform: ruby
 authors:
 - Nicholas McClay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-07-09 00:00:00.000000000 Z
+date: 2018-07-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails