add more file icon sizes

4 files changed, 190 insertions, 50 deletions

diff --git a/demo/index.html b/demo/index.html
index cd5dc46..6db9bef 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -476,12 +476,11 @@
             </section>
             <div class="columns">
                 <div class="column">
-                    <div class="file-icon file-icon-lg" data-type="docx"></div>
+                    <div class="file-icon file-icon-xl" 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 class="file-icon" data-type="xlsx"></div>
+                    <div class="file-icon file-icon-sm" data-type="pdf"></div>
+                    <div class="file-icon file-icon-xs" data-type="png"></div>
                 </div>
                 <div class="column">
 
@@ -590,7 +589,7 @@
                 <div class="column col-3">
                     <menu class="menu">
                         <menuitem class="menu-item">
-                            <a href="#">
+                            <a href="#" class="active">
                                 My profile
                             </a>
                         </menuitem>
diff --git a/dist/spectre.css b/dist/spectre.css
index fbe0997..9847c68 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1197,45 +1197,107 @@ textarea.form-input {
 }
 .file-icon {
   display: inline-block;
-  width: 3.2rem;
-  height: 4.4rem;
+  width: 2.4rem;
+  height: 3.2rem;
   background-color: transparent;
   position: relative;
-  border-width: 0 0 3.2rem 2rem;
+  border-width: 0 0 2.2rem 1.4rem;
   border-style: solid;
   border-color: #c5c5c5;
-  border-radius: .3rem;
-  font-size: 1rem;
+  border-radius: .2rem;
   text-align: left;
 }
