rapido-css 0.1.1 → 0.1.2
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/stylesheets/_default-styles.scss +352 -352
- data/stylesheets/_functions.scss +77 -50
- data/stylesheets/_susy.scss +15 -12
- data/stylesheets/components/_alerts.scss +21 -21
- data/stylesheets/components/_breadcrumbs.scss +15 -15
- data/stylesheets/components/_button-groups.scss +51 -53
- data/stylesheets/components/_buttons.scss +94 -97
- data/stylesheets/components/_captions.scss +45 -45
- data/stylesheets/components/_close.scss +27 -27
- data/stylesheets/components/_dropdowns.scss +121 -121
- data/stylesheets/components/_forms.scss +246 -248
- data/stylesheets/components/_grids.scss +35 -35
- data/stylesheets/components/_labels.scss +38 -38
- data/stylesheets/components/_modals.scss +242 -248
- data/stylesheets/components/_navs.scss +86 -91
- data/stylesheets/components/_pager.scss +53 -53
- data/stylesheets/components/_pagination.scss +83 -85
- data/stylesheets/components/_responsive-navs.scss +84 -84
- data/stylesheets/components/_sliders.scss +54 -58
- data/stylesheets/components/_tables.scss +69 -74
- data/stylesheets/components/_tabs.scss +54 -54
- data/stylesheets/components/_type.scss +134 -140
- data/stylesheets/{_rapido.scss → rapido.scss} +0 -8
- data/stylesheets/settings/_base.scss +23 -23
- data/stylesheets/settings/_colors.scss +13 -13
- data/stylesheets/settings/_components.scss +43 -42
- data/stylesheets/settings/_dimensions.scss +91 -91
- data/stylesheets/settings/_effects.scss +28 -14
- data/stylesheets/susy/{_susy_background.scss → _background.scss} +0 -0
- data/stylesheets/susy/{_susy_functions.scss → _functions.scss} +0 -0
- data/stylesheets/susy/{_susy_grid.scss → _grid.scss} +0 -0
- data/stylesheets/susy/{_susy_isolation.scss → _isolation.scss} +1 -0
- data/stylesheets/susy/{_susy_margin.scss → _margin.scss} +0 -0
- data/stylesheets/susy/{_susy_media.scss → _media.scss} +0 -0
- data/stylesheets/susy/{_susy_padding.scss → _padding.scss} +0 -0
- data/stylesheets/susy/{_susy_settings.scss → _settings.scss} +0 -0
- data/stylesheets/susy/{_susy_support.scss → _support.scss} +0 -0
- data/stylesheets/susy/{_susy_units.scss → _units.scss} +0 -0
- data/stylesheets/utilities/_animations.scss +638 -597
- data/stylesheets/utilities/_debug.scss +43 -43
- data/stylesheets/utilities/_helper-classes.scss +70 -54
- data/stylesheets/utilities/_icon-fonts.scss +90 -90
- data/stylesheets/utilities/_mixins.scss +390 -357
- metadata +20 -17
- checksums.yaml +0 -15
- data/stylesheets/config.rb +0 -8
@@ -1,4 +1,4 @@
|
|
1
|
-
/*
|
1
|
+
/*
|
2
2
|
|
3
3
|
Mixins
|
4
4
|
|
@@ -6,141 +6,141 @@ Some of them are from Bootstrap, others are custom.
|
|
6
6
|
|
7
7
|
Styleguide 23
|
8
8
|
|
9
|
-
|
9
|
+
*/
|
10
10
|
|
11
|
-
/*
|
11
|
+
/*
|
12
12
|
|
13
13
|
Create a rectangle
|
14
14
|
|
15
|
-
|
15
|
+
@include size($height, $width);
|
16
16
|
|
17
17
|
* `$height`: Height of the rectangle
|
18
18
|
* `$width`: Width of the rectangle
|
19
19
|
|
20
20
|
Styleguide 23.1
|
21
21
|
|
22
|
-
|
22
|
+
*/
|
23
23
|
|
24
24
|
@mixin size($height, $width) {
|
25
|
-
|
26
|
-
|
25
|
+
width: $width;
|
26
|
+
height: $height;
|
27
27
|
}
|
28
28
|
|
29
|
-
/*
|
29
|
+
/*
|
30
30
|
|
31
31
|
Create a square
|
32
32
|
|
33
|
-
|
33
|
+
@include square($size);
|
34
34
|
|
35
35
|
* `$size`: Dimension used both for width and height
|
36
36
|
|
37
37
|
Styleguide 23.2
|
38
38
|
|
39
|
-
|
39
|
+
*/
|
40
40
|
|
41
41
|
@mixin square($size) {
|
42
|
-
|
42
|
+
@include size($size, $size);
|
43
43
|
}
|
44
44
|
|
45
|
-
/*
|
45
|
+
/*
|
46
46
|
|
47
47
|
Position an element
|
48
48
|
|
49
|
-
|
49
|
+
@include position ($position, $coordinates);
|
50
50
|
|
51
51
|
* `$position`: fixed, relative, absolute
|
52
52
|
* `$coordinates`: 0 = null, 0px or more is a value used in the css.
|
53
53
|
|
54
54
|
Example:
|
55
55
|
|
56
|
-
|
56
|
+
@include position (absolute, 0 0px 0px 0);
|
57
57
|
|
58
58
|
Become:
|
59
59
|
|
60
|
-
|
61
|
-
|
62
|
-
|
60
|
+
position: absolute;
|
61
|
+
right: 0px;
|
62
|
+
bottom: 0px;
|
63
63
|
|
64
64
|
Styleguide 23.3
|
65
65
|
|
66
|
-
|
66
|
+
*/
|
67
67
|
|
68
68
|
@mixin position ($position: relative, $coordinates: 0 0 0 0) {
|
69
69
|
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
70
|
+
@if type-of($position) == list {
|
71
|
+
$coordinates: $position;
|
72
|
+
$position: relative;
|
73
|
+
}
|
74
|
+
|
75
|
+
$top: nth($coordinates, 1);
|
76
|
+
$right: nth($coordinates, 2);
|
77
|
+
$bottom: nth($coordinates, 3);
|
78
|
+
$left: nth($coordinates, 4);
|
79
|
+
|
80
|
+
position: $position;
|
81
|
+
|
82
|
+
@if $top == auto {
|
83
|
+
top: $top;
|
84
|
+
}
|
85
|
+
@else if not(unitless($top)) {
|
86
|
+
top: $top;
|
87
|
+
}
|
88
|
+
|
89
|
+
@if $right == auto {
|
90
|
+
right: $right;
|
91
|
+
}
|
92
|
+
@else if not(unitless($right)) {
|
93
|
+
right: $right;
|
94
|
+
}
|
95
|
+
|
96
|
+
@if $bottom == auto {
|
97
|
+
bottom: $bottom;
|
98
|
+
}
|
99
|
+
@else if not(unitless($bottom)) {
|
100
|
+
bottom: $bottom;
|
101
|
+
}
|
102
|
+
|
103
|
+
@if $left == auto {
|
104
|
+
left: $left;
|
105
|
+
}
|
106
|
+
@else if not(unitless($left)) {
|
107
|
+
left: $left;
|
108
|
+
}
|
109
109
|
}
|
110
110
|
|
111
|
-
/*
|
111
|
+
/*
|
112
112
|
|
113
113
|
Center-block
|
114
114
|
|
115
|
-
|
115
|
+
@include center-block();
|
116
116
|
|
117
117
|
Become:
|
118
118
|
|
119
|
-
|
120
|
-
|
121
|
-
|
119
|
+
display: block;
|
120
|
+
margin-left: auto;
|
121
|
+
margin-right: auto;
|
122
122
|
|
123
123
|
Styleguide 23.4
|
124
124
|
|
125
|
-
|
125
|
+
*/
|
126
126
|
|
127
127
|
@mixin center-block() {
|
128
|
-
|
129
|
-
|
130
|
-
|
128
|
+
display: block;
|
129
|
+
margin-left: auto;
|
130
|
+
margin-right: auto;
|
131
131
|
}
|
132
132
|
|
133
|
-
/*
|
133
|
+
/*
|
134
134
|
|
135
135
|
Center
|
136
136
|
|
137
137
|
Vertical and horizontal centering with absolute positioning, using the posiztion absolute and negative translate.
|
138
138
|
|
139
|
-
|
139
|
+
@include center();
|
140
140
|
|
141
141
|
Styleguide 23.5
|
142
142
|
|
143
|
-
|
143
|
+
*/
|
144
144
|
|
145
145
|
@mixin center() {
|
146
146
|
@include position(absolute, 50% 0 0 50%);
|
@@ -148,36 +148,42 @@ Styleguide 23.5
|
|
148
148
|
}
|
149
149
|
|
150
150
|
|
151
|
-
/*
|
151
|
+
/*
|
152
152
|
|
153
153
|
Extend
|
154
154
|
|
155
|
-
|
155
|
+
Abbrieviantion for extendingt normal class (.) or a placeholder class (%) when using SASS syntax.
|
156
156
|
|
157
|
-
|
157
|
+
+e($name, $silent);
|
158
|
+
|
159
|
+
* `$name`: Name of the class
|
160
|
+
* `$silent`: Set to true if it's a placeholder class
|
158
161
|
|
159
162
|
Styleguide 23.6
|
160
163
|
|
161
|
-
|
164
|
+
*/
|
165
|
+
|
166
|
+
@mixin e($name, $silent: false) {
|
167
|
+
@if ($silent == true) {
|
168
|
+
@extend %#{$name};
|
169
|
+
} @else {
|
170
|
+
@extend .#{$name};
|
171
|
+
}
|
162
172
|
|
163
|
-
@mixin e($class) {
|
164
|
-
@if $class {
|
165
|
-
@extend .#{$class};
|
166
|
-
}
|
167
173
|
}
|
168
174
|
|
169
175
|
|
170
|
-
/*
|
176
|
+
/*
|
171
177
|
|
172
178
|
Placeholder
|
173
179
|
|
174
|
-
|
180
|
+
@include placeholder($color);
|
175
181
|
|
176
182
|
* `$color`: Set color of the placeholder of an input.
|
177
183
|
|
178
184
|
Styleguide 23.7
|
179
185
|
|
180
|
-
|
186
|
+
*/
|
181
187
|
|
182
188
|
@mixin placeholder($color: $gray) {
|
183
189
|
|
@@ -197,39 +203,39 @@ Styleguide 23.7
|
|
197
203
|
}
|
198
204
|
|
199
205
|
|
200
|
-
/*
|
206
|
+
/*
|
201
207
|
|
202
208
|
Text overflow
|
203
209
|
|
204
210
|
Wrap text with ellipsis (modern browsers only).
|
205
211
|
|
206
|
-
|
212
|
+
@include text-overflow();
|
207
213
|
|
208
214
|
Become
|
209
215
|
|
210
|
-
|
211
|
-
|
212
|
-
|
216
|
+
overflow: hidden;
|
217
|
+
text-overflow: ellipsis;
|
218
|
+
white-space: nowrap;
|
213
219
|
|
214
220
|
Styleguide 23.8
|
215
221
|
|
216
|
-
|
222
|
+
*/
|
217
223
|
|
218
224
|
|
219
225
|
@mixin text-overflow() {
|
220
|
-
|
221
|
-
|
222
|
-
|
226
|
+
overflow: hidden;
|
227
|
+
text-overflow: ellipsis;
|
228
|
+
white-space: nowrap;
|
223
229
|
}
|
224
230
|
|
225
231
|
|
226
|
-
/*
|
232
|
+
/*
|
227
233
|
|
228
234
|
Triangle
|
229
235
|
|
230
236
|
Create a css-only triangle.
|
231
237
|
|
232
|
-
|
238
|
+
@include triangle($size, $color, $direction);
|
233
239
|
|
234
240
|
* `$size`: Width of the triangle
|
235
241
|
* `$color`: Color of the triangle
|
@@ -238,56 +244,56 @@ Create a css-only triangle.
|
|
238
244
|
Styleguide 23.9
|
239
245
|
|
240
246
|
|
241
|
-
|
247
|
+
*/
|
242
248
|
|
243
249
|
@mixin triangle ($size, $color, $direction) {
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
250
|
+
@include square(0);
|
251
|
+
|
252
|
+
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
253
|
+
border-color: transparent;
|
254
|
+
border-style: solid;
|
255
|
+
border-width: $size / 2;
|
256
|
+
|
257
|
+
@if $direction == up {
|
258
|
+
border-bottom-color: $color;
|
259
|
+
} @else if $direction == right {
|
260
|
+
border-left-color: $color;
|
261
|
+
} @else if $direction == down {
|
262
|
+
border-top-color: $color;
|
263
|
+
} @else if $direction == left {
|
264
|
+
border-right-color: $color;
|
265
|
+
}
|
266
|
+
}
|
267
|
+
|
268
|
+
@else if ($direction == up-right) or ($direction == up-left) {
|
269
|
+
border-top: $size solid $color;
|
270
|
+
|
271
|
+
@if $direction == up-right {
|
272
|
+
border-left: $size solid transparent;
|
273
|
+
} @else if $direction == up-left {
|
274
|
+
border-right: $size solid transparent;
|
275
|
+
}
|
276
|
+
}
|
277
|
+
|
278
|
+
@else if ($direction == down-right) or ($direction == down-left) {
|
279
|
+
border-bottom: $size solid $color;
|
280
|
+
|
281
|
+
@if $direction == down-right {
|
282
|
+
border-left: $size solid transparent;
|
283
|
+
} @else if $direction == down-left {
|
284
|
+
border-right: $size solid transparent;
|
285
|
+
}
|
286
|
+
}
|
281
287
|
}
|
282
288
|
|
283
289
|
|
284
|
-
/*
|
290
|
+
/*
|
285
291
|
|
286
292
|
Triangle with Borders
|
287
293
|
|
288
294
|
Add a css-only triangle width side borders, usefull for tooltips. For now only side triangles with border are suported.
|
289
295
|
|
290
|
-
|
296
|
+
@include triangle_border($size, $color, $border-color, $border-width, $direction);
|
291
297
|
|
292
298
|
* `$size`: Same as `square`
|
293
299
|
* `$color`: Color of the triangle
|
@@ -297,48 +303,48 @@ Add a css-only triangle width side borders, usefull for tooltips. For now only s
|
|
297
303
|
|
298
304
|
Styleguide 23.10
|
299
305
|
|
300
|
-
|
306
|
+
*/
|
301
307
|
|
302
308
|
@mixin triangle_border($size, $color, $border-color, $border-width, $direction) {
|
303
309
|
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
310
|
+
$border-width-fix: '';
|
311
|
+
|
312
|
+
@if $border-width == 1px {
|
313
|
+
$border-width-fix: $border-width * 4;
|
314
|
+
} @else {
|
315
|
+
$border-width-fix: $border-width * 2;
|
316
|
+
}
|
317
|
+
|
318
|
+
$bg-size: $size + $border-width-fix;
|
319
|
+
|
320
|
+
&:before, &:after {
|
321
|
+
content: "";
|
322
|
+
display: block;
|
323
|
+
position: absolute;
|
324
|
+
top: 50%;
|
325
|
+
|
326
|
+
@if $direction == 'right' { left: -($border-width); }
|
327
|
+
@if $direction == 'left' { right: -($border-width); }
|
328
|
+
}
|
329
|
+
|
330
|
+
&:before {
|
331
|
+
@include triangle($size, $color, $direction);
|
332
|
+
margin-top: -($size / 2);
|
333
|
+
z-index: 2;
|
334
|
+
}
|
335
|
+
|
336
|
+
&:after {
|
337
|
+
@include triangle($bg-size, $border-color, $direction);
|
338
|
+
margin-top: -($bg-size / 2);
|
339
|
+
zoom: 1;
|
340
|
+
}
|
335
341
|
}
|
336
342
|
|
337
|
-
/*
|
343
|
+
/*
|
338
344
|
|
339
345
|
Text inset shadow
|
340
346
|
|
341
|
-
|
347
|
+
@include text-inset-shadow($bg, $textcolor, $contrast);
|
342
348
|
|
343
349
|
* `$bg`: Background color of the text
|
344
350
|
* `$textcolor`: Color of the text
|
@@ -346,22 +352,22 @@ Text inset shadow
|
|
346
352
|
|
347
353
|
Styleguide 23.11
|
348
354
|
|
349
|
-
|
355
|
+
*/
|
350
356
|
|
351
357
|
@mixin text-inset-shadow($bg: #fff, $textcolor: #054d4a, $contrast: #f43059) {
|
352
|
-
|
358
|
+
$shadow: darken($textcolor, 30%);
|
353
359
|
|
354
|
-
|
355
|
-
|
360
|
+
color: rgba($textcolor, 0.8);
|
361
|
+
text-shadow: 1px 5px 7px $bg, 0 0 0 rgba($shadow,.8);
|
356
362
|
}
|
357
363
|
|
358
|
-
/*
|
364
|
+
/*
|
359
365
|
|
360
366
|
Alpha Color
|
361
367
|
|
362
368
|
Alpha color with ie full opacity fallback (for IE)
|
363
369
|
|
364
|
-
|
370
|
+
@include alpha-color($color, $alpha, $attribute);
|
365
371
|
|
366
372
|
* `$color`: Base HEX color
|
367
373
|
* `$alpha`: Opacity
|
@@ -369,90 +375,90 @@ Alpha color with ie full opacity fallback (for IE)
|
|
369
375
|
|
370
376
|
Example
|
371
377
|
|
372
|
-
|
378
|
+
@include alpha-color(#000, .5, color);
|
373
379
|
|
374
380
|
Become
|
375
381
|
|
376
|
-
|
377
|
-
|
382
|
+
color: #000;
|
383
|
+
color: rgba(0,0,0,.5);
|
378
384
|
|
379
385
|
Styleguide 23.12
|
380
386
|
|
381
|
-
|
387
|
+
*/
|
382
388
|
|
383
389
|
@mixin alpha-color($color: #fff, $alpha: .5, $attribute: background) {
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
390
|
+
@if $attribute == color {
|
391
|
+
color: $color;
|
392
|
+
color: rgba($color, $alpha);
|
393
|
+
} @else {
|
394
|
+
#{$attribute}: $color;
|
395
|
+
#{$attribute}: rgba($color, $alpha);
|
396
|
+
}
|
391
397
|
}
|
392
398
|
|
393
|
-
/*
|
399
|
+
/*
|
394
400
|
|
395
401
|
Keyframes support
|
396
402
|
|
397
403
|
Used for creating custom animations.
|
398
404
|
|
399
|
-
|
405
|
+
@include keyframes($name);
|
400
406
|
|
401
407
|
* `$name`: Name of the keyframe
|
402
408
|
|
403
409
|
Styleguide 23.13
|
404
410
|
|
405
|
-
|
411
|
+
*/
|
406
412
|
|
407
413
|
@mixin keyframes($name) {
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
414
|
+
@-webkit-keyframes #{$name} {
|
415
|
+
@content;
|
416
|
+
}
|
417
|
+
|
418
|
+
@-moz-keyframes #{$name} {
|
419
|
+
@content;
|
420
|
+
}
|
421
|
+
|
422
|
+
@-o-keyframes #{$name} {
|
423
|
+
@content;
|
424
|
+
}
|
425
|
+
@keyframes #{$name} {
|
426
|
+
@content;
|
427
|
+
}
|
422
428
|
}
|
423
429
|
|
424
|
-
/*
|
430
|
+
/*
|
425
431
|
|
426
432
|
Nav divider
|
427
433
|
|
428
|
-
|
434
|
+
@include nav-divider($top $bottom);
|
429
435
|
|
430
436
|
* `$top`: Color of the top border
|
431
437
|
* `$bottom`: Color of the bottom border
|
432
438
|
|
433
439
|
Styleguide 23.14
|
434
440
|
|
435
|
-
|
441
|
+
*/
|
436
442
|
|
437
443
|
@mixin nav-divider($top: #e5e5e5, $bottom: false) {
|
438
|
-
|
444
|
+
*width: 100%;
|
439
445
|
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
446
|
+
@if $bottom {
|
447
|
+
height: 2px;
|
448
|
+
} @else {
|
449
|
+
height: 1px;
|
450
|
+
}
|
445
451
|
|
446
|
-
|
447
|
-
|
448
|
-
|
452
|
+
overflow: hidden;
|
453
|
+
background-color: $top;
|
454
|
+
@if $bottom { border-bottom: 1px solid $bottom; }
|
449
455
|
}
|
450
456
|
|
451
|
-
/*
|
457
|
+
/*
|
452
458
|
|
453
459
|
Comicbook Shadow
|
454
460
|
|
455
|
-
|
461
|
+
@include shadow-comicbook($padding, $color, $size, $distance);
|
456
462
|
|
457
463
|
* `$padding`: Border color
|
458
464
|
* `$color`: Color of the shadow
|
@@ -461,50 +467,50 @@ Comicbook Shadow
|
|
461
467
|
|
462
468
|
Styleguide 23.15
|
463
469
|
|
464
|
-
|
470
|
+
*/
|
465
471
|
|
466
472
|
@mixin shadow-comicbook($padding: 5px, $color: #bbb, $size: 15px, $distance: 10px) {
|
467
473
|
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
474
|
+
$lightColor: lighten($color, 8);
|
475
|
+
$degree: $size/1px;
|
476
|
+
|
477
|
+
@include box-shadow(0 1px 3px $color);
|
478
|
+
border:5px solid #fff;
|
479
|
+
display: inline-block;
|
480
|
+
line-height: 0;
|
481
|
+
position: relative;
|
482
|
+
|
483
|
+
&:before,
|
484
|
+
&:after {
|
485
|
+
// border: 0;
|
486
|
+
background-color: $lightColor;
|
487
|
+
content: '';
|
488
|
+
z-index: -1;
|
489
|
+
position: absolute;
|
490
|
+
left: $distance;
|
491
|
+
bottom: $distance;
|
492
|
+
width: 70%;
|
493
|
+
height: 55%;
|
494
|
+
@include box-shadow(0 $size $size+1 $lightColor);
|
495
|
+
@include transform(skew(-15deg) rotate(-6deg));
|
496
|
+
}
|
497
|
+
|
498
|
+
&:after {
|
499
|
+
left: auto;
|
500
|
+
right: $distance+1;
|
501
|
+
@include transform(skew(15deg) rotate(6deg));
|
502
|
+
|
503
|
+
}
|
498
504
|
}
|
499
505
|
|
500
506
|
|
501
|
-
/*
|
507
|
+
/*
|
502
508
|
|
503
509
|
Box Inset Shadow
|
504
510
|
|
505
511
|
Usefull for adding inset shadows to sidebars or large block where the shadow is only on one side and full width/height.
|
506
512
|
|
507
|
-
|
513
|
+
@include inset-shadow($position, $size, $color);
|
508
514
|
|
509
515
|
* `$position`: top, right, bottom, left
|
510
516
|
* `$size`: Size of the shadow
|
@@ -512,45 +518,45 @@ Usefull for adding inset shadows to sidebars or large block where the shadow is
|
|
512
518
|
|
513
519
|
Styleguide 23.16
|
514
520
|
|
515
|
-
|
521
|
+
*/
|
516
522
|
|
517
523
|
@mixin inset-shadow($position: right, $size: 10px, $color: #000) {
|
518
524
|
|
519
|
-
|
525
|
+
$size: $size*2;
|
520
526
|
|
521
|
-
|
522
|
-
|
523
|
-
|
527
|
+
@if $position == 'top' {
|
528
|
+
@include box-shadow(inset 0 $size $size $size $color)
|
529
|
+
}
|
524
530
|
|
525
|
-
|
526
|
-
|
527
|
-
|
531
|
+
@if $position == 'right' {
|
532
|
+
@include box-shadow(inset neg($size) 0 $size neg($size) $color)
|
533
|
+
}
|
528
534
|
|
529
|
-
|
530
|
-
|
531
|
-
|
535
|
+
@if $position == 'bottom' {
|
536
|
+
@include box-shadow(inset 0 neg($size) $size neg($size) $color)
|
537
|
+
}
|
532
538
|
|
533
|
-
|
534
|
-
|
535
|
-
|
539
|
+
@if $position == 'left' {
|
540
|
+
@include box-shadow(inset $size 0 $size $size $color)
|
541
|
+
}
|
536
542
|
|
537
543
|
|
538
544
|
}
|
539
545
|
|
540
|
-
/*
|
546
|
+
/*
|
541
547
|
|
542
548
|
Side Shadow
|
543
549
|
|
544
550
|
Add Side Shadows to multi-line padded text for consistend side padding (Fabien Doiron's box-shadow Method).
|
545
551
|
|
546
|
-
|
552
|
+
@include side-shadow($size, $color);
|
547
553
|
|
548
554
|
* `$size`: Size of the shadow
|
549
555
|
* `$color`: Color of the shadow
|
550
556
|
|
551
557
|
Styleguide 23.17
|
552
558
|
|
553
|
-
|
559
|
+
*/
|
554
560
|
|
555
561
|
@mixin side-shadow($size: 10px, $color: #000) {
|
556
562
|
@include box-shadow($size 0 0 $color, neg($size) 0 0 $color);
|
@@ -558,13 +564,13 @@ Styleguide 23.17
|
|
558
564
|
margin-right: $size;
|
559
565
|
}
|
560
566
|
|
561
|
-
/*
|
567
|
+
/*
|
562
568
|
|
563
569
|
Icon Fonts
|
564
570
|
|
565
571
|
Use the unicode character from an icon font to insert it wherever you want.
|
566
572
|
|
567
|
-
|
573
|
+
@include icon-font($char, $font);
|
568
574
|
|
569
575
|
* `$char`: Unicode of the character †
|
570
576
|
* `$font`: What font to use ‡
|
@@ -576,15 +582,15 @@ Use the unicode character from an icon font to insert it wherever you want.
|
|
576
582
|
|
577
583
|
Styleguide 23.18
|
578
584
|
|
579
|
-
|
585
|
+
*/
|
580
586
|
|
581
587
|
@mixin icon-font($char: '\f013', $font: 'FontAwesome') {
|
582
|
-
|
583
|
-
|
584
|
-
|
588
|
+
display: inline-block;
|
589
|
+
font-family: $font;
|
590
|
+
content: "#{$char}";
|
585
591
|
}
|
586
592
|
|
587
|
-
/*
|
593
|
+
/*
|
588
594
|
|
589
595
|
Media Queries
|
590
596
|
|
@@ -595,66 +601,66 @@ Add media queries to css width simple naming convention.
|
|
595
601
|
You can set the start/and with of each step from usins the variables `$lap-start`, `$desk-start`, `$desk-end`.
|
596
602
|
|
597
603
|
* `$media`:
|
598
|
-
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
604
|
+
* `palm`: Only Palm
|
605
|
+
* `lap`: Only Lap
|
606
|
+
* `lap-and-up`: Lap + Desktop
|
607
|
+
* `portable`: Lap + Palm
|
608
|
+
* `desk`: Only Desktop
|
603
609
|
|
604
610
|
Styleguide 23.19
|
605
611
|
|
606
|
-
|
612
|
+
*/
|
607
613
|
|
608
614
|
@mixin media($media-query:null){
|
609
|
-
|
610
|
-
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
|
625
|
-
|
626
|
-
|
627
|
-
|
628
|
-
|
629
|
-
|
630
|
-
|
631
|
-
|
632
|
-
|
633
|
-
|
634
|
-
|
635
|
-
|
636
|
-
|
637
|
-
|
638
|
-
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
|
643
|
-
|
644
|
-
|
645
|
-
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
|
650
|
-
|
651
|
-
|
652
|
-
|
653
|
-
|
615
|
+
@if $media-query {
|
616
|
+
|
617
|
+
@if $media-query == palm or $media-query == lap or $media-query == lap-and-up or $media-query == portable or $media-query == desk {
|
618
|
+
|
619
|
+
@if $media-query == palm {
|
620
|
+
@media only screen and (max-width:$palm-end) {
|
621
|
+
@content;
|
622
|
+
}
|
623
|
+
}
|
624
|
+
|
625
|
+
@elseif $media-query == lap {
|
626
|
+
@media only screen and (min-width:$lap-start) and (max-width:$lap-end) {
|
627
|
+
@content;
|
628
|
+
}
|
629
|
+
}
|
630
|
+
|
631
|
+
@elseif $media-query == lap-and-up {
|
632
|
+
@media only screen and (min-width:$lap-start) {
|
633
|
+
@content;
|
634
|
+
}
|
635
|
+
}
|
636
|
+
|
637
|
+
@elseif $media-query == portable {
|
638
|
+
@media only screen and (max-width:$lap-end) {
|
639
|
+
@content;
|
640
|
+
}
|
641
|
+
}
|
642
|
+
|
643
|
+
@elseif $media-query == desk {
|
644
|
+
@media only screen and (min-width:$desk-start) {
|
645
|
+
@content;
|
646
|
+
}
|
647
|
+
}
|
648
|
+
}
|
649
|
+
|
650
|
+
@else {
|
651
|
+
@media only screen and ($media-query) {
|
652
|
+
@content;
|
653
|
+
}
|
654
|
+
}
|
655
|
+
}
|
656
|
+
|
657
|
+
@else {
|
658
|
+
@content;
|
659
|
+
}
|
654
660
|
|
655
661
|
}
|
656
662
|
|
657
|
-
/*
|
663
|
+
/*
|
658
664
|
|
659
665
|
Sprites
|
660
666
|
|
@@ -664,36 +670,36 @@ for more info see the full documentation from the link.
|
|
664
670
|
First you need to add to your scss file an import to import all of the seperate icons that will be compiled in a single image.
|
665
671
|
For example if you have a folder named `icons` inside the main `images` folder add this line:
|
666
672
|
|
667
|
-
|
673
|
+
@import 'icons/ *.png';
|
668
674
|
|
669
675
|
Then add you have two options:
|
670
676
|
|
671
677
|
Add the sprite in the html with (where `icon_name` is the filename of the icon). .s` is the standard class the must be used with all sprites images.
|
672
678
|
|
673
|
-
|
679
|
+
<a href="#"><i class="s icons-icon_name"></i> Link</a>
|
674
680
|
|
675
681
|
Or via `@include` from the scss:
|
676
682
|
|
677
|
-
|
678
|
-
|
679
|
-
|
683
|
+
a:before {
|
684
|
+
@include sprite(icon_name)
|
685
|
+
}
|
680
686
|
|
681
687
|
The result is the same.
|
682
688
|
|
683
689
|
Styleguide 23.20
|
684
690
|
|
685
|
-
|
691
|
+
*/
|
686
692
|
|
687
693
|
@mixin s($name) {
|
688
|
-
|
689
|
-
|
694
|
+
@extend .s;
|
695
|
+
@extend .s-#{$name};
|
690
696
|
}
|
691
697
|
|
692
|
-
/*
|
698
|
+
/*
|
693
699
|
|
694
700
|
Responsive grid
|
695
701
|
|
696
|
-
|
702
|
+
@include columns ($cols, $cols-container, $omega, $nth-omega, $remove-omega, $from, $media, $highlight-omega);
|
697
703
|
|
698
704
|
* `$cols`: How many columns
|
699
705
|
* `$cols-container`: Columns of the container (default: $total-columns)
|
@@ -706,31 +712,58 @@ Responsive grid
|
|
706
712
|
|
707
713
|
Styleguide 23.21
|
708
714
|
|
709
|
-
|
715
|
+
*/
|
710
716
|
|
711
717
|
@mixin columns (
|
712
|
-
|
713
|
-
|
714
|
-
|
715
|
-
|
716
|
-
|
717
|
-
|
718
|
-
|
719
|
-
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
732
|
-
|
733
|
-
|
734
|
-
|
735
|
-
|
718
|
+
$cols,
|
719
|
+
$cols-container: $total-columns,
|
720
|
+
$omega: false,
|
721
|
+
$nth-omega: false,
|
722
|
+
$remove-omega: false,
|
723
|
+
$from: left,
|
724
|
+
$media: null,
|
725
|
+
$highlight-omega: false
|
726
|
+
) {
|
727
|
+
|
728
|
+
@include media($media) {
|
729
|
+
$direction: left;
|
730
|
+
|
731
|
+
@if $from != left { $direction: right; }
|
732
|
+
|
733
|
+
@include span-columns($cols, $cols-container, $from: $direction);
|
734
|
+
@if $omega { @include omega($from: $direction); }
|
735
|
+
@if $nth-omega { @include nth-omega($nth-omega, $from: $direction); }
|
736
|
+
@if $remove-omega { @include remove-omega; }
|
737
|
+
@if $highlight-omega {
|
738
|
+
@if $omega { background: blue; }
|
739
|
+
@if $nth-omega { &:nth-child(#{$nth-omega}) {background: blue;} }
|
740
|
+
}
|
741
|
+
}
|
742
|
+
}
|
743
|
+
|
744
|
+
/*
|
745
|
+
|
746
|
+
Animations
|
747
|
+
|
748
|
+
@include animate($name, $duration, $delay, $function, $mode);
|
749
|
+
|
750
|
+
* `$name`: Name of the animations to use, it must be enabled first. For more information see the Animations section.
|
751
|
+
* `$duration`: Duration of the animation
|
752
|
+
* `$delay`: Delay before the animation
|
753
|
+
* `$function`: Easing, see 20.2 for a list of all easing options available
|
754
|
+
* `$mode`: animation-fill-mode (http://mzl.la/1g6ixCc), default to *both*
|
755
|
+
|
756
|
+
Styleguide 23.22
|
757
|
+
|
758
|
+
*/
|
759
|
+
|
760
|
+
@mixin animate(
|
761
|
+
$name,
|
762
|
+
$duration: $animations-duration,
|
763
|
+
$delay: $animations-delay,
|
764
|
+
$function: $animations-function,
|
765
|
+
$mode: $animations-mode
|
766
|
+
) {
|
767
|
+
@include experimental(animation, $name $duration $delay $function $mode);
|
736
768
|
}
|
769
|
+
|