ezy 0.2.0 → 0.2.6.alpha
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +101 -6
- data/VERSION +1 -1
- data/ezy.gemspec +3 -5
- data/sass/_ezy.scss +3 -3
- data/sass/ezy/_clearfix.scss +25 -0
- data/sass/ezy/_functions.scss +11 -0
- data/sass/ezy/_grid.scss +250 -0
- data/sass/ezy/_media.scss +47 -0
- data/sass/ezy/_settings.scss +18 -0
- data/sass/ezy/_sprites.scss +29 -82
- data/sass/ezy/grid/_debug.scss +22 -0
- data/sass/ezy/grid/_helpers.scss +249 -0
- data/sass/ezy/grid/_layout.scss +78 -0
- data/test/css/grid/elastic.css +13 -4
- data/test/css/grid/fluid.css +26 -10
- data/test/css/grid/gutter.css +42 -35
- data/test/css/grid/layout.css +118 -0
- data/test/css/grid/offset.css +51 -0
- data/test/css/grid/responsive.css +22 -12
- data/test/css/grid/static.css +19 -3
- data/test/css/sprites/layout.css +2 -2
- data/test/css/sprites/position.css +4 -4
- data/test/css/sprites/repeat.css +2 -2
- data/test/css/sprites/resolution.css +2 -2
- data/test/css/sprites/retina.css +2 -2
- data/test/css/sprites/simple.css +1 -1
- data/test/css/sprites/spacing.css +2 -2
- data/test/html/grid/layout-1.html +74 -0
- data/test/html/sprites/repeat.html +1 -1
- data/test/html/sprites/retina.html +1 -1
- data/test/html/sprites/simple.html +1 -1
- data/test/scss/grid/elastic.scss +1 -2
- data/test/scss/grid/gutter.scss +5 -5
- data/test/scss/grid/layout.scss +49 -0
- data/test/scss/grid/offset.scss +29 -0
- data/test/scss/grid/responsive.scss +2 -2
- metadata +17 -7
- data/test/css/sprites/responsive.css +0 -69
- data/test/html/sprites/responsive.html +0 -19
- data/test/scss/sprites/responsive.scss +0 -52
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
|
|
6
|
+
<title>Sprite: repeat</title>
|
|
7
|
+
|
|
8
|
+
<meta name="description" content="Ezy Grid Demo">
|
|
9
|
+
<meta name="viewport" content="width=device-width">
|
|
10
|
+
|
|
11
|
+
<link href="../../css/grid/layout-1.css" rel="stylesheet">
|
|
12
|
+
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<div class="page">
|
|
16
|
+
<div class="grid">
|
|
17
|
+
<div class="column pullout">
|
|
18
|
+
Test
|
|
19
|
+
</div>
|
|
20
|
+
<div class="column">
|
|
21
|
+
Test
|
|
22
|
+
</div>
|
|
23
|
+
<div class="column">
|
|
24
|
+
Test
|
|
25
|
+
</div>
|
|
26
|
+
<div class="column offset">
|
|
27
|
+
Test
|
|
28
|
+
</div>
|
|
29
|
+
<div class="column pullout">
|
|
30
|
+
Test
|
|
31
|
+
</div>
|
|
32
|
+
<div class="column">
|
|
33
|
+
Test
|
|
34
|
+
</div>
|
|
35
|
+
<div class="column">
|
|
36
|
+
Test
|
|
37
|
+
</div>
|
|
38
|
+
<div class="column">
|
|
39
|
+
Test
|
|
40
|
+
</div>
|
|
41
|
+
<div class="column">
|
|
42
|
+
Test
|
|
43
|
+
</div>
|
|
44
|
+
<div class="column">
|
|
45
|
+
Test
|
|
46
|
+
</div>
|
|
47
|
+
<div class="column">
|
|
48
|
+
Test
|
|
49
|
+
</div>
|
|
50
|
+
<div class="column">
|
|
51
|
+
Test
|
|
52
|
+
</div>
|
|
53
|
+
<div class="column">
|
|
54
|
+
Test
|
|
55
|
+
</div>
|
|
56
|
+
<div class="column">
|
|
57
|
+
Test
|
|
58
|
+
</div>
|
|
59
|
+
<div class="column">
|
|
60
|
+
Test
|
|
61
|
+
</div>
|
|
62
|
+
<div class="column">
|
|
63
|
+
Test
|
|
64
|
+
</div>
|
|
65
|
+
<div class="column">
|
|
66
|
+
Test
|
|
67
|
+
</div>
|
|
68
|
+
<div class="column">
|
|
69
|
+
Test
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</body>
|
|
74
|
+
</html>
|
data/test/scss/grid/elastic.scss
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
// Imports
|
|
3
3
|
|
|
4
4
|
@import "../../../sass/ezy/grid";
|
|
5
|
-
@import "../../../sass/ezy/media";
|
|
6
5
|
|
|
7
6
|
$column-width: 4em;
|
|
8
7
|
$gutter-width: 2em;
|
|
@@ -35,4 +34,4 @@ $breakpoint-large: set-breakpoint( $min: 30em, $legacy-support: true ); // Supp
|
|
|
35
34
|
|
|
36
35
|
.column {
|
|
37
36
|
@include span-columns( 4, $context: $total-columns );
|
|
38
|
-
}
|
|
37
|
+
}
|
data/test/scss/grid/gutter.scss
CHANGED
|
@@ -40,7 +40,7 @@ $is-fluid: false;
|
|
|
40
40
|
* Setting default gutter property to padding
|
|
41
41
|
*/
|
|
42
42
|
|
|
43
|
-
$
|
|
43
|
+
$gutter-property: "padding";
|
|
44
44
|
|
|
45
45
|
.gutter-default-a-3 {
|
|
46
46
|
@include span-columns( 1 );
|
|
@@ -66,7 +66,7 @@ $default-gutter-property: "padding";
|
|
|
66
66
|
* Trying again, using grid-init()
|
|
67
67
|
* -------------------------------------------------------------------- */
|
|
68
68
|
|
|
69
|
-
$
|
|
69
|
+
$gutter-property: "margin";
|
|
70
70
|
@include grid-init();
|
|
71
71
|
|
|
72
72
|
/* -------------------------------------------------------------------- *
|
|
@@ -97,7 +97,7 @@ $default-gutter-property: "margin";
|
|
|
97
97
|
* Setting default gutter property to padding after grid-init()
|
|
98
98
|
*/
|
|
99
99
|
|
|
100
|
-
$
|
|
100
|
+
$gutter-property: "padding";
|
|
101
101
|
|
|
102
102
|
.gutter-default-a-7 {
|
|
103
103
|
@include span-columns( 1 );
|
|
@@ -123,7 +123,7 @@ $default-gutter-property: "padding";
|
|
|
123
123
|
* Again, now with a fluid grid
|
|
124
124
|
* -------------------------------------------------------------------- */
|
|
125
125
|
|
|
126
|
-
$
|
|
126
|
+
$gutter-property: "margin";
|
|
127
127
|
$is-fluid: true;
|
|
128
128
|
$total-columns: 6; // resetting column count to create new set of placeholder selectors
|
|
129
129
|
@include grid-init();
|
|
@@ -156,7 +156,7 @@ $total-columns: 6; // resetting column count to create new set of placeholder se
|
|
|
156
156
|
* Setting default gutter property to padding after grid-init()
|
|
157
157
|
*/
|
|
158
158
|
|
|
159
|
-
$
|
|
159
|
+
$gutter-property: "padding";
|
|
160
160
|
|
|
161
161
|
.gutter-default-a-11 {
|
|
162
162
|
@include span-columns( 3, $total-columns );
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
// Imports
|
|
3
|
+
|
|
4
|
+
@import "../../../sass/ezy/grid";
|
|
5
|
+
|
|
6
|
+
$columns-small: 4;
|
|
7
|
+
$columns-medium: 8;
|
|
8
|
+
$columns-large: 12;
|
|
9
|
+
|
|
10
|
+
$grid-padding-small: 1em;
|
|
11
|
+
$grid-padding-medium: 50px 100px;
|
|
12
|
+
$grid-padding-large: 100px;
|
|
13
|
+
|
|
14
|
+
$column-width: 60px;
|
|
15
|
+
$gutter-width: 30px;
|
|
16
|
+
$grid-padding: $grid-padding-small;
|
|
17
|
+
$total-columns: $columns-small;
|
|
18
|
+
@include grid-init();
|
|
19
|
+
|
|
20
|
+
// Defining media query breakpoints
|
|
21
|
+
$breakpoint-medium: set-breakpoint( $min: grid-width( $columns-medium, $grid-padding-medium ) );
|
|
22
|
+
$breakpoint-large: set-breakpoint( $min: grid-width( $columns-large, $grid-padding-large ), $legacy-support: true ); // Support for legacy browsers
|
|
23
|
+
|
|
24
|
+
// Defining layouts
|
|
25
|
+
$layout-small: set-layout( $total-columns, $grid-padding );
|
|
26
|
+
$layout-medium: set-layout( $columns-medium, $grid-padding-medium, $breakpoint-medium );
|
|
27
|
+
$layout-large: set-layout( $columns-large, $grid-padding-large, $breakpoint-large );
|
|
28
|
+
|
|
29
|
+
.page {
|
|
30
|
+
@include each-layout {
|
|
31
|
+
@include master;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.grid {
|
|
36
|
+
@include each-layout {
|
|
37
|
+
@include container;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.column {
|
|
42
|
+
@include span-columns( 4 );
|
|
43
|
+
@include at-layout( $layout-medium ) {
|
|
44
|
+
@include span-columns( 4 );
|
|
45
|
+
}
|
|
46
|
+
@include at-layout( $layout-large ) {
|
|
47
|
+
@include span-columns( 4 );
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
// Imports
|
|
3
|
+
|
|
4
|
+
@import "../../../sass/ezy/grid";
|
|
5
|
+
|
|
6
|
+
$column-width: 60px;
|
|
7
|
+
$gutter-width: 30px;
|
|
8
|
+
$total-columns: 12;
|
|
9
|
+
$is-fluid: false;
|
|
10
|
+
|
|
11
|
+
/* -------------------------------------------------------------------- *
|
|
12
|
+
* Grid columns with offset
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
.span-columns-2 {
|
|
16
|
+
@include span-columns( 2, $context: $total-columns );
|
|
17
|
+
@include offset( 'left', 1 );
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.span-columns-4 {
|
|
21
|
+
@include span-columns( 4, $context: $total-columns );
|
|
22
|
+
@include offset( 'right', 2 );
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.span-columns-6 {
|
|
26
|
+
@include span-columns( 6, $context: $total-columns );
|
|
27
|
+
@include offset( 'both', 3 );
|
|
28
|
+
@include remove-offset( 'left' );
|
|
29
|
+
}
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
// Imports
|
|
3
3
|
|
|
4
4
|
@import "../../../sass/ezy/grid";
|
|
5
|
-
@import "../../../sass/ezy/media";
|
|
6
5
|
|
|
7
6
|
$column-width: 60px;
|
|
8
7
|
$gutter-width: 30px;
|
|
9
8
|
$total-columns: 12;
|
|
9
|
+
@include grid-init();
|
|
10
10
|
|
|
11
11
|
// Widths for use in media queries
|
|
12
12
|
$width-small: context-width( 4 );
|
|
@@ -40,4 +40,4 @@ $breakpoint-large: set-breakpoint( $min: $width-medium+1, $legacy-support: true
|
|
|
40
40
|
@include at-breakpoint( $breakpoint-large ) {
|
|
41
41
|
@include span-columns( 4, $context: $total-columns, $at-breakpoint: true);
|
|
42
42
|
}
|
|
43
|
-
}
|
|
43
|
+
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ezy
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.6.alpha
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Frej Raahede Nielsen
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2013-12-
|
|
11
|
+
date: 2013-12-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: compass
|
|
@@ -50,7 +50,15 @@ files:
|
|
|
50
50
|
- VERSION
|
|
51
51
|
- lib/ezy.rb
|
|
52
52
|
- sass/_ezy.scss
|
|
53
|
+
- sass/ezy/_clearfix.scss
|
|
54
|
+
- sass/ezy/_functions.scss
|
|
55
|
+
- sass/ezy/_grid.scss
|
|
56
|
+
- sass/ezy/_media.scss
|
|
57
|
+
- sass/ezy/_settings.scss
|
|
53
58
|
- sass/ezy/_sprites.scss
|
|
59
|
+
- sass/ezy/grid/_debug.scss
|
|
60
|
+
- sass/ezy/grid/_helpers.scss
|
|
61
|
+
- sass/ezy/grid/_layout.scss
|
|
54
62
|
- templates/project/_settings.scss
|
|
55
63
|
- templates/project/index.html
|
|
56
64
|
- templates/project/manifest.rb
|
|
@@ -59,6 +67,8 @@ files:
|
|
|
59
67
|
- test/css/grid/elastic.css
|
|
60
68
|
- test/css/grid/fluid.css
|
|
61
69
|
- test/css/grid/gutter.css
|
|
70
|
+
- test/css/grid/layout.css
|
|
71
|
+
- test/css/grid/offset.css
|
|
62
72
|
- test/css/grid/responsive.css
|
|
63
73
|
- test/css/grid/static.css
|
|
64
74
|
- test/css/media.css
|
|
@@ -66,7 +76,6 @@ files:
|
|
|
66
76
|
- test/css/sprites/position.css
|
|
67
77
|
- test/css/sprites/repeat.css
|
|
68
78
|
- test/css/sprites/resolution.css
|
|
69
|
-
- test/css/sprites/responsive.css
|
|
70
79
|
- test/css/sprites/retina.css
|
|
71
80
|
- test/css/sprites/simple.css
|
|
72
81
|
- test/css/sprites/size.css
|
|
@@ -74,6 +83,8 @@ files:
|
|
|
74
83
|
- test/scss/grid/elastic.scss
|
|
75
84
|
- test/scss/grid/fluid.scss
|
|
76
85
|
- test/scss/grid/gutter.scss
|
|
86
|
+
- test/scss/grid/layout.scss
|
|
87
|
+
- test/scss/grid/offset.scss
|
|
77
88
|
- test/scss/grid/responsive.scss
|
|
78
89
|
- test/scss/grid/static.scss
|
|
79
90
|
- test/scss/media.scss
|
|
@@ -81,13 +92,12 @@ files:
|
|
|
81
92
|
- test/scss/sprites/position.scss
|
|
82
93
|
- test/scss/sprites/repeat.scss
|
|
83
94
|
- test/scss/sprites/resolution.scss
|
|
84
|
-
- test/scss/sprites/responsive.scss
|
|
85
95
|
- test/scss/sprites/retina.scss
|
|
86
96
|
- test/scss/sprites/simple.scss
|
|
87
97
|
- test/scss/sprites/size.scss
|
|
88
98
|
- test/scss/sprites/spacing.scss
|
|
99
|
+
- test/html/grid/layout-1.html
|
|
89
100
|
- test/html/sprites/repeat.html
|
|
90
|
-
- test/html/sprites/responsive.html
|
|
91
101
|
- test/html/sprites/retina.html
|
|
92
102
|
- test/html/sprites/simple.html
|
|
93
103
|
- test/img/test-layout/alien.png
|
|
@@ -143,9 +153,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
143
153
|
version: '0'
|
|
144
154
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
145
155
|
requirements:
|
|
146
|
-
- - '
|
|
156
|
+
- - '>'
|
|
147
157
|
- !ruby/object:Gem::Version
|
|
148
|
-
version:
|
|
158
|
+
version: 1.3.1
|
|
149
159
|
requirements: []
|
|
150
160
|
rubyforge_project:
|
|
151
161
|
rubygems_version: 2.1.11
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
.classic, .no-media-queries .indy {
|
|
2
|
-
background-image: url('../../img/test-retina.png?15511385736703');
|
|
3
|
-
background-repeat: no-repeat;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
7
|
-
.classic {
|
|
8
|
-
/* Retina sprite */
|
|
9
|
-
background-image: url('../../img/test-retina@2x.png?15511385736703');
|
|
10
|
-
background-size: 152px auto;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.classic {
|
|
15
|
-
background-position: 0 -281px;
|
|
16
|
-
width: 152px;
|
|
17
|
-
height: 135px;
|
|
18
|
-
}
|
|
19
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
20
|
-
.classic {
|
|
21
|
-
/* Retina sprite */
|
|
22
|
-
background-position: 0 -140px;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.indy {
|
|
27
|
-
width: 128px;
|
|
28
|
-
height: 140px;
|
|
29
|
-
}
|
|
30
|
-
@media (min-width: 400px) {
|
|
31
|
-
.indy {
|
|
32
|
-
background-position: 0 -141px;
|
|
33
|
-
background-image: url('../../img/test-retina.png?15511385736703');
|
|
34
|
-
background-repeat: no-repeat;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-ms-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 400px), only screen and (min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (min-resolution: 192dpi) and (min-width: 400px), only screen and (min-resolution: 2dppx) and (min-width: 400px) {
|
|
38
|
-
.indy {
|
|
39
|
-
/* Retina sprite */
|
|
40
|
-
background-position: 0 0;
|
|
41
|
-
background-image: url('../../img/test-retina@2x.png?15511385736703');
|
|
42
|
-
background-size: 152px auto;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
@media (min-width: 960px) {
|
|
46
|
-
.indy {
|
|
47
|
-
background-position: 0 -281px;
|
|
48
|
-
background-image: url('../../img/test-retina.png?15511385736703');
|
|
49
|
-
background-repeat: no-repeat;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-ms-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 960px), only screen and (min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (min-resolution: 192dpi) and (min-width: 960px), only screen and (min-resolution: 2dppx) and (min-width: 960px) {
|
|
53
|
-
.indy {
|
|
54
|
-
/* Retina sprite */
|
|
55
|
-
background-position: 0 -140px;
|
|
56
|
-
background-image: url('../../img/test-retina@2x.png?15511385736703');
|
|
57
|
-
background-size: 152px auto;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
@media (min-width: 1024px) {
|
|
61
|
-
.indy {
|
|
62
|
-
background-position: 0 0;
|
|
63
|
-
background-image: url('../../img/test-retina.png?15511385736703');
|
|
64
|
-
background-repeat: no-repeat;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
.no-media-queries .indy {
|
|
68
|
-
background-position: 0 0;
|
|
69
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
|
|
6
|
-
<title>Sprite: responsive</title>
|
|
7
|
-
|
|
8
|
-
<meta name="description" content="Ezy Grid Demo">
|
|
9
|
-
<meta name="viewport" content="width=device-width">
|
|
10
|
-
|
|
11
|
-
<link href="../../css/sprites/responsive.css" rel="stylesheet">
|
|
12
|
-
|
|
13
|
-
</head>
|
|
14
|
-
<body>
|
|
15
|
-
<div class="classic"> </div>
|
|
16
|
-
<div class="indy"> </div>
|
|
17
|
-
<div class="alien"> </div>
|
|
18
|
-
</body>
|
|
19
|
-
</html>
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
// ---------------------------------------------------------------------------
|
|
2
|
-
// Imports
|
|
3
|
-
|
|
4
|
-
@import "../../../sass/ezy/media";
|
|
5
|
-
@import "../../../sass/ezy/sprites";
|
|
6
|
-
|
|
7
|
-
// ---------------------------------------------------------------------------
|
|
8
|
-
// Defining media query breakpoints
|
|
9
|
-
|
|
10
|
-
$breakpoint-small: set-breakpoint( $max: 580px );
|
|
11
|
-
$breakpoint-medium: set-breakpoint( $min: 960px );
|
|
12
|
-
$breakpoint-large: set-breakpoint( $min: 1024px, $legacy-support: true ); // Support for legacy browsers
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
// ---------------------------------------------------------------------------
|
|
16
|
-
// Create sprite
|
|
17
|
-
|
|
18
|
-
@include make-sprite(
|
|
19
|
-
$name: "base",
|
|
20
|
-
$folder: "test-retina",
|
|
21
|
-
$folder-retina: "test-retina@2x"
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
// ---------------------------------------------------------------------------
|
|
25
|
-
// Use sprite
|
|
26
|
-
|
|
27
|
-
.classic {
|
|
28
|
-
@include background-sprite( "base", "classic" );
|
|
29
|
-
width: 152px;
|
|
30
|
-
height: 135px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.indy {
|
|
34
|
-
@include background-sprite(
|
|
35
|
-
$name: "base",
|
|
36
|
-
$image: "indy",
|
|
37
|
-
$at-breakpoint: "(min-width: 400px)"
|
|
38
|
-
);
|
|
39
|
-
@include background-sprite(
|
|
40
|
-
$name: "base",
|
|
41
|
-
$image: "classic",
|
|
42
|
-
$at-breakpoint: $breakpoint-medium
|
|
43
|
-
);
|
|
44
|
-
@include background-sprite(
|
|
45
|
-
$name: "base",
|
|
46
|
-
$image: "alien",
|
|
47
|
-
$use-retina: false,
|
|
48
|
-
$at-breakpoint: $breakpoint-large
|
|
49
|
-
);
|
|
50
|
-
width: 128px;
|
|
51
|
-
height: 140px;
|
|
52
|
-
}
|