forever_style_guide 3.3.2 → 3.3.3
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/_mixins.scss +37 -0
- data/app/assets/stylesheets/forever_style_guide/globals/_variables.scss +12 -1
- data/app/assets/stylesheets/forever_style_guide/modules/_ambassador_banner.scss +7 -8
- data/app/assets/stylesheets/forever_style_guide/modules/_impersonation_banner.scss +17 -4
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-account_dropdown.scss +17 -55
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-fixed.scss +4 -0
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-mobile-menu.scss +88 -76
- data/app/assets/stylesheets/forever_style_guide/modules/_nav.scss +17 -87
- data/lib/forever_style_guide/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: db1274251d3a6b815506a1b6a029921a248f81e3
|
|
4
|
+
data.tar.gz: 7242405c69d4a47f176697ce07a6c8f33afe0e9c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 36464a0e415cdc9e35db42e3639d3ad7a70fa57ee964197f18af752fc57e4abd69e4775b83234b3028ad4eb51fd6e8e6dfebbbe02b382feb2098aaf21192fec5
|
|
7
|
+
data.tar.gz: e08b40972b8ab59ad9cad290f5472fe5951e43dbe8032e8c44a5de64b92306131c0f0b8d0e44eeac6ff4514b9b753c2eea337bc634ea5d8ce1f8981b0cb333e7
|
|
@@ -41,3 +41,40 @@ $color-nav-hover: color('secondary');
|
|
|
41
41
|
border: 0;
|
|
42
42
|
border-#{$direction}: $header_active_border_height solid $color;
|
|
43
43
|
}
|
|
44
|
+
|
|
45
|
+
// Shared nav mixin for offcanvas mobile nav and desktop user info
|
|
46
|
+
@mixin off-canvas-style {
|
|
47
|
+
position: fixed;
|
|
48
|
+
top: 0;
|
|
49
|
+
right: 0;
|
|
50
|
+
bottom: 0;
|
|
51
|
+
width: 0;
|
|
52
|
+
background-color: $color-white;
|
|
53
|
+
transform: translateX(100%);
|
|
54
|
+
transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out; // TODO - animate out
|
|
55
|
+
z-index: $zindex-tooltip;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
|
|
58
|
+
&.in {
|
|
59
|
+
padding-left: 20px;
|
|
60
|
+
padding-right: 20px;
|
|
61
|
+
opacity: 1;
|
|
62
|
+
transform: translateX(0%);
|
|
63
|
+
direction: rtl; // puts scrollbar to lefthand side
|
|
64
|
+
overflow-y: scroll;
|
|
65
|
+
width: $minimum-application-width;
|
|
66
|
+
z-index: $in-front-of-primary-and-banner-and-impersonation;
|
|
67
|
+
|
|
68
|
+
@media (max-width: $screen-xs) {
|
|
69
|
+
width: 100%;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.nav-mobile-menu-close {
|
|
73
|
+
display: block;
|
|
74
|
+
}
|
|
75
|
+
.navbar-toggle {
|
|
76
|
+
display: block;
|
|
77
|
+
padding-right: 0;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
@@ -21,7 +21,7 @@ $padding-xs-horizontal: 6px !global;
|
|
|
21
21
|
|
|
22
22
|
/* =variables
|
|
23
23
|
---------------------------------------------------------------------------- */
|
|
24
|
-
$header-height: 55px;
|
|
24
|
+
$header-height: 55px; // TODO - where is this being used?
|
|
25
25
|
|
|
26
26
|
$footer-height: 486px;
|
|
27
27
|
$footer-height-sm: 365px;
|
|
@@ -63,3 +63,14 @@ $zindex-navbar-fixed: 1030;
|
|
|
63
63
|
$zindex-navbar-menu: 1020;
|
|
64
64
|
$zindex-modal-background: 1040;
|
|
65
65
|
$zindex-modal: 1050;
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
/* Fixed (New) Nav Implementation */
|
|
69
|
+
$behind-primary-nav: $zindex-navbar-fixed - 1;
|
|
70
|
+
$in-front-of-primary-nav-but-behind-banner: $zindex-navbar-fixed + 1;
|
|
71
|
+
$in-front-of-primary-nav: $zindex-navbar-fixed + 2;
|
|
72
|
+
$in-front-of-primary-and-banner: $zindex-navbar-fixed + 3;
|
|
73
|
+
$in-front-of-primary-and-banner-and-impersonation: $zindex-navbar-fixed + 4;
|
|
74
|
+
|
|
75
|
+
$ambassador-banner-text-height: 32px;
|
|
76
|
+
$impersonation-banner-height: 20px;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
$banner-text-height: 32px;
|
|
2
1
|
$banner-vertical-padding: 6px;
|
|
3
2
|
$banner-text-max-width: 70%;
|
|
4
3
|
|
|
@@ -9,10 +8,6 @@ $banner-text-color: transparentize($color-white, 0.2);
|
|
|
9
8
|
|
|
10
9
|
$ambassador-avatar-size: 130px;
|
|
11
10
|
|
|
12
|
-
$behind-primary-nav: $zindex-navbar-fixed - 1;
|
|
13
|
-
$in-front-of-primary-nav: $zindex-navbar-fixed + 2;
|
|
14
|
-
$in-front-of-primary-nav-but-behind-banner: $zindex-navbar-fixed + 1;
|
|
15
|
-
|
|
16
11
|
$banner-hover-effect-speed: 0.15s;
|
|
17
12
|
$chevron-rotate-effect-speed: 0.25s;
|
|
18
13
|
$dropdown-entrance-and-exit-effect-speed: 0.22s;
|
|
@@ -28,7 +23,8 @@ a.ambassador_banner {
|
|
|
28
23
|
}
|
|
29
24
|
|
|
30
25
|
.ambassador_banner-text {
|
|
31
|
-
position:
|
|
26
|
+
position: static;
|
|
27
|
+
height: $ambassador-banner-text-height;
|
|
32
28
|
padding-top: $banner-vertical-padding;
|
|
33
29
|
padding-bottom: $banner-vertical-padding;
|
|
34
30
|
color: $banner-text-color;
|
|
@@ -42,10 +38,10 @@ a.ambassador_banner {
|
|
|
42
38
|
|
|
43
39
|
&::after {
|
|
44
40
|
position: absolute;
|
|
41
|
+
height: $ambassador-banner-text-height;
|
|
45
42
|
top: 0;
|
|
46
43
|
left: 0;
|
|
47
44
|
width: 100%;
|
|
48
|
-
height: 100%;
|
|
49
45
|
background-color: $color-black;
|
|
50
46
|
opacity: 0;
|
|
51
47
|
@include transition(opacity $banner-hover-effect-speed ease-in-out);
|
|
@@ -91,8 +87,9 @@ a.ambassador_banner {
|
|
|
91
87
|
|
|
92
88
|
.ambassador_banner-dropdown_container {
|
|
93
89
|
position: absolute;
|
|
94
|
-
top: $banner-text-height;
|
|
90
|
+
top: $ambassador-banner-text-height;
|
|
95
91
|
left: 0;
|
|
92
|
+
visibility: hidden;
|
|
96
93
|
width: 100%;
|
|
97
94
|
transform: translateY(-100%);
|
|
98
95
|
@include transition(all $dropdown-entrance-and-exit-effect-speed ease-in);
|
|
@@ -100,8 +97,10 @@ a.ambassador_banner {
|
|
|
100
97
|
pointer-events: none;
|
|
101
98
|
|
|
102
99
|
&.open {
|
|
100
|
+
opacity: 1;
|
|
103
101
|
transform: translateY(0%);
|
|
104
102
|
pointer-events: auto;
|
|
103
|
+
visibility: visible;
|
|
105
104
|
}
|
|
106
105
|
}
|
|
107
106
|
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
$in-front-of-primary-nav-and-ambassador-banner: $zindex-navbar-fixed + 3;
|
|
2
|
-
$impersonation-banner-height: 20px;
|
|
3
|
-
|
|
4
1
|
.impersonation_banner {
|
|
5
2
|
position: fixed;
|
|
6
3
|
top: 0;
|
|
@@ -9,7 +6,7 @@ $impersonation-banner-height: 20px;
|
|
|
9
6
|
min-width: $minimum-application-width;
|
|
10
7
|
padding-top: 1px; // shimming visual alignment
|
|
11
8
|
font-size: $font-size-100;
|
|
12
|
-
z-index: $in-front-of-primary-
|
|
9
|
+
z-index: $in-front-of-primary-and-banner;
|
|
13
10
|
}
|
|
14
11
|
|
|
15
12
|
.has-impersonation_banner {
|
|
@@ -17,6 +14,22 @@ $impersonation-banner-height: 20px;
|
|
|
17
14
|
#header-is_fixed.affix {
|
|
18
15
|
margin-top: $impersonation-banner-height;
|
|
19
16
|
}
|
|
17
|
+
.ambassador_banner-dropdown_container.open {
|
|
18
|
+
top: $ambassador-banner-text-height + $impersonation-banner-height;
|
|
19
|
+
}
|
|
20
|
+
.ambassador_banner-text:after {
|
|
21
|
+
top: $impersonation-banner-height;
|
|
22
|
+
}
|
|
23
|
+
.nav-mobile-menu.in {
|
|
24
|
+
@media(max-width: $grid-float-breakpoint) {
|
|
25
|
+
top: $impersonation-banner-height;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
.navigation-account_dropdown.in {
|
|
29
|
+
@media(min-width: $grid-float-breakpoint) {
|
|
30
|
+
top: $impersonation-banner-height;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
20
33
|
}
|
|
21
34
|
|
|
22
35
|
.btn.btn-cancel_impersonation {
|
|
@@ -12,18 +12,21 @@ $padding-small-horizontal: 3px;
|
|
|
12
12
|
height: 100%;
|
|
13
13
|
margin-top: 7px;
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
transform: rotate(180deg);
|
|
18
|
-
}
|
|
15
|
+
@media (min-width: $screen-md) {
|
|
16
|
+
margin-right: 15px;
|
|
19
17
|
}
|
|
18
|
+
}
|
|
20
19
|
|
|
20
|
+
// Dont show user info close btn when in mobile offcanvas
|
|
21
|
+
.nav-mobile-menu.in .nav-mobile-menu-close {
|
|
21
22
|
@media (max-width: $grid-float-breakpoint) {
|
|
22
|
-
|
|
23
|
+
order: 1;// .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
|
|
23
24
|
}
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
&.nav-user_info-close {
|
|
27
|
+
@media (max-width: $grid-float-breakpoint) {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
27
30
|
}
|
|
28
31
|
}
|
|
29
32
|
|
|
@@ -31,7 +34,7 @@ $padding-small-horizontal: 3px;
|
|
|
31
34
|
margin-top: -3px; // magic number to vertical align
|
|
32
35
|
}
|
|
33
36
|
|
|
34
|
-
.navigation-user_info-avatar {
|
|
37
|
+
.navigation-user_info-avatar {
|
|
35
38
|
height: $avatar-height;
|
|
36
39
|
width: $avatar-width;
|
|
37
40
|
margin-right: $padding-default-horizontal;
|
|
@@ -65,35 +68,18 @@ $padding-small-horizontal: 3px;
|
|
|
65
68
|
overflow-y: hidden;
|
|
66
69
|
transition: opacity 0.15s ease-in-out;
|
|
67
70
|
|
|
71
|
+
@media (max-width: $grid-float-breakpoint) {
|
|
72
|
+
display: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
68
75
|
&:hover {
|
|
69
76
|
opacity: 0.7;
|
|
70
77
|
}
|
|
71
78
|
}
|
|
72
79
|
|
|
73
80
|
.navigation-account_dropdown {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
box-shadow: 0 5px 20px rgba(0,0,0,.1);
|
|
77
|
-
top: calc(100% + 20px);
|
|
78
|
-
right: $nav-horizontal-spacing;
|
|
79
|
-
padding: $padding-large-vertical $padding-large-horizontal;
|
|
80
|
-
padding-bottom: 0;
|
|
81
|
-
width: 300px;
|
|
82
|
-
|
|
83
|
-
&::before {
|
|
84
|
-
content: "";
|
|
85
|
-
position: absolute;
|
|
86
|
-
top: -10px;
|
|
87
|
-
right: 10px;
|
|
88
|
-
width: 0;
|
|
89
|
-
height: 0;
|
|
90
|
-
border-left: 10px solid transparent;
|
|
91
|
-
border-right: 10px solid transparent;
|
|
92
|
-
border-bottom: 10px solid $color-white;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
&.open {
|
|
96
|
-
display: block;
|
|
81
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
82
|
+
@include off-canvas-style;
|
|
97
83
|
}
|
|
98
84
|
}
|
|
99
85
|
|
|
@@ -134,7 +120,6 @@ $padding-small-horizontal: 3px;
|
|
|
134
120
|
}
|
|
135
121
|
|
|
136
122
|
.navigation-account_dropdown-list {
|
|
137
|
-
|
|
138
123
|
padding-top: $padding-small-vertical;
|
|
139
124
|
padding-bottom: $padding-small-vertical;
|
|
140
125
|
margin-bottom: 0;
|
|
@@ -157,31 +142,8 @@ a.navigation-account_dropdown-list-item {
|
|
|
157
142
|
color: $color-gray-600;
|
|
158
143
|
text-decoration: none;
|
|
159
144
|
|
|
160
|
-
&::before {
|
|
161
|
-
@media screen and (min-width: $screen-xs) {
|
|
162
|
-
position: absolute;
|
|
163
|
-
bottom: 0;
|
|
164
|
-
left: 0;
|
|
165
|
-
height: 100%;
|
|
166
|
-
width: 4px;
|
|
167
|
-
background-color: $color-secondary;
|
|
168
|
-
content: "";
|
|
169
|
-
transform: scaleX(0);
|
|
170
|
-
transition: transform 0.15s ease-in-out;
|
|
171
|
-
transform-origin: left;
|
|
172
|
-
}
|
|
173
|
-
@media screen and (max-width: $grid-float-breakpoint) {
|
|
174
|
-
left: $mobile-menu-active-bar-offset;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
|
|
178
145
|
&:hover {
|
|
179
146
|
color: $color-secondary;
|
|
180
|
-
|
|
181
|
-
&::before {
|
|
182
|
-
transform: scaleX(1);
|
|
183
|
-
transition: transform 0.25s ease-in-out;
|
|
184
|
-
}
|
|
185
147
|
}
|
|
186
148
|
}
|
|
187
149
|
|
|
@@ -1,4 +1,30 @@
|
|
|
1
1
|
$nav-icon_bar-width: 22px;
|
|
2
|
+
$close-icon-offset: -5px;
|
|
3
|
+
$mobile-menu-close-btn-height: 40px;
|
|
4
|
+
|
|
5
|
+
.nav-mobile-menu {
|
|
6
|
+
@media (max-width: $grid-float-breakpoint) {
|
|
7
|
+
@include off-canvas-style;
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.navbar-user_info {
|
|
14
|
+
@media (max-width: $grid-float-breakpoint) {
|
|
15
|
+
max-height: none !important; // important overrides navbar bootstrap stuff
|
|
16
|
+
order: 2; // .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.nav-mobile-menu-close {
|
|
21
|
+
display: none;
|
|
22
|
+
height: $mobile-menu-close-btn-height;
|
|
23
|
+
|
|
24
|
+
.navbar-toggle {
|
|
25
|
+
margin-right: 0;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
2
28
|
|
|
3
29
|
.navbar-header {
|
|
4
30
|
@media (max-width: $grid-float-breakpoint) {
|
|
@@ -17,104 +43,90 @@ $nav-icon_bar-width: 22px;
|
|
|
17
43
|
margin-left: 5px;
|
|
18
44
|
}
|
|
19
45
|
|
|
20
|
-
|
|
46
|
+
&:hover {
|
|
47
|
+
.icon-bar {
|
|
48
|
+
background-color: $color-secondary;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// begin Hamburger
|
|
21
53
|
.icon-bar {
|
|
22
54
|
background-color: $color-gray-600;
|
|
23
55
|
transition: all 0.2s;
|
|
56
|
+
width: $nav-icon_bar-width;
|
|
24
57
|
}
|
|
25
|
-
|
|
26
|
-
|
|
58
|
+
|
|
59
|
+
.icon-bar-back_slash {
|
|
60
|
+
margin-bottom: $close-icon-offset;
|
|
61
|
+
transform: rotate(-45deg);
|
|
27
62
|
}
|
|
28
63
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
width: $nav-icon_bar-width;
|
|
32
|
-
}
|
|
33
|
-
.top-bar {
|
|
34
|
-
transform: rotate(45deg);
|
|
35
|
-
transform-origin: 10% 10%;
|
|
36
|
-
}
|
|
37
|
-
.middle-bar {
|
|
38
|
-
opacity: 0;
|
|
39
|
-
}
|
|
40
|
-
.bottom-bar {
|
|
41
|
-
transform: rotate(-45deg);
|
|
42
|
-
transform-origin: 10% 90%;
|
|
43
|
-
}
|
|
64
|
+
.icon-bar-forward_slash {
|
|
65
|
+
transform: rotate(45deg);
|
|
44
66
|
}
|
|
45
67
|
}
|
|
46
68
|
|
|
69
|
+
// Log In & Sign Up Buttons
|
|
47
70
|
.navbar-nav > li {
|
|
48
71
|
@media (max-width: $grid-float-breakpoint) {
|
|
49
72
|
float: none;
|
|
50
73
|
}
|
|
51
74
|
|
|
52
|
-
&.
|
|
53
|
-
display: none;
|
|
54
|
-
|
|
75
|
+
&.nav-mobile-menu-btns {
|
|
55
76
|
@media (max-width: $grid-float-breakpoint) {
|
|
56
|
-
|
|
57
|
-
padding:
|
|
77
|
+
padding-right: 20px;
|
|
78
|
+
padding-top: 10px;
|
|
58
79
|
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.navigation-user_info-logged_out-mobile > a.btn {
|
|
63
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
64
|
-
padding-top: 10px; // custom pad req. to override BS to fix btn align bug
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// mobile menu button styling
|
|
69
|
-
.nav-mobile-menu-account {
|
|
70
|
-
padding-top: 10px;
|
|
71
|
-
padding-left: 25px;
|
|
72
|
-
padding-right: 25px;
|
|
73
|
-
width: 100%;
|
|
74
|
-
background-color: $color-white;
|
|
75
|
-
}
|
|
76
80
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
background-color: $color-white;
|
|
88
|
-
transform: translateX(100%);
|
|
89
|
-
transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out, width 0.2s ease-in-out;
|
|
90
|
-
z-index: $zindex-tooltip; /* Sit on top */
|
|
91
|
-
|
|
92
|
-
&.affix {
|
|
93
|
-
position: fixed;
|
|
94
|
-
top: $nav-height;
|
|
95
|
-
bottom: 0;
|
|
96
|
-
overflow-y: scroll;
|
|
97
|
-
overflow-y: overlay; // better for webkit browsers
|
|
98
|
-
overflow-x: hidden;
|
|
81
|
+
&.nav-mobile-menu-signup {
|
|
82
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
83
|
+
float: right!important; //put sign up out to right on desktop
|
|
84
|
+
}
|
|
85
|
+
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md) {
|
|
86
|
+
padding-right: 5px;
|
|
87
|
+
}
|
|
88
|
+
@media (min-width: $screen-md) {
|
|
89
|
+
padding-right: 15px;
|
|
90
|
+
}
|
|
99
91
|
}
|
|
100
92
|
|
|
101
|
-
|
|
102
|
-
|
|
93
|
+
//customize both buttons to account for overall nav spacing
|
|
94
|
+
a.btn {
|
|
95
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
96
|
+
margin-top: 3px;
|
|
97
|
+
padding-left: 5px;
|
|
98
|
+
padding-right: 5px;
|
|
99
|
+
font-size: $font-size-100;
|
|
100
|
+
line-height: 1;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@media (max-width: $grid-float-breakpoint) {
|
|
104
|
+
display: block;
|
|
105
|
+
padding-top: 10px;
|
|
106
|
+
}
|
|
103
107
|
}
|
|
104
|
-
}
|
|
105
108
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
+
.btn.btn-login {
|
|
110
|
+
@media(min-width: $grid-float-breakpoint) {
|
|
111
|
+
color: $color-gray-600;
|
|
112
|
+
background-color: transparent;
|
|
113
|
+
border-color: white;
|
|
114
|
+
|
|
115
|
+
&:hover,
|
|
116
|
+
&:focus,
|
|
117
|
+
&:active,
|
|
118
|
+
&:active:focus {
|
|
119
|
+
color: $color-secondary;
|
|
120
|
+
box-shadow: none;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
109
123
|
}
|
|
110
|
-
}
|
|
111
124
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
transform: translateX(0%);
|
|
125
|
+
.btn.btn-signup {
|
|
126
|
+
&:focus {
|
|
127
|
+
background-color: color('primary-dark');
|
|
128
|
+
border-color: color('primary-dark');
|
|
129
|
+
}
|
|
130
|
+
}
|
|
119
131
|
}
|
|
120
132
|
}
|
|
@@ -28,15 +28,8 @@ $deals-icon-vertical-position: -5px;
|
|
|
28
28
|
position: absolute;
|
|
29
29
|
bottom: 0;
|
|
30
30
|
left: 0;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
height: $hover-border-size;
|
|
34
|
-
width: 100%;
|
|
35
|
-
} @else if $orientation == vertical {
|
|
36
|
-
height: 100%;
|
|
37
|
-
width: $hover-border-size;
|
|
38
|
-
}
|
|
39
|
-
|
|
31
|
+
height: $hover-border-size;
|
|
32
|
+
width: 100%;
|
|
40
33
|
background-color: $color-secondary;
|
|
41
34
|
content: "";
|
|
42
35
|
transform: scaleX(0);
|
|
@@ -99,6 +92,10 @@ $deals-icon-vertical-position: -5px;
|
|
|
99
92
|
letter-spacing: $letter-spacing-medium;
|
|
100
93
|
}
|
|
101
94
|
|
|
95
|
+
@media (max-width: $grid-float-breakpoint) {
|
|
96
|
+
padding-left: 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
102
99
|
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
|
|
103
100
|
font-size: $font-size-150;
|
|
104
101
|
}
|
|
@@ -117,14 +114,10 @@ $deals-icon-vertical-position: -5px;
|
|
|
117
114
|
@media (max-width: $grid-float-breakpoint) {
|
|
118
115
|
direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior ** mainly fixing safari here
|
|
119
116
|
width: 100%;
|
|
120
|
-
padding-left: $nav-horizontal-spacing * 2;
|
|
121
117
|
padding-bottom: $nav-horizontal-spacing;
|
|
118
|
+
order: 3; // .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
|
|
122
119
|
border-bottom: solid 1px $color-gray-300;
|
|
123
120
|
}
|
|
124
|
-
|
|
125
|
-
@media (max-width: $screen-sm) {
|
|
126
|
-
padding-left: $nav-horizontal-spacing;
|
|
127
|
-
}
|
|
128
121
|
}
|
|
129
122
|
|
|
130
123
|
.navigation-menu-list_item-active {
|
|
@@ -145,26 +138,16 @@ a.navigation-items-link {
|
|
|
145
138
|
text-transform: uppercase;
|
|
146
139
|
text-decoration: none;
|
|
147
140
|
|
|
148
|
-
@media screen and (min-width: $
|
|
141
|
+
@media screen and (min-width: $grid-float-breakpoint) {
|
|
149
142
|
align-items: center;
|
|
150
143
|
height: 100%;
|
|
151
144
|
@include transition($navigation-link-hover-transition);
|
|
152
|
-
@include nav_hover_border(horizontal)
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
@media screen and (min-width: $screen-lg) {
|
|
156
|
-
font-size: $font-size-200;
|
|
145
|
+
@include nav_hover_border(horizontal);
|
|
157
146
|
}
|
|
158
147
|
|
|
159
148
|
@media (max-width: $grid-float-breakpoint) {
|
|
160
149
|
align-items: center;
|
|
161
150
|
height: 100%;
|
|
162
|
-
@include transition($navigation-link-hover-transition);
|
|
163
|
-
@include nav_hover_border(vertical)
|
|
164
|
-
|
|
165
|
-
&:before {
|
|
166
|
-
left: -21px;
|
|
167
|
-
}
|
|
168
151
|
}
|
|
169
152
|
|
|
170
153
|
&:hover {
|
|
@@ -199,10 +182,18 @@ a.navigation-items-link-deals {
|
|
|
199
182
|
}
|
|
200
183
|
|
|
201
184
|
.navbar-nav {
|
|
185
|
+
|
|
186
|
+
@media (max-width: $grid-float-breakpoint) {
|
|
187
|
+
margin: 0; // overriding bootstrap so non-signed in btn-blocks display as expected TODO: further refactor markup to avoid this
|
|
188
|
+
}
|
|
189
|
+
|
|
202
190
|
&.navbar-right {
|
|
203
191
|
max-height: $nav-height;
|
|
204
192
|
direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior ** mainly fixing safari here
|
|
205
193
|
|
|
194
|
+
@media (max-width: $grid-float-breakpoint) {
|
|
195
|
+
float: none !important; // overriding bootstrap so non-signed in btn-blocks display as expected TODO: further refactor markup to avoid this
|
|
196
|
+
}
|
|
206
197
|
&.navbar-right-icons-container {
|
|
207
198
|
@media (max-width: $grid-float-breakpoint) {
|
|
208
199
|
float: right !important;
|
|
@@ -215,41 +206,6 @@ a.navigation-items-link-deals {
|
|
|
215
206
|
}
|
|
216
207
|
}
|
|
217
208
|
|
|
218
|
-
.nav > li > a.navigation-user_info-logged_out-log_in_link {
|
|
219
|
-
text-transform: uppercase;
|
|
220
|
-
color: $color-gray-600;
|
|
221
|
-
text-decoration: none;
|
|
222
|
-
@include transition(color 0.15s ease-in-out);
|
|
223
|
-
|
|
224
|
-
&:hover {
|
|
225
|
-
color: $color-secondary;
|
|
226
|
-
text-decoration: none;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
|
|
230
|
-
padding-left: 5px;
|
|
231
|
-
padding-right: 8px; // visual alignment
|
|
232
|
-
font-size: $font-size-100;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
@media screen and (min-width: $screen-md) {
|
|
236
|
-
margin-left: $nav-horizontal-spacing-small;
|
|
237
|
-
letter-spacing: $letter-spacing-large;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
@media screen and (min-width: $screen-lg) {
|
|
241
|
-
font-size: $font-size-200;
|
|
242
|
-
letter-spacing: 0;
|
|
243
|
-
margin-left: 0;
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
.nav-sign_in-sign_up {
|
|
248
|
-
@media (max-width: $screen-xs) {
|
|
249
|
-
float: left !important;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
|
|
253
209
|
.navigation-menu-list_item {
|
|
254
210
|
@media (max-width: $grid-float-breakpoint) {
|
|
255
211
|
text-align: left;
|
|
@@ -257,7 +213,6 @@ a.navigation-items-link-deals {
|
|
|
257
213
|
|
|
258
214
|
@media (max-width: $screen-sm) {
|
|
259
215
|
min-width: 300px;
|
|
260
|
-
margin-left: $nav-horizontal-spacing;
|
|
261
216
|
}
|
|
262
217
|
}
|
|
263
218
|
|
|
@@ -270,31 +225,6 @@ a.navigation-items-link-deals {
|
|
|
270
225
|
}
|
|
271
226
|
}
|
|
272
227
|
|
|
273
|
-
.navbar-nav > li.navigation-user_info-logged_out.navigation-log_in {
|
|
274
|
-
padding-top: 0;
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
.navigation-user_info-logged_out-container {
|
|
278
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
279
|
-
display: block;
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
li.navbar-user_info-logged_out {
|
|
284
|
-
float: right;
|
|
285
|
-
|
|
286
|
-
@media (max-width: $grid-float-breakpoint) {
|
|
287
|
-
display: none;
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
.btn.btn-sm.navbar-sign_up_btn {
|
|
292
|
-
margin-top: 7px; // vertical align custom sized button
|
|
293
|
-
margin-right: $padding-default-vertical;
|
|
294
|
-
font-size: $font-size-200;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
|
|
298
228
|
// All-purpose bootstrap override for background-color of links that are not styled as buttons
|
|
299
229
|
.nav > li > a:not(.btn) {
|
|
300
230
|
&:hover,
|
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.3.
|
|
4
|
+
version: 3.3.3
|
|
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-02-
|
|
11
|
+
date: 2018-02-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|