rapido-css 0.1.4 → 0.1.5
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/README.md +4 -22
- data/stylesheets/_functions.scss +6 -6
- data/stylesheets/components/_captions.scss +7 -20
- data/stylesheets/components/_dropdowns.scss +8 -3
- data/stylesheets/components/_forms.scss +92 -28
- data/stylesheets/components/_off-canvas.scss +58 -47
- data/stylesheets/components/_pagination.scss +3 -2
- data/stylesheets/components/_tables.scss +1 -1
- data/stylesheets/components/_tabs.scss +1 -1
- data/stylesheets/components/_toggle.scss +43 -0
- data/stylesheets/components/_type.scss +19 -8
- data/stylesheets/rapido.scss +14 -17
- data/stylesheets/settings/_base.scss +6 -6
- data/stylesheets/settings/_colors.scss +3 -2
- data/stylesheets/settings/_components.scss +3 -3
- data/stylesheets/settings/_dimensions.scss +10 -10
- data/stylesheets/settings/_effects.scss +1 -1
- data/stylesheets/utilities/_animations.scss +117 -91
- data/stylesheets/utilities/_helper-classes.scss +7 -7
- data/stylesheets/utilities/_mixins.scss +106 -36
- metadata +5 -5
@@ -2,9 +2,10 @@
|
|
2
2
|
|
3
3
|
Mixins
|
4
4
|
|
5
|
-
Some of them are from Bootstrap, others are custom.
|
5
|
+
Some of them are from Bootstrap, others are custom. The required arguments are
|
6
|
+
marked in bold.
|
6
7
|
|
7
|
-
Styleguide
|
8
|
+
Styleguide 24
|
8
9
|
|
9
10
|
*/
|
10
11
|
|
@@ -17,7 +18,7 @@ Create a rectangle
|
|
17
18
|
* `$height`: Height of the rectangle
|
18
19
|
* `$width`: Width of the rectangle
|
19
20
|
|
20
|
-
Styleguide
|
21
|
+
Styleguide 24.1
|
21
22
|
|
22
23
|
*/
|
23
24
|
|
@@ -34,7 +35,7 @@ Create a square
|
|
34
35
|
|
35
36
|
* `$size`: Dimension used both for width and height
|
36
37
|
|
37
|
-
Styleguide
|
38
|
+
Styleguide 24.2
|
38
39
|
|
39
40
|
*/
|
40
41
|
|
@@ -61,7 +62,7 @@ Become:
|
|
61
62
|
right: 0px;
|
62
63
|
bottom: 0px;
|
63
64
|
|
64
|
-
Styleguide
|
65
|
+
Styleguide 24.3
|
65
66
|
|
66
67
|
*/
|
67
68
|
|
@@ -122,7 +123,7 @@ Become:
|
|
122
123
|
margin-left: auto;
|
123
124
|
margin-right: auto;
|
124
125
|
|
125
|
-
Styleguide
|
126
|
+
Styleguide 24.4
|
126
127
|
|
127
128
|
*/
|
128
129
|
|
@@ -140,7 +141,7 @@ Vertical and horizontal centering with absolute positioning, using the position
|
|
140
141
|
|
141
142
|
@include center();
|
142
143
|
|
143
|
-
Styleguide
|
144
|
+
Styleguide 24.5
|
144
145
|
|
145
146
|
*/
|
146
147
|
|
@@ -161,7 +162,7 @@ Abbrieviantion for extendingt normal class (.) or a placeholder class (%) when u
|
|
161
162
|
* `$name`: Name of the class
|
162
163
|
* `$silent`: Set to true if it's a placeholder class
|
163
164
|
|
164
|
-
Styleguide
|
165
|
+
Styleguide 24.6
|
165
166
|
|
166
167
|
*/
|
167
168
|
|
@@ -183,24 +184,31 @@ Placeholder
|
|
183
184
|
|
184
185
|
* `$color`: Set color of the placeholder of an input.
|
185
186
|
|
186
|
-
Styleguide
|
187
|
+
Styleguide 24.7
|
187
188
|
|
188
189
|
*/
|
189
190
|
|
190
191
|
@mixin placeholder($color: $gray) {
|
191
192
|
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
193
|
+
::-webkit-input-placeholder {
|
194
|
+
color: $color;
|
195
|
+
}
|
196
|
+
|
197
|
+
:-moz-placeholder {
|
198
|
+
color: $color;
|
199
|
+
}
|
200
|
+
|
201
|
+
::-moz-placeholder {
|
202
|
+
color: $color;
|
203
|
+
}
|
204
|
+
|
205
|
+
:-ms-input-placeholder {
|
206
|
+
color: $color;
|
207
|
+
}
|
208
|
+
|
209
|
+
::placeholder {
|
210
|
+
color: $color;
|
211
|
+
}
|
204
212
|
|
205
213
|
}
|
206
214
|
|
@@ -219,7 +227,7 @@ Become
|
|
219
227
|
text-overflow: ellipsis;
|
220
228
|
white-space: nowrap;
|
221
229
|
|
222
|
-
Styleguide
|
230
|
+
Styleguide 24.8
|
223
231
|
|
224
232
|
*/
|
225
233
|
|
@@ -243,7 +251,7 @@ Create a css-only triangle.
|
|
243
251
|
* `$color`: Color of the triangle
|
244
252
|
* `$direction`: There are available up, up-right, right, down-right, down, down-left, left, up-left
|
245
253
|
|
246
|
-
Styleguide
|
254
|
+
Styleguide 24.9
|
247
255
|
|
248
256
|
|
249
257
|
*/
|
@@ -303,7 +311,7 @@ Add a css-only triangle width side borders, usefull for tooltips. For now only s
|
|
303
311
|
* `$border-width`: Border width of the triangle
|
304
312
|
* `$direction`: left or right
|
305
313
|
|
306
|
-
Styleguide
|
314
|
+
Styleguide 24.10
|
307
315
|
|
308
316
|
*/
|
309
317
|
|
@@ -352,7 +360,7 @@ Text inset shadow
|
|
352
360
|
* `$textcolor`: Color of the text
|
353
361
|
* `$contrast`: How much stronger the inset will be
|
354
362
|
|
355
|
-
Styleguide
|
363
|
+
Styleguide 24.11
|
356
364
|
|
357
365
|
*/
|
358
366
|
|
@@ -384,7 +392,7 @@ Become
|
|
384
392
|
color: #000;
|
385
393
|
color: rgba(0,0,0,.5);
|
386
394
|
|
387
|
-
Styleguide
|
395
|
+
Styleguide 24.12
|
388
396
|
|
389
397
|
*/
|
390
398
|
|
@@ -405,7 +413,7 @@ Used for creating custom animations.
|
|
405
413
|
|
406
414
|
* `$name`: Name of the keyframe
|
407
415
|
|
408
|
-
Styleguide
|
416
|
+
Styleguide 24.13
|
409
417
|
|
410
418
|
*/
|
411
419
|
|
@@ -435,7 +443,7 @@ Nav divider
|
|
435
443
|
* `$top`: Color of the top border
|
436
444
|
* `$bottom`: Color of the bottom border
|
437
445
|
|
438
|
-
Styleguide
|
446
|
+
Styleguide 24.14
|
439
447
|
|
440
448
|
*/
|
441
449
|
|
@@ -464,7 +472,7 @@ Comicbook Shadow
|
|
464
472
|
* `$size`: Size of the shadow
|
465
473
|
* `$distance`: Distance of the shadow from the image
|
466
474
|
|
467
|
-
Styleguide
|
475
|
+
Styleguide 24.15
|
468
476
|
|
469
477
|
*/
|
470
478
|
|
@@ -515,7 +523,7 @@ Usefull for adding inset shadows to sidebars or large block where the shadow is
|
|
515
523
|
* `$size`: Size of the shadow
|
516
524
|
* `$color`: Color of the shadow
|
517
525
|
|
518
|
-
Styleguide
|
526
|
+
Styleguide 24.16
|
519
527
|
|
520
528
|
*/
|
521
529
|
|
@@ -553,7 +561,7 @@ Add Side Shadows to multi-line padded text for consistend side padding (Fabien D
|
|
553
561
|
* `$size`: Size of the shadow
|
554
562
|
* `$color`: Color of the shadow
|
555
563
|
|
556
|
-
Styleguide
|
564
|
+
Styleguide 24.17
|
557
565
|
|
558
566
|
*/
|
559
567
|
|
@@ -579,7 +587,7 @@ Use the unicode character from an icon font to insert it wherever you want.
|
|
579
587
|
‡ Fonts available: Fontawesome, Brandico, Entypo, Fontelico, Maki, Openweb-icons, Typicons, Zocial
|
580
588
|
|
581
589
|
|
582
|
-
Styleguide
|
590
|
+
Styleguide 24.18
|
583
591
|
|
584
592
|
*/
|
585
593
|
|
@@ -606,7 +614,7 @@ You can set the start/and with of each step from usins the variables `$lap-start
|
|
606
614
|
* `portable`: Lap + Palm
|
607
615
|
* `desk`: Only Desktop
|
608
616
|
|
609
|
-
Styleguide
|
617
|
+
Styleguide 24.19
|
610
618
|
|
611
619
|
*/
|
612
620
|
|
@@ -685,7 +693,7 @@ Or via `@include` from the scss:
|
|
685
693
|
|
686
694
|
The result is the same.
|
687
695
|
|
688
|
-
Styleguide
|
696
|
+
Styleguide 24.20
|
689
697
|
|
690
698
|
*/
|
691
699
|
|
@@ -709,7 +717,7 @@ Responsive grid
|
|
709
717
|
* `$media`: Media query to to use, for responsive grids
|
710
718
|
* `$highlight-omega`: Bolean, used for debugging nth
|
711
719
|
|
712
|
-
Styleguide
|
720
|
+
Styleguide 24.21
|
713
721
|
|
714
722
|
*/
|
715
723
|
|
@@ -752,7 +760,7 @@ Animations
|
|
752
760
|
* `$function`: Easing, see 20.2 for a list of all easing options available
|
753
761
|
* `$mode`: animation-fill-mode (http://mzl.la/1g6ixCc), default to *both*
|
754
762
|
|
755
|
-
Styleguide
|
763
|
+
Styleguide 24.22
|
756
764
|
|
757
765
|
*/
|
758
766
|
|
@@ -766,3 +774,65 @@ Styleguide 23.22
|
|
766
774
|
@include experimental(animation, $name $duration $delay toBezier($function) $mode);
|
767
775
|
}
|
768
776
|
|
777
|
+
/*
|
778
|
+
|
779
|
+
Animation sequences
|
780
|
+
|
781
|
+
@include animate-sequence($selector, $name, $iterations, $delay, $duration, $delay-offset, $function, $mode)
|
782
|
+
|
783
|
+
* `$selector`: Selector to use for the sequence
|
784
|
+
* `$name`: Name of the animations to use, it must be enabled first. For more information see the Animations section.
|
785
|
+
* `$iterations`: How many elements to iterate
|
786
|
+
* `$delay`: Time between each animation
|
787
|
+
* `$duration`: Duration of the animation
|
788
|
+
* `$delay-offset`: From what value start iterating using the `$delay` value
|
789
|
+
* `$function`: Easing, see 20.2 for a list of all easing options available
|
790
|
+
* `$mode`: animation-fill-mode (http://mzl.la/1g6ixCc), default to *both*
|
791
|
+
|
792
|
+
Example:
|
793
|
+
|
794
|
+
.animation-iterations {
|
795
|
+
@include animate-sequence('img', fadeIn, 4, .5s)
|
796
|
+
}
|
797
|
+
|
798
|
+
Will be compiled to:
|
799
|
+
|
800
|
+
.animation-iterations img:nth-child(1) {
|
801
|
+
animation: fadeIn 0.5s 0.5s ease-out both;
|
802
|
+
}
|
803
|
+
.animation-iterations img:nth-child(2) {
|
804
|
+
animation: fadeIn 0.5s 1s ease-out both;
|
805
|
+
}
|
806
|
+
.animation-iterations img:nth-child(3) {
|
807
|
+
animation: fadeIn 0.5s 1.5s ease-out both;
|
808
|
+
}
|
809
|
+
.animation-iterations img:nth-child(4) {
|
810
|
+
animation: fadeIn 0.5s 2s ease-out both;
|
811
|
+
}
|
812
|
+
|
813
|
+
Styleguide 24.23
|
814
|
+
|
815
|
+
*/
|
816
|
+
|
817
|
+
@mixin animate-sequence(
|
818
|
+
$selector,
|
819
|
+
$name,
|
820
|
+
$iterations,
|
821
|
+
$delay,
|
822
|
+
$duration: $animations-duration,
|
823
|
+
$delay-offset: $animations-delay,
|
824
|
+
$function: $animations-function,
|
825
|
+
$mode: $animations-mode
|
826
|
+
) {
|
827
|
+
@if $delay-offset == null {
|
828
|
+
$delay-offset: 0;
|
829
|
+
}
|
830
|
+
@for $i from 1 through $iterations {
|
831
|
+
$delay-seq: ( $delay * $i ) + $delay-offset;
|
832
|
+
#{$selector}:nth-child(#{$i}) {
|
833
|
+
@include animate($name, $duration, $delay-seq, $function, $mode);
|
834
|
+
}
|
835
|
+
}
|
836
|
+
}
|
837
|
+
|
838
|
+
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: rapido-css
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.5
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -27,8 +27,7 @@ dependencies:
|
|
27
27
|
- - ! '>='
|
28
28
|
- !ruby/object:Gem::Version
|
29
29
|
version: 1.0.8
|
30
|
-
description: An easy and quick
|
31
|
-
without all the default styles.
|
30
|
+
description: An easy and quick Sass + Compass + Susy + OOCSS + BEM prototyping framework.
|
32
31
|
email: raffaele.rasini@gmail.com
|
33
32
|
executables: []
|
34
33
|
extensions: []
|
@@ -57,6 +56,7 @@ files:
|
|
57
56
|
- stylesheets/components/_sliders.scss
|
58
57
|
- stylesheets/components/_tables.scss
|
59
58
|
- stylesheets/components/_tabs.scss
|
59
|
+
- stylesheets/components/_toggle.scss
|
60
60
|
- stylesheets/components/_type.scss
|
61
61
|
- stylesheets/rapido.min.scss
|
62
62
|
- stylesheets/rapido.scss
|
@@ -75,7 +75,7 @@ files:
|
|
75
75
|
- templates/project/screen.scss
|
76
76
|
homepage: https://github.com/raffone/rapido
|
77
77
|
licenses:
|
78
|
-
-
|
78
|
+
- MIT
|
79
79
|
post_install_message:
|
80
80
|
rdoc_options: []
|
81
81
|
require_paths:
|
@@ -97,5 +97,5 @@ rubyforge_project:
|
|
97
97
|
rubygems_version: 1.8.23
|
98
98
|
signing_key:
|
99
99
|
specification_version: 3
|
100
|
-
summary:
|
100
|
+
summary: A quick css prototyping framework
|
101
101
|
test_files: []
|