From d82f5076c86f718c7005a7378ac6244615928ddc Mon Sep 17 00:00:00 2001
From: Levi McCallum <levi@levimccallum.com>
Date: Thu, 27 Apr 2017 13:42:40 -0700
Subject: [PATCH] Fix SCSS build (#78)

---
 docs/_sass/_code.sass      | 225 --------------------------
 docs/_sass/_code.scss      | 221 ++++++++++++++++++++++++++
 docs/stylesheets/main.scss | 313 +++++++++++++++++++------------------
 3 files changed, 378 insertions(+), 381 deletions(-)
 delete mode 100644 docs/_sass/_code.sass
 create mode 100644 docs/_sass/_code.scss

diff --git a/docs/_sass/_code.sass b/docs/_sass/_code.sass
deleted file mode 100644
index 2e773b79db..0000000000
--- a/docs/_sass/_code.sass
+++ /dev/null
@@ -1,225 +0,0 @@
-code {
-    letter-spacing: 0.02em;
-    padding: 2px 4px;
-    /*font-weight: 700;
-    color: #008ED4;
-    font-size: 14px;
-    vertical-align: baseline;
-    font-family: 'Droid Sans Mono',sans-serif;*/
-}
-
-p code, span code, li code {
-    background-color: rgba(135, 215, 255, 0.2);
-}
-
-.paddingBetweenCols th {
-    text-align: left;
-    padding: 15px 15px 15px 15px;
-}
-
-.paddingBetweenCols td {
-    padding: 15px 15px 15px 15px;
-/*    border: 1 px solid black;*/
-}
-
-.highlight pre, .redhighlight pre {
-    font-size: 13px;
-    line-height: 20px;
-    padding: 0 10px 20px 10px;
-}
-
-.highlighttable {
-    margin-left: 10px;
-    margin-bottom: 20px;
-    margin-right: 10px;
-    border-collapse: separate !important;
-}
-
-.highlighttable .highlight pre, .highlighttable .redhighlight pre {
-    padding: 0;
-}
-
-.highlighttable code {
-    padding-right: 10px;
-    margin: 0;
-    padding-left: 2px;
-    font-size: 12px;
-    display: block;
-    line-height: 20px;
-    white-space: pre;
-    color: hsl(210, 100%, 8%);
-}
-
-.highlight pre code, .redhighlight pre code, .highlighttable {
-    overflow-x: scroll;
-    display: block;
-    padding: 0;
-    font-size: 13px;
-    border: 1px solid rgb(220, 220, 220);
-    padding: 5px 10px;
-    box-sizing: border-box;
-    border-radius: 3;
-}
-
-.highlight pre code, .highlighttable {
-    background-color: rgba(90, 140, 140, 0.1);
-}
-
-.redhighlight pre code {
-    background-color: rgba(180, 80, 80, 0.1);
-}
-
-.showcasetable code {
-    padding: 10px 10px 30px 30px;
-    margin: 10;
-}
-
-
-.highlight pre code, .redhighlight pre code {
-    width: 100%;
-    white-space: pre;
-}
-
-.lineno {
-    color: rgb(214, 139, 0);
-}
-
-.lineno::after {
-    content: ';';
-    font-size: 0;
-}
-
-.highlight + .highlight + .highlight,
-.highlighttable + .highlight + .highlight,
-.redhighlight + .redhighlight + .redhighlight
-.highlighttable + .redhighlight + .redhighlight {
-    margin-top: -20px;
-}
-
-
-/**
- * Syntax highlighting styles
- */
-/* not official Xcode colors, but looks better on the web */
-.highlight {
-  background: #fff; }
-  .highlight .c {
-    color: #008d14;
-    font-style: italic; }
-  .highlight .err {
-    color: #a61717;
-    background-color: #e3d2d2; }
-  .highlight .k {
-    color: #103ffb; }
-  .highlight .cm {
-    color: #008d14;
-    font-style: italic; }
-  .highlight .cp {
-    color: #b72748; }
-  .highlight .c1 {
-    color: #008d14;
-    font-style: italic; }
-  .highlight .cs {
-    color: #008d14;
-    font-weight: bold;
-    font-style: italic; }
-  .highlight .gd {
-    color: #000;
-    background-color: #fdd; }
-  .highlight .gd .x {
-    color: #000;
-    background-color: #faa; }
-  .highlight .ge {
-    font-style: italic; }
-  .highlight .gr {
-    color: #a00; }
-  .highlight .gh {
-    color: #999; }
-  .highlight .gi {
-    color: #000;
-    background-color: #dfd; }
-  .highlight .gi .x {
-    color: #000;
-    background-color: #afa; }
-  .highlight .go {
-    color: #888; }
-  .highlight .gp {
-    color: #555; }
-  .highlight .gs {
-    font-weight: bold; }
-  .highlight .gu {
-    color: #aaa; }
-  .highlight .gt {
-    color: #a00; }
-  .highlight .kc {
-    color: orange; }
-  .highlight .kd {
-    color: orange; }
-  .highlight .kp {
-    color: #008d14; }
-  .highlight .kr {
-    color: #008d14; }
-  .highlight .kt {
-    color: #103ffb; }
-  .highlight .m {
-    color: orange; }
-  .highlight .s {
-    color: #b72748; }
-  .highlight .na {
-    color: orange; }
-  .highlight .nb {
-    color: #103ffb; }
-  .highlight .nc {
-    color: #3a95ba; }
-  .highlight .no {
-    color: orange; }
-  .highlight .ni {
-    color: orange; }
-  .highlight .ne {
-    color: orange; }
-  .highlight .nn {
-    color: orange; }
-  .highlight .nt {
-    color: orange; }
-  .highlight .w {
-    color: #bbb; }
-  .highlight .mh {
-    color: black; }
-  .highlight .mi {
-    color: black; }
-  .highlight .mo {
-    color: black; }
-  .highlight .il {
-    color: black; }
-  .highlight .sb {
-    color: #d14; }
-  .highlight .sc {
-    color: #d14; }
-  .highlight .sd {
-    color: #d14; }
-  .highlight .s2 {
-    color: #d14; }
-  .highlight .se {
-    color: #d14; }
-  .highlight .sh {
-    color: #d14; }
-  .highlight .si {
-    color: #d14; }
-  .highlight .sx {
-    color: #d14; }
-  .highlight .sr {
-    color: orange; }
-  .highlight .s1 {
-    color: #b72748; }
-  .highlight .ss {
-    color: #b72748; }
-  .highlight .bp {
-    color: #3a95ba; }
-  .highlight .vc {
-    color: #3a95ba; }
-  .highlight .vg {
-    color: black; }
-  .highlight .vi {
-    color: orange; }
-  .highlight .nl {
-    color: #3a95ba; }
\ No newline at end of file
diff --git a/docs/_sass/_code.scss b/docs/_sass/_code.scss
new file mode 100644
index 0000000000..dd4df0e23e
--- /dev/null
+++ b/docs/_sass/_code.scss
@@ -0,0 +1,221 @@
+code {
+    letter-spacing: 0.02em;
+    padding: 2px 4px;
+    /*font-weight: 700;
+    color: #008ED4;
+    font-size: 14px;
+    vertical-align: baseline;
+    font-family: 'Droid Sans Mono',sans-serif;*/
+}
+
+p code, span code, li code {
+    background-color: rgba(135, 215, 255, 0.2);
+}
+
+.paddingBetweenCols {
+    th {
+        text-align: left;
+        padding: 15px 15px 15px 15px;
+    }
+    td {
+        padding: 15px 15px 15px 15px;
+        /*        border: 1 px solid black;*/
+    }
+}
+
+.highlight pre, .redhighlight pre {
+    font-size: 13px;
+    line-height: 20px;
+    padding: 0 10px 20px 10px;
+}
+
+.highlighttable {
+    margin-left: 10px;
+    margin-bottom: 20px;
+    margin-right: 10px;
+    border-collapse: separate !important;
+    .highlight pre, .redhighlight pre {
+        padding: 0;
+    }
+    code {
+        padding-right: 10px;
+        margin: 0;
+        padding-left: 2px;
+        font-size: 12px;
+        display: block;
+        line-height: 20px;
+        white-space: pre;
+        color: hsl(210, 100%, 8%);
+    }
+}
+
+.highlight pre code, .redhighlight pre code, .highlighttable {
+    overflow-x: scroll;
+    display: block;
+    padding: 0;
+    font-size: 13px;
+    border: 1px solid rgb(220, 220, 220);
+    padding: 5px 10px;
+    box-sizing: border-box;
+    border-radius: 3;
+}
+
+.highlight pre code, .highlighttable {
+    background-color: rgba(90, 140, 140, 0.1);
+}
+
+.redhighlight pre code {
+    background-color: rgba(180, 80, 80, 0.1);
+}
+
+.showcasetable code {
+    padding: 10px 10px 30px 30px;
+    margin: 10;
+}
+
+.highlight pre code, .redhighlight pre code {
+    width: 100%;
+    white-space: pre;
+}
+
+.lineno {
+    color: rgb(214, 139, 0);
+    &::after {
+        content: ';';
+        font-size: 0;
+    }
+}
+
+.highlight + .highlight + .highlight, .highlighttable + .highlight + .highlight, .redhighlight + .redhighlight + .redhighlight .highlighttable + .redhighlight + .redhighlight {
+    margin-top: -20px;
+}
+
+/**
+ * Syntax highlighting styles
+ */
+/* not official Xcode colors, but looks better on the web */
+
+.highlight {
+    background: #fff;
+    .c {
+        color: #008d14;
+        font-style: italic;
+    }
+    .err {
+        color: #a61717;
+        background-color: #e3d2d2;
+    }
+    .k {
+        color: #103ffb;
+    }
+    .cm {
+        color: #008d14;
+        font-style: italic;
+    }
+    .cp {
+        color: #b72748;
+    }
+    .c1 {
+        color: #008d14;
+        font-style: italic;
+    }
+    .cs {
+        color: #008d14;
+        font-weight: bold;
+        font-style: italic;
+    }
+    .gd {
+        color: #000;
+        background-color: #fdd;
+        .x {
+            color: #000;
+            background-color: #faa;
+        }
+    }
+    .ge {
+        font-style: italic;
+    }
+    .gr {
+        color: #a00;
+    }
+    .gh {
+        color: #999;
+    }
+    .gi {
+        color: #000;
+        background-color: #dfd;
+        .x {
+            color: #000;
+            background-color: #afa;
+        }
+    }
+    .go {
+        color: #888;
+    }
+    .gp {
+        color: #555;
+    }
+    .gs {
+        font-weight: bold;
+    }
+    .gu {
+        color: #aaa;
+    }
+    .gt {
+        color: #a00;
+    }
+    .kc, .kd {
+        color: orange;
+    }
+    .kp, .kr {
+        color: #008d14;
+    }
+    .kt {
+        color: #103ffb;
+    }
+    .m {
+        color: orange;
+    }
+    .s {
+        color: #b72748;
+    }
+    .na {
+        color: orange;
+    }
+    .nb {
+        color: #103ffb;
+    }
+    .nc {
+        color: #3a95ba;
+    }
+    .no, .ni, .ne, .nn, .nt {
+        color: orange;
+    }
+    .w {
+        color: #bbb;
+    }
+    .mh, .mi, .mo, .il {
+        color: black;
+    }
+    .sb, .sc, .sd, .s2, .se, .sh, .si, .sx {
+        color: #d14;
+    }
+    .sr {
+        color: orange;
+    }
+    .s1, .ss {
+        color: #b72748;
+    }
+    .bp, .vc {
+        color: #3a95ba;
+    }
+    .vg {
+        color: black;
+    }
+    .vi {
+        color: orange;
+    }
+    .nl {
+        color: #3a95ba;
+    }
+}
\ No newline at end of file
diff --git a/docs/stylesheets/main.scss b/docs/stylesheets/main.scss
index 3af6c901c6..a511e3ca5a 100755
--- a/docs/stylesheets/main.scss
+++ b/docs/stylesheets/main.scss
@@ -64,132 +64,130 @@ p, ul, ol {
 }
 
 a {
-	color: #0484f2;
-	text-decoration: none;
+    color: #0484f2;
+    text-decoration: none;
 }
 
 .btn {
-	padding: 10px 20px;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
-	background: #0f70dd;
-	color: #fff;
-	display: inline-block;
-	text-decoration: none;
-	font-weight: bold;
-}
-
-.container {
-	width: 90%;
-	margin: 0 auto;
-	clear: both;
-}
-
-header {
-	padding: 30px 0 10px 0;
-	background: #f8f8f8;
-
-  h1 {
-    position: relative;
-    top: -5px;
-  }
-
-  nav {
-    margin-top: 10px;
-    font-size: 18px;
-
-    ul {
-      list-style: none;
-
-      li {
-        float: left;
-        margin-right: 20px;
-
-        a {
-          color: #0484f2;
-          text-decoration: none;
-        }
-      }
-    }
-  }
-}
-
-.hero {
-	background: #0f70dd;
-	margin-bottom: 30px;
-	padding: 30px 0;
-
-  .hero-title {
-    font-size: 45px;
-    line-height: 110%;
-    color: #fff;
-    margin-bottom: 20px;
-  }
-
-  .btn {
-    background: #fff;
-    color: #0f70dd;
-    border: 2px solid #fff;
-    margin-right: 10px;
-  }
-
-  .btn.btn-outlined {
-    background: none;
-    border: 2px solid #fff;
+    padding: 10px 20px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
+    background: #0f70dd;
     color: #fff;
-  }
+    display: inline-block;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.container {
+    width: 90%;
+    margin: 0 auto;
+    clear: both;
+}
+
+header {
+    padding: 30px 0 10px 0;
+    background: #f8f8f8;
+
+    h1 {
+        position: relative;
+        top: -5px;
+    }
+
+    nav {
+        margin-top: 10px;
+        font-size: 18px;
+
+        ul {
+            list-style: none;
+
+            li {
+                float: left;
+                margin-right: 20px;
+
+                a {
+                    color: #0484f2;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+}
+
+.hero {
+    background: #0f70dd;
+    margin-bottom: 30px;
+    padding: 30px 0;
+
+    .hero-title {
+        font-size: 45px;
+        line-height: 110%;
+        color: #fff;
+        margin-bottom: 20px;
+    }
+
+    .btn {
+        background: #fff;
+        color: #0f70dd;
+        border: 2px solid #fff;
+        margin-right: 10px;
+    }
+
+    .btn.btn-outlined {
+        background: none;
+        border: 2px solid #fff;
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        border-radius: 5px;
+        color: #fff;
+    }
 }
 
 .container-margin {
-	margin-top: 30px;
+    margin-top: 30px;
 }
 
 .container .sidebar {
     font-size: 14px;
-}
-.container .sidebar ul {
-	list-style: none;
-}
-.container .sidebar ul li {
-	list-style: none;
-}
-.container .sidebar a.active {
-	font-weight: bold;
-}
 
-.container .content {
-}
+    ul {
+        list-style: none;
 
+        li {
+            list-style: none;
+        }
+    }
+
+    a.active {
+        font-weight: bold;
+    }
+}
 
 .container tr > td {
-	padding-bottom: 30px;
+    padding-bottom: 30px;
 }
 
 .container tr td img {
-	display: inline-block;
-	margin-bottom: 5px;
+    display: inline-block;
+    margin-bottom: 5px;
 }
 
 .container tr td b {
-	padding-bottom: 5px;
-	display: inline-block;
+    padding-bottom: 5px;
+    display: inline-block;
 }
 
 .roundrect {
-	border: 1px solid #f4f4f4;
-	-webkit-border-radius: 20px;
-	-moz-border-radius: 20px;
-	border-radius: 20px;
+    border: 1px solid #f4f4f4;
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px;
 }
 
-
 .container .content ul, .container .content ol {
-	margin-left: 20px;
-	margin-bottom: 30px;
+    margin-left: 20px;
+    margin-bottom: 30px;
 }
 
 .content p img {
@@ -199,7 +197,7 @@ header {
 }
 
 .edit-page-link {
-	font-size: 14px;
+    font-size: 14px;
 }
 
 @import "code";
@@ -209,28 +207,31 @@ header {
     background: white;
     display: block;
     box-sizing: border-box;
-    font-size: 125%
+    font-size: 125%;
     -webkit-font-smoothing: antialiased;
     line-height: 1.5;
     padding-right: 10px;
-}
-.language-toggle a.active {
-    color: #222220 !important;
-}
-.language-toggle a {
-    cursor: pointer;
-    display: block;
-    float: right;
-    padding-left: 1em;
 
-    color: #a3a39e !important;
-    text-decoration: none;
-    transition: color 0.1s linear;
-}
-.language-toggle:after {
-    content: "";
-    display: table;
-    clear: both;
+    a {
+        cursor: pointer;
+        display: block;
+        float: right;
+        padding-left: 1em;
+
+        color: #a3a39e !important;
+        text-decoration: none;
+        transition: color 0.1s linear;
+
+        &.active {
+            color: #222220 !important;
+        }
+    }
+
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
 }
 
 .highlight-group {
@@ -260,15 +261,15 @@ pre {
     background-color: #EFF7FF;
     border: 1px solid #CCDDFF;
     margin-bottom: 20px;
-}
 
-.note p:before {
-    content: "NOTE:";
-    font-weight: bold;
-}
+    p:before {
+        content: "NOTE:";
+        font-weight: bold;
+    }
 
-.note p {
-    margin-bottom: 0px;
+    p {
+        margin-bottom: 0px;
+    }
 }
 
 .note-important {
@@ -277,23 +278,23 @@ pre {
     background-color: #FFCCCC;
     border: 1px solid #FF8899;
     margin-bottom: 20px;
-}
 
-.note-important p:before {
-    content: "IMPORTANT:";
-    font-weight: bold;
-}
+    p:before {
+        content: "IMPORTANT:";
+        font-weight: bold;
+    }
 
-.note-important p {
-    margin-bottom: 0px;
+    p {
+        margin-bottom: 0px;
+    }
 }
 
 .right {
-	float: right;
+    float: right;
 }
 
 footer {
-	padding: 20px 0;
+    padding: 20px 0;
 
   p {
     text-align: center;
@@ -302,31 +303,31 @@ footer {
 
 /** Banner */
 .texture-banner {
-  padding: 20px 0 20px 0;
-  width: 100%;
-  background-color: #0e1e28;
-  box-shadow: inset 0 -2px 20px 0 rgba(0,0,0,0.5);
-  text-align: center;
-
-  .announcement {
-    font-stretch: normal;
-    font-size: 16px;
-    line-height: 1.75;
-    letter-spacing: 0.1px;
+    padding: 20px 0 20px 0;
+    width: 100%;
+    background-color: #0e1e28;
+    box-shadow: inset 0 -2px 20px 0 rgba(0,0,0,0.5);
     text-align: center;
-    color: #d7e2e9;
-    font-weight: bold;
-    margin: 0;
-  }
 
-  .learn-more-link {
-    font-size: 12px;
-    font-weight: bold;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 1.17;
-    letter-spacing: 0.5px;
-    color: #0484f2;
-    margin-left: 10px;
-  }
+    .announcement {
+        font-stretch: normal;
+        font-size: 16px;
+        line-height: 1.75;
+        letter-spacing: 0.1px;
+        text-align: center;
+        color: #d7e2e9;
+        font-weight: bold;
+        margin: 0;
+    }
+
+    .learn-more-link {
+        font-size: 12px;
+        font-weight: bold;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.17;
+        letter-spacing: 0.5px;
+        color: #0484f2;
+        margin-left: 10px;
+    }
 }