add menu and link code

8 files changed, 99 insertions, 2 deletions

diff --git a/demo/index.html b/demo/index.html
index c7ef27c..01f35e2 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -22,7 +22,7 @@
             <h6>H6 Title</h6>
 
             <header class="text-center"><h4>paragraphs</h4></header>
-            <p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. Integer posuere erat a ante.</p>
+            <p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
             <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
             <header class="text-center"><h4>blockquote</h4></header>
@@ -274,6 +274,27 @@
                 </div>
             </div>
         </section>
+        <section class="menus">
+            <header class="text-center"><h4>menus</h4></header>
+            <div class="columns">
+                <div class="column col-3">
+                    <menu class="menu">
+                        <div class="menu-item">
+                            Slack
+                        </div>
+                        <a class="menu-item" href="#">
+                            Hipchat
+                        </a>
+                        <div class="menu-item">
+                            Skype
+                        </div>
+                    </menu>
+                </div>
+                <div class="column">
+
+                </div>
+            </div>
+        </section>
     </section>
 </body>
 </html>
\ No newline at end of file
diff --git a/dist/spectre.css b/dist/spectre.css
index 0298be3..27c2947 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -390,6 +390,14 @@ body {
   font-size: 14px;
   background-color: #fff;
 }
+a {
+  color: #5764C6;
+  text-decoration: underline;
+}
+a:hover,
+a:focus {
+  color: #3b49af;
+}
 h1,
 h2,
 h3,
@@ -998,6 +1006,34 @@ textarea.form-input {
   background-color: #e74c3c;
   border-color: #e64433;
 }
+.menu {
+  display: block;
+  width: auto;
+  text-align: left;
+  margin: 0;
+  padding: 1rem;
+  border-radius: 3px;
+  background-color: #fff;
+  z-index: 999;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+.menu .menu-item {
+  display: block;
+  padding: .2rem 1rem;
+  border-radius: 3px;
+  color: #333;
+  line-height: 2.4rem;
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.menu .menu-item:hover,
+.menu .menu-item:focus {
+  background-color: #efefef;
+}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/spectre.less b/spectre.less
index 20e3ae9..988ac37 100644
--- a/spectre.less
+++ b/spectre.less
@@ -18,8 +18,9 @@
 // Components
 @import 'src/labels.less';
 @import 'src/toasts.less';
+@import 'src/menus.less';
+@import 'src/navigation.less';
 //@import 'src/cards.less';
-//@import 'src/menus.less';
 //@import 'src/modals.less';
 //@import 'src/tooltips.less';
 //@import 'src/animations.less';
diff --git a/src/base.less b/src/base.less
index 1590e8e..d197d3b 100644
--- a/src/base.less
+++ b/src/base.less
@@ -16,3 +16,12 @@ body {
   font-size: @body-font-size;
   background-color: @body-bg;
 }
+a {
+  color: @core-link-color;
+  text-decoration: underline;
+
+  &:hover,
+  &:focus {
+    color: darken(@core-link-color, 10%);
+  }
+}
diff --git a/src/dist/menus.css b/src/dist/menus.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/dist/menus.css
diff --git a/src/menus.less b/src/menus.less
new file mode 100644
index 0000000..8235b4a
--- /dev/null
+++ b/src/menus.less
@@ -0,0 +1,28 @@
+// Menus
+.menu {
+  display: block;
+  width: auto;
+  text-align: left;
+  margin: 0;
+  padding: 1rem;
+  border-radius: 3px;
+  background-color: #fff;
+  z-index: 999;
+  .shadow;
+
+  .menu-item {
+    display: block;
+    padding: .2rem 1rem;
+    border-radius: 3px;
+    color: @body-font-color;
+    line-height: 2.4rem;
+    cursor: pointer;
+    text-decoration: none;
+    user-select: none;
+
+    &:hover,
+    &:focus {
+      background-color: @core-border-color;
+    }
+  }
+}
diff --git a/src/navigation.less b/src/navigation.less
new file mode 100644
index 0000000..8fbcc0f
--- /dev/null
+++ b/src/navigation.less
@@ -0,0 +1 @@
+// Navigation
diff --git a/src/variables.less b/src/variables.less
index 2c99039..97f357d 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -8,6 +8,7 @@
 
 // Colors
 @core-color: #5764C6;
+@core-link-color: #5764C6;
 @core-border-color: #efefef;
 @control-color: #c5c5c5;
 @control-color-success: #00c372;