From 0bc513f0d3da644603c489b7d2cc7876783fb095 Mon Sep 17 00:00:00 2001 From: Brian Nenninger Date: Sun, 24 Apr 2016 14:21:43 -0400 Subject: [PATCH 1/2] Use instead of in demos. --- src/components/button/README.md | 22 ++++++++++---------- src/components/icon/icon.scss | 2 -- src/components/list/README.md | 28 +++++++++++++------------- src/demo-app/button/button-demo.html | 24 +++++++++++----------- src/demo-app/button/button-demo.ts | 3 ++- src/demo-app/input/input-demo.html | 6 +++--- src/demo-app/input/input-demo.scss | 2 ++ src/demo-app/input/input-demo.ts | 3 ++- src/demo-app/list/list-demo.html | 4 ++-- src/demo-app/list/list-demo.scss | 2 +- src/demo-app/list/list-demo.ts | 3 ++- src/demo-app/toolbar/toolbar-demo.html | 18 ++++++++--------- src/demo-app/toolbar/toolbar-demo.ts | 3 ++- 13 files changed, 62 insertions(+), 58 deletions(-) diff --git a/src/components/button/README.md b/src/components/button/README.md index df9bb47b2cc5..dbf36dc73985 100644 --- a/src/components/button/README.md +++ b/src/components/button/README.md @@ -27,23 +27,23 @@ There are five types of buttons: * Defaults background to "accent" palette defined in theme * Box shadow applied * 40 by 40 px - + 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: - + ```html ``` @@ -53,13 +53,13 @@ Output: ### Theming -All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute. +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. +In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background. Example: - + ```html @@ -90,8 +90,8 @@ Output: * In high contrast mode, a strong border is added to the button to make it easier to see. * Button focus events originating from the keyboard will retain focus styles, while button focus events from the mouse will not. * As `md-button` is added to an existing `button` or `a` tag, it enjoys all the accessibility natively built into these elements. - - + + ### Upcoming work We will also be adding ink ripples to buttons in an upcoming milestone. diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss index 1fa23d71bc13..a8bd0cebe37d 100644 --- a/src/components/icon/icon.scss +++ b/src/components/icon/icon.scss @@ -13,7 +13,5 @@ md-icon { display: inline-block; fill: currentColor; height: $md-icon-size; - margin: auto; - vertical-align: middle; width: $md-icon-size; } diff --git a/src/components/list/README.md b/src/components/list/README.md index 4f9ced0631b2..74ea93547ed5 100644 --- a/src/components/list/README.md +++ b/src/components/list/README.md @@ -32,8 +32,8 @@ Output: ### Multi-line lists -If your list requires multiple lines per list item, annotate each line with an `md-line` attribute. -You can use whichever heading tag is appropriate for your DOM hierarchy (doesn't have to be `h3`), +If your list requires multiple lines per list item, annotate each line with an `md-line` attribute. +You can use whichever heading tag is appropriate for your DOM hierarchy (doesn't have to be `h3`), as long as the `md-line` attribute is included. ```html @@ -62,13 +62,13 @@ Two line list output: -Three line list output: +Three line list output: ### Lists with avatars -To include an avatar, add an image tag with an `md-list-avatar` attribute. +To include an avatar, add an image tag with an `md-list-avatar` attribute. ```html @@ -86,11 +86,11 @@ To include an avatar, add an image tag with an `md-list-avatar` attribute. Output: - + ### Dense lists -Lists are also available in "dense layout" mode, which shrinks the font size and height of the list -to suit UIs that may need to display more information. To enable this mode, add a `dense` attribute -to the main `md-list` tag. +Lists are also available in "dense layout" mode, which shrinks the font size and height of the list +to suit UIs that may need to display more information. To enable this mode, add a `dense` attribute +to the main `md-list` tag. ```html @@ -114,17 +114,17 @@ use `` tags.

Folders

- folder + folder

{{folder.name}}

{{folder.updated}}

Notes

- note + note

{{note.name}}

{{note.updated}}

