From ebf74195ac30f2436a704a6c5bf8a33ea0d79aad Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Thu, 22 Dec 2016 01:46:19 -0800 Subject: [PATCH 1/4] Add guides --- src/_app-theme.scss | 10 ++ .../component-list/_component-list-theme.scss | 8 -- .../pages/component-list/component-list.html | 2 +- .../pages/component-list/component-list.scss | 11 -- .../_component-viewer-theme.scss | 43 +------ .../component-viewer/component-viewer.html | 2 +- .../component-viewer/component-viewer.scss | 79 ------------ src/app/pages/guide-list/guide-list.html | 3 + src/app/pages/guide-viewer/guide-viewer.html | 6 +- src/app/pages/guide-viewer/guide-viewer.scss | 4 + src/app/pages/guide-viewer/guide-viewer.ts | 9 +- src/app/pages/homepage/homepage.html | 2 +- src/app/shared/guide-items/guide-items.ts | 17 ++- src/assets/documents/README.html | 121 ------------------ .../documents/guides/getting-started.html | 71 ++++++++++ .../guides/theming-your-components.html | 53 ++++++++ src/assets/documents/guides/theming.html | 90 +++++++++++++ src/assets/documents/index.html | 1 - src/assets/example/button-demo.html | 104 --------------- src/assets/example/button-demo.scss | 17 --- src/assets/example/button-demo.ts | 12 -- src/main.scss | 24 ++-- src/styles/_typography-theme.scss | 43 +++++++ src/styles/_typography.scss | 69 ++++++++++ 24 files changed, 381 insertions(+), 420 deletions(-) delete mode 100644 src/assets/documents/README.html create mode 100644 src/assets/documents/guides/getting-started.html create mode 100644 src/assets/documents/guides/theming-your-components.html create mode 100644 src/assets/documents/guides/theming.html delete mode 100644 src/assets/documents/index.html delete mode 100644 src/assets/example/button-demo.html delete mode 100644 src/assets/example/button-demo.scss delete mode 100644 src/assets/example/button-demo.ts create mode 100644 src/styles/_typography-theme.scss create mode 100644 src/styles/_typography.scss diff --git a/src/_app-theme.scss b/src/_app-theme.scss index 96c208664..ab5baf8fd 100644 --- a/src/_app-theme.scss +++ b/src/_app-theme.scss @@ -5,6 +5,7 @@ @import './app/pages/component-list/component-list-theme'; @import './app/pages/component-category-list/component-category-list-theme'; +@import './styles/typography-theme'; @import './app/shared/navbar/navbar-theme'; @import './app/shared/example-viewer/example-viewer-theme'; @@ -20,6 +21,15 @@ background: md-color($background, background); } + .docs-primary-header { + background: md-color($primary); + + h1 { + color: md-color($primary, default-contrast); + } + } + + @include docs-site-typography-theme($theme); @include nav-bar-theme($theme); @include component-viewer-sidenav-theme($theme); @include home-page-theme($theme); diff --git a/src/app/pages/component-list/_component-list-theme.scss b/src/app/pages/component-list/_component-list-theme.scss index 0b0f5a904..5d69a2fe6 100644 --- a/src/app/pages/component-list/_component-list-theme.scss +++ b/src/app/pages/component-list/_component-list-theme.scss @@ -5,14 +5,6 @@ $background: map-get($theme, background); $foreground: map-get($theme, foreground); - .docs-component-list-header { - background: md-color($primary); - - h1 { - color: md-color($primary, default-contrast); - } - } - .docs-component-list-item { color: md-color($foreground, secondary-text); } diff --git a/src/app/pages/component-list/component-list.html b/src/app/pages/component-list/component-list.html index bbc54d1d6..5a22e75bc 100644 --- a/src/app/pages/component-list/component-list.html +++ b/src/app/pages/component-list/component-list.html @@ -1,4 +1,4 @@ -
+

{{category.name}}

