Browse Source

Improve style of dense selectors

pull/7856/head
Thomas Kaul 1 month ago
parent
commit
5924fe37b0
  1. 2
      apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
  2. 9
      apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.scss
  3. 12
      apps/client/src/styles/theme.scss
  4. 5
      libs/ui/src/lib/activities-table/activities-table.component.html
  5. 9
      libs/ui/src/lib/activities-table/activities-table.component.scss

2
apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html

@ -12,7 +12,7 @@
<div class="col-md-6 col-xs-12 d-flex justify-content-end"> <div class="col-md-6 col-xs-12 d-flex justify-content-end">
<mat-form-field <mat-form-field
appearance="outline" appearance="outline"
class="w-100 without-hint" class="gf-form-field-dense w-100 without-hint"
color="accent" color="accent"
> >
<mat-label i18n>Compare with...</mat-label> <mat-label i18n>Compare with...</mat-label>

9
apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.scss

@ -1,15 +1,6 @@
@use '@angular/material' as mat;
:host { :host {
display: block; display: block;
@include mat.form-field-overrides(
(
container-height: 2rem,
container-vertical-padding: 0.33rem
)
);
.chart-container { .chart-container {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;

12
apps/client/src/styles/theme.scss

@ -149,6 +149,14 @@ $gf-typography: (
regular-weight: 400 regular-weight: 400
); );
$_dense-form-field-theme: mat.define-theme(
(
density: (
scale: -4
)
)
);
.theme-light { .theme-light {
color-scheme: light; color-scheme: light;
@ -412,6 +420,10 @@ $gf-typography: (
) )
); );
.gf-form-field-dense {
@include mat.form-field-density($_dense-form-field-theme);
}
.mat-accent { .mat-accent {
@include mat.button-overrides( @include mat.button-overrides(
( (

5
libs/ui/src/lib/activities-table/activities-table.component.html

@ -3,7 +3,10 @@
> >
<div class="d-none d-lg-flex"> <div class="d-none d-lg-flex">
@if (hasPermissionToFilterByType && activityTypeOptions().length > 1) { @if (hasPermissionToFilterByType && activityTypeOptions().length > 1) {
<mat-form-field appearance="outline" class="without-hint"> <mat-form-field
appearance="outline"
class="gf-form-field-dense without-hint"
>
<mat-label i18n>Type</mat-label> <mat-label i18n>Type</mat-label>
<mat-select multiple [formControl]="typesFilter"> <mat-select multiple [formControl]="typesFilter">
@for (activityType of activityTypeOptions(); track activityType.key) { @for (activityType of activityTypeOptions(); track activityType.key) {

9
libs/ui/src/lib/activities-table/activities-table.component.scss

@ -1,12 +1,3 @@
@use '@angular/material' as mat;
:host { :host {
display: block; display: block;
@include mat.form-field-overrides(
(
container-height: 2rem,
container-vertical-padding: 0.33rem
)
);
} }

Loading…
Cancel
Save