moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-08-13 16:43:47 -04:00
Code Issues Releases Wiki Activity

[WO-332] Move spinner scss to component

Browse Source
This commit is contained in:
Tankred Hase 2014-04-22 20:08:28 +02:00
parent fdd9c22144
commit 44cbb803f3
4 changed files with 29 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/sass/all.scss
View File

@ -22,6 +22,7 @@
@import "components/popover";
@import "components/input";
@import "components/mail-addresses";
@import "components/spinner";
// Views
@import "views/shared";

22
src/sass/components/_spinner.scss Normal file
View File

@ -0,0 +1,22 @@
.spinner {
vertical-align: middle;
display: inline-block;
margin-right: 0.2em;
height: 1em;
width: 1em;
animation: spinner-rotation .6s linear infinite;
border-left: 0.17em solid $color-grey-light;
border-right: 0.17em solid $color-grey-light;
border-bottom: 0.17em solid $color-grey-light;
border-top: 0.17em solid $color-grey;
border-radius: 100%;
}
@keyframes spinner-rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

28
src/sass/views/_mail-list.scss
View File

@ -63,32 +63,14 @@
}
}
.spinner {
display:none;
}
&.syncing {
.spinner {
top: 6.5px;
left: $padding-horizontal;
height: 13px;
width: 13px;
position: absolute;
animation: rotation .6s linear infinite;
border-left: 2px solid $color-grey-light;
border-right: 2px solid $color-grey-light;
border-bottom: 2px solid $color-grey-light;
border-top: 2px solid $color-grey;
border-radius: 100%;
}
.text {
padding-left: 1.5em;
display: inline-block;
}
}
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

19
src/sass/views/_read.scss
View File

@ -101,27 +101,10 @@
transform: translateY(-50%);
vertical-align: middle;
text-align: center;
.spinner {
font-size: 2em;
margin-right: 0.2em;
vertical-align: middle;
// todo: outsource component
display: inline-block;
height: 1em;
width: 1em;
animation: rotation .6s linear infinite;
border-left: 0.17em solid $color-grey-light;
border-right: 0.17em solid $color-grey-light;
border-bottom: 0.17em solid $color-grey-light;
border-top: 0.17em solid $color-grey;
border-radius: 100%;
}
font-size: 2em;
strong {
color: $color-grey-input;
font-size: 2em;
vertical-align: middle;
}
}