Update design screen styles, fix login bugs

Refs TryGhost/Ghost#8021
TryGhost · Feb 27, 2017 · ae1007c · ae1007c
1 parent 0f46d21
commit ae1007c
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 226 deletions.
diff --git a/app/components/gh-theme-table.js b/app/components/gh-theme-table.js
@@ -14,7 +14,8 @@ export default Component.extend({
             let themePackage = get(t, 'package');
 
             theme.name = get(t, 'name');
-            theme.label = themePackage ? `${themePackage.name} - ${themePackage.version}` : theme.name;
+            theme.label = themePackage ? `${themePackage.name}` : theme.name;
+            theme.version = themePackage ? `${themePackage.version}` : '1.0';
             theme.package = themePackage;
             theme.active = theme.name === activeTheme;
             theme.isDeletable = !theme.active;

diff --git a/app/styles/components/badges.css b/app/styles/components/badges.css
@@ -11,6 +11,7 @@
     font-weight: 400;
     text-align: center;
     text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
+    text-decoration: none;
     white-space: nowrap;
     user-select: none;
     background: linear-gradient(
@@ -50,4 +51,5 @@
     font-weight: 400;
     background: transparent;
     box-shadow: none;
+    text-shadow: none;
 }
diff --git a/app/styles/layouts/apps.css b/app/styles/layouts/apps.css
@@ -87,6 +87,16 @@
     color: var(--midgrey);
 }
 
+.apps-configured a {
+    text-decoration: underline;
+}
+
+.apps-configured-action {
+    margin-left: 15px;
+    text-transform: uppercase;
+    font-size: 11px;
+}
+
 .apps-card-app-icon {
     flex: 0 0 47px;
     margin: 0 15px 0 0;
@@ -201,47 +211,3 @@
 .app-config-form > .gh-btn-grey:focus {
     border-color: rgb(223, 225, 227);
 }
-/* Media Queries
-/* ---------------------------------------------------------- */
-
-@media (max-width: 800px) {
-    .apps-grid-apps {
-        overflow: hidden;
-        margin: 0 0 4vw 0;
-        border: #dfe1e3 1px solid;
-        border-radius: 5px;
-    }
-
-    .apps-card-app {
-        margin: 0;
-        border: none;
-        border-top: #dfe1e3 1px solid;
-        border-radius: 0;
-    }
-    .apps-grid-cell:first-of-type .apps-card-app {
-        border-top: none;
-    }
-}
-
-@media (max-width: 760px) {
-    .apps-card-app {
-        padding: 15px;
-    }
-    .apps-card-app .apps-card-footer {
-        justify-content: flex-end;
-    }
-    .apps-card-theme .apps-card-footer {
-        margin: 0;
-        padding: 15px;
-    }
-}
-
-@media (max-width: 540px) {
-    .apps-card-footer {
-        justify-content: flex-end;
-    }
-    .apps-card-app .apps-card-footer {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-}
diff --git a/app/styles/layouts/auth.css b/app/styles/layouts/auth.css
@@ -19,7 +19,6 @@
 
 .gh-signin .gh-btn {
     margin: 0;
-    padding: 12px;
 }
 
 .forgotten-wrap {
@@ -35,17 +34,19 @@
     top: 10px;
     right: 1px;
     bottom: 10px;
-    padding: 0 11px 0 12px;
-    border-left: #dae1e3 1px solid;
+    border-left: color(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
     border-radius: 0;
-    text-transform: none;
+}
+.forgotten-link span {
+    height: 24px;
     font-size: 1.1rem;
-    line-height: 1.2rem;
+    line-height: 24px;
+    padding: 0 11px 0 12px;
 }
 
 .forgotten-link:hover {
-    border-left: #dae1e3 1px solid;
-    color: color(var(--blue) lightness(-20%));
+    border-left: color(var(--lightgrey) l(-15%) s(-10%)) 1px solid;
+    color: color(var(--blue) l(-10%));
     text-decoration: none;
 }
 

diff --git a/app/styles/layouts/settings.css b/app/styles/layouts/settings.css
@@ -38,6 +38,20 @@
     margin: 1px 0 0 0;
 }
 
+/* Images */
+
+.gh-setting-action-smallimg img {
+    max-height: 50px;
+    max-width: 250px;
+}
+
+.gh-setting-action-largeimg img {
+    max-height: 130px;
+    max-width: 250px;
+}
+
+/* Checkboxes */
+
 .gh-setting-action .input-toggle-component {
     float: none;
     margin-right: 0;
@@ -61,8 +75,16 @@
 /* Navigation
 /* ---------------------------------------------------------- */
 
+.gh-blognav-container {
+    padding: 25px 0;
+    border-top: var(--lightgrey) 1px solid;
+}
+
 .gh-blognav {
-    margin: 20px 0;
+    margin: 0 -24px 0 -16px;
+}
+@media (max-width: 600px) {
+    .gh-blognav { margin: 20px 0; }
 }
 
 .gh-blognav-item {
@@ -83,7 +105,7 @@
 .gh-blognav-grab {
     padding: 0 16px 0 0;
     width: 16px;
-    color: #d1d1d1;
+    color: color(var(--midgrey) l(+15%));
     text-indent: -4px;
     font-size: 16px;
     cursor: move;
@@ -105,7 +127,7 @@
 
 .gh-blognav-delete {
     padding: 8px 0 8px 10px;
-    color: #c1c1c1;
+    color: color(var(--midgrey) l(+15%));
     font-size: 14px;
     transition: color 0.1s linear;
 }
@@ -116,8 +138,8 @@
 }
 
 .gh-blognav-add {
-    margin-right: -2px;
-    margin-left: 10px;
+    margin-right: -1px;
+    margin-left: 9px;
     width: 16px;
     height: 16px;
     background: var(--green);
@@ -144,11 +166,11 @@
         margin-right: -1px;
     }
     .gh-blognav-label input {
-        border-right-color: #eaeaea;
+        border-right-color: color(var(--lightgrey) l(-5%) s(-10%));
         border-radius: 4px 0 0 4px;
     }
     .gh-blognav-url input {
-        border-left-color: #eaeaea;
+        border-left-color: color(var(--lightgrey) l(-5%) s(-10%));
         border-radius: 0 4px 4px 0;
     }
     .gh-blognav-item input:focus {
@@ -220,100 +242,15 @@
 /* Themes
 /* ---------------------------------------------------------- */
 
-.settings-themes {
-    max-width: 500px;
-}
-
-.settings-themes h3 {
-    margin-bottom: 1.6em;
-    font-size: 16px;
-}
-
-.theme-list-item {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    padding: 13px 15px;
-    border-top: 1px solid #dfe1e3;
-}
-
-.theme-list-item--active {
-    background: color(#dfe1e3 lightness(+10%));
-}
-
-.theme-list-item-body .name {
-    display: inline-block;
-    color: var(--darkgrey);
-    font-weight: 400;
-    user-select: all;
-}
-
-.theme-list-item:last-of-type {
-    margin-bottom: 1em;
-    border-bottom: 1px solid #dfe1e3;
-}
-
-.theme-list-item-body {
-    flex: 1;
-    align-items: stretch;
-    line-height: 1;
-}
-
-.theme-list-item-aside {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-}
-
-.theme-list-action:last-child {
-    margin-right: 0;
-}
-
-.theme-list-action {
-    float: left;
-    margin-right: 20px;
-    text-transform: uppercase;
-    font-size: 11px;
-}
-
-a.theme-list-action {
-    text-decoration: underline;
-}
-
-/* account for length difference between Active and Activate */
-.theme-list-action-activate {
-    min-width: 52px;
-}
-
-.theme-list-item--active .theme-list-action-activate {
-    color: var(--green);
+.gh-themes-container {
+    padding: 25px 0;
+    border-top: var(--lightgrey) 1px solid;
 }
 
-@media (max-width: 550px) {
-    .theme-list-item {
-        flex-direction: column;
-        align-items: flex-start;
-        height: auto;
-    }
-
-    .theme-list-item-body .name {
-        font-size: 15px;
-    }
-
-    .theme-list-item-aside {
-        display: flex;
-        flex-direction: row-reverse;
-    }
-
-    .theme-list-item-body {
-        margin-bottom: 0.35em;
-        width: 100%;
-    }
-
-    .theme-list-action:last-child {
-        margin-right: 20px;
-    }
+.gh-themes-uploadbtn {
+    margin-top: 25px;
 }
+/*Errors */
 
 .theme-validation-errors {
     padding-left: 0;

diff --git a/app/styles/layouts/users.css b/app/styles/layouts/users.css
@@ -51,13 +51,6 @@
     opacity: 0;
 }
 
-.user-list-action {
-    margin-right: 15px;
-    text-decoration: underline;
-    text-transform: uppercase;
-    font-size: 11px;
-}
-
 
 /* Role Labels
 /* ---------------------------------------------------------- */

diff --git a/app/styles/patterns/buttons.css b/app/styles/patterns/buttons.css
@@ -91,7 +91,7 @@ fieldset[disabled] .gh-btn {
     color(var(--blue) l(-5%) saturation(-8%)) 90%,
     color(var(--blue) l(-3%) saturation(-8%))
     );
-    box-shadow: 0 1px 0 inset rgba(255,255,255,0.1);
+    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
 }
 
 /* When clicked or focused with keyboard */
@@ -131,7 +131,7 @@ fieldset[disabled] .gh-btn {
     color(var(--green) l(-3%) saturation(-7%)) 90%,
     color(var(--green) l(-3%) saturation(-9%))
     );
-    box-shadow: 0 1px 0 inset rgba(255,255,255,0.1);
+    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
 }
 
 /* When clicked or focused with keyboard */
@@ -172,7 +172,7 @@ fieldset[disabled] .gh-btn {
     color(var(--red) l(-7%) saturation(-10%)) 90%,
     color(var(--red) l(-4%) saturation(-10%))
     );
-    box-shadow: 0 1px 0 inset rgba(255,255,255,0.1);
+    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
 }
 
 /* When clicked or focused with keyboard */
@@ -212,7 +212,7 @@ fieldset[disabled] .gh-btn {
     color(var(--darkgrey) l(-7%) saturation(-10%)) 90%,
     color(var(--darkgrey) l(-4%) saturation(-10%))
     );
-    box-shadow: 0 1px 0 inset rgba(255,255,255,0.1);
+    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
 }
 
 /* When clicked or focused with keyboard */
@@ -250,7 +250,7 @@ fieldset[disabled] .gh-btn {
     color(var(--lightgrey) l(+10%)),
     color(var(--lightgrey) l(+4%))
     );
-    box-shadow: inset 0 1px 0 #fff;
+    box-shadow: 0 1px 0 #fff inset;
 }
 
 /* When clicked or focused with keyboard */