weathermen/soundstorm

View on GitHub
app/assets/stylesheets/components/flash.scss

Summary

Maintainability
Test Coverage
.flash-messages {}
.flash-message {
  display: grid;
  grid-template-columns: 35fr 1fr;
}
  .flash-message--notice {
    background: green;
    color: white;
  }
  .flash-message--alert {
    background: darken(red, 20%);
    color: white;
  }
  .flash-message--closed {
    animation: fadeOut 1s both;
  }

.flash-message__text {
  text-align: center;

  p {
    padding-left: 40px;
  }
}
.flash-message__close {
  p {
    margin: 0 auto;
    padding: 15px;
  }

  a {
    text-decoration: none;
    color: black;

    &:hover {
      color: gray;
    }
  }
}
.flash-message__icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-times);
  }
}