rapido-css 0.1.5 → 0.1.6
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.
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: []
|