docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13158 from mark-dr/restyle-alerts 

Restyle notification banners
This commit is contained in:
Usha Mandya 2021-07-12 10:49:06 +01:00 committed by GitHub
parent 03971ffdf6 a23f70d048
commit 0e3f31e807
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 114 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
_scss/_night-mode.scss
View File

@ -68,19 +68,6 @@ body.night {
background-color: #344658;
border: 1px solid #192837;
}
blockquote {
color: $note-color-night;
background: $note-bg-color-night;
&.warning, &.warning p:first-child {
color: $warning-color-night !important;
}
&.important {
border-left-color: #f5ac45 !important;
}
&.important, &.important p:first-child {
color: $important-color-night !important;
}
}
table {
border: 1px solid #1b1a1a;
color: #cbdbe6;

142
_scss/_notes.scss
View File

@ -1,51 +1,137 @@
//noinspection CssNoGenericFontName
blockquote {
background-color: $note-bg-color;
border-left-color: $note-color;
/*
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
> p:first-child {
color: $note-color;
// 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: "\f058 \00a0";
content: "#{$icon} \00a0";
}
}
// Maintain backwards compatibility with old note style
> p:only-child {
color: inherit;
font-weight: inherit;
> p:only-child, > p:not(:first-child) {
color: $body-text-color;
}
}
&::before {
content: none;
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"
);
}
}
&.important {
border-left-color: $important-color;
body:not(.night) & {
// LIGHT THEME
> p:first-child {
color: $important-color;
&::before {
content: "\f06a \00a0";
}
&: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"
);
}
}
&.warning {
border-left-color: $warning-color;
&.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"
);
}
> p:first-child {
color: $warning-color;
&.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"
);
}
&::before {
content: "\f057 \00a0";
}
&.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"
);
}
}
}