magic_stylez 0.0.0.92 → 0.0.0.93
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/app/assets/javascripts/views/helper/tile_buckets.jst.eco +136 -0
- data/test/dummy/public/html/aside-nav.html +2 -2
- data/test/dummy/public/html/fixed-header.html +2 -2
- data/test/dummy/public/html/fixed-subnav.html +2 -2
- data/test/dummy/public/html/index.html +5 -3
- data/test/dummy/public/html/slidebar-header.html +2 -2
- data/test/dummy/public/html/slidebar-subnav.html +2 -2
- data/vendor/assets/stylesheets/magic-min.scss +4 -2
- data/vendor/assets/stylesheets/magic-stylez.scss +1 -2
- data/vendor/assets/stylesheets/magic/content/_tables.scss +6 -0
- data/vendor/assets/stylesheets/magic/helper/_all.scss +3 -1
- data/vendor/assets/stylesheets/magic/helper/_tile_buckets.scss +99 -0
- metadata +4 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f4b139927d5942e778e21431cf10ea3026bc174d
|
|
4
|
+
data.tar.gz: af1c21570a1752752ea0670245cce900f8644a79
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: dc7b0fb21d2d5df053a39e3ddb7bda7840d1482f691a2d6fce16ef5f6387ce4419025c6ea8dfc6205816f873a85138cdfc4a225bc1b5661b00fde84f6d05f34b
|
|
7
|
+
data.tar.gz: b254d4802a634ad89b8eef1ce4a7b1a7e9faf9bed5471ddc63c61d0f587c81f2df2da711dd3bcdf15c0dcc38d0e9db8ba142343b07a8bafeffcc43d08e0eca34
|
data/lib/magic_stylez/version.rb
CHANGED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
<div class="section head">
|
|
2
|
+
<div class="corset">
|
|
3
|
+
<h1><small>Responsive</small> Tile - Buckets</h1>
|
|
4
|
+
</div>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div class="section dark flatted">
|
|
8
|
+
<div class="corset">
|
|
9
|
+
<h4>dependency:</h4>
|
|
10
|
+
<code>@import "magic/helper/tile_buckets";</code>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="section hard-top">
|
|
15
|
+
<div class="corset">
|
|
16
|
+
|
|
17
|
+
<h3>Needs to be written without spaces between the <code>.tile</code> elements.</h3>
|
|
18
|
+
|
|
19
|
+
<pre><code><div class="bucket">
|
|
20
|
+
<div class="tile">
|
|
21
|
+
...
|
|
22
|
+
</div><div class="tile">
|
|
23
|
+
...
|
|
24
|
+
</div>
|
|
25
|
+
</div></code></pre>
|
|
26
|
+
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="section hard-top">
|
|
31
|
+
<div class="corset">
|
|
32
|
+
|
|
33
|
+
<p class="loud">Filled with Products + <small><code>.spaced_10</code></small></p>
|
|
34
|
+
<div class="responsive_bucket bucket spaced_10">
|
|
35
|
+
<% for nmbr in [1..8]: %><div class="responsive_tile">
|
|
36
|
+
<div class="box product">
|
|
37
|
+
<div class="body">
|
|
38
|
+
<img class="responsive" src="http://lorempixel.com/400/300/technics/<%= nmbr %>" alt="White 43">
|
|
39
|
+
<div class="clearfix"></div>
|
|
40
|
+
<div class="product-name">
|
|
41
|
+
Product <%= nmbr %>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="product-facts">
|
|
44
|
+
some details you should know
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div><% end %>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="section">
|
|
55
|
+
<div class="corset">
|
|
56
|
+
<p class="loud">No Spaces Between boxes .. <small>needs to be written without spaces between the <code>.tile</code> elements.</small></p>
|
|
57
|
+
<div class="row">
|
|
58
|
+
<div class="col-xs-6">
|
|
59
|
+
<div class="bucket bucket_s_2_4">
|
|
60
|
+
<% for nmbr in [1..8]: %><div class="responsive_tile">
|
|
61
|
+
<img src="http://lorempixel.com/400/400/sports/<%= nmbr %>" class="responsive" >
|
|
62
|
+
<%#= nmbr %>
|
|
63
|
+
</div><% end %>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="col-xs-6">
|
|
67
|
+
<div class="bucket bucket_s_2_4">
|
|
68
|
+
<% for nmbr in [1..8]: %><div class="responsive_tile">
|
|
69
|
+
<img src="http://lorempixel.com/400/400/nature/<%= nmbr %>" class="responsive" >
|
|
70
|
+
<%#= nmbr %>
|
|
71
|
+
</div><% end %>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div class="section hard-top">
|
|
79
|
+
<div class="corset">
|
|
80
|
+
<table class="table table-lined table-no-head">
|
|
81
|
+
<tr>
|
|
82
|
+
<td colspan="2"><strong>Buckets:</strong></td>
|
|
83
|
+
</tr>
|
|
84
|
+
<tr>
|
|
85
|
+
<td><code>.bucket</code> | <code>.tile_bucket</code> | <code>.tileBucket</code></td>
|
|
86
|
+
<td>Usual Bucket</td>
|
|
87
|
+
</tr>
|
|
88
|
+
|
|
89
|
+
<tr>
|
|
90
|
+
<td colspan="2">Sizes:</td>
|
|
91
|
+
</tr>
|
|
92
|
+
<tr>
|
|
93
|
+
<td><code>.bucket.bucket_s_1_4</code></td>
|
|
94
|
+
<td>1/4 Sized bucket</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td><code>.bucket.bucket_s_2_4</code></td>
|
|
98
|
+
<td>1/2 Sized bucket</td>
|
|
99
|
+
</tr>
|
|
100
|
+
<tr>
|
|
101
|
+
<td><code>.bucket.bucket_s_3_4</code></td>
|
|
102
|
+
<td>3/4 Sized bucket</td>
|
|
103
|
+
</tr>
|
|
104
|
+
|
|
105
|
+
<tr>
|
|
106
|
+
<td colspan="2">Spaces:</td>
|
|
107
|
+
</tr>
|
|
108
|
+
<tr>
|
|
109
|
+
<td><code>.bucket.spaced_5</code></td>
|
|
110
|
+
<td>5px Size between Tiles</td>
|
|
111
|
+
</tr>
|
|
112
|
+
<tr>
|
|
113
|
+
<td><code>.bucket.spaced_0|5|10|15|20|30|40|50</code></td>
|
|
114
|
+
<td>0|5|10|15|20|30|40|50px Size between Tiles</td>
|
|
115
|
+
</tr>
|
|
116
|
+
|
|
117
|
+
<tr>
|
|
118
|
+
<td colspan="2"><strong>Tiles:</strong></td>
|
|
119
|
+
</tr>
|
|
120
|
+
<tr>
|
|
121
|
+
<td><code>.tile</code> | <code>.responsive_tile</code> | <code>.responsiveTile</code></td>
|
|
122
|
+
<td>Usual Tile</td>
|
|
123
|
+
</tr>
|
|
124
|
+
|
|
125
|
+
</table>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="section hard-top">
|
|
130
|
+
<div class="bucket">
|
|
131
|
+
<% for nmbr in [1..8]: %><div class="responsive_tile">
|
|
132
|
+
<img src="http://lorempixel.com/400/400/abstract/<%= nmbr %>" class="responsive" >
|
|
133
|
+
<%#= nmbr %>
|
|
134
|
+
</div><% end %>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-28c6aaa2c67e57ef995064731e5ae6c8.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="8nyvComHs4WOknczwt20GU5/JlV3AYBjUDipRSXtKv0=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-28c6aaa2c67e57ef995064731e5ae6c8.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="8nyvComHs4WOknczwt20GU5/JlV3AYBjUDipRSXtKv0=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-28c6aaa2c67e57ef995064731e5ae6c8.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="8nyvComHs4WOknczwt20GU5/JlV3AYBjUDipRSXtKv0=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
7
7
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
8
8
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
9
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
10
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
9
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-28c6aaa2c67e57ef995064731e5ae6c8.css" media="all" rel="stylesheet" />
|
|
10
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-3d51278b2af9fbb287dcb6db718f4f55.js"></script>
|
|
11
11
|
<meta content="authenticity_token" name="csrf-param" />
|
|
12
|
-
<meta content="
|
|
12
|
+
<meta content="8nyvComHs4WOknczwt20GU5/JlV3AYBjUDipRSXtKv0=" name="csrf-token" />
|
|
13
13
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
14
14
|
<link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f1706407301f788c54691b6995f60a8f.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
|
|
15
15
|
<link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f34b54df445838a4f6bdac98bd904570.png" rel="shortcut icon" type="image/png" />
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
</li>
|
|
55
55
|
<li><a class="lst_lnk" href="#">Effects</a>
|
|
56
56
|
<ul class="sub_nav">
|
|
57
|
+
<li><a class="app_lnk lst_lnk" data-target="effects/flip" href="#">Flip</a></li>
|
|
57
58
|
<li><a class="app_lnk lst_lnk" data-target="effects/noise" href="#">Noise</a></li>
|
|
58
59
|
<li><a class="app_lnk lst_lnk" data-target="effects/shadows" href="#">Shadows</a></li>
|
|
59
60
|
</ul>
|
|
@@ -68,6 +69,7 @@
|
|
|
68
69
|
<li><a class="app_lnk lst_lnk" data-target="helper/arrow_infos" href="#">Arrow Infos</a></li>
|
|
69
70
|
<li><a class="app_lnk lst_lnk" data-target="helper/crossed_text" href="#">Crossed Text</a></li>
|
|
70
71
|
<li><a class="app_lnk lst_lnk" data-target="helper/divider" href="#">Divider</a></li>
|
|
72
|
+
<li><a class="app_lnk lst_lnk" data-target="helper/dots" href="#">Dots</a></li>
|
|
71
73
|
<li><a class="app_lnk lst_lnk" data-target="helper/sass_helper" href="#">Sass Helper</a></li>
|
|
72
74
|
<li><a class="app_lnk lst_lnk" data-target="helper/text" href="#">Text</a></li>
|
|
73
75
|
<li><a class="app_lnk lst_lnk" data-target="helper/three_previews" href="#">Three Previews</a></li>
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-28c6aaa2c67e57ef995064731e5ae6c8.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="8nyvComHs4WOknczwt20GU5/JlV3AYBjUDipRSXtKv0=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-28c6aaa2c67e57ef995064731e5ae6c8.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="8nyvComHs4WOknczwt20GU5/JlV3AYBjUDipRSXtKv0=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -60,12 +60,14 @@
|
|
|
60
60
|
// @import "magic/content/pix";
|
|
61
61
|
// @import "magic/content/tables";
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
@import "magic/helper/divider";
|
|
63
|
+
// load helper
|
|
65
64
|
// @import "magic/helper/arrow_hints";
|
|
66
65
|
// @import "magic/helper/crossed";
|
|
66
|
+
@import "magic/helper/divider";
|
|
67
67
|
// @import "magic/helper/dots";
|
|
68
|
+
// @import "magic/helper/text";
|
|
68
69
|
// @import "magic/helper/three_previews";
|
|
70
|
+
// @import "magic/helper/tile_buckets";
|
|
69
71
|
|
|
70
72
|
|
|
71
73
|
// @import "magic/lists/nav";
|
|
@@ -24,8 +24,6 @@
|
|
|
24
24
|
@import "magic/effects/shadows";
|
|
25
25
|
@import "magic/effects/reflections";
|
|
26
26
|
|
|
27
|
-
// text helper
|
|
28
|
-
@import "magic/helper/text";
|
|
29
27
|
|
|
30
28
|
// load icons
|
|
31
29
|
@import "magic/icons/icomoon";
|
|
@@ -62,6 +60,7 @@
|
|
|
62
60
|
@import "magic/content/tables";
|
|
63
61
|
|
|
64
62
|
|
|
63
|
+
// load helper
|
|
65
64
|
@import "magic/helper/all";
|
|
66
65
|
|
|
67
66
|
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
.bucket, .tile_bucket, .tileBucket { position: relative; text-align: center; }
|
|
2
|
+
|
|
3
|
+
.tile, .responsive_tile, .responsiveTile {
|
|
4
|
+
// float: left;
|
|
5
|
+
display: inline; display: inline-block;
|
|
6
|
+
width: 50%;
|
|
7
|
+
&.item { width: 48%; }
|
|
8
|
+
// @include no_wrap;
|
|
9
|
+
overflow: visible;
|
|
10
|
+
img {
|
|
11
|
+
vertical-align: top;
|
|
12
|
+
width: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
z-index: 3;
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
.bucket_s_3_4, .bucket_s_2_4, .bucket_s_1_4 {
|
|
25
|
+
.tile, .responsive_tile, .responsiveTile { width: 100%; }
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
@media only screen and (min-width: 460px) {
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
// .tile, .responsive_tile, .responsiveTile { width: 33.33333%; &.item { width: 32.33333%; } }
|
|
34
|
+
.bucket_s_3_4 { .tile, .responsive_tile, .responsiveTile { width: 50%; &.item { width: 48%; } } }
|
|
35
|
+
.bucket_s_2_4 { .tile, .responsive_tile, .responsiveTile {width: 100%;} }
|
|
36
|
+
.bucket_s_1_4 { .tile, .responsive_tile, .responsiveTile {width: 100%;} }
|
|
37
|
+
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media only screen and (min-width: 760px) {
|
|
41
|
+
|
|
42
|
+
// .tile, .responsive_tile, .responsiveTile { width: 25%; &.item { width: 24%; } }
|
|
43
|
+
.tile, .responsive_tile, .responsiveTile { width: 33.33333%; &.item { width: 32.33333%; } }
|
|
44
|
+
.bucket_s_3_4, .bucket_3_4 { .tile, .responsive_tile, .responsiveTile {width: 33.33333%; &.item { width: 32.33333%; } } }
|
|
45
|
+
.bucket_s_2_4, .bucket_2_4 { .tile, .responsive_tile, .responsiveTile {width: 50%; &.item { width: 48%; } } }
|
|
46
|
+
.bucket_s_1_4, .bucket_1_4 { .tile, .responsive_tile, .responsiveTile {width: 50%; &.item { width: 48%; } } }
|
|
47
|
+
|
|
48
|
+
.bucket_33 { .tile, .responsive_tile, .responsiveTile {width: 33.33333%; &.item { width: 32.33333%; }}}
|
|
49
|
+
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@media only screen and (min-width: 1010px) {
|
|
53
|
+
|
|
54
|
+
// .tile, .responsive_tile, .responsiveTile { width: 20%; &.item { width: 19.5%; } }
|
|
55
|
+
.tile, .responsive_tile, .responsiveTile { width: 25%; &.item { width: 24%; } }
|
|
56
|
+
.bucket_s_3_4, .bucket_3_4, .bucket_l_3_4 { .tile, .responsive_tile, .responsiveTile {width: 25%; &.item { width: 24%; } }}
|
|
57
|
+
.bucket_s_2_4, .bucket_2_4, .bucket_l_2_4 { .tile, .responsive_tile, .responsiveTile {width: 33.33333%; &.item { width: 32.33333%; }}}
|
|
58
|
+
.bucket_s_1_4, .bucket_1_4, .bucket_l_1_4 { .tile, .responsive_tile, .responsiveTile {width: 50%; &.item { width: 48%; } } }
|
|
59
|
+
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
@media only screen and (min-width: 1260px) {
|
|
64
|
+
|
|
65
|
+
// .tile, .responsive_tile, .responsiveTile { width: 16.66666%; &.item { width: 16.3%; } }
|
|
66
|
+
.tile, .responsive_tile, .responsiveTile { width: 20%; &.item { width: 19.5%; } }
|
|
67
|
+
.bucket_s_3_4, .bucket_3_4, .bucket_l_3_4 { .tile, .responsive_tile, .responsiveTile {width: 20%; &.item { width: 19.5%; } }}
|
|
68
|
+
.bucket_s_2_4, .bucket_2_4, .bucket_l_2_4 { .tile, .responsive_tile, .responsiveTile {width: 25%; &.item { width: 24%; } }}
|
|
69
|
+
.bucket_s_1_4, .bucket_1_4, .bucket_l_1_4 { .tile, .responsive_tile, .responsiveTile {width: 50%; &.item { width: 48%; } }}
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
.quarter-bucket {
|
|
76
|
+
.tile, .responsive_tile, .responsiveTile { width: 25%; &.item { width: 24%; } }
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.bucket, .tile_bucket, .tileBucket {
|
|
80
|
+
.tile-bucket {
|
|
81
|
+
display: none; position: relative;
|
|
82
|
+
margin: 0; padding: 0;
|
|
83
|
+
&.active { display: block; }
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
@each $size in 0, 5, 10, 15, 20, 30, 40, 50 {
|
|
88
|
+
|
|
89
|
+
&.spaced_#{$size} {
|
|
90
|
+
@include horizontal_margin( -#{$size}px );
|
|
91
|
+
.tile, .responsive_tile, .responsiveTile {
|
|
92
|
+
padding: #{$size}px;
|
|
93
|
+
& > * { margin: 0; }
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
}
|
|
99
|
+
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: magic_stylez
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.0.
|
|
4
|
+
version: 0.0.0.93
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Torsten Wetzel
|
|
@@ -259,6 +259,7 @@ files:
|
|
|
259
259
|
- test/dummy/app/assets/javascripts/views/helper/sass_helper.jst.eco
|
|
260
260
|
- test/dummy/app/assets/javascripts/views/helper/text.jst.eco
|
|
261
261
|
- test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco
|
|
262
|
+
- test/dummy/app/assets/javascripts/views/helper/tile_buckets.jst.eco
|
|
262
263
|
- test/dummy/app/assets/javascripts/views/icons/bettericons.jst.eco
|
|
263
264
|
- test/dummy/app/assets/javascripts/views/icons/glyphicons.jst.eco
|
|
264
265
|
- test/dummy/app/assets/javascripts/views/icons/icomoon.jst.eco
|
|
@@ -430,6 +431,7 @@ files:
|
|
|
430
431
|
- vendor/assets/stylesheets/magic/helper/_dots.scss
|
|
431
432
|
- vendor/assets/stylesheets/magic/helper/_text.scss
|
|
432
433
|
- vendor/assets/stylesheets/magic/helper/_three_previews.scss
|
|
434
|
+
- vendor/assets/stylesheets/magic/helper/_tile_buckets.scss
|
|
433
435
|
- vendor/assets/stylesheets/magic/icons/bettericons.scss
|
|
434
436
|
- vendor/assets/stylesheets/magic/icons/icomoon.scss
|
|
435
437
|
- vendor/assets/stylesheets/magic/icons/magicons.scss
|
|
@@ -525,6 +527,7 @@ test_files:
|
|
|
525
527
|
- test/dummy/app/assets/javascripts/views/helper/sass_helper.jst.eco
|
|
526
528
|
- test/dummy/app/assets/javascripts/views/helper/text.jst.eco
|
|
527
529
|
- test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco
|
|
530
|
+
- test/dummy/app/assets/javascripts/views/helper/tile_buckets.jst.eco
|
|
528
531
|
- test/dummy/app/assets/javascripts/views/icons/bettericons.jst.eco
|
|
529
532
|
- test/dummy/app/assets/javascripts/views/icons/glyphicons.jst.eco
|
|
530
533
|
- test/dummy/app/assets/javascripts/views/icons/icomoon.jst.eco
|