feat: add tip callout (#16125)

Signed-off-by: David Karlsson <david.karlsson@docker.com>
This commit is contained in:
David Karlsson 2022-11-09 11:01:01 +01:00 committed by GitHub
parent 4b927b0e64
commit d039f2e4b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 12 deletions

View File

@ -15,6 +15,7 @@ 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
@ -56,7 +57,7 @@ blockquote {
html.night & {
// DARK THEME
&:not(.important):not(.warning):not(.restricted):not(.experimental) {
&:not(.important):not(.warning):not(.restricted):not(.experimental):not(.tip) {
@include notification(
$bg-color: $dark-palette-blue-200,
$header-color: $white-0,
@ -100,12 +101,21 @@ blockquote {
$icon: "\f492"
);
}
&.tip {
@include notification(
$bg-color: $dark-palette-green-200,
$header-color: $white-0,
$body-text-color: $white-0,
$icon: "\f164"
);
}
}
html:not(.night) & {
// LIGHT THEME
&:not(.important):not(.warning):not(.restricted):not(.experimental) {
&:not(.important):not(.warning):not(.restricted):not(.experimental):not(.tip) {
@include notification(
$bg-color: $light-palette-blue-100,
$header-color: $light-palette-blue-500,
@ -149,6 +159,15 @@ blockquote {
$icon: "\f492"
);
}
&.tip {
@include notification(
$bg-color: $light-palette-green-100,
$header-color: $light-palette-green-500,
$body-text-color: inherit,
$icon: "\f164"
)
}
}
}

View File

@ -7,20 +7,27 @@ toc_max: 3
We support these broad categories of callouts:
- Notes (no Liquid tag required)
- Tips, which use the `{: .tip }` tag
- Important, which use the `{: .important}` tag
- Warning , which use the `{: .warning}` tag
## Examples
> **Note**
>
> Note the way the `get_hit_count` function is written. This basic retry
> loop lets us attempt our request multiple times if the redis service is
> not available. This is useful at startup while the application comes
> online, but also makes our application more resilient if the Redis
> service needs to be restarted anytime during the app's lifetime. In a
> cluster, this also helps handling momentary connection drops between
> nodes.
> **Note**
>
> Note the way the `get_hit_count` function is written. This basic retry
> loop lets us attempt our request multiple times if the redis service is
> not available. This is useful at startup while the application comes
> online, but also makes our application more resilient if the Redis
> service needs to be restarted anytime during the app's lifetime. In a
> cluster, this also helps handling momentary connection drops between
> nodes.
> **Tip**
>
> For a smaller base image, use `alpine`.
{: .tip }
> **Important**
>
@ -53,6 +60,11 @@ We support these broad categories of callouts:
> cluster, this also helps handling momentary connection drops between
> nodes.
> **Tip**
>
> For a smaller base image, use `alpine`.
{: .tip }
> **Important**
>
> Treat access tokens like your password and keep them secret. Store your
@ -69,4 +81,4 @@ We support these broad categories of callouts:
>
> The Docker Dashboard does _not_ remove volumes when you delete the app stack.
{: .warning}
```
```