init

css/third-party-branding/google.scss

@@ -0,0 +1,32 @@
+/**
+ * The Google sign in button must follow Google's design guidelines.
+ * See: https://developers.google.com/identity/branding-guidelines
+ */
+.google-sign-in {
+    background-color: #4285f4;
+    border-radius: 2px;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: Roboto, arial, sans-serif;
+    font-size: 0.875rem;
+    padding: 1px;
+
+    .google-cta {
+        color: white;
+        display: inline-block;
+        /**
+         * Hack the line height for vertical centering of text.
+         */
+        line-height: 2rem;
+        margin: 0 15px;
+    }
+
+    .google-logo {
+        background-color: white;
+        border-radius: 2px;
+        display: inline-block;
+        padding: 8px;
+        height: 18px;
+        width: 18px;
+    }
+}

css/third-party-branding/microsoft.scss

@@ -0,0 +1,28 @@
+/**
+ * The Microsoft sign in button must follow Microsoft's brand guidelines.
+ * See: https://docs.microsoft.com/en-us/azure/active-directory/
+ *     develop/active-directory-branding-guidelines
+ */
+.microsoft-sign-in {
+    align-items: center;
+    background: #FFFFFF;
+    border: 1px solid #8C8C8C;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: Segoe UI, Roboto, arial, sans-serif;
+    height: 41px;
+    padding: 12px;
+
+    .microsoft-cta {
+        display: inline-block;
+        color: #5E5E5E;
+        font-size: 0.875rem;
+        line-height: 2.5rem;
+    }
+
+    .microsoft-logo {
+        display: inline-block;
+        margin-right: 12px;
+    }
+}