Merge branch 'feature-new-buttons' into devel

olgabrani · olgabrani · commit 3877f8b16dab · 2019-03-04T15:28:54.000Z
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,11 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Module discopower: Add style rules and logos for the buttons of the IdPs:
   - OpenAIRE
   - OpenMinTeD
+  - QQ
+  - WeChat
 - Add info about compatiblity in README.
 - Enable/disable cookie banner functionality via setting in config file.
 
 ### Changed
 - Update instructions on module config file usage.
+- Update style of Google login button.
 
 ## [v2.1.0](https://github.com/rciam/simplesamlphp-module-themevanilla/compare/v2.0.0...v2.1.0) - 2018-10-18
 
diff --git a/www/resources/images/google.svg b/www/resources/images/google.svg
@@ -1,5 +1 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28">
-<title>google-plus-circle</title>
-<path fill="#fff" d="M14.328 14.141c0-0.344-0.031-0.672-0.094-1h-5.656v2.063h3.391c-0.25 1.656-1.813 2.578-3.391 2.578-2.078 0-3.734-1.719-3.734-3.781s1.656-3.781 3.734-3.781c0.875 0 1.75 0.297 2.391 0.922l1.625-1.578c-1.109-1.031-2.5-1.563-4.016-1.563-3.328 0-6 2.688-6 6s2.672 6 6 6c3.453 0 5.75-2.438 5.75-5.859zM19.719 14.859h1.703v-1.719h-1.703v-1.719h-1.719v1.719h-1.719v1.719h1.719v1.719h1.719v-1.719zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z"></path>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
diff --git a/www/resources/images/qq.svg b/www/resources/images/qq.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<path fill="#FFC107" d="M17.5,44c-3.6,0-6.5-1.6-6.5-3.5s2.9-3.5,6.5-3.5s6.5,1.6,6.5,3.5S21.1,44,17.5,44z M37,40.5
+	c0-1.9-2.9-3.5-6.5-3.5S24,38.6,24,40.5s2.9,3.5,6.5,3.5S37,42.4,37,40.5z"/>
+<path fill="#37474F" d="M37.2,22.2c-0.1-0.3-0.2-0.6-0.3-1c0.1-0.5,0.1-1,0.1-1.5c0-1.4-0.1-2.6-0.1-3.6C36.9,9.4,31.1,4,24,4
+	S11,9.4,11,16.1c0,0.9,0,2.2,0,3.6c0,0.5,0,1,0.1,1.5c-0.1,0.3-0.2,0.6-0.3,1c-1.9,2.7-3.8,6-3.8,8.5C7,35.5,8.4,35,8.4,35
+	c0.6,0,1.6-1,2.5-2.1C13,38.8,18,43,24,43s11-4.2,13.1-10.1C38,34,39,35,39.6,35c0,0,1.4,0.5,1.4-4.3C41,28.2,39.1,24.8,37.2,22.2z"
+	/>
+<path fill="#ECEFF1" d="M14.7,23c-0.5,1.5-0.7,3.1-0.7,4.8C14,35.1,18.5,41,24,41s10-5.9,10-13.2c0-1.7-0.3-3.3-0.7-4.8H14.7z"/>
+<path fill="#FFFFFF" d="M23,13.5c0,1.9-1.1,3.5-2.5,3.5S18,15.4,18,13.5s1.1-3.5,2.5-3.5S23,11.6,23,13.5z M27.5,10
+	c-1.4,0-2.5,1.6-2.5,3.5s1.1,3.5,2.5,3.5s2.5-1.6,2.5-3.5S28.9,10,27.5,10z"/>
+<path fill="#37474F" d="M22,13.5c0,0.8-0.4,1.5-1,1.5s-1-0.7-1-1.5s0.4-1.5,1-1.5S22,12.7,22,13.5z M27,12c-0.6,0-1,0.7-1,1.5
+	s0.4-0.5,1-0.5s1,1.3,1,0.5S27.6,12,27,12z"/>
+<path fill="#FFC107" d="M32,19.5c0,0.8-3.6,2.5-8,2.5s-8-1.7-8-2.5s3.6-1.5,8-1.5S32,18.7,32,19.5z"/>
+<path fill="#FF3D00" d="M38.7,21.2c-0.4-1.5-1-2.2-2.1-1.3c0,0-5.9,3.1-12.5,3.1v0.1l0-0.1c-6.6,0-12.5-3.1-12.5-3.1
+	c-1.1-0.8-1.7-0.2-2.1,1.3c-0.4,1.5-0.7,2,0.7,2.8c0.1,0.1,1.4,0.8,3.4,1.7c-0.6,3.5-0.5,6.8-0.5,7c0.1,1.5,1.3,1.3,2.9,1.3
+	c1.6-0.1,2.9,0,2.9-1.6c0-0.9,0-2.9,0.3-5c1.6,0.3,3.2,0.6,5,0.6l0,0v0c7.3,0,13.7-3.9,13.9-4C39.3,23.3,39,22.8,38.7,21.2z"/>
+<path fill="#DD2C00" d="M13.2,27.7c1.6,0.6,3.5,1.3,5.6,1.7c0-0.6,0.1-1.3,0.2-2c-2.1-0.5-4-1.1-5.5-1.7
+	C13.4,26.4,13.3,27.1,13.2,27.7z"/>
+</svg>
diff --git a/www/resources/images/wechat.svg b/www/resources/images/wechat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><g id="Wechat"><path d="M16.5,8V8l.15,0h0a.55.55,0,0,0,.51-.5.5.5,0,0,0-.09-.29C15.92,4.09,12.59,2,8.75,2,3.93,2,0,5.36,0,9.5a7.06,7.06,0,0,0,3.09,5.71l-1,2.07a.5.5,0,0,0,.7.66l2.65-1.51a10,10,0,0,0,2.22.51.5.5,0,0,0,.54-.61A5.8,5.8,0,0,1,8,15C8,11.14,11.81,8,16.5,8ZM11,6a1,1,0,1,1-1,1A1,1,0,0,1,11,6ZM6,8A1,1,0,1,1,7,7,1,1,0,0,1,6,8Z" style="fill:#2DC100"/><path d="M24,15c0-3.31-3.36-6-7.5-6S9,11.69,9,15s3.36,6,7.5,6a9.23,9.23,0,0,0,2.3-.29l2.48,1.24a.5.5,0,0,0,.22.05.5.5,0,0,0,.46-.69l-.68-1.7A5.64,5.64,0,0,0,24,15ZM14,14a1,1,0,1,1,1-1A1,1,0,0,1,14,14Zm5,0a1,1,0,1,1,1-1A1,1,0,0,1,19,14Z" style="fill:#2DC100"/></g></svg>
diff --git a/www/resources/sass/_colors.scss b/www/resources/sass/_colors.scss
@@ -22,7 +22,8 @@ $table-border-color: transparent;
 $orcid: #a7cc46;
 $facebook: #3d5a96;
 $linkedin: #1178b3;
