Add icons for HTML and JS code snippets.

rishabh-ink · Jun 17, 2015 · a31344f · a31344f
1 parent 943b8ba
commit a31344f
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 7 deletions.
diff --git a/app/images/css.png b/app/images/css.png
diff --git a/app/images/html.png b/app/images/html.png
diff --git a/app/images/js.png b/app/images/js.png
diff --git a/app/index.html b/app/index.html
@@ -99,7 +99,7 @@ <h3>Code</h3>
 
         <p>Cum sociis natoque penatibus et magnis dis <code>code element</code> montes, nascetur ridiculus mus.</p>
 
-        <div class="voxel-code-snippet  syntax">
+        <div class="voxel-code-snippet  voxel-code-snippet--js  syntax">
             <pre>
   <span class="c1">// Sample JavaScript. Courtesy https://highlightjs.org</span>
   <span class="kr">import</span> <span class="p">{</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">}</span> <span class="nx">as</span> <span class="nx">p</span> <span class="nx">from</span> <span class="s1">'point'</span><span class="p">;</span>
@@ -142,6 +142,24 @@ <h3>Code</h3>
   </pre>
         </div>
 
+        <div class="voxel-code-snippet  voxel-code-snippet--html  syntax">
+          <pre><span class="cp">&lt;!doctype html&gt;</span>
+<span class="nt">&lt;html</span> <span class="na">class=</span><span class="s">"no-js"</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;head&gt;</span>
+  <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;title&gt;</span>Voxel<span class="nt">&lt;/title&gt;</span>
+
+  <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"A minimal theme."</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, minimal-ui"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;/head&gt;</span>
+<span class="nt">&lt;body&gt;</span>
+<span class="c">&lt;!-- Content --&gt;</span>
+<span class="nt">&lt;/body&gt;</span>
+<span class="nt">&lt;/html&gt;</span>
+          </pre>
+        </div>
+
         <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
 
         <p>Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.</p>

diff --git a/app/styles/components/code-snippet/_component.scss b/app/styles/components/code-snippet/_component.scss
@@ -7,6 +7,14 @@
     @include voxel-code-snippet();
   }
 
+  .voxel-code-snippet--html {
+    @include voxel-code-snippet--html();
+  }
+
+  .voxel-code-snippet--js {
+    @include voxel-code-snippet--js();
+  }
+
   .voxel-code-snippet pre {
     @include voxel-code-snippet__pre();
   }

diff --git a/app/styles/components/code-snippet/_mixins.scss b/app/styles/components/code-snippet/_mixins.scss
@@ -1,12 +1,35 @@
 @mixin voxel-code-snippet() {
-  padding-top: $voxel-code-snippet__padding--top;
-  padding-right: $voxel-code-snippet__padding--right;
-  padding-bottom: $voxel-code-snippet__padding--bottom;
-  padding-left: $voxel-code-snippet__padding--left;
-  margin-top: $voxel-code-snippet__margin--top;
-  margin-right: $voxel-code-snippet__margin--right;
   margin-bottom: $voxel-code-snippet__margin--bottom;
   margin-left: $voxel-code-snippet__margin--left;
+  margin-right: $voxel-code-snippet__margin--right;
+  margin-top: $voxel-code-snippet__margin--top;
+  padding-bottom: $voxel-code-snippet__padding--bottom;
+  padding-left: $voxel-code-snippet__padding--left;
+  padding-right: $voxel-code-snippet__padding--right;
+  padding-top: $voxel-code-snippet__padding--top;
+  position: relative;
+
+  &:before {
+    content: "";
+    display: block;
+    height: $voxel-code-snippet__icon__height;
+    position: absolute;
+    right: $voxel-code-snippet__icon__right;
+    top: $voxel-code-snippet__icon__top;
+    width: $voxel-code-snippet__icon__width;
+  }
+}
+
+@mixin voxel-code-snippet--html() {
+  &:before {
+    background-image: $voxel-code-snippet__icon__background-image--html;
+  }
+}
+
+@mixin voxel-code-snippet--js() {
+  &:before {
+    background-image: $voxel-code-snippet__icon__background-image--js;
+  }
 }
 
 @mixin voxel-code-snippet__pre() {

diff --git a/app/styles/components/code-snippet/_settings.scss b/app/styles/components/code-snippet/_settings.scss
@@ -9,3 +9,11 @@ $voxel-code-snippet__margin--top: map-get($voxel-scaffolding__spacing--vertical,
 $voxel-code-snippet__margin--right: 0 !default;
 $voxel-code-snippet__margin--bottom: map-get($voxel-scaffolding__spacing--vertical, "600") !default;
 $voxel-code-snippet__margin--left: 0 !default;
+
+$voxel-code-snippet__icon__width: 64px !default;
+$voxel-code-snippet__icon__height: 64px !default;
+$voxel-code-snippet__icon__top: 5px !default;
+$voxel-code-snippet__icon__right: 5px !default;
+
+$voxel-code-snippet__icon__background-image--html: url("../images/html.png") !default;
+$voxel-code-snippet__icon__background-image--js: url("../images/js.png") !default;