1
0
mirror of https://github.com/moparisthebest/mail synced 2025-02-07 18:40:21 -05:00

show sync status in mobile mode and fix css

This commit is contained in:
Tankred Hase 2014-02-02 17:01:41 +01:00
parent d37b9ca5e3
commit 449d680060

View File

@ -1,13 +1,14 @@
.view-mail-list { .view-mail-list {
$padding-horizontal: 15px; $padding-horizontal: 15px;
$padding-vertical: 10px; $padding-vertical: 10px;
position: relative;
height: 100%; height: 100%;
width: 100%;
background: $color-grey-lightest; background: $color-grey-lightest;
background-image: linear-gradient(to right ,$color-grey-lightest 98%, darken($color-grey-lightest, 1%) 100%); background-image: linear-gradient(to right ,$color-grey-lightest 98%, darken($color-grey-lightest, 1%) 100%);
header { header {
cursor: pointer; cursor: pointer;
padding: $padding-vertical $padding-horizontal; padding: $padding-vertical $padding-horizontal;
text-shadow: 0px 1px 1px $color-grey-lighter; text-shadow: 0px 1px 1px $color-grey-lighter;
@ -41,51 +42,44 @@
} }
ul { ul {
padding-bottom: 98px; padding-bottom: 126px;
@include respond-to(desktop) {
padding-bottom: 126px;
}
} }
footer { footer {
height: 0px; height: 28px;
@include respond-to(desktop) { cursor: pointer;
height: 28px; position: absolute;
cursor: pointer; bottom: 0px;
position: absolute; left: 0px;
bottom: 0px; padding: 0 $nav-padding;
left: 0px; background: darken($color-grey-lightest, 1%);
padding: 0 $nav-padding; width: 100%;
background: darken($color-grey-lightest, 1%); font-size: $font-size-smaller;
width: $content-nav-width; color: $color-grey-dark;
border-right: 1px solid $color-grey-light; line-height: em(28,12);
font-size: $font-size-smaller;
color: $color-grey-dark;
line-height: em(28,12);
.offline { .offline {
&[data-icon]:before { &[data-icon]:before {
padding-right: 0.5em; padding-right: 0.5em;
}
} }
}
&.syncing { &.syncing {
.spinner { .spinner {
top: 6.5px; top: 6.5px;
left: $padding-horizontal; left: $padding-horizontal;
height: 13px; height: 13px;
width: 13px; width: 13px;
position: absolute; position: absolute;
animation: rotation .6s linear infinite; animation: rotation .6s linear infinite;
border-left: 2px solid $color-grey-light; border-left: 2px solid $color-grey-light;
border-right: 2px solid $color-grey-light; border-right: 2px solid $color-grey-light;
border-bottom: 2px solid $color-grey-light; border-bottom: 2px solid $color-grey-light;
border-top: 2px solid $color-grey; border-top: 2px solid $color-grey;
border-radius: 100%; border-radius: 100%;
} }
.text { .text {
padding-left: 1.5em; padding-left: 1.5em;
}
} }
} }
} }