forever_style_guide 4.0.0 → 4.1.11
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/_colors.scss +1 -1
- data/app/assets/stylesheets/forever_style_guide/modules/_all.scss +1 -0
- data/app/assets/stylesheets/forever_style_guide/modules/_ambassador_banner.scss +69 -22
- data/app/assets/stylesheets/forever_style_guide/modules/_primary_nav.scss +292 -222
- data/app/assets/stylesheets/forever_style_guide/modules/_subnav.scss +218 -0
- data/lib/forever_style_guide/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5615a1347fa916d8b094c0e0e2b9f827538e368bbd39fd610f25d0715a4e22e0
|
|
4
|
+
data.tar.gz: 19633bfa25b5b190071a9aede67a47ed08a33a29d30c916cb36f1a60f25c5dc9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 369d83844830f994566eb6035a2e7acc27541bf9a534f73fb8eab5dfc59b996482e2511c683f9eab2eb4ac74004a9edc25d106998425951741c406071b7a3886
|
|
7
|
+
data.tar.gz: 273444f9e18a922222364ba5622ae48fb98e5fecd18f7d470119c65643c2a6d2fca9364024e47fa0e7c68a3b12190f5da7c5139f29d2784abfa27be321315b15
|
|
@@ -66,7 +66,7 @@ $color-live18-orange: colorify('live18-orange', #f57e25) !default;
|
|
|
66
66
|
$color-live18-grey: colorify('live18-grey', #a4abb6) !default;
|
|
67
67
|
|
|
68
68
|
// Gradients
|
|
69
|
-
$gradient-ambassador: linear-gradient(to
|
|
69
|
+
$gradient-ambassador: linear-gradient(to right, darken($color-forever_services, 5%), darken($color-forever_valet, 5%));
|
|
70
70
|
|
|
71
71
|
@each $id, $color in $colors {
|
|
72
72
|
.color-#{$id} {
|
|
@@ -9,15 +9,18 @@ $banner-hover-effect-speed: 0.15s;
|
|
|
9
9
|
$chevron-rotate-effect-speed: 0.25s;
|
|
10
10
|
$dropdown-entrance-and-exit-effect-speed: 0.22s;
|
|
11
11
|
|
|
12
|
-
@mixin ambassador_banner($height) {
|
|
12
|
+
@mixin ambassador_banner($banner-background-color, $height) {
|
|
13
13
|
position: relative;
|
|
14
14
|
height: $height;
|
|
15
15
|
color: $banner-color;
|
|
16
|
-
|
|
16
|
+
background-color: $banner-background-color;
|
|
17
17
|
z-index: $in-front-of-primary-nav;
|
|
18
|
+
pointer-events: none;
|
|
19
|
+
text-align: center;
|
|
20
|
+
font-family: $font-face-semibold;
|
|
18
21
|
|
|
19
22
|
&.is-behind_fixed-nav {
|
|
20
|
-
z-index:
|
|
23
|
+
z-index: -1;
|
|
21
24
|
height: $ambassador-banner-height-assigned;
|
|
22
25
|
}
|
|
23
26
|
|
|
@@ -44,25 +47,24 @@ $dropdown-entrance-and-exit-effect-speed: 0.22s;
|
|
|
44
47
|
|
|
45
48
|
a.ambassador_banner {
|
|
46
49
|
display: block;
|
|
50
|
+
pointer-events: auto;
|
|
47
51
|
|
|
48
52
|
&:hover,
|
|
49
53
|
&:focus,
|
|
50
54
|
&:active,
|
|
51
55
|
&:active:focus {
|
|
52
56
|
text-decoration: none;
|
|
57
|
+
pointer-events: auto;
|
|
53
58
|
}
|
|
54
59
|
}
|
|
55
60
|
|
|
56
61
|
.ambassador_banner-assigned {
|
|
57
|
-
@include ambassador_banner($ambassador-banner-height-assigned);
|
|
58
|
-
background-image: $gradient-ambassador;
|
|
62
|
+
@include ambassador_banner($color-forever_gray, $ambassador-banner-height-assigned);
|
|
59
63
|
padding-top: $banner-vertical-padding-assigned;
|
|
60
64
|
padding-bottom: $banner-vertical-padding-assigned;
|
|
61
65
|
height: $ambassador-banner-height-assigned;
|
|
62
66
|
|
|
63
|
-
&::after {
|
|
64
|
-
height: $ambassador-banner-height-assigned;
|
|
65
|
-
}
|
|
67
|
+
&::after { height: $ambassador-banner-height-assigned; }
|
|
66
68
|
|
|
67
69
|
&.open {
|
|
68
70
|
.fa-chevron-down {
|
|
@@ -73,23 +75,17 @@ a.ambassador_banner {
|
|
|
73
75
|
.fa-chevron-down {
|
|
74
76
|
@include transition(all $chevron-rotate-effect-speed linear);
|
|
75
77
|
}
|
|
76
|
-
}
|
|
77
78
|
|
|
78
|
-
@media (
|
|
79
|
-
.ambassador_banner-assigned { text-align: center; }
|
|
79
|
+
@media screen and (max-width: $screen-xs) { text-align: left; }
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.ambassador_banner-unassigned {
|
|
83
|
-
@include ambassador_banner($ambassador-banner-height-unassigned);
|
|
84
|
-
background: $color-forever_ambassador-unassigned;
|
|
83
|
+
@include ambassador_banner(#781A60, $ambassador-banner-height-unassigned);
|
|
85
84
|
padding-top: $banner-vertical-padding-unassigned;
|
|
86
85
|
padding-bottom: $banner-vertical-padding-unassigned;
|
|
87
|
-
text-align: center;
|
|
88
86
|
|
|
89
87
|
&.is-behind_fixed-nav {
|
|
90
|
-
.ambassador_banner-btn {
|
|
91
|
-
display: none;
|
|
92
|
-
}
|
|
88
|
+
.ambassador_banner-btn { display: none; }
|
|
93
89
|
}
|
|
94
90
|
}
|
|
95
91
|
|
|
@@ -102,10 +98,7 @@ a.ambassador_banner {
|
|
|
102
98
|
line-height: 1.3;
|
|
103
99
|
border: 2px solid $color-white;
|
|
104
100
|
border-radius: $border-radius-button;
|
|
105
|
-
|
|
106
|
-
&:hover {
|
|
107
|
-
text-decoration: underline;
|
|
108
|
-
}
|
|
101
|
+
&:hover { text-decoration: underline; }
|
|
109
102
|
}
|
|
110
103
|
}
|
|
111
104
|
|
|
@@ -119,11 +112,21 @@ a.ambassador_banner {
|
|
|
119
112
|
.ambassador_banner-content {
|
|
120
113
|
display: inline-block;
|
|
121
114
|
vertical-align: middle;
|
|
115
|
+
pointer-events: auto;
|
|
116
|
+
cursor: pointer;
|
|
122
117
|
}
|
|
123
118
|
|
|
124
119
|
.ambassador_banner-name {
|
|
125
120
|
max-width: $banner-max-width;
|
|
126
121
|
vertical-align: middle;
|
|
122
|
+
text-decoration: underline;
|
|
123
|
+
|
|
124
|
+
@media screen and (max-width: $screen-xs) {
|
|
125
|
+
max-width: 48%;
|
|
126
|
+
white-space: nowrap;
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
text-overflow: ellipsis;
|
|
129
|
+
}
|
|
127
130
|
}
|
|
128
131
|
|
|
129
132
|
.ambassador_banner-dropdown_container {
|
|
@@ -150,7 +153,7 @@ a.ambassador_banner {
|
|
|
150
153
|
align-items: center;
|
|
151
154
|
justify-content: center;
|
|
152
155
|
flex-wrap: wrap;
|
|
153
|
-
background-
|
|
156
|
+
background-color: $color-forever_gray;
|
|
154
157
|
border-top: 2px solid transparentize($color-white, 0.9);
|
|
155
158
|
}
|
|
156
159
|
|
|
@@ -203,3 +206,47 @@ a.ambassador_banner {
|
|
|
203
206
|
display: none;
|
|
204
207
|
}
|
|
205
208
|
}
|
|
209
|
+
|
|
210
|
+
.ambassador-link-con {
|
|
211
|
+
@media screen and (max-width: $screen-xs) {
|
|
212
|
+
text-align: left;
|
|
213
|
+
padding-left: 10px;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.btn-ambassador-link {
|
|
218
|
+
display: inline-block;
|
|
219
|
+
vertical-align: middle;
|
|
220
|
+
height: auto;
|
|
221
|
+
position: absolute;
|
|
222
|
+
z-index: 1200;
|
|
223
|
+
right: 10px;
|
|
224
|
+
margin: 0;
|
|
225
|
+
padding: 0;
|
|
226
|
+
background: transparent;
|
|
227
|
+
color: $color-white;
|
|
228
|
+
font-size: $font-size-200;
|
|
229
|
+
font-family: inherit;
|
|
230
|
+
border: none;
|
|
231
|
+
box-shadow: none;
|
|
232
|
+
line-height: 20px;
|
|
233
|
+
pointer-events: auto;
|
|
234
|
+
|
|
235
|
+
&:hover, &:focus, &:active{
|
|
236
|
+
color: $color-white;
|
|
237
|
+
background: transparent !important;
|
|
238
|
+
border: none;
|
|
239
|
+
box-shadow: none;
|
|
240
|
+
text-decoration: underline;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
i {
|
|
244
|
+
margin-left: 4px;
|
|
245
|
+
font-size: $font-size-200 !important;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
&.amb-link-vert-align {
|
|
249
|
+
top: 50%;
|
|
250
|
+
transform: translateY(-50%);
|
|
251
|
+
}
|
|
252
|
+
}
|
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
|
|
2
1
|
$f-primary_nav-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
|
|
3
|
-
$f-primary_nav-main-zindex: $zindex-navbar-fixed;
|
|
4
2
|
$f-primary_nav-main-minheight: 50px;
|
|
5
3
|
$f-primary_nav-side-width: 320px;
|
|
6
4
|
$f-primary_nav-side-zindex: $zindex-modal;
|
|
7
|
-
$f-primary_nav-side_section-close_angle: 45deg;
|
|
8
5
|
$f-primary_nav-icon-count_badge-top: 5px;
|
|
9
6
|
$f-primary_nav-icon-count_badge-right: -4px;
|
|
7
|
+
$f-nav-yellow: #FFD452;
|
|
8
|
+
$f-nav-icon-hover: #bce5fd;
|
|
10
9
|
|
|
11
|
-
@mixin deals_link_base() {
|
|
12
|
-
color: $
|
|
13
|
-
|
|
14
|
-
&:hover {
|
|
15
|
-
color: $color-forever_blue;
|
|
16
|
-
}
|
|
17
|
-
|
|
10
|
+
@mixin deals_link_base($link_color: $color-forever_orange) {
|
|
11
|
+
color: $link_color;
|
|
18
12
|
&::after {
|
|
19
13
|
position: relative;
|
|
20
14
|
top: -5px;
|
|
@@ -27,8 +21,7 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
27
21
|
|
|
28
22
|
.f-primary_nav {
|
|
29
23
|
width: 100%;
|
|
30
|
-
|
|
31
|
-
background-color: $color-white;
|
|
24
|
+
background-color: #2881B8;
|
|
32
25
|
|
|
33
26
|
/*support store method of affixing*/
|
|
34
27
|
&.affix {
|
|
@@ -36,18 +29,6 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
36
29
|
left: 0;
|
|
37
30
|
z-index: $f-primary_nav-side-zindex;
|
|
38
31
|
}
|
|
39
|
-
|
|
40
|
-
/* nested to give more specificity and override the base styleguide link styles */
|
|
41
|
-
.f-primary_nav-link_base {
|
|
42
|
-
text-decoration: none;
|
|
43
|
-
color: $color-gray-600;
|
|
44
|
-
@include transition_fast(color);
|
|
45
|
-
|
|
46
|
-
&.is-active,
|
|
47
|
-
&:hover {
|
|
48
|
-
color: $color-forever_blue;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
32
|
}
|
|
52
33
|
|
|
53
34
|
.f-primary_nav-main {
|
|
@@ -58,19 +39,18 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
58
39
|
padding-left: 10px;
|
|
59
40
|
padding-right: 10px;
|
|
60
41
|
position: relative;
|
|
61
|
-
z-index: $
|
|
42
|
+
z-index: $zindex-navbar-fixed;
|
|
62
43
|
}
|
|
63
44
|
|
|
64
45
|
.f-primary_nav-logo_link {
|
|
65
46
|
display: flex;
|
|
66
47
|
align-items: center;
|
|
67
|
-
}
|
|
68
48
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
49
|
+
> img {
|
|
50
|
+
height: 22px;
|
|
51
|
+
width: 138px;
|
|
52
|
+
max-width: unset;
|
|
53
|
+
}
|
|
74
54
|
}
|
|
75
55
|
|
|
76
56
|
.f-primary_nav-ecom_list {
|
|
@@ -78,45 +58,50 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
78
58
|
flex: 1 0 auto;
|
|
79
59
|
justify-content: center;
|
|
80
60
|
align-items: stretch;
|
|
81
|
-
margin
|
|
82
|
-
padding
|
|
61
|
+
margin: 0;
|
|
62
|
+
padding: 0;
|
|
83
63
|
list-style: none;
|
|
84
|
-
}
|
|
85
64
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
65
|
+
/* we want to ul to remain and flex grow, so just hide the items */
|
|
66
|
+
> li {
|
|
67
|
+
display: none;
|
|
90
68
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
69
|
+
> a {
|
|
70
|
+
position: relative;
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
padding: 0 8px;
|
|
74
|
+
font-family: $font-face-semibold;
|
|
75
|
+
font-size: $font-size-200;
|
|
76
|
+
color: #fff;
|
|
77
|
+
text-decoration: none;
|
|
78
|
+
@include transition_fast(color, background-color);
|
|
79
|
+
|
|
80
|
+
&.f-primary_nav-ecom_link-deals {
|
|
81
|
+
@include deals_link_base($f-nav-yellow);
|
|
82
|
+
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
|
83
|
+
}
|
|
99
84
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
85
|
+
&::before {
|
|
86
|
+
position: absolute;
|
|
87
|
+
z-index: -1;
|
|
88
|
+
bottom: 0;
|
|
89
|
+
left: 0;
|
|
90
|
+
height: 4px;
|
|
91
|
+
width: 100%;
|
|
92
|
+
background-color: rgba(0, 0, 0, 0.15);
|
|
93
|
+
content: '';
|
|
94
|
+
transform: scaleX(0);
|
|
95
|
+
@include transition_fast(transform);
|
|
96
|
+
}
|
|
103
97
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
left: 0;
|
|
108
|
-
height: 4px;
|
|
109
|
-
width: 100%;
|
|
110
|
-
background-color: $color-forever_blue;
|
|
111
|
-
content: '';
|
|
112
|
-
transform: scaleX(0);
|
|
113
|
-
@include transition_fast(transform);
|
|
114
|
-
}
|
|
98
|
+
&:hover,
|
|
99
|
+
&.is-active,
|
|
100
|
+
&.is-meganav-open { background-color: rgba(0, 0, 0, 0.1); }
|
|
115
101
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
transform: scaleX(1);
|
|
102
|
+
&.is-active {
|
|
103
|
+
&::before { transform: scaleX(1); }
|
|
104
|
+
}
|
|
120
105
|
}
|
|
121
106
|
}
|
|
122
107
|
}
|
|
@@ -125,79 +110,84 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
125
110
|
position: relative;
|
|
126
111
|
display: flex;
|
|
127
112
|
align-items: stretch;
|
|
128
|
-
margin
|
|
129
|
-
padding
|
|
113
|
+
margin: 0;
|
|
114
|
+
padding: 0;
|
|
130
115
|
list-style: none;
|
|
131
|
-
}
|
|
132
116
|
|
|
133
|
-
|
|
134
|
-
display: flex;
|
|
135
|
-
align-items: stretch;
|
|
136
|
-
font-size: $font-size-450;
|
|
137
|
-
|
|
138
|
-
//display flex here gets rid of extra vertical space with inline block
|
|
139
|
-
.f-primary_nav-icon_link {
|
|
117
|
+
> li {
|
|
140
118
|
display: flex;
|
|
141
|
-
align-items:
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.f-primary_nav-icon_link > .f-icon {
|
|
146
|
-
display: flex;
|
|
147
|
-
}
|
|
119
|
+
align-items: stretch;
|
|
120
|
+
font-size: $font-size-450;
|
|
148
121
|
|
|
149
|
-
|
|
122
|
+
> a {
|
|
123
|
+
display: flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
padding: 0 6px;
|
|
126
|
+
color: #fff;
|
|
127
|
+
text-decoration: none;
|
|
128
|
+
@include transition_fast(color);
|
|
129
|
+
&:hover { color: $f-nav-icon-hover; }
|
|
130
|
+
> .f-icon { display: flex; }
|
|
131
|
+
|
|
132
|
+
&.f-primary_nav-icon_link-cart {
|
|
133
|
+
position: relative;
|
|
134
|
+
|
|
135
|
+
.f-primary_nav-icon_link-cart_count {
|
|
136
|
+
position: absolute;
|
|
137
|
+
top: $f-primary_nav-icon-count_badge-top;
|
|
138
|
+
right: $f-primary_nav-icon-count_badge-right;
|
|
139
|
+
width: 18px;
|
|
140
|
+
height: 18px;
|
|
141
|
+
border-radius: $border-radius-xl;
|
|
142
|
+
background-color: $f-nav-yellow;
|
|
143
|
+
color: $color-gray-800;
|
|
144
|
+
font-size: $font-size-000;
|
|
145
|
+
font-family: $font-face-semibold;
|
|
146
|
+
display: flex;
|
|
147
|
+
align-items: center;
|
|
148
|
+
justify-content: center;
|
|
149
|
+
pointer-events: none;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
150
153
|
|
|
151
|
-
|
|
152
|
-
|
|
154
|
+
//this overrides notification dropdown styles and lets nav own these styles, selectors and nesting is necessary for selector specificity
|
|
155
|
+
.f-primary_nav-icon_notification.f-notification_dropdown {
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: stretch;
|
|
153
158
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
right: $f-primary_nav-icon-count_badge-right;
|
|
158
|
-
width: 18px;
|
|
159
|
-
height: 18px;
|
|
160
|
-
border-radius: $border-radius-xl;
|
|
161
|
-
background-color: $color-primary;
|
|
162
|
-
color: $color-white;
|
|
163
|
-
font-size: $font-size-000;
|
|
164
|
-
font-family: $font-face-semibold;
|
|
165
|
-
display: flex;
|
|
166
|
-
align-items: center;
|
|
167
|
-
justify-content: center;
|
|
168
|
-
pointer-events: none;
|
|
169
|
-
}
|
|
159
|
+
.f-notification_dropdown-bell {
|
|
160
|
+
padding: 0 6px;
|
|
161
|
+
align-items: center;
|
|
170
162
|
|
|
171
|
-
}
|
|
163
|
+
.f-notification_dropdown-bell_icon { color: #fff; }
|
|
172
164
|
|
|
173
|
-
|
|
174
|
-
.f-
|
|
175
|
-
|
|
176
|
-
align-items: stretch;
|
|
165
|
+
&:hover {
|
|
166
|
+
.f-notification_dropdown-bell_icon { color: $f-nav-icon-hover; }
|
|
167
|
+
}
|
|
177
168
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
169
|
+
.f-notification_dropdown-bell_count {
|
|
170
|
+
top: $f-primary_nav-icon-count_badge-top;
|
|
171
|
+
right: $f-primary_nav-icon-count_badge-right;
|
|
172
|
+
background-color: $f-nav-yellow;
|
|
173
|
+
color: $color-gray-800;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
181
177
|
|
|
182
|
-
.
|
|
183
|
-
|
|
184
|
-
|
|
178
|
+
//this is a placeholder div in store that houses an icon for notifications while turbolinks is transitioning. Ensures there is no jumpiness
|
|
179
|
+
#mars-notifications {
|
|
180
|
+
padding: 0 6px;
|
|
181
|
+
align-self: center;
|
|
182
|
+
.fa { display:flex; }
|
|
185
183
|
}
|
|
186
184
|
}
|
|
187
185
|
}
|
|
188
186
|
|
|
189
|
-
//this is a placeholder div in store that houses an icon for notifications while turbolinks is transitioning. Ensures there is no jumpiness
|
|
190
|
-
#mars-notifications {
|
|
191
|
-
padding: 0 6px;
|
|
192
|
-
align-self: center;
|
|
193
|
-
|
|
194
|
-
.fa { display:flex; }
|
|
195
|
-
}
|
|
196
|
-
|
|
197
187
|
.f-primary_nav-user_list {
|
|
198
188
|
display: flex;
|
|
199
189
|
align-items: center;
|
|
200
|
-
margin
|
|
190
|
+
margin: 0;
|
|
201
191
|
padding-left: 5px;
|
|
202
192
|
list-style: none;
|
|
203
193
|
|
|
@@ -212,31 +202,24 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
212
202
|
}
|
|
213
203
|
}
|
|
214
204
|
|
|
215
|
-
.f-primary_nav-
|
|
216
|
-
&.btn {
|
|
217
|
-
color: $color-white;
|
|
218
|
-
}
|
|
205
|
+
.f-primary_nav-user_link-signup {
|
|
206
|
+
&.btn { color: #fff; }
|
|
219
207
|
}
|
|
220
208
|
|
|
221
|
-
.f-primary_nav-
|
|
209
|
+
.f-primary_nav-user_link-signin {
|
|
222
210
|
&.btn {
|
|
223
211
|
&:link,
|
|
224
212
|
&:hover,
|
|
225
213
|
&:active,
|
|
226
214
|
&:visited {
|
|
227
|
-
color:
|
|
215
|
+
color: #fff;
|
|
228
216
|
text-decoration: none;
|
|
229
217
|
}
|
|
230
|
-
|
|
231
|
-
&:hover {
|
|
232
|
-
color: $color-secondary;
|
|
233
|
-
}
|
|
234
218
|
}
|
|
235
219
|
}
|
|
236
220
|
}
|
|
237
221
|
|
|
238
222
|
.f-primary_nav-user_item-avatar {
|
|
239
|
-
|
|
240
223
|
/* use below instead of display to hide so we retain padding */
|
|
241
224
|
visibility: hidden;
|
|
242
225
|
width: 0;
|
|
@@ -244,39 +227,31 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
244
227
|
.avatar {
|
|
245
228
|
padding: 0;
|
|
246
229
|
margin-right: 0;
|
|
230
|
+
border-width: 0;
|
|
247
231
|
}
|
|
248
232
|
}
|
|
249
233
|
|
|
250
|
-
.f-primary_nav-user_item-logged_out {
|
|
251
|
-
display: none;
|
|
252
|
-
}
|
|
234
|
+
.f-primary_nav-user_item-logged_out { display: none; }
|
|
253
235
|
|
|
254
236
|
.f-primary_nav-user_item-side_toggle {
|
|
255
237
|
cursor: pointer;
|
|
256
238
|
padding: 10px 10px 10px 5px;
|
|
257
239
|
margin-right: -10px;
|
|
258
240
|
|
|
259
|
-
|
|
260
|
-
background-color:
|
|
241
|
+
span {
|
|
242
|
+
background-color: #fff;
|
|
261
243
|
width: 20px;
|
|
262
244
|
display: block;
|
|
263
245
|
height: 2px;
|
|
264
246
|
border-radius: 1px;
|
|
265
|
-
@include
|
|
247
|
+
@include transition_normal(background-color, margin);
|
|
266
248
|
}
|
|
267
249
|
|
|
268
|
-
|
|
269
|
-
margin-top: 4px;
|
|
270
|
-
}
|
|
250
|
+
span:not(:first-child) { margin-top: 4px; }
|
|
271
251
|
|
|
272
252
|
&:hover {
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
.f-primary_nav-user_icon_bar:not(:first-child) {
|
|
278
|
-
margin-top: 6px;
|
|
279
|
-
}
|
|
253
|
+
span { background-color: $f-nav-icon-hover; }
|
|
254
|
+
span:not(:first-child) { margin-top: 6px; }
|
|
280
255
|
}
|
|
281
256
|
}
|
|
282
257
|
|
|
@@ -290,47 +265,50 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
290
265
|
bottom: 0;
|
|
291
266
|
z-index: $f-primary_nav-side-zindex;
|
|
292
267
|
width: $f-primary_nav-side-width;
|
|
293
|
-
|
|
294
|
-
background-color: $color-white;
|
|
268
|
+
background-color: #fff;
|
|
295
269
|
box-shadow: $f-primary_nav-shadow;
|
|
296
270
|
direction: rtl;
|
|
297
271
|
text-align: left;
|
|
298
|
-
@include
|
|
272
|
+
@include transition_fast(right);
|
|
299
273
|
|
|
300
274
|
&.is-onscreen {
|
|
301
275
|
right: 0;
|
|
302
276
|
width: 100%;
|
|
303
277
|
}
|
|
278
|
+
|
|
279
|
+
.f-primary_nav-side_icon{
|
|
280
|
+
margin-right: 0.5em;
|
|
281
|
+
}
|
|
304
282
|
}
|
|
305
283
|
|
|
306
284
|
.f-primary_nav-side_section {
|
|
307
|
-
padding: 8px
|
|
285
|
+
padding: 8px 20px;
|
|
308
286
|
margin-bottom: 0;
|
|
309
287
|
list-style: none;
|
|
310
|
-
border-bottom:
|
|
288
|
+
border-bottom: 1px solid $color-gray-300;
|
|
311
289
|
direction: ltr;
|
|
312
|
-
|
|
313
|
-
&:last-child {
|
|
314
|
-
border: none;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
.f-primary_nav-side_signout_link {
|
|
318
|
-
&:link,
|
|
319
|
-
&:hover,
|
|
320
|
-
&:active,
|
|
321
|
-
&:visited {
|
|
322
|
-
color: $color-forever_red;
|
|
323
|
-
}
|
|
324
|
-
}
|
|
290
|
+
&:last-child { border: none; }
|
|
325
291
|
|
|
326
292
|
.f-primary_nav-side_link_base {
|
|
327
|
-
text-transform: uppercase;
|
|
328
293
|
display: block;
|
|
329
294
|
font-family: $font-face-semibold;
|
|
330
|
-
font-size: $font-size-
|
|
331
|
-
padding:
|
|
295
|
+
font-size: $font-size-300;
|
|
296
|
+
padding: 6px 0;
|
|
297
|
+
color: $color-forever_blue;
|
|
298
|
+
text-decoration: none;
|
|
299
|
+
@include transition_fast(color);
|
|
300
|
+
&:hover { color: $color-gray-600; }
|
|
332
301
|
}
|
|
333
302
|
|
|
303
|
+
&.is-color-block {
|
|
304
|
+
border-bottom: none;
|
|
305
|
+
padding: 4px 20px;
|
|
306
|
+
|
|
307
|
+
.f-primary_nav-side_link_base {
|
|
308
|
+
color: #fff;
|
|
309
|
+
&:hover { color: #fff; }
|
|
310
|
+
}
|
|
311
|
+
}
|
|
334
312
|
}
|
|
335
313
|
|
|
336
314
|
.f-primary_nav-side_section-close {
|
|
@@ -345,7 +323,7 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
345
323
|
&::before,
|
|
346
324
|
&::after {
|
|
347
325
|
position: absolute;
|
|
348
|
-
right:
|
|
326
|
+
right: 8px;
|
|
349
327
|
width: 22px;
|
|
350
328
|
height: 2px;
|
|
351
329
|
content: ' ';
|
|
@@ -354,8 +332,8 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
354
332
|
@include transition_fast(background-color);
|
|
355
333
|
}
|
|
356
334
|
|
|
357
|
-
&::before { transform: rotate(
|
|
358
|
-
&::after { transform: rotate(-
|
|
335
|
+
&::before { transform: rotate(45deg); }
|
|
336
|
+
&::after { transform: rotate(-45deg); }
|
|
359
337
|
|
|
360
338
|
&:hover {
|
|
361
339
|
&::before,
|
|
@@ -420,13 +398,10 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
420
398
|
line-height: 1;
|
|
421
399
|
text-align: center;
|
|
422
400
|
}
|
|
423
|
-
|
|
424
401
|
}
|
|
425
402
|
|
|
426
403
|
.f-primary_nav-side_section-ecom_list {
|
|
427
|
-
.f-primary_nav-side_ecom-deals_link {
|
|
428
|
-
@include deals_link_base();
|
|
429
|
-
}
|
|
404
|
+
.f-primary_nav-side_ecom-deals_link { @include deals_link_base(); }
|
|
430
405
|
}
|
|
431
406
|
|
|
432
407
|
.f-primary_nav-side_section-logged_out {
|
|
@@ -437,84 +412,179 @@ $f-primary_nav-icon-count_badge-right: -4px;
|
|
|
437
412
|
}
|
|
438
413
|
}
|
|
439
414
|
|
|
415
|
+
.f-primary_nav_cpmeganav {
|
|
416
|
+
position: absolute;
|
|
417
|
+
top: 100%;
|
|
418
|
+
left: 50%;
|
|
419
|
+
transform: translateX(-50%);
|
|
420
|
+
width: 94%;
|
|
421
|
+
max-width: 1300px;
|
|
422
|
+
background: #fff;
|
|
423
|
+
box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.2);
|
|
424
|
+
border-radius: 0 0 8px 8px;
|
|
425
|
+
margin: 0;
|
|
426
|
+
padding: 0;
|
|
427
|
+
list-style: none;
|
|
428
|
+
opacity: 1;
|
|
429
|
+
transition: opacity 0.15s ease-in-out;
|
|
430
|
+
z-index: inherit;
|
|
440
431
|
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
432
|
+
&.hidden {
|
|
433
|
+
opacity: 0;
|
|
434
|
+
display: flex !important;
|
|
435
|
+
visibility: none;
|
|
436
|
+
top: -9999px;
|
|
437
|
+
left:-9999px;
|
|
446
438
|
}
|
|
447
439
|
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
440
|
+
ul {
|
|
441
|
+
list-style: none;
|
|
442
|
+
margin: 0;
|
|
443
|
+
padding: 0;
|
|
451
444
|
}
|
|
452
445
|
|
|
453
|
-
|
|
454
|
-
padding
|
|
455
|
-
|
|
446
|
+
> li {
|
|
447
|
+
padding: 20px 20px 0;
|
|
448
|
+
&:nth-child(even) { background-color: $color-gray-200; }
|
|
449
|
+
|
|
450
|
+
a {
|
|
451
|
+
display: block;
|
|
452
|
+
font-family: $font-face-semibold;
|
|
453
|
+
line-height: 1;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
p {
|
|
457
|
+
margin: 0;
|
|
458
|
+
color: $color-forever_gray;
|
|
459
|
+
font-family: $font-face-regular;
|
|
460
|
+
line-height: 1.4;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
> a { font-size: 20px; }
|
|
456
464
|
|
|
457
|
-
|
|
458
|
-
|
|
465
|
+
.f-primary_nav_cpmeganav_title {
|
|
466
|
+
display: block;
|
|
467
|
+
font-family: $font-face-semibold;
|
|
468
|
+
line-height: 1;
|
|
469
|
+
font-size: 20px;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
> p { font-size: $font-size-200; }
|
|
473
|
+
|
|
474
|
+
> ul {
|
|
475
|
+
padding-top: 20px;
|
|
476
|
+
display: flex;
|
|
477
|
+
flex-wrap: wrap;
|
|
478
|
+
justify-content: flex-start;
|
|
479
|
+
|
|
480
|
+
> li {
|
|
481
|
+
min-width: 180px;
|
|
482
|
+
max-width: 300px;
|
|
483
|
+
min-height: 60px;
|
|
484
|
+
margin-bottom: 20px;
|
|
485
|
+
|
|
486
|
+
img {
|
|
487
|
+
float: left;
|
|
488
|
+
width: 60px;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
> a {
|
|
492
|
+
font-size: 16px;
|
|
493
|
+
margin-left: 70px;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
> p {
|
|
497
|
+
font-size: 12px;
|
|
498
|
+
margin: 8px 0 0 70px;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
> ul {
|
|
502
|
+
margin: 4px 0 0 70px;
|
|
503
|
+
|
|
504
|
+
> li {
|
|
505
|
+
margin: 0 0 2px;
|
|
506
|
+
font-size: 12px;
|
|
507
|
+
|
|
508
|
+
span.badge {
|
|
509
|
+
border-radius: 2px;
|
|
510
|
+
padding: 2px 4px;
|
|
511
|
+
color: #fff;
|
|
512
|
+
background-color: $color-forever_orange;
|
|
513
|
+
font-size: 10px;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
> a {
|
|
517
|
+
font-size: 12px;
|
|
518
|
+
display: inline-block;
|
|
519
|
+
font-family: $font-face-regular;
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
}
|
|
459
525
|
}
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
//everything above xs
|
|
529
|
+
@media (min-width: $screen-xs) {
|
|
530
|
+
.f-primary_nav-main { padding: 0 15px; }
|
|
531
|
+
|
|
532
|
+
.f-primary_nav-user_list { padding-left: 10px; }
|
|
460
533
|
|
|
461
534
|
.f-primary_nav-user_item-avatar {
|
|
462
535
|
visibility: visible;
|
|
463
536
|
width: auto;
|
|
464
537
|
}
|
|
538
|
+
}
|
|
465
539
|
|
|
466
|
-
|
|
467
|
-
|
|
540
|
+
//everything above sm
|
|
541
|
+
@media (min-width: $screen-sm) {
|
|
542
|
+
.f-primary_nav-ecom_list {
|
|
543
|
+
> li { display: flex; }
|
|
468
544
|
}
|
|
545
|
+
|
|
546
|
+
.f-primary_nav-side.is-onscreen { width: $f-primary_nav-side-width; }
|
|
469
547
|
}
|
|
470
548
|
|
|
471
549
|
//everything above medium
|
|
472
550
|
@media (min-width: $screen-md) {
|
|
551
|
+
.f-primary_nav-user_item-logged_out { display: flex; }
|
|
473
552
|
|
|
474
|
-
.f-primary_nav-
|
|
475
|
-
|
|
553
|
+
.f-primary_nav-side_section-ecom_list { display: none; }
|
|
554
|
+
|
|
555
|
+
.f-primary_nav-user_item-side_toggle {
|
|
556
|
+
&.is-unauthenticated { display: none; }
|
|
476
557
|
}
|
|
477
558
|
|
|
478
|
-
.f-
|
|
559
|
+
.f-primary_nav_cpmeganav {
|
|
479
560
|
display: flex;
|
|
480
|
-
}
|
|
481
561
|
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
}
|
|
562
|
+
> li {
|
|
563
|
+
> p { min-height: 42px; }
|
|
485
564
|
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
565
|
+
&:nth-child(odd) { width: 28%; }
|
|
566
|
+
|
|
567
|
+
&:nth-child(2) {
|
|
568
|
+
width: 44%;
|
|
569
|
+
background-color: transparent;
|
|
570
|
+
border-style: solid;
|
|
571
|
+
border-width: 0 1px;
|
|
572
|
+
border-color: $color-gray-400;
|
|
573
|
+
}
|
|
489
574
|
}
|
|
490
575
|
}
|
|
491
576
|
}
|
|
492
577
|
|
|
493
578
|
//everything above lg
|
|
494
579
|
@media (min-width: $screen-lg) {
|
|
495
|
-
.f-primary_nav-
|
|
496
|
-
|
|
497
|
-
padding-right: 8px;
|
|
498
|
-
font-size: $font-size-300;
|
|
580
|
+
.f-primary_nav-ecom_list {
|
|
581
|
+
> li > a { font-size: $font-size-300; }
|
|
499
582
|
}
|
|
500
|
-
}
|
|
501
583
|
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
@media (max-width: $screen-md_to_lg) and (min-width: $screen-md) {
|
|
510
|
-
.f-primary_nav-logo_image {
|
|
511
|
-
height: 22px;
|
|
512
|
-
width: 138px;
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
@media (max-width: $screen-lg-max) and (min-width: $screen-md) {
|
|
517
|
-
.f-primary_nav-icon_item {
|
|
518
|
-
font-size: $font-size-450;
|
|
584
|
+
.f-primary_nav_cpmeganav {
|
|
585
|
+
> li {
|
|
586
|
+
&:nth-child(odd) { width: 25%; }
|
|
587
|
+
&:nth-child(2) { width: 50%; }
|
|
588
|
+
}
|
|
519
589
|
}
|
|
520
590
|
}
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
.hero-subnav_spacer {
|
|
2
|
+
padding-top: 47px;
|
|
3
|
+
margin-top: -47px;
|
|
4
|
+
|
|
5
|
+
@media (max-width: 768px) {
|
|
6
|
+
padding-top: 0px;
|
|
7
|
+
margin-top: 0px;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.hero-subnav_offset {
|
|
12
|
+
margin-top: -47px;
|
|
13
|
+
|
|
14
|
+
@media (max-width: 768px) {
|
|
15
|
+
margin-top: 0px;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.hero-subnav_padding {
|
|
20
|
+
padding-top: 47px;
|
|
21
|
+
|
|
22
|
+
@media (max-width: 768px) {
|
|
23
|
+
padding-top: 0px;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.f-subnav-container {
|
|
28
|
+
display: block;
|
|
29
|
+
visibility: visible;
|
|
30
|
+
position: sticky;
|
|
31
|
+
height: 47px;
|
|
32
|
+
padding-top: 6px;
|
|
33
|
+
padding-bottom: 6px;
|
|
34
|
+
padding-right: 15px;
|
|
35
|
+
padding-left: 15px;
|
|
36
|
+
background: transparentize($color-white, 0.15);
|
|
37
|
+
z-index: 1029;
|
|
38
|
+
-webkit-backdrop-filter: blur(10px);
|
|
39
|
+
backdrop-filter: blur(10px);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media (max-width: 768px) {
|
|
43
|
+
.f-subnav-container{
|
|
44
|
+
visibility: hidden;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
position: relative;
|
|
47
|
+
z-index: 0;
|
|
48
|
+
height: 0px;
|
|
49
|
+
padding: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.f-subnav-action {
|
|
55
|
+
margin-left: 10px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.js-subnav.is-fixed{
|
|
59
|
+
top: 50px;
|
|
60
|
+
width: 100%;
|
|
61
|
+
z-index: 1031;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.f-subnav{
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: row;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
align-items: center;
|
|
69
|
+
|
|
70
|
+
& > * {
|
|
71
|
+
font-size: 15px;
|
|
72
|
+
-webkit-user-select: none;
|
|
73
|
+
-moz-user-select: none;
|
|
74
|
+
-ms-user-select: none;
|
|
75
|
+
user-select: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
& > .links {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: row;
|
|
81
|
+
flex-wrap: nowrap;
|
|
82
|
+
list-style: none;
|
|
83
|
+
margin: 0;
|
|
84
|
+
overflow: visible;
|
|
85
|
+
padding-inline-start: 0;
|
|
86
|
+
|
|
87
|
+
& > a {
|
|
88
|
+
flex-basis: 100%;
|
|
89
|
+
text-align: center;
|
|
90
|
+
color: $color-gray-600;
|
|
91
|
+
white-space: nowrap;
|
|
92
|
+
margin-left: 10px;
|
|
93
|
+
margin-right: 10px;
|
|
94
|
+
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
& > a:hover, a:active, > a:focus {
|
|
98
|
+
text-decoration: none;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
& > a:hover > span {
|
|
102
|
+
background: transparentize($color-black, 0.95);
|
|
103
|
+
color: $color-secondary;
|
|
104
|
+
border-radius: 32px;
|
|
105
|
+
padding: 4px 12px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
& > a > span {
|
|
109
|
+
padding: 4px 12px;
|
|
110
|
+
border-radius: 32px;
|
|
111
|
+
transition: color 0.3s ease, background 0.3s ease;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
& > a > span.active {
|
|
115
|
+
background: transparentize($color-black, 0.95);
|
|
116
|
+
color: $color-secondary;
|
|
117
|
+
font-family: proxima_nova-semibold;
|
|
118
|
+
border-radius: 32px;
|
|
119
|
+
padding: 4px 12px;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.f-subnav-dropdown-trigger {
|
|
125
|
+
position: relative;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
|
|
128
|
+
& > span {
|
|
129
|
+
flex-basis: 100%;
|
|
130
|
+
text-align: center;
|
|
131
|
+
color: $color-gray-600;
|
|
132
|
+
white-space: nowrap;
|
|
133
|
+
margin-left: 10px;
|
|
134
|
+
margin-right: 10px;
|
|
135
|
+
padding: 4px 12px;
|
|
136
|
+
transition: color 0.3s ease, background 0.3s ease;
|
|
137
|
+
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
& .active {
|
|
141
|
+
background: transparentize($color-black, 0.95);
|
|
142
|
+
color: $color-secondary;
|
|
143
|
+
font-family: proxima_nova-semibold;
|
|
144
|
+
border-radius: 32px;
|
|
145
|
+
padding: 4px 12px;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
& :hover > span, :active > span, :focus > span {
|
|
149
|
+
background: transparentize($color-black, 0.95);
|
|
150
|
+
color: $color-secondary;
|
|
151
|
+
border-radius: 32px;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.f-subnav-dropdown {
|
|
156
|
+
|
|
157
|
+
display: flex;
|
|
158
|
+
flex-direction: column;
|
|
159
|
+
position: absolute;
|
|
160
|
+
background: transparentize($color-white, 0.05);
|
|
161
|
+
white-space: nowrap;
|
|
162
|
+
transition: opacity 0.15s ease;
|
|
163
|
+
-webkit-backdrop-filter: blur(10px);
|
|
164
|
+
backdrop-filter: blur(10px);
|
|
165
|
+
border-radius: 2px;
|
|
166
|
+
visibility: visible;
|
|
167
|
+
top: 28px;
|
|
168
|
+
left: 50%;
|
|
169
|
+
opacity: 1;
|
|
170
|
+
transform: translateX(-50%);
|
|
171
|
+
padding: 15px;
|
|
172
|
+
|
|
173
|
+
& > a {
|
|
174
|
+
padding: 6px 12px;
|
|
175
|
+
text-align: center;
|
|
176
|
+
|
|
177
|
+
&:hover, :active, :focus {
|
|
178
|
+
background: transparentize($color-black, 0.95);
|
|
179
|
+
color: $color-secondary;
|
|
180
|
+
border-radius: 32px;
|
|
181
|
+
text-decoration: none;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&.active {
|
|
185
|
+
background: transparentize($color-black, 0.95);
|
|
186
|
+
color: $color-secondary;
|
|
187
|
+
font-family: proxima_nova-semibold;
|
|
188
|
+
border-radius: 32px;
|
|
189
|
+
padding: 4px 12px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
&:not(:first-child){
|
|
193
|
+
margin-top: 10px;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
&:after {
|
|
198
|
+
position: absolute;
|
|
199
|
+
top: -8px;
|
|
200
|
+
left: 50%;
|
|
201
|
+
transform: translateX(-50%);
|
|
202
|
+
content: ' ';
|
|
203
|
+
display: block;
|
|
204
|
+
width: 0;
|
|
205
|
+
height: 0;
|
|
206
|
+
border-left: 8px solid transparent;
|
|
207
|
+
border-right: 8px solid transparent;
|
|
208
|
+
border-bottom: 8px solid transparentize($color-white, 0.14);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&.hidden{
|
|
212
|
+
visibility: hidden;
|
|
213
|
+
left: -9999px;
|
|
214
|
+
top: -9999px;
|
|
215
|
+
opacity: 0;
|
|
216
|
+
transform: translateX(0%);
|
|
217
|
+
}
|
|
218
|
+
}
|
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: 4.
|
|
4
|
+
version: 4.1.11
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Nicholas McClay
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2020-
|
|
11
|
+
date: 2020-10-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description: Install this as a gem in your Forever app and it will expose style guide
|
|
14
14
|
through /style-guide route
|
|
@@ -116,6 +116,7 @@ files:
|
|
|
116
116
|
- app/assets/stylesheets/forever_style_guide/modules/_responsive_utilities.scss
|
|
117
117
|
- app/assets/stylesheets/forever_style_guide/modules/_select.scss
|
|
118
118
|
- app/assets/stylesheets/forever_style_guide/modules/_signin.scss
|
|
119
|
+
- app/assets/stylesheets/forever_style_guide/modules/_subnav.scss
|
|
119
120
|
- app/assets/stylesheets/forever_style_guide/utils/_color-utils.scss
|
|
120
121
|
- app/assets/stylesheets/forever_style_guide/utils/_font-utils.scss
|
|
121
122
|
- app/assets/stylesheets/forever_style_guide/utils/_logger.scss
|