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

Convert alerts to new color palette

This commit is contained in:
Mark H 2022-04-22 20:50:31 +01:00
parent 036b5f02ae
commit 1f7312dd86
2 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
_scss/_color-palette-v2.scss
View File

@ -1,14 +1,7 @@
/* This palette is deprecated */
$red-10: #f8a09a;
$red-50: #e44141;
$red-60: #da3333;
$red-90: #9e1011;
$purple-10: #d4c1f8;
$purple-50: #866abf;
$purple-60: #7457b1;
$marine-10: #9fd1f9;
$marine-50: #007bff;
$marine-90: #002c66;
@ -21,9 +14,7 @@ $blue-80: #076cad;
$orange-10: #fef5c3;
$orange-20: #f9e3ae;
$orange-60: #e79a5c;
$orange-90: #d4611d;
$orange-100: #cc4e09;
$white-0: #ffffff;
$white-5: #fafafb;

44
_scss/_notes.scss
View File

@ -41,6 +41,10 @@ The available classes are:
> p:only-child, > p:not(:first-child) {
color: $body-text-color;
}
a {
text-decoration: underline;
}
}
@ -51,36 +55,36 @@ blockquote {
&: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,
$bg-color: $dark-palette-blue-200,
$header-color: $white-0,
$body-text-color: $white-0,
$icon: "\f06a"
);
}
&.important {
@include notification(
$bg-color: change-color($orange-60, $alpha: 0.4),
$header-color: $orange-20,
$body-text-color: $orange-20,
$bg-color: $dark-palette-amber-200,
$header-color: $white-0,
$body-text-color: $white-0,
$icon: "\f06a"
);
}
&.warning {
@include notification(
$bg-color: change-color($red-60, $alpha: 0.3),
$header-color: $red-10,
$body-text-color: $red-10,
$bg-color: $dark-palette-red-200,
$header-color: $white-0,
$body-text-color: $white-0,
$icon: "\f06a"
);
}
&.restricted {
@include notification(
$bg-color: change-color($purple-60, $alpha: 0.44),
$header-color: $purple-10,
$body-text-color: $purple-10,
$bg-color: $dark-palette-violet-200,
$header-color: $white-0,
$body-text-color: $white-0,
$icon: "\f135"
);
}
@ -91,8 +95,8 @@ blockquote {
&: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,
$bg-color: $light-palette-blue-100,
$header-color: $light-palette-blue-500,
$body-text-color: inherit,
$icon: "\f05a"
);
@ -100,8 +104,8 @@ blockquote {
&.important {
@include notification(
$bg-color: $orange-10,
$header-color: $orange-100,
$bg-color: $light-palette-amber-100,
$header-color: $light-palette-amber-500,
$body-text-color: inherit,
$icon: "\f06a"
);
@ -109,8 +113,8 @@ blockquote {
&.warning {
@include notification(
$bg-color: #FEEFEF, // Hardcoding this variable temporary till we migrate to the new color pallette
$header-color: $red-50,
$bg-color: $light-palette-red-100,
$header-color: $light-palette-red-500,
$body-text-color: inherit,
$icon: "\f06a"
);
@ -118,8 +122,8 @@ blockquote {
&.restricted {
@include notification(
$bg-color: $purple-10,
$header-color: $purple-50,
$bg-color: $light-palette-violet-100,
$header-color: $light-palette-violet-500,
$body-text-color: inherit,
$icon: "\f135"
);