fix toggle button styling

This commit is contained in:
mchouliara 2024-10-14 17:40:57 +03:00
parent 289587162a
commit dfcbe5aa36
4 changed files with 19 additions and 7 deletions

View File

@ -1,19 +1,19 @@
<div class="d-flex align-items-center gap-1-rem">
<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
</button>
<mat-menu #filterMenu>
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="container-fluid pt-2 pb-2" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
</div>
<div class="col-auto">
<button color="accent" mat-button (click)="clearFilters()">
<button mat-button (click)="clearFilters()">
{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
</button>
</div>

View File

@ -15,6 +15,7 @@
.filter-button{
padding-top: .6rem;
padding-bottom: .6rem;
color: #000000;
}
::ng-deep .mdc-form-field {

View File

@ -92,12 +92,10 @@
<div class="col-10">
<div class="row align-items-center">
<button mat-icon-button color="primary" [disabled]="false" (click)="addReferenceType()">
<button mat-button color="primary" [disabled]="false" (click)="addReferenceType()">
<mat-icon>add_circle</mat-icon>
</button>
<span>
<span class="mt-1">{{'DESCRIPTION-LISTING.ACTIONS.ADD-REFERENCE-TYPE' | translate}}</span>
</span>
</button>
</div>
</div>
</div>

View File

@ -110,6 +110,9 @@
@import './material-theme.scss';
.mat-mdc-menu-panel{
background-color: #ffffff !important;
}
//m3 styles overwrites
.mat-mdc-mini-fab {
border-radius: 50% !important;
@ -133,6 +136,16 @@
.mat-divider:not(.mat-divider-vertical){
border-top-color: rgba(0, 0, 0, .12) !important;
}
.mdc-switch.mdc-switch--checked{
.mdc-switch__handle {
.mdc-switch__shadow{
background-color: var(--sys-on-tertiary-fixed-variant);
}
.mdc-switch__icon--on{
fill: var(--sys-tertiary);
}
}
}
// $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme-primary,
// accent: $mat-theme-accent,
// warn: $mat-theme-warn),