open-learning-exchange/planet

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
@import './app/_variables';

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

// Create sub-themes for the different sections which change the accent color.
$accent-map: (
  library: mat-palette($mat-pink, $accent-hue),
  courses: mat-palette($mat-orange, $accent-hue),
  meetups: mat-palette($mat-purple, $accent-hue),
  teams: mat-palette($mat-green, $accent-hue)
);

@each $section in library, courses, meetups, teams {
  $accent-palette: map-get($accent-map, #{$section});
  $theme: mat-light-theme($planet-app-primary, $accent-palette, $planet-app-warn);
  .planet-#{$section}-theme {
    @include angular-material-theme($theme);

    .accent-color {
      background-color: mat-color($accent-palette, $accent-hue);
      color: mat-contrast($accent-palette, $accent-hue);
    }
  }
}

// Custom themed material styles below

.mat-button-toggle-checked {
  background-color: mat-color($planet-app-primary, $light-hue);
  color: mat-contrast($planet-app-primary, $light-hue);
}

.mat-raised-button[color="primary"] {
  transition: background-color 0.3s ease;
  &:hover {
    background-color: mat-color($planet-app-primary, $dark-hue);
  }
}

.mat-raised-button[color="primary"][disabled] {
  pointer-events: none;
}