Labs UI update

TryGhost · Feb 17, 2017 · b80cb64 · b80cb64
1 parent 15b73a8
commit b80cb64
Show file tree

Hide file tree

Showing 12 changed files with 233 additions and 84 deletions.
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -13,6 +13,7 @@
 @import "patterns/labels.css";
 @import "patterns/tables.css";
 @import "patterns/navlist.css";
+@import "patterns/boxes.css";
 
 
 /* Components: Groups of Patterns

diff --git a/app/styles/components/modals.css b/app/styles/components/modals.css
@@ -74,7 +74,7 @@
     background-color: #fff;
     background-clip: padding-box;
     border-radius: 6px;
-    box-shadow: 0 0 1px rgba(0,0,0,.1), 0 2px 5px rgba(0,0,0,.05);
+    box-shadow: 1px 3px 8px rgba(0,0,0,.09), 8px 14px 38px rgba(0,0,0,.15);
 }
 
 .modal-content * {
@@ -127,7 +127,7 @@
 }
 
 .modal-footer button {
-    margin-left: 8px;
+    margin-left: 12px;
     min-width: 100px;
     text-align: center;
 }

diff --git a/app/styles/layouts/editor.css b/app/styles/layouts/editor.css
@@ -19,6 +19,19 @@
     color: var(--darkgrey);
     font-size: 3.2rem;
     font-weight: bold;
+    letter-spacing: 0.8px;
+}
+
+.gh-editor-title input::-webkit-input-placeholder {
+    color: color(var(--midgrey) l(+25%));
+    font-weight: 400;
+    letter-spacing: 1.2px;
+}
+
+.gh-editor-title input:-ms-input-placeholder {
+    color: color(var(--midgrey) l(+25%));
+    font-weight: 400;
+    letter-spacing: 1.2px;
 }
 
 .gh-editor-title input:focus {

diff --git a/app/styles/layouts/settings.css b/app/styles/layouts/settings.css
@@ -1,6 +1,56 @@
 /* Settings
 /* ---------------------------------------------------------- */
 
+.gh-setting-header {
+    margin: 3vw 0 5px 0;
+    color: var(--midgrey);
+}
+
+.gh-setting {
+    display: flex;
+    justify-content: space-between;
+    padding: 25px 0;
+    border-top: var(--lightgrey) 1px solid;
+}
+
+.gh-setting-content {
+    margin-right: 0 20px 0 0;
+}
+
+.gh-setting-title {
+    margin-bottom: 2px;
+    font-size: 1.8rem;
+    line-height: 1.15em;
+    font-weight: 600;
+    color: var(--darkgrey);
+}
+
+.gh-setting-desc {
+    line-height: 1.3em;
+    color: var(--midgrey);
+    font-weight: 200;
+    letter-spacing: 0.3px;
+}
+
+.gh-setting-action {
+    flex-shrink: 0;
+    margin: 1px 0 0 0;
+}
+
+.gh-setting-action .input-toggle-component {
+    float: none;
+    margin-right: 0;
+    width: 30px;
+    height: 30px;
+}
+
+.gh-setting-action .input-toggle-component:before {
+    top: 7px;
+    left: 6px;
+    width: 15px;
+    height: 9px;
+}
+
 
 /* Navigation
 /* ---------------------------------------------------------- */

diff --git a/app/styles/patterns/_shame.css b/app/styles/patterns/_shame.css
@@ -1,7 +1,3 @@
 /* Shame
 /* ---------------------------------------------------------- */
 /* TODO: Kill with fire */
