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;
        margin-bottom: 7px;
        padding: $padding-vertical $padding-horizontal;
        background: $color-white;
        cursor: pointer;
        transition: background-color $time-li-fade, color $time-li-fade;

        &:last-child {
            margin-bottom: 0;
        }

        &.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-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;
            color: $color-white;

            h3 {
                color: $color-white;
            }
            .encrypted {
                color: $color-white;
            }
            .head {
                .subject {
                    color: $color-white;
                }
                time {
                    color: $color-white;
                }
            }
            .body {
                color: $color-white;
            }
            .flag {
                box-shadow: inset 1px 1px 1px $color-grey-light;
                background-color: $color-white;
            }
            &.mail-list-attachment {
                .head:after {
                    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;
                }
            }
        }
    }
}