initial commit 2

1 files changed, 161 insertions, 0 deletions

diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
new file mode 100644
index 00000000..b478c0b0
--- /dev/null
+++ b/addons/mail/static/src/scss/composer.scss
@@ -0,0 +1,161 @@
+@font-face {
+    font-family: 'emojifont';
+    src: local('Segoe UI'),
+         local('Apple Color Emoji'),
+         local('Android Emoji'),
+         local('Noto Color Emoji'),
+         local('Twitter Color Emoji'),
+         local('Twitter Color'),
+         local('EmojiOne Color'),
+         local('EmojiOne'),
+         local(EmojiSymbols),
+         local(Symbola);
+}
+
+// Emoji
+.o_mail_emoji {
+    display: inline-block;
+    padding: 0;
+    font-size: 1.3rem;
+    font-family: emojifont;
+}
+.o_mail_preview .o_mail_emoji {
+    font-size: 100%;
+}
+
+@mixin o-viewer-black-btn {
+    background-color: rgba(black, 0.4);
+    color: rgba(theme-color('light'), 0.7);
+
+    &:hover {
+        background-color: rgba(black, 0.6);
+        color: white;
+    }
+
+    &.disabled {
+        color: gray('600');
+        background: none;
+    }
+}
+.o_modal_fullscreen {
+    z-index: $o-mail-thread-window-zindex + 1;
+
+    .o_viewer_content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .o_viewer-header {
+            @include o-position-absolute(0, 0, $left: 0);
+            height: 45px;
+            padding: $grid-gutter-width*0.5;
+            background-color: rgba(black, 0.8);
+            z-index: 1;
+            color: #FFFFFF;
+
+            a {
+                @include o-hover-text-color(rgba(theme-color('light'), 0.6), white);
+            }
+
+            .o_close_btn {
+                @include o-position-absolute(-1px, $grid-gutter-width*0.5);
+                font-size: $h1-font-size;
+                font-weight: 300;
+            }
+
+            .o_image_caption {
+                bottom: 20%;
+                position: absolute;
+            }
+        }
+
+        .o_loading_img {
+            @include o-position-absolute($top: 45%, $right: 0, $left: 0);
+        }
+
+        .o_viewer_img_wrapper {
+            cursor: pointer;
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(black, 0.7);
+
+            .o_viewer_zoomer {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 45px 0;
+
+                img {
+                    image-orientation: from-image; // Only supported in Firefox
+                }
+
+                img, video {
+                    cursor :auto;
+                    max-width: 100%;
+                    max-height: 100%;
+                    transition: 0.2s cubic-bezier(0, 0, 0.49, 1.6) 0s, opacity 0.15s;
+                    box-shadow: 0 0 40px black;
+                }
+
+                .o_viewer_pdf {
+                    width: 80%;
+                    height: 100%;
+                    border: 0px;
+                    box-shadow: 1px 1px 20px 1px #000;
+                }
+
+                @include media-breakpoint-down(sm) {
+                    .o_viewer_pdf, .o_viewer_text {
+                        width: 100%;
+                    }
+                }
+
+                .o_viewer_text {
+                    width: 80%;
+                    height: 100%;
+                    border: 0px;
+                    box-shadow: 1px 1px 20px 1px #000;
+                    background-color: white;
+                }
+
+                .o_viewer_video {
+                    height: 80%;
+                }
+            }
+        }
+
+        .o_viewer_toolbar {
+            @include o-position-absolute($bottom: $grid-gutter-width*0.5);
+            width: 100%;
+            overflow: hidden;
+            justify-content: center;
+            border-radius: 4px;
+
+            > .btn-group {
+                background-color: rgba(black, 0.4);
+            }
+
+            .o_viewer_toolbar_btn {
+                @include o-viewer-black-btn;
+                padding-left: 8px;
+                padding-right: 8px;
+            }
+        }
+    }
+
+    .arrow {
+        @include o-position-absolute(50%, $grid-gutter-width*0.5);
+        border-radius: 100%;
+        padding: 12px 16px 11px 18px;
+        @include o-viewer-black-btn;
+    }
+
+    .arrow-left {
+        left: $grid-gutter-width*0.5;
+        right: auto;
+        padding: 12px 18px 11px 16px;
+    }
+}