From 571a1d89a51861485b8e1b519a166888feb25bc9 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Wed, 30 Jul 2014 13:39:38 +0300
Subject: [PATCH] Settings

---
 ghost/admin/assets/sass/layouts/settings.scss | 410 ++++++++++++++++++
 ghost/admin/assets/sass/screen.scss           |   1 +
 2 files changed, 411 insertions(+)
 create mode 100644 ghost/admin/assets/sass/layouts/settings.scss

diff --git a/ghost/admin/assets/sass/layouts/settings.scss b/ghost/admin/assets/sass/layouts/settings.scss
new file mode 100644
index 0000000000..a79d73f229
--- /dev/null
+++ b/ghost/admin/assets/sass/layouts/settings.scss
@@ -0,0 +1,410 @@
+//
+// Settings
+// --------------------------------------------------
+// Slug: /ghost/settings/
+// --------------------------------------------------
+
+.settings {
+
+    // The main white bg for the page
+    .wrapper {
+        background: #fff;
+        box-shadow: $shadow;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+
+        @media (max-width: 800px) {
+            top: -55px;
+            margin-top: 55px;
+            overflow-x: hidden;
+        }
+    }
+
+    .title {
+        text-transform: uppercase;
+        font-weight: normal;
+        font-size: 1.6em;
+        line-height: 0.8em;
+        margin: 0 0 18px 0;
+        padding: 0;
+        border: none;
+    }
+
+} // .settings
+
+
+//
+// Sidebar
+// --------------------------------------------------
+
+// The whole left column sidebar, duh.
+.settings-sidebar {
+    width: 20%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 700;
+    background: #fff;
+    box-shadow: $lightbrown 1px 0 0;
+    @media (max-width: 800px) {
+        width: 100%;
+        box-shadow: none;
+    }
+
+    > header {
+        position: relative;
+        z-index: 400;
+        height: 17px;
+        padding: 30px 15px 47px 40px;
+        margin-bottom: 0;
+        border-bottom: none;
+        box-shadow: #edece4 0 -1px 0 inset, #edece4 1px 0 0;
+
+        // Transparent gradient to make bg fade out as it goes out the top.
+        // TODO: Much improve
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.90)));
+        background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
+        background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
+
+        @media (max-width: 1000px) {
+            padding-left: 15px;
+        }
+    }
+    
+} // .settings-sidebar
+
+// Main settings-menu styles, apply to every item
+.settings-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: -1px;
+    overflow: auto;
+    @media (max-width: 800px) {
+        right: 0;
+    };
+
+    // Create placeholder the same height as the floating header
+    // to push content down by the same amount
+    &:before {
+        display: block;
+        content: "";
+        height: 77px; // 30px + 17px title + 30px
+    }
+
+    ul {
+        border-top: none;
+        @media (max-width: 800px) { border-bottom: #edece4 1px solid; }
+    }
+
+    li {
+        margin-right: 1px;
+        border-top: #fff 1px solid;
+        @media (max-width: 800px) {
+            margin-right: 0;
+            border-top: #edece4 1px solid;
+        }
+
+        a {
+            padding: 15px 15px 15px 40px;
+            border-bottom: none;
+            @media (max-width: 1000px) { padding-left: 15px; }
+            @media (max-width: 800px) {
+                @include icon-after($i-chevron) {
+                    float: right;
+                    margin-top: 5px;
+                };
+            }
+        }
+
+        &:first-child {
+            border-top: none;
+        }
+        &:first-child.active {
+            border-top: none;
+        }
+
+        &.active {
+            @media (min-width: 801px) {
+                // only apply active styles on larger devices
+
+                margin-right: 0;
+                position: relative;
+                z-index: 300;
+                border-top: #edece4 1px solid;
+                box-shadow: #fff 1px 0 0, #edece4 0 1px 0;
+                @include transition;
+
+                a {
+                    color: $darkgrey;
+                    font-weight: bold;
+                    background: #fff;
+                    &:focus {
+                        background: $lightbrown;
+                    }
+                }
+
+            }
+        } // .active
+
+    } // li
+
+    // Give all icons some space
+    li a:before {
+        margin-right: 20px;
+        @media (max-width: 1000px) {
+            margin-right: 15px;
+        }
+    }
+
+    // Add the icons for specific menu items
+    .about a {
+        @include icon($i-ghost);
+    }
+    .general a {
+        @include icon($i-settings);
+    }
+    .publishing a {
+        @include icon($i-content);
+    }
+    .services a {
+        @include icon($i-services);
+    }
+    .users a {
+        @include icon($i-users);
+    }
+    .appearance a {
+        @include icon($i-appearance);
+    }
+    .apps a {
+        @include icon($i-app);
+    }
+    .code a {
+        @include icon($i-code);
+    }
+
+} // .settings-menu
+
+
+//
+// Content
+// --------------------------------------------------
+
+// The main content panel on the right
+.settings-content {
+    padding: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 20%;
+    bottom: 0;
+    background: #fff;
+
+    @media (max-width: 800px) {
+        width: 100%;
+        left: 100%;
+        right: -100%;
+        margin-left: 15px;
+    }
+
+    .settings-general img {
+        max-width: 100%;
+        max-height: 400px;
+    }
+
+    // TODO: Header could really be more specific (class)
+    > header {
+        position: relative;
+        z-index: 200;
+        height: 17px;
+        padding: 30px 220px 46px 40px;
+        border-bottom: $lightbrown 1px solid;
+        margin-bottom: 40px;
+        text-transform: none;
+        font-weight: normal;
+        line-height: inherit;
+        color: inherit;
+
+        // Transparent gradient to make bg fade out as it goes out the top.
+        // TODO: Significantly improve
+        background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0.90) 100%);
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.90)));
+        background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
+        background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
+        background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
+        background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
+
+        @media (max-width: 1000px) {
+            padding-left: 15px;
+        }
+        // @media (max-width: 800px) {
+        //     padding-left: 115px;
+        // }
+        @media (max-height: 600px) {
+            height: auto;
+            padding: 5px;
+            position: absolute;
+            top: 0;
+            right: 0;
+            border: none;
+            background: transparent;
+
+            .title {
+                display: none;
+            }
+        }
+        @media (max-width: 650px) {
+            padding-left: 15px;
+
+            .button-back {
+                position: fixed;
+                top: 5px;
+                left: 14px;
+                min-height: 0;
+                padding-top: 8px;
+                padding-bottom: 8px;
+                display: block;
+
+                &:before {
+                    left: -9px;
+                    border-width: 15px 9px 15px 0;
+                }
+            }
+        }
+
+        .header-inner {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 100px;
+            outline: 1px solid red;
+        }
+
+    } // header
+
+
+    .page-actions {
+        position: absolute;
+        top: 20px;
+        right: 40px;
+        z-index: 700;
+        font-size: 1em;
+
+        @media (max-width: 1000px) {
+            right: 15px;
+        }
+        @media (max-width: 650px) {
+            position: fixed;
+            top: 5px;
+            right: 4px;
+
+            .button-save {
+                min-height: 0;
+                height: 30px;
+                padding: 0.5em 1.37em;
+            }
+        }
+        &.page-actions-alt {
+            left: 40px;
+            @media (max-width: 1000px) {
+                left: 15px;
+            }
+        }
+
+        .button-add {
+            position: relative;
+            padding-left: 50px;
+            border: rgba(0,0,0,0.07) 1px solid;
+            @include icon($i-add, 1.4em, rgba(255,255,255,0.6)) {
+                position: absolute;
+                top: 0;
+                padding: 9px 8px 0 0;
+                left: 9px;
+                bottom: 0;
+                width: 26px;
+                border-right: rgba(0,0,0,0.07) 1px solid;
+            };
+            @media (max-width: 650px) {
+                height: 30px;
+                min-height: 30px;
+                padding: 6px 10px 8px 40px;
+                &:before {
+                    padding-top: 7px;
+                    left: 8px;
+                    width: 22px;
+                }
+            }
+        }
+    } // > header
+
+    .content {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        padding: 40px;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        // Create placeholder the same height as the floating header
+        // to push content down by the same amount
+        &:before {
+            display: block;
+            content: "";
+            height: 87px;
+        }
+
+        &.no-padding {
+            padding: 0;
+        }
+
+        @media (max-width: 1000px) {
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+        @media (max-width: 550px) {
+            padding: 0 15px 40px;
+        }
+    } // .content
+
+    .description-container,
+    .bio-container {
+        textarea {
+            min-height: 115px;
+        }
+    }
+
+    .word-count {
+        float: right;
+        font-weight: bold;
+        color: darken($brown, 5%);
+    }
+
+    @media (max-width: 550px) {
+        textarea {
+            max-width: 100%;
+            + p {
+                max-width: 100%;
+            }
+        }
+    }
+
+} // .settings-content
+
+
+//
+// Code Injection
+// --------------------------------------------------
+// TODO: This should not be here
+
+.header-injection,
+.footer-injection {
+    margin-top: 3.2em;
+}
\ No newline at end of file
diff --git a/ghost/admin/assets/sass/screen.scss b/ghost/admin/assets/sass/screen.scss
index 7e5b9a1294..4e5cde25ff 100644
--- a/ghost/admin/assets/sass/screen.scss
+++ b/ghost/admin/assets/sass/screen.scss
@@ -49,6 +49,7 @@
 @import "layouts/auth";
 @import "layouts/content";
 @import "layouts/editor";
+@import "layouts/settings";
 @import "layouts/users";
 @import "layouts/about";
 @import "layouts/error";
\ No newline at end of file