Adds new social button types, adds margin bottom (tentatively) to buttons

RELEASE NOTES.md

@@ -4,6 +4,7 @@
 ### Version 0.7.0 - Oct 17, 2013
 
 **New**
+- New social buttons for Instagram, LinkedIn, Google Plus, Pinterest
 - Added responsive style to ui tables
 - Adds sortable tables to docs
 - Adds new tabbed doc style for modules

server/documents/elements/button.html.eco

@@ -49,20 +49,6 @@ type        : 'UI Element'
       Next
     </div>
   </div>
-
-  <div class="example">
-    <h4 class="ui header">Social</h4>
-    <p>A button can be formatted to link to a social website</p>
-    <div class="ui facebook button">
-      <i class="facebook icon"></i>
-      Log-in with Facebook
-    </div>
-    <div class="ui twitter button">
-      <i class="twitter icon"></i>
-      Sign-up with Twitter
-    </div>
-  </div>
-
   <h2 class="ui dividing header">Groups</h2>
 
   <div class="example">
@@ -130,6 +116,37 @@ type        : 'UI Element'
 
   <h2 class="ui dividing header">Variations</h2>
 
+
+  <div class="example">
+    <h4 class="ui header">Social</h4>
+    <p>A button can be formatted to link to a social website</p>
+    <div class="ui facebook button">
+      <i class="facebook icon"></i>
+      Log-in with Facebook
+    </div>
+    <div class="ui twitter button">
+      <i class="twitter icon"></i>
+      Sign-up with Twitter
+    </div>
+    <div class="ui google plus button">
+      <i class="google plus icon"></i>
+      Share on Google Plus
+    </div>
+    <div class="ui linkedin button">
+      <i class="linkedin icon"></i>
+      Associate your LinkedIn
+    </div>
+    <div class="ui instagram button">
+      <i class="instagram icon"></i>
+      Import from Instagram
+    </div>
+    <div class="ui youtube button">
+      <i class="youtube icon"></i>
+      Watch on YouTube
+    </div>
+  </div>
+
+
   <div class="example">
     <h4 class="ui header">Sizes</h4>
     <p>A button can have different sizes:</p>

src/elements/button.less

@@ -25,8 +25,9 @@
   outline: none;
   border: none;
   background-color: #EBEBEB;
-  color: #999999;
+  color: #808080;
 
+  margin: 0em 0em 0.4em;
   padding: 0.8em 1.5em;
 
   font-size: 1rem;
@@ -180,13 +181,74 @@
 
 /* Twitter */
 .ui.twitter.button {
-  background-color: #00ACED;
+  background-color: #4092CC;
   color: #FFFFFF;
 }
 .ui.twitter.button:hover {
-  background-color: #00B9FF;
+  background-color: #399ADE;
 }
 .ui.twitter.button:active {
+  background-color: #3283BC;
+}
+
+/* Google Plus */
+.ui.google.plus.button {
+  background-color: #D34836;
+  color: #FFFFFF;
+}
+.ui.google.plus.button:hover {
+  background-color: #E3432E;
+}
+.ui.google.plus.button:active {
+  background-color: #CA3A27;
+}
+
+/* Linked In */
+.ui.linkedin.button {
+  background-color: #1F88BE;
+  color: #FFFFFF;
+}
+.ui.linkedin.button:hover {
+  background-color: #1394D6;
+}
+.ui.linkedin.button:active {
+  background-color: #1179AE;
+}
+
+/* YouTube */
+.ui.youtube.button {
+  background-color: #CC181E;
+  color: #FFFFFF;
+}
+.ui.youtube.button:hover {
+  background-color: #DF0209;
+}
+.ui.youtube.button:active {
+  background-color: #A50006;
+}
+
+/* Instagram */
+.ui.instagram.button {
+  background-color: #49769C;
+  color: #FFFFFF;
+}
+.ui.instagram.button:hover {
+  background-color: #4781B1;
+}
+.ui.instagram.button:active {
+  background-color: #38658A;
+}
+
+
+/* Pinterest */
+.ui.pinterest.button {
+  background-color: #00ACED;
+  color: #FFFFFF;
+}
+.ui.pinterest.button:hover {
+  background-color: #00B9FF;
+}
+.ui.pinterest.button:active {
   background-color: #009EDA;
 }
 
@@ -461,7 +523,7 @@
 .ui.basic.button {
   background-color: transparent !important;
   background-image: none;
-  color: #999999 !important;
+  color: #808080 !important;
   font-weight: normal;
   text-transform: none;