forever_style_guide 3.1.2 → 3.1.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/_effects.scss +2 -3
- data/app/assets/stylesheets/forever_style_guide/globals/_variables.scss +7 -2
- data/app/assets/stylesheets/forever_style_guide/modules/_button.scss +41 -12
- data/app/assets/stylesheets/forever_style_guide/modules/_footer.scss +8 -2
- data/app/views/forever_style_guide/sections/components/footer/_footer.erb +9 -4
- data/lib/forever_style_guide/version.rb +1 -1
- metadata +3 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7f7af69d9c14f6ac1f0ad6679979fa008ec9a189
|
|
4
|
+
data.tar.gz: 088b0293fe7b372fe79116026e48778c4cb21b66
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: dc8ffc0d494b72b48c6f1af572e365709bffdb95cc217d278c8d1e5bd4814733933f5afe08a2c1fe4d30388903fc36efe8722a47821316d967ffc3bb6dcc459f
|
|
7
|
+
data.tar.gz: b35a4ac22240390fa4f4cb2d304e14eb465ce1a974e62cc29f04efc71011009cacad540dbfa6983e99fd7d1f8be5913939b46554a6bfc19b10e35422e459e9b7
|
|
@@ -94,9 +94,9 @@ $color-card-bg: color('white');
|
|
|
94
94
|
vertical-align: middle;
|
|
95
95
|
text-align: center;
|
|
96
96
|
font-size: $font-size-300;
|
|
97
|
-
border:
|
|
97
|
+
border: 2px solid color('gray-100');
|
|
98
98
|
|
|
99
|
-
@include transition(background-color 0.3s ease);
|
|
99
|
+
@include transition(background-color 0.3s ease, border 0.3s ease);
|
|
100
100
|
|
|
101
101
|
&:active:focus {
|
|
102
102
|
@extend %inset-shadow;
|
|
@@ -108,7 +108,6 @@ $color-card-bg: color('white');
|
|
|
108
108
|
&:focus,
|
|
109
109
|
&:active {
|
|
110
110
|
outline: none;
|
|
111
|
-
border: 0;
|
|
112
111
|
}
|
|
113
112
|
}
|
|
114
113
|
|
|
@@ -23,8 +23,8 @@ $padding-xs-horizontal: 6px !global;
|
|
|
23
23
|
---------------------------------------------------------------------------- */
|
|
24
24
|
$header-height: 40px;
|
|
25
25
|
|
|
26
|
-
$footer-height:
|
|
27
|
-
$footer-height-sm:
|
|
26
|
+
$footer-height: 486px;
|
|
27
|
+
$footer-height-sm: 365px;
|
|
28
28
|
$footer-height-md: 240px;
|
|
29
29
|
|
|
30
30
|
$btn-lg-size: 64px;
|
|
@@ -37,6 +37,11 @@ $btn-padding-large-horizontal: $padding-large-horizontal * 1.5;
|
|
|
37
37
|
$btn-padding-small-horizontal: $padding-small-horizontal * 1.5;
|
|
38
38
|
$btn-padding-xs-horizontal: $padding-xs-horizontal * 1.5;
|
|
39
39
|
|
|
40
|
+
$btn-padding-default-vertical : $padding-default-vertical - 2;
|
|
41
|
+
$btn-padding-large-vertical : $padding-large-horizontal - 2;
|
|
42
|
+
$btn-padding-small-vertical : $padding-small-vertical - 2;
|
|
43
|
+
$btn-padding-xs-vertical : $padding-xs-vertical - 2;
|
|
44
|
+
|
|
40
45
|
$icon-lg-size: $font-size-600;
|
|
41
46
|
$icon-size: $font-size-400;
|
|
42
47
|
$icon-sm-size: $font-size-300;
|
|
@@ -14,11 +14,13 @@
|
|
|
14
14
|
} @else {
|
|
15
15
|
color: color('white');
|
|
16
16
|
background-color: color('#{$color}');
|
|
17
|
-
border:
|
|
17
|
+
border: 2px solid color('#{$color}');
|
|
18
|
+
@extend %no-shadow;
|
|
18
19
|
&:hover,
|
|
19
20
|
&:active,
|
|
20
21
|
&:active:focus {
|
|
21
22
|
background-color: color('#{$color}-dark');
|
|
23
|
+
border-color: color('#{$color}-dark');
|
|
22
24
|
text-decoration: none;
|
|
23
25
|
}
|
|
24
26
|
}
|
|
@@ -26,6 +28,7 @@
|
|
|
26
28
|
|
|
27
29
|
.btn {
|
|
28
30
|
@extend %btn-style;
|
|
31
|
+
padding: $btn-padding-default-vertical $btn-padding-default-horizontal;
|
|
29
32
|
|
|
30
33
|
&:hover,
|
|
31
34
|
&:active {
|
|
@@ -37,13 +40,16 @@
|
|
|
37
40
|
|
|
38
41
|
&.btn-default {
|
|
39
42
|
color: $color-gray-600;
|
|
43
|
+
border: 2px solid color('white');
|
|
40
44
|
&:hover,
|
|
41
45
|
&:active,
|
|
42
46
|
&:focus {
|
|
43
47
|
background-color: color('white');
|
|
48
|
+
border: 2px solid color('white');
|
|
44
49
|
}
|
|
45
50
|
&.disabled {
|
|
46
51
|
background-color: color('silver');
|
|
52
|
+
border: 2px solid color('silver');
|
|
47
53
|
}
|
|
48
54
|
&.btn-inverse {
|
|
49
55
|
@include btn-color('gray');
|
|
@@ -68,16 +74,16 @@
|
|
|
68
74
|
&.btn-link {
|
|
69
75
|
@include btn-color('secondary', true);
|
|
70
76
|
background: none;
|
|
71
|
-
border:
|
|
77
|
+
border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
|
|
72
78
|
box-shadow: none;
|
|
73
79
|
&:hover,
|
|
74
80
|
&:active,
|
|
75
81
|
&:focus {
|
|
76
|
-
border:
|
|
82
|
+
border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
|
|
77
83
|
background: none;
|
|
78
84
|
text-decoration: underline;
|
|
79
85
|
&:focus {
|
|
80
|
-
border:
|
|
86
|
+
border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
|
|
81
87
|
background: none;
|
|
82
88
|
box-shadow: none;
|
|
83
89
|
}
|
|
@@ -98,13 +104,13 @@
|
|
|
98
104
|
&.btn-plain {
|
|
99
105
|
color: color('gray-500');
|
|
100
106
|
background: none;
|
|
101
|
-
border:
|
|
107
|
+
border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
|
|
102
108
|
box-shadow: none;
|
|
103
109
|
&:hover,
|
|
104
110
|
&:active,
|
|
105
111
|
&:focus {
|
|
106
112
|
background: none;
|
|
107
|
-
border:
|
|
113
|
+
border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
|
|
108
114
|
&:focus {
|
|
109
115
|
background: none;
|
|
110
116
|
box-shadow: none;
|
|
@@ -125,7 +131,7 @@
|
|
|
125
131
|
font-family: $font-face-regular;
|
|
126
132
|
height: $btn-lg-size;
|
|
127
133
|
font-size: $font-size-400;
|
|
128
|
-
padding: $padding-large-
|
|
134
|
+
padding: $btn-padding-large-vertical $btn-padding-large-horizontal;
|
|
129
135
|
border-radius: $border-radius-large;
|
|
130
136
|
line-height: 1.8;
|
|
131
137
|
|
|
@@ -140,18 +146,18 @@
|
|
|
140
146
|
&.btn-sm {
|
|
141
147
|
font-size: $font-size-small;
|
|
142
148
|
height: $btn-sm-size;
|
|
143
|
-
padding: $padding-small-vertical $btn-padding-small-horizontal;
|
|
149
|
+
padding: $btn-padding-small-vertical $btn-padding-small-horizontal;
|
|
144
150
|
line-height: 1.6;
|
|
145
151
|
border-radius: $border-radius-small;
|
|
146
152
|
|
|
147
153
|
.fa {
|
|
148
154
|
font-size: $icon-sm-size;
|
|
149
|
-
padding-top:
|
|
155
|
+
padding-top: 2px;
|
|
150
156
|
}
|
|
151
157
|
}
|
|
152
158
|
&.btn-xs {
|
|
153
159
|
height: $btn-xs-size;
|
|
154
|
-
padding: $padding-xs-vertical $btn-padding-xs-horizontal;
|
|
160
|
+
padding: $btn-padding-xs-vertical $btn-padding-xs-horizontal;
|
|
155
161
|
font-size: $font-size-small;
|
|
156
162
|
line-height: 1.8;
|
|
157
163
|
|
|
@@ -224,7 +230,7 @@
|
|
|
224
230
|
}
|
|
225
231
|
}
|
|
226
232
|
&.btn-sm {
|
|
227
|
-
padding-top:
|
|
233
|
+
padding-top: $btn-padding-small-vertical;
|
|
228
234
|
.btn-action-label {
|
|
229
235
|
padding-top: 4px;
|
|
230
236
|
}
|
|
@@ -234,7 +240,7 @@
|
|
|
234
240
|
}
|
|
235
241
|
}
|
|
236
242
|
&.btn-xs {
|
|
237
|
-
padding-top:
|
|
243
|
+
padding-top: $btn-padding-xs-vertical;
|
|
238
244
|
.btn-action-label {
|
|
239
245
|
padding-right: 3px;
|
|
240
246
|
}
|
|
@@ -252,6 +258,29 @@
|
|
|
252
258
|
}
|
|
253
259
|
}
|
|
254
260
|
|
|
261
|
+
@mixin btn-block() {
|
|
262
|
+
display: block;
|
|
263
|
+
width: 100%;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.btn-block-xs {
|
|
267
|
+
@media (max-width: $screen-xs-max) {
|
|
268
|
+
@include btn-block();
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.btn-block-sm {
|
|
273
|
+
@media (max-width: $screen-sm-max) {
|
|
274
|
+
@include btn-block();
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.btn-block-md {
|
|
279
|
+
@media (max-width: $screen-md-max) {
|
|
280
|
+
@include btn-block();
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
255
284
|
.btn-group {
|
|
256
285
|
.btn-icon .fa {
|
|
257
286
|
vertical-align: middle;
|
|
@@ -34,14 +34,20 @@
|
|
|
34
34
|
margin-bottom: 5px;
|
|
35
35
|
border-top: 1px solid $color-gray-500;
|
|
36
36
|
}
|
|
37
|
-
.footer-copyright {
|
|
37
|
+
.footer-copyright {
|
|
38
|
+
margin-bottom: 0;
|
|
38
39
|
@media (max-width: $screen-sm) {
|
|
39
|
-
margin-bottom: 0;
|
|
40
40
|
margin-top: 5px;
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
.footer-policy_links {
|
|
44
|
+
margin-bottom: 0;
|
|
44
45
|
@media (min-width: $screen-md) {
|
|
45
46
|
text-align: right;
|
|
46
47
|
}
|
|
47
48
|
}
|
|
49
|
+
.footer-location {
|
|
50
|
+
@media (min-width: $screen-md) {
|
|
51
|
+
vertical-align: text-top;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -55,16 +55,21 @@
|
|
|
55
55
|
</div>
|
|
56
56
|
|
|
57
57
|
<div class="row l-section-close">
|
|
58
|
-
<div class="col-xs-12 col-sm-6">
|
|
59
|
-
<p class="footer-link footer-link-dark footer-copyright">©
|
|
58
|
+
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
59
|
+
<p class="footer-link footer-link-dark footer-copyright">© <%= Time.now.year %> Forever, Inc</p>
|
|
60
60
|
</div>
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
|
|
62
|
+
<div class="col-xs-12 col-sm-6 col-md-4 col-md-push-4">
|
|
63
|
+
<p class="small color-gray-400 footer-policy_links">
|
|
63
64
|
<%= link_to "Careers", careers_url, title: "Join the Forever Team", class: "footer-link footer-link-dark", target: '_blank' %> |
|
|
64
65
|
<%= link_to "Privacy Policy", privacy_url, class: "footer-link footer-link-dark", title: "Forever Privacy Policy" %> |
|
|
65
66
|
<%= link_to "Terms of Service", tos_url, class: "footer-link footer-link-dark", title: "Forever Terms of Service" %>
|
|
66
67
|
</p>
|
|
67
68
|
</div>
|
|
69
|
+
|
|
70
|
+
<div class="col-xs-12 col-md-4 col-md-pull-4">
|
|
71
|
+
<small class="color-gray-500 footer-location">1 PPG Place 20th Floor • Pittsburgh, PA 15222 USA</small>
|
|
72
|
+
</div>
|
|
68
73
|
</div>
|
|
69
74
|
</div>
|
|
70
75
|
</footer>
|
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.1.
|
|
4
|
+
version: 3.1.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: 2017-
|
|
11
|
+
date: 2017-03-22 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -315,9 +315,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
315
315
|
version: '0'
|
|
316
316
|
requirements: []
|
|
317
317
|
rubyforge_project:
|
|
318
|
-
rubygems_version: 2.
|
|
318
|
+
rubygems_version: 2.2.2
|
|
319
319
|
signing_key:
|
|
320
320
|
specification_version: 4
|
|
321
321
|
summary: A live style guide and component API for the Forever brand
|
|
322
322
|
test_files: []
|
|
323
|
-
has_rdoc:
|