rx/presenters

$mdc-theme-primary: #5488b2;
$mdc-theme-secondary: #E58D36;
$mdc-theme-background: #fff;

$v-theme-error-message: #d50000;

$v-header-background: #263138;
$v-header-color: #839098;

$v-drawer-background: #37424a;
$v-drawer-color: #71818c;

$v-title-background: #EBF0F4;

// Font size variables for size and naming
// consistency with default Material sizes
// See @material/typography
$mdc-headline1-font-size: 6rem;      // 96sp
$mdc-headline2-font-size: 3.75rem;   // 60sp
$mdc-headline3-font-size: 3rem;      // 48px
$mdc-headline4-font-size: 2.125rem;  // 34sp
$mdc-headline5-font-size: 1.5rem;    // 24sp
$mdc-headline6-font-size: 1.25rem;   // 20sp
$mdc-subtitle1-font-size: 1rem;      // 16sp
$mdc-subtitle2-font-size: .875rem;   // 14sp
$mdc-body1-font-size:     1rem;      // 16sp
$mdc-body2-font-size:     .875rem;   // 14sp
$mdc-caption-font-size:   .75rem;    // 12sp
$mdc-button-font-size:    .875rem;   // 14sp
$mdc-overline-font-size:  .75rem;    // 12sp

// Variables for matching Material blue-gray-orange theme
$v-input-border-radius: 4px;
$v-input-border-color: rgba(0, 0, 0, 0.24);
$v-input-hover-border-color: rgba(0, 0, 0, 0.87);
$v-input-focus-border-color: $mdc-theme-primary;

.mdl-layout__header {
  background-color: $v-title-background;
  .mdl-layout__header-row {
    background-color: $v-header-background;
    color: $v-header-color;
  }
  .mdl-layout__drawer-button {
    background-color: $v-drawer-background;
  }
}

h1.v-page-title {
  background-color: $v-title-background;
  color: $v-drawer-color;
  margin: 0px;
  padding: 24px;
  font-size: $mdc-headline4-font-size;
  i {
    font-size: $mdc-headline4-font-size;
    vertical-align: middle;
  }
}

.mdl-layout__drawer {
  background-color: $v-drawer-background;
  border-right: 1px solid $v-drawer-background;
  color: $v-drawer-color;
  .mdl-navigation {
    .mdl-navigation__link {
      color: $v-drawer-color;
      &.v-menu-item__selected {
        color: lighten($v-drawer-color, 20%);
        font-weight: bold;
      }
      &:hover {
        background-color: $v-drawer-background;
        color: lighten($v-drawer-color, 20%);
      }
    }
  }
}