added images on btns
This commit is contained in:
Chneemann
parent
bfb6a488fb
commit
1ff279d153
10 changed files with 88 additions and 158 deletions
|
|
@ -269,8 +269,9 @@
|
|||
[class]="'btn-clear'"
|
||||
[type]="'button'"
|
||||
[value]="'Clear'"
|
||||
(click)="removeTaskData()"
|
||||
[img]="'close'"
|
||||
[ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
|
||||
(click)="removeTaskData()"
|
||||
></app-form-btn>
|
||||
<app-form-btn
|
||||
[class]="'btn-delete'"
|
||||
|
|
@ -281,6 +282,8 @@
|
|||
<app-form-btn
|
||||
[class]="'btn-submit'"
|
||||
[type]="'submit'"
|
||||
[img]="'check'"
|
||||
[imgFilter]="'none'"
|
||||
[value]="overlayData.toString() !== '' ? 'Update Task' : 'Create Task'"
|
||||
[disabled]="
|
||||
title.invalid ||
|
||||
|
|
|
|||
|
|
@ -267,73 +267,6 @@ p {
|
|||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 183px;
|
||||
height: 56px;
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--black) !important;
|
||||
background-color: var(--light-gray);
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
transition: 125ms ease-in-out;
|
||||
&:hover:not(:disabled) {
|
||||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--light-blue) !important;
|
||||
border: 1px solid var(--light-blue) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:not(:disabled) {
|
||||
background-color: var(--very-dark-blue) !important;
|
||||
color: var(--white);
|
||||
}
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
width: 110px;
|
||||
height: 56px;
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
border-radius: 10px;
|
||||
color: var(--black);
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--black);
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
transition: 125ms ease-in-out;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--light-blue);
|
||||
border-color: var(--light-bluek);
|
||||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
width: 110px;
|
||||
height: 56px;
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
border-radius: 10px;
|
||||
color: var(--red);
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--red);
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
transition: 125ms ease-in-out;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
background-color: var(--red);
|
||||
border-color: var(--black);
|
||||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/*------------- RESPONSIVE -------------*/
|
||||
|
||||
@media screen and (max-width: 1250px) {
|
||||
|
|
|
|||
|
|
@ -64,18 +64,17 @@
|
|||
<span>{{ "contact-dialog-form.invalid-phone" | translate }}</span>
|
||||
}
|
||||
<div class="btns">
|
||||
<div class="btn">
|
||||
<input
|
||||
(click)="deleteContact()"
|
||||
<app-form-btn
|
||||
class="btn-delete"
|
||||
type="button"
|
||||
value="{{ 'contact-dialog-form.btn-delete' | translate }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<input
|
||||
class="btn-save"
|
||||
type="submit"
|
||||
(click)="deleteContact()"
|
||||
></app-form-btn>
|
||||
<app-form-btn
|
||||
[class]="'btn-submit'"
|
||||
[type]="'submit'"
|
||||
[img]="'check'"
|
||||
[imgFilter]="'none'"
|
||||
value="{{ 'contact-dialog-form.btn-save' | translate }}"
|
||||
[disabled]="
|
||||
firstName.invalid ||
|
||||
|
|
@ -87,8 +86,7 @@
|
|||
phone.invalid ||
|
||||
!contactData.phone
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
></app-form-btn>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -19,47 +19,6 @@ span {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 480px;
|
||||
.btn-delete {
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
border-radius: 10px;
|
||||
color: var(--red);
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--red);
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
transition: 125ms ease-in-out;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
background-color: var(--red);
|
||||
border-color: var(--black);
|
||||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
.btn-save {
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--black) !important;
|
||||
background-color: var(--light-gray);
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
transition: 125ms ease-in-out;
|
||||
&:hover:not(:disabled) {
|
||||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--light-blue) !important;
|
||||
border: 1px solid var(--light-blue) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:not(:disabled) {
|
||||
background-color: var(--very-dark-blue) !important;
|
||||
color: var(--white);
|
||||
}
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
input {
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--gray);
|
||||
|
|
@ -85,16 +44,6 @@ span {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 111px;
|
||||
height: 57px;
|
||||
margin: 0 24px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.name {
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@ import { FormsModule, NgForm } from '@angular/forms';
|
|||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { SharedService } from '../../../services/shared.service';
|
||||
import { FirebaseService } from '../../../services/firebase.service';
|
||||
import { FormBtnComponent } from '../../../shared/components/buttons/form-btn/form-btn.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact-form',
|
||||
standalone: true,
|
||||
imports: [TranslateModule, FormsModule],
|
||||
imports: [TranslateModule, FormsModule, FormBtnComponent],
|
||||
templateUrl: './contact-form.component.html',
|
||||
styleUrl: './contact-form.component.scss',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
<input
|
||||
<div class="input-container">
|
||||
<input
|
||||
class="{{ class }}"
|
||||
type="{{ type }}"
|
||||
value="{{ value }}"
|
||||
[disabled]="disabled"
|
||||
/>
|
||||
[style.padding-right.px]="
|
||||
img == 'check' && !disabled ? '44' : img !== '' && !disabled ? '36' : ''
|
||||
"
|
||||
/>
|
||||
<div
|
||||
class="background-image"
|
||||
[ngStyle]="{
|
||||
'--filter': imgFilter,
|
||||
'background-image': disabled
|
||||
? 'none'
|
||||
: 'url(./../../../../../assets/img/' + img + '.svg)',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.btn-submit {
|
||||
width: 183px;
|
||||
width: fit-content;
|
||||
height: 56px;
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
transition: 125ms ease-in-out;
|
||||
cursor: pointer;
|
||||
&:hover:not(:disabled) {
|
||||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--light-blue) !important;
|
||||
|
|
@ -25,10 +26,10 @@
|
|||
}
|
||||
|
||||
.btn-clear {
|
||||
width: 110px;
|
||||
width: fit-content;
|
||||
height: 56px;
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
margin: 12px;
|
||||
border-radius: 10px;
|
||||
color: var(--black);
|
||||
background-color: var(--white);
|
||||
|
|
@ -45,10 +46,10 @@
|
|||
}
|
||||
|
||||
.btn-delete {
|
||||
width: 110px;
|
||||
width: fit-content;
|
||||
height: 56px;
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
margin: 12px;
|
||||
border-radius: 10px;
|
||||
color: var(--red);
|
||||
background-color: var(--white);
|
||||
|
|
@ -64,3 +65,25 @@
|
|||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input-container .background-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
background-size: auto 20%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
transition: filter 125ms ease-in-out;
|
||||
}
|
||||
|
||||
.input-container:hover .background-image {
|
||||
filter: var(--filter);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form-btn',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [CommonModule],
|
||||
templateUrl: './form-btn.component.html',
|
||||
styleUrl: './form-btn.component.scss',
|
||||
})
|
||||
|
|
@ -11,5 +12,8 @@ export class FormBtnComponent {
|
|||
@Input() class: string = '';
|
||||
@Input() type: string = '';
|
||||
@Input() value: string = '';
|
||||
@Input() img: string = '';
|
||||
@Input() disabled: boolean = false;
|
||||
@Input() imgFilter: string =
|
||||
'brightness(0) saturate(100%) invert(57%) sepia(44%) saturate(848%) hue-rotate(155deg) brightness(95%) contrast(86%)';
|
||||
}
|
||||
|
|
|
|||
3
src/assets/img/check.svg
Normal file
3
src/assets/img/check.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.79911 9.15L14.2741 0.675C14.4741 0.475 14.7116 0.375 14.9866 0.375C15.2616 0.375 15.4991 0.475 15.6991 0.675C15.8991 0.875 15.9991 1.1125 15.9991 1.3875C15.9991 1.6625 15.8991 1.9 15.6991 2.1L6.49911 11.3C6.29911 11.5 6.06578 11.6 5.79911 11.6C5.53245 11.6 5.29911 11.5 5.09911 11.3L0.799113 7C0.599113 6.8 0.50328 6.5625 0.511613 6.2875C0.519946 6.0125 0.624113 5.775 0.824113 5.575C1.02411 5.375 1.26161 5.275 1.53661 5.275C1.81161 5.275 2.04911 5.375 2.24911 5.575L5.79911 9.15Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 613 B |
|
|
@ -1 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
|
||||
<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.24953 7.00008L11.4925 12.2431M1.00653 12.2431L6.24953 7.00008L1.00653 12.2431ZM11.4925 1.75708L6.24853 7.00008L11.4925 1.75708ZM6.24853 7.00008L1.00653 1.75708L6.24853 7.00008Z" stroke="#2A3647" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 203 B After Width: | Height: | Size: 376 B |
Loading…
Reference in a new issue