Social media colour variables & icon font

raisely · Sep 10, 2014 · 7742da7 · 7742da7
1 parent fccfc60
commit 7742da7
Show file tree

Hide file tree

Showing 10 changed files with 1,920 additions and 6 deletions.
diff --git a/css/site.css b/css/site.css
diff --git a/fonts/entypo.eot b/fonts/entypo.eot
diff --git a/fonts/entypo.svg b/fonts/entypo.svg
diff --git a/fonts/entypo.ttf b/fonts/entypo.ttf
diff --git a/fonts/entypo.woff b/fonts/entypo.woff
diff --git a/index.html b/index.html
@@ -62,7 +62,12 @@ <h3>Buttons <em>(_buttons.less)</em></h3>
                     <button class="primary">.button-primary</button>
                     <button class="primary disabled">.button-primary.disabled</button><br>
                     <button class="secondary">.button-secondary</button>
-                    <button class="secondary disabled">.button-secondary.disabled</button>
+                    <button class="secondary disabled">.button-secondary.disabled</button><br>
+                    <p>Social icons are achived by prefixing icon text with:<br><code>&lt;span class=&quot;icon-[socialNework]&quot;&gt;</code></p>
+                    <button class="facebook"><span class="icon-facebook"></span>.button-facebook</button>
+                    <button class="facebook disabled">.button-facebook.disabled</button><br>
+                    <button class="twitter"><span class="icon-twitter">.button-twitter</button>
+                    <button class="twitter disabled">.button-twitter.disabled</button>
 
                     <h3>Forms <em>(_forms.less)</em></h3>
                     <p>All HTML5 form elements are normalized to a set of core styles.</p>

diff --git a/less/_buttons.less b/less/_buttons.less
@@ -77,3 +77,41 @@ input.button-secondary {
 		cursor: default;
 	}
 }
+
+button.facebook,
+.button-facebook,
+input.button-facebook {
+	background-color: @socialFacebook;
+	color: white;
+	&:hover {
+		background: darken(@socialFacebook, 5%);
+	}
+	&:active {
+		background: darken(@socialFacebook, 10%);
+	}
+
+	&.disabled {
+		background: lighten(@socialFacebook, 20%);
+		color: @socialFacebook;
+		cursor: default;
+	}
+}
+
+button.twitter,
+.button-twitter,
+input.button-twitter {
+	background-color: @socialTwitter;
+	color: white;
+	&:hover {
+		background: darken(@socialTwitter, 5%);
+	}
+	&:active {
+		background: darken(@socialTwitter, 10%);
+	}
+
+	&.disabled {
+		background: #bedff2;
+		color: @socialTwitter;
+		cursor: default;
+	}
+}
diff --git a/less/_fonts.less b/less/_fonts.less
diff --git a/less/_variables.less b/less/_variables.less
@@ -16,4 +16,9 @@
 @secondaryColor: #9d6ab4;
 
 @textColor: #000000;
-@baseColor: #EEEEEE;
+@baseColor: #EEEEEE;
+
+@socialFacebook: #3B5998;
+@socialTwitter: #00ACED;
+@socialInstagram: #3F729B;
+@socialYoutube: #CD201F;
diff --git a/less/base.less b/less/base.less
@@ -30,6 +30,7 @@
 @import "_forms.less";
 @import "_buttons.less";
 @import "_menus.less";
+@import "_fonts.less";
 
 
 // Custom Styles