forever_style_guide 4.1.14 → 4.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/forever_style_guide/base/_grid.scss +1 -1
- 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 +3 -3
- 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
|
@@ -108,7 +108,7 @@ $f-grid-col-count: 24;
|
|
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
114
|
> [class*="f-col"] { padding: #{$grid-gutter / 2}px; }
|
@@ -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
|
}
|
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: []
|