magic_stylez 0.0.0.92 → 0.0.0.93
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/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
|