Angular Material Toolbar Density Generator Mixin -- Based on Official Material Styles

_angular-material-toolbar-density.generator.scss

@import '~@angular/material/theming';



@mixin toolbar-density($density-config, $density-scale: default) {
  $height-desktop: _mat-density-prop-value(
    $density-config,
    $density-scale,
    height
  );
  $height-mobile: _mat-density-prop-value(
    $density-config,
    $density-scale,
    height
  );

  @include _mat-density-legacy-compatibility() {
    // Set the default height for the toolbar.
    @include _toolbar-height($height-desktop);

    // As per specs, toolbars should have a different height in mobile devices. This has been
    // specified in the old guidelines and is still observable in the new specifications by
    // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
    @media ($mat-xsmall) {
      @include _toolbar-height($height-mobile);
    }
  }
} // @toolbar-density



@mixin _toolbar-height($height) {
  &.mat-toolbar-multiple-rows {
    min-height: $height;
  }
  .mat-toolbar-row,
  &.mat-toolbar-single-row {
    height: $height;
  }
} // @_toolbar-height

_angular-material-toolbar-density.variables.scss

// configure alternate toolbar densities
$toolbar-default-row-height: 4rem;
$toolbar-maximum-row-height: 5rem;
$toolbar-minimum-row-height: 2.75rem;
$toolbar-density-config: (
  height: (
    default: $toolbar-default-row-height,
    maximum: $toolbar-maximum-row-height,
    minimum: $toolbar-minimum-row-height,
  ),
); // $toolbar-density-config

example.scss

@import './angular-material-toolbar-density.variables';
@import './angular-material-toolbar-density.generator';

.mat-toolbar {
  // apply alternate toolbar densities
  @include toolbar-density($toolbar-density-config);

  &.max-density,
  &.maximum-density {
    @include toolbar-density($toolbar-density-config, minimum);
  }

  &.min-density,
  &.minimum-density {
    @include toolbar-density($toolbar-density-config, maximum);
  }
} // .mat-toolbar