arreglo de estilos GoogleLogIn

This commit is contained in:
Paola 2021-07-10 20:02:17 -06:00
parent 1340861658
commit 7da71d8769
3 changed files with 63 additions and 2 deletions

View File

@ -129,11 +129,18 @@
</div>
</form>
<div class="mb-3 mb-0">
<div class="google-btn w-80 m-auto">
<div class="google-icon-wrapper">
<img class="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
</div>
<button class="btn-text" (click)="signInWithGoogle()">Iniciar con Google</button>
</div>
<!--<div class="mb-3 mb-0">
<button class="btn" (click)="signInWithGoogle()">
<i class="fa fa-Google">Iniciar con Google</i>
</button>
</div>
</div>-->
</div>
<!-- end card-body -->
</div>

View File

@ -1,3 +1,56 @@
body {
background-color: #f2f2f2 !important;
}
$white: #fff;
$google-blue: #4285f4;
$button-active-blue: #1669f2;
.google-btn {
width: 184px;
height: 42px;
background-color: $google-blue !important;
border-radius: 2px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
.google-icon-wrapper {
position: absolute;
margin-top: 1px;
margin-left: 1px;
width: 40px;
height: 40px;
border-radius: 2px;
background-color: $white;
}
.google-icon {
position: absolute;
margin-top: 11px;
margin-left: 11px;
width: 18px;
height: 18px;
}
.btn-text {
float: right;
margin: 5px 5px 0px 0px;
color: $white;
font-size: 14px;
letter-spacing: 0.2px;
font-family: 'Roboto';
background-color: $google-blue;
width: 135px;
height: 30px;
padding: 6px 6px 7px 6px;
border: $google-blue;
}
&:hover {
box-shadow: 0 0 6px $google-blue !important;
}
&:active {
background: $button-active-blue !important;
}
.google-div {
margin-left: 150px !important;
}
}
@import url(https://fonts.googleapis.com/css?family=Roboto:500);

View File

@ -91,6 +91,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
() => {
this.authenticationError = false;
if (!this.router.getCurrentNavigation()) {
window.localStorage.setItem('IsGoogle', 'true');
// There were no routing during login (eg from navigationToStoredUrl)
this.router.navigate(['']);
}