diff --git a/src/sass/components/_mail-list.scss b/src/sass/components/_mail-list.scss index c6df7b6..a086e7a 100755 --- a/src/sass/components/_mail-list.scss +++ b/src/sass/components/_mail-list.scss @@ -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; } } } diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss index a8877c3..88a7253 100755 --- a/src/sass/views/_mail-list.scss +++ b/src/sass/views/_mail-list.scss @@ -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; + } + } + } } \ No newline at end of file