-
-
-/* Animations
-/* ---------------------------------------------------------- */
diff --git a/app/styles/patterns/boxes.css b/app/styles/patterns/boxes.css
@@ -0,0 +1,27 @@
+/* Alerts
+/* ---------------------------------------------------------- */
+
+.gh-box {
+    padding: 12px 10px 14px 40px;
+    border: 1px solid var(--lightgrey);
+    border-left-width: 5px;
+    color: var(--midgrey);
+    line-height: 1.4em;
+    letter-spacing: 0.2px;
+    background: #fff;
+    border-radius: 5px;
+}
+
+.gh-box i:first-of-type {
+    position: absolute;
+    top: 13px;
+    left: 15px;
+    font-size: 2.1rem;
+}
+
+.gh-box-info {
+    border-left-color: var(--blue);
+}
+.gh-box-info i {
+    color: var(--blue);
+}
diff --git a/app/styles/patterns/buttons.css b/app/styles/patterns/buttons.css
@@ -6,14 +6,14 @@
 .gh-btn {
     display: inline-block;
     outline: none;
-    border: 1px solid color(var(--lightgrey) l(-4%));
+    border: 1px solid color(var(--lightgrey) l(-5%) s(-10%));
     color: color(var(--lightgrey) l(-27%) blackness(+15%));
     text-shadow: 0 1px 0 #fff;
     text-decoration: none !important;
     user-select: none;
     fill: color(var(--lightgrey) l(-27%) blackness(+15%));
-    border-radius: 6px;
-    transition: none;
+    border-radius: 5px;
+    transition: all 0.2s ease;
 
     -webkit-font-smoothing: subpixel-antialiased;
 }
@@ -28,7 +28,11 @@
     font-weight: 400;
     text-align: center;
     letter-spacing: 0.2px;
-    border-radius: 5px;
+    border-radius: 4px;
+}
+
+.gh-btn:hover {
+    border-color: color(var(--lightgrey) l(-15%) s(-10%));
 }
 
 /* When disabled */
@@ -42,6 +46,25 @@ fieldset[disabled] .gh-btn {
 }
 
 
+/* Button highlights
+/* ---------------------------------------------------------- */
+
+.gh-btn-hover-blue:hover {
+    border-color: var(--blue);
+    color: var(--blue);
+}
+
+.gh-btn-hover-green:hover {
+    border-color: var(--green);
+    color: var(--green);
+}
+
+.gh-btn-hover-red:hover {
+    border-color: var(--red);
+    color: var(--red);
+}
+
+
 /* Blue button
 /* ---------------------------------------------------------- */
 
@@ -93,32 +116,32 @@ fieldset[disabled] .gh-btn {
     text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
     fill: #fff;
     background: linear-gradient(
-    color(var(--green) blackness(+7%)),
-    color(var(--green) l(-10%) saturation(-10%))
+    color(var(--green) blackness(+5%)),
+    color(var(--green) l(-9%) saturation(-9%))
     );
-    box-shadow: 0 1px 0 rgba(0,0,0,0.12);
+    box-shadow: 0 1px 1px rgba(0,0,0,0.14);
     transition: none !important;
 }
 
 /* The background of the span is the main visual element */
 .gh-btn-green span {
     background: linear-gradient(
-    color(var(--green) whiteness(+5%)),
-    color(var(--green) l(-4%) saturation(-8%)) 60%,
-    color(var(--green) l(-4%) saturation(-8%)) 90%,
-    color(var(--green) l(-4%) saturation(-10%))
+    color(var(--green) whiteness(+4%)),
+    color(var(--green) l(-3%) saturation(-7%)) 60%,
+    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);
 }
 
 /* When clicked or focused with keyboard */
 .gh-btn-green:active,
 .gh-btn-green:focus {
-    background: color(var(--green) l(-10%) saturation(-10%));
+    background: color(var(--green) l(-9%) saturation(-9%));
 }
 .gh-btn-green:active span,
 .gh-btn-green:focus span {
-    background: color(var(--green) l(-4%) saturation(-8%));
+    background: color(var(--green) l(-3%) saturation(-7%));
     box-shadow: none;
 }
 

