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

Define new theme for notifications

This commit is contained in:
Mark H 2021-07-09 14:39:11 +01:00
parent 79e36c14a0
commit d67f803770
2 changed files with 74 additions and 23 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;

84
_scss/_notes.scss
View File

@ -1,16 +1,18 @@
@use "sass:color";
//noinspection CssNoGenericFontName
@mixin notification($bg-color, $primary-color, $icon) {
@mixin notification($bg-color, $header-color, $body-text-color, $left-border-color, $icon) {
background-color: $bg-color;
border-left-color: $primary-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: $primary-color;
color: $header-color;
font-weight: 700;
margin-top: 0;
@ -19,19 +21,81 @@
content: "#{$icon} \00a0";
}
}
> p:only-child, > p:not(:first-child) {
color: $body-text-color;
}
}
blockquote {
:not(.important):not(.warning) {
@include notification($note-bg-color, $note-color, "\f058");
body.night & {
// DARK THEME
&:not(.important):not(.warning) {
@include notification(
$bg-color: change-color($marine-10, $alpha: 0.2),
$left-border-color: #367AC2,
$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: #A16925,
$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: #C0534B,
$header-color: $red-10,
$body-text-color: $red-10,
$icon: "\f057"
);
}
}
&.important {
@include notification($note-bg-color, $important-color, "\f06a");
}
body:not(.night) & {
// LIGHT THEME
&.warning {
@include notification($note-bg-color, $warning-color, "\f057");
&:not(.important):not(.warning) {
@include notification(
$bg-color: change-color($marine-10, $alpha: 0.2),
$left-border-color: #367ac2,
$header-color: #367ac2,
$body-text-color: inherit,
$icon: "\f058"
);
}
&.important {
@include notification(
$bg-color: change-color($orange-10, $alpha: 0.4),
$left-border-color: #A16925,
$header-color: #A16925,
$body-text-color: inherit,
$icon: "\f06a"
);
}
&.warning {
@include notification(
$bg-color: change-color($red-10, $alpha: 0.2),
$left-border-color: #c0534b,
$header-color: #c0534b,
$body-text-color: inherit,
$icon: "\f057"
);
}
}
}