.flash {
  .container {
    margin-bottom: 10px;

    .alert {
      padding: 5px 0;
      &.alert-success {
        background: $success-background;
        color: white;
      }
    }
  }
}

.fixed-flash {
  position: fixed;
  top: 0; left: 0; right: 0;
  text-align: center;
}

.fixed-flash-inner {
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: inline-block;
  padding: 5px 20px;
  margin-top: 15px;

  @include fadeInDown(0.6s);

  p {
    margin: 5px 0;
  }
}

.alert-danger {
  .fixed-flash-inner {
    background: $red;
    color: white;
  }
}

.flash {

  .alert {
    @mixin alert-whitespace {
      margin-bottom: 10px;
      padding: 5px 0;
    }

    &.alert-success .container,
    &.alert-success .fixed-flash-inner {
      background: $success-background;
      color: white;
    }

    &.alert-danger .container,
    &.alert-danger .fixed-flash-inner {
      background: $red;
      color: white;
    }

    // regular flash message container, displayed full width
    // almost on top of the page
    .container {
      margin-bottom: 10px;
      padding: 5px 0 5px 10px;
    }

    // fixed positioned flash message container, displayed at the very top of the page
    // as wide as the text, centered
    .fixed-flash {
      position: fixed;
      top: 0; left: 0; right: 0;
      text-align: center;

      .fixed-flash-inner {
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        padding: 5px 20px;
        margin-top: 15px;

        @include fadeInDown(0.6s);

        p {
          margin: 5px 0;
        }
      }
    }
  }
}




Fix and cleanup flash message styles
Fix and cleanup flash message styles
