Textarea Editor CSS Improvements

References TryGhost#4373 * Consistent line-height & padding cross-browser * Remove drag handle from textarea * Partially clean up the CSS to more closely match the new standard
hilln · Mar 17, 2015 · a7b82f4 · a7b82f4
1 parent 5db6fc4
commit a7b82f4
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 51 deletions.
diff --git a/core/client/app/styles/layouts/editor.scss b/core/client/app/styles/layouts/editor.scss
@@ -177,53 +177,50 @@
 
 .editor {
     .entry-markdown-content {
-        textarea {
-            border: 0;
-            width: 100%;
-            min-height: auto;
-            height: calc(100% - 40px);
-            max-width: 100%;
-            margin: 0;
-            padding: 22px 20px 35px 20px;
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            -webkit-overflow-scrolling: touch;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
 
-            font-size: 2rem;
-            line-height: 1.7em;
-            font-family: $font-family-mono;
-            color: lighten($darkgrey, 10%);
+    .markdown-editor {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
 
-            &:focus {
-                outline: 0;
-            }
+        height: 100%;
+        max-width: 100%;
 
-            ::selection {
-                color: $darkgrey;
-                background: lighten($blue, 20%);
-                text-shadow: none;
-            }
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
-            @media (max-width: 600px) {
-                padding: 10px;
-            }
+        resize: none;
+        border: 0;
 
-            @media (min-width: 601px) and (max-width: 1000px) {
-                padding: 15px;
-            }
+        font-size: 1.6rem;
+        line-height: 2.5rem;
+        font-family: $font-family-mono;
+        color: lighten($darkgrey, 10%);
 
-            @media (min-width: 1001px) {
-                top: 40px;
-            }
+        &:focus {
+            outline: 0;
+        }
 
-            @media (max-height: 560px) {
-                height: calc(100% - 5px);
-            }
-        } // textarea
-    } // .entry-markdown-content
+        @media (max-width: 450px) {
+            padding: 15px;
+        }
+
+        @media (min-width: 451px) and (max-width: 1000px) {
+            padding: 20px;
+        }
+
+        @media (min-width: 1001px) {
+            padding: 62px 20px 36px 20px;
+        }
+    }
 
     .entry-preview {
         // Align the tab of entry-preview on the right
@@ -242,7 +239,7 @@
         right: 0;
         bottom: 0;
         left: 0;
-        padding: 60px 40px 40px 40px;
+        padding: 60px 40px 37px 40px;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
         word-break: break-word;
@@ -281,6 +278,21 @@
 }//.editor
 
 
+
+//
+// Firefox Editor Hacks
+// --------------------------------------------------
+@-moz-document url-prefix() {
+    .editor .markdown-editor {
+        padding-top: 0;
+        padding-bottom: 0;
+        top: 40px;
+        height: calc(100% - 40px);
+    }
+}
+
+
+
 //
 // Markdown Help Icon
 // --------------------------------------------------
@@ -365,7 +377,7 @@
     font-weight: bold;
     font-size: 1.6rem;
     text-align: center;
-}
+}//.entry-preview-content, .content-preview-content
 
 
 //
@@ -550,14 +562,6 @@ body.zen {
         bottom: 49px;
         right: 0;
 
-        &.fade-in-scale {
-            animation-duration: 0.1s;
-        }
-
-        &.fade-out {
-            animation-duration: 0.01s;
-        }
-
         .dropdown-menu {
             top: auto;
             left: auto;

diff --git a/core/client/app/styles/modules/variables.scss b/core/client/app/styles/modules/variables.scss
@@ -34,7 +34,7 @@ $box-shadow: rgba(0,0,0,0.05) 0 1px 5px;
 $settings-menu-transition: 0.4s;
 $settings-menu-bezier: 0.1, 0.7, 0.1, 1;
 $font-family: 'Open Sans', sans-serif;
-$font-family-mono: monospace;
+$font-family-mono: Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
 
 
 //