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

Merge pull request #13810 from smokhtar1/smokhtar 

Adding CSS Changes to the banner alerts colors and default font-family
This commit is contained in:
Usha Mandya 2021-11-16 15:41:02 +00:00 committed by GitHub
parent 9603c8e704 767f9a3606
commit 9e604709b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_scss/_base.scss
View File

@ -25,3 +25,7 @@ a {
text-decoration: none; text-decoration: none;
} }
} }
blockquote {
/* Override Bootstrap's style */
border-left: none;
}

8
_scss/_landing.scss
View File

@ -210,11 +210,11 @@ body.landing {
} }
.cardlet { .cardlet {
background-color: #F2F3F5; background-color: $white-25;
padding: 24px 36px; padding: 24px 36px;
.title { .title {
font-family: 'Geomanist Book', sans-serif; font-family: "Open Sans", sans-serif;
line-height: 22px; line-height: 22px;
font-size: 22px; font-size: 22px;
} }
@ -270,12 +270,12 @@ body.landing {
.help-by-product { .help-by-product {
.title { .title {
font-family: 'Geomanist Book', sans-serif; font-family: "Open Sans", sans-serif;
font-size: 22px; font-size: 22px;
} }
ul.nav.nav-tabs li a, h5, h6 { ul.nav.nav-tabs li a, h5, h6 {
font-family: 'Geomanist Regular', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 18px; font-size: 18px;
} }

31
_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; background-color: $bg-color;
border-left-color: $left-border-color;
font-size: unset; // override bootstrap font-size for blockquotes 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"), // The first child will generally be a header (e.g. "Note" or "This is an experimental feature"),
@ -53,17 +52,15 @@ 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: change-color($marine-10, $alpha: 0.2),
$left-border-color: $blue-80,
$header-color: $marine-10, $header-color: $marine-10,
$body-text-color: $marine-10, $body-text-color: $marine-10,
$icon: "\f058" $icon: "\f06a"
); );
} }
&.important { &.important {
@include notification( @include notification(
$bg-color: change-color($orange-60, $alpha: 0.4), $bg-color: change-color($orange-60, $alpha: 0.4),
$left-border-color: $orange-90,
$header-color: $orange-20, $header-color: $orange-20,
$body-text-color: $orange-20, $body-text-color: $orange-20,
$icon: "\f06a" $icon: "\f06a"
@ -73,17 +70,15 @@ blockquote {
&.warning { &.warning {
@include notification( @include notification(
$bg-color: change-color($red-60, $alpha: 0.3), $bg-color: change-color($red-60, $alpha: 0.3),
$left-border-color: $red-40,
$header-color: $red-10, $header-color: $red-10,
$body-text-color: $red-10, $body-text-color: $red-10,
$icon: "\f057" $icon: "\f06a"
); );
} }
&.restricted { &.restricted {
@include notification( @include notification(
$bg-color: change-color($purple-60, $alpha: 0.44), $bg-color: change-color($purple-60, $alpha: 0.44),
$left-border-color: $purple-70,
$header-color: $purple-10, $header-color: $purple-10,
$body-text-color: $purple-10, $body-text-color: $purple-10,
$icon: "\f135" $icon: "\f135"
@ -96,19 +91,17 @@ 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: #E8F4FD, // Hardcoding this variable temporary till we migrate to the new color pallette
$left-border-color: $blue-80,
$header-color: $blue-80, $header-color: $blue-80,
$body-text-color: inherit, $body-text-color: inherit,
$icon: "\f058" $icon: "\f05a"
); );
} }
&.important { &.important {
@include notification( @include notification(
$bg-color: change-color($orange-10, $alpha: 0.4), $bg-color: $orange-10,
$left-border-color: $orange-90, $header-color: $orange-100,
$header-color: $orange-90,
$body-text-color: inherit, $body-text-color: inherit,
$icon: "\f06a" $icon: "\f06a"
); );
@ -116,18 +109,16 @@ blockquote {
&.warning { &.warning {
@include notification( @include notification(
$bg-color: change-color($red-10, $alpha: 0.2), $bg-color: #FEEFEF, // Hardcoding this variable temporary till we migrate to the new color pallette
$left-border-color: $red-40, $header-color: $red-50,
$header-color: $red-40,
$body-text-color: inherit, $body-text-color: inherit,
$icon: "\f057" $icon: "\f06a"
); );
} }
&.restricted { &.restricted {
@include notification( @include notification(
$bg-color: change-color($purple-20, $alpha: 0.2), $bg-color: $purple-10,
$left-border-color: $purple-70,
$header-color: $purple-50, $header-color: $purple-50,
$body-text-color: inherit, $body-text-color: inherit,
$icon: "\f135" $icon: "\f135"

1
_scss/_typography.scss
View File

@ -45,6 +45,7 @@ h1,h2,h3,h4,h5,h6 {
line-height: 26px; line-height: 26px;
margin-top: 30px; margin-top: 30px;
margin-bottom: 0; margin-bottom: 0;
font-weight: 600;
} }
h1 { h1 {

53
_scss/_variables.scss
View File

@ -1,10 +1,13 @@
@import "color-palette";
/* /*
* global * global
*/ */
$headings: "Geomanist Book", sans-serif; $headings: "Open Sans", sans-serif;
$headings-landing: "Geomanist Regular", sans-serif; $headings-landing: "Open Sans", sans-serif;
$buttons: "Geomanist Book", sans-serif; $buttons: "Open Sans", sans-serif;
$font: "Open Sans", sans-serif; $font: "Open Sans", sans-serif;
$body-text-size: 14px; $body-text-size: 14px;
$white: #fff; $white: #fff;
@ -14,30 +17,28 @@ $top-navigation-height: 92px; // top navigation height is: nav (55px) + breadcru
/* /*
* standard mode * standard mode
*/ */
$body-text: hsl(199, 20%, 25%); $body-text: $black-0;
$primary-links: hsl(206, 85%, 54%); $primary-links: $blue-70;
//
$bg-body: $white-0;
$bg-body-landing: $white-10;
$bg-header: $blue-60;
$bg-secondary: $blue-60;
$bg-sidebar: $white-10;
$bg-sidebar-active: $white-15;
$bg-footer: $white-0;
$bg-footer-landing: $marine-90;
$bg-component: $white-5;
$bg-card: $white-0;
$bg-body: hsl(206, 0%, 100%); // notes, warnings//
$bg-body-landing: hsl(206, 14%, 99%); $note-color: $blue-80;
$bg-header: hsl(206, 85%, 54%); $important-color: $orange-90;
$bg-secondary: hsl(206, 85%, 54%); $warning-color: $red-90;
$bg-sidebar: hsl(206, 14%, 99%);
$bg-sidebar-active: hsl(206, 33%, 97%);
$bg-footer: hsl(206, 0%, 100%);
$bg-footer-landing: hsl(214, 100%, 20%);
$bg-component: hsl(240, 14%, 99%); $slider-bg: $marine-10;
$bg-card: hsl( 0, 0%, 100%); $slider-btn: $blue-60;
$table-head: $grey-10;
// notes, warnings
$note-color: hsl(206, 82%, 43%);
$important-color: hsl( 35, 91%, 35%);
$warning-color: hsl( 2, 58%, 54%);
$slider-bg: hsl(206, 76%, 87%);
$slider-btn: hsl(206, 85%, 54%);
$table-head: hsl(206, 5%, 82%);
/* /*
* night mode * night mode
@ -55,7 +56,7 @@ $bg-footer-night: hsl(203, 0%, 0%);
$bg-footer-landing-night: hsl(214, 100%, 20%); $bg-footer-landing-night: hsl(214, 100%, 20%);
$bg-component-night: hsl(203, 44%, 10%); $bg-component-night: hsl(203, 44%, 10%);
$bg-card-night: hsl(203, 33%, 8%); $bg-card-night: #0e161b;
$active-sidebar-night: hsl(203, 85%, 79%); $active-sidebar-night: hsl(203, 85%, 79%);