Re-organize GitLab css into 2 directories: framework and page specific css

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

1 files changed, 86 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
new file mode 100644
index 00000000000..32e2c020e06
--- /dev/null
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -0,0 +1,86 @@
+.zennable {
+  .zen-toggle-comment {
+    display: none;
+  }
+
+  .zen-enter-link {
+    color: $gl-gray;
+    position: absolute;
+    top: 0px;
+    right: 4px;
+    line-height: 40px;
+  }
+
+  .zen-leave-link {
+    display: none;
+    color: $gl-text-color;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 5px;
+    font-size: 36px;
+
+    &:hover {
+      color: #111;
+    }
+  }
+
+  // Hide the Enter link when we're in Zen mode
+  input:checked ~ .zen-backdrop .zen-enter-link {
+    display: none;
+  }
+
+  // Show the Leave link when we're in Zen mode
+  input:checked ~ .zen-backdrop .zen-leave-link {
+    display: block;
+    position: absolute;
+    top: 0;
+  }
+
+  input:checked ~ .zen-backdrop {
+    background-color: white;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1031;
+
+    textarea {
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      color: #000;
+      font-size: 20px;
+      line-height: 26px;
+      padding: 30px;
+      display: block;
+      outline: none;
+      resize: none;
+      height: 100vh;
+      max-width: 900px;
+      margin: 0 auto;
+    }
+  }
+
+  // Make the color of the placeholder text in the Zenned-out textarea darker,
+  // so it becomes visible
+
+  input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder {
+    color: #A8A8A8;
+  }
+
+  input:checked ~ .zen-backdrop textarea:-moz-placeholder {
+    color: #A8A8A8;
+    opacity: 1;
+  }
+
+  input:checked ~ .zen-backdrop textarea::-moz-placeholder {
+    color: #A8A8A8;
+    opacity: 1;
+  }
+
+  input:checked ~ .zen-backdrop textarea:-ms-input-placeholder {
+    color: #A8A8A8;
+  }
+}