-$google: #da4b3e;
+$google: #4285f4;
+$google-font: #757575;
 $elixir: #ff7a03;
 $igtf: #2b2a29;
 $dariah-text: #414b7e;
@@ -37,4 +38,6 @@ $egi-cyan: #a2c5df;
 $openaire-lightblue: #4686e6;
 $openaire-blue: #39378d;
 $openminted: #02bab4;
+$wechat: #2dc101;
+$qq: #4292FF;
 
diff --git a/www/resources/sass/_idps_buttons.scss b/www/resources/sass/_idps_buttons.scss
@@ -26,8 +26,33 @@
         padding-bottom: 5px;
     }
     &.google {
+        background-color: white;
+        border-color: $google;
+        color: $google-font;
+        font: 500 14px 'Roboto', sans-serif;
+    }
+    &.google-dark {
+		padding-bottom: 10px;
         background-color: $google;
-        border: 1px solid $google;
+        border-color: $google;
+        color: white;
+        font: 500 14px 'Roboto', sans-serif;
+        letter-spacing: normal;
+		span {
+			display: inline-block;
+			line-height: 20px;
+			position: relative;
+			top: 2px;
+		}
+        img {
+            background: white;
+            height: 34px;
+            padding: 8px;
+            margin-right: 24px;
+            position: absolute;
+            left: 1px;
+            top: 1px;
+        }
     }
     &.orcid {
         color: darken($orcid, 10%);
@@ -102,4 +127,16 @@
             margin: 10px 0;
         }
     }
+     &.wechat {
+        background-color: $white;
+        border: $wechat 1px solid;
+        color: $wechat;
+        font-weight: bold;
+        &:hover {
+            color: darken($wechat, 10%);
+        }
+    }
+    &.qq {
+        background-color: $qq;
+    }
 }
