From c837b3dfb99499c92cad9f2b570b0db289c42c9d Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Wed, 22 Mar 2017 10:26:44 +1100
Subject: [PATCH] feat(aio): terminal code styling and code mixin

---
 aio/src/styles/1-layouts/_content-layout.scss |  8 ++++++++
 aio/src/styles/2-modules/_code.scss           | 13 +++++++------
 aio/src/styles/_constants.scss                |  1 +
 aio/src/styles/mixins.scss                    |  8 ++++++++
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss
index 63b6bb2b7d..cd0891e6dd 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -21,4 +21,12 @@
 
 .sidenav-content button {
   min-width: 50px;
+}
+
+.l-sub-section {
+  color: $blue;
+  margin: 0px 0px 10px 0px;
+  padding: 10px;
+  background: $offwhite;
+  border-left: 4px solid $blue;
 }
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 6e8261193b..895f976b9a 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -1,13 +1,14 @@
 .code-example {
-    background-color: $backgroundgray;
-    border-radius: 5px;
+    @include codeblock($backgroundgray);
     color: $darkgray;
-    padding: 20px;
-    margin: 24px auto;
-    border: 0.5px solid $lightgray;
 }
 
-.code-example pre {
+.code-shell code {
+    @include codeblock($darkgray);
+    color: $codegreen;
+}
+
+.code-example pre, code-example pre {
     margin: 0px;
     padding: 0px;
     white-space: pre-wrap;
diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss
index 417647d5bf..bb3a65b5fc 100755
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@@ -14,6 +14,7 @@ $lightgray: #DBDBDB;
 $mediumgray: #7E7E7E;
 $darkgray: #333;
 $black: #0A1014;
+$codegreen: #17ff0b;
 
 // GRADIENTS
 $bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
diff --git a/aio/src/styles/mixins.scss b/aio/src/styles/mixins.scss
index 5f3f90d066..91f213f135 100644
--- a/aio/src/styles/mixins.scss
+++ b/aio/src/styles/mixins.scss
@@ -6,4 +6,12 @@
   transform: rotate($degrees);
   transition: transform 150ms;
   transition-timing-function: ease-in-out;
+}
+
+@mixin codeblock($bgcolor) {
+    background-color: $bgcolor;
+    border-radius: 5px;
+    padding: 20px;
+    margin: 24px auto;
+    border: 0.5px solid $lightgray;
 }
\ No newline at end of file