add basic file icons

4 files changed, 106 insertions, 1 deletions

diff --git a/demo/index.html b/demo/index.html
index 59ced86..cd5dc46 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -21,7 +21,7 @@
             <header class="text-center"><h3>Project Spectre</h3></header>
             <header class="text-center"><h4>introduction</h4></header>
             <section>
-                <p class="lead"><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p>
+                <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p>
                 <ul>
                     <li>lightweight and clean starting point for your project</li>
                     <li>flexbox and responsive layout friendly</li>
@@ -469,6 +469,26 @@
             </div>
         </section>
 
+        <section id="fileicons">
+            <header class="text-center"><h4>file icons</h4></header>
+            <section>
+                <p><strong>fileicons.less</strong> includes a set of file icons. This part is written entirely in CSS as well. </p>
+            </section>
+            <div class="columns">
+                <div class="column">
+                    <div class="file-icon file-icon-lg" data-type="docx"></div>
+                    <div class="file-icon file-icon-lg" data-type="pptx"></div>
+                    <div class="file-icon file-icon-lg" data-type="xlsx"></div>
+                    <div class="file-icon file-icon-lg" data-type="pdf"></div>
+                    <div class="file-icon file-icon-lg" data-type="png"></div>
+                    <div class="file-icon file-icon-lg" data-type="mp4"></div>
+                </div>
+                <div class="column">
+
+                </div>
+            </div>
+        </section>
+
         <section id="tooltips">
             <header class="text-center"><h4>tooltips</h4></header>
             <section>
diff --git a/dist/spectre.css b/dist/spectre.css
index 09bef9b..fbe0997 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1195,6 +1195,47 @@ textarea.form-input {
 .chip .chip-name {
   margin-left: .4rem;
 }
+.file-icon {
+  display: inline-block;
+  width: 3.2rem;
+  height: 4.4rem;
+  background-color: transparent;
+  position: relative;
+  border-width: 0 0 3.2rem 2rem;
+  border-style: solid;
+  border-color: #c5c5c5;
+  border-radius: .3rem;
+  font-size: 1rem;
+  text-align: left;
+}
+.file-icon::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  content: '';
+  background-color: transparent;
+  z-index: 2;
+  width: 1.2rem;
+  height: 1.2rem;
+  border: 0.6rem solid #dfdfdf;
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+.file-icon::after {
+  content: attr(data-type);
+  padding: .2rem;
+  position: absolute;
+  bottom: -3.2rem;
+  left: -2rem;
+  font-size: 1.2em;
+  font-weight: 300;
+  color: #fff;
+  text-transform: lowercase;
+  white-space: nowrap;
+  text-overflow: clip;
+  overflow: hidden;
+  z-index: 3;
+}
 .label {
   display: inline-block;
   padding: .3rem .5rem;
diff --git a/spectre.less b/spectre.less
index 6e812e3..288c031 100644
--- a/spectre.less
+++ b/spectre.less
@@ -20,6 +20,7 @@
 @import 'src/avatars.less';
 @import 'src/badges.less';
 @import 'src/chips.less';
+@import 'src/fileicons.less';
 @import 'src/labels.less';
 @import 'src/menus.less';
 @import 'src/modals.less';
diff --git a/src/fileicons.less b/src/fileicons.less
new file mode 100644
index 0000000..0cec15e
--- /dev/null
+++ b/src/fileicons.less
@@ -0,0 +1,43 @@
+// File icons
+.file-icon {
+  display: inline-block;
+  width: 3.2rem;
+  height: 4.4rem;
+  background-color: transparent;
+  position: relative;
+  border-width: 0 0 3.2rem 2rem;
+  border-style: solid;
+  border-color: @control-color;
+  border-radius: .3rem;
+  font-size: 1rem;
+  text-align: left;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: '';
+    background-color: transparent;
+    z-index: 2;
+    width: 1.2rem;
+    height: 1.2rem;
+    border: .6rem solid lighten(@control-color, 10%);
+    border-right-color: transparent;
+    border-top-color: transparent;
+  }
+  &::after {
+    content: attr(data-type);
+    padding: .2rem;
+    position: absolute;
+    bottom: -3.2rem;
+    left: -2rem;
+    font-size: 1.2em;
+    font-weight: 300;
+    color: #fff;
+    text-transform: lowercase;
+    white-space: nowrap;
+    text-overflow: clip;
+    overflow: hidden;
+    z-index: 3;
+  }
+}
\ No newline at end of file