[#73271218] Style doctype icons

liquid/_data/doctype.yml

@@ -0,0 +1,38 @@
+ - class: doctype-def
+   name: file
+
+ - class: doctype-txt
+   name: text
+
+ - class: doctype-doc
+   name: word
+
+ - class: doctype-xls
+   name: exel
+
+ - class: doctype-rtf
+   name: rtf
+
+ - class: doctype-ppt
+   name: ppt
+
+ - class: doctype-pdf
+   name: pdf
+
+ - class: doctype-odt
+   name: odt
+
+ - class: doctype-yt
+   name: youtube
+
+ - class: doctype-ggl
+   name: google
+
+ - class: doctype-check
+   name: check
+
+ - class: doctype-gls
+   name: glossary
+
+ - class: doctype-grp
+   name: group

liquid/_includes/style/doctype-icons.html

@@ -1,4 +1,19 @@
 <div class="box">
   <h1 id="doctype-icons">Doctype Icons</h1>
   <hr/>
+
+  <ul class="list-inline doctype">
+    {% for doctype in site.data.doctype %}
+      <li>
+        <i class="{{ doctype.class }}"></i>
+        <div class="text">{{ doctype.name }}</div>
+      </li>
+    {% endfor %}
+   </ul>
+{% highlight html %}
+{% for doctype in site.data.doctype %}
+<!-- {{ doctype.name }} -->
+<i class="{{ doctype.class }}"></i>{% endfor %}
+{% endhighlight %}
+
 </div>

liquid/_includes/style/icons.html

@@ -4,16 +4,16 @@ <h1 id="icons">Icons</h1>
   <ul class="list-inline icons">
     {% for name in site.data.icons %}
       <li>
-        <span class="icon-{{ name }}"></span>
+        <i class="icon-{{ name }}"></i>
         <div class="text">{{ name }}</div>
       </li>
     {% endfor %}
    </ul>
 
 {% highlight html %}
-<span class="icon-user"></span>
-<span class="icon-email"></span>
-<span class="icon-settings"></span>
+<i class="icon-user"></i>
+<i class="icon-email"></i>
+<i class="icon-settings"></i>
 {% endhighlight %}
 
 </div>

scss/_doctype-icons.scss

@@ -0,0 +1,68 @@
+$doctype-path : "../images/doctype";
+
+@mixin get-image($path, $ext: "png", $w: auto, $h: auto) {
+  $at1x-path: "#{$path}.#{$ext}";
+  $at2x-path: "#{$path}_@2x.#{$ext}";
+
+  @include img-retina("#{$at1x-path}", "#{$at2x-path}", $w, $h);
+  width: $w;
+  height: $h;
+  background-repeat: no-repeat;
+}
+
+[class^="doctype-"],
+[class*=" doctype-"] {
+  display: inline-block;
+}
+
+.doctype-def {
+  @include get-image("#{$doctype-path}/file_def", "png", 20px, 25px);
+}
+
+.doctype-txt {
+  @include get-image("#{$doctype-path}/file_txt", "png", 20px, 25px);
+}
+
+.doctype-doc {
+  @include get-image("#{$doctype-path}/file_doc", "png", 20px, 25px);
+}
+
+.doctype-xls {
+  @include get-image("#{$doctype-path}/file_xls", "png", 20px, 25px);
+}
+
+.doctype-rtf {
+  @include get-image("#{$doctype-path}/file_rtf", "png", 20px, 25px);
+}
+
+.doctype-ppt {
+  @include get-image("#{$doctype-path}/file_ppt", "png", 20px, 25px);
+}
+
+.doctype-pdf {
+  @include get-image("#{$doctype-path}/file_pdf", "png", 20px, 25px);
+}
+
+.doctype-odt {
+  @include get-image("#{$doctype-path}/file_odt", "png", 20px, 25px);
+}
+
+.doctype-yt {
+  @include get-image("#{$doctype-path}/file_yt", "png", 20px, 25px);
+}
+
+.doctype-ggl {
+  @include get-image("#{$doctype-path}/file_ggl", "png", 20px, 25px);
+}
+
+.doctype-check {
+  @include get-image("#{$doctype-path}/file_check", "png", 20px, 25px);
+}
+
+.doctype-gls {
+  @include get-image("#{$doctype-path}/file_gls", "png", 20px, 25px);
+}
+
+.doctype-grp {
+  @include get-image("#{$doctype-path}/file_grp", "png", 28px, 33px);
+}

scss/_variables.scss

@@ -1,3 +1,5 @@
+$bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default;
+
 //
 // Variables
 // --------------------------------------------------

scss/docs.scss

@@ -125,6 +125,7 @@
 
 // Icons
 .icons,
+.doctype,
 .favicons {
   margin-left: -32px;
 
@@ -153,6 +154,10 @@
   .text { margin-top: 12px; }
 }
 
+.doctype {
+  li { padding: 24px 0 16px; }
+}
+
 // Favicons
 .favicons {
   li {

scss/gengo.scss

@@ -8,6 +8,7 @@
 @import "buttons";
 @import "button-groups";
 @import "icons";
+@import "doctype-icons";
 @import "navs";
 @import "forms";
 @import "dropdowns";