-.file-icon::before {
+.file-icon::before,
+.file-icon::after {
   position: absolute;
   top: 0;
   right: 0;
   content: '';
-  background-color: transparent;
-  z-index: 2;
-  width: 1.2rem;
-  height: 1.2rem;
-  border: 0.6rem solid #dfdfdf;
+  width: 1rem;
+  height: 1rem;
+  border: 0.5rem solid #c5c5c5;
   border-right-color: transparent;
   border-top-color: transparent;
+  background-color: transparent;
+  z-index: 2;
 }
 .file-icon::after {
   content: attr(data-type);
-  padding: .2rem;
-  position: absolute;
-  bottom: -3.2rem;
-  left: -2rem;
-  font-size: 1.2em;
-  font-weight: 300;
+  border-color: rgba(255, 255, 255, 0.5);
+  border-bottom-left-radius: .2rem;
   color: #fff;
-  text-transform: lowercase;
-  white-space: nowrap;
-  text-overflow: clip;
-  overflow: hidden;
+  font-size: 1rem;
+  text-indent: -1.6rem;
+  line-height: 3.6rem;
   z-index: 3;
 }
+.file-icon.file-icon-xs {
+  width: 1.2rem;
+  height: 1.6rem;
+  border-width: 0 0 1.2rem .8rem;
+}
+.file-icon.file-icon-xs::before,
+.file-icon.file-icon-xs::after {
+  width: .4rem;
+  height: .4rem;
+  border-width: .2rem;
+}
+.file-icon.file-icon-xs::after {
+  text-indent: -0.8rem;
+  line-height: 1.6rem;
+  font-size: .8rem;
+  border-radius: .1rem;
+  content: '--';
+}
+.file-icon.file-icon-sm {
+  width: 1.8rem;
+  height: 2.4rem;
+  border-width: 0 0 1.6rem 1rem;
+}
+.file-icon.file-icon-sm::before,
+.file-icon.file-icon-sm::after {
+  width: .8rem;
+  height: .8rem;
+  border-width: .4rem;
+}
+.file-icon.file-icon-sm::after {
+  text-indent: -1.2rem;
+  line-height: 2.6rem;
+  font-size: .8rem;
+}
+.file-icon.file-icon-lg {
+  width: 3.6rem;
+  height: 4.8rem;
+  border-width: 0 0 3.4rem 2.2rem;
+}
+.file-icon.file-icon-lg::before,
+.file-icon.file-icon-lg::after {
+  width: 1.4rem;
+  height: 1.4rem;
+  border-width: .7rem;
+}
+.file-icon.file-icon-lg::after {
+  text-indent: -2.6rem;
+  line-height: 6.2rem;
+  font-size: 1.2rem;
+}
+.file-icon.file-icon-xl {
+  width: 4.8rem;
+  height: 6.4rem;
+  border-width: 0 0 4.6rem 3rem;
+  border-radius: .3rem;
+}
+.file-icon.file-icon-xl::before,
+.file-icon.file-icon-xl::after {
+  width: 1.8rem;
+  height: 1.8rem;
+  border-width: .9rem;
+}
+.file-icon.file-icon-xl::after {
+  text-indent: -3.4rem;
+  line-height: 8.8rem;
+  font-size: 1.4rem;
+}
 .label {
   display: inline-block;
   padding: .3rem .5rem;
@@ -1306,7 +1368,12 @@ textarea.form-input {
   color: inherit;
   text-decoration: none;
 }
-.menu .menu-item a:hover {
+.menu .menu-item a:hover,
+.menu .menu-item a:focus {
+  background-color: #f4f4f4;
+}
+.menu .menu-item a:active,
+.menu .menu-item a.active {
   background-color: #efefef;
 }
 .menu .menu-header {
diff --git a/src/fileicons.less b/src/fileicons.less
index 0cec15e..2cc17df 100644
--- a/src/fileicons.less
+++ b/src/fileicons.less
@@ -1,43 +1,110 @@
 // File icons
 .file-icon {
   display: inline-block;
-  width: 3.2rem;
-  height: 4.4rem;
+  width: 2.4rem;
+  height: 3.2rem;
   background-color: transparent;
   position: relative;
-  border-width: 0 0 3.2rem 2rem;
+  border-width: 0 0 2.2rem 1.4rem;
   border-style: solid;
   border-color: @control-color;
-  border-radius: .3rem;
-  font-size: 1rem;
+  border-radius: .2rem;
   text-align: left;
 
-  &::before {
+  &::before,
+  &::after {
     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%);
+    width: 1rem;
+    height: 1rem;
+    border: .5rem solid @control-color;
     border-right-color: transparent;
     border-top-color: transparent;
+    background-color: transparent;
+    z-index: 2;
   }
   &::after {
     content: attr(data-type);
-    padding: .2rem;
-    position: absolute;
-    bottom: -3.2rem;
-    left: -2rem;
-    font-size: 1.2em;
-    font-weight: 300;
+    border-color: rgba(255, 255, 255, .5);
+    border-bottom-left-radius: .2rem;
     color: #fff;
-    text-transform: lowercase;
-    white-space: nowrap;
-    text-overflow: clip;
-    overflow: hidden;
+    font-size: 1rem;
+    text-indent: -1.6rem;
+    line-height: 3.6rem;
     z-index: 3;
   }
+
+  &.file-icon-xs {
+    width: 1.2rem;
+    height: 1.6rem;
+    border-width: 0 0 1.2rem .8rem;
+
+    &::before,
+    &::after {
+      width: .4rem;
+      height: .4rem;
+      border-width: .2rem;
+    }
+    &::after {
+      text-indent: -.8rem;
+      line-height: 1.6rem;
+      font-size: .8rem;
+      border-radius: .1rem;
+      content: '--';
+    }
+  }
+  &.file-icon-sm {
+    width: 1.8rem;
+    height: 2.4rem;
+    border-width: 0 0 1.6rem 1rem;
+
+    &::before,
+    &::after {
+      width: .8rem;
+      height: .8rem;
+      border-width: .4rem;
+    }
+    &::after {
+      text-indent: -1.2rem;
+      line-height: 2.6rem;
+      font-size: .8rem;
+    }
+  }
+  &.file-icon-lg {
+    width: 3.6rem;
+    height: 4.8rem;
+    border-width: 0 0 3.4rem 2.2rem;
+
+    &::before,
+    &::after {
+      width: 1.4rem;
+      height: 1.4rem;
+      border-width: .7rem;
+    }
+    &::after {
+      text-indent: -2.6rem;
+      line-height: 6.2rem;
+      font-size: 1.2rem;
+    }
+  }
+  &.file-icon-xl {
+    width: 4.8rem;
+    height: 6.4rem;
+    border-width: 0 0 4.6rem 3rem;
+    border-radius: .3rem;
+
+    &::before,
+    &::after {
+      width: 1.8rem;
+      height: 1.8rem;
+      border-width: .9rem;
+    }
+    &::after {
+      text-indent: -3.4rem;
+      line-height: 8.8rem;
+      font-size: 1.4rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/menus.less b/src/menus.less
index c40b61b..7b148c9 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -28,7 +28,12 @@
       color: inherit;
       text-decoration: none;
 
-      &:hover {
+      &:hover,
+      &:focus {
+        background-color: lighten(@core-border-color, 2%);
+      }
+      &:active,
+      &.active {
         background-color: @core-border-color;
       }
     }
@@ -67,3 +72,5 @@
     margin: .5rem;
   }
 }
+
+// TODO: Menus with icons