docs/_scss/_notes.scss

@use "sass:color";

//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
.restricted: Purple, used to indicate features that require paid plans
[no class]: Blue, the default

*/

@mixin notification($bg-color, $header-color, $body-text-color, $left-border-color, $icon) {
  background-color:  $bg-color;
  border-left-color: $left-border-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;

    &::before {
      font-family: FontAwesome;
      content:     "#{$icon} \00a0";
    }
  }

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



blockquote {
  body.night & {
    // DARK THEME

    &:not(.important):not(.warning):not(.restricted) {
      @include notification(
        $bg-color: change-color($marine-10, $alpha: 0.2),
        $left-border-color: $blue-80,
        $header-color: $marine-10,
        $body-text-color: $marine-10,
        $icon: "\f058"
      );
    }

    &.important {
      @include notification(
        $bg-color: change-color($orange-60, $alpha: 0.4),
        $left-border-color: $orange-90,
        $header-color: $orange-20,
        $body-text-color: $orange-20,
        $icon: "\f06a"
      );
    }

    &.warning {
      @include notification(
        $bg-color: change-color($red-60, $alpha: 0.3),
        $left-border-color: $red-40,
        $header-color: $red-10,
        $body-text-color: $red-10,
        $icon: "\f057"
      );
    }

    &.restricted {
      @include notification(
        $bg-color: change-color($purple-60, $alpha: 0.44),
        $left-border-color: $purple-70,
        $header-color: $purple-10,
        $body-text-color: $purple-10,
        $icon: "\f135"
      );
    }
  }

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

    &:not(.important):not(.warning):not(.restricted) {
      @include notification(
        $bg-color: change-color($marine-10, $alpha: 0.2),
        $left-border-color: $blue-80,
        $header-color: $blue-80,
        $body-text-color: inherit,
        $icon: "\f058"
      );
    }

    &.important {
      @include notification(
        $bg-color: change-color($orange-10, $alpha: 0.4),
        $left-border-color: $orange-90,
        $header-color: $orange-90,
        $body-text-color: inherit,
        $icon: "\f06a"
      );
    }

    &.warning {
      @include notification(
        $bg-color: change-color($red-10, $alpha: 0.2),
        $left-border-color: $red-40,
        $header-color: $red-40,
        $body-text-color: inherit,
        $icon: "\f057"
      );
    }

    &.restricted {
      @include notification(
        $bg-color: change-color($purple-20, $alpha: 0.2),
        $left-border-color: $purple-70,
        $header-color: $purple-50,
        $body-text-color: inherit,
        $icon: "\f135"
      );
    }
  }
}

/* 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;
    }
  }
}