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

adding color and icon changes to Alerts banners

This commit is contained in:
smokhtar1 2021-11-03 11:11:54 +01:00
parent 364b2fcb50
commit 2d457d7f8c
3 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_scss/_base.scss
View File

@ -25,3 +25,6 @@ a {
text-decoration: none;
}
}
blockquote {
border-left: none;
}

2
_scss/_color-palette.scss
View File

@ -33,7 +33,7 @@ $purple-100: #270769;
$marine-10: #9fd1f9;
$marine-20: #6fb6f6;
$marine-30: #4ba0f3;
$marine-30: #1b1c1d;
$marine-40: #268aef;
$marine-50: #007bff;
$marine-60: #0162cc;

27
_scss/_notes.scss
View File

@ -20,9 +20,8 @@ The available classes are:
*/
@mixin notification($bg-color, $header-color, $body-text-color, $left-border-color, $icon) {
@mixin notification($bg-color, $header-color, $body-text-color, $icon) {
background-color: $bg-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"),
@ -53,7 +52,6 @@ blockquote {
&: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"
@ -63,7 +61,6 @@ blockquote {
&.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"
@ -73,7 +70,6 @@ blockquote {
&.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"
@ -83,7 +79,6 @@ blockquote {
&.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"
@ -96,19 +91,17 @@ blockquote {
&:not(.important):not(.warning):not(.restricted) {
@include notification(
$bg-color: change-color($marine-10, $alpha: 0.2),
$left-border-color: $blue-80,
$bg-color: #E8F4FD, // Hardcoding this variable temporary till we migrate to the new color pallette
$header-color: $blue-80,
$body-text-color: inherit,
$icon: "\f058"
$icon: "\f05a"
);
}
&.important {
@include notification(
$bg-color: change-color($orange-10, $alpha: 0.4),
$left-border-color: $orange-90,
$header-color: $orange-90,
$bg-color: $orange-10,
$header-color: $orange-100,
$body-text-color: inherit,
$icon: "\f06a"
);
@ -116,18 +109,16 @@ blockquote {
&.warning {
@include notification(
$bg-color: change-color($red-10, $alpha: 0.2),
$left-border-color: $red-40,
$header-color: $red-40,
$bg-color: $red-10,
$header-color: $red-50,
$body-text-color: inherit,
$icon: "\f057"
$icon: "\f06a"
);
}
&.restricted {
@include notification(
$bg-color: change-color($purple-20, $alpha: 0.2),
$left-border-color: $purple-70,
$bg-color: $purple-10,
$header-color: $purple-50,
$body-text-color: inherit,
$icon: "\f135"