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.
- checksums.yaml +7 -0
- data/README.md +41 -0
- data/lib/creative/dash_papergem/version.rb +8 -0
- data/lib/creative/dash_papergem.rb +10 -0
- data/vendor/assets/fonts/themify.eot +0 -0
- data/vendor/assets/fonts/themify.svg +362 -0
- data/vendor/assets/fonts/themify.ttf +0 -0
- data/vendor/assets/fonts/themify.woff +0 -0
- data/vendor/assets/images/apple-icon.png +0 -0
- data/vendor/assets/images/background.jpg +0 -0
- data/vendor/assets/images/faces/face-0.jpg +0 -0
- data/vendor/assets/images/faces/face-1.jpg +0 -0
- data/vendor/assets/images/faces/face-2.jpg +0 -0
- data/vendor/assets/images/faces/face-3.jpg +0 -0
- data/vendor/assets/images/favicon.png +0 -0
- data/vendor/assets/images/new_logo.png +0 -0
- data/vendor/assets/images/tim_80x80.png +0 -0
- data/vendor/assets/javascripts/bootstrap-checkbox-radio.js +248 -0
- data/vendor/assets/javascripts/bootstrap-notify.js +404 -0
- data/vendor/assets/javascripts/bootstrap.min.js +7 -0
- data/vendor/assets/javascripts/chartist.min.js +9 -0
- data/vendor/assets/javascripts/demo.js +151 -0
- data/vendor/assets/javascripts/jquery-1.10.2.js +9789 -0
- data/vendor/assets/javascripts/paper-dashboard.js +126 -0
- data/vendor/assets/stylesheets/animate.min.css +6 -0
- data/vendor/assets/stylesheets/bootstrap.min.css +5 -0
- data/vendor/assets/stylesheets/demo.css +70 -0
- data/vendor/assets/stylesheets/paper/_alerts.scss +64 -0
- data/vendor/assets/stylesheets/paper/_buttons.scss +114 -0
- data/vendor/assets/stylesheets/paper/_cards.scss +243 -0
- data/vendor/assets/stylesheets/paper/_chartist.scss +230 -0
- data/vendor/assets/stylesheets/paper/_checkbox-radio.scss +132 -0
- data/vendor/assets/stylesheets/paper/_dropdown.scss +115 -0
- data/vendor/assets/stylesheets/paper/_footers.scss +43 -0
- data/vendor/assets/stylesheets/paper/_inputs.scss +171 -0
- data/vendor/assets/stylesheets/paper/_misc.scss +69 -0
- data/vendor/assets/stylesheets/paper/_mixins.scss +17 -0
- data/vendor/assets/stylesheets/paper/_navbars.scss +167 -0
- data/vendor/assets/stylesheets/paper/_responsive.scss +447 -0
- data/vendor/assets/stylesheets/paper/_sidebar-and-main-panel.scss +195 -0
- data/vendor/assets/stylesheets/paper/_tables.scss +77 -0
- data/vendor/assets/stylesheets/paper/_typography.scss +117 -0
- data/vendor/assets/stylesheets/paper/_variables.scss +262 -0
- data/vendor/assets/stylesheets/paper/mixins/_buttons.scss +85 -0
- data/vendor/assets/stylesheets/paper/mixins/_cards.scss +8 -0
- data/vendor/assets/stylesheets/paper/mixins/_chartist.scss +104 -0
- data/vendor/assets/stylesheets/paper/mixins/_icons.scss +13 -0
- data/vendor/assets/stylesheets/paper/mixins/_inputs.scss +17 -0
- data/vendor/assets/stylesheets/paper/mixins/_labels.scss +21 -0
- data/vendor/assets/stylesheets/paper/mixins/_navbars.scss +11 -0
- data/vendor/assets/stylesheets/paper/mixins/_sidebar.scss +42 -0
- data/vendor/assets/stylesheets/paper/mixins/_tabs.scss +4 -0
- data/vendor/assets/stylesheets/paper/mixins/_transparency.scss +20 -0
- data/vendor/assets/stylesheets/paper/mixins/_vendor-prefixes.scss +197 -0
- data/vendor/assets/stylesheets/paper-dashboard.css +3315 -0
- data/vendor/assets/stylesheets/paper-dashboard.scss +28 -0
- data/vendor/assets/stylesheets/themify-icons.css +1081 -0
- 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,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,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,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
|
+
|