docs/_scss/_notes.scss

//noinspection CssNoGenericFontName

/*

These rules control the display of notes/notifications/alerts. They can be used like so:

> This is a paid feature
>
> Docker Hub Vulnerability Scanning is available for developers subscribed to a Pro or a Team plan. For more information about the pricing plans, see [Docker Pricing](https://www.docker.com/pricing?utm_source=docker&utm_medium=webreferral&utm_campaign=docs_driven_upgrade)
{: .restricted }

(The first line is always treated as a header, unless it's the only line)

The available classes are:

.important: Yellow
.warning: Red/orange
.tip: Green
.restricted: Purple, used to indicate features that require paid plans
[no class]: Blue, the default

*/

@mixin notification($bg-color, $header-color, $body-text-color, $icon) {
  background-color:  $bg-color;
  font-size:         unset; // override bootstrap font-size for blockquotes

  // The first child will generally be a header (e.g. "Note" or "This is an experimental feature"),
  // but we have some notes that don't have headers; if there's only one child of the note,
  // assume it's not a header
  > p:first-child:not(:only-child) {
    color:       $header-color;
    font-weight: 700;
    margin-top:  0;

    // https://fontawesome.com/docs/web/setup/upgrade/pseudo-elements
    &::before {
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      font: var(--fa-font-solid);
      content: "#{$icon} \00a0";
    }
  }

  > p:only-child, > p:not(:first-child) {
    color: $body-text-color;
  }

  a {
    text-decoration: underline;
  }
}



blockquote {
  html.night & {
    // DARK THEME

    &:not(.important):not(.warning):not(.restricted):not(.experimental):not(.tip) {
      @include notification(
        $bg-color: $dark-blue-200,
        $header-color: $white,
        $body-text-color: $white,
        $icon: "\f06a"
      );
      a {
        color: $dark-blue-800;
      };
    }

    &.important {
      @include notification(
        $bg-color: $dark-amber-300,
        $header-color: $white,
        $body-text-color: $white,
        $icon: "\f06a"
      );
        a {
          color: $dark-blue-200;
        }
    }

    &.warning {
      @include notification(
        $bg-color: $dark-red-200,
        $header-color: $white,
        $body-text-color: $white,
        $icon: "\f06a"
      );
    }

    &.restricted {
      @include notification(
        $bg-color: $dark-viole-200,
        $header-color: $white,
        $body-text-color: $white,
        $icon: "\f135"
      );
    }

    &.experimental {
      @include notification(
        $bg-color: $dark-blue-200,
        $header-color: $white,
        $body-text-color: $white,
        $icon: "\f492"
      );
    }

    &.tip {
      @include notification(
        $bg-color: $dark-green-200,
        $header-color: $white,
        $body-text-color: $white,
        $icon: "\f164"
      );
    }
  }

  html:not(.night) & {
    // LIGHT THEME

    &:not(.important):not(.warning):not(.restricted):not(.experimental):not(.tip) {
      @include notification(
        $bg-color: $light-blue-100,
        $header-color: $light-blue-600,
        $body-text-color: inherit,
        $icon: "\f05a"
      );
    }

    &.important {
      @include notification(
        $bg-color: $light-amber-100,
        $header-color: $dark-amber-300,
        $body-text-color: inherit,
        $icon: "\f06a"
      );
    }

    &.warning {
      @include notification(
        $bg-color: $light-red-300,
        $header-color: $light-red-700,
        $body-text-color: inherit,
        $icon: "\f06a"
      );
    }

    &.restricted {
      @include notification(
        $bg-color: $light-viole-200,
        $header-color: $light-viole-600,
        $body-text-color: inherit,
        $icon: "\f135"
      );
    }

    &.experimental {
      @include notification(
        $bg-color: $light-blue-100,
        $header-color: $light-blue-500,
        $body-text-color: inherit,
        $icon: "\f492"
      );
    }

    &.tip {
      @include notification(
        $bg-color: $light-green-200,
        $header-color: $light-green-600,
        $body-text-color: inherit,
        $icon: "\f164"
      )
    }
  }
}

/* For Bootstrap badges */
span {
  &.badge {
    border-radius:  .25rem;
    color:          #fff;
    display:        inline-block;
    font-size:      75%;
    font-weight:    bold;
    line-height:    1;
    padding:        .25em .4em;
    text-align:     center;
    vertical-align: baseline;
    white-space:    nowrap;

    &.badge-info {
      background-color: $note-color;
    }

    &.badge-danger {
      background-color: $warning-color;
    }

    &.badge-warning {
      background-color: $important-color;
    }
  }
}