rapido-css 0.1.5 → 0.1.6
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
---
|
|
2
|
+
!binary "U0hBMQ==":
|
|
3
|
+
metadata.gz: !binary |-
|
|
4
|
+
ZWI0NDQxMjY4MTY3YWVkMTg4YmVlZTBiZGU0MjI4OWFiZjJhYjdiZA==
|
|
5
|
+
data.tar.gz: !binary |-
|
|
6
|
+
OTFiZmRjMGQ5YzI1Nzg3NjdlYTU1YmVlZDM3OTA4NGZkZTczZjkzMA==
|
|
7
|
+
SHA512:
|
|
8
|
+
metadata.gz: !binary |-
|
|
9
|
+
YTA3YWIxZmU1NWM5MDFhNDgyOWUzMTZmNTdkMmI0NzkzYjM2YzFiNGUwYzQ5
|
|
10
|
+
ZDYzMTgwYzQ4MmRiMmZkN2JlODViZjExOTFlODMyZTczZDU3YzU2YzYyNWQ5
|
|
11
|
+
ZDJiYzllZjczNTBmZjViMWIxOWNiN2I5MGU5ZDk4MDRkZDQ5YjI=
|
|
12
|
+
data.tar.gz: !binary |-
|
|
13
|
+
YjM4YmM3ZDJiM2QxZWM1YjBlNTI4N2FhMDgwMDBiZTZjOGQ0YzE5NjFjYzI4
|
|
14
|
+
MzNlZWE5MDU1Y2NlOTZmYTk2NDZmZjdkZTBlYWRmYjg5MTJiYmNiYzJhNmY2
|
|
15
|
+
NDFhOWRlNTNlODQyNWIzOTU5Yzg5YzRlNWFiOTkwZjEyMDVlNGQ=
|
data/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
An easy and quick [**Sass**](http://sass-lang.com/) + [**Compass**](http://compass-style.org/) + [**Susy**](http://susy.oddbird.net/) + [**OOCSS**](http://oocss.org/) + [**BEM**](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) prototyping framework.
|
|
4
4
|
|
|
5
|
+
[](http://badge.fury.io/rb/rapido-css) [](http://badge.fury.io/bo/rapido)
|
|
6
|
+
|
|
5
7
|
## Features
|
|
6
8
|
|
|
7
9
|
* **CSS architecture and styling completely separated**, creating and switching complex themes is much easier
|
|
@@ -24,7 +24,7 @@ Include this js after including rapido.js.
|
|
|
24
24
|
You can also pass a delay between the removing and adding the class, usefull
|
|
25
25
|
when you have two animation that you don't wont to start at the same time.
|
|
26
26
|
|
|
27
|
-
**Options** (with
|
|
27
|
+
**Options** (with default values):
|
|
28
28
|
|
|
29
29
|
titleClass: [data-toggle-name]
|
|
30
30
|
contentClass: [data-toggle-content]
|
|
@@ -18,94 +18,94 @@ Styleguide 21
|
|
|
18
18
|
|
|
19
19
|
// Disable all animations by default
|
|
20
20
|
|
|
21
|
-
$fadeIn:
|
|
22
|
-
$fadeOut:
|
|
23
|
-
$fadeInUp:
|
|
24
|
-
$fadeOutUp:
|
|
25
|
-
$fadeInDown:
|
|
26
|
-
$fadeOutDown:
|
|
27
|
-
$fadeInRight:
|
|
28
|
-
$fadeOutLeft:
|
|
29
|
-
$fadeInLeft:
|
|
30
|
-
$fadeOutRight:
|
|
31
|
-
$fadeInUpBig:
|
|
32
|
-
$fadeOutUpBig:
|
|
33
|
-
$fadeInDownBig:
|
|
34
|
-
$fadeOutDownBig:
|
|
35
|
-
$fadeInRightBig:
|
|
36
|
-
$fadeOutLeftBig:
|
|
37
|
-
$fadeInLeftBig:
|
|
38
|
-
$fadeOutRightBig:
|
|
39
|
-
$bounceIn:
|
|
40
|
-
$bounceInDown:
|
|
41
|
-
$bounceInUp:
|
|
42
|
-
$bounceInRight:
|
|
43
|
-
$bounceInLeft:
|
|
44
|
-
$bounceOut:
|
|
45
|
-
$bounceOutUp:
|
|
46
|
-
$bounceOutDown:
|
|
47
|
-
$bounceOutLeft:
|
|
48
|
-
$bounceOutRight:
|
|
49
|
-
$flash:
|
|
50
|
-
$bounce:
|
|
51
|
-
$shake:
|
|
52
|
-
$rotateInDownLeft:
|
|
53
|
-
$rotateInUpLeft:
|
|
54
|
-
$rotateInUpRight:
|
|
55
|
-
$rotateInDownRight:
|
|
56
|
-
$rotateOutDownLeft:
|
|
57
|
-
$rotateOutUpLeft:
|
|
58
|
-
$rotateOutDownRight:
|
|
59
|
-
$rotateOutUpRight:
|
|
60
|
-
$rotateIn:
|
|
61
|
-
$rotateOut:
|
|
62
|
-
$tada:
|
|
21
|
+
$fadeIn : false !default;
|
|
22
|
+
$fadeOut : false !default;
|
|
23
|
+
$fadeInUp : false !default;
|
|
24
|
+
$fadeOutUp : false !default;
|
|
25
|
+
$fadeInDown : false !default;
|
|
26
|
+
$fadeOutDown : false !default;
|
|
27
|
+
$fadeInRight : false !default;
|
|
28
|
+
$fadeOutLeft : false !default;
|
|
29
|
+
$fadeInLeft : false !default;
|
|
30
|
+
$fadeOutRight : false !default;
|
|
31
|
+
$fadeInUpBig : false !default;
|
|
32
|
+
$fadeOutUpBig : false !default;
|
|
33
|
+
$fadeInDownBig : false !default;
|
|
34
|
+
$fadeOutDownBig : false !default;
|
|
35
|
+
$fadeInRightBig : false !default;
|
|
36
|
+
$fadeOutLeftBig : false !default;
|
|
37
|
+
$fadeInLeftBig : false !default;
|
|
38
|
+
$fadeOutRightBig : false !default;
|
|
39
|
+
$bounceIn : false !default;
|
|
40
|
+
$bounceInDown : false !default;
|
|
41
|
+
$bounceInUp : false !default;
|
|
42
|
+
$bounceInRight : false !default;
|
|
43
|
+
$bounceInLeft : false !default;
|
|
44
|
+
$bounceOut : false !default;
|
|
45
|
+
$bounceOutUp : false !default;
|
|
46
|
+
$bounceOutDown : false !default;
|
|
47
|
+
$bounceOutLeft : false !default;
|
|
48
|
+
$bounceOutRight : false !default;
|
|
49
|
+
$flash : false !default;
|
|
50
|
+
$bounce : false !default;
|
|
51
|
+
$shake : false !default;
|
|
52
|
+
$rotateInDownLeft : false !default;
|
|
53
|
+
$rotateInUpLeft : false !default;
|
|
54
|
+
$rotateInUpRight : false !default;
|
|
55
|
+
$rotateInDownRight : false !default;
|
|
56
|
+
$rotateOutDownLeft : false !default;
|
|
57
|
+
$rotateOutUpLeft : false !default;
|
|
58
|
+
$rotateOutDownRight : false !default;
|
|
59
|
+
$rotateOutUpRight : false !default;
|
|
60
|
+
$rotateIn : false !default;
|
|
61
|
+
$rotateOut : false !default;
|
|
62
|
+
$tada : false !default;
|
|
63
63
|
|
|
64
64
|
// Enable animation from the settings
|
|
65
65
|
|
|
66
66
|
@each $animation in $animations {
|
|
67
|
-
@if $animation == 'fadeIn'
|
|
68
|
-
@if $animation == 'fadeOut'
|
|
69
|
-
@if $animation == 'fadeInUp'
|
|
70
|
-
@if $animation == 'fadeOutUp'
|
|
71
|
-
@if $animation == 'fadeInDown'
|
|
72
|
-
@if $animation == 'fadeOutDown'
|
|
73
|
-
@if $animation == 'fadeInRight'
|
|
74
|
-
@if $animation == 'fadeOutLeft'
|
|
75
|
-
@if $animation == 'fadeInLeft'
|
|
76
|
-
@if $animation == 'fadeOutRight'
|
|
77
|
-
@if $animation == 'fadeInUpBig'
|
|
78
|
-
@if $animation == 'fadeOutUpBig'
|
|
79
|
-
@if $animation == 'fadeInDownBig'
|
|
80
|
-
@if $animation == 'fadeOutDownBig'
|
|
81
|
-
@if $animation == 'fadeInRightBig'
|
|
82
|
-
@if $animation == 'fadeOutLeftBig'
|
|
83
|
-
@if $animation == 'fadeInLeftBig'
|
|
84
|
-
@if $animation == 'fadeOutRightBig'
|
|
85
|
-
@if $animation == 'bounceIn'
|
|
86
|
-
@if $animation == 'bounceInDown'
|
|
87
|
-
@if $animation == 'bounceInUp'
|
|
88
|
-
@if $animation == 'bounceInRight'
|
|
89
|
-
@if $animation == 'bounceInLeft'
|
|
90
|
-
@if $animation == 'bounceOut'
|
|
91
|
-
@if $animation == 'bounceOutUp'
|
|
92
|
-
@if $animation == 'bounceOutDown'
|
|
93
|
-
@if $animation == 'bounceOutLeft'
|
|
94
|
-
@if $animation == 'bounceOutRight'
|
|
95
|
-
@if $animation == 'flash'
|
|
96
|
-
@if $animation == 'bounce'
|
|
97
|
-
@if $animation == 'shake'
|
|
98
|
-
@if $animation == 'rotateInDownLeft'
|
|
99
|
-
@if $animation == 'rotateInUpLeft'
|
|
100
|
-
@if $animation == 'rotateInUpRight'
|
|
101
|
-
@if $animation == 'rotateInDownRight'
|
|
102
|
-
@if $animation == 'rotateOutDownLeft'
|
|
103
|
-
@if $animation == 'rotateOutUpLeft'
|
|
104
|
-
@if $animation == 'rotateOutDownRight'
|
|
105
|
-
@if $animation == 'rotateOutUpRight'
|
|
106
|
-
@if $animation == 'rotateIn'
|
|
107
|
-
@if $animation == 'rotateOut'
|
|
108
|
-
@if $animation == 'tada'
|
|
67
|
+
@if $animation == 'fadeIn' {$fadeIn : true;}
|
|
68
|
+
@if $animation == 'fadeOut' {$fadeOut : true;}
|
|
69
|
+
@if $animation == 'fadeInUp' {$fadeInUp : true;}
|
|
70
|
+
@if $animation == 'fadeOutUp' {$fadeOutUp : true;}
|
|
71
|
+
@if $animation == 'fadeInDown' {$fadeInDown : true;}
|
|
72
|
+
@if $animation == 'fadeOutDown' {$fadeOutDown : true;}
|
|
73
|
+
@if $animation == 'fadeInRight' {$fadeInRight : true;}
|
|
74
|
+
@if $animation == 'fadeOutLeft' {$fadeOutLeft : true;}
|
|
75
|
+
@if $animation == 'fadeInLeft' {$fadeInLeft : true;}
|
|
76
|
+
@if $animation == 'fadeOutRight' {$fadeOutRight : true;}
|
|
77
|
+
@if $animation == 'fadeInUpBig' {$fadeInUpBig : true;}
|
|
78
|
+
@if $animation == 'fadeOutUpBig' {$fadeOutUpBig : true;}
|
|
79
|
+
@if $animation == 'fadeInDownBig' {$fadeInDownBig : true;}
|
|
80
|
+
@if $animation == 'fadeOutDownBig' {$fadeOutDownBig : true;}
|
|
81
|
+
@if $animation == 'fadeInRightBig' {$fadeInRightBig : true;}
|
|
82
|
+
@if $animation == 'fadeOutLeftBig' {$fadeOutLeftBig : true;}
|
|
83
|
+
@if $animation == 'fadeInLeftBig' {$fadeInLeftBig : true;}
|
|
84
|
+
@if $animation == 'fadeOutRightBig' {$fadeOutRightBig : true;}
|
|
85
|
+
@if $animation == 'bounceIn' {$bounceIn : true;}
|
|
86
|
+
@if $animation == 'bounceInDown' {$bounceInDown : true;}
|
|
87
|
+
@if $animation == 'bounceInUp' {$bounceInUp : true;}
|
|
88
|
+
@if $animation == 'bounceInRight' {$bounceInRight : true;}
|
|
89
|
+
@if $animation == 'bounceInLeft' {$bounceInLeft : true;}
|
|
90
|
+
@if $animation == 'bounceOut' {$bounceOut : true;}
|
|
91
|
+
@if $animation == 'bounceOutUp' {$bounceOutUp : true;}
|
|
92
|
+
@if $animation == 'bounceOutDown' {$bounceOutDown : true;}
|
|
93
|
+
@if $animation == 'bounceOutLeft' {$bounceOutLeft : true;}
|
|
94
|
+
@if $animation == 'bounceOutRight' {$bounceOutRight : true;}
|
|
95
|
+
@if $animation == 'flash' {$flash : true;}
|
|
96
|
+
@if $animation == 'bounce' {$bounce : true;}
|
|
97
|
+
@if $animation == 'shake' {$shake : true;}
|
|
98
|
+
@if $animation == 'rotateInDownLeft' {$rotateInDownLeft : true;}
|
|
99
|
+
@if $animation == 'rotateInUpLeft' {$rotateInUpLeft : true;}
|
|
100
|
+
@if $animation == 'rotateInUpRight' {$rotateInUpRight : true;}
|
|
101
|
+
@if $animation == 'rotateInDownRight' {$rotateInDownRight : true;}
|
|
102
|
+
@if $animation == 'rotateOutDownLeft' {$rotateOutDownLeft : true;}
|
|
103
|
+
@if $animation == 'rotateOutUpLeft' {$rotateOutUpLeft : true;}
|
|
104
|
+
@if $animation == 'rotateOutDownRight' {$rotateOutDownRight : true;}
|
|
105
|
+
@if $animation == 'rotateOutUpRight' {$rotateOutUpRight : true;}
|
|
106
|
+
@if $animation == 'rotateIn' {$rotateIn : true;}
|
|
107
|
+
@if $animation == 'rotateOut' {$rotateOut : true;}
|
|
108
|
+
@if $animation == 'tada' {$tada : true;}
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
|
|
@@ -136,7 +136,8 @@ Styleguide 21.3
|
|
|
136
136
|
Classes for delays
|
|
137
137
|
|
|
138
138
|
Like classes for the animations are also available 8 classes for delays.
|
|
139
|
-
Available delays: .delay-25, .delay-50, .delay-75, .delay-100, .delay-125,
|
|
139
|
+
Available delays: .delay-25, .delay-50, .delay-75, .delay-100, .delay-125,
|
|
140
|
+
.delay-150, .delay-175, .delay-200.
|
|
140
141
|
|
|
141
142
|
Example:
|
|
142
143
|
|
|
@@ -160,27 +161,30 @@ Styleguide 21.4
|
|
|
160
161
|
|
|
161
162
|
Show animation only on scroll
|
|
162
163
|
|
|
163
|
-
It possibile to hide everything and show the entrance animation only when an
|
|
164
|
+
It possibile to hide everything and show the entrance animation only when an
|
|
165
|
+
element is visible.
|
|
164
166
|
|
|
165
|
-
|
|
167
|
+
Include this js after including rapido.js.
|
|
166
168
|
|
|
167
|
-
|
|
169
|
+
$('.articles').rapido_Animation();
|
|
168
170
|
|
|
171
|
+
**Options** (with default values):
|
|
172
|
+
|
|
173
|
+
offset: 500
|
|
174
|
+
offsetMenu: false (when using rapido's offset nav)
|
|
169
175
|
|
|
170
176
|
Example:
|
|
171
177
|
|
|
172
|
-
<
|
|
178
|
+
<section class="articles" data-animation="fadeIn">
|
|
173
179
|
...
|
|
174
|
-
</
|
|
180
|
+
</section>
|
|
175
181
|
|
|
176
182
|
|
|
177
183
|
Styleguide 21.5
|
|
178
184
|
|
|
179
185
|
*/
|
|
180
186
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
[data-animation-scroll*="In"] {
|
|
187
|
+
[data-animation*="fadeIn"] {
|
|
184
188
|
@include opacity(0);
|
|
185
189
|
}
|
|
186
190
|
|
|
@@ -188,7 +192,8 @@ Styleguide 21.5
|
|
|
188
192
|
|
|
189
193
|
Animation mixin
|
|
190
194
|
|
|
191
|
-
Also available is an "animate" mixin, for more information see the Mixins
|
|
195
|
+
Also available is an "animate" mixin, for more information see the Mixins
|
|
196
|
+
section.
|
|
192
197
|
|
|
193
198
|
Styleguide 21.6
|
|
194
199
|
|
metadata
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: rapido-css
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
5
|
-
prerelease:
|
|
4
|
+
version: 0.1.6
|
|
6
5
|
platform: ruby
|
|
7
6
|
authors:
|
|
8
7
|
- Raffaele Rasini
|
|
9
8
|
autorequire:
|
|
10
9
|
bindir: bin
|
|
11
10
|
cert_chain: []
|
|
12
|
-
date: 2014-01-
|
|
11
|
+
date: 2014-01-23 00:00:00.000000000 Z
|
|
13
12
|
dependencies:
|
|
14
13
|
- !ruby/object:Gem::Dependency
|
|
15
14
|
name: susy
|
|
16
15
|
requirement: !ruby/object:Gem::Requirement
|
|
17
|
-
none: false
|
|
18
16
|
requirements:
|
|
19
17
|
- - ! '>='
|
|
20
18
|
- !ruby/object:Gem::Version
|
|
@@ -22,7 +20,6 @@ dependencies:
|
|
|
22
20
|
type: :runtime
|
|
23
21
|
prerelease: false
|
|
24
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
25
|
-
none: false
|
|
26
23
|
requirements:
|
|
27
24
|
- - ! '>='
|
|
28
25
|
- !ruby/object:Gem::Version
|
|
@@ -76,26 +73,25 @@ files:
|
|
|
76
73
|
homepage: https://github.com/raffone/rapido
|
|
77
74
|
licenses:
|
|
78
75
|
- MIT
|
|
76
|
+
metadata: {}
|
|
79
77
|
post_install_message:
|
|
80
78
|
rdoc_options: []
|
|
81
79
|
require_paths:
|
|
82
80
|
- lib
|
|
83
81
|
required_ruby_version: !ruby/object:Gem::Requirement
|
|
84
|
-
none: false
|
|
85
82
|
requirements:
|
|
86
83
|
- - ! '>='
|
|
87
84
|
- !ruby/object:Gem::Version
|
|
88
85
|
version: '0'
|
|
89
86
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
90
|
-
none: false
|
|
91
87
|
requirements:
|
|
92
88
|
- - ! '>='
|
|
93
89
|
- !ruby/object:Gem::Version
|
|
94
90
|
version: '0'
|
|
95
91
|
requirements: []
|
|
96
92
|
rubyforge_project:
|
|
97
|
-
rubygems_version:
|
|
93
|
+
rubygems_version: 2.2.1
|
|
98
94
|
signing_key:
|
|
99
|
-
specification_version:
|
|
95
|
+
specification_version: 4
|
|
100
96
|
summary: A quick css prototyping framework
|
|
101
97
|
test_files: []
|