AlchemyCMS/alchemy_cms

View on GitHub
app/assets/stylesheets/alchemy/notices.scss

Summary

Maintainability
Test Coverage
alchemy-message {
  display: block;
  border-width: $default-border-width;
  border-style: $default-border-style;
  border-radius: $default-border-radius;
  position: relative;
  padding: 8px 16px 8px 32px;
  margin-bottom: 8px;
  text-align: left;
  min-height: 2.6em;
  word-break: break-word;
  line-height: 1.5;

  &[type="footnote"] {
    font-size: $small-font-size;
    margin: 16px;
  }

  &[type="notice"] {
    border-color: $success_border_color;
    color: $success_text_color;
    background-color: $success_background_color;
  }

  &[type="hint"] {
    background-color: $hint-background-color;
    border-color: $hint-background-color;
    color: $hint-text-color;
  }

  &[type="info"] {
    background-color: $info_background_color;
    border-color: $info_border_color;
    color: $info_text_color;
  }

  &[type="error"] {
    background-color: $error_background_color;
    border-color: $error_border_color;
    color: $error_text_color;
  }

  &[type="warning"],
  &[type="warn"],
  &[type="alert"] {
    background-color: $warning_background_color;
    border-color: $warning_border_color;
    color: $warning_text_color;
  }

  alchemy-icon {
    position: absolute;
    left: 2 * $default-margin;
    top: 9px;
    color: inherit;

    .icon {
      fill: currentColor;
    }
  }

  h1 {
    font-size: 1.3rem;
    line-height: 1.1;
  }

  h1,
  h2,
  h3 {
    margin-top: 0;
  }

  a {
    text-decoration: underline;

    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }

  ol {
    margin: 0 0 8px;
    padding-left: 20px;

    li {
      text-indent: 0;
      margin-bottom: 4px;
    }
  }
}