From c2bd3578257d56ab171d213428d5d7af26af3f21 Mon Sep 17 00:00:00 2001 From: Stefanie Fluin Date: Wed, 15 Mar 2017 08:19:19 +1100 Subject: [PATCH] feat(aio): initial design commit Implemented style guide elements to top header bar, side hamburger nav menu, content and search. Consolidated SCSS files to styles folder. Fixed PWA test. --- aio/e2e/app.e2e-spec.ts | 2 +- aio/src/app/app.component.html | 4 +- aio/src/app/app.component.ts | 3 +- .../app/layout/nav-item/nav-item.component.ts | 1 - .../app/layout/top-menu/top-menu.component.ts | 6 +- .../search-box/search-box.component.html | 13 +- .../search-box/search-box.component.scss | 0 .../search/search-box/search-box.component.ts | 1 - .../search-results.component.html | 7 +- aio/src/index.html | 3 +- aio/src/styles/0-base/_base-dir.scss | 5 + aio/src/styles/0-base/_typography.scss | 121 ++++++++++++++++++ aio/src/styles/1-layouts/_content-layout.scss | 24 ++++ aio/src/styles/1-layouts/_layouts-dir.scss | 8 ++ aio/src/styles/1-layouts/_search-results.scss | 15 +++ .../1-layouts/_sidenav.scss} | 41 ++++-- aio/src/styles/1-layouts/_top-menu.scss | 44 +++++++ aio/src/styles/2-modules/_code.scss | 14 ++ aio/src/styles/2-modules/_hamburger.scss | 23 ++++ aio/src/styles/2-modules/_modules-dir.scss | 6 + aio/src/styles/_constants.scss | 20 +++ aio/src/styles/_typography-theme.scss | 4 + aio/src/styles/_typography.scss | 69 ---------- aio/src/styles/main.scss | 28 ++-- aio/src/styles/ng-io-theme.scss | 5 +- 25 files changed, 346 insertions(+), 121 deletions(-) delete mode 100644 aio/src/app/search/search-box/search-box.component.scss create mode 100644 aio/src/styles/0-base/_base-dir.scss create mode 100755 aio/src/styles/0-base/_typography.scss create mode 100644 aio/src/styles/1-layouts/_content-layout.scss create mode 100644 aio/src/styles/1-layouts/_layouts-dir.scss create mode 100644 aio/src/styles/1-layouts/_search-results.scss rename aio/src/{app/layout/nav-item/nav-item.component.scss => styles/1-layouts/_sidenav.scss} (83%) create mode 100644 aio/src/styles/1-layouts/_top-menu.scss create mode 100644 aio/src/styles/2-modules/_code.scss create mode 100644 aio/src/styles/2-modules/_hamburger.scss create mode 100644 aio/src/styles/2-modules/_modules-dir.scss delete mode 100755 aio/src/styles/_typography.scss diff --git a/aio/e2e/app.e2e-spec.ts b/aio/e2e/app.e2e-spec.ts index 4c3e3bf40f..ec85677381 100644 --- a/aio/e2e/app.e2e-spec.ts +++ b/aio/e2e/app.e2e-spec.ts @@ -11,7 +11,7 @@ describe('site App', function() { it('should show features text after clicking "Features"', () => { page.featureLink.click().then(() => { - expect(page.getDocViewerText()).toContain('Progressive web apps'); + expect(page.getDocViewerText()).toMatch(/Progressive web apps/i); }); }); diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html index 92fe8e1db0..8031343b10 100644 --- a/aio/src/app/app.component.html +++ b/aio/src/app/app.component.html @@ -1,11 +1,11 @@ - + - + diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index 4f131a3f8d..cd7e8a9e5c 100644 --- a/aio/src/app/app.component.ts +++ b/aio/src/app/app.component.ts @@ -11,11 +11,10 @@ import { SearchResultsComponent } from 'app/search/search-results/search-results @Component({ selector: 'aio-shell', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit { readonly sideBySideWidth = 600; - readonly homeImageUrl = 'assets/images/logos/angular2/angular_solidBlack.svg'; + readonly homeImageUrl = 'assets/images/logos/standard/logo-nav.png'; isHamburgerVisible = true; // always ... for now isSideBySide = false; diff --git a/aio/src/app/layout/nav-item/nav-item.component.ts b/aio/src/app/layout/nav-item/nav-item.component.ts index 402143dc1f..26e7e77a69 100644 --- a/aio/src/app/layout/nav-item/nav-item.component.ts +++ b/aio/src/app/layout/nav-item/nav-item.component.ts @@ -4,7 +4,6 @@ import { NavigationNode } from 'app/navigation/navigation.service'; @Component({ selector: 'aio-nav-item', templateUrl: 'nav-item.component.html', - styleUrls: ['nav-item.component.scss'] }) export class NavItemComponent implements OnChanges { @Input() selectedNodes: NavigationNode[]; diff --git a/aio/src/app/layout/top-menu/top-menu.component.ts b/aio/src/app/layout/top-menu/top-menu.component.ts index e9f83ad5af..9fdfadfad6 100644 --- a/aio/src/app/layout/top-menu/top-menu.component.ts +++ b/aio/src/app/layout/top-menu/top-menu.component.ts @@ -4,8 +4,10 @@ import { NavigationNode } from 'app/navigation/navigation.service'; @Component({ selector: 'aio-top-menu', template: ` - Home - {{ node.title }}`, + `, styles: [` .fill-remaining-space { flex: 1 1 auto; diff --git a/aio/src/app/search/search-box/search-box.component.html b/aio/src/app/search/search-box/search-box.component.html index ded971e9e2..280889fa2c 100644 --- a/aio/src/app/search/search-box/search-box.component.html +++ b/aio/src/app/search/search-box/search-box.component.html @@ -1,8 +1,5 @@ - - - + diff --git a/aio/src/app/search/search-box/search-box.component.scss b/aio/src/app/search/search-box/search-box.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts index 811019977b..c761d3e88a 100644 --- a/aio/src/app/search/search-box/search-box.component.ts +++ b/aio/src/app/search/search-box/search-box.component.ts @@ -17,7 +17,6 @@ import { LocationService } from 'app/shared/location.service'; @Component({ selector: 'aio-search-box', templateUrl: './search-box.component.html', - styleUrls: ['./search-box.component.scss'] }) export class SearchBoxComponent implements OnInit { diff --git a/aio/src/app/search/search-results/search-results.component.html b/aio/src/app/search/search-results/search-results.component.html index 0b9039853c..2fcfb940a3 100644 --- a/aio/src/app/search/search-results/search-results.component.html +++ b/aio/src/app/search/search-results/search-results.component.html @@ -1,8 +1,9 @@ -
+

{{area.name}}

- {{ page.title }} + {{ page.title }}
-
\ No newline at end of file +
+ diff --git a/aio/src/index.html b/aio/src/index.html index ec9889ba8c..8b2889f0c9 100644 --- a/aio/src/index.html +++ b/aio/src/index.html @@ -32,13 +32,14 @@ + + - diff --git a/aio/src/styles/0-base/_base-dir.scss b/aio/src/styles/0-base/_base-dir.scss new file mode 100644 index 0000000000..73cc3d42e6 --- /dev/null +++ b/aio/src/styles/0-base/_base-dir.scss @@ -0,0 +1,5 @@ +/* ============================== + BASE STYLES + ============================== */ + +@import 'typography'; \ No newline at end of file diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss new file mode 100755 index 0000000000..4c65b4b9ff --- /dev/null +++ b/aio/src/styles/0-base/_typography.scss @@ -0,0 +1,121 @@ +// @mixin docs-site-typography() { +// .docs-component-viewer-tabbed-content .docs-component-view-text-content, +// .docs-guide-content { + + body { + font-family: $main-font; + margin: 0; + color: $darkgray; + } + + h1 { + display:inline-block; + font-size: 36px; + font-weight: 400; + margin: 12px 0px; + } + + h1:after { + content: ""; + display: block; + height: 1px; + width: 40%; + margin: 30px 0px 10px; + background: $lightgray; + } + + h2 { + font-size: 30px; + font-weight: 500; + margin: 48px 0px 32px; + } + + h3 { + font-size: 24px; + font-weight: 500; + margin: 12px 0px; + text-transform: uppercase; + } + + h4 { + font-size: 24px; + font-weight: 400; + margin: 8px 0px; + } + + h5 { + font-size: 18px; + font-weight: 500; + margin: 8px 0px; + text-transform: uppercase; + } + + .mat-tab-body-wrapper h2 { + margin-top: 0px; + } + + p, ol, ul, input { + font-size: 14px; + line-height: 24px; + letter-spacing: 0.30px; + } + + a { + text-decoration: none; + } + + .mat-toolbar-row a { + font-size: 18px; + font-weight: 400; + color: white; + font-family: $support-font; + text-transform: uppercase; + } + + table { + border-collapse: collapse; + border-radius: 2px; + border-spacing: 0; + margin: 0 0 32px 0; + width: 100%; + } + + table tbody th { + max-width: 100px; + padding: 13px 32px; + text-align: left; + } + + td { + font-weight: 400; + padding: 8px 30px; + + p { + margin: 0; + } + } + + th { + font-size: 16px; + font-weight: 500; + padding: 13px 32px; + text-align: left; + } + + p code { + font-family: $code-font; + font-size: 90%; + color: $blue; + letter-spacing: 0; + line-height: 1; + padding: 2px 4px; + background-color: $backgroundgray; + border-radius: 4px; + } + + .sidenav-content a { + color: $blue; + } + +// } +// } diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss new file mode 100644 index 0000000000..a35e95c2ab --- /dev/null +++ b/aio/src/styles/1-layouts/_content-layout.scss @@ -0,0 +1,24 @@ +.sidenav-content { + padding: 1rem 3rem; + height: 100vh; + margin: auto; +} + +.fill-remaining-space { + flex: 1 1 auto; +} + +@media (max-width: 600px) { + aio-menu { + display: none; + } +} + +.sidenav-container { + width: 100%; + height: 100vh; +} + +.sidenav-content button { + min-width: 50px; +} \ No newline at end of file diff --git a/aio/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss new file mode 100644 index 0000000000..d16c6e8f6d --- /dev/null +++ b/aio/src/styles/1-layouts/_layouts-dir.scss @@ -0,0 +1,8 @@ +/* ============================== + LAYOUT STYLES + ============================== */ + +@import 'sidenav'; +@import 'content-layout'; +@import 'search-results'; +@import 'top-menu'; \ No newline at end of file diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/1-layouts/_search-results.scss new file mode 100644 index 0000000000..54395077f5 --- /dev/null +++ b/aio/src/styles/1-layouts/_search-results.scss @@ -0,0 +1,15 @@ +.search-results { + background-color: $lightgray; + padding: 20px; +} + +.search-result-item { + color: $darkgray; + text-decoration: none; + &:hover { + color: $blue + } + &:visited { + text-decoration: none; + } +} \ No newline at end of file diff --git a/aio/src/app/layout/nav-item/nav-item.component.scss b/aio/src/styles/1-layouts/_sidenav.scss similarity index 83% rename from aio/src/app/layout/nav-item/nav-item.component.scss rename to aio/src/styles/1-layouts/_sidenav.scss index 562b0af184..a331021105 100644 --- a/aio/src/app/layout/nav-item/nav-item.component.scss +++ b/aio/src/styles/1-layouts/_sidenav.scss @@ -42,17 +42,23 @@ /************************************/ +.mat-sidenav.sidenav { + box-shadow: 6px 0 6px rgba(0,0,0,0.10); + background-color: $offwhite; + padding: 10px 0px 0px; + min-width: 220px; +} + .vertical-menu-item { box-sizing: border-box; - color: #545454; + color: $darkgray; cursor: pointer; display: block; max-width: 260px; overflow-wrap: break-word; - padding-bottom: 10px; padding-top: 10px; - padding-left: 15px; - padding-right: 15px; + padding-bottom: 10px; + padding-left: 20px; text-decoration: none; text-align: left; transition-duration: 180ms; @@ -63,8 +69,8 @@ outline: none; &:hover { - background-color: #ddd; text-shadow: 0px 0px 5px #ffffff; + background-color: $lightgray; } //icons _within_ nav @@ -81,22 +87,22 @@ } .vertical-menu-item.selected { - color:#018494; + color: $blue; } .heading { color: #444; cursor: pointer; - font-size: .85rem; position: relative; text-transform: uppercase; width: 100%; } -.material-icons.expanded { +.material-icons { display: inline-block; position: absolute; top: 6px; + right: 8px; } .heading-children.expanded { @@ -120,17 +126,32 @@ .heading.selected.level-1, .heading-children.selected.level-1 { - border-left: 3px #00bcd4 solid; + border-left: 3px $blue solid; } + .level-1 { + font-family: $support-font; + font-weight: 500; + text-transform: uppercase; padding-left: 10px; + transition: background-color 0.2s; } + .level-2 { + font-family: $main-font; + font-size: 14px; + color: $mediumgray; + font-weight: 400; padding-left: 20px; + text-transform: none; } .level-3 { - padding-left: 20px; + font-family: $support-font; + font-size: 14px; + color: $mediumgray; + text-transform: uppercase; + padding-left: 30px; } @mixin rotate($degrees) { diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss new file mode 100644 index 0000000000..667cc27f45 --- /dev/null +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -0,0 +1,44 @@ +aio-top-menu { + display: flex; + flex-direction: row; + align-items: center; + width: 80%; +} + +aio-top-menu ul { + display: flex; + flex-direction: row; + align-items: center; + list-style-position: inside; + padding: 0px; + margin: 0px; +} + +aio-top-menu li { + list-style-type: none; +} + +md-toolbar.mat-toolbar { + box-shadow: 6px 0 6px rgba(0,0,0,0.10); + padding: 0 16px 0px 0px; +} + +.search-container { + display: flex; + justify-content: flex-end; + align-items: center; + width: 100%; + height: 100%; +} + +aio-search-box input { + color: $darkgray; + border: none; + border-radius: 5px; + background-color: $offwhite; + padding: 5px 10px; + margin-left: 8px; + min-width:200px; + width: 50%; + height: 40%; +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss new file mode 100644 index 0000000000..6e8261193b --- /dev/null +++ b/aio/src/styles/2-modules/_code.scss @@ -0,0 +1,14 @@ +.code-example { + background-color: $backgroundgray; + border-radius: 5px; + color: $darkgray; + padding: 20px; + margin: 24px auto; + border: 0.5px solid $lightgray; +} + +.code-example pre { + margin: 0px; + padding: 0px; + white-space: pre-wrap; +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_hamburger.scss b/aio/src/styles/2-modules/_hamburger.scss new file mode 100644 index 0000000000..1d2c481801 --- /dev/null +++ b/aio/src/styles/2-modules/_hamburger.scss @@ -0,0 +1,23 @@ +.hamburger { + transition-duration: 150ms; + transition-property: background-color, color; + transition-timing-function: ease-in-out; + &:hover { + color: $lightgray; + } +} + +.hamburger.mat-button { + transition: color 0.2s; + height: 100%; + margin: 0px; + padding: 0px; +} + +.hamburger.mat-button:hover { + color: $offwhite; +} + +.hamburger md-icon { + position: inherit; +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss new file mode 100644 index 0000000000..f81d264801 --- /dev/null +++ b/aio/src/styles/2-modules/_modules-dir.scss @@ -0,0 +1,6 @@ +/* ============================== + MODULE STYLES + ============================== */ + + @import 'hamburger'; + @import 'code'; \ No newline at end of file diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss index 4a1209e5b9..47bd37298d 100755 --- a/aio/src/styles/_constants.scss +++ b/aio/src/styles/_constants.scss @@ -1 +1,21 @@ $small-breakpoint-width: 840px; + +// TYPOGRAPHY +$main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; +$support-font: "Lato","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; +$code-font: "Droid Sans Mono", monospace; + +// COLOR PALETTE +$blue: #1976D2; +$brightred: #DD0031; +$darkred: #C3002F; +$offwhite: #FAFAFA; +$backgroundgray: #F1F1F1; +$lightgray: #DBDBDB; +$mediumgray: #7E7E7E; +$darkgray: #333; +$black: #0A1014; + +// GRADIENTS +$bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5); +$redgradient: linear-gradient(145deg,$darkred,$brightred); \ No newline at end of file diff --git a/aio/src/styles/_typography-theme.scss b/aio/src/styles/_typography-theme.scss index 25985c7dbd..00cbab08e3 100755 --- a/aio/src/styles/_typography-theme.scss +++ b/aio/src/styles/_typography-theme.scss @@ -22,6 +22,10 @@ color: mat-color($primary); } + .nav-link:visited { + text-decoration: none; + } + table { box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12); } diff --git a/aio/src/styles/_typography.scss b/aio/src/styles/_typography.scss deleted file mode 100755 index b557374ef6..0000000000 --- a/aio/src/styles/_typography.scss +++ /dev/null @@ -1,69 +0,0 @@ -@mixin docs-site-typography() { - .docs-component-viewer-tabbed-content .docs-component-view-text-content, - .docs-guide-content { - h1 { - display:inline-block; - font-size: 20px; - font-weight: 400; - padding: 5px; - } - - h3, h2 { - font-size: 20px; - font-weight: 400; - margin-bottom: 30px; - margin-top: 80px; - } - - h4 { - margin-top: 40px; - } - - h5 { - font-size: 16px; - } - - .mat-tab-body-wrapper h2 { - margin-top: 0px; - } - - p { - font-size: 16px; - line-height: 28px; - } - - a { - text-decoration: none; - } - - table { - border-collapse: collapse; - border-radius: 2px; - border-spacing: 0; - margin: 0 0 32px 0; - width: 100%; - } - - table tbody th { - max-width: 100px; - padding: 13px 32px; - text-align: left; - } - - td { - font-weight: 400; - padding: 8px 30px; - - p { - margin: 0; - } - } - - th { - font-size: 16px; - font-weight: 400; - padding: 13px 32px; - text-align: left; - } - } -} diff --git a/aio/src/styles/main.scss b/aio/src/styles/main.scss index fbd48a8e6f..c8eb826039 100755 --- a/aio/src/styles/main.scss +++ b/aio/src/styles/main.scss @@ -1,33 +1,25 @@ +// import global themes @import '~@angular/material/core/theming/all-theme'; @import './ng-io-theme'; -@import './typography'; +// import global variables / +@import './constants'; -// Include material core styles. -@include mat-core(); -@include docs-site-typography(); +// import global mixins +// import directories +@import './0-base/base-dir'; +@import './1-layouts/layouts-dir'; +@import'./2-modules/modules-dir'; -// Define the light theme. -$primary: mat-palette($mat-cyan); -$accent: mat-palette($mat-amber, A200, A100, A400); +// import additional scss -$theme: mat-light-theme($primary, $accent); -@include angular-material-theme($theme); - -body { - font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; - margin: 0; -} +// ********************************************************* // [md-button], [md-raised-button], [mat-button], [mat-raised-button] { text-transform: uppercase; } -h1, h2 { - font-weight: 400; -} - .docs-primary-header { padding-left: 20px; } diff --git a/aio/src/styles/ng-io-theme.scss b/aio/src/styles/ng-io-theme.scss index 5fbf78a56b..d036d70924 100644 --- a/aio/src/styles/ng-io-theme.scss +++ b/aio/src/styles/ng-io-theme.scss @@ -5,12 +5,11 @@ // have to load a single css file for Angular Material in your app. @include mat-core(); - // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. -$ng-io-primary: mat-palette($mat-indigo); -$ng-io-accent: mat-palette($mat-pink, A200, A100, A400); +$ng-io-primary: mat-palette($mat-blue, 700, 600, 800); +$ng-io-accent: mat-palette($mat-red, 700, 600, 800); // The warn palette is optional (defaults to red). $ng-io-warn: mat-palette($mat-red);