forever_style_guide 3.0.41 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/forever_style_guide/globals/_breakpoints.scss +1 -1
  3. data/app/assets/stylesheets/forever_style_guide/globals/_fonts.scss +2 -0
  4. data/app/assets/stylesheets/forever_style_guide/globals/_variables.scss +1 -1
  5. data/app/assets/stylesheets/forever_style_guide/modules/_all.scss +1 -0
  6. data/app/assets/stylesheets/forever_style_guide/modules/_dropdown-menu.scss +1 -0
  7. data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-account.scss +1 -5
  8. data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-ambassador.scss +32 -20
  9. data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-help.scss +21 -0
  10. data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns.scss +34 -12
  11. data/app/assets/stylesheets/forever_style_guide/modules/_nav-icons.scss +90 -37
  12. data/app/assets/stylesheets/forever_style_guide/modules/_nav.scss +17 -10
  13. data/app/assets/stylesheets/forever_style_guide/modules/_shame.scss +0 -4
  14. data/app/helpers/forever_style_guide/application_helper.rb +11 -2
  15. data/app/views/forever_style_guide/sections/components/navigation/_nav.erb +14 -6
  16. data/app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown.erb +8 -17
  17. data/app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown_menu.erb +3 -3
  18. data/app/views/forever_style_guide/sections/components/navigation/_nav_ambassador_dropdown.erb +8 -8
  19. data/app/views/forever_style_guide/sections/components/navigation/_nav_cart_icon.erb +2 -3
  20. data/app/views/forever_style_guide/sections/components/navigation/_nav_deals.erb +3 -0
  21. data/app/views/forever_style_guide/sections/components/navigation/_nav_help.erb +10 -0
  22. data/app/views/forever_style_guide/sections/components/navigation/_nav_help_dropdown_menu.erb +33 -0
  23. data/app/views/forever_style_guide/sections/components/navigation/_nav_inspiration.erb +3 -0
  24. data/app/views/forever_style_guide/sections/components/navigation/_nav_my_forever_dropdown.erb +1 -1
  25. data/app/views/forever_style_guide/sections/components/navigation/_nav_products_dropdown.erb +6 -4
  26. data/lib/forever_style_guide/version.rb +1 -1
  27. metadata +9 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 9aea47aa9023eb048cf26e7a5bc2766476ac6b06
4
- data.tar.gz: 415d4320b71cd34b9c1d35bfe4637463d7e0e241
3
+ metadata.gz: 0d8080d15e6315b53241e2d06ef0a3280d00222b
4
+ data.tar.gz: 4141f78e83acffda64cd9e475f9bd430cd4c0030
5
5
  SHA512:
6
- metadata.gz: 7e5953baab467b133c22d2c23e415b04a8ae9c4bb72fe912aa87c96a37041f515daa1c778809af4569062e1c08bdec56fde8cd5da4264c686066e11c45024a23
7
- data.tar.gz: d63a26232db25a3c1d43980c015ca3016910828fcad783b9f801766c1f2d3558886d792bcbbde3d562a681cbabe5e0bed10b8a0fc2ac5699e53c723ff41bb253
6
+ metadata.gz: b0cd0e4d985dba28915a8f010727f6ea76c8a6a0d963b47021b68606a533506e1c823992e8e2248c75a48d95191e96299c6a79da0d93fef6221292ab6c29d185
7
+ data.tar.gz: 48f8d1b92314845dff514357bbc62098a313f64fd037650afde06f92fd0fa1c84783b658909ac80fe49d82bc9662121f64492f21946e5dac601ac5cc12d903e1
@@ -45,7 +45,7 @@ $screen-xl-max: ($screen-xxl-min - 1) !global;
45
45
 
46
46
 
47
47
  //** Point at which the navbar becomes uncollapsed.
48
- $grid-float-breakpoint: 920px!global;
48
+ $grid-float-breakpoint: $screen-lg !global;
49
49
  //** Point at which the navbar begins collapsing.
50
50
  $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !global;
51
51
 
@@ -33,6 +33,7 @@ $font-face-gotham: 'Gotham A', 'Gotham B', Helvetica, Arial, sans-serif
33
33
 
34
34
  /* =font sizes
35
35
  ---------------------------------------------------------------------------- */
36
+ $font-size-000: fontify('000', 10px) !default;
36
37
  $font-size-100: fontify('100', 12px) !default;
37
38
  $font-size-200: fontify('200', 14px) !default;
38
39
  $font-size-300: fontify('300', 16px) !default;
@@ -46,6 +47,7 @@ $font-size-800: fontify('800', 64px) !default;
46
47
  $font-size-large: fontify('lg', $font-size-400) !global;
47
48
  $font-size-default: fontify('default', $font-size-300) !default;
48
49
  $font-size-small: fontify('sm', $font-size-100) !global;
50
+ $font-size-xsmall: fontify('xs', $font-size-000) !default;
49
51
 
