easy_cms 0.1.0

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.
Files changed (74) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +12 -0
  3. data/.rspec +2 -0
  4. data/.travis.yml +5 -0
  5. data/CODE_OF_CONDUCT.md +74 -0
  6. data/Gemfile +4 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +31 -0
  9. data/Rakefile +6 -0
  10. data/bin/console +14 -0
  11. data/bin/setup +8 -0
  12. data/easy_cms.gemspec +36 -0
  13. data/lib/easy_cms.rb +5 -0
  14. data/lib/easy_cms/version.rb +3 -0
  15. data/lib/generators/easy_cms/model/model_generator.rb +71 -0
  16. data/lib/generators/easy_cms/model/templates/controllers/model_controller.erb +55 -0
  17. data/lib/generators/easy_cms/model/templates/layouts/_form.html.erb +26 -0
  18. data/lib/generators/easy_cms/model/templates/layouts/edit.html.erb +13 -0
  19. data/lib/generators/easy_cms/model/templates/layouts/index.html.erb +37 -0
  20. data/lib/generators/easy_cms/model/templates/layouts/item_navegation.html.erb +19 -0
  21. data/lib/generators/easy_cms/model/templates/layouts/new.html.erb +13 -0
  22. data/lib/generators/easy_cms/model/templates/layouts/show.html.erb +22 -0
  23. data/lib/generators/easy_cms/namespace/namespace_generator.rb +45 -0
  24. data/lib/generators/easy_cms/namespace/templates/assets/base_javascript.erb +3 -0
  25. data/lib/generators/easy_cms/namespace/templates/assets/base_scss.erb +1 -0
  26. data/lib/generators/easy_cms/namespace/templates/controllers/base_controller.erb +5 -0
  27. data/lib/generators/easy_cms/namespace/templates/layouts/layout.html.erb +71 -0
  28. data/lib/generators/resource_helpers.rb +31 -0
  29. data/vendor/assets/javascripts/.keep +0 -0
  30. data/vendor/assets/javascripts/easy_cms/base.js +351 -0
  31. data/vendor/assets/javascripts/easy_cms/bootstrap-notify.js +404 -0
  32. data/vendor/assets/javascripts/easy_cms/bootstrap.min.js +7 -0
  33. data/vendor/assets/javascripts/easy_cms/chartist.min.js +9 -0
  34. data/vendor/assets/javascripts/easy_cms/demo.js +183 -0
  35. data/vendor/assets/javascripts/easy_cms/jquery-3.1.0.min.js +4 -0
  36. data/vendor/assets/javascripts/easy_cms/material.min.js +1 -0
  37. data/vendor/assets/stylesheets/.keep +0 -0
  38. data/vendor/assets/stylesheets/easy_cms/bootstrap.min.css +5 -0
  39. data/vendor/assets/stylesheets/easy_cms/demo.css +64 -0
  40. data/vendor/assets/stylesheets/easy_cms/easy_cms.css +5065 -0
  41. data/vendor/assets/stylesheets/easy_cms/easy_cms_sass.scss +51 -0
  42. data/vendor/assets/stylesheets/easy_cms/md/_alerts.scss +57 -0
  43. data/vendor/assets/stylesheets/easy_cms/md/_buttons.scss +259 -0
  44. data/vendor/assets/stylesheets/easy_cms/md/_cards.scss +337 -0
  45. data/vendor/assets/stylesheets/easy_cms/md/_chartist.scss +254 -0
  46. data/vendor/assets/stylesheets/easy_cms/md/_checkboxes.scss +193 -0
  47. data/vendor/assets/stylesheets/easy_cms/md/_colors.scss +325 -0
  48. data/vendor/assets/stylesheets/easy_cms/md/_dialogs.scss +99 -0
  49. data/vendor/assets/stylesheets/easy_cms/md/_dropdown.scss +67 -0
  50. data/vendor/assets/stylesheets/easy_cms/md/_footers.scss +44 -0
  51. data/vendor/assets/stylesheets/easy_cms/md/_forms.scss +58 -0
  52. data/vendor/assets/stylesheets/easy_cms/md/_inputs-size.scss +223 -0
  53. data/vendor/assets/stylesheets/easy_cms/md/_inputs.scss +394 -0
  54. data/vendor/assets/stylesheets/easy_cms/md/_misc.scss +115 -0
  55. data/vendor/assets/stylesheets/easy_cms/md/_mixins.scss +422 -0
  56. data/vendor/assets/stylesheets/easy_cms/md/_navbars.scss +329 -0
  57. data/vendor/assets/stylesheets/easy_cms/md/_pills.scss +117 -0
  58. data/vendor/assets/stylesheets/easy_cms/md/_popups.scss +77 -0
  59. data/vendor/assets/stylesheets/easy_cms/md/_radios.scss +114 -0
  60. data/vendor/assets/stylesheets/easy_cms/md/_responsive.scss +453 -0
  61. data/vendor/assets/stylesheets/easy_cms/md/_ripples.scss +40 -0
  62. data/vendor/assets/stylesheets/easy_cms/md/_shadows.scss +138 -0
  63. data/vendor/assets/stylesheets/easy_cms/md/_sidebar-and-main-panel.scss +260 -0
  64. data/vendor/assets/stylesheets/easy_cms/md/_tables.scss +45 -0
  65. data/vendor/assets/stylesheets/easy_cms/md/_tabs.scss +53 -0
  66. data/vendor/assets/stylesheets/easy_cms/md/_togglebutton.scss +87 -0
  67. data/vendor/assets/stylesheets/easy_cms/md/_typography.scss +75 -0
  68. data/vendor/assets/stylesheets/easy_cms/md/_variables.scss +1127 -0
  69. data/vendor/assets/stylesheets/easy_cms/md/mixins/_chartist.scss +89 -0
  70. data/vendor/assets/stylesheets/easy_cms/md/mixins/_transparency.scss +20 -0
  71. data/vendor/assets/stylesheets/easy_cms/md/mixins/_vendor-prefixes.scss +185 -0
  72. data/vendor/assets/stylesheets/easy_cms/md/plugins/_animate.scss +227 -0
  73. data/vendor/assets/stylesheets/easy_cms/md/plugins/_plugin-nouislider.scss +161 -0
  74. metadata +174 -0
