material-sass 0.0.3 → 0.0.4
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 +4 -4
- data/app/assets/fonts/MaterialIcons-Regular.eot +0 -0
- data/app/assets/fonts/MaterialIcons-Regular.ttf +0 -0
- data/app/assets/fonts/MaterialIcons-Regular.woff +0 -0
- data/app/assets/fonts/MaterialIcons-Regular.woff2 +0 -0
- data/app/assets/javascripts/init.js +9 -0
- data/app/assets/javascripts/material/_.js +1 -5
- data/app/assets/javascripts/material/bootstrap.js +2 -2
- data/app/assets/javascripts/material/datepicker.js +58 -18
- data/app/assets/javascripts/material/dropdown.js +0 -13
- data/app/assets/javascripts/material/form-adv.js +2 -2
- data/app/assets/javascripts/material/header.js +39 -41
- data/app/assets/javascripts/material/menu.js +11 -35
- data/app/assets/javascripts/material/wave.js +10 -13
- data/app/assets/javascripts/material/webfont.js +33 -36
- data/app/assets/javascripts/material-sprockets.js +2 -1
- data/app/assets/stylesheets/material/_code.scss +1 -1
- data/app/assets/stylesheets/material/_reset.scss +16 -17
- data/app/assets/stylesheets/material/_utilities.scss +13 -16
- data/app/assets/stylesheets/material/_variable.scss +6 -3
- data/app/assets/stylesheets/material/addon/_material-design-icon.scss +6 -6
- data/app/assets/stylesheets/material/addon/_waves.scss +11 -17
- data/app/assets/stylesheets/material/addon/material-design-icon/_core.scss +18 -15
- data/app/assets/stylesheets/material/addon/material-design-icon/_larger.scss +20 -0
- data/app/assets/stylesheets/material/addon/material-design-icon/_path.scss +9 -8
- data/app/assets/stylesheets/material/addon/material-design-icon/_variables.scss +2 -776
- data/app/assets/stylesheets/material/base.scss +3 -0
- data/app/assets/stylesheets/material/element/_avatar.scss +2 -2
- data/app/assets/stylesheets/material/element/_breadcrumb.scss +2 -2
- data/app/assets/stylesheets/material/element/_button-flat.scss +32 -0
- data/app/assets/stylesheets/material/element/_button-float.scss +47 -60
- data/app/assets/stylesheets/material/element/_button.scss +18 -42
- data/app/assets/stylesheets/material/element/_card.scss +7 -19
- data/app/assets/stylesheets/material/element/_dropdown.scss +15 -18
- data/app/assets/stylesheets/material/element/_form-adv-checkbox.scss +12 -26
- data/app/assets/stylesheets/material/element/_form-adv-datepicker.scss +77 -55
- data/app/assets/stylesheets/material/element/_form-adv-label.scss +2 -2
- data/app/assets/stylesheets/material/element/_form-adv-switch.scss +38 -12
- data/app/assets/stylesheets/material/element/_form.scss +7 -7
- data/app/assets/stylesheets/material/element/_label.scss +1 -1
- data/app/assets/stylesheets/material/element/_modal.scss +22 -19
- data/app/assets/stylesheets/material/element/_progress-circular.scss +165 -0
- data/app/assets/stylesheets/material/element/_progress-loadbar.scss +103 -0
- data/app/assets/stylesheets/material/element/_progress.scss +7 -411
- data/app/assets/stylesheets/material/element/_sortable.scss +2 -2
- data/app/assets/stylesheets/material/element/_tab.scss +49 -17
- data/app/assets/stylesheets/material/element/_tile.scss +11 -13
- data/app/assets/stylesheets/material/element/_toast.scss +10 -11
- data/app/assets/stylesheets/material/mixin/_css3.scss +0 -45
- data/app/assets/stylesheets/material/theme/_content.scss +7 -7
- data/app/assets/stylesheets/material/theme/_header.scss +29 -173
- data/app/assets/stylesheets/material/theme/_menu.scss +160 -210
- data/lib/material-sass/engine.rb +1 -1
- data/lib/material-sass/version.rb +1 -1
- metadata +12 -9
- data/app/assets/fonts/MaterialDesignIcon.eot +0 -0
- data/app/assets/fonts/MaterialDesignIcon.svg +0 -773
- data/app/assets/fonts/MaterialDesignIcon.ttf +0 -0
- data/app/assets/fonts/MaterialDesignIcon.woff +0 -0
- data/app/assets/javascripts/material/sortable.js +0 -10
- data/app/assets/stylesheets/material/addon/material-design-icon/_icons.scss +0 -773
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
.progress-circular {
|
|
2
|
+
height: ($line-height * 2);
|
|
3
|
+
margin-top: $line-height;
|
|
4
|
+
margin-bottom: $line-height;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
position: relative;
|
|
7
|
+
width: ($line-height * 2);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.progress-circular-center {
|
|
11
|
+
margin-right: auto;
|
|
12
|
+
margin-left: auto;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.progress-circular-gap {
|
|
16
|
+
border-top: ($base / 2) solid $link-color;
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: 0;
|
|
19
|
+
right: ($line-height - 1);
|
|
20
|
+
bottom: 0;
|
|
21
|
+
left: ($line-height - 1);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// colour
|
|
25
|
+
@each $color in $palette-list {
|
|
26
|
+
$i: index($palette-list, $color);
|
|
27
|
+
|
|
28
|
+
.progress-circular-gap {
|
|
29
|
+
.progress-circular-#{$color} & {
|
|
30
|
+
border-top-color: nth($palette-color, $i);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.progress-circular-inline {
|
|
36
|
+
display: inline-block;
|
|
37
|
+
margin-right: $grid-gutter;
|
|
38
|
+
margin-left: $grid-gutter;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.progress-circular-inner {
|
|
42
|
+
animation: pcircular-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
|
|
43
|
+
height: ($line-height * 2);
|
|
44
|
+
position: relative;
|
|
45
|
+
width: ($line-height * 2);
|
|
46
|
+
will-change: transform;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.progress-circular-left,
|
|
50
|
+
.progress-circular-right {
|
|
51
|
+
height: ($line-height * 2);
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
position: absolute;
|
|
54
|
+
top: 0;
|
|
55
|
+
width: $line-height;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.progress-circular-left {
|
|
59
|
+
// position
|
|
60
|
+
left: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.progress-circular-right {
|
|
64
|
+
// position
|
|
65
|
+
right: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.progress-circular-spinner {
|
|
69
|
+
border: ($base / 2) solid $link-color;
|
|
70
|
+
border-bottom-color: transparent;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
height: ($line-height * 2);
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: 0;
|
|
75
|
+
width: ($line-height * 2);
|
|
76
|
+
will-change: transform;
|
|
77
|
+
.progress-circular-left & {
|
|
78
|
+
animation: pcircular-spinner-left 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
|
|
79
|
+
border-right-color: transparent;
|
|
80
|
+
// position
|
|
81
|
+
left: 0;
|
|
82
|
+
}
|
|
83
|
+
.progress-circular-right & {
|
|
84
|
+
animation: pcircular-spinner-right 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
|
|
85
|
+
border-left-color: transparent;
|
|
86
|
+
// position
|
|
87
|
+
right: 0;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// colour
|
|
92
|
+
@each $color in $palette-list {
|
|
93
|
+
$i: index($palette-list, $color);
|
|
94
|
+
|
|
95
|
+
.progress-circular-spinner {
|
|
96
|
+
.progress-circular-#{$color} & {
|
|
97
|
+
border-top-color: nth($palette-color, $i);
|
|
98
|
+
}
|
|
99
|
+
.progress-circular-#{$color} .progress-circular-left & {
|
|
100
|
+
border-left-color: nth($palette-color, $i);
|
|
101
|
+
}
|
|
102
|
+
.progress-circular-#{$color} .progress-circular-right & {
|
|
103
|
+
border-right-color: nth($palette-color, $i);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.progress-circular-wrapper {
|
|
109
|
+
animation: pcircular-wrapper-rotate 2.91667s linear infinite;
|
|
110
|
+
will-change: transform;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// animation
|
|
114
|
+
@keyframes pcircular-inner-rotate {
|
|
115
|
+
12.5% {
|
|
116
|
+
transform: rotate(135deg);
|
|
117
|
+
}
|
|
118
|
+
25% {
|
|
119
|
+
transform: rotate(270deg);
|
|
120
|
+
}
|
|
121
|
+
37.5% {
|
|
122
|
+
transform: rotate(405deg);
|
|
123
|
+
}
|
|
124
|
+
50% {
|
|
125
|
+
transform: rotate(540deg);
|
|
126
|
+
}
|
|
127
|
+
62.5% {
|
|
128
|
+
transform: rotate(675deg);
|
|
129
|
+
}
|
|
130
|
+
75% {
|
|
131
|
+
transform: rotate(810deg);
|
|
132
|
+
}
|
|
133
|
+
87.5% {
|
|
134
|
+
transform: rotate(945deg);
|
|
135
|
+
}
|
|
136
|
+
100% {
|
|
137
|
+
transform: rotate(1080deg);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@keyframes pcircular-spinner-left {
|
|
142
|
+
0%,
|
|
143
|
+
100% {
|
|
144
|
+
transform: rotate(130deg);
|
|
145
|
+
}
|
|
146
|
+
50% {
|
|
147
|
+
transform: rotate(-5deg);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
@keyframes pcircular-spinner-right {
|
|
152
|
+
0%,
|
|
153
|
+
100% {
|
|
154
|
+
transform: rotate(-130deg);
|
|
155
|
+
}
|
|
156
|
+
50% {
|
|
157
|
+
transform: rotate(5deg);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
@keyframes pcircular-wrapper-rotate {
|
|
162
|
+
100% {
|
|
163
|
+
transform: rotate(360deg);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
.load-bar {
|
|
2
|
+
float: right;
|
|
3
|
+
height: 100%;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
width: 50%;
|
|
6
|
+
&:first-child {
|
|
7
|
+
float: left;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.load-bar-base {
|
|
12
|
+
animation: load-bar-right-in 1s $timing 1 forwards;
|
|
13
|
+
background-color: $link-color;
|
|
14
|
+
float: left;
|
|
15
|
+
height: 100%;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
transform: translate3d(-100%, 0, 0);
|
|
18
|
+
transform-origin: top right;
|
|
19
|
+
width: 100%;
|
|
20
|
+
will-change: transform;
|
|
21
|
+
.load-bar:first-child & {
|
|
22
|
+
animation: load-bar-left-in 1s $timing 1 forwards;
|
|
23
|
+
transform: translate3d(100%, 0, 0);
|
|
24
|
+
transform-origin: top left;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// animation
|
|
29
|
+
@keyframes load-bar-left-in {
|
|
30
|
+
0% {
|
|
31
|
+
transform: translate(100%, 0);
|
|
32
|
+
transform: translate3d(100%, 0, 0);
|
|
33
|
+
}
|
|
34
|
+
100% {
|
|
35
|
+
transform: translate(0, 0);
|
|
36
|
+
transform: translate3d(0, 0, 0);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@keyframes load-bar-right-in {
|
|
41
|
+
0% {
|
|
42
|
+
transform: translate(-100%, 0);
|
|
43
|
+
transform: translate3d(-100%, 0, 0);
|
|
44
|
+
}
|
|
45
|
+
100% {
|
|
46
|
+
transform: translate(0, 0);
|
|
47
|
+
transform: translate3d(0, 0, 0);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.load-bar-content {
|
|
52
|
+
animation: load-bar-right 4s linear infinite forwards;
|
|
53
|
+
animation-delay: 1s;
|
|
54
|
+
float: left;
|
|
55
|
+
height: 100%;
|
|
56
|
+
position: relative;
|
|
57
|
+
transform-origin: top center;
|
|
58
|
+
width: 400%;
|
|
59
|
+
will-change: transform;
|
|
60
|
+
.load-bar:first-child & {
|
|
61
|
+
animation: load-bar-left 4s linear infinite forwards;
|
|
62
|
+
animation-delay: 1s;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// animation
|
|
67
|
+
@keyframes load-bar-left {
|
|
68
|
+
0% {
|
|
69
|
+
transform: translate(0, 0);
|
|
70
|
+
transform: translate3d(0, 0, 0);
|
|
71
|
+
}
|
|
72
|
+
100% {
|
|
73
|
+
transform: translate(-100%, 0);
|
|
74
|
+
transform: translate3d(-100%, 0, 0);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@keyframes load-bar-right {
|
|
79
|
+
0% {
|
|
80
|
+
transform: translate(-100%, 0);
|
|
81
|
+
transform: translate3d(-100%, 0, 0);
|
|
82
|
+
}
|
|
83
|
+
100% {
|
|
84
|
+
transform: translate(0, 0);
|
|
85
|
+
transform: translate3d(0, 0, 0);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.load-bar-progress {
|
|
90
|
+
background-color: transparent;
|
|
91
|
+
float: left;
|
|
92
|
+
height: 100%;
|
|
93
|
+
width: 25%;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// colour
|
|
97
|
+
@each $color in $palette-list {
|
|
98
|
+
$i: index($palette-list, $color);
|
|
99
|
+
|
|
100
|
+
.load-bar-progress-#{$color} {
|
|
101
|
+
background-color: nth($palette-color, $i);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
@@ -1,154 +1,3 @@
|
|
|
1
|
-
.load-bar {
|
|
2
|
-
float: right;
|
|
3
|
-
height: 100%;
|
|
4
|
-
overflow: hidden;
|
|
5
|
-
width: 50%;
|
|
6
|
-
&:first-child {
|
|
7
|
-
float: left;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.load-bar-base {
|
|
12
|
-
background-color: $link-color;
|
|
13
|
-
float: left;
|
|
14
|
-
height: 100%;
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
width: 100%;
|
|
17
|
-
@include animation(load-bar-right-in 1s $timing 1 forwards);
|
|
18
|
-
@include transform(translate3d(-100%, 0, 0));
|
|
19
|
-
-webkit-transform-origin: top right;
|
|
20
|
-
transform-origin: top right;
|
|
21
|
-
.load-bar:first-child & {
|
|
22
|
-
@include animation(load-bar-left-in 1s $timing 1 forwards);
|
|
23
|
-
@include transform(translate3d(100%, 0, 0));
|
|
24
|
-
-webkit-transform-origin: top left;
|
|
25
|
-
transform-origin: top left;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
// animation
|
|
30
|
-
@-webkit-keyframes load-bar-left-in {
|
|
31
|
-
0% {
|
|
32
|
-
@include transform(translate(100%, 0));
|
|
33
|
-
@include transform(translate3d(100%, 0, 0));
|
|
34
|
-
}
|
|
35
|
-
100% {
|
|
36
|
-
@include transform(translate(0, 0));
|
|
37
|
-
@include transform(translate3d(0, 0, 0));
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@keyframes load-bar-left-in {
|
|
42
|
-
0% {
|
|
43
|
-
@include transform(translate(100%, 0));
|
|
44
|
-
@include transform(translate3d(100%, 0, 0));
|
|
45
|
-
}
|
|
46
|
-
100% {
|
|
47
|
-
@include transform(translate(0, 0));
|
|
48
|
-
@include transform(translate3d(0, 0, 0));
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@-webkit-keyframes load-bar-right-in {
|
|
53
|
-
0% {
|
|
54
|
-
@include transform(translate(-100%, 0));
|
|
55
|
-
@include transform(translate3d(-100%, 0, 0));
|
|
56
|
-
}
|
|
57
|
-
100% {
|
|
58
|
-
@include transform(translate(0, 0));
|
|
59
|
-
@include transform(translate3d(0, 0, 0));
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@keyframes load-bar-right-in {
|
|
64
|
-
0% {
|
|
65
|
-
@include transform(translate(-100%, 0));
|
|
66
|
-
@include transform(translate3d(-100%, 0, 0));
|
|
67
|
-
}
|
|
68
|
-
100% {
|
|
69
|
-
@include transform(translate(0, 0));
|
|
70
|
-
@include transform(translate3d(0, 0, 0));
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.load-bar-content {
|
|
75
|
-
float: left;
|
|
76
|
-
height: 100%;
|
|
77
|
-
position: relative;
|
|
78
|
-
width: 400%;
|
|
79
|
-
@include animation(load-bar-right 4s linear infinite forwards);
|
|
80
|
-
-webkit-animation-delay: 1s;
|
|
81
|
-
animation-delay: 1s;
|
|
82
|
-
-webkit-transform-origin: top center;
|
|
83
|
-
transform-origin: top center;
|
|
84
|
-
.load-bar:first-child & {
|
|
85
|
-
@include animation(load-bar-left 4s linear infinite forwards);
|
|
86
|
-
-webkit-animation-delay: 1s;
|
|
87
|
-
animation-delay: 1s;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// animation
|
|
92
|
-
@-webkit-keyframes load-bar-left {
|
|
93
|
-
0% {
|
|
94
|
-
@include transform(translate(0, 0));
|
|
95
|
-
@include transform(translate3d(0, 0, 0));
|
|
96
|
-
}
|
|
97
|
-
100% {
|
|
98
|
-
@include transform(translate(-100%, 0));
|
|
99
|
-
@include transform(translate3d(-100%, 0, 0));
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
@keyframes load-bar-left {
|
|
104
|
-
0% {
|
|
105
|
-
@include transform(translate(0, 0));
|
|
106
|
-
@include transform(translate3d(0, 0, 0));
|
|
107
|
-
}
|
|
108
|
-
100% {
|
|
109
|
-
@include transform(translate(-100%, 0));
|
|
110
|
-
@include transform(translate3d(-100%, 0, 0));
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
@-webkit-keyframes load-bar-right {
|
|
115
|
-
0% {
|
|
116
|
-
@include transform(translate(-100%, 0));
|
|
117
|
-
@include transform(translate3d(-100%, 0, 0));
|
|
118
|
-
}
|
|
119
|
-
100% {
|
|
120
|
-
@include transform(translate(0, 0));
|
|
121
|
-
@include transform(translate3d(0, 0, 0));
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
@keyframes load-bar-right {
|
|
126
|
-
0% {
|
|
127
|
-
@include transform(translate(-100%, 0));
|
|
128
|
-
@include transform(translate3d(-100%, 0, 0));
|
|
129
|
-
}
|
|
130
|
-
100% {
|
|
131
|
-
@include transform(translate(0, 0));
|
|
132
|
-
@include transform(translate3d(0, 0, 0));
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.load-bar-progress {
|
|
137
|
-
background-color: transparent;
|
|
138
|
-
float: left;
|
|
139
|
-
height: 100%;
|
|
140
|
-
width: 25%;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
// color
|
|
144
|
-
@each $color in $palette-list {
|
|
145
|
-
$i: index($palette-list, $color);
|
|
146
|
-
|
|
147
|
-
.load-bar-progress-#{$color} {
|
|
148
|
-
background-color: nth($palette-color, $i);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
1
|
.progress {
|
|
153
2
|
background-color: lighten($link-color, 30%);
|
|
154
3
|
height: ($base / 2);
|
|
@@ -165,13 +14,13 @@
|
|
|
165
14
|
position: absolute;
|
|
166
15
|
top: 0;
|
|
167
16
|
left: 0;
|
|
168
|
-
|
|
17
|
+
transition: width 0.3s $timing;
|
|
169
18
|
}
|
|
170
19
|
|
|
171
|
-
//
|
|
20
|
+
// colour
|
|
172
21
|
@each $color in $palette-list {
|
|
173
22
|
$i: index($palette-list, $color);
|
|
174
|
-
|
|
23
|
+
|
|
175
24
|
.progress-#{$color} {
|
|
176
25
|
background-color: nth($palette-color-light, $i);
|
|
177
26
|
.progress-bar {
|
|
@@ -195,34 +44,15 @@
|
|
|
195
44
|
will-change: left, right;
|
|
196
45
|
}
|
|
197
46
|
&:after {
|
|
198
|
-
|
|
47
|
+
animation: pbar-indeterminate-one 3s cubic-bezier(0.6, 0.8, 0.6, 0.4) infinite;
|
|
199
48
|
}
|
|
200
49
|
&:before {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
animation-delay: 1.5s;
|
|
50
|
+
animation: pbar-indeterminate-two 3s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite;
|
|
51
|
+
animation-delay: 1.5s;
|
|
204
52
|
}
|
|
205
53
|
}
|
|
206
54
|
|
|
207
55
|
// animation
|
|
208
|
-
@-webkit-keyframes pbar-indeterminate-one {
|
|
209
|
-
0% {
|
|
210
|
-
// position
|
|
211
|
-
right: 100%;
|
|
212
|
-
left: -35%;
|
|
213
|
-
}
|
|
214
|
-
60% {
|
|
215
|
-
// position
|
|
216
|
-
right: -90%;
|
|
217
|
-
left: 100%;
|
|
218
|
-
}
|
|
219
|
-
100% {
|
|
220
|
-
// position
|
|
221
|
-
right: -90%;
|
|
222
|
-
left: 100%;
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
|
|
226
56
|
@keyframes pbar-indeterminate-one {
|
|
227
57
|
0% {
|
|
228
58
|
// position
|
|
@@ -241,24 +71,6 @@
|
|
|
241
71
|
}
|
|
242
72
|
}
|
|
243
73
|
|
|
244
|
-
@-webkit-keyframes pbar-indeterminate-two {
|
|
245
|
-
0% {
|
|
246
|
-
// position
|
|
247
|
-
right: 100%;
|
|
248
|
-
left: -150%;
|
|
249
|
-
}
|
|
250
|
-
60% {
|
|
251
|
-
// position
|
|
252
|
-
right: -35%;
|
|
253
|
-
left: 135%;
|
|
254
|
-
}
|
|
255
|
-
100% {
|
|
256
|
-
// position
|
|
257
|
-
right: -35%;
|
|
258
|
-
left: 135%;
|
|
259
|
-
}
|
|
260
|
-
}
|
|
261
|
-
|
|
262
74
|
@keyframes pbar-indeterminate-two {
|
|
263
75
|
0% {
|
|
264
76
|
// position
|
|
@@ -277,222 +89,6 @@
|
|
|
277
89
|
}
|
|
278
90
|
}
|
|
279
91
|
|
|
280
|
-
.progress-circular {
|
|
281
|
-
height: ($line-height * 2);
|
|
282
|
-
margin-top: $line-height;
|
|
283
|
-
margin-bottom: $line-height;
|
|
284
|
-
overflow: hidden;
|
|
285
|
-
position: relative;
|
|
286
|
-
width: ($line-height * 2);
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.progress-circular-center {
|
|
290
|
-
margin-right: auto;
|
|
291
|
-
margin-left: auto;
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
.progress-circular-gap {
|
|
295
|
-
border-top: ($base / 2) solid $link-color;
|
|
296
|
-
position: absolute;
|
|
297
|
-
top: 0;
|
|
298
|
-
right: ($line-height - 1);
|
|
299
|
-
bottom: 0;
|
|
300
|
-
left: ($line-height - 1);
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
// colour
|
|
304
|
-
@each $color in $palette-list {
|
|
305
|
-
$i: index($palette-list, $color);
|
|
306
|
-
|
|
307
|
-
.progress-circular-gap {
|
|
308
|
-
.progress-circular-#{$color} & {
|
|
309
|
-
border-top-color: nth($palette-color, $i);
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
.progress-circular-inline {
|
|
315
|
-
display: inline-block;
|
|
316
|
-
margin-right: $grid-gutter;
|
|
317
|
-
margin-left: $grid-gutter;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
.progress-circular-inner {
|
|
321
|
-
height: ($line-height * 2);
|
|
322
|
-
position: relative;
|
|
323
|
-
width: ($line-height * 2);
|
|
324
|
-
@include animation(cbar-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite);
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
.progress-circular-left,
|
|
328
|
-
.progress-circular-right {
|
|
329
|
-
height: ($line-height * 2);
|
|
330
|
-
overflow: hidden;
|
|
331
|
-
position: absolute;
|
|
332
|
-
top: 0;
|
|
333
|
-
width: $line-height;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
.progress-circular-left {
|
|
337
|
-
// position
|
|
338
|
-
left: 0;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
.progress-circular-right {
|
|
342
|
-
// position
|
|
343
|
-
right: 0;
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
.progress-circular-spinner {
|
|
347
|
-
border: ($base / 2) solid $link-color;
|
|
348
|
-
border-bottom-color: transparent;
|
|
349
|
-
border-radius: 50%;
|
|
350
|
-
height: ($line-height * 2);
|
|
351
|
-
position: absolute;
|
|
352
|
-
top: 0;
|
|
353
|
-
width: ($line-height * 2);
|
|
354
|
-
.progress-circular-left & {
|
|
355
|
-
border-right-color: transparent;
|
|
356
|
-
// position
|
|
357
|
-
left: 0;
|
|
358
|
-
@include animation(cbar-spinner-left 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite);
|
|
359
|
-
}
|
|
360
|
-
.progress-circular-right & {
|
|
361
|
-
border-left-color: transparent;
|
|
362
|
-
// position
|
|
363
|
-
right: 0;
|
|
364
|
-
@include animation(cbar-spinner-right 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite);
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
// colour
|
|
369
|
-
@each $color in $palette-list {
|
|
370
|
-
$i: index($palette-list, $color);
|
|
371
|
-
|
|
372
|
-
.progress-circular-spinner {
|
|
373
|
-
.progress-circular-#{$color} & {
|
|
374
|
-
border-top-color: nth($palette-color, $i);
|
|
375
|
-
}
|
|
376
|
-
.progress-circular-#{$color} .progress-circular-left & {
|
|
377
|
-
border-left-color: nth($palette-color, $i);
|
|
378
|
-
}
|
|
379
|
-
.progress-circular-#{$color} .progress-circular-right & {
|
|
380
|
-
border-right-color: nth($palette-color, $i);
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
.progress-circular-wrapper {
|
|
386
|
-
@include animation(cbar-wrapper-rotate 2.91667s linear infinite);
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
// animation
|
|
390
|
-
@-webkit-keyframes cbar-inner-rotate {
|
|
391
|
-
12.5% {
|
|
392
|
-
@include transform(rotate(135deg));
|
|
393
|
-
}
|
|
394
|
-
25% {
|
|
395
|
-
@include transform(rotate(270deg));
|
|
396
|
-
}
|
|
397
|
-
37.5% {
|
|
398
|
-
@include transform(rotate(405deg));
|
|
399
|
-
}
|
|
400
|
-
50% {
|
|
401
|
-
@include transform(rotate(540deg));
|
|
402
|
-
}
|
|
403
|
-
62.5% {
|
|
404
|
-
@include transform(rotate(675deg));
|
|
405
|
-
}
|
|
406
|
-
75% {
|
|
407
|
-
@include transform(rotate(810deg));
|
|
408
|
-
}
|
|
409
|
-
87.5% {
|
|
410
|
-
@include transform(rotate(945deg));
|
|
411
|
-
}
|
|
412
|
-
100% {
|
|
413
|
-
@include transform(rotate(1080deg));
|
|
414
|
-
}
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
@keyframes cbar-inner-rotate {
|
|
418
|
-
12.5% {
|
|
419
|
-
@include transform(rotate(135deg));
|
|
420
|
-
}
|
|
421
|
-
25% {
|
|
422
|
-
@include transform(rotate(270deg));
|
|
423
|
-
}
|
|
424
|
-
37.5% {
|
|
425
|
-
@include transform(rotate(405deg));
|
|
426
|
-
}
|
|
427
|
-
50% {
|
|
428
|
-
@include transform(rotate(540deg));
|
|
429
|
-
}
|
|
430
|
-
62.5% {
|
|
431
|
-
@include transform(rotate(675deg));
|
|
432
|
-
}
|
|
433
|
-
75% {
|
|
434
|
-
@include transform(rotate(810deg));
|
|
435
|
-
}
|
|
436
|
-
87.5% {
|
|
437
|
-
@include transform(rotate(945deg));
|
|
438
|
-
}
|
|
439
|
-
100% {
|
|
440
|
-
@include transform(rotate(1080deg));
|
|
441
|
-
}
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
@-webkit-keyframes cbar-spinner-left {
|
|
445
|
-
0%,
|
|
446
|
-
100% {
|
|
447
|
-
@include transform(rotate(130deg));
|
|
448
|
-
}
|
|
449
|
-
50% {
|
|
450
|
-
@include transform(rotate(-5deg));
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
@keyframes cbar-spinner-left {
|
|
455
|
-
0%,
|
|
456
|
-
100% {
|
|
457
|
-
@include transform(rotate(130deg));
|
|
458
|
-
}
|
|
459
|
-
50% {
|
|
460
|
-
@include transform(rotate(-5deg));
|
|
461
|
-
}
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
@-webkit-keyframes cbar-spinner-right {
|
|
465
|
-
0%,
|
|
466
|
-
100% {
|
|
467
|
-
@include transform(rotate(-130deg));
|
|
468
|
-
}
|
|
469
|
-
50% {
|
|
470
|
-
@include transform(rotate(5deg));
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
|
-
|
|
474
|
-
@keyframes cbar-spinner-right {
|
|
475
|
-
0%,
|
|
476
|
-
100% {
|
|
477
|
-
@include transform(rotate(-130deg));
|
|
478
|
-
}
|
|
479
|
-
50% {
|
|
480
|
-
@include transform(rotate(5deg));
|
|
481
|
-
}
|
|
482
|
-
}
|
|
483
|
-
|
|
484
|
-
@-webkit-keyframes cbar-wrapper-rotate {
|
|
485
|
-
100% {
|
|
486
|
-
@include transform(rotate(360deg));
|
|
487
|
-
}
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
@keyframes cbar-wrapper-rotate {
|
|
491
|
-
100% {
|
|
492
|
-
@include transform(rotate(360deg));
|
|
493
|
-
}
|
|
494
|
-
}
|
|
495
|
-
|
|
496
92
|
.progress-position-absolute-bottom,
|
|
497
93
|
.progress-position-absolute-top,
|
|
498
94
|
.progress-position-fixed-bottom,
|
|
@@ -523,4 +119,4 @@
|
|
|
523
119
|
.progress-position-fixed-top,
|
|
524
120
|
.progress-position-fixed-bottom {
|
|
525
121
|
position: fixed;
|
|
526
|
-
}
|
|
122
|
+
}
|