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.
This commit is contained in:
Stefanie Fluin
Chuck Jazdzewski
parent
4870f910d6
commit
c2bd357825
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<md-toolbar color="primary" class="app-toolbar">
|
||||
<button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
|
||||
<aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
|
||||
<aio-search-box #searchBox></aio-search-box>
|
||||
<aio-search-box class="search-container" #searchBox></aio-search-box>
|
||||
<span class="fill-remaining-space"></span>
|
||||
</md-toolbar>
|
||||
|
||||
<md-sidenav-container class="sidenav-container">
|
||||
<md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
|
||||
|
||||
<md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
|
||||
<aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@ import { NavigationNode } from 'app/navigation/navigation.service';
|
|||
@Component({
|
||||
selector: 'aio-top-menu',
|
||||
template: `
|
||||
<span><a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a></span>
|
||||
<span *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></span>`,
|
||||
<ul role="navigation">
|
||||
<li><a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a></li>
|
||||
<li *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></li>
|
||||
</ul>`,
|
||||
styles: [`
|
||||
.fill-remaining-space {
|
||||
flex: 1 1 auto;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<md-input-container >
|
||||
<input #searchBox
|
||||
mdInput
|
||||
placeholder="Search"
|
||||
(keyup)="onSearch($event.target.value, $event.which)"
|
||||
(focus)="onSearch($event.target.value)"
|
||||
(click)="onSearch($event.target.value)">
|
||||
</md-input-container>
|
||||
<input #searchBox
|
||||
placeholder="Search"
|
||||
(keyup)="onSearch($event.target.value, $event.which)"
|
||||
(focus)="onSearch($event.target.value)"
|
||||
(click)="onSearch($event.target.value)">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<div class="search-results">
|
||||
<div class="search-results" *ngIf="(searchAreas | async)?.length > 0" >
|
||||
<div class="search-area" *ngFor="let area of searchAreas | async">
|
||||
<h2>{{area.name}}</h2>
|
||||
<div class="search-page" *ngFor="let page of area.pages">
|
||||
<a href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
|
||||
<a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,13 +32,14 @@
|
|||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
<!-- End Google Analytics -->
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<aio-shell></aio-shell>
|
||||
|
||||
<!-- TODO: google analytics -->
|
||||
<!-- TODO: google feedback -->
|
||||
<!-- TODO: twitter widget (but only on pages that use twitter) -->
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
/* ==============================
|
||||
BASE STYLES
|
||||
============================== */
|
||||
|
||||
@import 'typography';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
// }
|
||||
// }
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/* ==============================
|
||||
LAYOUT STYLES
|
||||
============================== */
|
||||
|
||||
@import 'sidenav';
|
||||
@import 'content-layout';
|
||||
@import 'search-results';
|
||||
@import 'top-menu';
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* ==============================
|
||||
MODULE STYLES
|
||||
============================== */
|
||||
|
||||
@import 'hamburger';
|
||||
@import 'code';
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue