about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/styles/components
diff options
context:
space:
mode:
authorbeatrix <beatrix.bitrot@gmail.com>2018-01-14 17:40:27 -0500
committerGitHub <noreply@github.com>2018-01-14 17:40:27 -0500
commit39f231f3da1ffe7e8a75df924790005fde5fe7fa (patch)
tree678d0d3290116ad446561b8c7d9578a0e19d9868 /app/javascript/flavours/glitch/styles/components
parent0fb3bd09e9acaa72e4fac89768408015d33d8c3e (diff)
parentc2669f93d0f885245a2d272485cd58092b96546b (diff)
Merge pull request #328 from glitch-soc/feature/glitchy-elephant-friend
Add glitchy elephant friend
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
-rw-r--r--app/javascript/flavours/glitch/styles/components/drawer.scss38
1 files changed, 38 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 865ab4343..727dcd93e 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -49,6 +49,44 @@
     overflow-y: auto;
     contain: strict;
   }
+
+  .drawer--inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+
+    .mastodon {
+      flex: 1;
+      border: none;
+      cursor: inherit;
+    }
+  }
+
+  @for $i from 0 through 3 {
+    .drawer--inner.mbstobon-#{$i} {
+      @if $i == 3 {
+        background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto;
+      } @else {
+        background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto;
+      }
+
+      .mastodon {
+        background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
+
+        @if $i != 3 {
+          filter: contrast(50%) brightness(50%);
+        }
+      }
+    }
+  }
 }
 
 .drawer--header {