Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login & custom checkbox

master
Boris Voropaev 2023-08-30 17:22:48 +03:00
parent eb74a62edc
commit 30031c5e16
11 changed files with 123 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/_modules/auth/login/login.component.html
View File

@ -17,7 +17,7 @@
<div *ngIf="error" class="error">{{error}}</div>
<div class="bar">
<div class="remember">
<input id="remember" type="checkbox" />
<input id="remember" type="checkbox" class="checkbox" />
<label for="remember">Запомнить меня</label>
</div>
<div class="forget" (click)="forget()">Забыли пароль?</div>

65
src/app/_modules/auth/login/login.component.scss
View File

@ -2,6 +2,9 @@
display: flex;
flex-direction: column;
height: 100%;
background-color: #ffffff;
border-radius: 8px;
font-size: 20px;
form {
display: flex;
flex-direction: column;
@ -9,23 +12,28 @@
.header {
flex-grow: 0;
border-radius: 24px 24px 0 0;
padding: 20px 24px;
padding: 14px 24px;
display: flex;
flex-direction: row;
align-items: center;
background-color: #F5F4F4;
border-bottom: 1px solid #3E3D40;
border-bottom: 1px solid #C0C0C0;
h2 {
margin: 0;
font-weight: 400;
font-size: 1.5rem;
line-height: 30px;
color: #000000;
font-family: PT Sans Narrow;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 44px; /* 122.222% */
letter-spacing: 0.36px;
color: var(--dark-1);
}
.close {
width: 24px;
height: 24px;
margin-left: auto;
padding: 0;
border: none;
border-radius: 0;
background: transparent url(/assets/images/icons/close_24dp.svg) 50% 50% no-repeat;
}
}
@ -35,7 +43,7 @@
flex-grow: 1;
height: 100%;
overflow: auto;
padding: 20px 24px;
padding: 32px 24px;
-webkit-overflow-scrolling: touch;
row-gap: 24px;
.field {
@ -46,16 +54,27 @@
label {
font-style: normal;
font-weight: 400;
font-size: 1rem;
font-size: 20px;
line-height: normal;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 12px;
border: 1px solid #BFBFBF;
padding: 10px 16px;
input{
&:autofill {
background: #A1CAE5;
}
&:hover{
border-color: #6C6C6C;
outline: none;
}
&:focus, &:focus-visible {
border-color: #0070BA;
outline: none;
}
&:disabled{
border-color: #EDEDED;
outline: none;
}
}
.eye {
position: absolute;
@ -101,20 +120,12 @@
.footer {
display: flex;
flex-grow: 0;
border-top: 1px solid #3E3D40;
border-radius: 0 0 24px 24px;
padding: 20px 24px;
border-top: 1px solid #C0C0C0;
// border-radius: 0 0 24px 24px;
padding: 16px 24px;
justify-content: flex-end;
background-color: #F5F4F4;
gap: 24px;
flex-wrap: wrap;
.btn {
font-size: 0.875rem;
font-style: normal;
font-weight: 700;
line-height: 18px;
letter-spacing: 0.28px;
}
}
}
}

56
src/assets/css/forms.scss
View File

@ -7,6 +7,7 @@ input, select, textarea {
font-family: "PT Sans";
font-size: 20px;
color: var(--dark-1);
background-color: #fff;
&:hover{
border-color: #6C6C6C;
outline: none;
@ -82,3 +83,58 @@ input, select, textarea {
opacity: 0.5;
}
}
.checkbox {
position: absolute;
z-index: -1;
opacity: 0;
}
.checkbox+label {
display: inline-flex;
align-items: center;
user-select: none;
font-size: 20px;
}
.checkbox+label::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
flex-shrink: 0;
flex-grow: 0;
margin-right: 0.5em;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_base_24dp.svg");
}
.checkbox:checked+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_base_24dp.svg");
}
.checkbox:not(:disabled):not(:checked)+label:hover::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_hover_24dp.svg");
}
.checkbox:not(:disabled):checked+label:hover::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_hover_24dp.svg");
}
.checkbox:not(:disabled):checked:active+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_active_24dp.svg");
}
.checkbox:not(:disabled):not(:checked):active+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_active_24dp.svg");
}
.checkbox:focus:checked+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_hover_24dp.svg");
}
.checkbox:focus:not(:checked)+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_hover_24dp.svg");
}
.checkbox:disabled:checked+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_disabled_24dp.svg");
}
.checkbox:disabled:not(:checked)+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_disabled_24dp.svg");
}

4
src/assets/images/icons/checkbox/checbox_check_active_24dp.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="4" y="4" width="16" height="16" rx="2" fill="#004077"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.91421 11.3456L6.5 12.7598L9.32843 15.5882L10.7426 17.0024L12.1569 15.5882L18.5208 9.22423L17.1066 7.81002L10.7426 14.174L7.91421 11.3456Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

4
src/assets/images/icons/checkbox/checbox_check_base_24dp.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="4" y="4" width="16" height="16" rx="2" fill="#0070BA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.91421 11.3456L6.5 12.7598L9.32843 15.5882L10.7426 17.0024L12.1569 15.5882L18.5208 9.22423L17.1066 7.81002L10.7426 14.174L7.91421 11.3456Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

4
src/assets/images/icons/checkbox/checbox_check_disabled_24dp.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="4" y="4" width="16" height="16" rx="2" fill="#A1CAE5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.91421 11.3456L6.5 12.7598L9.32843 15.5882L10.7426 17.0024L12.1569 15.5882L18.5208 9.22423L17.1066 7.81002L10.7426 14.174L7.91421 11.3456Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

4
src/assets/images/icons/checkbox/checbox_check_hover_24dp.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="4" y="4" width="16" height="16" rx="2" fill="#005799"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.91421 11.3456L6.5 12.7598L9.32843 15.5882L10.7426 17.0024L12.1569 15.5882L18.5208 9.22423L17.1066 7.81002L10.7426 14.174L7.91421 11.3456Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

3
src/assets/images/icons/checkbox/checbox_none_active_24dp.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="4.5" y="4.5" width="15" height="15" rx="1.5" fill="white" stroke="#2D2D2D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 190 B

3
src/assets/images/icons/checkbox/checbox_none_base_24dp.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="4.5" y="4.5" width="15" height="15" rx="1.5" fill="white" stroke="#6C6C6C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 190 B

3
src/assets/images/icons/checkbox/checbox_none_disabled_24dp.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="4.5" y="4.5" width="15" height="15" rx="1.5" fill="white" stroke="#C0C0C0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 190 B

3
src/assets/images/icons/checkbox/checbox_none_hover_24dp.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="4.5" y="4.5" width="15" height="15" rx="1.5" fill="white" stroke="#4D4D4D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 190 B