From 330b8c2752a2c5d08553a30c9f48cbef9f84415a Mon Sep 17 00:00:00 2001
From: Dustin Broderick <dbprodigious@gmail.com>
Date: Sat, 19 Nov 2016 21:24:36 -0700
Subject: [PATCH 1/3] Improves stylesheet for .under results

---
 styles/ink.less | 41 ++++++++++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/styles/ink.less b/styles/ink.less
index 586600c6..047199ca 100644
--- a/styles/ink.less
+++ b/styles/ink.less
@@ -69,20 +69,43 @@ atom-text-editor::shadow {
 // TODO: more CSS sharing
 
 .ink.under {
-  font-family: @font-family;
-  color: @text-color;
-
-  cursor: default;
+  padding: @component-padding * 0.5;
+  background-color: darken(@syntax-background-color, 5%);
+  font-size: 0.9em;
+  border: none;
+  border-radius: @component-border-radius;
+  border-left: 0.15em solid @background-color-info;
+  color: @syntax-text-color;
 
   &.error {
-    color: @text-color-error;
+    border-left-color: @background-color-error;
+    color: lighten(@background-color-error, 10%);
+  }
+
+  &.ink-hide {
+    height: 0;
+  }
+
+  &.invalid {
+    opacity: 0.5;
+    &:hover {
+      opacity: 1;
+    }
   }
 
-  background-color: @inset-panel-background-color;
+  &.loading {
+    opacity: 0.5;
+    .icon:before {
+      height: initial;
+      width: initial;
+      animation: spin 4s linear infinite;
+      @keyframes spin { 100% { transform: rotate(1turn); } }
+    }
+  }
 
-  border-top: 1px solid @syntax-wrap-guide-color;
-  border-bottom: 1px solid @syntax-wrap-guide-color;
-  padding-left: 5px;
+  .fade {
+    color: lighten(@syntax-text-color, 20%);
+  }
 }
 
 

From 13e34d7e0f696edd21ee1d03abdc48912f69417d Mon Sep 17 00:00:00 2001
From: Dustin Broderick <dbprodigious@gmail.com>
Date: Sat, 19 Nov 2016 21:34:19 -0700
Subject: [PATCH 2/3] Fixes issue with a.block.result in stylesheet

---
 styles/ink.less | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/styles/ink.less b/styles/ink.less
index 047199ca..3e9c194a 100644
--- a/styles/ink.less
+++ b/styles/ink.less
@@ -75,7 +75,6 @@ atom-text-editor::shadow {
   border: none;
   border-radius: @component-border-radius;
   border-left: 0.15em solid @background-color-info;
-  color: @syntax-text-color;
 
   &.error {
     border-left-color: @background-color-error;
@@ -106,6 +105,11 @@ atom-text-editor::shadow {
   .fade {
     color: lighten(@syntax-text-color, 20%);
   }
+
+  a {
+    color: @syntax-text-color;
+    opacity: 0.60;
+  }
 }
 
 

From 86f8ba3a5fcce969cc374452f66c5f80c2a7655f Mon Sep 17 00:00:00 2001
From: Dustin Broderick <dbprodigious@gmail.com>
Date: Sun, 20 Nov 2016 09:09:02 -0700
Subject: [PATCH 3/3] Consolidated code as discussed in #93; Block trees
 display at full height

---
 styles/ink.less | 90 ++++++++++++++++++-------------------------------
 1 file changed, 32 insertions(+), 58 deletions(-)

diff --git a/styles/ink.less b/styles/ink.less
index 3e9c194a..57a5ae31 100644
--- a/styles/ink.less
+++ b/styles/ink.less
@@ -66,58 +66,8 @@ atom-text-editor::shadow {
   }
 }
 
-// TODO: more CSS sharing
-
-.ink.under {
-  padding: @component-padding * 0.5;
-  background-color: darken(@syntax-background-color, 5%);
-  font-size: 0.9em;
-  border: none;
-  border-radius: @component-border-radius;
-  border-left: 0.15em solid @background-color-info;
-
-  &.error {
-    border-left-color: @background-color-error;
-    color: lighten(@background-color-error, 10%);
-  }
-
-  &.ink-hide {
-    height: 0;
-  }
-
-  &.invalid {
-    opacity: 0.5;
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  &.loading {
-    opacity: 0.5;
-    .icon:before {
-      height: initial;
-      width: initial;
-      animation: spin 4s linear infinite;
-      @keyframes spin { 100% { transform: rotate(1turn); } }
-    }
-  }
-
-  .fade {
-    color: lighten(@syntax-text-color, 20%);
-  }
-
-  a {
-    color: @syntax-text-color;
-    opacity: 0.60;
-  }
-}
-
-
-.ink.inline {
+.result-mixin() {
   color: @syntax-text-color;
-  position: relative;
-  left: 1em;
-
   pointer-events: auto;
 
   &.error {
@@ -125,11 +75,10 @@ atom-text-editor::shadow {
     border-left: 2px solid @background-color-error;
   }
 
-  background: @syntax-background-color;
   border-left: 2px solid @background-color-info;
   border-right: 2px solid contrast(@syntax-background-color,
-                             darken(@syntax-background-color, 4%),
-                             lighten(@syntax-background-color, 4%));
+                                   darken(@syntax-background-color, 4%),
+                                   lighten(@syntax-background-color, 4%));
 
   border-radius: 3px;
 
@@ -138,7 +87,6 @@ atom-text-editor::shadow {
   opacity: 1;
   cursor: default;
 
-  max-width: 400px;
   overflow: hidden;
   white-space: pre;
 
@@ -146,6 +94,11 @@ atom-text-editor::shadow {
     vertical-align: top;
   }
 
+  a {
+    color: @syntax-text-color;
+    opacity: 0.65;
+  }
+
   p {
     margin: 0;
     padding: 0;
@@ -184,9 +137,7 @@ atom-text-editor::shadow {
       opacity: 1;
     }
   }
-  > .tree > .body {
-    max-height: 250px;
-  }
+
 
   .editor.editor-colors {
     color: @syntax-text-color;
@@ -197,6 +148,29 @@ atom-text-editor::shadow {
   }
 }
 
+.ink.inline {
+  .result-mixin;
+  background: @syntax-background-color;
+  position: relative;
+  left: 1em;
+  max-width: 400px;
+
+  > .tree > .body {
+    max-height: 250px;
+  }
+}
+
+.ink.under {
+  .result-mixin;
+  background: contrast(@syntax-background-color,
+                       darken(@syntax-background-color, 3%),
+                       lighten(@syntax-background-color, 3%));
+  font-size: 0.9em;
+  max-width: 100%;
+  white-space: pre-line;
+  padding: 0.5em 0.5em 0.5em 1em;
+}
+
 .ink.stepper {
   .ink.inline();
   max-width: initial;