mirror of https://github.com/docker/docs.git
157 lines
3.7 KiB
SCSS
157 lines
3.7 KiB
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
|
|
.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;
|
|
|
|
&::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),
|
|
$header-color: $marine-10,
|
|
$body-text-color: $marine-10,
|
|
$icon: "\f058"
|
|
);
|
|
}
|
|
|
|
&.important {
|
|
@include notification(
|
|
$bg-color: change-color($orange-60, $alpha: 0.4),
|
|
$header-color: $orange-20,
|
|
$body-text-color: $orange-20,
|
|
$icon: "\f06a"
|
|
);
|
|
}
|
|
|
|
&.warning {
|
|
@include notification(
|
|
$bg-color: change-color($red-60, $alpha: 0.3),
|
|
$header-color: $red-10,
|
|
$body-text-color: $red-10,
|
|
$icon: "\f057"
|
|
);
|
|
}
|
|
|
|
&.restricted {
|
|
@include notification(
|
|
$bg-color: change-color($purple-60, $alpha: 0.44),
|
|
$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: #E8F4FD, // Hardcoding this variable temporary till we migrate to the new color pallette
|
|
$header-color: $blue-80,
|
|
$body-text-color: inherit,
|
|
$icon: "\f05a"
|
|
);
|
|
}
|
|
|
|
&.important {
|
|
@include notification(
|
|
$bg-color: $orange-10,
|
|
$header-color: $orange-100,
|
|
$body-text-color: inherit,
|
|
$icon: "\f06a"
|
|
);
|
|
}
|
|
|
|
&.warning {
|
|
@include notification(
|
|
$bg-color: $red-10,
|
|
$header-color: $red-50,
|
|
$body-text-color: inherit,
|
|
$icon: "\f06a"
|
|
);
|
|
}
|
|
|
|
&.restricted {
|
|
@include notification(
|
|
$bg-color: $purple-10,
|
|
$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;
|
|
}
|
|
}
|
|
}
|