FB

src/client/styles/scss/_button.scss

@@ -38,101 +38,4 @@
       top: 0;
     }
   }
-
-  // login
-  &.login {
-    .btn-label {
-      background-color: rgba($danger, 0.4);
-    }
-    .eff {
-      background-color: rgba(#7e4153, 0.5);
-    }
-  }
-
-  // google
-  &#google {
-    .btn-label {
-      background-color: rgba(#24292e, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // github
-  &#github {
-    .btn-label {
-      background-color: rgba(lighten(black, 20%), 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // facebook
-  &#facebook {
-    .btn-label {
-      background-color: rgba(#29487d, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // twitter
-  &#twitter {
-    .btn-label {
-      background-color: rgba(#1da1f2, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // oidc
-  &#oidc {
-    .btn-label {
-      background-color: rgba(#24292e, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // saml
-  &#saml {
-    .btn-label {
-      background-color: rgba(#55a79a, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-
-  // basic
-  &#basic {
-    .btn-label {
-      background-color: rgba(#24292e, 0.4);
-    }
-
-    .eff {
-      background-color: #555;
-    }
-  }
-  // register
-  &#register {
-    .btn-label {
-      background-color: rgba($success, 0.4);
-    }
-
-    .eff {
-      background-color: rgba(#3f7263, 0.5);
-    }
-  }
 }

src/client/styles/scss/_login.scss

@@ -128,6 +128,103 @@
     }
   }
 
+  // button style
+  .btn-fill.login {
+    .btn-label {
+      background-color: rgba($danger, 0.4);
+    }
+    .eff {
+      background-color: rgba(#7e4153, 0.5);
+    }
+  }
+
+  // google
+  .btn-fill#google {
+    .btn-label {
+      background-color: rgba(#24292e, 0.4);
+    }
+
+    .eff {
+      background-color: #555;
+    }
+  }
+
+  // github
+  .btn-fill#github {
+    .btn-label {
+      background-color: rgba(lighten(black, 20%), 0.4);
+    }
+
+    .eff {
+      background-color: #555;
+    }
+  }
+
+  // facebook
+  .btn-fill#facebook {
+    .btn-label {
+      background-color: rgba(#29487d, 0.4);
+    }
+
+    .eff {
+      background-color: #555;
+    }
+  }
+
+  // twitter
+  .btn-fill#twitter {
+    .btn-label {
+      background-color: rgba(#1da1f2, 0.4);
+    }
+
+    .eff {
+      background-color: #555;
+    }
+  }
+
+  // oidc
+  .btn-fill#oidc {
+    .btn-label {
+      background-color: rgba(#24292e, 0.4);
+    }
+
+    .eff {
+      background-color: #555;
+    }
+  }
+
+  // saml
+  .btn-fill#saml {
+    .btn-label {
+      background-color: rgba(#55a79a, 0.4);
+    }
+
+    .eff {
+      background-color: #555;
+    }
+  }
+
+  // basic
+  .btn-fill#basic {
+    .btn-label {
+      background-color: rgba(#24292e, 0.4);
+    }
+
+    .eff {
+      background-color: #555;
+    }
+  }
+  // register
+  .btn-fill#register {
+    .btn-label {
+      background-color: rgba($success, 0.4);
+    }
+
+    .eff {
+      background-color: rgba(#3f7263, 0.5);
+    }
+  }
+
   // external-auth
   .btn-collapse-external-auth {
     color: white;