forever_style_guide 3.7.0 → 4.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b73c8247dd894881f531367da79cf7b2337252c688cc4dcf5ad09f6ad1ffca2
-  data.tar.gz: 79f44c749a21319b43bfc02e0f673f44a824d3609721e287d9db144dd4ad6698
+  metadata.gz: 187f5f435aca86f54da94c651dcad1e8e7382a01d3f26bad6a3df6eb06fdb91d
+  data.tar.gz: deac6bafdfe870d29ad3670bc4e7498715af2f1134af8a4aebeabb0d921a4cca
 SHA512:
-  metadata.gz: dcf1949322cc0e1f84158d1f49ea77a6d43c7a2ee77af76901fef38bd8861e415a3ffb4e8e563703ca016f2f29cda5382bfd7fd117b68e53a3816fe838ff6b7e
-  data.tar.gz: 842a2338f74d50ac0ddbe89b8a3e1f1942d9eb1c7f6ddb337a07a375c2154a26878cbc2038000846d240b75a0b5d25462e919d474b95f2763e6fc9afd55ad970
+  metadata.gz: 67f578caae548cfd03e7e17e1bc7a372626409e817583b4da3bdef2e476ed90996381c54b3e6685f854a013cb84cd243f8fb4b8ed617ee0dfd30f8c0cc8bf52e
+  data.tar.gz: 0be7cc00ef9f0e8e48110aaf81eb9556f84e45b9bd0c4b95f2d1d07df8d79cec6a76c95557ae31c8f63d21ab0a9c6eb5f0c98c5dcb8391b3537fe7f14898de54

data/app/assets/stylesheets/forever_style_guide/base/_grid.scss

@@ -84,53 +84,35 @@ $f-grid-col-count: 24;
   }
 }
 
