From 2d457d7f8c686118c71bab854211fed0c79e236b Mon Sep 17 00:00:00 2001 From: smokhtar1 <87317092+smokhtar1@users.noreply.github.com> Date: Wed, 3 Nov 2021 11:11:54 +0100 Subject: [PATCH 1/7] adding color and icon changes to Alerts banners --- _scss/_base.scss | 3 +++ _scss/_color-palette.scss | 2 +- _scss/_notes.scss | 27 +++++++++------------------ 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/_scss/_base.scss b/_scss/_base.scss index 0edb4c37a0..659082171f 100755 --- a/_scss/_base.scss +++ b/_scss/_base.scss @@ -25,3 +25,6 @@ a { text-decoration: none; } } +blockquote { + border-left: none; +} \ No newline at end of file diff --git a/_scss/_color-palette.scss b/_scss/_color-palette.scss index 3b5c88e6a6..118ba67f10 100644 --- a/_scss/_color-palette.scss +++ b/_scss/_color-palette.scss @@ -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; diff --git a/_scss/_notes.scss b/_scss/_notes.scss index 283a04b90e..defc78c9e5 100644 --- a/_scss/_notes.scss +++ b/_scss/_notes.scss @@ -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" From 5e01630e7757f3519afd7d18060e71af9ee5a63c Mon Sep 17 00:00:00 2001 From: smokhtar1 <87317092+smokhtar1@users.noreply.github.com> Date: Wed, 3 Nov 2021 16:37:54 +0100 Subject: [PATCH 2/7] changing light mode colors to use color-palette variables --- _scss/_landing.scss | 2 +- _scss/_notes.scss | 2 +- _scss/_variables.scss | 47 ++++++++++++++++++++++--------------------- 3 files changed, 26 insertions(+), 25 deletions(-) diff --git a/_scss/_landing.scss b/_scss/_landing.scss index 34a3958e6c..0bc66aa284 100644 --- a/_scss/_landing.scss +++ b/_scss/_landing.scss @@ -210,7 +210,7 @@ body.landing { } .cardlet { - background-color: #F2F3F5; + background-color: $white-25; padding: 24px 36px; .title { diff --git a/_scss/_notes.scss b/_scss/_notes.scss index defc78c9e5..be6eaf7405 100644 --- a/_scss/_notes.scss +++ b/_scss/_notes.scss @@ -109,7 +109,7 @@ blockquote { &.warning { @include notification( - $bg-color: $red-10, + $bg-color: #FEEFEF, // Hardcoding this variable temporary till we migrate to the new color pallette $header-color: $red-50, $body-text-color: inherit, $icon: "\f06a" diff --git a/_scss/_variables.scss b/_scss/_variables.scss index 5b6594114f..98e6166712 100755 --- a/_scss/_variables.scss +++ b/_scss/_variables.scss @@ -1,4 +1,7 @@ +@import "color-palette"; + + /* * global */ @@ -14,30 +17,28 @@ $top-navigation-height: 92px; // top navigation height is: nav (55px) + breadcru /* * standard mode */ -$body-text: hsl(199, 20%, 25%); -$primary-links: hsl(206, 85%, 54%); +$body-text: $black-0; +$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%); -$bg-body-landing: hsl(206, 14%, 99%); -$bg-header: hsl(206, 85%, 54%); -$bg-secondary: hsl(206, 85%, 54%); -$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%); +// notes, warnings// +$note-color: $blue-80; +$important-color: $orange-90; +$warning-color: $red-90; -$bg-component: hsl(240, 14%, 99%); -$bg-card: hsl( 0, 0%, 100%); - -// 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%); +$slider-bg: $marine-10; +$slider-btn: $blue-60; +$table-head: $grey-10; /* * night mode @@ -55,7 +56,7 @@ $bg-footer-night: hsl(203, 0%, 0%); $bg-footer-landing-night: hsl(214, 100%, 20%); $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%); From 5ef901a55d46a9e8ac0e848c0997047910ac5818 Mon Sep 17 00:00:00 2001 From: smokhtar1 <87317092+smokhtar1@users.noreply.github.com> Date: Mon, 8 Nov 2021 14:38:27 +0100 Subject: [PATCH 3/7] changing the defaut font-family and font-weight for headings from Geomanist Book to Open sans --- _scss/_content.scss | 1 + _scss/_typography.scss | 1 + _scss/_variables.scss | 6 +++--- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/_scss/_content.scss b/_scss/_content.scss index 47aeeee048..88d31f5ae2 100755 --- a/_scss/_content.scss +++ b/_scss/_content.scss @@ -2,6 +2,7 @@ .content, p { line-height: 24px; clear: both; + line-height: 1.3em; img { display: block; diff --git a/_scss/_typography.scss b/_scss/_typography.scss index 455c4b77b9..5febe654da 100755 --- a/_scss/_typography.scss +++ b/_scss/_typography.scss @@ -45,6 +45,7 @@ h1,h2,h3,h4,h5,h6 { line-height: 26px; margin-top: 30px; margin-bottom: 0; + font-weight: 600; } h1 { diff --git a/_scss/_variables.scss b/_scss/_variables.scss index 98e6166712..a83fa07531 100755 --- a/_scss/_variables.scss +++ b/_scss/_variables.scss @@ -5,9 +5,9 @@ /* * global */ -$headings: "Geomanist Book", sans-serif; -$headings-landing: "Geomanist Regular", sans-serif; -$buttons: "Geomanist Book", sans-serif; +$headings: "Open Sans", sans-serif; +$headings-landing: "Open Sans", sans-serif; +$buttons: "Open Sans", sans-serif; $font: "Open Sans", sans-serif; $body-text-size: 14px; $white: #fff; From 7ca066106e89a40e4ffd8b10135401fa09c1475d Mon Sep 17 00:00:00 2001 From: smokhtar1 <87317092+smokhtar1@users.noreply.github.com> Date: Mon, 8 Nov 2021 14:40:40 +0100 Subject: [PATCH 4/7] css changes, reverting the line-height back to it's original value --- _scss/_content.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/_scss/_content.scss b/_scss/_content.scss index 88d31f5ae2..47aeeee048 100755 --- a/_scss/_content.scss +++ b/_scss/_content.scss @@ -2,7 +2,6 @@ .content, p { line-height: 24px; clear: both; - line-height: 1.3em; img { display: block; From 0f12ac76e8b5eb21a73ffaf2bf3762c4a6594e9b Mon Sep 17 00:00:00 2001 From: smokhtar1 <87317092+smokhtar1@users.noreply.github.com> Date: Mon, 8 Nov 2021 14:58:18 +0100 Subject: [PATCH 5/7] changing the check icon in notes and alerts --- _scss/_notes.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_scss/_notes.scss b/_scss/_notes.scss index be6eaf7405..8f8d8591a6 100644 --- a/_scss/_notes.scss +++ b/_scss/_notes.scss @@ -54,7 +54,7 @@ blockquote { $bg-color: change-color($marine-10, $alpha: 0.2), $header-color: $marine-10, $body-text-color: $marine-10, - $icon: "\f058" + $icon: "\f06a" ); } @@ -72,7 +72,7 @@ blockquote { $bg-color: change-color($red-60, $alpha: 0.3), $header-color: $red-10, $body-text-color: $red-10, - $icon: "\f057" + $icon: "\f06a" ); } From 6847e77ecb5faa8addcea3f57a74dffe02793e62 Mon Sep 17 00:00:00 2001 From: smokhtar1 <87317092+smokhtar1@users.noreply.github.com> Date: Wed, 10 Nov 2021 17:21:54 +0100 Subject: [PATCH 6/7] fixing a typo and removing Geomanist font from landing --- _scss/_color-palette.scss | 2 +- _scss/_landing.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/_scss/_color-palette.scss b/_scss/_color-palette.scss index 118ba67f10..3b5c88e6a6 100644 --- a/_scss/_color-palette.scss +++ b/_scss/_color-palette.scss @@ -33,7 +33,7 @@ $purple-100: #270769; $marine-10: #9fd1f9; $marine-20: #6fb6f6; -$marine-30: #1b1c1d; +$marine-30: #4ba0f3; $marine-40: #268aef; $marine-50: #007bff; $marine-60: #0162cc; diff --git a/_scss/_landing.scss b/_scss/_landing.scss index 0bc66aa284..09ae2033cf 100644 --- a/_scss/_landing.scss +++ b/_scss/_landing.scss @@ -214,7 +214,7 @@ body.landing { padding: 24px 36px; .title { - font-family: 'Geomanist Book', sans-serif; + font-family: "Open Sans", sans-serif; line-height: 22px; font-size: 22px; } @@ -270,12 +270,12 @@ body.landing { .help-by-product { .title { - font-family: 'Geomanist Book', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 22px; } ul.nav.nav-tabs li a, h5, h6 { - font-family: 'Geomanist Regular', sans-serif; + font-family: 'Open Sans', sans-serif; font-size: 18px; } From 767f9a3606560e758fcb641aa243f1ff8fa66f85 Mon Sep 17 00:00:00 2001 From: Shadi Mokhtar <87317092+smokhtar1@users.noreply.github.com> Date: Wed, 10 Nov 2021 19:34:13 +0100 Subject: [PATCH 7/7] Apply suggestions from code review Co-authored-by: Mark H <70579116+mark-dr@users.noreply.github.com> --- _scss/_base.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_scss/_base.scss b/_scss/_base.scss index 659082171f..9f48c7cd47 100755 --- a/_scss/_base.scss +++ b/_scss/_base.scss @@ -26,5 +26,6 @@ a { } } blockquote { + /* Override Bootstrap's style */ border-left: none; } \ No newline at end of file