amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-03-28 09:32:46 +00:00
Code Issues Projects Releases Wiki Activity

Restructure Sass files and folders for proper application Sass development

Browse Source
This commit is contained in:
iRouge
2015-01-21 11:18:53 -05:00
parent 6c6c8457b2
commit 039028db1d
207 changed files with 54 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
UI/WebServerResources/scss/components/progressLinear/progressLinear.scss Normal file
View File

@@ -0,0 +1,201 @@
$progress-linear-bar-height:5px !default;
md-progress-linear {
display: block;
width: 100%;
height: $progress-linear-bar-height;
.md-container {
overflow: hidden;
position: relative;
height: $progress-linear-bar-height;
top: $progress-linear-bar-height;
transform: translate(0, 5px) scale(1, 0);
transition: all .3s linear;
}
.md-container.md-ready {
transform: translate(0, 0) scale(1, 1);
}
.md-bar {
height: $progress-linear-bar-height;
position: absolute;
width: 100%;
}
.md-bar1, .md-bar2 {
transition: all 0.2s linear;
}
&[md-mode=determinate] {
.md-bar1 {
display: none;
}
}
&[md-mode=indeterminate] {
.md-bar1 {
animation: indeterminate1 4s infinite linear;
}
.md-bar2 {
animation: indeterminate2 4s infinite linear;
}
}
&[md-mode=buffer] {
.md-container {
background-color: transparent !important;
}
.md-dashed:before {
content: "";
display: block;
height: $progress-linear-bar-height;
width: 100%;
margin-top: 0px;
position: absolute;
background-color: transparent;
background-size: 10px 10px !important;
background-position: 0px -23px;
animation: buffer 3s infinite linear;
}
}
&[md-mode=query] {
.md-bar2 {
animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
}
}
@keyframes indeterminate1 {
0% {
transform: translateX(-25%) scale(.5, 1);
}
10% {
transform: translateX(25%) scale(.5, 1);
}
19.99% {
transform: translateX(50%) scale(0, 1);
}
20% {
transform: translateX(-37.5%) scale(.25, 1);
}
30% {
transform: translateX(37.5%) scale(.25, 1);
}
34.99% {
transform: translateX(50%) scale(0, 1);
}
36.99% {
transform: translateX(50%) scale(0, 1);
}
37% {
transform: translateX(-37.5%) scale(.25, 1);
}
47% {
transform: translateX(20%) scale(.25, 1);
}
52% {
transform: translateX(35%) scale(.05, 1);
}
55% {
transform: translateX(35%) scale(.1, 1);
}
58% {
transform: translateX(50%) scale(.1, 1);
}
61.99% {
transform: translateX(50%) scale(0, 1);
}
69.99% {
transform: translateX(50%) scale(0, 1);
}
70% {
transform: translateX(-37.5%) scale(.25, 1);
}
80% {
transform: translateX(20%) scale(.25, 1);
}
85% {
transform: translateX(35%) scale(.05, 1);
}
88% {
transform: translateX(35%) scale(.1, 1);
}
91% {
transform: translateX(50%) scale(.1, 1);
}
92.99% {
transform: translateX(50%) scale(0, 1);
}
93% {
transform: translateX(-50%) scale(0, 1);
}
100% {
transform: translateX(-25%) scale(.5, 1);
}
}
@keyframes indeterminate2 {
0% {
transform: translateX(-50%) scale(0, 1);
}
25.99%{
transform: translateX(-50%) scale(0, 1);
}
28% {
transform: translateX(-37.5%) scale(.25, 1);
}
38% {
transform: translateX(37.5%) scale(.25, 1);
}
42.99% {
transform: translateX(50%) scale(0, 1);
}
46.99% {
transform: translateX(50%) scale(0, 1);
}
49.99% {
transform: translateX(50%) scale(0, 1);
}
50% {
transform: translateX(-50%) scale(0, 1);
}
60% {
transform: translateX(-25%) scale(.5, 1);
}
70% {
transform: translateX(25%) scale(.5, 1);
}
79.99% {
transform: translateX(50%) scale(0, 1);
}
}
@keyframes query {
0% {
opacity: 1;
transform: translateX(35%) scale(.3, 1);
}
100% {
opacity: 0;
transform: translateX(-50%) scale(0, 1);
}
}
@keyframes buffer {
0% {
opacity: 1;
background-position: 0px -23px;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
background-position: -200px -23px;
}
}