From 383ab8515d11f9657edbb4954991f8b3fff8c5e7 Mon Sep 17 00:00:00 2001 From: Stefanie Fluin Date: Sun, 27 Jan 2019 15:52:53 -0800 Subject: [PATCH] feat(docs-infra): white background and corresponding figure updates (#28396) PR Close #28396 --- aio/src/styles/0-base/_typography.scss | 7 +++++- aio/src/styles/1-layouts/_footer.scss | 9 +++++--- aio/src/styles/1-layouts/_layout-global.scss | 7 +++--- .../styles/1-layouts/_marketing-layout.scss | 4 ++-- aio/src/styles/1-layouts/_sidenav.scss | 7 +++++- aio/src/styles/1-layouts/_top-menu.scss | 2 +- aio/src/styles/2-modules/_buttons.scss | 2 +- aio/src/styles/2-modules/_card.scss | 2 +- aio/src/styles/2-modules/_contributor.scss | 2 +- aio/src/styles/2-modules/_filetree.scss | 4 ++-- aio/src/styles/2-modules/_images.scss | 23 +++++++++++++++---- aio/src/styles/2-modules/_label.scss | 4 ++-- aio/src/styles/2-modules/_table.scss | 2 +- aio/src/styles/_constants.scss | 8 ++++--- 14 files changed, 56 insertions(+), 27 deletions(-) diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss index a3b6610127..00096a9bbc 100755 --- a/aio/src/styles/0-base/_typography.scss +++ b/aio/src/styles/0-base/_typography.scss @@ -7,6 +7,10 @@ body { -moz-osx-font-smoothing: grayscale; } +h1, h2, h3, h4, h5, h6 { + color: $deepgray; +} + h1 { display: inline-block; font-size: 24px; @@ -73,6 +77,7 @@ p, ol, ul, ol, li, input, a { line-height: 24px; letter-spacing: 0.30px; font-weight: 400; + color: $darkgray; & > em { letter-spacing: 0.30px; } @@ -103,7 +108,7 @@ a { .app-toolbar a { font-size: 16px; font-weight: 400; - color: white; + color: $white; font-family: $main-font; text-transform: uppercase; padding: 21px 0; diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss index 55a83b0bb4..c470965570 100644 --- a/aio/src/styles/1-layouts/_footer.scss +++ b/aio/src/styles/1-layouts/_footer.scss @@ -5,12 +5,15 @@ footer { padding: 48px; z-index: 0; background-color: $blue; - color: $offwhite; font-weight: 300; aio-footer { position: relative; z-index: 0; + + & > * { + color: $white; + } } .footer-block { @@ -19,8 +22,7 @@ footer { } a { - color: $offwhite; - font-weight: 300; + color: $white; text-decoration: none; z-index: 20; position: relative; @@ -39,6 +41,7 @@ footer { text-transform: uppercase; font-weight: 400; margin: 0 0 16px; + color: $white; } p { text-align: center; diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss index 769c5c9ca8..5ff87e7ddf 100644 --- a/aio/src/styles/1-layouts/_layout-global.scss +++ b/aio/src/styles/1-layouts/_layout-global.scss @@ -2,8 +2,9 @@ html, body { height: 100%; } -body { - background-color: $offwhite; +body, +.content { + background-color: $white; } .clearfix { @@ -48,4 +49,4 @@ body { .text-uppercase { text-transform: uppercase; -} \ No newline at end of file +} diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss index 2d15939a79..89d579eee0 100644 --- a/aio/src/styles/1-layouts/_marketing-layout.scss +++ b/aio/src/styles/1-layouts/_marketing-layout.scss @@ -42,7 +42,7 @@ section#intro { height: 480px; margin: 0 auto -32px; padding: 48px 0 0; - color: white; + color: $white; @media (max-width: 780px) { flex-direction: column; @@ -426,7 +426,7 @@ div[layout=row]{ text-transform: uppercase; font-size: 24px; font-weight: 300; - color: white; + color: $white; margin: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss index 437a1abf2a..819ea52558 100644 --- a/aio/src/styles/1-layouts/_sidenav.scss +++ b/aio/src/styles/1-layouts/_sidenav.scss @@ -28,7 +28,7 @@ mat-sidenav.mat-sidenav.sidenav { left: 0; padding: 0; min-width: 260px; - background-color: $offwhite; + background-color: $white; box-shadow: 6px 0 6px rgba(0,0,0,0.10); &.collapsed { @@ -48,6 +48,11 @@ mat-sidenav-container.sidenav-container { } } +mat-sidenav-container.sidenav-container.mat-drawer-container.mat-sidenav-container, +mat-sidenav-container .sidenav-content { + background-color: $white; +} + mat-sidenav-container div.mat-sidenav-content { height: auto; } diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index 642085dff9..642ff44142 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -180,7 +180,7 @@ aio-search-box.search-container { color: $darkgray; border: none; border-radius: 100px; - background-color: $offwhite; + background-color: $white; padding: 5px 16px; margin-left: 8px; width: 180px; diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss index 4aaaa4974e..bf59b91477 100644 --- a/aio/src/styles/2-modules/_buttons.scss +++ b/aio/src/styles/2-modules/_buttons.scss @@ -94,7 +94,7 @@ a.filter-button { &:hover { background-color: $blue; - color: white; + color: $white; } } diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss index 294cd7a01d..18552702dc 100644 --- a/aio/src/styles/2-modules/_card.scss +++ b/aio/src/styles/2-modules/_card.scss @@ -35,7 +35,7 @@ section { - color: $darkgray; + color: $deepgray; font-size: 20px; line-height: 24px; margin: 0; diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss index c31d20230c..19db386c19 100644 --- a/aio/src/styles/2-modules/_contributor.scss +++ b/aio/src/styles/2-modules/_contributor.scss @@ -22,7 +22,7 @@ aio-contributor-list { a { &.selected { background-color: $blue; - color: white; + color: $white; } } } diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/_filetree.scss index e3b4ae8499..224a21f837 100644 --- a/aio/src/styles/2-modules/_filetree.scss +++ b/aio/src/styles/2-modules/_filetree.scss @@ -1,5 +1,5 @@ .filetree { - background: $offwhite; + background: $white; border: 4px solid $lightgray; border-radius: 4px; margin: 0 0 24px 0; @@ -35,4 +35,4 @@ } } } -} \ No newline at end of file +} diff --git a/aio/src/styles/2-modules/_images.scss b/aio/src/styles/2-modules/_images.scss index b0d1bd0c4a..a6f3b90fe7 100644 --- a/aio/src/styles/2-modules/_images.scss +++ b/aio/src/styles/2-modules/_images.scss @@ -32,15 +32,28 @@ } figure { - border-radius: 4px; + margin: 0; + margin-top: 14px; + margin-bottom: 14px; + border-radius: 1px; background: $white; - padding: 20px; + border: 1px solid $lightgray; + padding: 32px; + box-sizing: border-box; display: inline-block; - box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2); - margin: 0 0 14px 0; - img { + &.lightbox { + background-color: $lightboxgray; + width: 100%; + display: flex; + justify-content: center; + } + + div.card { + box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12); border-radius: 4px; + padding: 8px; + background-color: $white; } } } diff --git a/aio/src/styles/2-modules/_label.scss b/aio/src/styles/2-modules/_label.scss index 17b2756af8..1036376355 100644 --- a/aio/src/styles/2-modules/_label.scss +++ b/aio/src/styles/2-modules/_label.scss @@ -3,7 +3,7 @@ label.raised, .api-header label { padding: 4px 16px; display: inline; font-size: 14px; - color: white; + color: $white; margin-right: 8px; font-weight: 500; text-transform: uppercase; @@ -64,4 +64,4 @@ label.raised, .api-header label { } } -} \ No newline at end of file +} diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss index a479c0be97..495a10be63 100644 --- a/aio/src/styles/2-modules/_table.scss +++ b/aio/src/styles/2-modules/_table.scss @@ -2,7 +2,7 @@ table { margin: 24px 0px; box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); border-radius: 2px; - background: $offwhite; + background: $white; &.is-full-width { width: 100%; diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss index df2d4ea994..b886c94a04 100755 --- a/aio/src/styles/_constants.scss +++ b/aio/src/styles/_constants.scss @@ -18,9 +18,11 @@ $white: #FFFFFF; $offwhite: #FAFAFA; $backgroundgray: #F1F1F1; $lightgray: #DBDBDB; +$lightboxgray: #EBEBEB; $mist: #ECEFF1; -$mediumgray: #6e6e6e; -$darkgray: #333; +$mediumgray: #6E6E6E; +$darkgray: #444444; +$deepgray: #333333; $black: #0A1014; $orange: #FF9800; $darkorange: #940; @@ -119,4 +121,4 @@ $api-symbols: ( // OTHER $small-breakpoint-width: 840px; $phone-breakpoint: 480px; -$tablet-breakpoint: 800px; \ No newline at end of file +$tablet-breakpoint: 800px;