forever_style_guide 3.4.14 → 3.4.15
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 +4 -0
- data/app/assets/stylesheets/forever_style_guide/globals/_variables.scss +2 -1
- data/app/assets/stylesheets/forever_style_guide/modules/_ambassador_banner.scss +70 -33
- data/app/assets/stylesheets/forever_style_guide/modules/_impersonation_banner.scss +1 -1
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-fixed.scss +2 -2
- data/lib/forever_style_guide/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4fbbf75f02980128f2d1e023f9651019f0d11201c64d8a94841a8fbb19726711
|
|
4
|
+
data.tar.gz: 983921699f49aecc018d0f150f4e6cdc2080bc074c4a879bef8dbd4e2cec36b8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0ae4dd1e27f9e013c44703fd8638c4562816562691bd08617ab66e096e59f3cb6a00e7f56e82343901267474a2ca179051d8deef9a1d3d3290e89e28bae81eb8
|
|
7
|
+
data.tar.gz: 61f300d55f38f50b66b8150001d0deb6130ea92e7fd3c6a45025567489352a1fbd65cf0544a3b806467d1c4194b1cfcb879c22a794f2beae4e44cbc133483655
|
|
@@ -61,6 +61,10 @@ $color-live18-blue: colorify('live18-blue', #008ccf) !default;
|
|
|
61
61
|
$color-live18-orange: colorify('live18-orange', #f57e25) !default;
|
|
62
62
|
$color-live18-grey: colorify('live18-grey', #a4abb6) !default;
|
|
63
63
|
|
|
64
|
+
// Gradients
|
|
65
|
+
$gradient-ambassador-alt: linear-gradient(to left, mix($color-black, $color-forever_purple, 10%), mix($color-black, $color-forever_ambassador, 10%));
|
|
66
|
+
$gradient-ambassador: linear-gradient(to left, mix($color-black, $color-forever_valet, 10%), mix($color-black, $color-forever_services, 10%));
|
|
67
|
+
|
|
64
68
|
@each $id, $color in $colors {
|
|
65
69
|
.color-#{$id} {
|
|
66
70
|
color: #{$color};
|
|
@@ -73,5 +73,6 @@ $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-
|
|
76
|
+
$ambassador-banner-height-assigned: 32px;
|
|
77
|
+
$ambassador-banner-height-unassigned: 50px;
|
|
77
78
|
$impersonation-banner-height: 20px;
|
|
@@ -1,42 +1,30 @@
|
|
|
1
|
-
$banner-vertical-padding: 6px;
|
|
2
|
-
$banner-
|
|
1
|
+
$banner-vertical-padding-assigned: 6px;
|
|
2
|
+
$banner-vertical-padding-unassigned: 10px;
|
|
3
|
+
$banner-max-width: 70%;
|
|
3
4
|
|
|
4
|
-
$banner-unassigned-bg-color: #d4edf7;
|
|
5
|
-
$banner-background-gradient: linear-gradient(to left, mix($color-black, $color-forever_valet, 10%), mix($color-black, $color-forever_services, 10%));
|
|
6
5
|
$banner-background-visible: 0.1;
|
|
7
|
-
$banner-
|
|
6
|
+
$banner-color: transparentize($color-white, 0.2);
|
|
8
7
|
|
|
9
8
|
$banner-hover-effect-speed: 0.15s;
|
|
10
9
|
$chevron-rotate-effect-speed: 0.25s;
|
|
11
10
|
$dropdown-entrance-and-exit-effect-speed: 0.22s;
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
display: block;
|
|
15
|
-
&:hover,
|
|
16
|
-
&:focus,
|
|
17
|
-
&:active,
|
|
18
|
-
&:active:focus {
|
|
19
|
-
text-decoration: none;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.ambassador_banner-text {
|
|
12
|
+
@mixin ambassador_banner($banner-background-gradient, $height) {
|
|
24
13
|
position: relative;
|
|
25
|
-
height: $
|
|
26
|
-
|
|
27
|
-
padding-bottom: $banner-vertical-padding;
|
|
28
|
-
color: $banner-text-color;
|
|
14
|
+
height: $height;
|
|
15
|
+
color: $banner-color;
|
|
29
16
|
background-image: $banner-background-gradient;
|
|
30
17
|
cursor: pointer;
|
|
31
18
|
z-index: $in-front-of-primary-nav;
|
|
32
19
|
|
|
33
20
|
&.is-behind_fixed-nav {
|
|
34
21
|
z-index: $behind-primary-nav;
|
|
22
|
+
height: $ambassador-banner-height-assigned;
|
|
35
23
|
}
|
|
36
24
|
|
|
37
25
|
&::after {
|
|
38
26
|
position: absolute;
|
|
39
|
-
height: $
|
|
27
|
+
height: $height;
|
|
40
28
|
top: 0;
|
|
41
29
|
left: 0;
|
|
42
30
|
width: 100%;
|
|
@@ -53,39 +41,88 @@ a.ambassador_banner {
|
|
|
53
41
|
opacity: $banner-background-visible;
|
|
54
42
|
}
|
|
55
43
|
}
|
|
44
|
+
}
|
|
56
45
|
|
|
57
|
-
|
|
46
|
+
a.ambassador_banner {
|
|
47
|
+
display: block;
|
|
48
|
+
|
|
49
|
+
&:hover,
|
|
50
|
+
&:focus,
|
|
51
|
+
&:active,
|
|
52
|
+
&:active:focus {
|
|
53
|
+
text-decoration: none;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.ambassador_banner-assigned {
|
|
58
|
+
@include ambassador_banner($gradient-ambassador, $ambassador-banner-height-assigned);
|
|
59
|
+
padding-top: $banner-vertical-padding-assigned;
|
|
60
|
+
padding-bottom: $banner-vertical-padding-assigned;
|
|
61
|
+
height: $ambassador-banner-height-assigned;
|
|
62
|
+
|
|
63
|
+
&::after {
|
|
64
|
+
height: $ambassador-banner-height-assigned;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&.open {
|
|
58
68
|
.fa-chevron-down {
|
|
59
69
|
@include transform(rotate(180deg));
|
|
60
70
|
}
|
|
61
|
-
&::after {
|
|
62
|
-
opacity: $banner-background-visible;
|
|
63
|
-
}
|
|
64
71
|
}
|
|
65
72
|
|
|
66
73
|
.fa-chevron-down {
|
|
67
74
|
@include transition(all $chevron-rotate-effect-speed linear);
|
|
68
75
|
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ambassador_banner-unassigned {
|
|
79
|
+
@include ambassador_banner($gradient-ambassador-alt, $ambassador-banner-height-unassigned);
|
|
80
|
+
padding-top: $banner-vertical-padding-unassigned;
|
|
81
|
+
padding-bottom: $banner-vertical-padding-unassigned;
|
|
82
|
+
|
|
83
|
+
&.is-behind_fixed-nav {
|
|
84
|
+
.ambassador_banner-btn {
|
|
85
|
+
display: none;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
69
89
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
90
|
+
// make the lead-in text just look like a btn on small devices
|
|
91
|
+
.ambassador_banner-unassigned-text {
|
|
92
|
+
@media (max-width: $screen-xs-max) {
|
|
93
|
+
display: inline-block;
|
|
94
|
+
height: 30px;
|
|
95
|
+
padding: 4px 12px 8px;
|
|
96
|
+
line-height: 1.3;
|
|
97
|
+
border: 2px solid $color-white;
|
|
98
|
+
border-radius: $border-radius-button;
|
|
99
|
+
|
|
100
|
+
&:hover {
|
|
101
|
+
text-decoration: underline;
|
|
102
|
+
}
|
|
73
103
|
}
|
|
74
104
|
}
|
|
75
105
|
|
|
76
|
-
.ambassador_banner-
|
|
106
|
+
.ambassador_banner-btn {
|
|
107
|
+
padding-top: 4px;
|
|
108
|
+
margin-left: 20px;
|
|
109
|
+
height: 30px;
|
|
110
|
+
font-size: $font-size-200;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.ambassador_banner-content {
|
|
77
114
|
display: inline-block;
|
|
78
115
|
vertical-align: middle;
|
|
79
116
|
}
|
|
80
117
|
|
|
81
|
-
.ambassador_banner-
|
|
82
|
-
max-width: $banner-
|
|
118
|
+
.ambassador_banner-name {
|
|
119
|
+
max-width: $banner-max-width;
|
|
83
120
|
vertical-align: middle;
|
|
84
121
|
}
|
|
85
122
|
|
|
86
123
|
.ambassador_banner-dropdown_container {
|
|
87
124
|
position: absolute;
|
|
88
|
-
top: $ambassador-banner-
|
|
125
|
+
top: $ambassador-banner-height-assigned;
|
|
89
126
|
left: 0;
|
|
90
127
|
visibility: hidden;
|
|
91
128
|
width: 100%;
|
|
@@ -109,7 +146,7 @@ a.ambassador_banner {
|
|
|
109
146
|
flex-wrap: wrap;
|
|
110
147
|
align-items: center;
|
|
111
148
|
justify-content: center;
|
|
112
|
-
background-image: $
|
|
149
|
+
background-image: $gradient-ambassador;
|
|
113
150
|
border-top: 2px solid transparentize($color-white, 0.9);
|
|
114
151
|
}
|
|
115
152
|
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
margin-top: $impersonation-banner-height;
|
|
16
16
|
}
|
|
17
17
|
.ambassador_banner-dropdown_container.open {
|
|
18
|
-
top: $ambassador-banner-
|
|
18
|
+
top: $ambassador-banner-height-assigned + $impersonation-banner-height;
|
|
19
19
|
}
|
|
20
20
|
.nav-mobile-menu.in {
|
|
21
21
|
@media (max-width: $grid-float-breakpoint-max) {
|
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.4.
|
|
4
|
+
version: 3.4.15
|
|
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-07-
|
|
11
|
+
date: 2018-07-17 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|