@@ -0,0 +1,89 @@
1
+ // Scales for responsive SVG containers
2
+ $ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
3
+ $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
4
+
5
+ // Class names to be used when generating CSS
6
+ $ct-class-chart: ct-chart !default;
7
+ $ct-class-chart-line: ct-chart-line !default;
8
+ $ct-class-chart-bar: ct-chart-bar !default;
9
+ $ct-class-horizontal-bars: ct-horizontal-bars !default;
10
+ $ct-class-chart-pie: ct-chart-pie !default;
11
+ $ct-class-chart-donut: ct-chart-donut !default;
12
+ $ct-class-label: ct-label !default;
13
+ $ct-class-series: ct-series !default;
14
+ $ct-class-line: ct-line !default;
15
+ $ct-class-point: ct-point !default;
16
+ $ct-class-area: ct-area !default;
17
+ $ct-class-bar: ct-bar !default;
18
+ $ct-class-slice-pie: ct-slice-pie !default;
19
+ $ct-class-slice-donut: ct-slice-donut !default;
20
+ $ct-class-grid: ct-grid !default;
21
+ $ct-class-vertical: ct-vertical !default;
22
+ $ct-class-horizontal: ct-horizontal !default;
23
+ $ct-class-start: ct-start !default;
24
+ $ct-class-end: ct-end !default;
25
+
26
+ // Container ratio
27
+ $ct-container-ratio: (1/1.618) !default;
28
+
29
+ // Text styles for labels
30
+ $ct-text-color: rgba(0, 0, 0, 0.4) !default;
31
+ $ct-text-size: 1.3rem !default;
32
+ $ct-text-align: flex-start !default;
33
+ $ct-text-justify: flex-start !default;
34
+ $ct-text-line-height: 1;
35
+
36
+ .ct-big-chart-white{
37
+ $ct-grid-color: rgba(250, 250, 250, 0.7) !default;
38
+ }
39
+ // Grid styles
40
+ $ct-grid-color: rgba(0, 0, 0, 0.2) !default;
41
+ $ct-grid-dasharray: 2px !default;
42
+ $ct-grid-width: 1px !default;
43
+
44
+ // Line chart properties
45
+ $ct-line-width: 3px !default;
46
+ $ct-line-dasharray: false !default;
47
+ $ct-point-size: 8px !default;
48
+ // Line chart point, can be either round or square
49
+ $ct-point-shape: round !default;
50
+ // Area fill transparency between 0 and 1
51
+ $ct-area-opacity: 0.8 !default;
52
+
53
+ // Bar chart bar width
54
+ $ct-bar-width: 10px !default;
55
+
56
+ // Donut width (If donut width is to big it can cause issues where the shape gets distorted)
57
+ $ct-donut-width: 60px !default;
58
+
59
+ // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
60
+ // should set this property to false
61
+ $ct-include-classes: true !default;
62
+
63
+ // If this is set to true the CSS will contain colored series. You can extend or change the color with the
64
+ // properties below
65
+ $ct-include-colored-series: $ct-include-classes !default;
66
+
67
+ // If set to true this will include all responsive container variations using the scales defined at the top of the script
68
+ $ct-include-alternative-responsive-containers: $ct-include-classes !default;
69
+
70
+ // Series names and colors. This can be extended or customized as desired. Just add more series and colors.
71
+ $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
72
+ $ct-series-colors: (
73
+
74
+ $brand-info,
75
+ $brand-danger,
76
+ $brand-warning,
77
+ $brand-primary,
78
+ $brand-success,
79
+ $font-background-light-grey,
80
+ $gray-color,
81
+ $social-google,
82
+ $social-tumblr,
83
+ $social-youtube,
84
+ $social-twitter,
85
+ $social-pinterest,
86
+ $social-behance,
87
+ #6188e2,
88
+ #a748ca
89
+ ) !default;
@@ -0,0 +1,20 @@
1
+ // Opacity
2
+
3
+ @mixin opacity($opacity) {
4
+ opacity: $opacity;
5
+ // IE8 filter
6
+ $opacity-ie: ($opacity * 100);
7
+ filter: #{alpha(opacity=$opacity-ie)};
8
+ }
9
+
10
+ @mixin black-filter($opacity){
11
+ top: 0;
12
+ left: 0;
13
+ height: 100%;
14
+ width: 100%;
15
+ position: absolute;
16
+ background-color: rgba(17,17,17,$opacity);
17
+ display: block;
18
+ content: "";
19
+ z-index: 1;
20
+ }
@@ -0,0 +1,185 @@
1
+ // User select
2
+ // For selecting text on the page
3
+
4
+ @mixin user-select($select) {
5
+ -webkit-user-select: $select;
6
+ -moz-user-select: $select;
7
+ -ms-user-select: $select; // IE10+
8
+ user-select: $select;
9
+ }
10
+
11
+ @mixin box-shadow($shadow...) {
12
+ -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
13
+ box-shadow: $shadow;
14
+ }
15
+
16
+ // Box sizing
17
+ @mixin box-sizing($boxmodel) {
18
+ -webkit-box-sizing: $boxmodel;
19
+ -moz-box-sizing: $boxmodel;
20
+ box-sizing: $boxmodel;
21
+ }
22
+
23
+
24
+ @mixin transition($time, $type){
25
+ -webkit-transition: all $time $type;
26
+ -moz-transition: all $time $type;
27
+ -o-transition: all $time $type;
28
+ -ms-transition: all $time $type;
29
+ transition: all $time $type;
30
+ }
31
+
32
+ @mixin transform-scale($value){
33
+ -webkit-transform: scale($value);
34
+ -moz-transform: scale($value);
35
+ -o-transform: scale($value);
36
+ -ms-transform: scale($value);
37
+ transform: scale($value);
38
+ }
39
+
40
+ @mixin transform-translate-x($value){
41
+ -webkit-transform: translate3d($value, 0, 0);
42
+ -moz-transform: translate3d($value, 0, 0);
43
+ -o-transform: translate3d($value, 0, 0);
44
+ -ms-transform: translate3d($value, 0, 0);
45
+ transform: translate3d($value, 0, 0);
46
+ }
47
+
48
+ @mixin transform-origin($coordinates){
49
+ -webkit-transform-origin: $coordinates;
50
+ -moz-transform-origin: $coordinates;
51
+ -o-transform-origin: $coordinates;
52
+ -ms-transform-origin: $coordinates;
53
+ transform-origin: $coordinates;
54
+ }
55
+
56
+ @mixin set-background-color-button ($color){
57
+ .nav{
58
+ li.active a{
59
+ background-color: $color;
60
+ @include shadow-big-color($color);
61
+ }
62
+ }
63
+ }
64
+
65
+ @mixin radial-gradient($extern-color, $center-color){
66
+ background: $extern-color;
67
+ background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
68
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
69
+ background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
70
+ background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
71
+ background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
72
+ background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
73
+ background-size: 550% 450%;
74
+ }
75
+
76
+ @mixin vertical-align {
77
+ position: relative;
78
+ top: 50%;
79
+ -webkit-transform: translateY(-50%);
80
+ -ms-transform: translateY(-50%);
81
+ transform: translateY(-50%);
82
+ }
83
+
84
+ @mixin rotate-180(){
85
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
86
+ -webkit-transform: rotate(180deg);
87
+ -ms-transform: rotate(180deg);
88
+ transform: rotate(180deg);
89
+ }
90
+
91
+ @mixin bar-animation($type){
92
+ -webkit-animation: $type 500ms linear 0s;
93
+ -moz-animation: $type 500ms linear 0s;
94
+ animation: $type 500ms 0s;
95
+ -webkit-animation-fill-mode: forwards;
96
+ -moz-animation-fill-mode: forwards;
97
+ animation-fill-mode: forwards;
98
+ }
99
+
100
+ @mixin topbar-x-rotation(){
101
+ @keyframes topbar-x {
102
+ 0% {top: 0px; transform: rotate(0deg); }
103
+ 45% {top: 6px; transform: rotate(145deg); }
104
+ 75% {transform: rotate(130deg); }
105
+ 100% {transform: rotate(135deg); }
106
+ }
107
+ @-webkit-keyframes topbar-x {
108
+ 0% {top: 0px; -webkit-transform: rotate(0deg); }
109
+ 45% {top: 6px; -webkit-transform: rotate(145deg); }
110
+ 75% {-webkit-transform: rotate(130deg); }
111
+ 100% { -webkit-transform: rotate(135deg); }
112
+ }
113
+ @-moz-keyframes topbar-x {
114
+ 0% {top: 0px; -moz-transform: rotate(0deg); }
115
+ 45% {top: 6px; -moz-transform: rotate(145deg); }
116
+ 75% {-moz-transform: rotate(130deg); }
117
+ 100% { -moz-transform: rotate(135deg); }
118
+ }
119
+ }
120
+
121
+ @mixin topbar-back-rotation(){
122
+ @keyframes topbar-back {
123
+ 0% { top: 6px; transform: rotate(135deg); }
124
+ 45% { transform: rotate(-10deg); }
125
+ 75% { transform: rotate(5deg); }
126
+ 100% { top: 0px; transform: rotate(0); }
127
+ }
128
+
129
+ @-webkit-keyframes topbar-back {
130
+ 0% { top: 6px; -webkit-transform: rotate(135deg); }
131
+ 45% { -webkit-transform: rotate(-10deg); }
132
+ 75% { -webkit-transform: rotate(5deg); }
133
+ 100% { top: 0px; -webkit-transform: rotate(0); }
134
+ }
135
+
136
+ @-moz-keyframes topbar-back {
137
+ 0% { top: 6px; -moz-transform: rotate(135deg); }
138
+ 45% { -moz-transform: rotate(-10deg); }
139
+ 75% { -moz-transform: rotate(5deg); }
140
+ 100% { top: 0px; -moz-transform: rotate(0); }
141
+ }
142
+ }
143
+
144
+ @mixin bottombar-x-rotation(){
145
+ @keyframes bottombar-x {
146
+ 0% {bottom: 0px; transform: rotate(0deg);}
147
+ 45% {bottom: 6px; transform: rotate(-145deg);}
148
+ 75% {transform: rotate(-130deg);}
149
+ 100% {transform: rotate(-135deg);}
150
+ }
151
+ @-webkit-keyframes bottombar-x {
152
+ 0% {bottom: 0px; -webkit-transform: rotate(0deg);}
153
+ 45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
154
+ 75% {-webkit-transform: rotate(-130deg);}
155
+ 100% {-webkit-transform: rotate(-135deg);}
156
+ }
157
+ @-moz-keyframes bottombar-x {
158
+ 0% {bottom: 0px; -moz-transform: rotate(0deg);}
159
+ 45% {bottom: 6px; -moz-transform: rotate(-145deg);}
160
+ 75% {-moz-transform: rotate(-130deg);}
161
+ 100% {-moz-transform: rotate(-135deg);}
162
+ }
163
+ }
164
+
165
+ @mixin bottombar-back-rotation{
166
+ @keyframes bottombar-back {
167
+ 0% { bottom: 6px;transform: rotate(-135deg);}
168
+ 45% { transform: rotate(10deg);}
169
+ 75% { transform: rotate(-5deg);}
170
+ 100% { bottom: 0px;transform: rotate(0);}
171
+ }
172
+ @-webkit-keyframes bottombar-back {
173
+ 0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
174
+ 45% {-webkit-transform: rotate(10deg);}
175
+ 75% {-webkit-transform: rotate(-5deg);}
176
+ 100% {bottom: 0px;-webkit-transform: rotate(0);}
177
+ }
178
+ @-moz-keyframes bottombar-back {
179
+ 0% {bottom: 6px;-moz-transform: rotate(-135deg);}
180
+ 45% {-moz-transform: rotate(10deg);}
181
+ 75% {-moz-transform: rotate(-5deg);}
182
+ 100% {bottom: 0px;-moz-transform: rotate(0);}
183
+ }
184
+
185
+ }
@@ -0,0 +1,227 @@
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+ // This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+ @charset "UTF-8";
34
+
35
+ /*!
36
+ Animate.css - http://daneden.me/animate
37
+ Licensed under the MIT license - http://opensource.org/licenses/MIT
38
+
39
+ Copyright (c) 2015 Daniel Eden
40
+ */
41
+
42
+ .animated {
43
+ -webkit-animation-duration: 1s;
44
+ animation-duration: 1s;
45
+ -webkit-animation-fill-mode: both;
46
+ animation-fill-mode: both;
47
+ }
48
+
49
+ .animated.infinite {
50
+ -webkit-animation-iteration-count: infinite;
51
+ animation-iteration-count: infinite;
52
+ }
53
+
54
+ .animated.hinge {
55
+ -webkit-animation-duration: 2s;
56
+ animation-duration: 2s;
57
+ }
58
+
59
+ .animated.bounceIn,
60
+ .animated.bounceOut {
61
+ -webkit-animation-duration: .75s;
62
+ animation-duration: .75s;
63
+ }
64
+
65
+ .animated.flipOutX,
66
+ .animated.flipOutY {
67
+ -webkit-animation-duration: .75s;
68
+ animation-duration: .75s;
69
+ }
70
+
71
+ @-webkit-keyframes shake {
72
+ from, to {
73
+ -webkit-transform: translate3d(0, 0, 0);
74
+ transform: translate3d(0, 0, 0);
75
+ }
76
+
77
+ 10%, 30%, 50%, 70%, 90% {
78
+ -webkit-transform: translate3d(-10px, 0, 0);
79
+ transform: translate3d(-10px, 0, 0);
80
+ }
81
+
82
+ 20%, 40%, 60%, 80% {
83
+ -webkit-transform: translate3d(10px, 0, 0);
84
+ transform: translate3d(10px, 0, 0);
85
+ }
86
+ }
87
+
88
+ @keyframes shake {
89
+ from, to {
90
+ -webkit-transform: translate3d(0, 0, 0);
91
+ transform: translate3d(0, 0, 0);
92
+ }
93
+
94
+ 10%, 30%, 50%, 70%, 90% {
95
+ -webkit-transform: translate3d(-10px, 0, 0);
96
+ transform: translate3d(-10px, 0, 0);
97
+ }
98
+
99
+ 20%, 40%, 60%, 80% {
100
+ -webkit-transform: translate3d(10px, 0, 0);
101
+ transform: translate3d(10px, 0, 0);
102
+ }
103
+ }
104
+
105
+ .shake {
106
+ -webkit-animation-name: shake;
107
+ animation-name: shake;
108
+ }
109
+
110
+
111
+
112
+ @-webkit-keyframes fadeInDown {
113
+ from {
114
+ opacity: 0;
115
+ -webkit-transform: translate3d(0, -100%, 0);
116
+ transform: translate3d(0, -100%, 0);
117
+ }
118
+
119
+ to {
120
+ opacity: 1;
121
+ -webkit-transform: none;
122
+ transform: none;
123
+ }
124
+ }
125
+
126
+ @keyframes fadeInDown {
127
+ from {
128
+ opacity: 0;
129
+ -webkit-transform: translate3d(0, -100%, 0);
130
+ transform: translate3d(0, -100%, 0);
131
+ }
132
+
133
+ to {
134
+ opacity: 1;
135
+ -webkit-transform: none;
136
+ transform: none;
137
+ }
138
+ }
139
+
140
+ .fadeInDown {
141
+ -webkit-animation-name: fadeInDown;
142
+ animation-name: fadeInDown;
143
+ }
144
+
145
+
146
+ @-webkit-keyframes fadeOut {
147
+ from {
148
+ opacity: 1;
149
+ }
150
+
151
+ to {
152
+ opacity: 0;
153
+ }
154
+ }
155
+
156
+ @keyframes fadeOut {
157
+ from {
158
+ opacity: 1;
159
+ }
160
+
161
+ to {
162
+ opacity: 0;
163
+ }
164
+ }
165
+
166
+ .fadeOut {
167
+ -webkit-animation-name: fadeOut;
168
+ animation-name: fadeOut;
169
+ }
170
+
171
+ @-webkit-keyframes fadeOutDown {
172
+ from {
173
+ opacity: 1;
174
+ }
175
+
176
+ to {
177
+ opacity: 0;
178
+ -webkit-transform: translate3d(0, 100%, 0);
179
+ transform: translate3d(0, 100%, 0);
180
+ }
181
+ }
182
+
183
+ @keyframes fadeOutDown {
184
+ from {
185
+ opacity: 1;
186
+ }
187
+
188
+ to {
189
+ opacity: 0;
190
+ -webkit-transform: translate3d(0, 100%, 0);
191
+ transform: translate3d(0, 100%, 0);
192
+ }
193
+ }
194
+
195
+ .fadeOutDown {
196
+ -webkit-animation-name: fadeOutDown;
197
+ animation-name: fadeOutDown;
198
+ }
199
+
200
+ @-webkit-keyframes fadeOutUp {
201
+ from {
202
+ opacity: 1;
203
+ }
204
+
205
+ to {
206
+ opacity: 0;
207
+ -webkit-transform: translate3d(0, -100%, 0);
208
+ transform: translate3d(0, -100%, 0);
209
+ }
210
+ }
211
+
212
+ @keyframes fadeOutUp {
213
+ from {
214
+ opacity: 1;
215
+ }
216
+
217
+ to {
218
+ opacity: 0;
219
+ -webkit-transform: translate3d(0, -100%, 0);
220
+ transform: translate3d(0, -100%, 0);
221
+ }
222
+ }
223
+
224
+ .fadeOutUp {
225
+ -webkit-animation-name: fadeOutUp;
226
+ animation-name: fadeOutUp;
227
+ }