50
52
  @each $id, $font-size in $font-sizes {
51
53
  .font-size-#{$id} {
@@ -21,7 +21,7 @@ $padding-xs-horizontal: 6px !global;
21
21
 
22
22
  /* =variables
23
23
  ---------------------------------------------------------------------------- */
24
- $header-height: 50px;
24
+ $header-height: 40px;
25
25
 
26
26
  $footer-height: 455px;
27
27
  $footer-height-sm: 340px;
@@ -14,6 +14,7 @@
14
14
  @import "nav-dropdowns";
15
15
  @import "nav-dropdowns-account";
16
16
  @import "nav-dropdowns-ambassador";
17
+ @import "nav-dropdowns-help";
17
18
  @import "nav-fixed";
18
19
  @import "nav-icons";
19
20
  @import "nav-item-list";
@@ -3,6 +3,7 @@
3
3
  padding-top: 0;
4
4
  padding-bottom: 0;
5
5
  border-radius: $border-radius-large;
6
+ box-shadow: none;
6
7
 
7
8
  > li > a {
8
9
  padding-top: 10px;
@@ -1,6 +1,4 @@
1
1
  .dropdown-menu-account {
2
- width: 100%;
3
- right: 0;
4
2
  padding-top: 15px;
5
3
  border-bottom-right-radius: $border-radius-large;
6
4
  border-bottom-left-radius: $border-radius-large;
@@ -8,9 +6,7 @@
8
6
  .progress {
9
7
  margin-bottom: 10px;
10
8
  }
11
- @media (max-width: $grid-float-breakpoint-max) {
12
- @include nav-border(bottom);
13
- }
9
+
14
10
  @media (min-width: $grid-float-breakpoint) {
15
11
  width: $nav-icon-width * 4;
16
12
  }
@@ -1,28 +1,16 @@
1
- $your-ambassador-intro-text-width: 110px;
1
+ $ambassador-name-max-width: 140px; //max width so that right nav won't overlap with logo
2
+ $ambassador-name-max-width-mobile: 228px;
3
+ $distance-to-close-ambassador-text-gap: -3px;
2
4
 
3
5
  .dropdown-ambassador {
4
6
  .dropdown-toggle {
5
- padding: 0 10px;
6
-
7
- @media (max-width: $grid-float-breakpoint-max) {
8
- padding: 0 0 0 $offcanvas-padding !important; // overriding .navbar .nav.navbar-nav > li > a
9
- }
7
+ padding-top: 0 !important; // overriding .navbar .nav.navbar-nav > li > a
10
8
  }
11
9
  .fa-chevron-down {
12
- position: relative;
13
- margin-left: 10px;
14
- top: -10px;
15
-
16
10
  @media (max-width: $grid-float-breakpoint-max) {
17
11
  top: $offcanvas-padding;
18
12
  }
19
13
  }
20
- &:last-child {
21
- @media (max-width: $grid-float-breakpoint-max) {
22
- @include nav-border(bottom);
23
- border-color: color('gray-600');
24
- }
25
- }
26
14
  .dropdown-ambassador-container {
27
15
  @media (max-width: $grid-float-breakpoint-max) {
28
16
  width: $offcanvas-width - $offcanvas-padding;
@@ -44,17 +32,41 @@ $your-ambassador-intro-text-width: 110px;
44
32
  line-height: 1.3;
45
33
  }
46
34
  }
35
+
36
+ @media (max-width: $grid-float-breakpoint-max) {
37
+ @include nav-border(bottom);
38
+ border-color: color('gray-600');
39
+ }
40
+ }
41
+ .dropdown-ambassador-text_container {
42
+ display: inline-block;
47
43
  }
48
44
  .dropdown-ambassador-intro_text {
49
- position: relative;
45
+ margin-bottom: $distance-to-close-ambassador-text-gap * 2;
46
+ color: inherit;
47
+ font-family: $font-face-gotham;
48
+ font-size: $font-size-xsmall !important; // override in web app .area-settings p
49
+ font-weight: $font-weight-normal;
50
+ text-transform: capitalize;
51
+
52
+ @media (max-width: $grid-float-breakpoint-max) {
53
+ margin-bottom: $distance-to-close-ambassador-text-gap;
54
+ }
50
55
 
51
56
  @media (min-width: $grid-float-breakpoint) {
52
- top: 5px;
57
+ text-align: center;
53
58
  }
54
59
  }
55
60
  .dropdown-ambassador-primary_text {
56
- display: inline-block;
57
- min-width: $your-ambassador-intro-text-width; //allows for names shorter than the Your Ambassador intro text
61
+ max-width: $ambassador-name-max-width;
62
+ font-family: $font-face-gotham;
63
+ white-space: nowrap;
64
+ overflow: hidden;
65
+ text-overflow: ellipsis;
66
+
67
+ @media (max-width: $grid-float-breakpoint-max) {
68
+ max-width: $ambassador-name-max-width-mobile; //max width so that name wont overlap chevron icon
69
+ }
58
70
  }
59
71
  .dropdown-ambassador-edit_btn {
60
72
  display: block;
@@ -0,0 +1,21 @@
1
+ $supporting-text-icon-offset: 33px;
2
+
3
+ .nav-dropdown-help {
4
+ .icon-offset {
5
+ display: block;
6
+ padding-left: $supporting-text-icon-offset;
7
+ line-height: $font-size-large;
8
+ }
9
+ }
10
+ .dropdown-menu-help {
11
+ padding-top: 15px;
12
+ border-bottom-right-radius: $border-radius-large;
13
+ border-bottom-left-radius: $border-radius-large;
14
+
15
+ @media (min-width: $grid-float-breakpoint) {
16
+ width: $nav-icon-width * 4;
17
+ }
18
+ }
19
+ .nav-help-section-title {
20
+ font-family: $font-face-semibold;
21
+ }
@@ -1,8 +1,9 @@
1
- $dropdown-height: 373px; // Allows for entire hero_simple text to display from $screen-md and up
1
+ $dropdown-height: 345px; // Allows for entire hero_simple text to display from $screen-md and up
2
2
  $nav-icon-width: 60px;
3
+ $dropdown-spacer-height: 51px;
3
4
 
4
5
  @mixin dropdown-content-style {
5
- display: block;
6
+ display: inline-block;
6
7
  color: color('gray-300');
7
8
  font-family: $font-face-light;
8
9
  font-size: $font-size-large;
@@ -49,6 +50,15 @@ $nav-icon-width: 60px;
49
50
  }
50
51
  }
51
52
 
53
+ .dropdown {
54
+ &:last-child {
55
+ @media (max-width: $grid-float-breakpoint-max) {
56
+ @include nav-border(bottom);
57
+ border-color: color('gray-600');
58
+ }
59
+ }
60
+ }
61
+
52
62
  // Override bootstrap default to show dropdowns at custom breakpoint
53
63
  @media (max-width: $grid-float-breakpoint-max) {
54
64
  .navbar-nav .open .dropdown-menu {
@@ -69,6 +79,17 @@ $nav-icon-width: 60px;
69
79
  }
70
80
  }
71
81
 
82
+ .navbar-deals {
83
+ //ugly cousin active state
84
+ &.active {
85
+ @include active-style($color-forever_orange);
86
+ }
87
+
88
+ @media (min-width: $grid-float-breakpoint) {
89
+ color: $color-forever-orange !important;
90
+ }
91
+ }
92
+
72
93
  // Mega Menu Expanded Styles
73
94
  .navbar .dropdown.open > .dropdown-toggle {
74
95
  color: color('gray-400');
@@ -90,6 +111,9 @@ $nav-icon-width: 60px;
90
111
  &.dropdown-toggle-ambassador {
91
112
  @include mobile-active-dropdown-bg($color-forever_ambassador);
92
113
  }
114
+ &.dropdown-toggle-help{
115
+ @include mobile-active-dropdown-bg($color-primary);
116
+ }
93
117
  }
94
118
  }
95
119
 
@@ -99,7 +123,6 @@ $nav-icon-width: 60px;
99
123
  visibility: hidden;
100
124
  border: none;
101
125
  border-radius: 0;
102
- @extend %card-shadow;
103
126
 
104
127
  @media (max-width: $grid-float-breakpoint-max) {
105
128
  padding-left: 5px;
@@ -112,6 +135,10 @@ $nav-icon-width: 60px;
112
135
  }
113
136
  }
114
137
 
138
+ .dropdown-menu-nav-spacer {
139
+ margin-top: $dropdown-spacer-height;
140
+ }
141
+
115
142
  .dropdown-menu-nav-extra_column {
116
143
  @media (max-width: $grid-float-breakpoint-max) {
117
144
  margin-top: -10px; // compensate for l-padded-thin
@@ -123,21 +150,16 @@ a.dropdown-menu-nav-link {
123
150
  @include dropdown-content-style;
124
151
 
125
152
  &:not(.dropdown-menu-nav-link-no_margin) {
126
- margin-top: 10px;
127
-
128
- @media (min-width: $screen-md-min) {
129
- margin-top: 15px;
130
- }
153
+ margin-top: 8px;
131
154
  }
132
155
  &.dropdown-menu-nav-link-sm {
133
- font-size: $font-size-default;
156
+ @media (min-width: $grid-float-breakpoint) {
157
+ font-size: $font-size-200;
158
+ }
134
159
  }
135
160
  .fa {
136
161
  margin-right: 10px;
137
162
  }
138
- span {
139
- font-family: inherit; // persist font-style for conditionally hidden or shown text (span class="hidden-md")
140
- }
141
163
  }
142
164
  .dropdown-menu-account-item {
143
165
  .dropdown-menu-nav-link {
@@ -1,16 +1,27 @@
1
- $nav-icon-width: 60px;
2
1
  $nav-icon-margin: 3px;
2
+ $cart-count-xsmall-offset: 2px;
3
+ $cart-count-mobile-offset: 6px;
3
4
  $cart-count-width: 20px;
5
+ $cart-count-width-small: 17px;
6
+ $cart-icon-xsmall-width: 30px + 10px; //10px to account for extra spacing
7
+ $cart-count-icon-overlap: 8px;
8
+ $icon-width: 28px;
9
+ $cart-tab-padding: 20px;
10
+ $cart-icon-vertical-offset: 7px;
11
+ $cart-icon-vertical-offset-mobile: 4px;
12
+ $deals-icon-horizontal-offset: 3px;
13
+ $deals-icon-horizontal-offset-mobile: 4px;
14
+ $chevron-bottom-alignment-offset: 15px;
15
+ $chevron-right-alignment-offset: 5px;
16
+ $screen-below-xs: $screen-xs - 1;
4
17
 
5
18
  @mixin chevron-style {
6
- position: absolute;
7
19
  right: 15px;
8
20
  font-size: $font-size-default;
9
21
  }
10
22
 
11
23
  .nav-icon-stack {
12
- width: $nav-icon-width;
13
- padding: 7px 4px 4px 4px !important; // overriding .navbar-nav > li > a
24
+ padding: 3px 4px 4px 4px !important; // overriding .navbar-nav > li > a
14
25
  text-align: center;
15
26
 
16
27
  .fa {
@@ -18,46 +29,44 @@ $cart-count-width: 20px;
18
29
  position: relative;
19
30
  top: $nav-icon-margin;
20
31
  }
21
- }
22
- .nav-icon-label {
23
- font-size: $font-size-100;
24
- line-height: $font-size-400;
25
-
26
- &.has_count {
27
- position: absolute;
28
- top: 26px; // align labels
29
- }
30
- }
31
32
 
32
- // Style offcanvas account icons consistent w/ product dropdowns
33
- @media (max-width: $grid-float-breakpoint-max) {
34
- .navbar-account_item .nav-icon-stack {
35
- width: auto;
36
- padding: 15px !important; // override .navbar .nav.navbar-nav > li > a
37
- text-align: left;
33
+ .icon-bar {
34
+ display: block;
35
+ width: $icon-width;
36
+ height: 4px;
37
+ border-radius: $border-radius-xl;
38
+ margin: auto;
39
+ background-color: $color-gray-600 !important; //override bootstrap .navbar-default .navbar-toggle .icon-bar
38
40
 
39
- .fa-chevron-down {
40
- top: 15px;
41
+ &:first-of-type {
42
+ margin-top: 1px;
41
43
  }
42
- .fa-chevron-right {
43
- top: 15px;
44
- @include chevron-style;
45
- }
46
- .nav-icon-label {
47
- font-size: $font-size-500;
44
+
45
+ &:last-of-type {
46
+ margin-bottom: 3px;
48
47
  }
49
48
  }
50
49
  }
50
+ .nav-icon-label {
51
+ font-size: $font-size-xsmall;
52
+ line-height: $font-size-xsmall;
53
+ font-family: $font-face-gotham;
54
+ }
51
55
 
52
56
  .navbar-default .navbar-nav {
53
57
  .dropdown-toggle .fa-chevron-down {
54
- margin-left: $nav-icon-margin;
55
- font-size: 9px;
58
+ position: absolute;
59
+ font-size: $font-size-xsmall;
56
60
  @include transition(transform 0.2s ease-in-out);
57
61
 
58
62
  @media(max-width: $grid-float-breakpoint-max) {
59
63
  @include chevron-style;
60
64
  }
65
+
66
+ @media(min-width: $grid-float-breakpoint) {
67
+ right: $chevron-right-alignment-offset;
68
+ bottom: $chevron-bottom-alignment-offset;
69
+ }
61
70
  }
62
71
  .dropdown.open .dropdown-toggle .fa-chevron-down {
63
72
  @include transform(rotate(180deg));
@@ -68,12 +77,13 @@ $cart-count-width: 20px;
68
77
  .navbar-default .navbar-toggle,
69
78
  a.cart-icon {
70
79
  height: $header-height;
71
- width: $header-height;
80
+ width: $icon-width + $cart-tab-padding;
72
81
  margin-top: 0;
73
82
  margin-right: 0;
74
83
  margin-bottom: 0;
75
84
  color: color('gray-600');
76
85
  font-size: $font-size-default;
86
+ text-align: center;
77
87
  border: 0;
78
88
  border-radius: 0;
79
89
  z-index: $zindex-navbar-fixed; // make sure toggles appear above logo
@@ -84,9 +94,6 @@ a.cart-icon {
84
94
  text-decoration: none;
85
95
  background-color: transparent;
86
96
  }
87
- &.pull-left {
88
- @include nav-border(right);
89
- }
90
97
  &.navbar-toggle-close {
91
98
  width: 100%;
92
99
  padding: 0;
@@ -100,14 +107,32 @@ a.cart-icon {
100
107
  height: $header-height;
101
108
  }
102
109
  }
110
+ &.with-count {
111
+ width: $cart-count-width + $icon-width + $cart-tab-padding;
112
+
113
+ @media (max-width: $grid-float-breakpoint-max) {
114
+ width: $cart-count-width + $icon-width - $cart-count-icon-overlap + $cart-tab-padding;
115
+ }
116
+
117
+ @media (max-width: $screen-below-xs) {
118
+ width: $cart-count-width + $cart-icon-xsmall-width;
119
+ }
120
+ }
103
121
  }
122
+
104
123
  a.cart-icon {
124
+ padding-top: $cart-icon-vertical-offset-mobile;
125
+
105
126
  @media (max-width: $grid-float-breakpoint-max) {
106
127
  position: absolute;
107
128
  right: 0;
108
- @include nav-border(left);
129
+ }
130
+
131
+ @media(min-width: $grid-float-breakpoint) {
132
+ padding-top: $cart-icon-vertical-offset !important; //override .nav.navbar-nav > li > a
109
133
  }
110
134
  }
135
+
111
136
  .cart-icon-count {
112
137
  display: inline-block;
113
138
  float: right;
@@ -116,8 +141,36 @@ a.cart-icon {
116
141
  padding-top: 1px; // vertical align number in circle
117
142
  font-size: $font-size-200;
118
143
  border-radius: 50%;
144
+
145
+ @media (max-width: $screen-below-xs) {
146
+ margin-right: $cart-count-xsmall-offset;
147
+ }
148
+
149
+ @media (min-width: $screen-xs) and (max-width: $grid-float-breakpoint-max) {
150
+ margin-right: $cart-count-mobile-offset;
151
+ }
152
+
153
+ @media (max-width: $grid-float-breakpoint-max) {
154
+ position: absolute;
155
+ right: 3px;
156
+ top: 2px;
157
+ margin-right: 0;
158
+ margin-top: 0;
159
+ min-width: $cart-count-width-small;
160
+ height: $cart-count-width-small;
161
+ font-size: $font-size-100;
162
+ box-shadow: 0px 0px 0px 2px white;
163
+ }
119
164
  }
120
165
 
121
- .navbar-toggle-close-left {
122
- @include nav-border(right);
166
+ .deals-icon {
167
+ @media (max-width: $grid-float-breakpoint-max) {
168
+ margin-right: $deals-icon-horizontal-offset-mobile;
169
+ float: left;
170
+ }
171
+
172
+ @media (min-width: $grid-float-breakpoint) {
173
+ vertical-align: top;
174
+ margin-left: $deals-icon-horizontal-offset;
175
+ }
123
176
  }
@@ -1,5 +1,5 @@
1
1
  $offcanvas-width: 270px;
2
- $offcanvas-padding: 15px;
2
+ $offcanvas-padding: 10px;
3
3
  $nav-bg-color: color('gray-700');
4
4
 
5
5
  @mixin nav-border($sides...) {
@@ -20,7 +20,8 @@ $nav-bg-color: color('gray-700');
20
20
  left: 0;
21
21
  top: 0;
22
22
  margin: auto;
23
- padding: $padding-small-vertical 0 0;
23
+ padding: $padding-xs-vertical 0 0;
24
+ height: $header-height;
24
25
  text-align: center;
25
26
 
26
27
  .navbar-brand-logo-xs {
@@ -34,6 +35,7 @@ $nav-bg-color: color('gray-700');
34
35
 
35
36
  .navbar-brand-logo-xs {
36
37
  display: block;
38
+ height: 100%;
37
39
  }
38
40
  .navbar-brand-logo {
39
41
  display: none;
@@ -41,6 +43,7 @@ $nav-bg-color: color('gray-700');
41
43
  }
42
44
  }
43
45
  .navbar {
46
+ min-height: $header-height;
44
47
  border-radius: 0;
45
48
  border: none;
46
49
  @extend %card-shadow;
@@ -56,24 +59,34 @@ $nav-bg-color: color('gray-700');
56
59
 
57
60
  > li > a {
58
61
  height: $header-height;
62
+ padding: $offcanvas-padding; /* bootstrap override */
59
63
  color: color('gray-400');
60
- font-size: $font-size-500;
64
+ font-size: $font-size-100;
65
+ font-weight: $font-weight-bold;
66
+ font-family: $font-face-gotham;
67
+ text-transform: uppercase;
61
68
 
62
69
  @media (max-width: $grid-float-breakpoint-max) {
63
70
  padding-top: $offcanvas-padding;
71
+ font-size: $font-size-large;
64
72
  @include nav-border(top);
65
73
  border-color: color('gray-600')
66
74
  }
67
75
 
68
76
  @media (min-width: $grid-float-breakpoint) {
77
+ position: relative;
69
78
  color: color('gray-600');
70
- font-size: $font-size-default;
79
+
80
+ &.dropdown-toggle {
81
+ padding-right: 20px;
82
+ }
71
83
  }
72
84
  &:hover {
73
85
  @media (min-width: $grid-float-breakpoint) {
74
86
  background-color: color('gray-300');
75
87
  }
76
88
  }
89
+
77
90
  }
78
91
  .dropdown.open > .dropdown-toggle {
79
92
  color: color('white');
@@ -99,12 +112,6 @@ $nav-bg-color: color('gray-700');
99
112
  }
100
113
  }
101
114
 
102
- .navbar-account_item {
103
- @media (min-width: $grid-float-breakpoint) {
104
- @include nav-border(left);
105
- }
106
- }
107
-
108
115
  .navbar-account-signed_out_btn {
109
116
  position: absolute;
110
117
  width: $offcanvas-width - ($offcanvas-padding * 2) - 5; // 5 = .dropdown-menu-nav padding-left
@@ -26,10 +26,6 @@
26
26
  .navbar-nav > li {
27
27
  float: none;
28
28
  }
29
- .navbar-nav > li > a {
30
- padding-top: 10px;
31
- padding-bottom: 10px;
32
- }
33
29
  .collapse.in {
34
30
  display:block !important;
35
31
  }
@@ -89,6 +89,11 @@ module ForeverStyleGuide
89
89
  is_active?
90
90
  end
91
91
 
92
+ def is_in_deals_dropdown?
93
+ @pages = ['promotions', 'deals']
94
+ is_active?
95
+ end
96
+
92
97
  #User storage methds as seen in web app user.rb
93
98
  def capacity_readable
94
99
  if current_user
@@ -213,8 +218,8 @@ module ForeverStyleGuide
213
218
  www_url('/projects')
214
219
  end
215
220
 
216
- def promotions_url
217
- www_url('/promotions')
221
+ def deals_url
222
+ www_url('/deals')
218
223
  end
219
224
 
220
225
  def shipping_info_url
@@ -301,6 +306,10 @@ module ForeverStyleGuide
301
306
  www_url('/page_prints')
302
307
  end
303
308
 
309
+ def photo_prints_url
310
+ www_url('/photo_prints')
311
+ end
312
+
304
313
  def gift_certificate_url
305
314
  www_url('/gift_certificates')
306
315
  end
@@ -8,8 +8,10 @@
8
8
 
9
9
  <div class='navbar-header'>
10
10
  <button type="button" class="navbar-toggle offcanvas-toggle pull-left nav-icon-stack" data-toggle="offcanvas" data-target="#js-main-nav-offcanvas">
11
- <i class='fa fa-reorder'></i>
12
- <span class='nav-icon-label'>Menu</span>
11
+ <span class="icon-bar"></span>
12
+ <span class="icon-bar"></span>
13
+ <span class="icon-bar"></span>
14
+ <div class='nav-icon-label'>Menu</div>
13
15
  </button>
14
16
 
15
17
  <div class="navbar-brand">
@@ -30,10 +32,10 @@
30
32
 
31
33
  <ul class='nav navbar-nav navbar-left'>
32
34
 
33
- <li class="visible-xs visible-sm">
35
+ <li class="hidden-lg">
34
36
  <div class="navbar-toggle navbar-toggle-close color_block-white" id="js-close-main-nav">
35
- <div class="nav-icon-stack pull-left navbar-toggle-close-left">
36
- <i class='fa fa-close'></i>
37
+ <div class="nav-icon-stack pull-left navbar-toggle">
38
+ <i class='fa fa-lg fa-close'></i>
37
39
  <span class='nav-icon-label'>Close</span>
38
40
  </div>
39
41
  </div>
@@ -50,11 +52,17 @@
50
52
  <li class='dropdown dropdown-full_width'>
51
53
  <%= render partial: "forever_style_guide/sections/components/navigation/nav_community_dropdown" %>
52
54
  </li>
55
+
56
+ <li class=''>
57
+ <%= render partial: "forever_style_guide/sections/components/navigation/nav_deals" %>
58
+ </li>
53
59
  </ul>
54
60
 
55
61
  <ul class='nav navbar-nav navbar-right'>
56
- <%= render partial: "forever_style_guide/sections/components/navigation/nav_account_dropdown" %>
62
+ <%= render partial: "forever_style_guide/sections/components/navigation/nav_inspiration" %>
63
+ <%= render partial: "forever_style_guide/sections/components/navigation/nav_help" %>
57
64
  <%= render partial: "forever_style_guide/sections/components/navigation/nav_ambassador_dropdown" %>
65
+ <%= render partial: "forever_style_guide/sections/components/navigation/nav_account_dropdown" %>
58
66
  </ul>
59
67
 
60
68
  <%= render partial: "forever_style_guide/sections/components/navigation/nav_account_signed_out_mobile" %>
@@ -1,21 +1,13 @@
1
1
  <!-- Show cart in navbar right on desktop: see nav.erb for mobile -->
2
- <li class='navbar-account_item navbar-account_item-cart hidden-grid-float-breakpoint'>
2
+ <li class="navbar-account_item-cart hidden-grid-float-breakpoint">
3
3
  <%= render partial: "forever_style_guide/sections/components/navigation/nav_cart_icon" %>
4
4
  </li>
5
5
 
6
6
  <% if defined?(current_user) && current_user.present? %>
7
- <li class='navbar-account_item-inbox navbar-account_item'>
8
- <%= link_to inbox_url, class: "nav-icon-stack hidden-grid-float-breakpoint", title: "Organize Photos from Your Forever Inbox" do %>
9
- <i class='fa fa-inbox'></i>
10
- <span class="nav-icon-label">Inbox</span>
11
- <% end %>
12
- </li>
13
-
14
- <li class='dropdown navbar-account_item'>
15
- <%= link_to nil, class: 'nav-icon-stack dropdown-toggle dropdown-toggle-account', :data => { :toggle => 'dropdown' } do %>
16
- <i class='fa fa-user hidden-grid-float-breakpoint'></i>
17
- <span class="nav-icon-label">Account</span>
18
- <i class='fa fa-chevron-down visible-grid-float-breakpoint'></i>
7
+ <li class='dropdown'>
8
+ <%= link_to nil, class: 'dropdown-toggle dropdown-toggle-account', :data => { :toggle => 'dropdown' } do %>
9
+ Account
10
+ <i class='fa fa-chevron-down'></i>
19
11
  <% end %>
20
12
 
21
13
  <div class='dropdown-menu dropdown-menu-nav dropdown-menu-account color_block-gray-700'>
@@ -24,10 +16,9 @@
24
16
  </li>
25
17
 
26
18
  <% else %>
27
- <li class='dropdown navbar-account_item hidden-grid-float-breakpoint'>
28
- <%= link_to login_url, class: 'nav-icon-stack' do %>
29
- <i class='fa fa-user hidden-grid-float-breakpoint'></i>
30
- <span class='nav-icon-label'>Log In</span>
19
+ <li class='dropdown hidden-grid-float-breakpoint'>
20
+ <%= link_to login_url do %>
21
+ Log In
31
22
  <% end %>
32
23
  </li>
33
24
  <% end %>
@@ -29,7 +29,7 @@
29
29
  <% end %>
30
30
  </li>
31
31
 
32
- <li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-xs hidden-sm"></li>
32
+ <li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin visible-lg"></li>
33
33
  <% end %>
34
34
 
35
35
  <li class="dropdown-menu-account-item <%= 'hide' if current_user.superadmin? %>">
@@ -50,7 +50,7 @@
50
50
  <i class='fa fa-suitcase fa-fw'></i>My Back Office
51
51
  <% end %>
52
52
  </li>
53
- <li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-xs hidden-sm"></li>
53
+ <li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin visible-lg"></li>
54
54
  <% end %>
55
55
 
56
56
  <li class="dropdown-menu-account-item">
@@ -77,7 +77,7 @@
77
77
  <% end %>
78
78
  </li>
79
79
 
80
- <li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-xs hidden-sm"></li>
80
+ <li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin visible-lg"></li>
81
81
 
82
82
  <li class="dropdown-menu-account-item">
83
83
 
@@ -1,13 +1,13 @@
1
- <li class='dropdown dropdown-full_width dropdown-ambassador navbar-account_item'>
1
+ <li class='dropdown dropdown-full_width dropdown-ambassador'>
2
2
  <%= link_to nil, class: 'dropdown-toggle dropdown-toggle-ambassador', :data => { :toggle => 'dropdown' } do %>
3
- <div>
4
- <small class="dropdown-ambassador-intro_text">
5
- <%= has_ambassador? ? 'Your Ambassador' : 'Find or join Forever' %>
6
- </small>
3
+ <div class="dropdown-ambassador-text_container">
4
+ <p class="dropdown-ambassador-intro_text">
5
+ <%= has_ambassador? ? 'Your Ambassador' : 'Discover' %>
6
+ </p>
7
+ <div class="dropdown-ambassador-primary_text">
8
+ <%= has_ambassador? ? current_ambassador.name : 'Ambassadors' %>
9
+ </div>
7
10
  </div>
8
- <span class="dropdown-ambassador-primary_text">
9
- <%= has_ambassador? ? current_ambassador.name : 'Ambassadors' %>
10
- </span>
11
11
  <i class='fa fa-chevron-down'></i>
12
12
  <% end %>
13
13
 
@@ -1,5 +1,4 @@
1
- <%= link_to cart_url, class: "nav-icon-stack cart-icon", title:'View Your Shopping Cart', id: 'mini-cart' do %>
1
+ <%= link_to cart_url, class: "cart-icon #{'with-count' if has_item_in_cart?}", title:'View Your Shopping Cart', id: 'mini-cart' do %>
2
2
  <span class="color-white color_block-primary cart-icon-count <%= 'hidden' unless has_item_in_cart? %>"><%= defined?(current_order) ? current_order.product_count : 0 %></span>
3
- <i class='fa fa-shopping-cart'></i>
4
- <span class="nav-icon-label cart-icon-label <%= has_item_in_cart? ? 'has_count' : '' %>">Cart</span>
3
+ <i class='fa fa-2x fa-shopping-cart'></i>
5
4
  <% end %>
@@ -0,0 +1,3 @@
1
+ <%= link_to deals_url, class: "navbar-deals #{'active' if is_in_deals_dropdown?}", title: 'View Deals, Sales, and Promotions' do %>
2
+ Deals<i class='fa fa-star deals-icon'></i>
3
+ <% end %>
@@ -0,0 +1,10 @@
1
+ <li class='dropdown'>
2
+ <%= link_to nil, class: 'dropdown-toggle dropdown-toggle-help', :data => { :toggle => 'dropdown' } do %>
3
+ Help
4
+ <i class='fa fa-chevron-down'></i>
5
+ <% end %>
6
+
7
+ <div class='dropdown-menu dropdown-menu-nav dropdown-menu-help color_block-gray-700'>
8
+ <%= render partial: "forever_style_guide/sections/components/navigation/nav_help_dropdown_menu" %>
9
+ </div>
10
+ </li>
@@ -0,0 +1,33 @@
1
+ <div class='container-fluid nav-dropdown-help'>
2
+ <div class='row'>
3
+ <div class='col-xs-12'>
4
+
5
+ <h3 class="dropdown-menu-nav-title page-title color-primary">Contact Support</h3>
6
+ <ul class="list-unstyled">
7
+
8
+ <li class="dropdown-menu-account-item l-section-close">
9
+ <%= link_to "tel:1-888-367-3837", class: 'dropdown-menu-nav-link dropdown-menu-nav-link-no_margin', title: 'Call Customer Support' do %>
10
+ <i class='fa fa-phone fa-fw'></i><span class="nav-help-section-title">Call 1-888-FOREVER</span> <span class="icon-offset">(1-888-367-3837)</span>
11
+ <% end %>
12
+ </li>
13
+
14
+ <li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-xs hidden-sm"></li>
15
+
16
+ <li class="dropdown-menu-account-item l-section-close">
17
+ <%= link_to "mailto:support@forever.com", class: 'dropdown-menu-nav-link dropdown-menu-nav-link-no_margin', title: 'Email Customer Support' do %>
18
+ <i class='fa fa-envelope fa-fw'></i><span class="nav-help-section-title">Email</span> <span class="icon-offset">support@forever.com</span>
19
+ <% end %>
20
+ </li>
21
+
22
+ <li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-xs hidden-sm"></li>
23
+
24
+ <li class="dropdown-menu-account-item l-section-close">
25
+ <%= link_to help_center_url, class: 'dropdown-menu-nav-link dropdown-menu-nav-link-no_margin', title: 'Search the Forever Help Center', target: '_blank' do %>
26
+ <i class='fa fa-search fa-fw'></i><span class="nav-help-section-title">Search</span> <span class="icon-offset"><%= trademark('Forever') %> Help Center</span>
27
+ <% end %>
28
+ </li>
29
+
30
+ </ul>
31
+ </div>
32
+ </div>
33
+ </div>
@@ -0,0 +1,3 @@
1
+ <li>
2
+ <%= link_to "Inspiration", blog_url, title: 'Get Inspired at the Forever Blog', target: "_blank" %>
3
+ </li>
@@ -109,7 +109,7 @@
109
109
  </div>
110
110
 
111
111
  <div class='col-grid-float-3 l-padded-thin dropdown-menu-nav-extra_column'>
112
- <div class="hidden-grid-float-breakpoint l-section-far"></div>
112
+ <div class="hidden-grid-float-breakpoint dropdown-menu-nav-spacer"></div>
113
113
  <ul class="list-unstyled">
114
114
  <li>
115
115
  <%= link_to zendesk_inbox_video_url, class: 'dropdown-menu-nav-link', title: 'How to Use Your Inbox in Forever - Video Tutorial', target: '_blank' do %>
@@ -115,6 +115,10 @@
115
115
  <li>
116
116
  <%= link_to '- Page Prints', page_prints_url, class: 'dropdown-menu-nav-link', title: 'Create and Print Scrapbooking Pages Online or with Artisan Scrapbooking Software' %>
117
117
  </li>
118
+
119
+ <li>
120
+ <%= link_to '- Photo Prints', photo_prints_url, class: 'dropdown-menu-nav-link', title: 'Print Photos for Pickup at Walgreens® or Duane Reade®' %> <small class="color-orange">NEW!</small>
121
+ </li>
118
122
  </ul>
119
123
  </li>
120
124
  </ul>
@@ -125,9 +129,7 @@
125
129
 
126
130
  <ul class="list-unstyled">
127
131
  <li>
128
- <%= link_to promotions_url, class: 'dropdown-menu-nav-link', title: 'Photo Printing, Digital Art, and Storage Promotions' do %>
129
- <i class='fa fa-star'></i>Current Promotions
130
- <% end %>
132
+ <%= link_to 'Current Deals', deals_url, class: 'dropdown-menu-nav-link', title: 'Photo Printing, Digital Art, and Storage Promotions' %>
131
133
  </li>
132
134
 
133
135
  <li>
@@ -135,7 +137,7 @@
135
137
  </li>
136
138
 
137
139
  <li class="hide">
138
- <%= link_to 'Current Promotions', promotions_url, class: 'dropdown-menu-nav-link', title: 'Photo Printing, Digital Art, and Storage Promotions' %>
140
+ <%= link_to 'Current Deals', deals_url, class: 'dropdown-menu-nav-link', title: 'Photo Printing, Digital Art, and Storage Promotions' %>
139
141
  </li>
140
142
 
141
143
  <li>
@@ -1,3 +1,3 @@
1
1
  module ForeverStyleGuide
2
- VERSION = "3.0.41"
2
+ VERSION = "3.1.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: forever_style_guide
3
3
  version: !ruby/object:Gem::Version
4
- version: 3.0.41
4
+ version: 3.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Nicholas McClay
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-01-09 00:00:00.000000000 Z
11
+ date: 2017-01-16 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -249,6 +249,7 @@ files:
249
249
  - app/assets/stylesheets/forever_style_guide/modules/_modal.scss
250
250
  - app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-account.scss
251
251
  - app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-ambassador.scss
252
+ - app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-help.scss
252
253
  - app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns.scss
253
254
  - app/assets/stylesheets/forever_style_guide/modules/_nav-fixed.scss
254
255
  - app/assets/stylesheets/forever_style_guide/modules/_nav-icons.scss
@@ -274,6 +275,10 @@ files:
274
275
  - app/views/forever_style_guide/sections/components/navigation/_nav_ambassador_dropdown.erb
275
276
  - app/views/forever_style_guide/sections/components/navigation/_nav_cart_icon.erb
276
277
  - app/views/forever_style_guide/sections/components/navigation/_nav_community_dropdown.erb
278
+ - app/views/forever_style_guide/sections/components/navigation/_nav_deals.erb
279
+ - app/views/forever_style_guide/sections/components/navigation/_nav_help.erb
280
+ - app/views/forever_style_guide/sections/components/navigation/_nav_help_dropdown_menu.erb
281
+ - app/views/forever_style_guide/sections/components/navigation/_nav_inspiration.erb
277
282
  - app/views/forever_style_guide/sections/components/navigation/_nav_my_forever_dropdown.erb
278
283
  - app/views/forever_style_guide/sections/components/navigation/_nav_products_dropdown.erb
279
284
  - config/locales/en.yml
@@ -306,8 +311,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
306
311
  version: '0'
307
312
  requirements: []
308
313
  rubyforge_project:
309
- rubygems_version: 2.2.2
314
+ rubygems_version: 2.4.6
310
315
  signing_key:
311
316
  specification_version: 4
312
317
  summary: A live style guide and component API for the Forever brand
313
318
  test_files: []
319
+ has_rdoc: