css_shapes 0.8.0
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.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/README.md +91 -0
- data/Rakefile +14 -0
- data/assets/_shapes.scss +329 -0
- data/css_shapes.gemspec +22 -0
- data/example/example.html +1079 -0
- data/example/src/samples.yml +52 -0
- data/example/src/template.erb +73 -0
- data/lib/css_shapes.rb +13 -0
- data/lib/css_shapes/example.rb +88 -0
- data/lib/css_shapes/railtie.rb +12 -0
- data/lib/css_shapes/source.rb +59 -0
- data/lib/css_shapes/tasks/css_shapes.rake +14 -0
- data/lib/css_shapes/version.rb +3 -0
- metadata +79 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
CSS Shapes
|
|
2
|
+
==========
|
|
3
|
+
|
|
4
|
+
Rails 3.1 asset library providing SCSS @mixins for the following
|
|
5
|
+
shapes, based on [source CSS](http://css-tricks.com/examples/ShapesOfCSS/):
|
|
6
|
+
|
|
7
|
+
* square
|
|
8
|
+
* rectangle
|
|
9
|
+
* circle
|
|
10
|
+
* oval
|
|
11
|
+
* triangle-up
|
|
12
|
+
* triangle-down
|
|
13
|
+
* triangle-left
|
|
14
|
+
* triangle-right
|
|
15
|
+
* triangle-topleft
|
|
16
|
+
* triangle-topright
|
|
17
|
+
* triangle-bottomleft
|
|
18
|
+
* triangle-bottomright
|
|
19
|
+
* parallelogram
|
|
20
|
+
* trapezoid
|
|
21
|
+
* star-six
|
|
22
|
+
* star-five
|
|
23
|
+
* pentagon
|
|
24
|
+
* hexagon
|
|
25
|
+
* octagon
|
|
26
|
+
* heart
|
|
27
|
+
* infinity
|
|
28
|
+
|
|
29
|
+
Usage
|
|
30
|
+
-----
|
|
31
|
+
|
|
32
|
+
After installing the gem using Bundler, just add the following to your
|
|
33
|
+
SCSS:
|
|
34
|
+
|
|
35
|
+
@import "shapes";
|
|
36
|
+
|
|
37
|
+
You only need to add one HTML to make a shape. Here's an example:
|
|
38
|
+
|
|
39
|
+
<div id='thataway'></div>
|
|
40
|
+
|
|
41
|
+
Then, include the desired shape mixin. The mixins all have different
|
|
42
|
+
options (see `rake css_shapes:list`, read the `_shapes.scss` source,
|
|
43
|
+
or view `examples/example.html` in a browser for details), but they each
|
|
44
|
+
require at least a color. Here let's make a bright green
|
|
45
|
+
right-pointing triangle:
|
|
46
|
+
|
|
47
|
+
#thataway {
|
|
48
|
+
@include triangle-right(#5F0, 120px, 30px);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
That's 120px wide, 30px high.
|
|
52
|
+
|
|
53
|
+
Documentation
|
|
54
|
+
-------------
|
|
55
|
+
|
|
56
|
+
See `rake css_shapes:list` from your Rails app, read the `_shapes.scss` source,
|
|
57
|
+
or view `examples/example.html` in a browser.
|
|
58
|
+
|
|
59
|
+
Known Issues
|
|
60
|
+
------------
|
|
61
|
+
|
|
62
|
+
The octogon is a bit of an oddball, requiring a background color and
|
|
63
|
+
being a bit wonky with some custom sizes. Until this math error is
|
|
64
|
+
fixed or another approach used, your dreams of a page full of
|
|
65
|
+
differently-sized stop signs will have to wait.
|
|
66
|
+
|
|
67
|
+
The five-sided star "radius" parameter is probably only roughly
|
|
68
|
+
accurate.
|
|
69
|
+
|
|
70
|
+
The infinity shape really only works at the default size or via
|
|
71
|
+
trial-and-error right now. Complex shapes like this need to be
|
|
72
|
+
constructed more flexibly. Help?
|
|
73
|
+
|
|
74
|
+
Fixes appreciated.
|
|
75
|
+
|
|
76
|
+
Reporting Bugs and Contributing
|
|
77
|
+
-------------------------------
|
|
78
|
+
|
|
79
|
+
Please submit bugs and feature requests as GitHub issues. Pull
|
|
80
|
+
requests are the preferred form of contribution. Kindly contribute
|
|
81
|
+
back to the main repo if you fork.
|
|
82
|
+
|
|
83
|
+
Credit
|
|
84
|
+
------
|
|
85
|
+
|
|
86
|
+
Credit for the shapes go to
|
|
87
|
+
http://css-tricks.com/examples/ShapesOfCSS/ and the associated
|
|
88
|
+
contributors. This library just makes it easy to reuse the shapes
|
|
89
|
+
from SCSS.
|
|
90
|
+
|
|
91
|
+
All math errors are probably mine. I prefer words and pretty pictures.
|
data/Rakefile
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
require "bundler/gem_tasks"
|
|
2
|
+
|
|
3
|
+
require './lib/css_shapes'
|
|
4
|
+
namespace :example do
|
|
5
|
+
|
|
6
|
+
task :generate do
|
|
7
|
+
CSSShapes::Example.write(File.expand_path('../example/example.html', __FILE__))
|
|
8
|
+
end
|
|
9
|
+
|
|
10
|
+
end
|
|
11
|
+
|
|
12
|
+
task :shapes do
|
|
13
|
+
puts CSSShapes::Source.shapes.map(&:name)
|
|
14
|
+
end
|
data/assets/_shapes.scss
ADDED
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
@mixin square($color, $size: 100px) {
|
|
2
|
+
width: $size;
|
|
3
|
+
height: $size;
|
|
4
|
+
background: $color;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@mixin rectangle($color, $width: 200px, $height: 100px) {
|
|
8
|
+
width: $width;
|
|
9
|
+
height: $height;
|
|
10
|
+
background: $color;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@mixin circle($color, $diameter: 100px) {
|
|
14
|
+
width: $diameter;
|
|
15
|
+
height: $diameter;
|
|
16
|
+
background: $color;
|
|
17
|
+
-moz-border-radius: $diameter / 2;
|
|
18
|
+
-webkit-border-radius: $diameter / 2;
|
|
19
|
+
border-radius: $diameter / 2;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@mixin oval($color, $width: 200px, $height: 100px) {
|
|
23
|
+
width: $width;
|
|
24
|
+
height: $height;
|
|
25
|
+
background: $color;
|
|
26
|
+
-moz-border-radius: #{$width / 2} / #{$height / 2};
|
|
27
|
+
-webkit-border-radius: #{$width / 2} / #{$height / 2};
|
|
28
|
+
border-radius: #{$width / 2} / #{$height / 2};
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@mixin triangle-up($color, $width: 100px, $height: 100px) {
|
|
32
|
+
width: 0;
|
|
33
|
+
height: 0;
|
|
34
|
+
border-left: ($width / 2) solid transparent;
|
|
35
|
+
border-right: ($width / 2) solid transparent;
|
|
36
|
+
border-bottom: $height solid $color;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@mixin triangle-down($color, $width: 100px, $height: 100px) {
|
|
40
|
+
width: 0;
|
|
41
|
+
height: 0;
|
|
42
|
+
border-left: ($width / 2) solid transparent;
|
|
43
|
+
border-right: ($width / 2) solid transparent;
|
|
44
|
+
border-top: $height solid $color;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@mixin triangle-left($color, $width: 100px, $height: 100px) {
|
|
48
|
+
width: 0;
|
|
49
|
+
height: 0;
|
|
50
|
+
border-top: ($height / 2) solid transparent;
|
|
51
|
+
border-right: $width solid $color;
|
|
52
|
+
border-bottom: ($height / 2) solid transparent;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@mixin triangle-right($color, $width: 100px, $height: 100px) {
|
|
56
|
+
width: 0;
|
|
57
|
+
height: 0;
|
|
58
|
+
border-top: ($height / 2) solid transparent;
|
|
59
|
+
border-left: $width solid $color;
|
|
60
|
+
border-bottom: ($height / 2) solid transparent;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@mixin triangle-topleft($color, $width: 100px, $height: 100px) {
|
|
64
|
+
width: 0;
|
|
65
|
+
height: 0;
|
|
66
|
+
border-top: $height solid $color;
|
|
67
|
+
border-right: $width solid transparent;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@mixin triangle-topright($color, $width: 100px, $height: 100px) {
|
|
71
|
+
width: 0;
|
|
72
|
+
height: 0;
|
|
73
|
+
border-top: $height solid $color;
|
|
74
|
+
border-left: $width solid transparent;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@mixin triangle-bottomleft($color, $width: 100px, $height: 100px) {
|
|
78
|
+
width: 0;
|
|
79
|
+
height: 0;
|
|
80
|
+
border-bottom: $height solid $color;
|
|
81
|
+
border-right: $width solid transparent;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@mixin triangle-bottomright($color, $width: 100px, $height: 100px) {
|
|
85
|
+
width: 0;
|
|
86
|
+
height: 0;
|
|
87
|
+
border-bottom: $height solid $color;
|
|
88
|
+
border-left: $width solid transparent;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@mixin parallelogram($color, $width: 150px, $height: 100px, $angle: 20deg) {
|
|
92
|
+
width: $width;
|
|
93
|
+
height: $height;
|
|
94
|
+
-webkit-transform: skew($angle);
|
|
95
|
+
-moz-transform: skew($angle);
|
|
96
|
+
-o-transform: skew($angle);
|
|
97
|
+
background: $color;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@mixin trapezoid($color, $width: 200px, $height: 100px) {
|
|
101
|
+
border-bottom: $height solid $color;
|
|
102
|
+
/* TODO: Support custom angle */
|
|
103
|
+
border-left: ($height / 2) solid transparent;
|
|
104
|
+
border-right: ($height / 2) solid transparent;
|
|
105
|
+
height: 0;
|
|
106
|
+
width: $width / 2;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@mixin star-six($color, $diameter: 100px) {
|
|
110
|
+
width: 0;
|
|
111
|
+
height: 0;
|
|
112
|
+
border-left: ($diameter / 2) solid transparent;
|
|
113
|
+
border-right: ($diameter / 2) solid transparent;
|
|
114
|
+
border-bottom: $diameter solid $color;
|
|
115
|
+
position: relative;
|
|
116
|
+
&:after {
|
|
117
|
+
width: 0;
|
|
118
|
+
height: 0;
|
|
119
|
+
border-left: ($diameter / 2) solid transparent;
|
|
120
|
+
border-right: ($diameter / 2) solid transparent;
|
|
121
|
+
border-top: $diameter solid $color;
|
|
122
|
+
position: absolute;
|
|
123
|
+
content: "";
|
|
124
|
+
top: $diameter * 0.3;
|
|
125
|
+
left: $diameter * -0.5;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@mixin star-five($color, $radius: 100px) {
|
|
130
|
+
margin: ($radius / 2) 0;
|
|
131
|
+
position: relative;
|
|
132
|
+
display: block;
|
|
133
|
+
color: $color;
|
|
134
|
+
width: 0px;
|
|
135
|
+
height: 0px;
|
|
136
|
+
border-right: $radius solid transparent;
|
|
137
|
+
border-bottom: ($radius * 0.7) solid $color;
|
|
138
|
+
border-left: $radius solid transparent;
|
|
139
|
+
-moz-transform: rotate(35deg);
|
|
140
|
+
-webkit-transform: rotate(35deg);
|
|
141
|
+
-ms-transform: rotate(35deg);
|
|
142
|
+
-o-transform: rotate(35deg);
|
|
143
|
+
&:before {
|
|
144
|
+
border-bottom: ($radius * 0.8) solid $color;
|
|
145
|
+
border-left: ($radius * 0.3) solid transparent;
|
|
146
|
+
border-right: ($radius * 0.3) solid transparent;
|
|
147
|
+
position: absolute;
|
|
148
|
+
height: 0;
|
|
149
|
+
width: 0;
|
|
150
|
+
top: $radius * -0.45;
|
|
151
|
+
left: $radius * -0.65;
|
|
152
|
+
display: block;
|
|
153
|
+
content: '';
|
|
154
|
+
-webkit-transform: rotate(-35deg);
|
|
155
|
+
-moz-transform: rotate(-35deg);
|
|
156
|
+
-ms-transform: rotate(-35deg);
|
|
157
|
+
-o-transform: rotate(-35deg);
|
|
158
|
+
}
|
|
159
|
+
&:after {
|
|
160
|
+
position: absolute;
|
|
161
|
+
display: block;
|
|
162
|
+
color: $color;
|
|
163
|
+
top: $radius * 0.03;
|
|
164
|
+
left: $radius * -1.05;
|
|
165
|
+
width: 0px;
|
|
166
|
+
height: 0px;
|
|
167
|
+
border-right: $radius solid transparent;
|
|
168
|
+
border-bottom: ($radius * 0.7) solid $color;
|
|
169
|
+
border-left: $radius solid transparent;
|
|
170
|
+
-webkit-transform: rotate(-70deg);
|
|
171
|
+
-moz-transform: rotate(-70deg);
|
|
172
|
+
-ms-transform: rotate(-70deg);
|
|
173
|
+
-o-transform: rotate(-70deg);
|
|
174
|
+
content: '';
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@mixin pentagon($color, $diameter: 100px) {
|
|
179
|
+
position: relative;
|
|
180
|
+
width: $diameter * 0.54;
|
|
181
|
+
border-width: ($diameter / 2) ($diameter * 0.18) 0;
|
|
182
|
+
border-style: solid;
|
|
183
|
+
border-color: $color transparent;
|
|
184
|
+
&:before {
|
|
185
|
+
content: "";
|
|
186
|
+
position: absolute;
|
|
187
|
+
height: 0;
|
|
188
|
+
width: 0;
|
|
189
|
+
top: $diameter * -0.85;
|
|
190
|
+
left: $diameter * -0.18;
|
|
191
|
+
border-width: 0 ($diameter * 0.45) ($diameter * 0.35);
|
|
192
|
+
border-style: solid;
|
|
193
|
+
border-color: transparent transparent $color;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
@mixin hexagon($color, $diameter: 100px) {
|
|
198
|
+
width: $diameter;
|
|
199
|
+
height: $diameter * 0.55;
|
|
200
|
+
background: $color;
|
|
201
|
+
position: relative;
|
|
202
|
+
&:before {
|
|
203
|
+
content: "";
|
|
204
|
+
position: absolute;
|
|
205
|
+
top: $diameter * -0.25;
|
|
206
|
+
left: 0;
|
|
207
|
+
width: 0;
|
|
208
|
+
height: 0;
|
|
209
|
+
border-left: ($diameter / 2) solid transparent;
|
|
210
|
+
border-right: ($diameter / 2) solid transparent;
|
|
211
|
+
border-bottom: ($diameter / 4) solid $color;
|
|
212
|
+
}
|
|
213
|
+
&:after {
|
|
214
|
+
content: "";
|
|
215
|
+
position: absolute;
|
|
216
|
+
bottom: $diameter * -0.25;
|
|
217
|
+
left: 0;
|
|
218
|
+
width: 0;
|
|
219
|
+
height: 0;
|
|
220
|
+
border-left: ($diameter / 2) solid transparent;
|
|
221
|
+
border-right: ($diameter / 2) solid transparent;
|
|
222
|
+
border-top: ($diameter / 4) solid $color;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
@mixin octagon($color, $background, $diameter: 100px) {
|
|
227
|
+
width: $diameter;
|
|
228
|
+
height: $diameter;
|
|
229
|
+
background: $color;
|
|
230
|
+
position: relative;
|
|
231
|
+
&:before {
|
|
232
|
+
content: "";
|
|
233
|
+
position: absolute;
|
|
234
|
+
top: 0;
|
|
235
|
+
left: 0;
|
|
236
|
+
border-bottom: ($diameter * 0.29) solid $color;
|
|
237
|
+
border-left: ($diameter * 0.29) solid $background;
|
|
238
|
+
border-right: ($diameter * 0.29) solid $background;
|
|
239
|
+
width: $diameter * 0.42;
|
|
240
|
+
height: 0;
|
|
241
|
+
}
|
|
242
|
+
&:after {
|
|
243
|
+
content: "";
|
|
244
|
+
position: absolute;
|
|
245
|
+
bottom: 0;
|
|
246
|
+
left: 0;
|
|
247
|
+
border-top: ($diameter * 0.29) solid $color;
|
|
248
|
+
border-left: ($diameter * 0.29) solid $background;
|
|
249
|
+
border-right: ($diameter * 0.29) solid $background;
|
|
250
|
+
width: $diameter * 0.42;
|
|
251
|
+
height: 0;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
@mixin heart($color, $width: 100px, $height: 90px) {
|
|
256
|
+
position: relative;
|
|
257
|
+
width: $width;
|
|
258
|
+
height: $height;
|
|
259
|
+
&:after,
|
|
260
|
+
&:before {
|
|
261
|
+
position: absolute;
|
|
262
|
+
content: "";
|
|
263
|
+
left: $width / 2;
|
|
264
|
+
top: 0;
|
|
265
|
+
width: $width / 2;
|
|
266
|
+
height: $height * 0.88;
|
|
267
|
+
background: $color;
|
|
268
|
+
-moz-border-radius: ($width / 2) ($width / 2) 0 0;
|
|
269
|
+
border-radius: ($width / 2) ($width / 2) 0 0;
|
|
270
|
+
-webkit-transform: rotate(-45deg);
|
|
271
|
+
-moz-transform: rotate(-45deg);
|
|
272
|
+
-ms-transform: rotate(-45deg);
|
|
273
|
+
-o-transform: rotate(-45deg);
|
|
274
|
+
transform: rotate(-45deg);
|
|
275
|
+
-webkit-transform-origin: 0 100%;
|
|
276
|
+
-moz-transform-origin: 0 100%;
|
|
277
|
+
-ms-transform-origin: 0 100%;
|
|
278
|
+
-o-transform-origin: 0 100%;
|
|
279
|
+
transform-origin: 0 100%;
|
|
280
|
+
}
|
|
281
|
+
&:after {
|
|
282
|
+
left: 0;
|
|
283
|
+
-webkit-transform: rotate(45deg);
|
|
284
|
+
-moz-transform: rotate(45deg);
|
|
285
|
+
-ms-transform: rotate(45deg);
|
|
286
|
+
-o-transform: rotate(45deg);
|
|
287
|
+
transform: rotate(45deg);
|
|
288
|
+
-webkit-transform-origin: 100% 100%;
|
|
289
|
+
-moz-transform-origin: 100% 100%;
|
|
290
|
+
-ms-transform-origin: 100% 100%;
|
|
291
|
+
-o-transform-origin: 100% 100%;
|
|
292
|
+
transform-origin: 100% 100%;
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
@mixin infinity($color, $width: 212px, $height: 100px, $thickness: 20px) {
|
|
297
|
+
position: relative;
|
|
298
|
+
width: $width;
|
|
299
|
+
height: $height;
|
|
300
|
+
&:before,
|
|
301
|
+
&:after {
|
|
302
|
+
content: "";
|
|
303
|
+
position: absolute;
|
|
304
|
+
top: 0;
|
|
305
|
+
left: ($width - ($height * 2) - ($thickness / 2)) - 2px; /* Total BS guess at default size */
|
|
306
|
+
width: $height * 0.6;
|
|
307
|
+
height: $height * 0.6;
|
|
308
|
+
border: $thickness solid $color;
|
|
309
|
+
-moz-border-radius: #{$height / 2} #{$height / 2} 0 #{$height / 2};
|
|
310
|
+
border-radius: #{$height / 2} #{$height / 2} 0 #{$height / 2};
|
|
311
|
+
-webkit-transform: rotate(-45deg);
|
|
312
|
+
-moz-transform: rotate(-45deg);
|
|
313
|
+
-ms-transform: rotate(-45deg);
|
|
314
|
+
-o-transform: rotate(-45deg);
|
|
315
|
+
transform: rotate(-45deg);
|
|
316
|
+
}
|
|
317
|
+
&:after {
|
|
318
|
+
left: auto;
|
|
319
|
+
right: 0;
|
|
320
|
+
-moz-border-radius: #{$height / 2} #{$height / 2} #{$height / 2} 0;
|
|
321
|
+
border-radius: #{$height / 2} #{$height / 2} #{$height / 2} 0;
|
|
322
|
+
-webkit-transform:rotate(45deg);
|
|
323
|
+
-moz-transform:rotate(45deg);
|
|
324
|
+
-ms-transform:rotate(45deg);
|
|
325
|
+
-o-transform:rotate(45deg);
|
|
326
|
+
transform:rotate(45deg);
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
|