forever_style_guide 4.1.13 → 4.2.1
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 +4 -4
- data/app/assets/stylesheets/forever_style_guide/globals/_colors.scss +1 -0
- 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: dddfdd5bbf427533a3d9f3acb82d1e116e72c8cd658f5b4c1a407f402b76b944
|
|
4
|
+
data.tar.gz: 78d16d0a1e2003488cdad986e6016de0d17a92a50d0ffd01c7d1a6d571be3c0f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3945f0c6db6d64db265653c910a173e8d4352ca3bb684395242e451add48c4cb2d7da2256d6f048f3de03e323dd59949d155409a514e276f7074a444c71c13ba
|
|
7
|
+
data.tar.gz: e30d92a5022abf50f7cbbebb2e53976668300cd330a458dfada22cf9c95831dbae5e130bc1323d9870e55fc1bda9325a044b9fb05a7e129c5a6363bc6399f76b
|
|
@@ -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;
|
|
@@ -11,6 +11,7 @@ $color-forever_valet: colorify('valet', #50bd94) !default;
|
|
|
11
11
|
$color-forever_services: colorify('services', #39b3be) !default;
|
|
12
12
|
$color-forever_artisan: colorify('artisan', #28a6de) !default;
|
|
13
13
|
$color-forever_blue: colorify('blue', #2b91cf) !default;
|
|
14
|
+
$color-forever_dark-blue: colorify('dark-blue', #007198) !default;
|
|
14
15
|
$color-forever_ambassador: colorify('ambassador', #a4314c) !default;
|
|
15
16
|
$color-forever_ambassador-unassigned: colorify('ambassador-unassigned', #2d8e97) !default;
|
|
16
17
|
$color-forever_p2p: colorify('p2p', #f89406) !default;
|
|
@@ -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.1
|
|
4
|
+
version: 4.2.1
|
|
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-30 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: []
|