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

44
_scss/_notes.scss
View File

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