-/* justify center columns */
-.f-grid-center {
-  justify-content: center;
-}
-
-.f-grid-align-right {
-  justify-content: flex-end;
-}
-
-.f-grid-valign-top {
-  align-items: flex-start;
-}
-
-.f-grid-valign-middle {
-  align-items: center;
-}
-
-.f-grid-valign-bottom {
-  align-items: flex-end;
-}
-
-.f-grid-reverse {
-  flex-direction: row-reverse;
-}
-
-.f-grid-around {
-  justify-content: space-around;
-}
-
-.f-grid-between {
-  justify-content: space-between;
+/* alignment and justification modifiers */
+.f-grid-center { justify-content: center; }
+.f-grid-align-right { justify-content: flex-end; }
+.f-grid-valign-top { align-items: flex-start; }
+.f-grid-valign-middle { align-items: center; }
+.f-grid-valign-bottom { align-items: flex-end; }
+.f-grid-reverse { flex-direction: row-reverse; }
+.f-grid-around { justify-content: space-around; }
+.f-grid-between { justify-content: space-between; }
+
+/* padding modifiers */
+.f-grid.f-grid-no_padding {
+  margin: 0;
+  [class*="f-col"] { padding: 0; }
+}
+
+.f-grid.f-grid-bs_padding {
+  margin-left: -$f-grid-bootstrap-padding;
+  margin-right: -$f-grid-bootstrap-padding;
+  [class*="f-col"] { padding: 0 $f-grid-bootstrap-padding; }
 }
 
-.f-grid-no_padding {
-  margin-left: 0;
-  margin-right: 0;
 
-  [class*="f-col"] {
-    padding: 0;
+$grid-gutter: 2;
+@while $grid-gutter < 30 {
+  .f-grid.f-grid-gutter-#{$grid-gutter} {
+    margin: -#{$grid-gutter / 2}px;
+    [class*="f-col"] { padding: #{$grid-gutter / 2}px; }
   }
-}
 
-.f-grid-bs_padding {
-  margin-left: -$f-grid-bootstrap-padding;
-  margin-right: -$f-grid-bootstrap-padding;
-
-  [class*="f-col"] {
-    padding: 0 $f-grid-bootstrap-padding;
-  }
+  $grid-gutter: $grid-gutter + 2;
 }

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

@@ -66,7 +66,7 @@ $color-live18-orange:       colorify('live18-orange', #f57e25) !default;
 $color-live18-grey:         colorify('live18-grey', #a4abb6) !default;
 
 // Gradients
-$gradient-ambassador: linear-gradient(to left, mix($color-black, $color-forever_valet, 10%), mix($color-black, $color-forever_services, 10%));
+$gradient-ambassador: linear-gradient(to right, darken($color-forever_services, 5%), darken($color-forever_valet, 5%));
 
 @each $id, $color in $colors {
   .color-#{$id} {

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

@@ -21,3 +21,4 @@
 @import "hero_simple";
 @import "modal";
 @import "signin";
+@import "subnav";

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

@@ -9,15 +9,18 @@ $banner-hover-effect-speed: 0.15s;
 $chevron-rotate-effect-speed: 0.25s;
 $dropdown-entrance-and-exit-effect-speed: 0.22s;
 
-@mixin ambassador_banner($height) {
+@mixin ambassador_banner($banner-background-color, $height) {
   position: relative;
   height: $height;
   color: $banner-color;
-  cursor: pointer;
+  background-color: $banner-background-color;
   z-index: $in-front-of-primary-nav;
+  pointer-events: none;
+  text-align: center;
+  font-family: $font-face-semibold;
 
   &.is-behind_fixed-nav {
-    z-index: $behind-primary-nav;
+    z-index: -1;
     height: $ambassador-banner-height-assigned;
   }
 
@@ -44,25 +47,24 @@ $dropdown-entrance-and-exit-effect-speed: 0.22s;
 
 a.ambassador_banner {
   display: block;
+  pointer-events: auto;
 
   &:hover,
   &:focus,
   &:active,
   &:active:focus {
     text-decoration: none;
+    pointer-events: auto;
   }
 }
 
 .ambassador_banner-assigned {
-  @include ambassador_banner($ambassador-banner-height-assigned);
-  background-image: $gradient-ambassador;
+  @include ambassador_banner($color-forever_gray, $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;
-  }
+  &::after { height: $ambassador-banner-height-assigned; }
 
   &.open {
     .fa-chevron-down {
@@ -73,18 +75,17 @@ a.ambassador_banner {
   .fa-chevron-down {
     @include transition(all $chevron-rotate-effect-speed linear);
   }
+
+  @media screen and (max-width: $screen-xs) { text-align: left; }
 }
 
 .ambassador_banner-unassigned {
-  @include ambassador_banner($ambassador-banner-height-unassigned);
-  background: $color-forever_ambassador-unassigned;
+  @include ambassador_banner(#781A60, $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-btn { display: none; }
   }
 }
 
@@ -97,10 +98,7 @@ a.ambassador_banner {
     line-height: 1.3;
     border: 2px solid $color-white;
     border-radius: $border-radius-button;
-
-    &:hover {
-      text-decoration: underline;
-    }
+    &:hover { text-decoration: underline; }
   }
 }
 
@@ -114,11 +112,21 @@ a.ambassador_banner {
 .ambassador_banner-content {
   display: inline-block;
   vertical-align: middle;
+  pointer-events: auto;
+  cursor: pointer;
 }
 
 .ambassador_banner-name {
   max-width: $banner-max-width;
   vertical-align: middle;
+  text-decoration: underline;
+
+  @media screen and (max-width: $screen-xs) {
+    max-width: 48%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .ambassador_banner-dropdown_container {
@@ -145,9 +153,7 @@ a.ambassador_banner {
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  background-image: $gradient-ambassador;
+  background-color: $color-forever_gray;
   border-top: 2px solid transparentize($color-white, 0.9);
 }
 
@@ -200,3 +206,47 @@ a.ambassador_banner {
     display: none;
   }
 }
+
+.ambassador-link-con {
+  @media screen and (max-width: $screen-xs) {
+    text-align: left;
+    padding-left: 10px;
+  }
+}
+
+.btn-ambassador-link {
+  display: inline-block;
+  vertical-align: middle;
+  height: auto;
+  position: absolute;
+  z-index: 1200;
+  right: 10px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: $color-white;
+  font-size: $font-size-200;
+  font-family: inherit;
+  border: none;
+  box-shadow: none;
+  line-height: 20px;
+  pointer-events: auto;
+
+  &:hover, &:focus, &:active{
+    color: $color-white;
+    background: transparent !important;
+    border: none;
+    box-shadow: none;
+    text-decoration: underline;
+  }
+
+  i {
+    margin-left: 4px;
+    font-size: $font-size-200 !important;
+  }
+
+  &.amb-link-vert-align {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

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

@@ -18,7 +18,6 @@ $avatar-shadow-xs: 0 2px 2px rgba(0, 0, 0, 0.1);
   padding: 0;
   margin-right: 3px;
   overflow: hidden;
-  background-color: $color-gray-100;
   box-shadow: none;
   border-radius: 50%;
   border: 4px solid color('gray-100');

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

@@ -1,20 +1,14 @@
-
 $f-primary_nav-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
-$f-primary_nav-main-zindex: $zindex-navbar-fixed;
 $f-primary_nav-main-minheight: 50px;
 $f-primary_nav-side-width: 320px;
 $f-primary_nav-side-zindex: $zindex-modal;
-$f-primary_nav-side_section-close_angle: 45deg;
 $f-primary_nav-icon-count_badge-top: 5px;
 $f-primary_nav-icon-count_badge-right: -4px;
+$f-nav-yellow: #FFD452;
+$f-nav-icon-hover: #bce5fd;
 
-@mixin deals_link_base() {
-  color: $color-forever_orange;
-
-  &:hover {
-    color: $color-forever_blue;
-  }
-
+@mixin deals_link_base($link_color: $color-forever_orange) {
+  color: $link_color;
   &::after {
     position: relative;
     top: -5px;
@@ -27,8 +21,7 @@ $f-primary_nav-icon-count_badge-right: -4px;
 
 .f-primary_nav {
   width: 100%;
-
-  background-color: $color-white;
+  background-color: #2881B8;
 
   /*support store method of affixing*/
   &.affix {
@@ -36,18 +29,6 @@ $f-primary_nav-icon-count_badge-right: -4px;
     left: 0;
     z-index: $f-primary_nav-side-zindex;
   }
-
-  /* nested to give more specificity and override the base styleguide link styles */
-  .f-primary_nav-link_base {
-    text-decoration: none;
-    color: $color-gray-600;
-    @include transition_fast(color);
-
-    &.is-active,
-    &:hover {
-      color: $color-forever_blue;
-    }
-  }
 }
 
 .f-primary_nav-main {
@@ -58,19 +39,18 @@ $f-primary_nav-icon-count_badge-right: -4px;
   padding-left: 10px;
   padding-right: 10px;
   position: relative;
-  z-index: $f-primary_nav-main-zindex;
+  z-index: $zindex-navbar-fixed;
 }
 
 .f-primary_nav-logo_link {
   display: flex;
   align-items: center;
-}
 
-.f-primary_nav-logo_image {
-  height: 22px;
-  width: 138px;
-  max-width: unset;
-  @include transition_fast(height, width);
+  > img {
+    height: 22px;
+    width: 138px;
+    max-width: unset;
+  }
 }
 
 .f-primary_nav-ecom_list {
@@ -78,45 +58,50 @@ $f-primary_nav-icon-count_badge-right: -4px;
   flex: 1 0 auto;
   justify-content: center;
   align-items: stretch;
-  margin-bottom: 0;
-  padding-left: 0;
+  margin: 0;
+  padding: 0;
   list-style: none;
-}
 
-.f-primary_nav-ecom_item {
-  /* we want to ul to remain and grow, so just hide the items */
-  display: none;
-}
+  /* we want to ul to remain and flex grow, so just hide the items */
+  > li {
+    display: none;
 
-.f-primary_nav-ecom_link {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding-right: 4px;
-  padding-left: 4px;
-  font-family: $font-face-semibold;
-  font-size: $font-size-200;
+    > a {
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+      font-family: $font-face-semibold;
+      font-size: $font-size-200;
+      color: #fff;
+      text-decoration: none;
+      @include transition_fast(color, background-color);
+
+      &.f-primary_nav-ecom_link-deals {
+        @include deals_link_base($f-nav-yellow);
+        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+      }
 
-  &.f-primary_nav-ecom_link-deals {
-    @include deals_link_base();
-  }
+      &::before {
+        position: absolute;
+        z-index: -1;
+        bottom: 0;
+        left: 0;
+        height: 4px;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.15);
+        content: '';
+        transform: scaleX(0);
+        @include transition_fast(transform);
+      }
 
-  &::before {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 4px;
-    width: 100%;
-    background-color: $color-forever_blue;
-    content: '';
-    transform: scaleX(0);
-    @include transition_fast(transform);
-  }
+      &:hover,
+      &.is-active,
+      &.is-meganav-open { background-color: rgba(0, 0, 0, 0.1); }
 
-  &.is-active,
-  &:hover {
-    &::before {
-      transform: scaleX(1);
+      &.is-active {
+        &::before { transform: scaleX(1); }
+      }
     }
   }
 }
@@ -125,79 +110,84 @@ $f-primary_nav-icon-count_badge-right: -4px;
   position: relative;
   display: flex;
   align-items: stretch;
-  margin-bottom: 0;
-  padding-left: 0;
+  margin: 0;
+  padding: 0;
   list-style: none;
-}
 
-.f-primary_nav-icon_item {
-  display: flex;
-  align-items: stretch;
-  font-size: $font-size-450;
-
-  //display flex here gets rid of extra vertical space with inline block
-  .f-primary_nav-icon_link {
+  > li {
     display: flex;
-    align-items: center;
-    padding: 0 6px;
-  }
-
-  .f-primary_nav-icon_link > .f-icon {
-    display: flex;
-  }
+    align-items: stretch;
+    font-size: $font-size-450;
 
-}
+    > a {
+      display: flex;
+      align-items: center;
+      padding: 0 6px;
+      color: #fff;
+      text-decoration: none;
+      @include transition_fast(color);
+      &:hover { color: $f-nav-icon-hover; }
+      > .f-icon { display: flex; }
+
+      &.f-primary_nav-icon_link-cart {
+        position: relative;
+
+        .f-primary_nav-icon_link-cart_count {
+          position: absolute;
+          top: $f-primary_nav-icon-count_badge-top;
+          right: $f-primary_nav-icon-count_badge-right;
+          width: 18px;
+          height: 18px;
+          border-radius: $border-radius-xl;
+          background-color: $f-nav-yellow;
+          color: $color-gray-800;
+          font-size: $font-size-000;
+          font-family: $font-face-semibold;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          pointer-events: none;
+        }
+      }
+    }
 
-.f-primary_nav-icon_link-cart {
-  position: relative;
+    //this overrides notification dropdown styles and lets nav own these styles, selectors and nesting is necessary for selector specificity
+    .f-primary_nav-icon_notification.f-notification_dropdown {
+      display: flex;
+      align-items: stretch;
 
-  .f-primary_nav-icon_link-cart_count {
-    position: absolute;
-    top: $f-primary_nav-icon-count_badge-top;
-    right: $f-primary_nav-icon-count_badge-right;
-    width: 18px;
-    height: 18px;
-    border-radius: $border-radius-xl;
-    background-color: $color-primary;
-    color: $color-white;
-    font-size: $font-size-000;
-    font-family: $font-face-semibold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-  }
+      .f-notification_dropdown-bell {
+        padding: 0 6px;
+        align-items: center;
 
-}
+        .f-notification_dropdown-bell_icon { color: #fff; }
 
-//this overrides notification dropdown styles and lets nav own these styles, selectors and nesting is necessary for selector specificity
-.f-primary_nav-icon_notification.f-notification_dropdown {
-  display: flex;
-  align-items: stretch;
+        &:hover {
+          .f-notification_dropdown-bell_icon { color: $f-nav-icon-hover; }
+        }
 
-  .f-notification_dropdown-bell {
-    padding: 0 6px;
-    align-items: center;
+        .f-notification_dropdown-bell_count {
+          top: $f-primary_nav-icon-count_badge-top;
+          right: $f-primary_nav-icon-count_badge-right;
+          background-color: $f-nav-yellow;
+          color: $color-gray-800;
+        }
+      }
+    }
 
-    .f-notification_dropdown-bell_count {
-      top: $f-primary_nav-icon-count_badge-top;
-      right: $f-primary_nav-icon-count_badge-right;
+    //this is a placeholder div in store that houses an icon for notifications while turbolinks is transitioning. Ensures there is no jumpiness
+    #mars-notifications {
+      padding: 0 6px;
+      align-self: center;
+      .fa { display:flex; }
     }
   }
 }
 
-//this is a placeholder div in store that houses an icon for notifications while turbolinks is transitioning. Ensures there is no jumpiness
-#mars-notifications {
-  padding: 0 6px;
-  align-self: center;
-
-  .fa { display:flex; }
-}
-
 .f-primary_nav-user_list {
   display: flex;
   align-items: center;
-  margin-bottom: 0;
+  margin: 0;
   padding-left: 5px;
   list-style: none;
 
@@ -212,31 +202,24 @@ $f-primary_nav-icon-count_badge-right: -4px;
     }
   }
 
-  .f-primary_nav-user-link-signup {
-    &.btn {
-      color: $color-white;
-    }
+  .f-primary_nav-user_link-signup {
+    &.btn { color: #fff; }
   }
 
-  .f-primary_nav-user-link-signin {
+  .f-primary_nav-user_link-signin {
     &.btn {
       &:link,
       &:hover,
       &:active,
       &:visited {
-        color: $color-gray-600;
+        color: #fff;
         text-decoration: none;
       }
-
-      &:hover {
-        color: $color-secondary;
-      }
     }
   }
 }
 
 .f-primary_nav-user_item-avatar {
-
   /* use below instead of display to hide so we retain padding */
   visibility: hidden;
   width: 0;
@@ -244,39 +227,31 @@ $f-primary_nav-icon-count_badge-right: -4px;
   .avatar {
     padding: 0;
     margin-right: 0;
+    border-width: 0;
   }
 }
 
-.f-primary_nav-user_item-logged_out {
-  display: none;
-}
+.f-primary_nav-user_item-logged_out { display: none; }
 
 .f-primary_nav-user_item-side_toggle {
   cursor: pointer;
   padding: 10px 10px 10px 5px;
   margin-right: -10px;
 
-  .f-primary_nav-user_icon_bar {
-    background-color: $color-gray-600;
+  span {
+    background-color: #fff;
     width: 20px;
     display: block;
     height: 2px;
     border-radius: 1px;
-    @include transition_fast(background-color, margin);
+    @include transition_normal(background-color, margin);
   }
 
-  .f-primary_nav-user_icon_bar:not(:first-child) {
-    margin-top: 4px;
-  }
+  span:not(:first-child) { margin-top: 4px; }
 
   &:hover {
-    .f-primary_nav-user_icon_bar {
-      background-color: $color_forever_blue;
-    }
-
-    .f-primary_nav-user_icon_bar:not(:first-child) {
-      margin-top: 6px;
-    }
+    span { background-color: $f-nav-icon-hover; }
+    span:not(:first-child) { margin-top: 6px; }
   }
 }
 
@@ -290,47 +265,50 @@ $f-primary_nav-icon-count_badge-right: -4px;
   bottom: 0;
   z-index: $f-primary_nav-side-zindex;
   width: $f-primary_nav-side-width;
-  padding: 0 20px;
-  background-color: $color-white;
+  background-color: #fff;
   box-shadow: $f-primary_nav-shadow;
   direction: rtl;
   text-align: left;
-  @include transition_normal(right);
+  @include transition_fast(right);
 
   &.is-onscreen {
     right: 0;
     width: 100%;
   }
+
+  .f-primary_nav-side_icon{
+    margin-right: 0.5em;
+  }
 }
 
 .f-primary_nav-side_section {
-  padding: 8px 0;
+  padding: 8px 20px;
   margin-bottom: 0;
   list-style: none;
-  border-bottom: 2px solid $color-gray-200;
+  border-bottom: 1px solid $color-gray-300;
   direction: ltr;
-
-  &:last-child {
-    border: none;
-  }
-
-  .f-primary_nav-side_signout_link {
-    &:link,
-    &:hover,
-    &:active,
-    &:visited {
-      color: $color-forever_red;
-    }
-  }
+  &:last-child { border: none; }
 
   .f-primary_nav-side_link_base {
-    text-transform: uppercase;
     display: block;
     font-family: $font-face-semibold;
-    font-size: $font-size-200;
-    padding: 8px 0;
+    font-size: $font-size-300;
+    padding: 6px 0;
+    color: $color-forever_blue;
+    text-decoration: none;
+    @include transition_fast(color);
+    &:hover { color: $color-gray-600;  }
   }
 
+  &.is-color-block {
+    border-bottom: none;
+    padding: 4px 20px;
+
+    .f-primary_nav-side_link_base {
+      color: #fff;
+      &:hover { color: #fff; }
+    }
+  }
 }
 
 .f-primary_nav-side_section-close {
@@ -345,7 +323,7 @@ $f-primary_nav-icon-count_badge-right: -4px;
   &::before,
   &::after {
     position: absolute;
-    right: 0;
+    right: 8px;
     width: 22px;
     height: 2px;
     content: ' ';
@@ -354,8 +332,8 @@ $f-primary_nav-icon-count_badge-right: -4px;
     @include transition_fast(background-color);
   }
 
-  &::before { transform: rotate($f-primary_nav-side_section-close_angle); }
-  &::after { transform: rotate(-($f-primary_nav-side_section-close_angle)); }
+  &::before { transform: rotate(45deg); }
+  &::after { transform: rotate(-45deg); }
 
   &:hover {
     &::before,
@@ -420,13 +398,10 @@ $f-primary_nav-icon-count_badge-right: -4px;
     line-height: 1;
     text-align: center;
   }
-
 }
 
 .f-primary_nav-side_section-ecom_list {
-  .f-primary_nav-side_ecom-deals_link {
-    @include deals_link_base();
-  }
+  .f-primary_nav-side_ecom-deals_link { @include deals_link_base(); }
 }
 
 .f-primary_nav-side_section-logged_out {
@@ -437,84 +412,179 @@ $f-primary_nav-icon-count_badge-right: -4px;
   }
 }
 
+.f-primary_nav_cpmeganav {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 94%;
+  max-width: 1300px;
+  background: #fff;
+  box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 0 0 8px 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  opacity: 1;
+  transition: opacity 0.15s ease-in-out;
+  z-index: inherit;
 
-//everything above xs
-@media (min-width: $screen-xs) {
-
-  .f-primary_nav-main {
-    padding: 0 15px;
+  &.hidden {
+    opacity: 0;
+    display: flex !important;
+    visibility: none;
+    top: -9999px;
+    left:-9999px;
   }
 
-  .f-primary_nav-logo_image {
-    height: 28px;
-    width: 175px;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 
-  .f-primary_nav-user_list {
-    padding-left: 10px;
-  }
+  > li {
+    padding: 20px 20px 0;
+    &:nth-child(even) { background-color: $color-gray-200; }
+
+    a {
+      display: block;
+      font-family: $font-face-semibold;
+      line-height: 1;
+    }
+
+    p {
+      margin: 0;
+      color: $color-forever_gray;
+      font-family: $font-face-regular;
+      line-height: 1.4;
+    }
+
+    > a { font-size: 20px; }
 
-  .f-primary_nav-icon_item {
-    font-size: $font-size-500;
+    .f-primary_nav_cpmeganav_title {
+      display: block;
+      font-family: $font-face-semibold;
+      line-height: 1;
+      font-size: 20px;
+    }
+
+    > p { font-size: $font-size-200; }
+
+    > ul {
+      padding-top: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+
+      > li {
+        min-width: 180px;
+        max-width: 300px;
+        min-height: 60px;
+        margin-bottom: 20px;
+
+        img {
+          float: left;
+          width: 60px;
+        }
+
+        > a {
+          font-size: 16px;
+          margin-left: 70px;
+        }
+
+        > p {
+          font-size: 12px;
+          margin: 8px 0 0 70px;
+        }
+
+        > ul {
+          margin: 4px 0 0 70px;
+
+          > li {
+            margin: 0 0 2px;
+            font-size: 12px;
+
+            span.badge {
+              border-radius: 2px;
+              padding: 2px 4px;
+              color: #fff;
+              background-color: $color-forever_orange;
+              font-size: 10px;
+            }
+
+            > a {
+              font-size: 12px;
+              display: inline-block;
+              font-family: $font-face-regular;
+            }
+          }
+        }
+      }
+    }
   }
+}
+
+//everything above xs
+@media (min-width: $screen-xs) {
+  .f-primary_nav-main { padding: 0 15px; }
+
+  .f-primary_nav-user_list { padding-left: 10px; }
 
   .f-primary_nav-user_item-avatar {
     visibility: visible;
     width: auto;
   }
+}
 
-  .f-primary_nav-side.is-onscreen {
-    width: $f-primary_nav-side-width;
+//everything above sm
+@media (min-width: $screen-sm) {
+  .f-primary_nav-ecom_list {
+    > li { display: flex; }
   }
+
+  .f-primary_nav-side.is-onscreen { width: $f-primary_nav-side-width; }
 }
 
 //everything above medium
 @media (min-width: $screen-md) {
+  .f-primary_nav-user_item-logged_out { display: flex; }
 
-  .f-primary_nav-ecom_item {
-    display: flex;
+  .f-primary_nav-side_section-ecom_list { display: none; }
+
+  .f-primary_nav-user_item-side_toggle {
+    &.is-unauthenticated { display: none; }
   }
 
-  .f-primary_nav-user_item-logged_out {
+  .f-primary_nav_cpmeganav {
     display: flex;
-  }
 
-  .f-primary_nav-side_section-ecom_list {
-    display: none;
-  }
+    > li {
+      > p { min-height: 42px; }
 
-  .f-primary_nav-user_item-side_toggle {
-    &.is-unauthenticated {
-      display: none;
+      &:nth-child(odd) { width: 28%; }
+
+      &:nth-child(2) {
+        width: 44%;
+        background-color: transparent;
+        border-style: solid;
+        border-width: 0 1px;
+        border-color: $color-gray-400;
+      }
     }
   }
 }
 
 //everything above lg
 @media (min-width: $screen-lg) {
-  .f-primary_nav-ecom_link {
-    padding-left: 8px;
-    padding-right: 8px;
-    font-size: $font-size-300;
+  .f-primary_nav-ecom_list {
+    > li > a { font-size: $font-size-300; }
   }
-}
 
-//bet
-@media (max-width: $screen-lg-max) and (min-width: $screen-md_to_lg) {
-  .f-primary_nav-ecom_link {
-    font-size: $font-size-250;
-  }
-}
-
-@media (max-width: $screen-md_to_lg) and (min-width: $screen-md) {
-  .f-primary_nav-logo_image {
-    height: 22px;
-    width: 138px;
-  }
-}
-
-@media (max-width: $screen-lg-max) and (min-width: $screen-md) {
-  .f-primary_nav-icon_item {
-    font-size: $font-size-450;
+  .f-primary_nav_cpmeganav {
+    > li {
+      &:nth-child(odd) { width: 25%; }
+      &:nth-child(2) { width: 50%; }
+    }
   }
 }