forever_style_guide 3.0.41 → 3.1.0

Sign up to get free protection for your applications and to get access to all the features.
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: