From 67bb749236336d8eff3cd2bc370ba1824a14e41d Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 15 Mar 2016 18:00:14 +0800
Subject: add menu and link code

---
 src/base.less | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'src/base.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%);
+  }
+}
-- 
cgit v1.3.1-23-gd82d


From 8aeba8efd20982d0bb4f04bf19ef7c258129bd70 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Thu, 17 Mar 2016 18:53:35 +0800
Subject: add menu header code

---
 demo/index.html  | 48 +++++++++++++++++++++++++++++++++++++-----------
 dist/spectre.css | 45 +++++++++++++++++++++++++++++++++++++++++----
 src/base.less    |  2 +-
 src/menus.less   | 49 +++++++++++++++++++++++++++++++++++++++++++++----
 4 files changed, 124 insertions(+), 20 deletions(-)

(limited to 'src/base.less')

diff --git a/demo/index.html b/demo/index.html
index 01f35e2..b542766 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -279,19 +279,45 @@
             <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>
+                        <menuitem class="menu-item">
+                            <a href="#">
+                                My profile
+                            </a>
+                        </menuitem>
+                        <menuitem class="divider"></menuitem>
+                        <menuitem class="menu-item">
+                            <a href="#">
+                                Settings
+                            </a>
+                        </menuitem>
+                        <menuitem class="menu-item">
+                            <a href="#">
+                                Logout
+                            </a>
+                        </menuitem>
                     </menu>
                 </div>
-                <div class="column">
-
+                <div class="column col-3">
+                    <ul class="menu">
+                        <li class="menu-header">
+                            <span class="menu-header-text">
+                                Go to
+                            </span>
+                        </li>
+                        <li class="menu-item">
+                            <a href="#">
+                                Slack
+                            </a>
+                        </li>
+                        <li class="menu-item">
+                            <a href="#">
+                                Hipchat
+                            </a>
+                        </li>
+                        <li class="menu-item">
+                            Skype
+                        </li>
+                    </ul>
                 </div>
             </div>
         </section>
diff --git a/dist/spectre.css b/dist/spectre.css
index 27c2947..3e1f1b4 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -396,7 +396,7 @@ a {
 }
 a:hover,
 a:focus {
-  color: #3b49af;
+  color: #283176;
 }
 h1,
 h2,
@@ -1020,20 +1020,57 @@ textarea.form-input {
 .menu .menu-item {
   display: block;
   padding: .2rem 1rem;
+  margin-top: 0;
   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 {
+.menu .menu-item a {
+  display: block;
+  margin: -0.2rem -1rem;
+  padding: .2rem 1rem;
+  border-radius: 3px;
+  color: inherit;
+  text-decoration: none;
+}
+.menu .menu-item a:hover {
   background-color: #efefef;
 }
+.menu .menu-header {
+  display: block;
+  padding: .2rem 1rem;
+  margin-top: 0;
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+  color: #cccccc;
+}
+.menu .menu-header .menu-header-text {
+  display: inline-block;
+  padding: 0 .6rem;
+  margin-left: -0.6rem;
+  background-color: #fff;
+  position: relative;
+  z-index: 99;
+}
+.menu .menu-header:after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 1px;
+  -webkit-transform: translateY(-10px);
+          transform: translateY(-10px);
+  border-bottom: 1px solid #efefef;
+}
+.menu .divider {
+  display: block;
+  border-bottom: 1px solid #efefef;
+  margin: .5rem;
+}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/src/base.less b/src/base.less
index d197d3b..3eda371 100644
--- a/src/base.less
+++ b/src/base.less
@@ -22,6 +22,6 @@ a {
 
   &:hover,
   &:focus {
-    color: darken(@core-link-color, 10%);
+    color: darken(@core-link-color, 25%);
   }
 }
diff --git a/src/menus.less b/src/menus.less
index 8235b4a..cb69690 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -13,16 +13,57 @@
   .menu-item {
     display: block;
     padding: .2rem 1rem;
+    margin-top: 0;
     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;
+    a {
+      display: block;
+      margin: -.2rem -1rem;
+      padding: .2rem 1rem;
+      border-radius: 3px;
+      color: inherit;
+      text-decoration: none;
+
+      &:hover {
+        background-color: @core-border-color;
+      }
+    }
+  }
+
+  .menu-header {
+    display: block;
+    padding: .2rem 1rem;
+    margin-top: 0;
+    font-size: 1.2rem;
+    line-height: 1.8rem;
+    color: lighten(@body-font-color, 60%);
+
+    .menu-header-text {
+      display: inline-block;
+      padding: 0 .6rem;
+      margin-left: -.6rem;
+      background-color: #fff;
+      position: relative;
+      z-index: 99;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 1px;
+      transform: translateY(-10px);
+      border-bottom: 1px solid @core-border-color;
     }
   }
+
+  .divider {
+    display: block;
+    border-bottom: 1px solid @core-border-color;
+    margin: .5rem;
+  }
 }
-- 
cgit v1.3.1-23-gd82d


From 781ed13b83edc7af208b75815cfffb657a766cc5 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 5 Apr 2016 15:34:38 +0800
Subject: update code examples and add more icons

---
 demo/index.html  | 38 ++++++++++++++++++++++++++++++--------
 dist/spectre.css | 16 +++++++++-------
 src/base.less    | 14 ++++++++++++++
 src/buttons.less |  7 -------
 4 files changed, 53 insertions(+), 22 deletions(-)

(limited to 'src/base.less')

diff --git a/demo/index.html b/demo/index.html
index 878c951..8e501af 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -200,18 +200,17 @@
             <div class="columns">
                 <div class="column">
                     <button class="btn btn-sm">small button</button>
+                    <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button>
                     <button class="btn">normal button</button>
+                    <button class="btn"><span class="icon icon-markunread"></span> normal button</button>
                     <button class="btn btn-lg">large button</button>
+                    <button class="btn btn-lg"><span class="icon icon-markunread"></span> large button</button>
                 </div>
-                <div class="column">
-                    <button class="btn btn-block">block button</button>
-                </div>
+
             </div>
             <div class="columns">
                 <div class="column">
-                    <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button>
-                    <button class="btn"><span class="icon icon-markunread"></span> normal button</button>
-                    <button class="btn btn-lg"><span class="icon icon-markunread"></span> large button</button>
+                    <button class="btn btn-block">block button</button>
                 </div>
             </div>
         </section>
@@ -436,6 +435,7 @@
             <div class="columns">
                 <div class="column">
                     <div class="chip">
+                        <span class="icon icon-favorite_border"></span>
                         <span class="chip-name">Crime</span>
                         <button class="btn btn-clear"></button>
                     </div>
@@ -553,13 +553,13 @@
                 <div class="column">
                     <div class="toast">
                         <button class="btn-clear pull-right"></button>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
                 <div class="column">
                     <div class="toast toast-primary">
                         <button class="btn-clear pull-right"></button>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
             </div>
@@ -636,6 +636,28 @@
                         </li>
                     </ul>
                 </div>
+                <div class="column col-3">
+                    <ul class="menu">
+                        <li class="menu-header">
+                            <span class="menu-header-text">
+                                Go to
+                            </span>
+                        </li>
+                        <li class="menu-item">
+                            <a href="#">
+                                <span class="icon icon-link"></span> Slack
+                            </a>
+                        </li>
+                        <li class="menu-item">
+                            <a href="#">
+                                <span class="icon icon-link"></span> Hipchat
+                            </a>
+                        </li>
+                        <li class="menu-item">
+                            <span class="icon icon-link"></span> Skype
+                        </li>
+                    </ul>
+                </div>
             </div>
         </section>
 
diff --git a/dist/spectre.css b/dist/spectre.css
index 3e5d022..da78888 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -398,6 +398,15 @@ a:hover,
 a:focus {
   color: #283176;
 }
+.btn .icon,
+button .icon,
+.toast .icon,
+.menu .icon {
+  margin-right: .2rem;
+  font-size: 1.3333em;
+  line-height: 0.8em;
+  vertical-align: -20%;
+}
 h1,
 h2,
 h3,
@@ -739,13 +748,6 @@ button.btn-link:active,
 button.btn-link.active {
   color: #283176;
 }
-.btn .icon,
-button .icon {
-  margin-right: .2rem;
-  font-size: 1.3333em;
-  line-height: 0.8em;
-  vertical-align: -20%;
-}
 .btn.btn-sm,
 button.btn-sm {
   height: 2.4rem;
diff --git a/src/base.less b/src/base.less
index 3eda371..8090c55 100644
--- a/src/base.less
+++ b/src/base.less
@@ -25,3 +25,17 @@ a {
     color: darken(@core-link-color, 25%);
   }
 }
+
+
+// Icons
+.btn,
+button,
+.toast,
+.menu {
+  .icon {
+    margin-right: .2rem;
+    font-size: 1.3333em;
+    line-height: 0.8em;
+    vertical-align: -20%;
+  }
+}
\ No newline at end of file
diff --git a/src/buttons.less b/src/buttons.less
index be6f1ce..ef95627 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -101,13 +101,6 @@ button {
       color: darken(@core-color, 25%);
     }
   }
-  // Buttons with icons
-  .icon {
-    margin-right: .2rem;
-    font-size: 1.3333em;
-    line-height: 0.8em;
-    vertical-align: -20%;
-  }
 
   // Button Small
   &.btn-sm {
-- 
cgit v1.3.1-23-gd82d