elanalynn/book-club

// Place all the styles related to the dashboard controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import './variables';

.dash {
  border-top: 2px solid $primary;
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 12em auto;

  ul.dash-menu {
    grid-column: 1/2;
    padding-left: 0;
    list-style: none;
    background: $primary;
    height: 100vh;
  
    li {
      padding: 2em 4em;
      box-shadow: 0 2px 8px $primary-dark;
  
      a {
        color: $white;
        text-decoration: none;
        width: 100%;
        height: 100%;
      }
  
      &:hover {
        background: $success;
        box-shadow: 0 1px 6px $primary-dark;
  
        a {
          color: $secondary;
        }
      }
    }
  }

  .main {
    grid-column: 2/3;

    h1, h2, h3 {
      margin: 1em;
      text-align: center;
    }
  }
}