Chneemann/videoflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design checkbox

Browse source
This commit is contained in:
Chneemann 2024-08-03 10:19:15 +02:00
parent 72dbbcc456
commit 07800c77c5
5 changed files with 103 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/components/auth/login/login.component.html
View file

@ -55,6 +55,8 @@
} }
</div>
<div class="checkbox">
<label class="container"
>Remember me
<input
type="checkbox"
id="checkbox"
@ -62,7 +64,8 @@
#checkbox
[(ngModel)]="authData.checkbox"
/>
<label for="checkbox">Remember me</label>
<span class="checkmark"></span>
</label>
</div>
<app-btn-large
[value]="'Log in'"

20
frontend/src/app/components/auth/login/login.component.scss
View file

@ -1,6 +1,7 @@
@import "./../../../../assets/style/colors.scss";
@import "./../../../../assets/style/form.scss";
@import "./../../../../assets/style/auth-layout.scss";
@import "./../../../../assets/style/checkbox.scss";
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
@ -11,25 +12,6 @@ section {
position: relative;
}
.checkbox {
display: flex;
align-items: center;
width: 90%;
height: 24px;
margin-bottom: 24px;
input {
width: 16px;
height: 16px;
margin: 12px;
}
label {
width: fit-content;
font-size: 16px;
font-weight: 400;
color: $black;
}
}
.footer {
margin-top: 36px;
a {

10
frontend/src/app/components/auth/register/register.component.html
View file

@ -86,6 +86,9 @@
}
</div>
<div class="checkbox">
<label class="container"
>I agree to the&nbsp;
<a routerLink="/privacy-policy" target="_blank">Privacy policy</a>.
<input
type="checkbox"
id="checkbox"
@ -93,11 +96,8 @@
#checkbox
[(ngModel)]="authData.privacyPolicy"
/>
<label for="checkbox"
>I agree to the
<a routerLink="/privacy-policy" target="_blank">Privacy policy</a
>.</label
>
<span class="checkmark"></span>
</label>
</div>
<app-btn-large
[value]="'Get Started'"

30
frontend/src/app/components/auth/register/register.component.scss
View file

@ -1,37 +1,9 @@
@import "./../../../../assets/style/colors.scss";
@import "./../../../../assets/style/form.scss";
@import "./../../../../assets/style/auth-layout.scss";
@import "./../../../../assets/style/checkbox.scss";
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url(./../../../../assets/img/backgrounds/register.png);
}
.checkbox {
display: flex;
align-items: center;
width: 90%;
height: 24px;
margin-bottom: 24px;
input {
width: 16px;
height: 16px;
margin: 12px;
}
label {
width: fit-content;
font-size: 16px;
font-weight: 400;
color: $black;
a {
font-size: 16px;
font-weight: 400;
color: $blue;
text-decoration: none;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
}

78
frontend/src/assets/style/checkbox.scss Normal file
View file

@ -0,0 +1,78 @@
.checkbox {
display: flex;
align-items: center;
position: relative;
padding-left: 35px;
margin-bottom: 24px;
height: 22px;
width: 80%;
}
.container {
color: $black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
a {
font-size: 16px;
font-weight: 400;
color: $blue;
text-decoration: none;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 22px;
width: 22px;
box-shadow: 1px 1px 3px rgba($black, 0.3);
background-color: rgba($black, 0.1);
transition: background-color 300ms ease-in-out;
}
.container:hover input ~ .checkmark {
box-shadow: 1px 1px 3px rgba($black, 0.5);
background-color: rgba($black, 0.3);
}
.container input:checked ~ .checkmark {
background-color: $blue;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 7.5px;
top: 3px;
width: 5px;
height: 10px;
border: solid $white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}