web-ui/app/scss/views/_mail-list.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

.mail-list-entry {
    @include scut-clearfix;

    border-bottom: 1px solid white;
    transition: background-color 150ms ease-out;
    font-weight: bold;
    height: 80px;
    position: relative;

    // Workaround:
    // Foundation is of the opinion that a 1.6 line height for all lists
    // is a totally good idea. Please remove when Foundation is gone
    line-height: normal;

    &.status-read {
        font-weight: normal;
        color: $attachment_text;
    }

    &.selected {
        background: $white;
        z-index: 10; // overlay the box-shadow of the right page (z-index: 2)
    }

    &:hover {
        background: darken($contrast, 5%);
    }

    &__checkbox {
        margin-right: 5px;
        display: block;
        float: left;
        margin: {
          top: 8px;
          left: 20px;
        }

        & > input[type=checkbox] {
            @include check-box;
        }
    }

    &__item {
        display: block;
        color: $dark_grey;
        padding: 8px 10px 10px 34px;
        height: 100%;

        &-from {
            white-space: nowrap;
            font-size: 0.8em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
        }

        &-date {
            font-size: 0.7em;
            float: right;
            display: inline-block;
        }

        &-subject {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 85%;

            &-icon {
                color: $light_gray;
            }
        }

        &-attachment {
            width: 14px;
            text-align: right;
            display: inline-block;
            float: right;
            color: $light_gray;
        }

        &-tags {
            @include tags;

            // Workaround:
            // Foundation is of the opinion that a 1.6 line height and a 0.6 rem margin-bottom
            // for all lists is a totally good idea. Please remove when Foundation is gone
            line-height: normal;
            margin-bottom: 0;
        }

        &:hover, &:focus, &:active {
            color: $dark_grey;
        }
    }
}