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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/forever_style_guide/globals/_breakpoints.scss +1 -1
- data/app/assets/stylesheets/forever_style_guide/globals/_fonts.scss +2 -0
- data/app/assets/stylesheets/forever_style_guide/globals/_variables.scss +1 -1
- data/app/assets/stylesheets/forever_style_guide/modules/_all.scss +1 -0
- data/app/assets/stylesheets/forever_style_guide/modules/_dropdown-menu.scss +1 -0
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-account.scss +1 -5
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-ambassador.scss +32 -20
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-help.scss +21 -0
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns.scss +34 -12
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-icons.scss +90 -37
- data/app/assets/stylesheets/forever_style_guide/modules/_nav.scss +17 -10
- data/app/assets/stylesheets/forever_style_guide/modules/_shame.scss +0 -4
- data/app/helpers/forever_style_guide/application_helper.rb +11 -2
- data/app/views/forever_style_guide/sections/components/navigation/_nav.erb +14 -6
- data/app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown.erb +8 -17
- data/app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown_menu.erb +3 -3
- data/app/views/forever_style_guide/sections/components/navigation/_nav_ambassador_dropdown.erb +8 -8
- data/app/views/forever_style_guide/sections/components/navigation/_nav_cart_icon.erb +2 -3
- data/app/views/forever_style_guide/sections/components/navigation/_nav_deals.erb +3 -0
- data/app/views/forever_style_guide/sections/components/navigation/_nav_help.erb +10 -0
- data/app/views/forever_style_guide/sections/components/navigation/_nav_help_dropdown_menu.erb +33 -0
- data/app/views/forever_style_guide/sections/components/navigation/_nav_inspiration.erb +3 -0
- data/app/views/forever_style_guide/sections/components/navigation/_nav_my_forever_dropdown.erb +1 -1
- data/app/views/forever_style_guide/sections/components/navigation/_nav_products_dropdown.erb +6 -4
- data/lib/forever_style_guide/version.rb +1 -1
- metadata +9 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0d8080d15e6315b53241e2d06ef0a3280d00222b
|
4
|
+
data.tar.gz: 4141f78e83acffda64cd9e475f9bd430cd4c0030
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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:
|
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} {
|
@@ -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
|
-
|
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
|
-
$
|
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
|
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
|
-
|
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
|
-
|
57
|
+
text-align: center;
|
53
58
|
}
|
54
59
|
}
|
55
60
|
.dropdown-ambassador-primary_text {
|
56
|
-
|
57
|
-
|
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:
|
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:
|
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
|
-
|
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
|
-
|
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
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
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
|
-
|
40
|
-
top:
|
41
|
+
&:first-of-type {
|
42
|
+
margin-top: 1px;
|
41
43
|
}
|
42
|
-
|
43
|
-
|
44
|
-
|
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
|
-
|
55
|
-
font-size:
|
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: $
|
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
|
-
|
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
|
-
.
|
122
|
-
@
|
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:
|
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-
|
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-
|
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
|
-
|
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
|
@@ -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
|
217
|
-
www_url('/
|
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
|
-
<
|
12
|
-
<span class=
|
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="
|
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
|
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/
|
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=
|
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='
|
8
|
-
<%= link_to
|
9
|
-
|
10
|
-
<
|
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
|
28
|
-
<%= link_to login_url
|
29
|
-
|
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 %>
|
data/app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown_menu.erb
CHANGED
@@ -29,7 +29,7 @@
|
|
29
29
|
<% end %>
|
30
30
|
</li>
|
31
31
|
|
32
|
-
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin
|
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
|
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
|
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
|
|
data/app/views/forever_style_guide/sections/components/navigation/_nav_ambassador_dropdown.erb
CHANGED
@@ -1,13 +1,13 @@
|
|
1
|
-
<li class='dropdown dropdown-full_width dropdown-ambassador
|
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
|
-
<
|
5
|
-
<%= has_ambassador? ? 'Your Ambassador' : '
|
6
|
-
</
|
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: "
|
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,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>
|
data/app/views/forever_style_guide/sections/components/navigation/_nav_my_forever_dropdown.erb
CHANGED
@@ -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
|
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 %>
|
data/app/views/forever_style_guide/sections/components/navigation/_nav_products_dropdown.erb
CHANGED
@@ -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
|
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
|
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>
|
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
|
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-
|
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.
|
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:
|