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.
@@ -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 23
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 23.1
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 23.2
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 23.3
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 23.4
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 23.5
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 23.6
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 23.7
187
+ Styleguide 24.7
187
188
 
188
189
  */
189
190
 
190
191
  @mixin placeholder($color: $gray) {
191
192
 
192
- &:-moz-placeholder {
193
- color: $color;
194
- }
195
- &::-moz-placeholder {
196
- color: $color;
197
- }
198
- &:-ms-input-placeholder {
199
- color: $color;
200
- }
201
- &::-webkit-input-placeholder {
202
- color: $color;
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 23.8
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 23.9
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 23.10
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 23.11
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 23.12
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 23.13
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 23.14
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 23.15
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 23.16
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 23.17
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 23.18
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 23.19
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 23.20
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 23.21
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 23.22
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
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 sass+compass+susy prototyping framework based on Bootstrap
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
- - Apache License Version 2.0
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: a quick bootstrap prototyping framework
100
+ summary: A quick css prototyping framework
101
101
  test_files: []