forever_style_guide 4.1.12 → 4.2.0
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/base/_grid.scss +4 -4
- data/app/assets/stylesheets/forever_style_guide/globals/_variables.scss +1 -2
- data/app/assets/stylesheets/forever_style_guide/modules/_ambassador_banner.scss +29 -73
- data/app/assets/stylesheets/forever_style_guide/modules/_impersonation_banner.scss +1 -1
- data/app/assets/stylesheets/forever_style_guide/modules/_primary_nav.scss +20 -14
- data/lib/forever_style_guide/version.rb +1 -1
- metadata +6 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2cfc74588725fa50ab33a8c69889e2233eab0a9f8c234603dba8b84a3dc7f353
|
|
4
|
+
data.tar.gz: b553670f0d6186dc5bb2b238257f287e361f4867601b6ccf57c3337a3e2ac8bb
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f674109ca7efaa0a6886739f14ffcf60bc08d920e81a6af3e08faedd9d9d0a9c63c77c82f6dd01ab5b8274252f02b2b15df75db74a8f8fa7e7a6bf648822d56f
|
|
7
|
+
data.tar.gz: 8005dd03c4bbb868dbbcdb83d68d3a51155f95ed38f894f69647c793129ecf5d5008d8145cefb9da07bc2c72630a8604c58f76402458b3ed7a07af37204afcac
|
|
@@ -97,21 +97,21 @@ $f-grid-col-count: 24;
|
|
|
97
97
|
/* padding modifiers */
|
|
98
98
|
.f-grid.f-grid-no_padding {
|
|
99
99
|
margin: 0;
|
|
100
|
-
[class*="f-col"] { padding: 0; }
|
|
100
|
+
> [class*="f-col"] { padding: 0; }
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.f-grid.f-grid-bs_padding {
|
|
104
104
|
margin-left: -$f-grid-bootstrap-padding;
|
|
105
105
|
margin-right: -$f-grid-bootstrap-padding;
|
|
106
|
-
[class*="f-col"] { padding: 0 $f-grid-bootstrap-padding; }
|
|
106
|
+
> [class*="f-col"] { padding: 0 $f-grid-bootstrap-padding; }
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
|
|
110
110
|
$grid-gutter: 2;
|
|
111
|
-
@while $grid-gutter <
|
|
111
|
+
@while $grid-gutter < 31 {
|
|
112
112
|
.f-grid.f-grid-gutter-#{$grid-gutter} {
|
|
113
113
|
margin: -#{$grid-gutter / 2}px;
|
|
114
|
-
[class*="f-col"] { padding: #{$grid-gutter / 2}px; }
|
|
114
|
+
> [class*="f-col"] { padding: #{$grid-gutter / 2}px; }
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
$grid-gutter: $grid-gutter + 2;
|
|
@@ -73,6 +73,5 @@ $in-front-of-primary-nav: $zindex-navbar-fixed + 2;
|
|
|
73
73
|
$in-front-of-primary-and-banner: $zindex-navbar-fixed + 3;
|
|
74
74
|
$in-front-of-primary-and-banner-and-impersonation: $zindex-navbar-fixed + 4;
|
|
75
75
|
|
|
76
|
-
$ambassador-banner-height
|
|
77
|
-
$ambassador-banner-height-unassigned: 50px;
|
|
76
|
+
$ambassador-banner-height: 30px;
|
|
78
77
|
$impersonation-banner-height: 20px;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
$banner-vertical-padding
|
|
2
|
-
$banner-vertical-padding-unassigned: 10px;
|
|
1
|
+
$banner-vertical-padding: 4px;
|
|
3
2
|
$banner-max-width: 70%;
|
|
4
3
|
|
|
5
4
|
$banner-background-visible: 0.1;
|
|
@@ -9,117 +8,74 @@ $banner-hover-effect-speed: 0.15s;
|
|
|
9
8
|
$chevron-rotate-effect-speed: 0.25s;
|
|
10
9
|
$dropdown-entrance-and-exit-effect-speed: 0.22s;
|
|
11
10
|
|
|
12
|
-
@mixin ambassador_banner(
|
|
11
|
+
@mixin ambassador_banner() {
|
|
13
12
|
position: relative;
|
|
14
|
-
height: $height;
|
|
13
|
+
height: $ambassador-banner-height;
|
|
14
|
+
padding: $banner-vertical-padding 10px;
|
|
15
15
|
color: $banner-color;
|
|
16
|
-
background-color: $
|
|
16
|
+
background-color: $color-forever_gray;
|
|
17
17
|
z-index: $in-front-of-primary-nav;
|
|
18
|
-
pointer-events: none;
|
|
19
18
|
text-align: center;
|
|
20
|
-
font-family: $font-face-
|
|
19
|
+
font-family: $font-face-regular;
|
|
21
20
|
|
|
22
21
|
&.is-behind_fixed-nav {
|
|
23
22
|
z-index: -1;
|
|
24
|
-
height: $ambassador-banner-height
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&::after {
|
|
28
|
-
position: absolute;
|
|
29
|
-
height: $height;
|
|
30
|
-
top: 0;
|
|
31
|
-
left: 0;
|
|
32
|
-
width: 100%;
|
|
33
|
-
background-color: $color-black;
|
|
34
|
-
opacity: 0;
|
|
35
|
-
@include transition(opacity $banner-hover-effect-speed ease-in-out);
|
|
36
|
-
z-index: $zindex-navbar - 1;
|
|
37
|
-
content: "";
|
|
38
|
-
pointer-events: none;
|
|
23
|
+
height: $ambassador-banner-height;
|
|
39
24
|
}
|
|
40
25
|
|
|
41
|
-
|
|
42
|
-
&::after {
|
|
43
|
-
opacity: $banner-background-visible;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
a.ambassador_banner {
|
|
49
|
-
display: block;
|
|
50
|
-
pointer-events: auto;
|
|
51
|
-
|
|
52
|
-
&:hover,
|
|
53
|
-
&:focus,
|
|
54
|
-
&:active,
|
|
55
|
-
&:active:focus {
|
|
56
|
-
text-decoration: none;
|
|
57
|
-
pointer-events: auto;
|
|
58
|
-
}
|
|
26
|
+
@media screen and (max-width: $screen-xs) { text-align: left; }
|
|
59
27
|
}
|
|
60
28
|
|
|
61
29
|
.ambassador_banner-assigned {
|
|
62
|
-
@include ambassador_banner(
|
|
63
|
-
padding-top: $banner-vertical-padding-assigned;
|
|
64
|
-
padding-bottom: $banner-vertical-padding-assigned;
|
|
65
|
-
height: $ambassador-banner-height-assigned;
|
|
66
|
-
|
|
67
|
-
&::after { height: $ambassador-banner-height-assigned; }
|
|
30
|
+
@include ambassador_banner();
|
|
68
31
|
|
|
69
32
|
&.open {
|
|
70
33
|
.fa-chevron-down {
|
|
71
|
-
|
|
34
|
+
transform: rotate(180deg);
|
|
72
35
|
}
|
|
73
36
|
}
|
|
74
37
|
|
|
75
38
|
.fa-chevron-down {
|
|
76
|
-
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
@include transition(transform $chevron-rotate-effect-speed linear);
|
|
77
41
|
}
|
|
78
|
-
|
|
79
|
-
@media screen and (max-width: $screen-xs) { text-align: left; }
|
|
80
42
|
}
|
|
81
43
|
|
|
82
44
|
.ambassador_banner-unassigned {
|
|
83
|
-
@include ambassador_banner(
|
|
84
|
-
padding-top: $banner-vertical-padding-unassigned;
|
|
85
|
-
padding-bottom: $banner-vertical-padding-unassigned;
|
|
45
|
+
@include ambassador_banner();
|
|
86
46
|
|
|
87
47
|
&.is-behind_fixed-nav {
|
|
88
48
|
.ambassador_banner-btn { display: none; }
|
|
89
49
|
}
|
|
90
50
|
}
|
|
91
51
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
52
|
+
a.ambassador_banner-btn {
|
|
53
|
+
&,
|
|
54
|
+
&:link,
|
|
55
|
+
&:visited,
|
|
56
|
+
&:hover,
|
|
57
|
+
&:active {
|
|
58
|
+
padding-top: 4px !important;//because this is easier than a day of fighting with legacy crap
|
|
96
59
|
height: 30px;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
60
|
+
font-size: $font-size-200;
|
|
61
|
+
color: $color-white;
|
|
62
|
+
font-family: $font-face-semibold;
|
|
63
|
+
text-decoration: underline;
|
|
64
|
+
cursor: pointer;
|
|
102
65
|
}
|
|
103
66
|
}
|
|
104
67
|
|
|
105
|
-
.ambassador_banner-btn {
|
|
106
|
-
padding-top: 4px;
|
|
107
|
-
margin-left: 20px;
|
|
108
|
-
height: 30px;
|
|
109
|
-
font-size: $font-size-200;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
68
|
.ambassador_banner-content {
|
|
113
69
|
display: inline-block;
|
|
114
70
|
vertical-align: middle;
|
|
115
71
|
pointer-events: auto;
|
|
116
|
-
cursor: pointer;
|
|
117
72
|
}
|
|
118
73
|
|
|
119
74
|
.ambassador_banner-name {
|
|
120
75
|
max-width: $banner-max-width;
|
|
121
76
|
vertical-align: middle;
|
|
122
77
|
text-decoration: underline;
|
|
78
|
+
cursor: pointer;
|
|
123
79
|
|
|
124
80
|
@media screen and (max-width: $screen-xs) {
|
|
125
81
|
max-width: 48%;
|
|
@@ -131,12 +87,12 @@ a.ambassador_banner {
|
|
|
131
87
|
|
|
132
88
|
.ambassador_banner-dropdown_container {
|
|
133
89
|
position: absolute;
|
|
134
|
-
top: $ambassador-banner-height
|
|
90
|
+
top: $ambassador-banner-height;
|
|
135
91
|
left: 0;
|
|
136
92
|
visibility: hidden;
|
|
137
93
|
width: 100%;
|
|
138
94
|
transform: translateY(-100%);
|
|
139
|
-
@include
|
|
95
|
+
@include transition_fast(all);
|
|
140
96
|
z-index: $in-front-of-primary-nav-but-behind-banner;
|
|
141
97
|
pointer-events: none;
|
|
142
98
|
|
|
@@ -160,7 +116,7 @@ a.ambassador_banner {
|
|
|
160
116
|
.ambassador_banner-dropdown-avatar {
|
|
161
117
|
align-self: flex-start;
|
|
162
118
|
margin: 0;
|
|
163
|
-
margin-right: $padding-large-horizontal * 2;
|
|
119
|
+
margin-right: $padding-large-horizontal * 2 !important;
|
|
164
120
|
}
|
|
165
121
|
|
|
166
122
|
.ambassador_banner-dropdown-info {
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
margin-top: $impersonation-banner-height;
|
|
16
16
|
}
|
|
17
17
|
.ambassador_banner-dropdown_container.open {
|
|
18
|
-
top: $ambassador-banner-height
|
|
18
|
+
top: $ambassador-banner-height + $impersonation-banner-height;
|
|
19
19
|
}
|
|
20
20
|
.nav-mobile-menu.in {
|
|
21
21
|
@media (max-width: $grid-float-breakpoint-max) {
|
|
@@ -21,7 +21,7 @@ $f-nav-icon-hover: #bce5fd;
|
|
|
21
21
|
|
|
22
22
|
.f-primary_nav {
|
|
23
23
|
width: 100%;
|
|
24
|
-
background-color: #
|
|
24
|
+
background-color: #007198;
|
|
25
25
|
|
|
26
26
|
/*support store method of affixing*/
|
|
27
27
|
&.affix {
|
|
@@ -47,8 +47,8 @@ $f-nav-icon-hover: #bce5fd;
|
|
|
47
47
|
align-items: center;
|
|
48
48
|
|
|
49
49
|
> img {
|
|
50
|
-
height:
|
|
51
|
-
width:
|
|
50
|
+
height: 26px;
|
|
51
|
+
width: 150px;
|
|
52
52
|
max-width: unset;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -490,29 +490,35 @@ $f-nav-icon-hover: #bce5fd;
|
|
|
490
490
|
|
|
491
491
|
> a {
|
|
492
492
|
font-size: 16px;
|
|
493
|
-
margin-left:
|
|
493
|
+
margin-left: 10px;
|
|
494
|
+
display: inline-block;
|
|
494
495
|
}
|
|
495
496
|
|
|
496
497
|
> p {
|
|
497
498
|
font-size: 12px;
|
|
498
|
-
margin:
|
|
499
|
+
margin: 4px 0 0 70px;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
span.badge {
|
|
503
|
+
border-radius: 2px;
|
|
504
|
+
padding: 2px 4px;
|
|
505
|
+
color: #fff;
|
|
506
|
+
background-color: $color-forever_orange;
|
|
507
|
+
font-size: 10px;
|
|
508
|
+
vertical-align: top;
|
|
509
|
+
margin-top: 2px;
|
|
510
|
+
display: inline-block;
|
|
511
|
+
font-weight: bold;
|
|
512
|
+
line-height: 1;
|
|
499
513
|
}
|
|
500
514
|
|
|
501
515
|
> ul {
|
|
502
|
-
margin:
|
|
516
|
+
margin: 2px 0 0 70px;
|
|
503
517
|
|
|
504
518
|
> li {
|
|
505
519
|
margin: 0 0 2px;
|
|
506
520
|
font-size: 12px;
|
|
507
521
|
|
|
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
522
|
> a {
|
|
517
523
|
font-size: 12px;
|
|
518
524
|
display: inline-block;
|
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.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Nicholas McClay
|
|
8
|
-
autorequire:
|
|
8
|
+
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2022-03-23 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
|
|
@@ -126,7 +126,7 @@ homepage: https://github.com/forever-inc/forever-style-guide
|
|
|
126
126
|
licenses:
|
|
127
127
|
- MIT
|
|
128
128
|
metadata: {}
|
|
129
|
-
post_install_message:
|
|
129
|
+
post_install_message:
|
|
130
130
|
rdoc_options: []
|
|
131
131
|
require_paths:
|
|
132
132
|
- lib
|
|
@@ -141,8 +141,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
141
141
|
- !ruby/object:Gem::Version
|
|
142
142
|
version: '0'
|
|
143
143
|
requirements: []
|
|
144
|
-
rubygems_version: 3.0.
|
|
145
|
-
signing_key:
|
|
144
|
+
rubygems_version: 3.0.9
|
|
145
|
+
signing_key:
|
|
146
146
|
specification_version: 4
|
|
147
147
|
summary: A live style guide and component API for the Forever brand
|
|
148
148
|
test_files: []
|