CODEWITHSUNDEEP
angularsassangular-material2
John Siu
John Siu

Reputation: 5092

How to override $md-toolbar-min-height in Material2

I am trying out Material 2 Sample Program

The default height of md-toobar is 64px, and is defined in
material toobar.scss

@import '../core/style/variables';

$md-toolbar-min-height: 64px !default;
$md-toolbar-font-size: 20px !default;
$md-toolbar-padding: 16px !default;

How can I override it to 32px in sample app material2-app-theme.scss?

@import '~@angular/material/core/theming/all-theme';

// NOTE: Theming is currently experimental and not yet publically released!

@include md-core();

$primary: md-palette($md-deep-purple);
$accent:  md-palette($md-amber, A200, A100, A400);

$theme: md-light-theme($primary, $accent);

@include angular-material-theme($theme);

.m2app-dark {
  $dark-primary: md-palette($md-pink, 700, 500, 900);
  $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
  $dark-warn:    md-palette($md-deep-orange);

  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}

Upvotes: 1

Views: 2804

Answers (2)

chris cooley
chris cooley

Reputation: 1383

I know this question is kinda old but we had a similar issue we needed to change colors and other global styles to fit our brand. Thought I would share our variation on the answer above. We wanted to avoid "!important" in our sass and be able to reuse styles as we built out the app, so we added override selectors to our global sass file. Then we were able to just added the override selectors to any md elements we wanted to override. This allowed us to be more specific about what we were overriding.

Example below shows a background color and toolbar height override. Still going against the framework but from a branding perspective you at the least need control of colors. Also note if you want to add new selectors to the override sass you can just append to the md selector list.

<!-- md-toolbar example -->
<md-toolbar class="my-app-toolbar my-app-bg-color"></md-toolbar>

// override bg-color for md-button, md-card-content, md-toolbar
.md-button,
md-card-content,
md-toolbar {
  &.my-app-bg-color {
    background-color: #00acc1;
  }
}

// override md-toolbar
md-toolbar {
  &.my-app-toolbar {
    min-height: 32px;
    height: 32px;
  }
}

Upvotes: 1

nlyk
nlyk

Reputation: 331

You cannot overide the specific variables because there already burned in the material2 component. Scss compilation has already performed for md-toolbar specific style. You can do something like:

md-toolbar {
  min-height: 32px !important;
}
md-toolbar md-toolbar-row {
  height: 32px !important;
}

in your custom theme. I cannot find any elegant solution.

Upvotes: 3

Related Questions