forever_style_guide 3.1.0 → 3.1.1
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a55be23ea866aedbcc4664b3762443faf8282f72
|
|
4
|
+
data.tar.gz: 3f738df9bb4063c67fd3f519b689c39e879ff14e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 451ce1a078cee37eb2c4e2d8e4a6f0c169a5823470fa5ed33166fb30338347db05aeec36c629fe17136a0faca77c11c633fa618736e5045ed952327ebee3d3d8
|
|
7
|
+
data.tar.gz: 4243522664886e7328cf16506d765189e46150272bf9234e700afe2f32c52178f8ea914dad0ac629935c9a69d86856ac316c94e3095e3b99a9bffaff2c93ce90
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
$hero-no_overlap-height-xxl: 450px;
|
|
2
|
+
$hero-no_overlap-block-padding: 30px;
|
|
3
|
+
$hero-img-width: 480px;
|
|
4
|
+
$hero-img-height: 240px;
|
|
5
|
+
$hero-img-width-xs: 768px;
|
|
6
|
+
$hero-img-height-xs: 266px;
|
|
7
|
+
$hero-img-width-sm: 1400px;
|
|
8
|
+
$hero-img-height-sm: 484px;
|
|
9
|
+
|
|
10
|
+
// TODO: confirm that we can remove everything below this (except the no_overlap bit!)
|
|
11
|
+
// and pull in hero_simple styles
|
|
1
12
|
.hero {
|
|
2
13
|
height: 300px;
|
|
3
14
|
position: relative;
|
|
@@ -45,29 +56,6 @@
|
|
|
45
56
|
}
|
|
46
57
|
}
|
|
47
58
|
|
|
48
|
-
&.hero-xs {
|
|
49
|
-
height: 100px;
|
|
50
|
-
|
|
51
|
-
@media (min-width: $screen-xs) {
|
|
52
|
-
height: 150px;
|
|
53
|
-
}
|
|
54
|
-
@media (min-width: $screen-sm) {
|
|
55
|
-
height: 200px;
|
|
56
|
-
}
|
|
57
|
-
@media (min-width: $screen-md) {
|
|
58
|
-
height: 250px;
|
|
59
|
-
}
|
|
60
|
-
@media (min-width: $screen-lg) {
|
|
61
|
-
height: 300px;
|
|
62
|
-
}
|
|
63
|
-
@media (min-width: $screen-xl) {
|
|
64
|
-
height: 350px;
|
|
65
|
-
}
|
|
66
|
-
@media (min-width: $screen-xxl) {
|
|
67
|
-
height: 400px;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
59
|
&.hero-shaded {
|
|
72
60
|
@extend %hero-gradient;
|
|
73
61
|
}
|
|
@@ -76,3 +64,35 @@
|
|
|
76
64
|
@extend %text-shadow;
|
|
77
65
|
}
|
|
78
66
|
}
|
|
67
|
+
|
|
68
|
+
/* using percentage-based padding to dynamically adjust the height (img-height / img-width * container-width)
|
|
69
|
+
http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size/22211990#22211990
|
|
70
|
+
|
|
71
|
+
TODO: use picture element + picturefill to avoid css hacks
|
|
72
|
+
*/
|
|
73
|
+
.hero-no_overlap {
|
|
74
|
+
width: 100%;
|
|
75
|
+
height: 0;
|
|
76
|
+
padding-top: percentage($hero-img-height / $hero-img-width);
|
|
77
|
+
background-size: cover;
|
|
78
|
+
background-repeat: no-repeat;
|
|
79
|
+
|
|
80
|
+
@media (min-width: $screen-xs) {
|
|
81
|
+
padding-top: percentage($hero-img-height-xs / $hero-img-width-xs);
|
|
82
|
+
}
|
|
83
|
+
@media (min-width: $screen-sm) {
|
|
84
|
+
padding-top: percentage($hero-img-height-sm / $hero-img-width-sm);
|
|
85
|
+
}
|
|
86
|
+
@media (min-width: $screen-xl) {
|
|
87
|
+
height: $hero-no_overlap-height-xxl;
|
|
88
|
+
padding-top: 0;
|
|
89
|
+
background-size: auto;
|
|
90
|
+
background-position: center;
|
|
91
|
+
background-repeat: repeat-x;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.hero-no_overlap-block {
|
|
96
|
+
padding-top: $hero-no_overlap-block-padding;
|
|
97
|
+
padding-bottom: $hero-no_overlap-block-padding;
|
|
98
|
+
}
|
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.1
|
|
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-01-
|
|
11
|
+
date: 2017-01-26 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|