moparisthebest
/
mail
mirror of https://github.com/moparisthebest/mail
1
0
Fork 0
Code Issues Releases Wiki Activity

mail list redesign for mobile, flexbox for mail list layout

This commit is contained in:
Mario Volke 2014-06-16 13:59:40 +02:00
parent 4a78d228c3
commit 181902d3a7
2 changed files with 60 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/sass/components/_mail-list.scss
View File

@ -15,8 +15,17 @@
cursor: pointer;
transition: background-color $time-li-fade, color $time-li-fade;
border-top: 5px solid $color-white;
box-shadow: 0 -1px 0 $color-grey-light;
margin-top: 5px;
&:first-child {
box-shadow: none;
border-top: 0;
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
margin-bottom: 5px;
}
&.ng-animate {
@ -105,46 +114,6 @@
background-color: mix($color-white, $color-blue, 90%);
}
&.mail-list-attachment {
.head:after {
content: "\e003";
color: $color-grey-medium;
font-family: $font-family-icons;
position: absolute;
right: 0;
top: 0;
margin-top: -0.3em;
margin-right: -1 * $padding-horizontal;
text-align: center;
line-height: 1.8em;
width: $padding-horizontal;
}
}
&.mail-list-unread {
.flag {
background-color: $color-blue;
box-shadow: inset 0.5px 1px 1px $color-grey-medium;
}
}
&.mail-list-replied {
.flag {
color: $color-grey-medium;
font-family: $font-family-icons;
position: absolute;
left: 0;
top: 0;
margin-left: -1 * $padding-horizontal;
text-align: center;
line-height: 1.8em / 0.8em;
box-shadow: none;
width: $padding-horizontal;
height: auto;
font-size: 0.8em;
}
}
&.mail-list-active,
&.mail-list-active:hover {
background-color: $color-blue;
@ -167,27 +136,26 @@
.body {
color: $color-white;
}
.flag {
box-shadow: inset 1px 1px 1px $color-grey-light;
background-color: $color-white;
}
&.mail-list-attachment {
.head:after {
.flags {
& > li {
color: $color-white;
&:nth-child(1) {
&:after {
background-color: $color-white;
}
}
}
}
&.mail-list-unread {
.flag {
box-shadow: inset 1px 1px 1px $color-grey-light;
background-color: $color-white;
}
}
&.mail-list-replied {
.flag {
color: $color-white;
background: transparent;
box-shadow: none;
}
}
@include respond-to(desktop) {
box-shadow: none;
border-top: 0;
margin-top: 0;
&:last-child {
margin-bottom: 0;
}
}
}

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

@ -1,16 +1,16 @@
.view-mail-list {
$padding-horizontal: 15px;
$padding-vertical: 10px;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background: $color-grey-lighterer;
background-image: linear-gradient(to right ,$color-grey-lighterer 98%, darken($color-grey-lighterer, 1%) 100%);
header {
flex-shrink: 0;
cursor: pointer;
padding: $padding-vertical $padding-horizontal;
text-shadow: 0px 1px 1px $color-grey-lighter;
&:before {
color: $color-blue;
font-size: $font-size-bigger;
@ -24,6 +24,7 @@
font-size: $font-size-bigger;
font-weight: normal;
vertical-align: middle;
text-shadow: 0px 1px 1px $color-grey-lighter;
}
button {
float: right;
@ -36,34 +37,41 @@
}
.search {
flex-shrink: 0;
padding: 0 $padding-horizontal $padding-vertical $padding-horizontal;
margin: 0 auto;
width: 100%;
}
.list-wrapper {
height: 100%;
flex-grow: 1;
padding: 0 $padding-horizontal;
overflow-y: hidden;
.mail-list {
padding-bottom: 126px;
}
}
footer {
flex-shrink: 0;
position: relative;
height: 28px;
cursor: pointer;
position: absolute;
bottom: 0px;
left: 0px;
padding: 0 $nav-padding;
background: darken($color-grey-lighterer, 1%);
background: $color-white;
width: 100%;
font-size: $font-size-smaller;
color: $color-grey-dark;
line-height: em(28,12);
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: $nav-padding;
right: $nav-padding;
height: 0;
border-top: 1px solid $color-grey-medium;
}
.offline {
&[data-icon]:before {
padding-right: 0.5em;
@ -80,4 +88,16 @@
}
}
}
@include respond-to(desktop) {
background: $color-grey-lighterer;
background-image: linear-gradient(to right ,$color-grey-lighterer 98%, darken($color-grey-lighterer, 1%) 100%);
footer {
background: darken($color-grey-lighterer, 1%);
&:before {
display: none;
}
}
}
}