addons/web/static/src/scss/attachment_preview.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

// Attachment Icons (common for many2many_binary widget and chat thread and chat composer)
// ------------------------------------------------------------------
$o-attachment-image-size: 38px;
$o-attachment-margin: 5px;

.o_attachment {
    position: relative;
    width: 100%;
    padding: $o-attachment-margin;

    @include media-breakpoint-up(md) {
        width: 50%;
    }
    @include media-breakpoint-up(lg) {
        width: 25%;
    }
    // many2many_binary widget for send mail with attachment
    &.o_attachment_many2many {
        @include media-breakpoint-up(md) {
            width: 50%;
        }
        @include media-breakpoint-up(lg) {
            width: 62%;
        }
    }

    .o_attachment_wrap {
        overflow: hidden;
        position: relative;
        border-bottom: 1px solid rgba(black, 0.1);
        border-radius: 2px;
        padding: 4px 6px 0 4px;
        background-color: rgba(black, 0.05);

        .o_attachment_delete_cross {
            float: right;
            cursor: pointer;
        }
    }

    &.o_attachment_editable .o_attachment_wrap  {
        padding-right: 40px;
    }

    .o_image {
        width: $o-attachment-image-size;
        height: $o-attachment-image-size;
        image-orientation: from-image; // Only supported in Firefox
        &.o_hover {
            @include o-hover-opacity($default-opacity: 1, $hover-opacity: 0.7);
        }
    }

    .o_attachment_view {
        cursor: zoom-in;
    }

    .caption {
        @include o-text-overflow(block);

        a {
            @include o-hover-text-color($default-color: $o-main-text-color, $hover-color: $headings-color);
        }
    }

    .o_attachment_progress_bar {
        display: none;
    }

    .o_attachment_uploaded, .o_attachment_delete {
        @include o-position-absolute(0, 0, 0, $left: auto);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
    }

    .o_attachment_delete {
        background: desaturate(theme-color('primary'), 50%);
        color: white;
        cursor: pointer;
        font-size: 20px;
        transform: translateX(100%);
        transition: all 0.3s ease 0s;

        &:hover {
            background: theme-color('primary');
        }
    }

    &.o_attachment_uploading {
        .o_attachment_progress_bar {
            display: inline-block;
            margin: 0 0 0 8px;
            border-radius: 2px;
            vertical-align: bottom;

            > div {
                font-size: 11px;
                padding: 0 7px;
            }
        }

        .o_attachment_delete, .o_attachment_uploaded {
            display: none;
        }
    }

    &:hover .o_attachment_delete {
        transition: all 0.1s ease 0s;
        transform: translateX(0);
    }
}