diff --git a/src/sass/all.scss b/src/sass/all.scss index c05a6e2..15e19fc 100755 --- a/src/sass/all.scss +++ b/src/sass/all.scss @@ -22,6 +22,7 @@ @import "components/popover"; @import "components/input"; @import "components/mail-addresses"; +@import "components/spinner"; // Views @import "views/shared"; diff --git a/src/sass/components/_spinner.scss b/src/sass/components/_spinner.scss new file mode 100644 index 0000000..595f6da --- /dev/null +++ b/src/sass/components/_spinner.scss @@ -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); + } +} \ No newline at end of file diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss index 107f966..77b1ad4 100755 --- a/src/sass/views/_mail-list.scss +++ b/src/sass/views/_mail-list.scss @@ -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); - } } \ No newline at end of file diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss index ed90a3d..7f41c1e 100644 --- a/src/sass/views/_read.scss +++ b/src/sass/views/_read.scss @@ -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; } }