Update styles for content screen, buttons, and app frame

* Updates styling on content management screen, replaces button styles, tweaks application frame style
TryGhost · Feb 16, 2017 · 503e8d8 · 503e8d8
1 parent 3956210
commit 503e8d8
Show file tree

Hide file tree

Showing 79 changed files with 608 additions and 465 deletions.
diff --git a/app/controllers/setup/three.js b/app/controllers/setup/three.js
@@ -123,9 +123,9 @@ export default Controller.extend({
 
     buttonClass: computed('validationResult', 'usersArray.length', function () {
         if (this.get('validationResult') === true && this.get('usersArray.length') > 0) {
-            return 'btn-green';
+            return 'gh-btn-green';
         } else {
-            return 'btn-minor';
+            return 'gh-btn-minor';
         }
     }),
 

diff --git a/app/html/permalinks.html b/app/html/permalinks.html
@@ -92,10 +92,10 @@ <h2 class="page-title">Settings</h2>
                     <section class="settings-content js-settings-content fade-in">
 
                         <header class="settings-view-header">
-                            <a class="btn btn-default btn-back active" href="/ghost/settings/">Back</a>
+                            <a class="gh-btn gh-btn-default gh-btn-back active" href="/ghost/settings/"><span>Back</span></a>
                             <h2 class="page-title">General</h2>
                             <section class="page-actions">
-                                <button type="button" class="btn btn-blue" data-ember-action="1271">Save</button>
+                                <button type="button" class="gh-btn gh-btn-blue" data-ember-action="1271"><span>Save</span></button>
                             </section>
                         </header>
 
@@ -110,7 +110,7 @@ <h2 class="page-title">General</h2>
 
                                 <div class="form-group">
                                     <label for="blog-logo">Blog Logo</label>
-                                    <button type="button" class="btn btn-green js-modal-logo" data-ember-action="1277">Upload Image</button>
+                                    <button type="button" class="gh-btn gh-btn-green js-modal-logo" data-ember-action="1277"><span>Upload Image</span></button>
                                     <p>Display a sexy logo for your publication</p>
                                 </div>
 
@@ -247,4 +247,4 @@ <h2 class="page-title">General</h2>
         });
 
     });
