lxluxo23/sacg-cronogramas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iconos login

Browse Source
This commit is contained in:
JuanSanhueza 2025-04-29 14:04:00 -04:00
parent d185183656
commit a154e47ab5
3 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/pages/login/login.component.html
View File

@ -26,38 +26,26 @@
<form (ngSubmit)="onLogin()">
<!-- Email -->
<div class="p-input-icon-left mb-3">
<!-- <i class="pi pi-envelope"></i> -->
<input
type="email"
pInputText
[(ngModel)]="email"
name="email"
placeholder="Email"
class="w-full"
style="background-color: white;color: black"
class="input-with-icon w-full mb-3"
style="background-color: white; color: black;"
/>
<span class="icon" style="background-color: white;color: black"><i class="fas fa-search" style="color: black"></i></span>
<!-- <span class="p-inputgroup-addon bg-red-600 text-900">&#64;</span>
<span class="p-inputgroup-addon">
<i class="pi pi-envelope"></i>
</span> -->
</div>
<!-- Password -->
<div class="p-input-icon-left mb-4">
<!-- <i class="pi pi-lock"></i> -->
<input
type="password"
pInputText
[(ngModel)]="password"
name="password"
placeholder="Password"
class="w-full "
style="background-color: white;color: black"
class="input-with-lock w-full"
style="background-color: white; color: black;"
/>
</div>
<!-- Botón -->
<div class="login-actions">

22
src/app/pages/login/login.component.scss
View File

@ -218,7 +218,7 @@
.sub-title {
font-size: 1.8rem;
margin-bottom: 60px;
margin-bottom: 0px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
transform: translate(-4%);
}
@ -235,7 +235,7 @@
.water-drop-container {
position: absolute;
top: 30%;
top: 26%;
left: 49%;
transform: translate(-50%, -50%);
width: 41px;
@ -254,7 +254,7 @@
.text-drop {
position: relative;
color: white;
top: 20%;
top: 15%;
font-weight: bold;
font-size: 1.2rem;
z-index: 2;
@ -266,3 +266,19 @@
bottom: 20px;
left: 20px;
}
.input-with-icon {
background-image: url("data:image/svg+xml,%3Csvg fill='gray' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4C2.897 4 2 4.897 2 6v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zM4 6h16l-8 5-8-5zm0 12V8l8 5 8-5v10H4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px 20px;
padding-right: 35px; /* espacio para que el texto no choque con el ícono */
}
.input-with-lock {
background-image: url("data:image/svg+xml,%3Csvg fill='gray' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8h-1V6c0-2.757-2.243-5-5-5S6 3.243 6 6v2H5c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V10c0-1.103-.897-2-2-2zM8 6c0-1.654 1.346-3 3-3s3 1.346 3 3v2H8V6zm9 16H5V10h12v12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px 20px;
padding-right: 35px; /* espacio para que el texto no se superponga al ícono */
}

1
src/main.ts
View File

@ -1,6 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import '@fortawesome/fontawesome-free/css/all.min.css';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));