diff --git a/src/app/pages/component-list/component-list.scss b/src/app/pages/component-list/component-list.scss index 1bc1cfd75..a50e5fc68 100644 --- a/src/app/pages/component-list/component-list.scss +++ b/src/app/pages/component-list/component-list.scss @@ -21,14 +21,3 @@ background-repeat: no-repeat; background-position: center; } - -.docs-component-list-header { - padding-left: 20px; - - h1 { - font-size: 30px; - font-weight: 300; - margin: 0; - padding: 50px; - } -} diff --git a/src/app/pages/component-viewer/_component-viewer-theme.scss b/src/app/pages/component-viewer/_component-viewer-theme.scss index ed51e4515..326f3b914 100644 --- a/src/app/pages/component-viewer/_component-viewer-theme.scss +++ b/src/app/pages/component-viewer/_component-viewer-theme.scss @@ -1,3 +1,5 @@ +@import '~@angular/material/core/theming/theming'; + @mixin component-viewer-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); @@ -8,47 +10,6 @@ app-component-viewer { color: md-color($foreground, secondary-text); - .docs-component-viewer-tabbed-content { - h1 { - color: md-color($primary, 800); - background: rgba(md-color($foreground, secondary-text), .03); - } - - h3, h2, h4, h5, p, ol, li{ - color: md-color($foreground, secondary-text); - } - - a { - color: md-color($primary); - } - - table { - box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12); - } - - table tbody th{ - border: 1px solid rgba(md-color($foreground, secondary-text), .03); - } - - td { - color: md-color($foreground, secondary-text); - border: 1px solid rgba(md-color($foreground, secondary-text), .03); - } - - th { - color: md-color($foreground, secondary-text); - background: rgba(md-color($foreground, secondary-text), .03); - } - } - - .docs-component-viewer-header { - background: md-color($primary); - - h1 { - color: md-color($primary, default-contrast); - } - } - .md-tab-label:focus { color: md-color($foreground, secondary-text); } diff --git a/src/app/pages/component-viewer/component-viewer.html b/src/app/pages/component-viewer/component-viewer.html index e7d2cc752..b7c32ac97 100644 --- a/src/app/pages/component-viewer/component-viewer.html +++ b/src/app/pages/component-viewer/component-viewer.html @@ -1,4 +1,4 @@ -
+

Component - {{componentDocItem.name}}