-</script>
+</script>
diff --git a/app/routes/settings/navigation.js b/app/routes/settings/navigation.js
@@ -29,7 +29,7 @@ export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, {
         save() {
             // since shortcuts are run on the route, we have to signal to the components
             // on the page that we're about to save.
-            $('.page-actions .btn-blue').focus();
+            $('.page-actions .gh-btn-blue').focus();
 
             this.get('controller').send('save');
         },

diff --git a/app/styles/components/modals.css b/app/styles/components/modals.css
@@ -7,6 +7,9 @@
 
 /* explicit modal container so that background and content can be animated individually */
 .fullscreen-modal-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     visibility: hidden;
     position: fixed;
     top: 0;
@@ -26,7 +29,8 @@
     left: 0;
     z-index: 50;
     height: 100vh;
-    background: rgba(0, 0, 0, 0.6);
+    background: #324750;
+    opacity: 0.86;
 }
 
 .fullscreen-modal {
@@ -49,23 +53,12 @@
 /* ---------------------------------------------------------- */
 
 .fullscreen-modal-wide {
-    width: 550px;
-}
-
-@media (max-width: 900px) {
-    .fullscreen-modal-wide {
-        width: 100%;
-    }
+    width: 100%;
+    max-width: 550px;
 }
 
 .fullscreen-modal-action {
-    margin: 60px auto 30px;
-}
-
-@media (max-width: 900px) {
-    .fullscreen-modal-action {
-        margin: 30px auto;
-    }
+    margin: 2vh 0 10vh 0;
 }
 
 
@@ -78,11 +71,11 @@
 
 .modal-content {
     position: relative;
-    padding: 18px;
+    padding: 40px;
     background-color: #fff;
     background-clip: padding-box;
-    border-radius: var(--border-radius);
-    box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 6px;
+    border-radius: 6px;
+    box-shadow: 0 0 1px rgba(0,0,0,.1), 0 2px 5px rgba(0,0,0,.05);
 }
 
 .modal-content * {
@@ -113,25 +106,19 @@
 .modal-header h1 {
     display: inline-block;
     margin: 0 25px 0 0;
-    font-size: 1.85em;
-    font-weight: 100;
+    font-size: 2.2rem;
+    line-height: 1.15em;
+    font-weight: 600;
+    letter-spacing: 0.4px;
 }
 
 .modal-body {
     position: relative;
     overflow-y: auto;
 }
 
-.modal-body .red {
-    color: var(--red);
-}
-
-.modal-body > *:first-child {
-    margin-top: 0;
-}
-
-.modal-body > *:last-child {
-    margin-bottom: 0;
+.modal-body p {
+    font-size: 1.4rem;
 }
 
 .modal-footer {
@@ -177,7 +164,7 @@
         margin: 0 auto 1em;
         width: 100%;
     }
-    .modal-body .login-form .btn {
+    .modal-body .login-form .gh-btn {
         margin: 0;
         margin-bottom: 1em;
         width: 100%;

diff --git a/app/styles/components/splitbuttons.css b/app/styles/components/splitbuttons.css
@@ -9,30 +9,30 @@
     /* Flatten out the left side */
 }
 
-.splitbtn .btn {
+.splitbtn .gh-btn {
     position: relative;
     float: left;
     /* Prevent double border between buttons */
     /* Make sure the hovered element is always on
-    // top so overlap from .btn + btn. invisible */
+    // top so overlap from .gh-btn + btn. invisible */
 }
 
-.splitbtn .btn + .btn {
+.splitbtn .gh-btn + .gh-btn {
     margin-left: -1px;
 }
 
-.splitbtn .btn:hover,
-.splitbtn .btn:focus,
-.splitbtn .btn:active,
-.splitbtn .btn.active {
+.splitbtn .gh-btn:hover,
+.splitbtn .gh-btn:focus,
+.splitbtn .gh-btn:active,
+.splitbtn .gh-btn.active {
     z-index: 2;
 }
 
-.splitbtn .btn:first-child {
+.splitbtn .gh-btn:first-child {
     margin-left: 0;
 }
 
-.splitbtn .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+.splitbtn .gh-btn:first-child:not(:last-child):not(.dropdown-toggle) {
     height: 31px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -46,13 +46,13 @@
     /* This is the additional dropdown arrow, to the right of the button. */
 }
 
-.splitbtn .dropdown-toggle.btn-sm {
+.splitbtn .dropdown-toggle.gh-btn-sm {
     padding-right: 10px;
     padding-left: 10px;
     height: 31px;
 }
 
-.splitbtn .dropdown-toggle.btn-lg {
+.splitbtn .dropdown-toggle.gh-btn-lg {
     padding-right: 16px;
     padding-left: 16px;
 }

diff --git a/app/styles/components/uploader.css b/app/styles/components/uploader.css
@@ -113,7 +113,7 @@
     font-size: 1.4rem;
 }
 
-.gh-image-uploader input.url + .btn.btn-blue {
+.gh-image-uploader input.url + .gh-btn.gh-btn-blue {
     color: #fff;
 }
 
@@ -156,7 +156,7 @@
 }
 
 /* Try Again button */
-.gh-image-uploader .btn-green:last-child {
+.gh-image-uploader .gh-btn-green:last-child {
     margin-top: 1em;
     margin-bottom: 3em;
 }
diff --git a/app/styles/layouts/about.css b/app/styles/layouts/about.css
@@ -28,9 +28,8 @@
     max-width: 200px;
 }
 
-.gh-env-help .btn {
-    display: block;
-    margin: 5px 0;
+.gh-env-help .gh-btn {
+    margin: 4px 0;
 }
 
 @media (max-width: 670px) {
@@ -42,7 +41,7 @@
         margin: 1em 0;
         max-width: none;
     }
-    .gh-env-help .btn {
+    .gh-env-help .gh-btn {
         display: inline-block;
     }
 }

diff --git a/app/styles/layouts/apps.css b/app/styles/layouts/apps.css
@@ -67,7 +67,7 @@
     display: flex;
 }
 
-.apps-card-content > .btn {
+.apps-card-content > .gh-btn {
     position: absolute;
     top: 5px;
     right: 20px;
@@ -197,15 +197,15 @@
     color: #666363;
     font-size: 1.6rem;
 }
-.app-config-form .btn-grey {
+.app-config-form .gh-btn-grey {
     margin-top: 1.6em;
     background-color: #e8e8e8;
     box-shadow: none;
     font-size: 1.1rem;
 }
 
-.app-config-form > .btn-grey:hover,
-.app-config-form > .btn-grey:focus {
+.app-config-form > .gh-btn-grey:hover,
+.app-config-form > .gh-btn-grey:focus {
     border-color: rgb(223, 225, 227);
 }
 /* Media Queries

diff --git a/app/styles/layouts/auth.css b/app/styles/layouts/auth.css
@@ -17,7 +17,7 @@
     margin-bottom: 1.5rem;
 }
 
-.gh-signin .btn {
+.gh-signin .gh-btn {
     margin: 0;
     padding: 12px;
 }

diff --git a/app/styles/layouts/content.css b/app/styles/layouts/content.css
@@ -31,7 +31,7 @@
 .gh-contentfilter li a {
     display: block;
     padding: 13px 1px 0;
-    color: var(--midgrey);
+    color: color(var(--midgrey) l(+8%));
     font-size: 1.5rem;
     font-weight: 300;
     letter-spacing: 0.3px;

diff --git a/app/styles/layouts/flow.css b/app/styles/layouts/flow.css
@@ -218,7 +218,7 @@
     }
 }
 
-.gh-flow-content .btn {
+.gh-flow-content .gh-btn {
     display: block;
     margin: 20px auto 0;
     max-width: 400px;

diff --git a/app/styles/layouts/main.css b/app/styles/layouts/main.css
@@ -61,7 +61,7 @@ body > .ember-view:not(.liquid-target-container) {
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    padding: 15px;
+    padding: 25px;
     cursor: pointer;
 }
 
@@ -115,7 +115,7 @@ body > .ember-view:not(.liquid-target-container) {
 
 .gh-nav-search {
     position: relative;
-    margin: 0 15px 10px;
+    margin: 0 25px 15px;
 }
 
 .gh-nav-search .ember-power-select-trigger {
@@ -147,7 +147,7 @@ body > .ember-view:not(.liquid-target-container) {
 
 .gh-nav-list {
     margin: 0;
-    padding: 0 15px 0 0;
+    padding: 0 25px 0 0;
     list-style: none;
     font-size: 1.3rem;
     line-height: 1.5em;
@@ -160,7 +160,7 @@ body > .ember-view:not(.liquid-target-container) {
 .gh-nav-list .gh-nav-list-h {
     overflow: hidden;
     margin-top: 15px;
-    padding: 5px 10px 5px 15px;
+    padding: 10px 10px 10px 25px;
     color: #808284;
     text-transform: uppercase;
     text-overflow: ellipsis;
@@ -173,7 +173,7 @@ body > .ember-view:not(.liquid-target-container) {
 .gh-nav-list a {
     display: flex;
     align-items: center;
-    padding: 5px 10px 5px 15px;
+    padding: 7px 10px 7px 25px;
     border-radius: 0 4px 4px 0;
     color: var(--darkgrey);
     opacity: 0.9;
@@ -461,6 +461,7 @@ body > .ember-view:not(.liquid-target-container) {
     flex-grow: 1;
     padding: 2.9vw 4vw 3vw 4vw;
     margin: 0 auto;
+    overflow-y: auto;
 }
 
 .gh-canvas-header {
@@ -528,7 +529,7 @@ body > .ember-view:not(.liquid-target-container) {
     align-items: center;
 }
 
-.view-actions .btn {
+.view-actions .gh-btn {
     margin-left: 8px;
 }
 

diff --git a/app/styles/layouts/packages.css b/app/styles/layouts/packages.css
@@ -145,7 +145,7 @@
     display: flex;
 }
 
-.package-card-content .btn {
+.package-card-content .gh-btn {
     position: absolute;
     right: 20px;
 }