From bf0f6eb62d0f5bd1f0d8e4e2a6e9e8fd3b297b6c Mon Sep 17 00:00:00 2001
From: blackle <isabelle@blackle-mori.com>
Date: Thu, 12 Jan 2017 23:54:26 -0500
Subject: Implement a click-to-view spoiler system

---
 app/assets/stylesheets/components.scss | 44 ++++++++++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 4 deletions(-)

(limited to 'app/assets/stylesheets/components.scss')

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 73d1acccd..681259861 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -584,21 +584,20 @@
   }
 }
 
-.autosuggest-textarea {
+.autosuggest-textarea, .spoiler-input {
   position: relative;
 }
 
-.autosuggest-textarea__textarea {
+.autosuggest-textarea__textarea, .spoiler-input__input {
   display: block;
   box-sizing: border-box;
   width: 100%;
-  height: 100px;
   resize: none;
+  margin: 0;
   color: $color1;
   padding: 7px;
   font-family: inherit;
   font-size: 14px;
-  margin: 0;
   resize: vertical;
 
   border: 3px dashed transparent;
@@ -609,6 +608,10 @@
   }
 }
 
+.autosuggest-textarea__textarea {
+  height: 100px;
+}
+
 .autosuggest-textarea__suggestions {
   position: absolute;
   top: 100%;
@@ -663,6 +666,39 @@
   }
 }
 
+.spoiler-helper {
+  margin-bottom: -20px !important;
+}
+
+.spoiler {
+  &::before {
+    margin-top: 20px;
+    display: block;
+    content: '';
+  }
+
+  display: inline;
+  cursor: pointer;
+  border-bottom: 1px dashed white;
+  .light & {
+    border-bottom: 1px dashed black;
+  }
+
+  &.spoiler-on {
+    &, & * {
+      color: transparent !important;
+    }
+    background: white;
+    .light & {
+      background: black;
+    }
+
+    .emojione {
+      opacity: 0;
+    }
+  }
+}
+
 button i.fa-retweet {
   height: 19px;
   width: 22px;
-- 
cgit