mirror of
https://github.com/moparisthebest/mail
synced 2024-12-23 15:58:49 -05:00
mail list redesign for mobile, flexbox for mail list layout
This commit is contained in:
parent
4a78d228c3
commit
181902d3a7
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user