more css button styling changse
This commit is contained in:
parent
69588f6c68
commit
71a7d4506c
|
@ -7,16 +7,16 @@
|
|||
</div>
|
||||
|
||||
<div class="col-auto">
|
||||
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="canDelete">
|
||||
<button mat-button (click)="delete()" class="action-btn" type="button">
|
||||
<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'REFERENCE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="canSave">
|
||||
<button mat-button class="action-btn" (click)="formSubmit()">
|
||||
<button mat-button class="rounded-btn primary" (click)="formSubmit()">
|
||||
<mat-icon>save</mat-icon>
|
||||
{{'REFERENCE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
|
||||
</button>
|
||||
|
@ -60,7 +60,7 @@
|
|||
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
|
||||
<button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -124,7 +124,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-button class="action-btn" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
|
||||
<button mat-button class="rounded-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
|
||||
</div>
|
||||
<div class="col-12 mt-3 mb-3">
|
||||
<div class="row d-flex align-items-center">
|
||||
|
@ -132,7 +132,7 @@
|
|||
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button class="action-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
|
||||
<button mat-button class="rounded-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -19,39 +19,6 @@
|
|||
background-color: #b0b0b0;
|
||||
}
|
||||
|
||||
.finalize-btn {
|
||||
border-radius: 30px;
|
||||
border: 1px solid var(--primary-color);
|
||||
background: transparent;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
color: var(--primary-color);
|
||||
&:disabled{
|
||||
background-color: #CBCBCB;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: 30px;
|
||||
background-color: var(--secondary-color);
|
||||
border: 1px solid transparent;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 200ms;
|
||||
transition-delay: 50ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
&:disabled{
|
||||
background-color: #CBCBCB;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.dlt-section-btn {
|
||||
margin: 0;
|
||||
|
|
|
@ -6,16 +6,16 @@
|
|||
<app-navigation-breadcrumb />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="canDelete">
|
||||
<button mat-button class="action-btn" type="button" (click)="delete()">
|
||||
<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'REFERENCE-EDITOR.ACTIONS.DELETE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="canSave">
|
||||
<button mat-button class="action-btn" (click)="formSubmit()">
|
||||
<button mat-button class="rounded-btn primary" (click)="formSubmit()">
|
||||
<mat-icon>save</mat-icon>
|
||||
{{'REFERENCE-EDITOR.ACTIONS.SAVE' | translate}}
|
||||
</button>
|
||||
|
@ -92,7 +92,7 @@
|
|||
<div class="col-12">
|
||||
<h3 class="mb-4">
|
||||
{{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}}
|
||||
<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
|
||||
<button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
|
||||
</h3>
|
||||
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
|
||||
<div class="col-12">
|
||||
|
|
|
@ -17,23 +17,4 @@
|
|||
|
||||
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: 30px;
|
||||
background-color: var(--secondary-color);
|
||||
border: 1px solid transparent;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 200ms;
|
||||
transition-delay: 50ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
&:disabled{
|
||||
background-color: #CBCBCB;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
|
@ -6,16 +6,16 @@
|
|||
<app-navigation-breadcrumb />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'TENANT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'TENANT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="!isNew">
|
||||
<button mat-button class="action-btn" type="button" (click)="delete()">
|
||||
<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'TENANT-EDITOR.ACTIONS.DELETE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="canSave">
|
||||
<button mat-button class="action-btn" (click)="formSubmit()">
|
||||
<button mat-button class="rounded-btn primary" (click)="formSubmit()">
|
||||
<mat-icon>save</mat-icon>
|
||||
{{'TENANT-EDITOR.ACTIONS.SAVE' | translate}}
|
||||
</button>
|
||||
|
|
|
@ -17,23 +17,4 @@
|
|||
|
||||
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: 30px;
|
||||
background-color: var(--secondary-color);
|
||||
border: 1px solid transparent;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 200ms;
|
||||
transition-delay: 50ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
&:disabled{
|
||||
background-color: #CBCBCB;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
|
@ -6,16 +6,16 @@
|
|||
<app-navigation-breadcrumb />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'USAGE-LIMIT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'USAGE-LIMIT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="canDelete">
|
||||
<button mat-button class="action-btn" type="button" (click)="delete()">
|
||||
<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'USAGE-LIMIT-EDITOR.ACTIONS.DELETE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="canSave">
|
||||
<button mat-button class="action-btn" (click)="formSubmit()">
|
||||
<button mat-button class="rounded-btn primary" (click)="formSubmit()">
|
||||
<mat-icon>save</mat-icon>
|
||||
{{'USAGE-LIMIT-EDITOR.ACTIONS.SAVE' | translate}}
|
||||
</button>
|
||||
|
|
|
@ -17,23 +17,4 @@
|
|||
|
||||
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: 30px;
|
||||
background-color: var(--secondary-color);
|
||||
border: 1px solid transparent;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 200ms;
|
||||
transition-delay: 50ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
&:disabled{
|
||||
background-color: #CBCBCB;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col mt-2">
|
||||
<button mat-raised-button [disabled]="inProgressSendButton" (click)="send()" type="button" class="invite-btn">{{'USER-INVITE-TO-TENANT-DIALOG.ACTIONS.INVITE' | translate}}</button>
|
||||
<button mat-button [disabled]="inProgressSendButton" (click)="send()" type="button" class="rounded-btn primary-inverted invite-btn">{{'USER-INVITE-TO-TENANT-DIALOG.ACTIONS.INVITE' | translate}}</button>
|
||||
<mat-error *ngIf="formGroup.get('users').hasError('backendError')">{{formGroup.get('users').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('users').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</div>
|
||||
|
|
|
@ -81,29 +81,6 @@
|
|||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.invite-btn-disabled {
|
||||
min-width: 6.64em;
|
||||
height: 2.93em;
|
||||
background: #ffffff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.35px;
|
||||
color: #b5b5b5;
|
||||
margin-bottom: 0.25em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.invite-btn:hover {
|
||||
background: var(--primary-color);
|
||||
|
|
Loading…
Reference in New Issue