diff --git a/src/app/pages/component-viewer/component-viewer.scss b/src/app/pages/component-viewer/component-viewer.scss index 6baef0d41..31391763c 100644 --- a/src/app/pages/component-viewer/component-viewer.scss +++ b/src/app/pages/component-viewer/component-viewer.scss @@ -2,17 +2,6 @@ app-component-viewer { font-weight: 400; } -.docs-component-viewer-header { - padding-left: 20px; - - h1 { - font-size: 30px; - font-weight: 300; - margin: 0; - padding: 50px; - } -} - .docs-component-viewer-tabbed-content { margin: 50px 70px; @@ -21,74 +10,6 @@ app-component-viewer { } } -.docs-component-viewer-tabbed-content .docs-component-view-text-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; - } - - .md-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; - } -} - .md-tab-header { border: none; margin-bottom: 30px; diff --git a/src/app/pages/guide-list/guide-list.html b/src/app/pages/guide-list/guide-list.html index e7bba1e8c..1989caab9 100644 --- a/src/app/pages/guide-list/guide-list.html +++ b/src/app/pages/guide-list/guide-list.html @@ -1,3 +1,6 @@ +
+

Guides

+
+
+

{{guide.name}}

+
+ + diff --git a/src/app/pages/guide-viewer/guide-viewer.scss b/src/app/pages/guide-viewer/guide-viewer.scss index e69de29bb..c8b68b035 100644 --- a/src/app/pages/guide-viewer/guide-viewer.scss +++ b/src/app/pages/guide-viewer/guide-viewer.scss @@ -0,0 +1,4 @@ +.docs-guide-content { + display: block; + margin: 20px 0 0 70px; +} diff --git a/src/app/pages/guide-viewer/guide-viewer.ts b/src/app/pages/guide-viewer/guide-viewer.ts index 6ec48cbc3..db2bc5c38 100644 --- a/src/app/pages/guide-viewer/guide-viewer.ts +++ b/src/app/pages/guide-viewer/guide-viewer.ts @@ -1,20 +1,19 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import {Component} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; -import {GuideItems} from '../../shared/guide-items/guide-items'; +import {GuideItems, GuideItem} from '../../shared/guide-items/guide-items'; @Component({ selector: 'guide-viewer', templateUrl: './guide-viewer.html', styleUrls: ['./guide-viewer.scss'], - encapsulation: ViewEncapsulation.None, }) export class GuideViewer { - documentUrl: string; + guide: GuideItem; constructor(private _route: ActivatedRoute, public guideItems: GuideItems) { _route.params.subscribe(p => { - this.documentUrl = guideItems.getItemById(p['id']).document; + this.guide = guideItems.getItemById(p['id']); }); } } diff --git a/src/app/pages/homepage/homepage.html b/src/app/pages/homepage/homepage.html index dd6abdfb2..c649ef782 100644 --- a/src/app/pages/homepage/homepage.html +++ b/src/app/pages/homepage/homepage.html @@ -27,7 +27,7 @@

Sprint from Zero to App

Fast and Consistent

-

Finely tunes performance, because every millisecond counts. Fully tested across +

Finely tuned performance, because every millisecond counts. Fully tested across modern browsers.

diff --git a/src/app/shared/guide-items/guide-items.ts b/src/app/shared/guide-items/guide-items.ts index 88aa0eb78..033a30bf0 100644 --- a/src/app/shared/guide-items/guide-items.ts +++ b/src/app/shared/guide-items/guide-items.ts @@ -8,14 +8,19 @@ export interface GuideItem { const GUIDES = [ { - id: 'readme', - name: 'Read Me', - document: '/assets/documents/README.html', + id: 'getting-started', + name: 'Getting started', + document: '/assets/documents/guides/getting-started.html', }, { - id: 'card', - name: 'Card', - document: '/assets/documents/overview/card.html', + id: 'theming', + name: 'Theming Angular Material', + document: '/assets/documents/guides/theming.html', + }, + { + id: 'theming-your-components', + name: 'Theming your own components', + document: '/assets/documents/guides/theming-your-components.html', }, ]; diff --git a/src/assets/documents/README.html b/src/assets/documents/README.html deleted file mode 100644 index 93a8ad761..000000000 --- a/src/assets/documents/README.html +++ /dev/null @@ -1,121 +0,0 @@ -

md-button

-

md-button is an HTML <button> or <a> tag enhanced with styling and animation to match the -Material Design button spec.

-

Users should employ a button element (<button>) when clicking triggers some action in the current -view without navigating. An anchor element (<a>) should be used when clicking navigates -the user to another URL. Depending on which element is used, the component will either be an -instance of MdButton or MdAnchor. Visually, the two are identical.

-

Button types

-

There are five types of buttons:

-
    -
  1. Flat buttons - md-button
      -
    • Rectangular button
      • -
    • Defaults to white background
      • -
    • No box shadow
      • -
    -
    2. -
  2. Raised buttons - md-raised-button
      -
    • Rectangular button
      • -
    • Defaults to white background
      • -
    • Box shadow applied
      • -
    -
    3. -
  3. Icon buttons - md-icon-button
      -
    • Circular button
      • -
    • Transparent background
      • -
    • 40 by 40 px
      • -
    -
    4. -
  4. Floating Action Buttons (FABs) - md-fab
      -
    • Circular button
      • -
    • Defaults background to "accent" palette defined in theme
      • -
    • Box shadow applied
      • -
    • 56 by 56 px
      • -
    -
    5. -
  5. Mini Floating Action Buttons (Mini FABs) - md-mini-fab
      -
    • Circular button
      • -
    • Defaults background to "accent" palette defined in theme
      • -
    • Box shadow applied
      • -
    • 40 by 40 px
      • -
    -
    6. -
-

Each is an attribute directive that you can add to a button or a tag. You can provide custom content to the button by inserting it -between the tags, as you would with a normal button.

-

Example:

-
-
<button md-button>FLAT</button>
-<button md-raised-button>RAISED</button>
-<button md-icon-button>
-    <md-icon class="md-24">favorite</md-icon>
-</button>
-<button md-fab>
-    <md-icon class="md-24">add</md-icon>
-</button>
-<button md-mini-fab>
-    <md-icon class="md-24">add</md-icon>
-</button>
-
-

Output:

-

-

Theming

-

All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the color attribute. -Simply pass in the palette name.

-

In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background.

-

Example:

-
-
<button md-raised-button color="primary">PRIMARY</button>
-<button md-raised-button color="accent">ACCENT</button>
-<button md-raised-button color="warn">WARN</button>
-
-

Output:

-

-

Disabling

-

You can disable any button type through the native disabled property. You can add it directly, or bind it to a property on your -component class by adding [disabled]="isDisabled" given that the isDisabled -property exists.

-
<button md-button disabled>OFF</button>
-<button md-raised-button [disabled]="isDisabled">OFF</button>
-<button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>
-
-

Output:

-

-

Accessibility

- -

Upcoming work

-

We will also be adding ink ripples to buttons in an upcoming milestone.

-

API Summary

-

Properties:

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
color`"primary""accent""warn"`The color palette of the button
disabledbooleanWhether or not the button is disabled
disableRipplebooleanWhether the ripple effect when the button is clicked should be disabled
diff --git a/src/assets/documents/guides/getting-started.html b/src/assets/documents/guides/getting-started.html new file mode 100644 index 000000000..46bf4e920 --- /dev/null +++ b/src/assets/documents/guides/getting-started.html @@ -0,0 +1,71 @@ +

Get started with Angular Material 2 using the Angular CLI.

+

Install the CLI

+
 npm install -g angular-cli
+
+

Create a new project

+
 ng new my-project
+
+

The new command creates a project with a build system for your Angular app.

+

Install Angular Material components

+
npm install --save @angular/material
+
+

Import the Angular Material NgModule

+

src/app/app.module.ts

+
import { MaterialModule } from '@angular/material';
+// other imports 
+@NgModule({
+  imports: [MaterialModule.forRoot()],
+  ...
+})
+export class PizzaPartyAppModule { }
+
+

Include the core and theme styles:

+

This is required to apply all of the core and theme styles to your application. You can either +use a pre-built theme, or define your own custom theme.

+

:trident: See the theming guide for instructions.

+

Additional setup for md-slide-toggle and md-slider:

+

The slide-toggle and slider components have a dependency on HammerJS.

+

Add HammerJS to your application via npm, a CDN +(such as the Google CDN), or served +directly from your app.

+

If you want to include HammerJS from npm, you can install it:

+
npm install --save hammerjs 
+npm install --save-dev @types/hammerjs
+
+

Import HammerJS on your app's module.

+

src/app/app.module.ts

+
import 'hammerjs';
+
+

Finally, you need to add hammerjs to the types section of your tsconfig.json file:

+
{
+  "compilerOptions": {
+    "types": [
+      "hammerjs"
+    ]
+  }
+}
+
+

Configuring SystemJS

+

If your project is using SystemJS for module loading, you will need to add @angular/material +to the SystemJS configuration:

+
System.config({
+  // existing configuration options
+  map: {
+    ...,
+    '@angular/material': 'npm:@angular/material/material.umd.js'
+  }
+});
+
+

[Optional] Using Material Design icons with md-icon:

+ +

src/index.html

+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+

Sample Angular Material 2 projects

+ diff --git a/src/assets/documents/guides/theming-your-components.html b/src/assets/documents/guides/theming-your-components.html new file mode 100644 index 000000000..283abd320 --- /dev/null +++ b/src/assets/documents/guides/theming-your-components.html @@ -0,0 +1,53 @@ +

Theming your custom components

+

In order to style your own components with Angular Material's tooling, the component's styles must be defined with Sass.

+

Using @mixin to automatically apply a theme

+

Why using @mixin

+

The advantage of using a @mixin function is that when you change your theme, every file that uses it will be updated automatically. +Calling it with a different theme argument allow multiple themes within the app or component.

+

How to use @mixin

+

We can better theming our custom components adding a @mixin function to its theme file and then calling this function to apply a theme.

+

All you need is to create a @mixin function in the custom-component-theme.scss

+
// Import all the tools needed to customize the theme and extract parts of it
+@import '~@angular/material/core/theming/all-theme';
+
+// Define a mixin that accepts a theme and outputs the color styles for the component.
+@mixin candy-carousel-theme($theme) {
+  // Extract whichever individual palettes you need from the theme.
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+
+  // Use md-color to extract individual colors from a palette as necessary.
+  .candy-carousel {
+    background-color: md-color($primary);
+    border-color: md-color($accent, A400);
+  }
+}
+
+

Now you just have to call the @mixin function to apply the theme:

+
// Import a pre-built theme
+@import '~@angular/material/core/theming/prebuilt/deeppurple-amber';
+// Import your custom input theme file so you can call the custom-input-theme function
+@import 'app/candy-carousel/candy-carousel-theme.scss';
+
+// Using the $theme variable from the pre-built theme you can call the theming function
+@include candy-carousel-theme($theme);
+
+

For more details about the theming functions, see the comments in the +source.

+

Best practices using @mixin

+

When using @mixin, the theme file should only contain the definitions that are affected by the passed-in theme.

+

All styles that are not affected by the theme should be placed in a candy-carousel.scss file. This file should contain everything that is not affected by the theme like sizes, transitions...

+

Styles that are affected by the theme should be placed in a separated theming file as _candy-carousel-theme.scss and the file should have a _ before the name. This file should contain the @mixin function responsible for applying the theme to the component.

+

Using colors from a palette

+

You can consume the theming functions from the @angular/material/core/theming/theming and Material palette vars from @angular/material/core/theming/palette. You can use the md-color function to extract a specific color from a palette. For example:

+
// Import theming functions
+@import '~@angular/material/core/theming/theming';
+// Import your custom theme
+@import 'src/unicorn-app-theme.scss';
+
+// Use md-color to extract individual colors from a palette as necessary.
+.candy-carousel {
+  background-color: md-color($candy-app-primary);
+  border-color: md-color($candy-app-accent, A400);
+}
+
diff --git a/src/assets/documents/guides/theming.html b/src/assets/documents/guides/theming.html new file mode 100644 index 000000000..a6dd0830d --- /dev/null +++ b/src/assets/documents/guides/theming.html @@ -0,0 +1,90 @@ +

Theming your Angular Material app

+

What is a theme?

+

A theme is the set of colors that will be applied to the Angular Material components. The +library's approach to theming is based on the guidance from the Material Design spec.

+

In Angular Material, a theme is created by composing multiple palettes. In particular, +a theme consists of:

+ +

In Angular Material 2, all theme styles are generated statically at build-time so that your +app doesn't have to spend cycles generating theme styles on startup.

+

Using a pre-built theme

+

Angular Material comes prepackaged with several pre-built theme css files. These theme files also +include all of the styles for core (styles common to all components), so you only have to include a +single css file for Angular Material in your app.

+

You can include a theme file directly into your application from +@angular/material/core/theming/prebuilt

+

If you're using Angular CLI, this is as simple as including one line +in your style.css file:

+
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
+
+

Alternatively, you can just reference the file directly. This would look something like

+
<link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
+
+

The actual path will depend on your server setup.

+

You can also concatenate the file with the rest of your application's css.

+

Defining a custom theme

+

When you want more customization than a pre-built theme offers, you can create your own theme file.

+

A theme file is a simple Sass file that defines your palettes and passes them to mixins that output +the corresponding styles. A typical theme file will look something like this:

+
@import '~@angular/material/core/theming/all-theme';
+// Plus imports for other components in your app.
+
+// Include the base styles for Angular Material core. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include md-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.
+$candy-app-primary: md-palette($md-indigo);
+$candy-app-accent:  md-palette($md-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$candy-app-warn:    md-palette($md-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($candy-app-theme);
+
+

You only need this single Sass file; you do not need to use Sass to style the rest of your app.

+

If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to +add a new entry to the "styles" list in angular-cli.json pointing to the theme +file (e.g., unicorn-app-theme.scss).

+

If you're not using the Angular CLI, you can use any existing Sass tooling to build the file (such +as gulp-sass or grunt-sass). The simplest approach is to use the node-sass CLI; you simply run:

+
node-sass src/unicorn-app-theme.scss dist/unicorn-app-theme.css
+

and then include the output file in your application.

+

The theme file can be concatenated and minified with the rest of the application's css.

+

Multiple themes

+

You can extend the example above to define a second (or third or fourth) theme that is gated by +some selector. For example, we could append the following to the example above to define a +secondary dark theme:

+
.unicorn-dark-theme {
+  $dark-primary: md-palette($md-blue-grey);
+  $dark-accent:  md-palette($md-amber, A200, A100, A400);
+  $dark-warn:    md-palette($md-deep-orange);
+
+  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+  @include angular-material-theme($dark-theme);   
+}
+
+

With this, any element inside of a parent with the unicorn-dark-theme class will use this +dark theme.

+

Theming your own components

+

For more details about theming your own components, see theming-your-components.md

+

Future work

+ diff --git a/src/assets/documents/index.html b/src/assets/documents/index.html deleted file mode 100644 index 1ce671b24..000000000 --- a/src/assets/documents/index.html +++ /dev/null @@ -1 +0,0 @@ -

Blah

diff --git a/src/assets/example/button-demo.html b/src/assets/example/button-demo.html deleted file mode 100644 index 5fb68da3d..000000000 --- a/src/assets/example/button-demo.html +++ /dev/null @@ -1,104 +0,0 @@ -
-
- - - - -
- -
- SEARCH - SEARCH - - check - - - check - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - - - -
- -
-
-

isDisabled: {{isDisabled}}, clickCounter: {{clickCounter}}

- - - - -
- - - off - - - - -
-
- SEARCH - -
-
- SEARCH - -
-
- - - - -
-
- - - - -
-
diff --git a/src/assets/example/button-demo.scss b/src/assets/example/button-demo.scss deleted file mode 100644 index fd50dbf1b..000000000 --- a/src/assets/example/button-demo.scss +++ /dev/null @@ -1,17 +0,0 @@ -.demo-button { - button, a { - margin: 8px; - text-transform: uppercase; - } - - section { - display: flex; - align-items: center; - background-color: #f7f7f7; - margin: 8px; - } - - p { - padding:5px 15px; - } -} diff --git a/src/assets/example/button-demo.ts b/src/assets/example/button-demo.ts deleted file mode 100644 index 376186f84..000000000 --- a/src/assets/example/button-demo.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {Component} from '@angular/core'; - - -@Component({ - selector: 'button-demo', - templateUrl: 'button-demo.html', - styleUrls: ['button-demo.css'], -}) -export class ButtonDemo { - isDisabled: boolean = false; - clickCounter: number = 0; -} diff --git a/src/main.scss b/src/main.scss index d56dae330..270514b71 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,9 +1,11 @@ @import '~@angular/material/core/theming/all-theme'; @import './app-theme'; +@import './styles/typography'; // Include material core styles. @include md-core(); +@include docs-site-typography(); // Define the light theme. @@ -14,17 +16,6 @@ $theme: md-light-theme($primary, $accent); @include angular-material-theme($theme); @include material-docs-app-theme($theme); -// Define the dark theme. -.docs-dark-theme { - $dark-primary: md-palette($md-cyan, 900, 700, 800); - $dark-accent: md-palette($md-amber, A400, A200, A700); - $dark-warn: md-palette($md-deep-orange); - - $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn); - @include angular-material-theme($dark-theme); - @include material-docs-app-theme($dark-theme); -} - body { font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; margin: 0; @@ -37,3 +28,14 @@ body { h1, h2 { weight: 400; } + +.docs-primary-header { + padding-left: 20px; + + h1 { + font-size: 30px; + font-weight: 300; + margin: 0; + padding: 50px; + } +} diff --git a/src/styles/_typography-theme.scss b/src/styles/_typography-theme.scss new file mode 100644 index 000000000..c5979df05 --- /dev/null +++ b/src/styles/_typography-theme.scss @@ -0,0 +1,43 @@ +@import '~@angular/material/core/theming/theming'; + +@mixin docs-site-typography-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .docs-component-viewer-tabbed-content, + .docs-guide-content { + h1 { + color: md-color($primary, 800); + background: rgba(md-color($foreground, secondary-text), .03); + } + + h3, h2, h4, h5, p, ol, li{ + color: md-color($foreground, secondary-text); + } + + a { + color: md-color($primary); + } + + table { + box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12); + } + + table tbody th{ + border: 1px solid rgba(md-color($foreground, secondary-text), .03); + } + + td { + color: md-color($foreground, secondary-text); + border: 1px solid rgba(md-color($foreground, secondary-text), .03); + } + + th { + color: md-color($foreground, secondary-text); + background: rgba(md-color($foreground, secondary-text), .03); + } + } +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss new file mode 100644 index 000000000..4261cac2e --- /dev/null +++ b/src/styles/_typography.scss @@ -0,0 +1,69 @@ +@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; + } + + .md-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; + } + } +} From 02a62695ccf111c176621674adf03106d4adeb4b Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Thu, 22 Dec 2016 01:53:14 -0800 Subject: [PATCH 2/4] Update homepage get-started link --- src/app/pages/homepage/homepage.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/homepage/homepage.html b/src/app/pages/homepage/homepage.html index c649ef782..825cd7df4 100644 --- a/src/app/pages/homepage/homepage.html +++ b/src/app/pages/homepage/homepage.html @@ -5,7 +5,7 @@

Angular Material

Material Design components for Angular 2 apps

- Get started + Get started
From 41e839659afc7e82494f69941ed9beda3b1342a0 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Thu, 22 Dec 2016 01:54:48 -0800 Subject: [PATCH 3/4] Update second get-started link on homepage --- src/app/pages/homepage/homepage.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/homepage/homepage.html b/src/app/pages/homepage/homepage.html index 825cd7df4..8b416f8ea 100644 --- a/src/app/pages/homepage/homepage.html +++ b/src/app/pages/homepage/homepage.html @@ -51,6 +51,6 @@

Optimized for Angular

- + Get started
From af6871935309dbfbc8335fec3f0bf0c4b1d5d908 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Thu, 22 Dec 2016 09:13:03 -0800 Subject: [PATCH 4/4] fix test --- src/app/shared/guide-items/guide-items.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/shared/guide-items/guide-items.spec.ts b/src/app/shared/guide-items/guide-items.spec.ts index c2d9bc7b5..7a561114b 100644 --- a/src/app/shared/guide-items/guide-items.spec.ts +++ b/src/app/shared/guide-items/guide-items.spec.ts @@ -30,6 +30,6 @@ describe('GuideItems', () => { }); it('should get a doc item by id', () => { - expect(guideItems.getItemById('readme')).toBeDefined(); + expect(guideItems.getItemById('getting-started')).toBeDefined(); }); });