MDL-66477 message: Use the generic drawer for the message drawer
[moodle.git] / theme / boost / scss / moodle / message.scss
index 8116c00..314e97e 100644 (file)
     }
 }
 
-$message-drawer-width: 320px;
 $message-send-bg: $gray-300 !default;
 $message-send-color: color-yiq($message-send-bg) !default;
 $message-send-time-color: mix($message-send-color, $message-send-bg, 100%) !default;
@@ -428,41 +427,31 @@ $message-received-color-muted: mix($message-received-color, $message-received-bg
 $message-app-bg: mix($message-send-bg, $message-received-bg, 50%) !default;
 $message-day-color: color-yiq($message-app-bg) !default;
 
+.drawer {
+    .message-app {
+        height: 100%;
+        .icon-back-in-app {
+            display: none;
+        }
+        .icon-back-in-drawer {
+            display: inherit;
+        }
+    }
+}
+
 .message-app {
     display: flex;
     flex-direction: column;
     background-color: $message-app-bg;
-    @include transition();
 
     .icon-back-in-drawer {
         display: none;
     }
 
-    &.drawer {
-        z-index: $zindex-sticky;
-        position: fixed;
-        top: $navbar-height;
-        right: 0;
-        height: calc(100% - #{$navbar-height});
-        width: $message-drawer-width;
-        box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
-        .icon-back-in-app {
-            display: none;
-        }
-        .icon-back-in-drawer {
-            display: inherit;
-        }
-    }
-
     &.main {
         min-height: 400px;
     }
 
-    &.hidden {
-        display: block;
-        right: $message-drawer-width * -1;
-    }
-
     .header-container {
         flex-shrink: 0;
     }