Kaynağa Gözat

implemented input holder in login page

master
kj1352 3 yıl önce
ebeveyn
işleme
fc91502231
2 değiştirilmiş dosya ile 3 ekleme ve 37 silme
  1. +2
    -2
      src/app/login/login.component.html
  2. +1
    -35
      src/app/login/login.component.scss

+ 2
- 2
src/app/login/login.component.html Dosyayı Görüntüle

@@ -7,13 +7,13 @@
<h2> Login </h2>

<div class="input-holder">
<input type="email" placeholder="johndoe@mail.com">
<label> Email ID </label>
<input type="email">
</div>

<div class="input-holder">
<input type="password" placeholder="Do not share password with others">
<label> Password </label>
<input type="password">
</div>

<div class="other-actions">


+ 1
- 35
src/app/login/login.component.scss Dosyayı Görüntüle

@@ -45,41 +45,7 @@
font-size: 6rem;
margin: 4rem 0;
}

.input-holder {
position: relative;
margin: 2rem 0;

input {
background-color: white;
border: 1px solid var(--border-grey);
border-radius: 4rem;
overflow: hidden;
height: 5rem;
padding: 0 2rem 0 10rem;
width: 100%;
display: block;
color: var(--dark-grey);
font-size: 1.5rem;
transition: border-color 0.3s;
&:focus {
border-color: var(--dark-grey);
}
}

label {
font-size: 1.5rem;
color: var(--dark-grey);
opacity: 0.7;
font-weight: 300;
letter-spacing: 0.05rem;
position: absolute;
left: 2rem;
top: 1.5rem;
}
}

.other-actions {
display: flex;
align-items: center;


Yükleniyor…
İptal
Kaydet