creative-dashpaper-gem 0.0.1

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 (58) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +41 -0
  3. data/lib/creative/dash_papergem/version.rb +8 -0
  4. data/lib/creative/dash_papergem.rb +10 -0
  5. data/vendor/assets/fonts/themify.eot +0 -0
  6. data/vendor/assets/fonts/themify.svg +362 -0
  7. data/vendor/assets/fonts/themify.ttf +0 -0
  8. data/vendor/assets/fonts/themify.woff +0 -0
  9. data/vendor/assets/images/apple-icon.png +0 -0
  10. data/vendor/assets/images/background.jpg +0 -0
  11. data/vendor/assets/images/faces/face-0.jpg +0 -0
  12. data/vendor/assets/images/faces/face-1.jpg +0 -0
  13. data/vendor/assets/images/faces/face-2.jpg +0 -0
  14. data/vendor/assets/images/faces/face-3.jpg +0 -0
  15. data/vendor/assets/images/favicon.png +0 -0
  16. data/vendor/assets/images/new_logo.png +0 -0
  17. data/vendor/assets/images/tim_80x80.png +0 -0
  18. data/vendor/assets/javascripts/bootstrap-checkbox-radio.js +248 -0
  19. data/vendor/assets/javascripts/bootstrap-notify.js +404 -0
  20. data/vendor/assets/javascripts/bootstrap.min.js +7 -0
  21. data/vendor/assets/javascripts/chartist.min.js +9 -0
  22. data/vendor/assets/javascripts/demo.js +151 -0
  23. data/vendor/assets/javascripts/jquery-1.10.2.js +9789 -0
  24. data/vendor/assets/javascripts/paper-dashboard.js +126 -0
  25. data/vendor/assets/stylesheets/animate.min.css +6 -0
  26. data/vendor/assets/stylesheets/bootstrap.min.css +5 -0
  27. data/vendor/assets/stylesheets/demo.css +70 -0
  28. data/vendor/assets/stylesheets/paper/_alerts.scss +64 -0
  29. data/vendor/assets/stylesheets/paper/_buttons.scss +114 -0
  30. data/vendor/assets/stylesheets/paper/_cards.scss +243 -0
  31. data/vendor/assets/stylesheets/paper/_chartist.scss +230 -0
  32. data/vendor/assets/stylesheets/paper/_checkbox-radio.scss +132 -0
  33. data/vendor/assets/stylesheets/paper/_dropdown.scss +115 -0
  34. data/vendor/assets/stylesheets/paper/_footers.scss +43 -0
  35. data/vendor/assets/stylesheets/paper/_inputs.scss +171 -0
  36. data/vendor/assets/stylesheets/paper/_misc.scss +69 -0
  37. data/vendor/assets/stylesheets/paper/_mixins.scss +17 -0
  38. data/vendor/assets/stylesheets/paper/_navbars.scss +167 -0
  39. data/vendor/assets/stylesheets/paper/_responsive.scss +447 -0
  40. data/vendor/assets/stylesheets/paper/_sidebar-and-main-panel.scss +195 -0
  41. data/vendor/assets/stylesheets/paper/_tables.scss +77 -0
  42. data/vendor/assets/stylesheets/paper/_typography.scss +117 -0
  43. data/vendor/assets/stylesheets/paper/_variables.scss +262 -0
  44. data/vendor/assets/stylesheets/paper/mixins/_buttons.scss +85 -0
  45. data/vendor/assets/stylesheets/paper/mixins/_cards.scss +8 -0
  46. data/vendor/assets/stylesheets/paper/mixins/_chartist.scss +104 -0
  47. data/vendor/assets/stylesheets/paper/mixins/_icons.scss +13 -0
  48. data/vendor/assets/stylesheets/paper/mixins/_inputs.scss +17 -0
  49. data/vendor/assets/stylesheets/paper/mixins/_labels.scss +21 -0
  50. data/vendor/assets/stylesheets/paper/mixins/_navbars.scss +11 -0
  51. data/vendor/assets/stylesheets/paper/mixins/_sidebar.scss +42 -0
  52. data/vendor/assets/stylesheets/paper/mixins/_tabs.scss +4 -0
  53. data/vendor/assets/stylesheets/paper/mixins/_transparency.scss +20 -0
  54. data/vendor/assets/stylesheets/paper/mixins/_vendor-prefixes.scss +197 -0
  55. data/vendor/assets/stylesheets/paper-dashboard.css +3315 -0
  56. data/vendor/assets/stylesheets/paper-dashboard.scss +28 -0
  57. data/vendor/assets/stylesheets/themify-icons.css +1081 -0
  58. metadata +148 -0
