Skip to content
This repository has been archived by the owner on Dec 10, 2024. It is now read-only.

Commit

Permalink
terminando estilos modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@fsalasevicius
fsalasevicius committed Nov 19, 2024
1 parent 3fee369 commit bb736d9
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 11 deletions.
80 changes: 76 additions & 4 deletions src/app/components/auth-modal/auth-modal.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,17 @@
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-items: center;
padding: 20px;
position: relative;
position: relative;
}

.logo img {
position: absolute;
bottom: 20px;
right: 20px;
width: 120px;
height: auto;
width: 120px;
height: auto;
}

h2 {
Expand Down Expand Up @@ -83,6 +83,17 @@ p {
background-color: white;
}

.btn-continue {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
padding: 8px 16px;
font-size: 14px;
margin: 20px auto;
border-radius: 50px
}

.social-buttons {
display: flex;
justify-content: center;
Expand All @@ -98,4 +109,65 @@ p {
.register-link a {
color: #007bff;
text-decoration: none;
}

@media (max-width: 800px) {
.auth-illustration {
display: none;
}

.auth-form {
width: 100%;
}
}

.google-button svg {
width: 40px;
height: 40px;
}

.google-button .icon-hover {
display: none;
}

.google-button:hover .icon-default {
display: none;
}

.google-button:hover .icon-hover {
display: inline;
}

.fb-button svg {
width: 40px;
height: 40px;
}

.fb-button .icon-hover {
display: none;
}

.fb-button:hover .icon-default {
display: none;
}

.fb-button:hover .icon-hover {
display: inline;
}

.apple-button svg {
width: 40px;
height: 40px;
}

.apple-button .icon-hover {
display: none;
}

.apple-button:hover .icon-default {
display: none;
}

.apple-button:hover .icon-hover {
display: inline;
}
79 changes: 72 additions & 7 deletions src/app/components/auth-modal/auth-modal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,84 @@ <h2>Inicia sesión o regístrate.</h2>
<mat-checkbox>Permanecer conectado</mat-checkbox>
<a class="forgot-password" href="#">¿Olvidaste tu contraseña?</a>

<button mat-raised-button color="primary" class="full-width">Continuar</button>
<button mat-raised-button color="primary" class="btn-continue">Continuar</button>

<div class="divider">o podés ingresar con</div>

<div class="social-buttons">
<button mat-icon-button>
<mat-icon>google</mat-icon>
<button mat-icon-button class="google-button">
<span class="icon-default">
<svg width="260" height="260" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.4909" stroke="#3C78AF" stroke-width="1.01818" />
<path
d="M24.1983 14.7667C22.9292 13.5415 21.3151 12.9177 19.5174 12.9177C16.3281 12.9177 13.6287 15.0926 12.6658 18.0149C12.4209 18.7567 12.2817 19.5492 12.2817 20.364C12.2817 21.1789 12.4209 21.9713 12.6658 22.7131C13.6287 25.6354 16.3281 27.8103 19.5174 27.8103C21.1649 27.8103 22.5675 27.3719 23.6639 26.6301C24.9608 25.7534 25.8235 24.444 26.1073 22.8986H19.5174V18.1161H31.0498C31.1945 18.9254 31.2725 19.7683 31.2725 20.645C31.2725 24.4103 29.9367 27.5799 27.6213 29.7323C25.5953 31.6206 22.8235 32.7276 19.5174 32.7276C14.7307 32.7276 10.5897 29.9571 8.5749 25.9164C7.74558 24.2473 7.27246 22.3591 7.27246 20.364C7.27246 18.369 7.74556 16.4807 8.57487 14.8116C10.5897 10.771 14.7307 8.00037 19.5174 8.00037C22.8179 8.00037 25.5897 9.22549 27.7103 11.2205L24.1983 14.7667Z"
fill="#3C78AF" />
</svg>
</span>
<span class="icon-hover">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.4909" stroke="#0A2847" stroke-width="1.01818" />
<path
d="M24.1983 14.7667C22.9292 13.5415 21.3151 12.9177 19.5174 12.9177C16.3281 12.9177 13.6287 15.0926 12.6658 18.0149C12.4209 18.7567 12.2817 19.5492 12.2817 20.364C12.2817 21.1789 12.4209 21.9713 12.6658 22.7131C13.6287 25.6354 16.3281 27.8103 19.5174 27.8103C21.1649 27.8103 22.5675 27.3719 23.6639 26.6301C24.9608 25.7534 25.8235 24.444 26.1073 22.8986H19.5174V18.1161H31.0498C31.1945 18.9254 31.2725 19.7683 31.2725 20.645C31.2725 24.4103 29.9367 27.5799 27.6213 29.7323C25.5953 31.6206 22.8235 32.7276 19.5174 32.7276C14.7307 32.7276 10.5897 29.9571 8.5749 25.9164C7.74558 24.2473 7.27246 22.3591 7.27246 20.364C7.27246 18.369 7.74556 16.4807 8.57487 14.8116C10.5897 10.771 14.7307 8.00037 19.5174 8.00037C22.8179 8.00037 25.5897 9.22549 27.7103 11.2205L24.1983 14.7667Z"
fill="#0A2847" />
</svg>
</span>
</button>
<button mat-icon-button>
<mat-icon>facebook</mat-icon>

<button mat-icon-button class="fb-button">
<span class="icon-default">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.4909" stroke="#3C78AF" stroke-width="1.01818" />
<path
d="M17.454 33.3096C11.2722 32.2186 6.54492 26.8368 6.54492 20.3641C6.54492 13.1641 12.4358 7.27319 19.6358 7.27319C26.8358 7.27319 32.7267 13.1641 32.7267 20.3641C32.7267 26.8368 27.9995 32.2186 21.8176 33.3096L21.0904 32.7277H18.1813L17.454 33.3096Z"
fill="#3C78AF" />
<path
d="M24.7271 24.0004L25.3089 20.364H21.818V17.8186C21.818 16.8004 22.1816 16.0004 23.7816 16.0004H25.4544V12.6549C24.5089 12.5095 23.4907 12.364 22.5453 12.364C19.5635 12.364 17.4544 14.1822 17.4544 17.4549V20.364H14.1816V24.0004H17.4544V33.2367C18.1816 33.3822 18.9089 33.4549 19.6362 33.4549C20.3635 33.4549 21.0907 33.3822 21.818 33.2367V24.0004H24.7271Z"
fill="white" />
</svg>


</span>
<span class="icon-hover">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.4909" stroke="#0A2847" stroke-width="1.01818" />
<path
d="M17.454 33.3096C11.2722 32.2186 6.54492 26.8368 6.54492 20.3641C6.54492 13.1641 12.4358 7.27319 19.6358 7.27319C26.8358 7.27319 32.7267 13.1641 32.7267 20.3641C32.7267 26.8368 27.9995 32.2186 21.8176 33.3096L21.0904 32.7277H18.1813L17.454 33.3096Z"
fill="#0A2847" />
<path
d="M24.7271 24.0004L25.3089 20.364H21.818V17.8186C21.818 16.8004 22.1816 16.0004 23.7816 16.0004H25.4544V12.6549C24.5089 12.5095 23.4907 12.364 22.5453 12.364C19.5635 12.364 17.4544 14.1822 17.4544 17.4549V20.364H14.1816V24.0004H17.4544V33.2367C18.1816 33.3822 18.9089 33.4549 19.6362 33.4549C20.3635 33.4549 21.0907 33.3822 21.818 33.2367V24.0004H24.7271Z"
fill="white" />
</svg>


</span>
</button>
<button mat-icon-button>
<mat-icon>apple</mat-icon>

<button mat-icon-button class="apple-button">
<span class="icon-default">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.4909" stroke="#3C78AF" stroke-width="1.01818" />
<path
d="M24.162 7.1062C24.2718 8.54039 23.8183 9.96091 22.8976 11.0661C22.4568 11.6144 21.8973 12.0555 21.2613 12.3562C20.6252 12.6569 19.9292 12.8094 19.2257 12.8022C19.1809 12.1125 19.2723 11.4207 19.495 10.7664C19.7176 10.1121 20.067 9.5081 20.5232 8.98891C21.4563 7.92614 22.7555 7.25393 24.162 7.1062Z"
fill="#3C78AF" />
<path
d="M26.7276 17.5446C26.2602 18.3681 26.0087 19.2965 25.9965 20.2434C25.9976 21.3085 26.3123 22.3497 26.9012 23.2371C27.4901 24.1246 28.3272 24.8191 29.3082 25.234C28.9225 26.4869 28.3411 27.6709 27.5856 28.7422C26.571 30.26 25.5072 31.7428 23.8187 31.7702C23.0157 31.7887 22.4736 31.5578 21.9088 31.3172C21.3196 31.0662 20.7057 30.8047 19.745 30.8047C18.7261 30.8047 18.0847 31.0746 17.466 31.335C16.9314 31.56 16.4138 31.7778 15.6844 31.8081C14.0764 31.8676 12.8475 30.1881 11.796 28.6846C9.69433 25.6141 8.05785 20.0315 10.2518 16.233C10.7583 15.3228 11.4919 14.5594 12.3811 14.0171C13.2704 13.4748 14.285 13.172 15.326 13.1384C16.238 13.1196 17.1131 13.4711 17.8804 13.7793C18.4671 14.015 18.9908 14.2253 19.4196 14.2253C19.7966 14.2253 20.3056 14.0233 20.8989 13.7878C21.8334 13.4169 22.9769 12.9631 24.1422 13.0854C25.0352 13.1134 25.9094 13.3492 26.6954 13.7741C27.4813 14.199 28.1574 14.8013 28.6699 15.5332C27.8632 16.0291 27.195 16.721 26.7276 17.5446Z"
fill="#3C78AF" />
</svg>

</span>
<span class="icon-hover">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.4909" stroke="#0A2847" stroke-width="1.01818" />
<path
d="M24.162 7.1062C24.2718 8.54039 23.8183 9.96091 22.8976 11.0661C22.4568 11.6144 21.8973 12.0555 21.2613 12.3562C20.6252 12.6569 19.9292 12.8094 19.2257 12.8022C19.1809 12.1125 19.2723 11.4207 19.495 10.7664C19.7176 10.1121 20.067 9.5081 20.5232 8.98891C21.4563 7.92614 22.7555 7.25393 24.162 7.1062Z"
fill="#0A2847" />
<path
d="M26.7276 17.5446C26.2602 18.3681 26.0087 19.2965 25.9965 20.2434C25.9976 21.3085 26.3123 22.3497 26.9012 23.2371C27.4901 24.1246 28.3272 24.8191 29.3082 25.234C28.9225 26.4869 28.3411 27.6709 27.5856 28.7422C26.571 30.26 25.5072 31.7428 23.8187 31.7702C23.0157 31.7887 22.4736 31.5578 21.9088 31.3172C21.3196 31.0662 20.7057 30.8047 19.745 30.8047C18.7261 30.8047 18.0847 31.0746 17.466 31.335C16.9314 31.56 16.4138 31.7778 15.6844 31.8081C14.0764 31.8676 12.8475 30.1881 11.796 28.6846C9.69433 25.6141 8.05785 20.0315 10.2518 16.233C10.7583 15.3228 11.4919 14.5594 12.3811 14.0171C13.2704 13.4748 14.285 13.172 15.326 13.1384C16.238 13.1196 17.1131 13.4711 17.8804 13.7793C18.4671 14.015 18.9908 14.2253 19.4196 14.2253C19.7966 14.2253 20.3056 14.0233 20.8989 13.7878C21.8334 13.4169 22.9769 12.9631 24.1422 13.0854C25.0352 13.1134 25.9094 13.3492 26.6954 13.7741C27.4813 14.199 28.1574 14.8013 28.6699 15.5332C27.8632 16.0291 27.195 16.721 26.7276 17.5446Z"
fill="#0A2847" />
</svg>

</span>
</button>
</div>

Expand Down

0 comments on commit bb736d9

Please sign in to comment.