refactor permalink code to use variables

src/_permalink-code.scss

@@ -0,0 +1,109 @@
+// permalink code block styles
+
+.border {
+  border: $border !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.border-bottom {
+  border-bottom: $border !important;
+}
+
+.rounded-1 {
+  border-radius: $border-radius !important;
+}
+
+.lh-condensed {
+  line-height: $lh-condensed !important;
+}
+
+.f6 {
+  font-size: 12px !important;
+}
+
+.my-2 {
+  margin-top: $spacer-2 !important;
+  margin-bottom: $spacer-2 !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.px-3 {
+  padding-right: $spacer-3 !important;
+  padding-left: $spacer-3 !important;
+}
+
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.py-2 {
+  padding-top: $spacer-2 !important;
+  padding-bottom: $spacer-2 !important;
+}
+
+.blob-wrapper-embedded {
+  max-height: 240px;
+}
+
+.blob-wrapper {
+  border-bottom-right-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  > table {
+    overflow: visible;
+  }
+}
+
+.blob-num {
+  width: 1%;
+  min-width: 50px;
+  padding-right: 10px;
+  padding-left: 10px;
+  font-family: $mono-font;
+  font-size: $font-size-small;
+  line-height: $lh-default;
+  color: $black-fade-30;
+  text-align: right;
+  white-space: nowrap;
+  vertical-align: top;
+  cursor: pointer;
+  user-select: none;
+
+  &::before {
+    content: attr(data-line-number);
+  }
+}
+
+.blob-code-inner {
+  overflow: visible;
+  font-family: $mono-font;
+  font-size: $font-size-small;
+  color: $text-gray-dark;
+  word-wrap: normal;
+  white-space: pre;
+}
+
+.blob-code {
+  position: relative;
+  padding-right: 10px;
+  padding-left: 10px;
+  line-height: $lh-default;
+  vertical-align: top;
+}
+
+.bg-white {
+  background-color: $bg-white !important;
+}
+
+.bg-gray-light {
+  background-color: $bg-gray-light !important;
+}

src/_timeline-comment.scss

@@ -67,7 +67,7 @@
     }
 
     textarea:disabled {
-      background-color: $gray-100;
+      background-color: $bg-gray;
     }
   }
 

src/index.scss

@@ -44,5 +44,3 @@ input:not([type=radio]) {
   margin-top: -$spacer-2;
   margin-bottom: $spacer-3;
 }
-
-.btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }

src/utterances.scss

@@ -7,6 +7,7 @@
 @import "./util";
 @import "./timeline";
 @import "./timeline-comment";
+@import "./permalink-code";
 
 html,
 body {
@@ -21,120 +22,3 @@ body {
 .flash-not-installed {
   margin-bottom: $spacer-3;
 }
-
-/**
- * BEGIN Permalink code block styles
- */
-.border {
-  border: 1px #e1e4e8 solid !important;
-}
-
-.border-0 {
-  border: 0 !important;
-}
-
-.border-bottom {
-  border-bottom: 1px #e1e4e8 solid !important;
-}
-
-.rounded-1 {
-  border-radius: 3px !important;
-}
-
-.lh-condensed {
-  line-height: 1.25 !important;
-}
-
-.f6 {
-  font-size: 12px !important;
-}
-
-.my-2 {
-  margin-top: 8px !important;
-  margin-bottom: 8px !important;
-}
-
-.mb-0 {
-  margin-bottom: 0 !important;
-}
-
-.px-3 {
-  padding-right: 16px !important;
-  padding-left: 16px !important;
-}
-
-.py-0 {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-.py-2 {
-  padding-top: 8px !important;
-  padding-bottom: 8px !important;
-}
-
-.blob-wrapper-embedded {
-  max-height: 240px;
-}
-
-.blob-wrapper {
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-
-  > table {
-    overflow: visible;
-  }
-}
-
-.blob-num {
-  width: 1%;
-  min-width: 50px;
-  padding-right: 10px;
-  padding-left: 10px;
-  font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  font-size: 12px;
-  line-height: 20px;
-  color: rgba(27,31,35,0.3);
-  text-align: right;
-  white-space: nowrap;
-  vertical-align: top;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  &::before {
-    content: attr(data-line-number);
-  }
-}
-
-.blob-code-inner {
-  overflow: visible;
-  font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  font-size: 12px;
-  color: #24292e;
-  word-wrap: normal;
-  white-space: pre;
-}
-
-.blob-code {
-  position: relative;
-  padding-right: 10px;
-  padding-left: 10px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.bg-white {
-  background-color: #fff !important;
-}
-
-.bg-gray-light {
-  background-color: #fafbfc !important;
-}
-/**
- * END Permalink code block styles
- */