fix toggle button styling
This commit is contained in:
parent
289587162a
commit
dfcbe5aa36
|
@ -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>
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
.filter-button{
|
||||
padding-top: .6rem;
|
||||
padding-bottom: .6rem;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
::ng-deep .mdc-form-field {
|
||||
|
|
|
@ -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>
|
||||
<span class="mt-1">{{'DESCRIPTION-LISTING.ACTIONS.ADD-REFERENCE-TYPE' | translate}}</span>
|
||||
</button>
|
||||
<span>
|
||||
<span class="mt-1">{{'DESCRIPTION-LISTING.ACTIONS.ADD-REFERENCE-TYPE' | translate}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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),
|
||||
|
|
Loading…
Reference in New Issue