mail/src/sass/components/_mail-list.scss

.mail-list {
    $padding-vertical: 9px;
    $padding-horizontal: 30px;

    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
        position: relative;
        display: block;
        padding: $padding-vertical $padding-horizontal;
        background: $color-white;
        cursor: pointer;
        transition: background-color $time-li-fade, color $time-li-fade;

        margin-top: 11px;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: -6px;
            left: 0;
            right: 0;
            height: 0;
            border-top: 1px solid $color-grey-lighter;
        }

        &:first-child {
            box-shadow: none;
            border-top: 0;
            margin-top: 0;
            &:before {
                display: none;
            }
        }
        &:last-child {
            margin-bottom: 5px;
        }

        &.ng-animate {
            transition: none;
        }

        h3 {
            @include text-overflow;

            color: $color-blue;
            font-size: $font-size-bigger;
            font-weight: normal;
            margin: 0;
        }

        .encrypted {
            position: absolute;
            color: $color-grey-medium;
            line-height: 30px;
            top: $padding-vertical;
            right: $padding-vertical;
        }

        p {
            font-size: $font-size-small;
            margin: 0;
        }

        .head {
            position: relative;
            padding-right: 6.5em;
            margin-bottom: 0.25em;

            .subject {
                @include text-overflow;

                color: $color-grey-dark;
                font-weight: bold;
                line-height: 1.5em;
            }
            time {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 6em * ($font-size-small / $font-size-smaller);
                color: $color-grey-medium;
                font-size: $font-size-smaller;
                text-align: right;
                line-height: 1.5em * ($font-size-small / $font-size-smaller);
            }
        }
        .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;
                    }
                }
            }
        }

        .body {
            color: $color-grey;
            height: 2.5em;
            overflow: hidden;
        }

        &:hover {
            background-color: mix($color-white, $color-blue, 90%);
        }

        &.mail-list-active,
        &.mail-list-active:hover {
            background-color: $color-blue;
            color: $color-white;

            h3 {
                color: $color-white;
            }
            .encrypted {
                color: $color-white;
            }
            .head {
                .subject {
                    color: $color-white;
                }
                time {
                    color: $color-white;
                }
            }
            .body {
                color: $color-white;
            }
            .flags {
                & > li {
                    color: $color-white;

                    &:nth-child(1) {
                        &:after {
                            background-color: $color-white;
                        }
                    }
                }
            }
        }

        @include respond-to(desktop) {
            margin-top: 0;
            margin-bottom: 7px;
            &:before {
                display: none;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}