diff --git a/app/styles/patterns/forms.css b/app/styles/patterns/forms.css
@@ -25,8 +25,8 @@ legend {
     display: block;
     margin: 2em 0;
     width: 100%;
-    border-bottom: #dfe1e3 1px solid;
-    color: #b1b1b1;
+    border-bottom: color(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
+    color: var(--midgrey);
     font-size: 1.2em;
     line-height: 2.0em;
     user-select: text;
@@ -36,6 +36,16 @@ input {
     user-select: text;
 }
 
+::-webkit-input-placeholder {
+    color: color(var(--midgrey) l(+18%));
+    font-weight: 200;
+}
+
+:-ms-input-placeholder {
+    color: color(var(--midgrey) l(+18%));
+    font-weight: 200;
+}
+
 .error .response {
     color: var(--red);
 }
@@ -54,7 +64,7 @@ input {
 
 .form-group p {
     margin: 4px 0 0 0;
-    color: #b1b1b1;
+    color: var(--midgrey);
     font-size: 1.3rem;
 }
 
@@ -116,9 +126,9 @@ select {
     display: block;
     padding: 8px 10px;
     width: 100%;
-    border: 1px solid #dfe1e3;
+    border: color(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
     border-radius: var(--border-radius);
-    color: #666;
+    color: color(var(--midgrey) l(-18%));
     font-size: 1.4rem;
     font-weight: normal;
     user-select: text;
@@ -144,7 +154,7 @@ select.error {
 .gh-select:focus,
 select:focus {
     outline: 0;
-    border-color: #b1b1b1;
+    border-color: color(var(--lightgrey) l(-15%) s(-10%));
 }
 
 textarea {
@@ -194,17 +204,17 @@ textarea {
     margin-right: 7px;
     width: 18px;
     height: 18px;
-    border: 1px solid #dfe1e3;
-    background: #f7f7f7;
+    border: 1px solid color(var(--lightgrey) l(-5%) s(-10%));
+    background: color(var(--lightgrey) l(+5%));
 }
 
 .for-checkbox label:hover input:not(:checked) + .input-toggle-component,
 .for-radio label:hover input:not(:checked) + .input-toggle-component {
-    border-color: var(--lightgrey);
+    border-color: color(var(--lightgrey) l(-15%) s(-10%));
 }
 
 .for-checkbox .input-toggle-component {
-    border-radius: var(--border-radius);
+    border-radius: 4px;
 }
 
 .for-checkbox .input-toggle-component {
@@ -321,6 +331,18 @@ textarea {
 }
 
 
+/* File Uploads
+/* ---------------------------------------------------------- */
+
+.gh-input-file {
+    font-size: 1.2rem;
+    width: auto;
+}
+
+.gh-input-file + .gh-btn {
+    margin-left: 10px;
+}
+
 /* FFF: Fucking Firefox Fixes
 /* ---------------------------------------------------------- */
 
@@ -332,6 +354,6 @@ textarea {
         padding: 7px 10px 7px 8px;
     }
     .gh-select:focus {
-        border-color: #b1b1b1;
+        border-color: color(var(--lightgrey) l(-15%) s(-10%));
     }
 }
diff --git a/app/styles/patterns/global.css b/app/styles/patterns/global.css
@@ -390,6 +390,10 @@ img {
     vertical-align: middle;
 }
 
+.flex {
+    display: flex;
+}
+
 
 /* Animations
 /* ---------------------------------------------------------- */

diff --git a/app/templates/components/gh-feature-flag.hbs b/app/templates/components/gh-feature-flag.hbs
@@ -1,3 +1,3 @@
 {{one-way-checkbox value id=for name=name update=(action (mut value))}}
 <span class="input-toggle-component"></span>
-<p>{{{yield}}}</p>
+{{{yield}}}
diff --git a/app/templates/components/gh-file-upload.hbs b/app/templates/components/gh-file-upload.hbs
@@ -1,4 +1,4 @@
-<input data-url="upload" class="gh-input gh-btn-block" type="file" name="importfile" accept="{{acceptEncoding}}">
-<button type="submit" class="gh-btn gh-btn-green gh-btn-block" id="startupload" disabled={{uploadButtonDisabled}} {{action "upload"}}>
+<input class="gh-input gh-input-file q" data-url="upload" type="file" name="importfile" accept="{{acceptEncoding}}">
+<button id="startupload" class="gh-btn gh-btn-hover-blue" type="submit" disabled={{uploadButtonDisabled}} {{action "upload"}}>
     <span>{{uploadButtonText}}</span>
 </button>