diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 015e21a..357b890 100755 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -20,7 +20,7 @@ $color-white: #fff; $color-grey: #666; $color-grey-input: #949494; $color-grey-dark: #333; -$color-grey-medium: #aaa; +$color-grey-medium: #999; $color-grey-light: #ccc; $color-grey-lighter: #ddd; $color-grey-lighterer: #f0eff5; diff --git a/src/sass/components/_input.scss b/src/sass/components/_input.scss index 7454f94..63acb8b 100644 --- a/src/sass/components/_input.scss +++ b/src/sass/components/_input.scss @@ -20,7 +20,11 @@ font-size: em(13); } -.input-search { - width: 93%; +// need to be more specific than normalize.css +.input-search, +input[type="search"].input-search { + box-sizing: border-box; + width: 100%; + border-radius: 0; -webkit-appearance: searchfield; } \ No newline at end of file diff --git a/src/sass/components/_mail-list.scss b/src/sass/components/_mail-list.scss index 7373bc6..c6df7b6 100755 --- a/src/sass/components/_mail-list.scss +++ b/src/sass/components/_mail-list.scss @@ -6,11 +6,7 @@ margin: 0; padding: 0; - &:last-child { - margin-bottom: 0; - } - - li { + & > li { position: relative; display: block; margin-bottom: 7px; @@ -19,6 +15,10 @@ cursor: pointer; transition: background-color $time-li-fade, color $time-li-fade; + &:last-child { + margin-bottom: 0; + } + &.ng-animate { transition: none; } @@ -67,16 +67,31 @@ text-align: right; line-height: 1.5em * ($font-size-small / $font-size-smaller); } - .flag { - width: 1em; - height: 1em; - border-radius: 50%; - box-shadow: inset 1px 1px 1px $color-grey-light; - position: absolute; - top: 0; - left: 0; - margin-top: 0.2em; - margin-left: -1.3em; + } + .flags { + position: absolute; + top: 0; + left: 0; + list-style: none; + margin: 0.8em 0 0; + padding: 0; + color: $color-grey-medium; + width: 30px; + line-height: 1.6em; + & > li { + font-size: 90%; + text-align: center; + + &:nth-child(1) { + &:after { + display: inline-block; + content: ''; + width: 1em; + height: 1em; + border-radius: 50%; + background-color: $color-blue; + } + } } } diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss index 77b1ad4..a8877c3 100755 --- a/src/sass/views/_mail-list.scss +++ b/src/sass/views/_mail-list.scss @@ -25,7 +25,14 @@ font-weight: normal; vertical-align: middle; } + button { + float: right; + margin-top: -0.05em; // for perfect vertical alignment with headline + @include respond-to(desktop) { + display: none; + } + } } .search { @@ -38,10 +45,10 @@ height: 100%; padding: 0 $padding-horizontal; overflow-y: hidden; - } - ul { - padding-bottom: 126px; + .mail-list { + padding-bottom: 126px; + } } footer { diff --git a/src/tpl/mail-list.html b/src/tpl/mail-list.html index e32eccd..0047699 100644 --- a/src/tpl/mail-list.html +++ b/src/tpl/mail-list.html @@ -2,6 +2,7 @@

{{state.nav.currentFolder.type}}

+