From e14cb231c00f7267d3250cd3ef2fccf9e3ada958 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Wed, 30 Jul 2014 12:59:07 +0300
Subject: [PATCH] Editor styles + split codemirror styles out into lib

---
 core/client/assets/sass/layouts/editor.scss | 709 ++++++++++++++++++++
 core/client/assets/sass/lib/codemirror.scss | 207 ++++++
 core/client/assets/sass/screen.scss         |   3 +
 3 files changed, 919 insertions(+)
 create mode 100644 core/client/assets/sass/layouts/editor.scss
 create mode 100644 core/client/assets/sass/lib/codemirror.scss

diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
new file mode 100644
index 0000000000..0702dbdb64
--- /dev/null
+++ b/core/client/assets/sass/layouts/editor.scss
@@ -0,0 +1,709 @@
+//
+// Editor
+// --------------------------------------------------
+// Slug: /ghost/editor/
+// --------------------------------------------------
+
+ // The main post title
+.entry-container .entry-title {
+    @extend .box;
+    height: 57px;
+    padding: 2px 15px;
+    margin-bottom: 5px;
+    position: relative;
+
+    @media (max-width: 400px) {
+        box-shadow: none;
+    }
+
+    input {
+        border: 0;
+        margin: 0;
+        padding: 0;
+        font-size: 3em;
+        font-weight: bold;
+        letter-spacing: -1px;
+        width: 100%;
+        background: transparent;
+        &:focus {
+            outline: 0;
+        }
+    }
+} // .entry-title
+
+.editor {
+
+    .notifications {
+        @media (min-width: 401px) {
+            bottom: 40px;
+        }
+    }
+
+    .entry-container {
+        position: relative;
+        height: 100%;
+    }
+
+    // The two content panel wrappers, positioned left/right
+    .entry-markdown { left: 0; border-right: $lightbrown 2px solid; }
+    .entry-preview { right: 0; border-left: $lightbrown 2px solid; }
+
+    // The visual styles for both panels
+    .entry-markdown,
+    .entry-preview {
+        width: 50%;
+        padding: 15px;
+        position: absolute;
+        bottom: 40px; // height of the publish bar
+        top: 61px; // height of the post title + margin
+        background: #fff;
+        box-shadow: $shadow;
+
+        @media (max-width: 400px) {
+            box-shadow: none;
+        }
+
+        // Convert all content areas to small boxes
+        @media (max-width: 1000px) {
+            top: 109px;
+            left: 0;
+            right: 0;
+            width: 100%;
+            border: none;
+            z-index: 100;
+            min-height: 380px;
+            .markdown, .entry-preview-content {
+                height: 50px;
+                overflow: hidden;
+            }
+        }
+
+        .floatingheader {
+
+            // Turn headers into tabs which act as links
+            // both headers set to grey/inactive colour
+            @media (max-width: 1000px) {
+                cursor: pointer;
+                width: 50%;
+                border-right: $lightbrown 2px solid;
+                color: #fff;
+                font-weight: normal;
+                background: $brown;
+                position: absolute;
+                top: -40px;
+                left: 0;
+                box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset;
+
+                a {
+                    color: #fff;
+                }
+            }
+
+            a {
+                color: $brown;
+            }
+
+            .entry-word-count {
+                float: right;
+            }
+
+        }
+
+        @media (max-width: 1000px) {
+            &:not(.active) {
+                .markdown-help {
+                    &:hover:before {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+
+        // Give the tab with the .active class the highest z-index
+        &.active {
+            z-index: 200;
+        }
+
+        // Restore the normal height of the .active tab (inactive tab stays small, hidden behind)
+        &.active .markdown,
+        &.active .entry-preview-content {
+            height: auto;
+            overflow: auto;
+        }
+
+        // Restore the white bg of the currently .active tab, remove hand cursor from currently active tab
+        &.active header {
+            @media (max-width: 1000px) {
+                cursor: auto;
+                color: $brown;
+                background: #fff;
+                box-shadow: none;
+                a {
+                    color: $brown;
+                }
+            }
+        }
+
+        // Hide markdown icon + wordcount when we hit mobile
+        @media (max-width: 400px) {
+            .markdown-help,
+            .entry-word-count {
+                display: none;
+            }
+        }
+
+    } // .entry-markdown, .entry-preview
+
+    .entry-markdown-content {
+
+        textarea {
+            border: 0;
+            width: 100%;
+            min-height: auto;
+            height: 100%;
+            max-width: 100%;
+            margin: 0;
+            padding: 10px 20px 50px 20px;
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            -webkit-overflow-scrolling: touch;
+
+            @media (max-width: 600px) {
+                padding: 10px;
+            }
+            @media (min-width: 601px) and (max-width: 1000px) {
+                padding: 15px;
+            }
+            @media (min-width: 1001px) {
+                top: 40px;
+            }
+            @media (max-height: 560px) {
+                height: calc(100% - 40px);
+            }
+
+            &:focus {
+                outline: 0;
+            }
+        }
+
+    } // .entry-markdown-content
+
+    .CodeMirror {
+        height: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        font-family: $font-family-mono;
+        font-size: 1.4em;
+        line-height: 1.3em;
+        color: lighten($darkgrey, 10%);
+
+        .CodeMirror-focused,
+        .CodeMirror-selected {
+            color: $darkgrey;
+            background: lighten($blue, 20%);
+            text-shadow: none;
+        }
+
+        ::selection {
+            color: $darkgrey;
+            background: lighten($blue, 20%);
+            text-shadow: none;
+        }
+    }
+
+    .CodeMirror-lines {
+        padding: 65px 0 40px 0; /* Vertical padding around content */
+        @media (max-width: 1000px) {padding-top: 25px;}
+        @media (max-width: 400px) {padding: 15px 0;}
+    }
+    .CodeMirror pre {
+        padding: 0 40px; /* Horizontal padding of content */
+        @media (max-width: 400px) {padding: 0 15px;}
+    }
+
+    .cm-header {
+        color: #000;
+        font-size: 1.4em;
+        line-height: 1.4em;
+        font-weight: bold;
+    }
+
+    .cm-variable-2,
+    .cm-variable-3,
+    .cm-keyword {
+        color: lighten($darkgrey, 10%);
+    }
+
+    .cm-string,
+    .cm-strong,
+    .cm-link,
+    .cm-comment,
+    .cm-quote,
+    .cm-number,
+    .cm-atom,
+    .cm-tag {
+        color: #000;
+        font-weight: bold;
+    }
+
+    .entry-preview {
+        // Align the tab of entry-preview on the right
+        .floatingheader {
+            @media (max-width: 1000px) {
+                right: 0;
+                left: auto;
+                border-right: none;
+                border-left: $lightbrown 2px solid;
+            }
+        }
+    }
+
+    .entry-preview-content {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding: 60px 40px 40px 40px;
+        overflow: auto;
+        word-break: break-word;
+        hyphens: auto;
+        @include user-select(none);
+        cursor: default;
+
+        // Tweak padding for smaller screens
+        @media (max-width: 1000px) {
+            padding-top: 20px;
+        }
+        @media (max-width: 400px) {
+            padding: 15px;
+        }
+    }
+
+    // Special case, when scrolling, add shadows to content headers.
+    .scrolling {
+
+        .floatingheader {
+            @media (max-width: 1000px) {
+                box-shadow: none;
+            }
+
+            &::before,
+            &::after {
+                @media (max-width: 1000px) {
+                    display: none;
+                }
+            }
+        }
+        .CodeMirror-scroll,
+        .entry-preview-content {
+            @media (max-width: 1000px) {
+                box-shadow: 0 5px 5px rgba(0,0,0,0.05) inset;
+            }
+        }
+    } // .scrolling
+
+} // .editor
+
+.markdown-help {
+    position: relative;
+    top: -5px;
+    right: -5px;
+    @include icon($i-question, '', lighten($brown, 15%));
+    float: right;
+    padding: 5px;
+
+    &:hover {
+        @include icon($i-question, '', $brown);
+    }
+}
+
+
+//
+// Post Preview
+// --------------------------------------------------
+
+// The styles for the actual content inside the preview
+// TODO: These should just be defaults, overridden by editor.hbs in theme dir
+.entry-preview-content,
+.content-preview-content {
+    font-size: 1.4em;
+    line-height: 1.5em;
+
+    a {
+        color: $blue;
+        text-decoration: underline;
+    }
+    p {
+        margin: 1.2em 0 1.6em;
+        &:first-of-type {
+            margin-top: 0;
+        }
+    }
+    h1 {
+        font-size: 3em;
+    }
+    h2 {
+        font-size: 2.2em;
+    }
+    h3 {
+        font-size: 1.8em;
+    }
+    .btn {
+        text-decoration: none;
+        color: $grey;
+    }
+    .img-placeholder {
+        border: 5px dashed $grey;
+        height: 100px;
+        position: relative;
+        span {
+            display: block;
+            height: 30px;
+            position: absolute;
+            margin-top: -15px;
+            top: 50%;
+            width: 100%;
+            text-align: center;
+        }
+    }
+    a {
+        &.image-edit {
+            width: 16px;
+            height: 16px;
+        }
+    }
+    img {
+        max-width: 100%;
+        height: auto;
+        margin: 0 auto;
+    }
+
+}
+
+
+//
+// Zen Mode
+// --------------------------------------------------
+
+body.zen {
+    background: lighten($lightbrown, 3%);
+    .usermenu {
+        display: none;
+    }
+    #global-header,
+    #publish-bar {
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+        @include transition(all 0.5s ease-out);
+    }
+
+    main {
+        top: 15px;
+        @include transition(all 0.5s ease-out);
+    }
+    .entry-markdown,
+    .entry-preview {
+        bottom: 0;
+        @include transition(all 0.5s ease-out);
+    }
+
+}
+
+
+//
+// Publish Bar
+// --------------------------------------------------
+
+#publish-bar {
+    height: 40px;
+    padding: 0;
+    color: $midgrey;
+    background: darken($darkgrey, 4%);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 900;
+    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
+    @include transform(translateZ(0));
+
+    @media (max-width: 1000px) {
+        font-weight: normal;
+    }
+
+    .post-settings {
+        &:hover,
+        &.active {
+            color: $lightgrey;
+        }
+    }
+
+    .post-settings-menu {
+        position: absolute;
+        bottom: 44px;
+        right: -3px;
+    }
+
+    .button-save,
+    .button-delete {
+        min-height: 30px;
+        height: 30px;
+        line-height: 12px;
+        padding: 0 10px;
+        margin-top: 5px;
+        border-top: rgba(255,255,255,0.4) 1px solid;
+    }
+
+    .options {
+        width: 30px;
+        min-height: 30px;
+        height: 30px;
+        margin-top: 5px;
+        border-top: rgba(255,255,255,0.4) 1px solid;
+    }
+
+    .splitbutton-save,
+    .splitbutton-delete{
+        .button-save,
+        .button-delete{
+            @include transition(width 0.25s ease, background-color 0.3s linear);
+        }
+
+        .editor-options{
+            @extend .menu;
+            @extend .menu-right;
+            bottom: 140%;
+            right: -3%;
+
+            a {
+                font-size: 14px;
+            }
+        }
+    }
+}
+
+.extended-tags { // When the tag bar is exapanded
+    position: static;
+    min-height: 100%;
+
+    #entry-tags {
+        &:after {
+            right: 10px;
+        }
+    }
+    .tags {
+        width: 281px;
+    }
+
+    .tag-label,
+    .tag-label.touch {
+        color: #fff;
+    }
+
+    .tag-input {
+        width: 100%;
+        margin-top: 5px;
+        padding-top: 5px;
+        padding-left: 10px;
+        border-top: 1px solid $darkgrey;
+
+    }
+    .right {
+        display: none;
+    }
+}
+
+#entry-tags {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-transform: none;
+    padding: 10px 0 0 0;
+
+    &:after {
+        content: "";
+        position: fixed;
+        top: 10px;
+        right: 220px;
+        width: 20px;
+        height: 26px;
+        @include linear-gradient(left, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
+        z-index: 9999;
+        pointer-events: none;
+
+        @media (max-width: 400px) {
+            right: 200px;
+        }
+    }
+
+    .tags {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+        width: auto;
+        max-width: 80%;
+        max-width: calc(100% - 250px);
+        height: 22px;
+        padding-left: 5px;
+        padding-bottom: 20px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        white-space: nowrap;
+        @include transition(width 0.2s linear);
+
+        @media (max-width: 400px) {
+            display: block;
+            max-width: calc(100% - 230px);
+            padding-bottom: 0;
+        }
+    }
+
+    .tag-label {
+        display: block;
+        float: left;
+        @include icon($i-tag);
+        padding: 1px 8px 0 8px;
+        @include transition;
+
+        &:hover {
+            cursor: pointer;
+            color: $lightgrey;
+        }
+
+        &.touch {
+            color: inherit;
+        }
+    }
+
+    input[type="text"].tag-input {
+        display: inline-block;
+        vertical-align: top;
+        color: $lightgrey;
+        font-weight: 300;
+        background: transparent;
+        border: none;
+
+        width: 150px;
+        margin-top: -8px;
+        line-height: 1;
+        padding: 9px;
+
+        @media (max-width: 400px) {
+            position: absolute;
+            top: 11px;
+            right: 170px;
+            width: 20px;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .tag {
+        @include icon-after($i-x, 8px, $darkgrey) {
+            margin-left: 4px;
+            vertical-align: 10%;
+            text-shadow: rgba(255,255,255,0.15) 0 1px 0;
+            @include transition;
+        }
+        display: inline;
+        margin-right: 2px;
+        padding: 0 5px;
+        color: $lightgrey;
+        white-space: nowrap;
+        background: lighten($grey, 15%);
+        border-radius: $rounded;
+        box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset, #000 0 1px 3px;
+
+        @include user-select(none);
+
+        &:hover {
+            cursor: pointer;
+            @include icon-after($i-x, 8px, $lightgrey) {
+                margin-left: 4px;
+                vertical-align: 10%;
+                text-shadow: none;
+            }
+
+        }
+    }
+}
+
+.suggestions {
+    @extend .menu;
+    bottom: 100%;
+
+    li.selected{
+        background: $blue;
+        box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset, rgba(0,0,0,0.5) 0 1px 5px;
+    }
+
+    li a {
+        padding-left: 25px;
+    }
+
+    mark{
+        background: none;
+        color: white;
+        font-weight: bold;
+    }
+
+}
+
+#entry-controls {
+    display: inline-block;
+    position: relative;
+    padding: 0;
+    z-index: 9000;
+
+    &.unsaved {
+        .post-settings-menu {
+            padding-bottom: 0;
+
+            .post-setting:nth-child(3) td {
+                border-bottom: none;
+            }
+
+            .delete {
+                display: none;
+            }
+        }
+    }
+}
+
+#entry-actions {
+    margin-right: 6px;
+    position: relative;
+}
+
+#entry-actions-menu {
+    position: absolute;
+    bottom: 50px;
+    right: -5px;
+}
+
+
+//
+// Markdown Help Modal
+// --------------------------------------------------
+// TODO: This is shit.
+
+.markdown-help-container{
+    padding-bottom: 20px;
+}
+
+.modal-markdown-help-table {
+    margin-top: 0;
+}
\ No newline at end of file
diff --git a/core/client/assets/sass/lib/codemirror.scss b/core/client/assets/sass/lib/codemirror.scss
new file mode 100644
index 0000000000..a4efcdd229
--- /dev/null
+++ b/core/client/assets/sass/lib/codemirror.scss
@@ -0,0 +1,207 @@
+//
+// CodeMirror
+// --------------------------------------------------
+
+.CodeMirror {
+    /* Set height, width, borders, and global font properties here */
+    font-family: monospace;
+    height: 300px;
+}
+
+.CodeMirror-scroll {
+    /* Set scrolling behaviour here */
+    overflow: auto;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+    padding: 4px 0; /* Vertical padding around content */
+}
+
+.CodeMirror pre {
+    padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler {
+    background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+}
+
+/* CURSOR */
+
+.CodeMirror div.CodeMirror-cursor {
+    border-left: 1px solid black;
+    z-index: 3;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+}
+
+
+.cm-tab { display: inline-block; }
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable {color: black;}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-property {color: black;}
+.cm-s-default .cm-operator {color: black;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-error {color: #f00;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+
+.cm-invalidchar {color: #f00;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+    line-height: 1;
+    position: relative;
+    overflow: hidden;
+    background: white;
+    color: black;
+}
+
+.CodeMirror-scroll {
+    /* 30px is the magic margin used to hide the element's real scrollbars */
+    /* See overflow: hidden in .CodeMirror */
+    margin-bottom: -30px; margin-right: -30px;
+    padding-bottom: 30px; padding-right: 30px;
+    height: 100%;
+    outline: none; /* Prevent dragging from highlighting the element */
+    position: relative;
+}
+.CodeMirror-sizer {
+    position: relative;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actuall scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler {
+    position: absolute;
+    z-index: 6;
+    display: none;
+}
+
+.CodeMirror-vscrollbar {
+    right: 0; top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+.CodeMirror-hscrollbar {
+    bottom: 0; left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll;
+}
+
+.CodeMirror-scrollbar-filler {
+    right: 0; bottom: 0;
+    z-index: 6;
+}
+
+.CodeMirror-gutters {
+    position: absolute; left: 0; top: 0;
+    height: 100%;
+    padding-bottom: 30px;
+    z-index: 3;
+}
+
+.CodeMirror-lines {
+    cursor: text;
+}
+
+.CodeMirror pre {
+    /* Reset some styles that the rest of the page might have set */
+    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+    border-width: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+    line-height: inherit;
+    color: inherit;
+    z-index: 2;
+    position: relative;
+    overflow: visible;
+}
+
+.CodeMirror-wrap pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal;
+}
+
+.CodeMirror-wrap .CodeMirror-scroll {
+    overflow-x: hidden;
+}
+
+.CodeMirror-measure {
+    position: absolute;
+    width: 100%; height: 0px;
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.CodeMirror-measure pre { position: static; }
+
+.CodeMirror:not(.CodeMirror-focused) {
+    div.CodeMirror-cursor {
+        visibility: hidden;
+    }
+}
+
+.CodeMirror div.CodeMirror-cursor {
+    position: absolute;
+    border-right: none;
+    width: 0;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+
+/* IE7 hack to prevent it from returning funny offsetTops on the spans */
+.CodeMirror span { *vertical-align: text-bottom; }
+
+@media print {
+/* Hide the cursor when printing */
+    .CodeMirror div.CodeMirror-cursor {
+        visibility: hidden;
+    }
+}
\ No newline at end of file
diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss
index 5854420a60..37810a8db3 100644
--- a/core/client/assets/sass/screen.scss
+++ b/core/client/assets/sass/screen.scss
@@ -15,6 +15,7 @@
 
 @import "normalize"; // via Bower
 @import "lib/nprogress";
+@import "lib/codemirror";
 
 
 //
@@ -46,5 +47,7 @@
 @import "layouts/default";
 @import "layouts/setup";
 @import "layouts/auth";
+@import "layouts/content";
+@import "layouts/editor";
 @import "layouts/users";
 @import "layouts/about";