CaffGeek/MBACNationals

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/theming';

// Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');

// always include only once per project
@include mat-core();

// import our custom theme
@import 'theme.scss';

html, body { 
    margin: 0;
    height: calc(100%);
}

// see: https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1
@mixin customTheme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);

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

    h1, h2, h3, h4, h5, h6  {
        color: mat-color($primary) !important;
        text-transform: uppercase;
    }

    h4 {
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: mat-color($primary, 900);
    }

    button {
        border-radius: 0px;
    }

    a {
        text-decoration: none;
        color: mat-color($accent, 700) !important;
    }

    .sidebar {
        .mat-list-item-content {
            color: mat-color($accent, 700) !important;
            text-transform: uppercase;
            font-weight: 700;
        }
    }

    .accent {
        background: mat-color($accent, 50) !important;
    }

    .selected {
        background: mat-color($primary, 300) !important;
    }

    .negative {
        color: red !important;
    }

    .win {
        background: lightgreen !important;
    }
    
    .loss {
        background: pink !important;
    }
    
    .tie {
        background: lightgrey !important;
    }

    mat-toolbar {
        a {
            color: white !important;
        }
    }

    mat-card {
        margin: .5em;
        border-radius: 0px;
        background: mat-color($accent, 50) !important;
        
        mat-card-header {
            margin-left: 0;

            div.mat-card-header-text {
                margin-left: 0;

                mat-card-title {
                    font-family: 'Roboto';
                    font-size: 1.75em;
                    color: mat-color($primary);
                    text-transform: uppercase;
                    letter-spacing: 0em;
                }
            }
        }
    }

}

// Create yearly themes (palette's in theme.scss)
// TODO: CHAD: Create -dark versions
.default { @include customTheme($default); }
.theme-2020 { @include customTheme(mat-light-theme($palette-deep-orange, $palette-blue-grey, $palette-warning)); }
.theme-2019 { @include customTheme(mat-light-theme($palette-blue, $palette-blue-grey, $palette-warning)); }
.theme-2018 { @include customTheme(mat-light-theme($palette-maroon, $palette-blue-grey, $palette-warning)); }
.theme-2017 { @include customTheme(mat-light-theme($palette-green, $palette-blue-grey, $palette-warning)); }
.theme-2016 { @include customTheme(mat-light-theme($palette-light-green, $palette-blue-grey, $palette-warning)); }
.theme-2015 { @include customTheme(mat-light-theme($palette-light-blue, $palette-blue-grey, $palette-warning)); }
.theme-2014 { @include customTheme(mat-light-theme($palette-red, $palette-blue-grey, $palette-warning)); }