diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index fb86e704e..79c91798a 100755 --- a/RELEASE NOTES.md +++ b/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 diff --git a/server/documents/elements/button.html.eco b/server/documents/elements/button.html.eco index 71fb3d676..6e1b4af64 100755 --- a/server/documents/elements/button.html.eco +++ b/server/documents/elements/button.html.eco @@ -49,20 +49,6 @@ type : 'UI Element' Next - -
-

Social

-

A button can be formatted to link to a social website

-
- - Log-in with Facebook -
-
- - Sign-up with Twitter -
-
-

Groups

@@ -130,6 +116,37 @@ type : 'UI Element'

Variations

+ +
+

Social

+

A button can be formatted to link to a social website

+ + +
+ + Share on Google Plus +
+
+ + Associate your LinkedIn +
+
+ + Import from Instagram +
+
+ + Watch on YouTube +
+
+ +

Sizes

A button can have different sizes:

diff --git a/src/elements/button.less b/src/elements/button.less index 702287024..c5c852dd1 100755 --- a/src/elements/button.less +++ b/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;