- + ``` @@ -151,13 +151,13 @@ If you require a more complex nav list (e.g. with more than one target per item) {{ link }} ``` ### Lists with secondary text -Secondary text styling will be part of a broader typography module to -[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component +Secondary text styling will be part of a broader typography module to +[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component specifically. Gray text in the examples above comes from a "demo-2" class added manually by the demo. \ No newline at end of file diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html index a6e25ecb431c..3b4d4beeffa3 100644 --- a/src/demo-app/button/button-demo.html +++ b/src/demo-app/button/button-demo.html @@ -3,10 +3,10 @@ @@ -14,10 +14,10 @@ link link - check + check - check + check @@ -35,27 +35,27 @@
@@ -69,11 +69,11 @@ off
diff --git a/src/demo-app/button/button-demo.ts b/src/demo-app/button/button-demo.ts index 8304c19ac193..07aedc1ac3f7 100644 --- a/src/demo-app/button/button-demo.ts +++ b/src/demo-app/button/button-demo.ts @@ -1,11 +1,12 @@ import {Component} from 'angular2/core'; import {MdButton, MdAnchor} from '../../components/button/button'; +import {MdIcon} from '../../components/icon/icon'; @Component({ selector: 'button-demo', templateUrl: 'demo-app/button/button-demo.html', styleUrls: ['demo-app/button/button-demo.css'], - directives: [MdButton, MdAnchor] + directives: [MdButton, MdAnchor, MdIcon] }) export class ButtonDemo { isDisabled: boolean = false; diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html index 0c466a9e722a..6e7b157dc93b 100644 --- a/src/demo-app/input/input-demo.html +++ b/src/demo-app/input/input-demo.html @@ -85,10 +85,10 @@

- I favorite bold placeholder + I favorite bold placeholder - I also home italic hint labels + I also home italic hint labels

@@ -122,7 +122,7 @@
Both: - email  + email   @gmail.com

diff --git a/src/demo-app/input/input-demo.scss b/src/demo-app/input/input-demo.scss index e28f5c1c93f1..4ec33a506a96 100644 --- a/src/demo-app/input/input-demo.scss +++ b/src/demo-app/input/input-demo.scss @@ -13,7 +13,9 @@ .demo-icons { font-size: 100%; + height: inherit; vertical-align: top; + width: inherit; } .demo-transform { diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts index 65370b747648..b0c74263a981 100644 --- a/src/demo-app/input/input-demo.ts +++ b/src/demo-app/input/input-demo.ts @@ -3,6 +3,7 @@ import {MD_INPUT_DIRECTIVES} from '../../components/input/input'; import {MdButton} from '../../components/button/button'; import {MdCard} from '../../components/card/card'; import {MdCheckbox} from '../../components/checkbox/checkbox'; +import {MdIcon} from '../../components/icon/icon'; import {MdToolbar} from '../../components/toolbar/toolbar'; @@ -12,7 +13,7 @@ let max = 5; selector: 'input-demo', templateUrl: 'demo-app/input/input-demo.html', styleUrls: ['demo-app/input/input-demo.css'], - directives: [MdCard, MdCheckbox, MdButton, MdToolbar, MD_INPUT_DIRECTIVES] + directives: [MdCard, MdCheckbox, MdButton, MdIcon, MdToolbar, MD_INPUT_DIRECTIVES] }) export class InputDemo { dividerColor: boolean; diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html index 2f87affaef3e..da7fe5b9e53b 100644 --- a/src/demo-app/list/list-demo.html +++ b/src/demo-app/list/list-demo.html @@ -81,7 +81,7 @@

Nav lists

{{ link.name }} @@ -95,7 +95,7 @@

Nav lists

{{ link.name }} diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss index d1ac6a18f0ce..c46b28778025 100644 --- a/src/demo-app/list/list-demo.scss +++ b/src/demo-app/list/list-demo.scss @@ -13,7 +13,7 @@ margin-top: 20px; } - i { + md-icon { color: rgba(0,0,0,0.12); } } diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts index e28e99983318..7009a57fa0b4 100644 --- a/src/demo-app/list/list-demo.ts +++ b/src/demo-app/list/list-demo.ts @@ -1,12 +1,13 @@ import {Component} from 'angular2/core'; import {MdButton} from '../../components/button/button'; +import {MdIcon} from '../../components/icon/icon'; import {MD_LIST_DIRECTIVES} from '../../components/list/list'; @Component({ selector: 'list-demo', templateUrl: 'demo-app/list/list-demo.html', styleUrls: ['demo-app/list/list-demo.css'], - directives: [MD_LIST_DIRECTIVES, MdButton] + directives: [MD_LIST_DIRECTIVES, MdButton, MdIcon] }) export class ListDemo { items: string[] = [ diff --git a/src/demo-app/toolbar/toolbar-demo.html b/src/demo-app/toolbar/toolbar-demo.html index 2426c6113e83..e6d3f30c5172 100644 --- a/src/demo-app/toolbar/toolbar-demo.html +++ b/src/demo-app/toolbar/toolbar-demo.html @@ -2,34 +2,34 @@

- menu + menu Default Toolbar - code + code

- menu + menu Primary Toolbar - code + code

- menu + menu Accent Toolbar - code + code

@@ -51,7 +51,7 @@ - verified_user + verified_user @@ -59,8 +59,8 @@ - favorite - delete + favorite + delete

diff --git a/src/demo-app/toolbar/toolbar-demo.ts b/src/demo-app/toolbar/toolbar-demo.ts index b23f60335e84..a2bfedcea988 100644 --- a/src/demo-app/toolbar/toolbar-demo.ts +++ b/src/demo-app/toolbar/toolbar-demo.ts @@ -1,11 +1,12 @@ import {Component} from 'angular2/core'; +import {MdIcon} from '../../components/icon/icon'; import {MdToolbar} from '../../components/toolbar/toolbar'; @Component({ selector: 'toolbar-demo', templateUrl: 'demo-app/toolbar/toolbar-demo.html', styleUrls: ['demo-app/toolbar/toolbar-demo.css'], - directives: [MdToolbar] + directives: [MdToolbar, MdIcon] }) export class ToolbarDemo { From b66c003224f9393910109a87a0c6aac47ba2c329 Mon Sep 17 00:00:00 2001 From: Brian Nenninger Date: Tue, 26 Apr 2016 14:08:18 -0400 Subject: [PATCH 2/2] Keep 'i' selector for md-fab padding. --- src/components/button/_button-base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button/_button-base.scss b/src/components/button/_button-base.scss index a9af182c8c7f..fc591935e7d0 100644 --- a/src/components/button/_button-base.scss +++ b/src/components/button/_button-base.scss @@ -107,7 +107,7 @@ $md-mini-fab-padding: 8px !default; height: $size; padding: 0; - md-icon { + i, md-icon { padding: $padding 0; }