@@ -0,0 +1,85 @@
1
+ // Mixin for generating new styles
2
+ @mixin btn-styles($btn-color, $btn-states-color) {
3
+ border-color: $btn-color;
4
+ color: $btn-color;
5
+
6
+ &:hover,
7
+ &:focus,
8
+ &:active,
9
+ &.active,
10
+ .open > &.dropdown-toggle {
11
+ background-color: $btn-color;
12
+ color: $fill-font-color;
13
+ border-color: $btn-color;
14
+ .caret{
15
+ border-top-color: $fill-font-color;
16
+ }
17
+ }
18
+
19
+ &.disabled,
20
+ &:disabled,
21
+ &[disabled],
22
+ fieldset[disabled] & {
23
+ &,
24
+ &:hover,
25
+ &:focus,
26
+ &.focus,
27
+ &:active,
28
+ &.active {
29
+ background-color: $transparent-bg;
30
+ border-color: $btn-color;
31
+ }
32
+ }
33
+
34
+
35
+ &.btn-fill {
36
+ color: $white-color;
37
+ background-color: $btn-color;
38
+ @include opacity(1);
39
+
40
+ &:hover,
41
+ &:focus,
42
+ &:active,
43
+ &.active,
44
+ .open > &.dropdown-toggle{
45
+ background-color: $btn-states-color;
46
+ color: $white-color;
47
+ border-color: $btn-states-color;
48
+ }
49
+
50
+ .caret{
51
+ border-top-color: $white-color;
52
+ }
53
+ }
54
+
55
+ &.btn-simple {
56
+ &:hover,
57
+ &:focus,
58
+ &:active,
59
+ &.active,
60
+ .open > &.dropdown-toggle{
61
+ background-color: $transparent-bg;
62
+ color: $btn-states-color;
63
+ }
64
+
65
+ .caret{
66
+ border-top-color: $white-color;
67
+ }
68
+ }
69
+
70
+ .caret{
71
+ border-top-color: $btn-color;
72
+ }
73
+ }
74
+
75
+
76
+ @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border, $line-height){
77
+ font-size: $font-size;
78
+ border-radius: $border;
79
+ padding: $padding-vertical $padding-horizontal;
80
+
81
+ &.btn-simple{
82
+ padding: $padding-vertical + 2 $padding-horizontal;
83
+ }
84
+
85
+ }
@@ -0,0 +1,8 @@
1
+ @mixin filter($color){
2
+ @if $color == #FFFFFF{
3
+ background-color: rgba($color,.91);
4
+ } @else {
5
+ background-color: rgba($color,.69);
6
+ }
7
+ }
8
+
@@ -0,0 +1,104 @@
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: 0.9em !default;
32
+ $ct-text-align: flex-start !default;
33
+ $ct-text-justify: flex-start !default;
34
+ $ct-text-line-height: 1;
35
+
36
+ // Grid styles
37
+ $ct-grid-color: rgba(0, 0, 0, 0.2) !default;
38
+ $ct-grid-dasharray: 2px !default;
39
+ $ct-grid-width: 1px !default;
40
+
41
+ // Line chart properties
42
+ $ct-line-width: 4px !default;
43
+ $ct-line-dasharray: false !default;
44
+ $ct-point-size: 10px !default;
45
+ // Line chart point, can be either round or square
46
+ $ct-point-shape: round !default;
47
+ // Area fill transparency between 0 and 1
48
+ $ct-area-opacity: 0.7 !default;
49
+
50
+ // Bar chart bar width
51
+ $ct-bar-width: 10px !default;
52
+
53
+ // Donut width (If donut width is to big it can cause issues where the shape gets distorted)
54
+ $ct-donut-width: 60px !default;
55
+
56
+ // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
57
+ // should set this property to false
58
+ $ct-include-classes: true !default;
59
+
60
+ // If this is set to true the CSS will contain colored series. You can extend or change the color with the
61
+ // properties below
62
+ $ct-include-colored-series: $ct-include-classes !default;
63
+
64
+ // If set to true this will include all responsive container variations using the scales defined at the top of the script
65
+ $ct-include-alternative-responsive-containers: $ct-include-classes !default;
66
+
67
+ // Series names and colors. This can be extended or customized as desired. Just add more series and colors.
68
+ $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
69
+ $ct-series-colors: (
70
+ $info-color,
71
+ $warning-color,
72
+ $danger-color,
73
+ $success-color,
74
+ $primary-color,
75
+ rgba($info-color,.8),
76
+ rgba($success-color,.8),
77
+ rgba($warning-color,.8),
78
+ rgba($danger-color,.8),
79
+ rgba($primary-color,.8),
80
+ rgba($info-color,.6),
81
+ rgba($success-color,.6),
82
+ rgba($warning-color,.6),
83
+ rgba($danger-color,.6),
84
+ rgba($primary-color,.6)
85
+
86
+ ) !default;
87
+
88
+ // Paper Kit Colors
89
+
90
+ .ct-blue{
91
+ stroke: $primary-color !important;
92
+ }
93
+ .ct-azure{
94
+ stroke: $info-color !important;
95
+ }
96
+ .ct-green{
97
+ stroke: $success-color !important;
98
+ }
99
+ .ct-orange{
100
+ stroke: $warning-color !important;
101
+ }
102
+ .ct-red{
103
+ stroke: $danger-color !important;
104
+ }
@@ -0,0 +1,13 @@
1
+ @mixin icon-background ($icon-url){
2
+ background-image : url($icon-url);
3
+
4
+ }
5
+
6
+ @mixin icon-shape ($size, $padding, $border-radius) {
7
+ height: $size;
8
+ width: $size;
9
+ padding: $padding;
10
+ border-radius: $border-radius;
11
+ display: inline-table;
12
+
13
+ }
@@ -0,0 +1,17 @@
1
+ @mixin input-size($padding-vertical, $padding-horizontal, $height){
2
+ padding: $padding-vertical $padding-horizontal;
3
+ height: $height;
4
+ }
5
+
6
+ @mixin placeholder($color, $opacity){
7
+ color: $color;
8
+ @include opacity(1);
9
+ }
10
+
11
+ @mixin light-form(){
12
+ border-radius: 0;
13
+ border:0;
14
+ padding: 0;
15
+ background-color: transparent;
16
+
17
+ }
@@ -0,0 +1,21 @@
1
+ @mixin label-style(){
2
+ padding: $padding-label-vertical $padding-label-horizontal;
3
+ border: 1px solid $default-color;
4
+ border-radius: $border-radius-small;
5
+ color: $default-color;
6
+ font-weight: $font-weight-semi;
7
+ font-size: $font-size-small;
8
+ text-transform: uppercase;
9
+ display: inline-block;
10
+ vertical-align: middle;
11
+ }
12
+
13
+ @mixin label-color($color){
14
+ border-color: $color;
15
+ color: $color;
16
+ }
17
+ @mixin label-color-fill($color){
18
+ border-color: $color;
19
+ color: $white-color;
20
+ background-color: $color;
21
+ }
@@ -0,0 +1,11 @@
1
+ @mixin navbar-color($color){
2
+ background-color: $color;
3
+ }
4
+
5
+ @mixin center-item(){
6
+ left: 0;
7
+ right: 0;
8
+ margin-right: auto;
9
+ margin-left: auto;
10
+ position: absolute;
11
+ }
@@ -0,0 +1,42 @@
1
+ @mixin sidebar-background-color($background-color, $font-color){
2
+ &:after,
3
+ &:before{
4
+ background-color: $background-color;
5
+ }
6
+
7
+ .logo{
8
+ border-bottom: 1px solid rgba($font-color,.3);
9
+
10
+ p{
11
+ color: $font-color;
12
+ }
13
+
14
+ .simple-text{
15
+ color: $font-color;
16
+ }
17
+ }
18
+
19
+ .nav{
20
+ li:not(.active){
21
+ > a{
22
+ color: $font-color;
23
+ }
24
+ }
25
+ .divider{
26
+ background-color: rgba($font-color,.2);
27
+ }
28
+
29
+ }
30
+
31
+ }
32
+
33
+ @mixin sidebar-active-color($font-color){
34
+ .nav{
35
+ li{
36
+ &.active > a{
37
+ color: $font-color;
38
+ opacity: 1;
39
+ }
40
+ }
41
+ }
42
+ }
@@ -0,0 +1,4 @@
1
+ @mixin pill-style($color){
2
+ border: 1px solid $color;
3
+ color: $color;
4
+ }
@@ -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,197 @@
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 transition-none(){
33
+ -webkit-transition: none;
34
+ -moz-transition: none;
35
+ -o-transition: none;
36
+ -ms-transition: none;
37
+ transition: none;
38
+ }
39
+
40
+ @mixin transform-scale($value){
41
+ -webkit-transform: scale($value);
42
+ -moz-transform: scale($value);
43
+ -o-transform: scale($value);
44
+ -ms-transform: scale($value);
45
+ transform: scale($value);
46
+ }
47
+
48
+ @mixin transform-translate-x($value){
49
+ -webkit-transform: translate3d($value, 0, 0);
50
+ -moz-transform: translate3d($value, 0, 0);
51
+ -o-transform: translate3d($value, 0, 0);
52
+ -ms-transform: translate3d($value, 0, 0);
53
+ transform: translate3d($value, 0, 0);
54
+ }
55
+
56
+ @mixin transform-origin($coordinates){
57
+ -webkit-transform-origin: $coordinates;
58
+ -moz-transform-origin: $coordinates;
59
+ -o-transform-origin: $coordinates;
60
+ -ms-transform-origin: $coordinates;
61
+ transform-origin: $coordinates;
62
+ }
63
+
64
+ @mixin icon-gradient ($top-color, $bottom-color){
65
+ background: $top-color;
66
+ background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%);
67
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color));
68
+ background: -webkit-linear-gradient(top, $top-color 0%,$bottom-color 100%);
69
+ background: -o-linear-gradient(top, $top-color 0%,$bottom-color 100%);
70
+ background: -ms-linear-gradient(top, $top-color 0%,$bottom-color 100%);
71
+ background: linear-gradient(to bottom, $top-color 0%,$bottom-color 100%);
72
+ background-size: 150% 150%;
73
+ }
74
+
75
+ @mixin radial-gradient($extern-color, $center-color){
76
+ background: $extern-color;
77
+ background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
78
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
79
+ background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
80
+ background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
81
+ background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
82
+ background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
83
+ background-size: 550% 450%;
84
+ }
85
+
86
+ @mixin vertical-align {
87
+ position: relative;
88
+ top: 50%;
89
+ -webkit-transform: translateY(-50%);
90
+ -ms-transform: translateY(-50%);
91
+ transform: translateY(-50%);
92
+ }
93
+
94
+ @mixin rotate-180(){
95
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
96
+ -webkit-transform: rotate(180deg);
97
+ -ms-transform: rotate(180deg);
98
+ transform: rotate(180deg);
99
+ }
100
+
101
+ @mixin bar-animation($type){
102
+ -webkit-animation: $type 500ms linear 0s;
103
+ -moz-animation: $type 500ms linear 0s;
104
+ animation: $type 500ms 0s;
105
+ -webkit-animation-fill-mode: forwards;
106
+ -moz-animation-fill-mode: forwards;
107
+ animation-fill-mode: forwards;
108
+ }
109
+
110
+ @mixin topbar-x-rotation(){
111
+ @keyframes topbar-x {
112
+ 0% {top: 0px; transform: rotate(0deg); }
113
+ 45% {top: 6px; transform: rotate(145deg); }
114
+ 75% {transform: rotate(130deg); }
115
+ 100% {transform: rotate(135deg); }
116
+ }
117
+ @-webkit-keyframes topbar-x {
118
+ 0% {top: 0px; -webkit-transform: rotate(0deg); }
119
+ 45% {top: 6px; -webkit-transform: rotate(145deg); }
120
+ 75% {-webkit-transform: rotate(130deg); }
121
+ 100% { -webkit-transform: rotate(135deg); }
122
+ }
123
+ @-moz-keyframes topbar-x {
124
+ 0% {top: 0px; -moz-transform: rotate(0deg); }
125
+ 45% {top: 6px; -moz-transform: rotate(145deg); }
126
+ 75% {-moz-transform: rotate(130deg); }
127
+ 100% { -moz-transform: rotate(135deg); }
128
+ }
129
+ }
130
+
131
+ @mixin topbar-back-rotation(){
132
+ @keyframes topbar-back {
133
+ 0% { top: 6px; transform: rotate(135deg); }
134
+ 45% { transform: rotate(-10deg); }
135
+ 75% { transform: rotate(5deg); }
136
+ 100% { top: 0px; transform: rotate(0); }
137
+ }
138
+
139
+ @-webkit-keyframes topbar-back {
140
+ 0% { top: 6px; -webkit-transform: rotate(135deg); }
141
+ 45% { -webkit-transform: rotate(-10deg); }
142
+ 75% { -webkit-transform: rotate(5deg); }
143
+ 100% { top: 0px; -webkit-transform: rotate(0); }
144
+ }
145
+
146
+ @-moz-keyframes topbar-back {
147
+ 0% { top: 6px; -moz-transform: rotate(135deg); }
148
+ 45% { -moz-transform: rotate(-10deg); }
149
+ 75% { -moz-transform: rotate(5deg); }
150
+ 100% { top: 0px; -moz-transform: rotate(0); }
151
+ }
152
+ }
153
+
154
+ @mixin bottombar-x-rotation(){
155
+ @keyframes bottombar-x {
156
+ 0% {bottom: 0px; transform: rotate(0deg);}
157
+ 45% {bottom: 6px; transform: rotate(-145deg);}
158
+ 75% {transform: rotate(-130deg);}
159
+ 100% {transform: rotate(-135deg);}
160
+ }
161
+ @-webkit-keyframes bottombar-x {
162
+ 0% {bottom: 0px; -webkit-transform: rotate(0deg);}
163
+ 45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
164
+ 75% {-webkit-transform: rotate(-130deg);}
165
+ 100% {-webkit-transform: rotate(-135deg);}
166
+ }
167
+ @-moz-keyframes bottombar-x {
168
+ 0% {bottom: 0px; -moz-transform: rotate(0deg);}
169
+ 45% {bottom: 6px; -moz-transform: rotate(-145deg);}
170
+ 75% {-moz-transform: rotate(-130deg);}
171
+ 100% {-moz-transform: rotate(-135deg);}
172
+ }
173
+ }
174
+
175
+ @mixin bottombar-back-rotation{
176
+ @keyframes bottombar-back {
177
+ 0% { bottom: 6px;transform: rotate(-135deg);}
178
+ 45% { transform: rotate(10deg);}
179
+ 75% { transform: rotate(-5deg);}
180
+ 100% { bottom: 0px;transform: rotate(0);}
181
+ }
182
+ @-webkit-keyframes bottombar-back {
183
+ 0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
184
+ 45% {-webkit-transform: rotate(10deg);}
185
+ 75% {-webkit-transform: rotate(-5deg);}
186
+ 100% {bottom: 0px;-webkit-transform: rotate(0);}
187
+ }
188
+ @-moz-keyframes bottombar-back {
189
+ 0% {bottom: 6px;-moz-transform: rotate(-135deg);}
190
+ 45% {-moz-transform: rotate(10deg);}
191
+ 75% {-moz-transform: rotate(-5deg);}
192
+ 100% {bottom: 0px;-moz-transform: rotate(0);}
193
+ }
194
+
195
+ }
196
+
197
+