CHG: Split Codes and improve docs codes

5 files changed, 54 insertions, 39 deletions

diff --git a/src/chips.less b/src/chips.less
index 69b1f7c..1e822bb 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -3,7 +3,7 @@
   align-items: center;
   background: @core-border-color;
   border-radius: @border-radius;
-  color: #666;
+  color: @core-grey-color;
   display: inline-flex;
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
diff --git a/src/codes.less b/src/codes.less
new file mode 100644
index 0000000..5d1cbf2
--- /dev/null
+++ b/src/codes.less
@@ -0,0 +1,44 @@
+// Codes
+code {
+  background: @core-bg-color;
+  color: @code-color;
+  .label-base();
+}
+
+.code {
+  border-radius: @border-radius;
+  color: @core-grey-color;
+  line-height: 2rem;
+  position: relative;
+
+  &::before {
+    content: attr(data-lang);
+    color: @control-color;
+    font-size: 1.2rem;
+    position: absolute;
+    right: 1rem;
+    top: .2rem;
+  }
+
+  code {
+    color: inherit;
+    display: block;
+    line-height: inherit;
+    overflow-x: auto;
+    padding: 2rem;
+    width: 100%;
+  }
+
+  .com {
+    color: @control-color;
+  }
+  .tag {
+    color: @core-color;
+  }
+  .atn {
+    color: @core-grey-color;
+  }
+  .atv {
+    color: @code-color;
+  }
+}
diff --git a/src/sliders.less b/src/sliders.less
index 520e9a1..f2fa26b 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -12,26 +12,26 @@
     -webkit-appearance: none;
     background: @core-color;
     border-radius: 50%;
-    height: 1.4rem;
-    margin-top: -.5rem;
+    height: 1.2rem;
+    margin-top: -.4rem;
     transition: transform .2s ease;
-    width: 1.4rem;
+    width: 1.2rem;
   }
   &::-moz-range-thumb {
     background: @core-color;
     border: 0;
     border-radius: 50%;
-    height: 1.4rem;
+    height: 1.2rem;
     transition: transform .2s ease;
-    width: 1.4rem;
+    width: 1.2rem;
   }
   &::-ms-thumb {
     background: @core-color;
     border: 0;
     border-radius: 50%;
-    height: 1.4rem;
+    height: 1.2rem;
     transition: transform .2s ease;
-    width: 1.4rem;
+    width: 1.2rem;
   }
 
   &:active {
diff --git a/src/typography.less b/src/typography.less
index 5f97389..f9c8fe7 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -96,34 +96,3 @@ abbr[title] {
   cursor: help;
   text-decoration: none;
 }
-
-// Code
-code {
-  background: @core-bg-color;
-  color: lighten(@body-font-color, 20%);
-  .label-base();
-}
-pre {
-  background: lighten(@core-border-color, 4%);
-  line-height: 2rem;
-  margin-bottom: 1em;
-  margin-top: 1em;
-  overflow: auto;
-  padding: 2rem 2.5rem;
-  position: relative;
-
-  & > code {
-    background: transparent;
-    line-height: 2rem;
-    padding: 0;
-
-    &::before {
-      content: attr(data-lang);
-      color: @control-color;
-      font-size: 1.2rem;
-      position: absolute;
-      right: 1rem;
-      top: .2rem;
-    }
-  }
-}
diff --git a/src/variables.less b/src/variables.less
index 3ac57b1..c086a53 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -23,6 +23,7 @@
 @core-color: #5764c6;
 @core-secondary-color: lighten(@core-color, 40%);
 @core-dark-color: #333;
+@core-grey-color: #666;
 @core-light-color: #fff;
 @core-meta-color: #888;
 @core-link-color: #5764c6;
@@ -32,6 +33,7 @@
 @control-color-success: #32b643;
 @control-color-warning: #ffb700;
 @control-color-danger: #e85600;
+@code-color: #e06870;
 
 // Responsive breakpoints
 @size-xs: 480px;