forever_style_guide 3.4.8 → 3.4.9
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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/forever_style_guide/globals/_breakpoints.scss +1 -1
- data/app/assets/stylesheets/forever_style_guide/globals/_mixins.scss +15 -17
- data/app/assets/stylesheets/forever_style_guide/modules/_impersonation_banner.scss +1 -1
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-account_dropdown.scss +21 -25
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-cart.scss +27 -6
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-mobile-menu.scss +13 -19
- data/app/assets/stylesheets/forever_style_guide/modules/_nav.scss +52 -58
- data/app/assets/stylesheets/forever_style_guide/modules/_responsive_utilities.scss +3 -6
- data/lib/forever_style_guide/version.rb +1 -1
- metadata +2 -3
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-icons.scss +0 -181
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a6e47e642c8464476be52aa5894e3f66de560d4e8caec9d3bea3f65935be2942
|
|
4
|
+
data.tar.gz: fe231243f9789dc3eb31d9d7035951db9d071d82beffbbc1061dd4172904e30a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1c5600d626f08a12cc3d3c03958f47f960de9f2cc816d64decbbe0fe5bd0b632bb5bc1f7107fabceea1ed54f925030b7fb615d0e9e91cc9703fd36125f9d60a2
|
|
7
|
+
data.tar.gz: 5a651f5010907e59347e22e53b2a3a19e846e920685da0c78d429c7fe1d81c71ff519b77a666a635ea62258820e85c2902d77bf0d373f555185361eb9c1aa90d
|
|
@@ -47,7 +47,7 @@ $screen-md_to_lg-plus: 1080px !global;
|
|
|
47
47
|
$screen-lg-plus: 1220px !global;
|
|
48
48
|
|
|
49
49
|
//** Point at which the navbar becomes uncollapsed.
|
|
50
|
-
$grid-float-breakpoint:
|
|
50
|
+
$grid-float-breakpoint: 960px!global;
|
|
51
51
|
//** Point at which the navbar begins collapsing.
|
|
52
52
|
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !global;
|
|
53
53
|
|
|
@@ -46,37 +46,35 @@ $color-nav-hover: color('secondary');
|
|
|
46
46
|
@mixin off-canvas-style {
|
|
47
47
|
position: fixed;
|
|
48
48
|
top: 0;
|
|
49
|
-
right:
|
|
49
|
+
right: -$minimum-application-width;
|
|
50
50
|
bottom: 0;
|
|
51
|
-
width:
|
|
51
|
+
width: $minimum-application-width;
|
|
52
|
+
padding-left: 20px;
|
|
53
|
+
padding-right: 20px;
|
|
52
54
|
background-color: $color-white;
|
|
53
55
|
border-left: solid 1px $color-gray-200;
|
|
54
56
|
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
|
|
55
|
-
|
|
56
|
-
transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out; // TODO - animate out
|
|
57
|
+
transition: all 0.3s ease-in-out; // TODO - animate out
|
|
57
58
|
z-index: $zindex-tooltip;
|
|
58
59
|
overflow: hidden;
|
|
60
|
+
direction: rtl; // puts scrollbar to lefthand side
|
|
61
|
+
|
|
62
|
+
.nav-mobile-menu-close {
|
|
63
|
+
display: block;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.navbar-toggle {
|
|
67
|
+
padding-right: 0;
|
|
68
|
+
}
|
|
59
69
|
|
|
60
70
|
&.in {
|
|
61
|
-
padding-left: 20px;
|
|
62
|
-
padding-right: 20px;
|
|
63
71
|
opacity: 1;
|
|
64
|
-
|
|
65
|
-
direction: rtl; // puts scrollbar to lefthand side
|
|
72
|
+
right: 0;
|
|
66
73
|
overflow-y: auto;
|
|
67
|
-
width: $minimum-application-width;
|
|
68
74
|
z-index: $in-front-of-primary-and-banner-and-impersonation;
|
|
69
75
|
|
|
70
76
|
@media (max-width: $screen-xs) {
|
|
71
77
|
width: 100%;
|
|
72
78
|
}
|
|
73
|
-
|
|
74
|
-
.nav-mobile-menu-close {
|
|
75
|
-
display: block;
|
|
76
|
-
}
|
|
77
|
-
.navbar-toggle {
|
|
78
|
-
display: block;
|
|
79
|
-
padding-right: 0;
|
|
80
|
-
}
|
|
81
79
|
}
|
|
82
80
|
}
|
|
@@ -11,25 +11,33 @@ $user_info-toggle-hover_transition: color 0.15s ease-in-out;
|
|
|
11
11
|
|
|
12
12
|
$padding-small-horizontal: 3px;
|
|
13
13
|
|
|
14
|
+
$cart-with-count-offset: 10px; //offsets .navigation-user_info-cart-with_count when there is a signed in user
|
|
15
|
+
|
|
14
16
|
.navigation-user_info {
|
|
15
17
|
height: 100%;
|
|
16
18
|
margin-top: 7px;
|
|
17
|
-
|
|
18
|
-
@media (min-width: $screen-md) {
|
|
19
|
-
margin-right: 15px;
|
|
20
|
-
}
|
|
21
19
|
}
|
|
22
20
|
|
|
23
21
|
// Dont show user info close btn when in mobile offcanvas
|
|
24
|
-
.nav-mobile-menu
|
|
25
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
22
|
+
.nav-mobile-menu .nav-mobile-menu-close {
|
|
23
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
26
24
|
order: 1;// .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
&.nav-user_info-close {
|
|
30
|
-
@media (
|
|
28
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
29
|
+
display: block;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
31
33
|
display: none;
|
|
32
34
|
}
|
|
35
|
+
|
|
36
|
+
.navbar-toggle {
|
|
37
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
38
|
+
display: block;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
33
41
|
}
|
|
34
42
|
}
|
|
35
43
|
|
|
@@ -39,9 +47,13 @@ $padding-small-horizontal: 3px;
|
|
|
39
47
|
}
|
|
40
48
|
|
|
41
49
|
.navigation-user_info-avatar {
|
|
42
|
-
margin-right: $padding-default-horizontal;
|
|
50
|
+
margin-right: $padding-default-horizontal / 2;
|
|
43
51
|
border: none;
|
|
44
52
|
|
|
53
|
+
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
|
|
54
|
+
padding-left: $cart-with-count-offset;
|
|
55
|
+
}
|
|
56
|
+
|
|
45
57
|
.avatar {
|
|
46
58
|
height: $avatar-size;
|
|
47
59
|
width: $avatar-size;
|
|
@@ -49,22 +61,6 @@ $padding-small-horizontal: 3px;
|
|
|
49
61
|
}
|
|
50
62
|
}
|
|
51
63
|
|
|
52
|
-
.navigation-user_info-user_name {
|
|
53
|
-
margin-right: $padding-small-horizontal;
|
|
54
|
-
max-width: $user_info-max_width;
|
|
55
|
-
text-overflow: ellipsis;
|
|
56
|
-
white-space: nowrap;
|
|
57
|
-
overflow: hidden;
|
|
58
|
-
transition: $user_info-toggle-hover_transition;
|
|
59
|
-
|
|
60
|
-
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
|
|
61
|
-
max-width: $user_info-max_width-xs;
|
|
62
|
-
}
|
|
63
|
-
@media (min-width: $screen-md_to_lg-plus) and (max-width: $screen-lg-plus) {
|
|
64
|
-
max-width: $user_info-max_width-sm;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
64
|
// Account Dropdown / Popover
|
|
69
65
|
.navigation-account_dropdown-trigger {
|
|
70
66
|
display: flex;
|
|
@@ -74,7 +70,7 @@ $padding-small-horizontal: 3px;
|
|
|
74
70
|
height: 100%;
|
|
75
71
|
overflow-y: hidden;
|
|
76
72
|
|
|
77
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
73
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
78
74
|
display: none;
|
|
79
75
|
}
|
|
80
76
|
|
|
@@ -1,30 +1,51 @@
|
|
|
1
1
|
$icon-to-text-alignment: -3px;
|
|
2
|
+
$icon-to-text-alignment-alt: -2px;
|
|
2
3
|
$cart-count-horizontal-position: -3px;
|
|
4
|
+
$cart-count-horizontal-position-alt: -10px;
|
|
3
5
|
$cart-count-vertical-position: -8px;
|
|
4
|
-
$
|
|
6
|
+
$cart-count-size: 21px;
|
|
7
|
+
$icon-size-break_to_md: 21px;
|
|
5
8
|
|
|
6
9
|
//style the cart and help icon the same + override bootstrap
|
|
7
10
|
.navbar-nav > li > a {
|
|
8
|
-
&.navigation-user_info-
|
|
9
|
-
&.navigation-user_info-help_link {
|
|
11
|
+
&.navigation-user_info-icon {
|
|
10
12
|
float: left; // ensures proper cart with count display in IE
|
|
11
13
|
margin-top: $icon-to-text-alignment;
|
|
12
14
|
background-color: inherit;
|
|
13
15
|
@include transition($navigation-link-hover-transition);
|
|
14
16
|
|
|
17
|
+
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
|
|
18
|
+
padding-right: 2px;
|
|
19
|
+
padding-left: 2px;
|
|
20
|
+
margin-top: $icon-to-text-alignment-alt;
|
|
21
|
+
font-size: $icon-size-break_to_md;
|
|
22
|
+
}
|
|
23
|
+
|
|
15
24
|
&:hover .fa {
|
|
16
25
|
color: $color-secondary;
|
|
17
26
|
@include transition($navigation-link-hover-transition);
|
|
18
27
|
}
|
|
19
28
|
|
|
20
29
|
&.navigation-user_info-cart-with_count {
|
|
21
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
30
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
22
31
|
padding-right: 0;
|
|
23
32
|
}
|
|
24
33
|
}
|
|
25
34
|
}
|
|
35
|
+
&.navigation-user_info-cart {
|
|
36
|
+
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
|
|
37
|
+
margin-right: $cart-count-horizontal-position;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
&.navigation-user_info-cart-with_count {
|
|
41
|
+
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
|
|
42
|
+
margin-right: $cart-count-horizontal-position-alt;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
26
45
|
}
|
|
27
46
|
|
|
47
|
+
|
|
48
|
+
|
|
28
49
|
.navigation-user_info-cart-count {
|
|
29
50
|
display: block;
|
|
30
51
|
float: right;
|
|
@@ -32,7 +53,7 @@ $mobile-icon-size: 21px;
|
|
|
32
53
|
margin-top: $cart-count-vertical-position;
|
|
33
54
|
margin-left: $cart-count-horizontal-position;
|
|
34
55
|
padding-top: 1px; // shim for alignment
|
|
35
|
-
width: $
|
|
36
|
-
height: $
|
|
56
|
+
width: $cart-count-size;
|
|
57
|
+
height: $cart-count-size;
|
|
37
58
|
border-radius: 50%;
|
|
38
59
|
}
|
|
@@ -6,7 +6,7 @@ $sign-up-btn-top-margin: 10px;
|
|
|
6
6
|
$sign-up-btn-top-padding: 8px;
|
|
7
7
|
|
|
8
8
|
.nav-mobile-menu {
|
|
9
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
9
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
10
10
|
@include off-canvas-style;
|
|
11
11
|
display: flex;
|
|
12
12
|
flex-direction: column;
|
|
@@ -14,7 +14,7 @@ $sign-up-btn-top-padding: 8px;
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.navbar-user_info {
|
|
17
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
17
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
18
18
|
max-height: none !important; // important overrides navbar bootstrap stuff
|
|
19
19
|
order: 2; // .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
|
|
20
20
|
|
|
@@ -25,30 +25,30 @@ $sign-up-btn-top-padding: 8px;
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.nav-mobile-menu-close {
|
|
28
|
-
display: none;
|
|
29
28
|
height: $mobile-menu-close-btn-height;
|
|
30
29
|
|
|
30
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
31
34
|
.navbar-toggle {
|
|
32
35
|
margin-right: 0;
|
|
33
36
|
}
|
|
34
37
|
}
|
|
35
38
|
|
|
36
39
|
.navbar-header {
|
|
37
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
40
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
38
41
|
float: none;
|
|
39
42
|
}
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
.navbar-toggle {
|
|
43
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
46
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
44
47
|
display: block;
|
|
45
48
|
}
|
|
46
49
|
@media (max-width: $screen-md) {
|
|
47
50
|
margin-right: -10px; // equalize padding between right-side icons
|
|
48
51
|
}
|
|
49
|
-
@media (max-width: $screen-xs) {
|
|
50
|
-
margin-left: 5px;
|
|
51
|
-
}
|
|
52
52
|
|
|
53
53
|
&:hover {
|
|
54
54
|
.icon-bar {
|
|
@@ -75,12 +75,12 @@ $sign-up-btn-top-padding: 8px;
|
|
|
75
75
|
|
|
76
76
|
// Log In & Sign Up Buttons
|
|
77
77
|
.navbar-nav > li {
|
|
78
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
78
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
79
79
|
float: none;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
&.nav-mobile-menu-btns {
|
|
83
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
83
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
84
84
|
padding-right: 20px;
|
|
85
85
|
padding-top: 10px;
|
|
86
86
|
}
|
|
@@ -89,12 +89,6 @@ $sign-up-btn-top-padding: 8px;
|
|
|
89
89
|
@media (min-width: $grid-float-breakpoint) {
|
|
90
90
|
float: right!important; //put sign up out to right on desktop
|
|
91
91
|
}
|
|
92
|
-
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md) {
|
|
93
|
-
padding-right: 5px;
|
|
94
|
-
}
|
|
95
|
-
@media (min-width: $screen-md) {
|
|
96
|
-
padding-right: 15px;
|
|
97
|
-
}
|
|
98
92
|
}
|
|
99
93
|
|
|
100
94
|
//customize both buttons to account for overall nav spacing
|
|
@@ -107,14 +101,14 @@ $sign-up-btn-top-padding: 8px;
|
|
|
107
101
|
line-height: 1;
|
|
108
102
|
}
|
|
109
103
|
|
|
110
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
104
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
111
105
|
display: block;
|
|
112
106
|
padding-top: 10px;
|
|
113
107
|
}
|
|
114
108
|
}
|
|
115
109
|
|
|
116
110
|
.btn.btn-login {
|
|
117
|
-
@media(min-width: $grid-float-breakpoint) {
|
|
111
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
118
112
|
color: $color-gray-600;
|
|
119
113
|
background-color: transparent;
|
|
120
114
|
border-color: white;
|
|
@@ -130,7 +124,7 @@ $sign-up-btn-top-padding: 8px;
|
|
|
130
124
|
}
|
|
131
125
|
|
|
132
126
|
.btn.btn-signup {
|
|
133
|
-
@media(min-width: $grid-float-breakpoint) {
|
|
127
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
134
128
|
height: $sign-up-btn-height;
|
|
135
129
|
margin-top: $sign-up-btn-top-margin;
|
|
136
130
|
padding-top: $sign-up-btn-top-padding;
|
|
@@ -1,32 +1,23 @@
|
|
|
1
1
|
$navigation-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
|
|
2
2
|
$nav-height: 50px;
|
|
3
|
-
$nav-
|
|
3
|
+
$nav-horizontal-spacing: 8px;
|
|
4
|
+
$nav-icon-padding: 4px;
|
|
4
5
|
|
|
5
|
-
$lg-logo-vertical-align: 5px;
|
|
6
|
-
$sm-logo-vertical-align: 8px;
|
|
7
6
|
$logo-height-large: 28px;
|
|
8
|
-
$logo-height-small:
|
|
7
|
+
$logo-height-small: 22px;
|
|
9
8
|
$logo-max-width: 175px;
|
|
10
|
-
$logo-max-width-small:
|
|
11
|
-
|
|
12
|
-
$
|
|
13
|
-
$nav-horizontal-spacing-small: 3px;
|
|
9
|
+
$logo-max-width-small: 138px;
|
|
10
|
+
$logo-vertical-align-lg: 5px;
|
|
11
|
+
$logo-vertical-align-sm: 6px;
|
|
14
12
|
|
|
15
13
|
$hover-border-size: 4px;
|
|
16
14
|
$navigation-link-hover-transition: color 0.15s ease-in-out;
|
|
17
15
|
|
|
18
|
-
$letter-spacing-xlarge: 0.6px;
|
|
19
|
-
$letter-spacing-large: 0.5px;
|
|
20
|
-
$letter-spacing-medium: 0;
|
|
21
|
-
$font-size-150: 13px;
|
|
22
|
-
|
|
23
16
|
$deals-icon-horizontal-position: -3px;
|
|
24
17
|
$deals-icon-vertical-position: -5px;
|
|
25
18
|
|
|
26
|
-
$nav-icon-padding: 4px;
|
|
27
|
-
|
|
28
19
|
// animation on hover
|
|
29
|
-
@mixin nav_hover_border(
|
|
20
|
+
@mixin nav_hover_border() {
|
|
30
21
|
&::before {
|
|
31
22
|
position: absolute;
|
|
32
23
|
bottom: 0;
|
|
@@ -50,10 +41,13 @@ $nav-icon-padding: 4px;
|
|
|
50
41
|
position: relative;
|
|
51
42
|
box-shadow: $navigation-shadow;
|
|
52
43
|
|
|
53
|
-
.container-fluid
|
|
44
|
+
.container-fluid {
|
|
54
45
|
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md) {
|
|
55
|
-
|
|
56
|
-
|
|
46
|
+
padding-right: 8px;
|
|
47
|
+
padding-left: 8px;
|
|
48
|
+
}
|
|
49
|
+
> .navbar-header {
|
|
50
|
+
margin-left: 0;
|
|
57
51
|
}
|
|
58
52
|
}
|
|
59
53
|
}
|
|
@@ -61,25 +55,20 @@ $nav-icon-padding: 4px;
|
|
|
61
55
|
.navbar-logo_image,
|
|
62
56
|
.navbar-logo {
|
|
63
57
|
height: $logo-height-large;
|
|
64
|
-
|
|
65
|
-
|
|
58
|
+
margin-top: $logo-vertical-align-lg;
|
|
59
|
+
max-width: $logo-max-width; // you need to constrain your svg for IE
|
|
66
60
|
|
|
67
61
|
@media (max-width: $screen-md_to_lg-plus) {
|
|
68
62
|
height: $logo-height-small;
|
|
69
63
|
max-width: $logo-max-width-small;
|
|
70
|
-
margin-top: $
|
|
64
|
+
margin-top: $logo-vertical-align-sm;
|
|
71
65
|
}
|
|
72
|
-
|
|
66
|
+
|
|
67
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
73
68
|
display: inline-block;
|
|
74
69
|
height: $logo-height-large;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
@media (max-width: $screen-sm) {
|
|
79
|
-
margin-left: $nav-horizontal-spacing;
|
|
80
|
-
}
|
|
81
|
-
@media (min-width: $minimum-application-width) and (max-width: $screen-xs) {
|
|
82
|
-
max-width: $logo-max-width-small;
|
|
70
|
+
margin-top: $logo-vertical-align-lg;
|
|
71
|
+
max-width: $logo-max-width; // you need to constrain your svg for IE
|
|
83
72
|
}
|
|
84
73
|
}
|
|
85
74
|
|
|
@@ -88,25 +77,25 @@ $nav-icon-padding: 4px;
|
|
|
88
77
|
height: $nav-height; // TODO - this hsould probably be the $header-height variable, pending further confirmation
|
|
89
78
|
|
|
90
79
|
.navbar-nav.navbar-text_center > li > a {
|
|
91
|
-
letter-spacing: $letter-spacing-xlarge;
|
|
92
80
|
padding-left: $nav-horizontal-spacing;
|
|
93
81
|
padding-right: $nav-horizontal-spacing;
|
|
94
82
|
max-height: $nav-height;
|
|
95
83
|
|
|
96
84
|
@media (max-width: $screen-lg-plus) {
|
|
97
|
-
padding-left:
|
|
98
|
-
padding-right:
|
|
99
|
-
letter-spacing: $letter-spacing-medium;
|
|
85
|
+
padding-left: $nav-horizontal-spacing / 2;
|
|
86
|
+
padding-right: $nav-horizontal-spacing / 2;
|
|
100
87
|
}
|
|
101
88
|
|
|
102
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
89
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
103
90
|
padding-top: $padding-small-vertical;
|
|
104
91
|
padding-bottom: $padding-small-vertical;
|
|
105
92
|
padding-left: 0;
|
|
93
|
+
text-transform: uppercase;
|
|
94
|
+
font-size: $font-size-200;
|
|
106
95
|
}
|
|
107
96
|
|
|
108
97
|
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
|
|
109
|
-
font-size: $font-size-
|
|
98
|
+
font-size: $font-size-200;
|
|
110
99
|
}
|
|
111
100
|
}
|
|
112
101
|
}
|
|
@@ -120,7 +109,7 @@ $nav-icon-padding: 4px;
|
|
|
120
109
|
margin-left: -10px;
|
|
121
110
|
}
|
|
122
111
|
|
|
123
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
112
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
124
113
|
direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior ** mainly fixing safari here
|
|
125
114
|
width: 100%;
|
|
126
115
|
padding-bottom: $nav-horizontal-spacing;
|
|
@@ -129,6 +118,16 @@ $nav-icon-padding: 4px;
|
|
|
129
118
|
}
|
|
130
119
|
}
|
|
131
120
|
|
|
121
|
+
.navigation-menu-list_item {
|
|
122
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
123
|
+
text-align: left;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@media (max-width: $screen-sm) {
|
|
127
|
+
min-width: 300px;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
132
131
|
.navigation-menu-list_item-active {
|
|
133
132
|
a.navigation-items-link {
|
|
134
133
|
color: $color-secondary;
|
|
@@ -144,14 +143,13 @@ a.navigation-items-link {
|
|
|
144
143
|
padding-top: $padding-default-vertical;
|
|
145
144
|
padding-bottom: $padding-default-vertical;
|
|
146
145
|
color: $color-gray-600;
|
|
147
|
-
text-transform: uppercase;
|
|
148
146
|
text-decoration: none;
|
|
149
147
|
|
|
150
148
|
@media screen and (min-width: $grid-float-breakpoint) {
|
|
151
149
|
align-items: center;
|
|
152
150
|
height: 100%;
|
|
153
151
|
@include transition($navigation-link-hover-transition);
|
|
154
|
-
@include nav_hover_border(
|
|
152
|
+
@include nav_hover_border();
|
|
155
153
|
}
|
|
156
154
|
|
|
157
155
|
@media (max-width: $grid-float-breakpoint) {
|
|
@@ -191,45 +189,41 @@ a.navigation-items-link-deals {
|
|
|
191
189
|
}
|
|
192
190
|
|
|
193
191
|
.navbar-nav {
|
|
194
|
-
|
|
195
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
192
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
196
193
|
margin: 0; // overriding bootstrap so non-signed in btn-blocks display as expected TODO: further refactor markup to avoid this
|
|
197
194
|
}
|
|
198
195
|
|
|
199
196
|
&.navbar-right {
|
|
197
|
+
margin-right: 0;
|
|
200
198
|
max-height: $nav-height;
|
|
201
199
|
direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior ** mainly fixing safari here
|
|
202
200
|
|
|
203
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
201
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
204
202
|
float: none !important; // overriding bootstrap so non-signed in btn-blocks display as expected TODO: further refactor markup to avoid this
|
|
205
203
|
}
|
|
204
|
+
|
|
205
|
+
.navbar-right-icons {
|
|
206
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
207
|
+
float: right;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
206
211
|
&.navbar-right-icons-container {
|
|
207
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
212
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
208
213
|
float: right !important;
|
|
209
214
|
margin: auto;
|
|
210
215
|
}
|
|
211
|
-
@media (max-width: $screen-
|
|
212
|
-
margin:
|
|
213
|
-
max-height: $nav-height-screen-sm;
|
|
216
|
+
@media (max-width: $screen-xs-max) {
|
|
217
|
+
margin: 5px 0 0; // compensating for change in padding on .navbar-nav > li > a
|
|
214
218
|
}
|
|
215
219
|
}
|
|
216
220
|
}
|
|
217
221
|
}
|
|
218
222
|
|
|
219
|
-
.navigation-menu-list_item {
|
|
220
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
221
|
-
text-align: left;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
@media (max-width: $screen-sm) {
|
|
225
|
-
min-width: 300px;
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
|
|
229
223
|
.navbar-right-icons-container,
|
|
230
224
|
.nav > li.navbar-right-icons,
|
|
231
225
|
.navbar-mobile-menu {
|
|
232
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
226
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
233
227
|
display: inline-block;
|
|
234
228
|
float: right; //aligns mobile menu
|
|
235
229
|
}
|
|
@@ -52,18 +52,15 @@
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
|
|
56
55
|
// Utilities for new nav w/ custom breakpoint
|
|
57
56
|
.visible-mobile {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
61
|
-
display: inline-block !important;
|
|
57
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
58
|
+
display: none !important;
|
|
62
59
|
}
|
|
63
60
|
}
|
|
64
61
|
|
|
65
62
|
.hidden-mobile {
|
|
66
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
63
|
+
@media (max-width: $grid-float-breakpoint-max) {
|
|
67
64
|
display: none !important;
|
|
68
65
|
}
|
|
69
66
|
}
|
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.4.
|
|
4
|
+
version: 3.4.9
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Nicholas McClay
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-06-
|
|
11
|
+
date: 2018-06-22 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -247,7 +247,6 @@ files:
|
|
|
247
247
|
- app/assets/stylesheets/forever_style_guide/modules/_nav-account_dropdown.scss
|
|
248
248
|
- app/assets/stylesheets/forever_style_guide/modules/_nav-cart.scss
|
|
249
249
|
- app/assets/stylesheets/forever_style_guide/modules/_nav-fixed.scss
|
|
250
|
-
- app/assets/stylesheets/forever_style_guide/modules/_nav-icons.scss
|
|
251
250
|
- app/assets/stylesheets/forever_style_guide/modules/_nav-item-list.scss
|
|
252
251
|
- app/assets/stylesheets/forever_style_guide/modules/_nav-mobile-menu.scss
|
|
253
252
|
- app/assets/stylesheets/forever_style_guide/modules/_nav-offcanvas.scss
|
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
$nav-icon-margin: 3px;
|
|
2
|
-
$icon-width: 28px;
|
|
3
|
-
$screen-below-xs: $screen-xs - 1;
|
|
4
|
-
|
|
5
|
-
// Cart + Count Positioning
|
|
6
|
-
$cart-count-offset: 6px;
|
|
7
|
-
$cart-count-offset-xs: 2px;
|
|
8
|
-
$cart-count-width: 20px;
|
|
9
|
-
$cart-count-width-sm: 17px;
|
|
10
|
-
$cart-count-icon-overlap: 8px;
|
|
11
|
-
$cart-icon-width-xs: 30px + 10px; //10px to account for extra spacing
|
|
12
|
-
$cart-icon-vertical-offset: 7px;
|
|
13
|
-
$cart-icon-vertical-offset-mobile: 4px;
|
|
14
|
-
$cart-tab-padding: 20px;
|
|
15
|
-
$cart-tab-padding-md_to_lg: 7px;
|
|
16
|
-
|
|
17
|
-
// Deals Star Positioning
|
|
18
|
-
$deals-icon-horizontal-offset: 3px;
|
|
19
|
-
$deals-icon-horizontal-offset-mobile: 4px;
|
|
20
|
-
|
|
21
|
-
// Chevron Icon Positioning
|
|
22
|
-
$chevron-bottom-offset: 15px;
|
|
23
|
-
$chevron-bottom-offset-alt: 17px;
|
|
24
|
-
$chevron-right-offset: 5px;
|
|
25
|
-
$chevron-right-offset-alt: 2px;
|
|
26
|
-
$chevron-font-size-xxs: 8px;
|
|
27
|
-
|
|
28
|
-
.nav-icon-stack {
|
|
29
|
-
padding: 3px 4px 4px 4px !important; // overriding .navbar-nav > li > a
|
|
30
|
-
text-align: center;
|
|
31
|
-
|
|
32
|
-
.fa {
|
|
33
|
-
display: block;
|
|
34
|
-
position: relative;
|
|
35
|
-
top: $nav-icon-margin;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.icon-bar {
|
|
39
|
-
display: block;
|
|
40
|
-
width: $icon-width;
|
|
41
|
-
height: 4px;
|
|
42
|
-
border-radius: $border-radius-xl;
|
|
43
|
-
margin: auto;
|
|
44
|
-
background-color: $color-gray-600 !important; //override bootstrap .navbar-default .navbar-toggle .icon-bar
|
|
45
|
-
|
|
46
|
-
&:first-of-type {
|
|
47
|
-
margin-top: 1px;
|
|
48
|
-
}
|
|
49
|
-
&:last-of-type {
|
|
50
|
-
margin-bottom: 3px;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
.nav-icon-label {
|
|
55
|
-
font-size: $font-size-xsmall;
|
|
56
|
-
line-height: $font-size-xsmall;
|
|
57
|
-
font-family: $font-face-gotham;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.navbar-default .navbar-nav {
|
|
61
|
-
.dropdown-toggle .fa-chevron-down {
|
|
62
|
-
position: absolute;
|
|
63
|
-
font-size: $font-size-xsmall;
|
|
64
|
-
@include transition(transform 0.2s ease-in-out);
|
|
65
|
-
|
|
66
|
-
@media(max-width: $grid-float-breakpoint-max) {
|
|
67
|
-
right: 15px;
|
|
68
|
-
font-size: $font-size-default;
|
|
69
|
-
}
|
|
70
|
-
@media(min-width: $grid-float-breakpoint) {
|
|
71
|
-
bottom: $chevron-bottom-offset;
|
|
72
|
-
}
|
|
73
|
-
@media (min-width: $grid-float-breakpoint){
|
|
74
|
-
right: $chevron-right-offset;
|
|
75
|
-
bottom: $chevron-bottom-offset-alt;
|
|
76
|
-
font-size: $chevron-font-size-xxs;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
.dropdown.open .dropdown-toggle .fa-chevron-down {
|
|
80
|
-
@include transform(rotate(180deg));
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// Mobile Toggles
|
|
85
|
-
.navbar-default .navbar-toggle,
|
|
86
|
-
a.cart-icon {
|
|
87
|
-
height: $header-height;
|
|
88
|
-
width: $icon-width + $cart-tab-padding;
|
|
89
|
-
margin-top: 0;
|
|
90
|
-
margin-right: 0;
|
|
91
|
-
margin-bottom: 0;
|
|
92
|
-
color: color('gray-600');
|
|
93
|
-
font-size: $font-size-default;
|
|
94
|
-
text-align: center;
|
|
95
|
-
border: 0;
|
|
96
|
-
border-radius: 0;
|
|
97
|
-
z-index: $zindex-navbar-fixed; // make sure toggles appear above logo
|
|
98
|
-
|
|
99
|
-
@media (min-width: $grid-float-breakpoint-max) and (max-width: $screen-lg) {
|
|
100
|
-
width: $icon-width + $cart-tab-padding-md_to_lg;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
&:hover,
|
|
104
|
-
&:active,
|
|
105
|
-
&:focus {
|
|
106
|
-
text-decoration: none;
|
|
107
|
-
background-color: transparent;
|
|
108
|
-
}
|
|
109
|
-
&.navbar-toggle-close {
|
|
110
|
-
width: 100%;
|
|
111
|
-
padding: 0;
|
|
112
|
-
@include nav-border(bottom);
|
|
113
|
-
|
|
114
|
-
&:hover {
|
|
115
|
-
background-color: color('white');
|
|
116
|
-
cursor: pointer;
|
|
117
|
-
}
|
|
118
|
-
.nav-icon-stack {
|
|
119
|
-
height: $header-height;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
&.with-count {
|
|
123
|
-
width: $cart-count-width + $icon-width + $cart-tab-padding;
|
|
124
|
-
|
|
125
|
-
@media (min-width: $grid-float-breakpoint-max) and (max-width: $screen-lg) {
|
|
126
|
-
width: $cart-count-width + $icon-width - $cart-count-icon-overlap;
|
|
127
|
-
text-align: left;
|
|
128
|
-
}
|
|
129
|
-
@media (max-width: $screen-below-xs) {
|
|
130
|
-
width: $cart-count-width + $cart-icon-width-xs;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
a.cart-icon {
|
|
136
|
-
padding-top: $cart-icon-vertical-offset-mobile;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.cart-icon-count {
|
|
140
|
-
display: inline-block;
|
|
141
|
-
float: right;
|
|
142
|
-
height: $cart-count-width;
|
|
143
|
-
min-width: $cart-count-width;
|
|
144
|
-
padding-top: 1px; // vertical align number in circle
|
|
145
|
-
font-size: $font-size-200;
|
|
146
|
-
text-align: center;
|
|
147
|
-
border-radius: 50%;
|
|
148
|
-
|
|
149
|
-
@media (max-width: $screen-below-xs) {
|
|
150
|
-
margin-right: $cart-count-offset-xs;
|
|
151
|
-
}
|
|
152
|
-
@media (min-width: $screen-xs) and (max-width: $screen-lg) {
|
|
153
|
-
margin-right: $cart-count-offset;
|
|
154
|
-
}
|
|
155
|
-
@media (min-width: $grid-float-breakpoint-max) and (max-width: $screen-lg) {
|
|
156
|
-
padding-top: 0;
|
|
157
|
-
}
|
|
158
|
-
@media (max-width: $screen-lg) {
|
|
159
|
-
position: absolute;
|
|
160
|
-
right: 3px;
|
|
161
|
-
top: 2px;
|
|
162
|
-
margin-right: 0;
|
|
163
|
-
margin-top: 0;
|
|
164
|
-
min-width: $cart-count-width-sm;
|
|
165
|
-
height: $cart-count-width-sm;
|
|
166
|
-
font-size: $font-size-100;
|
|
167
|
-
box-shadow: 0px 0px 0px 2px white;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.deals-icon {
|
|
172
|
-
@media (max-width: $grid-float-breakpoint-max) {
|
|
173
|
-
margin-right: $deals-icon-horizontal-offset-mobile;
|
|
174
|
-
float: left;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
@media (min-width: $grid-float-breakpoint) {
|
|
178
|
-
vertical-align: top;
|
|
179
|
-
margin-left: $deals-icon-horizontal-offset;
|
|
180
|
-
}
|
|
181
|
-
}
|