| OLD | NEW |
| 1 <!-- Copyright 2016 The Chromium Authors. All rights reserved. | 1 <!-- Copyright 2016 The Chromium Authors. All rights reserved. |
| 2 Use of this source code is governed by a BSD-style license that can be | 2 Use of this source code is governed by a BSD-style license that can be |
| 3 found in the LICENSE file. --> | 3 found in the LICENSE file. --> |
| 4 | 4 |
| 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h
tml"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h
tml"> |
| 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt
on.html"> |
| 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.htm
l"> | 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.htm
l"> |
| 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> | |
| 9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> | 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
| 10 | 9 |
| 11 <!-- | 10 <!-- |
| 12 Material design button that shows an icon. | |
| 13 | |
| 14 Example: | |
| 15 <oobe-icon-button icon="close"></oobe-icon-button> | |
| 16 | |
| 17 Attributes: | |
| 18 'icon' - a name of icon from material design set to show on button. | |
| 19 'disabled' - button is disabled when the attribute is set. | |
| 20 'aria-label' - accessibility label. | |
| 21 --> | |
| 22 <dom-module id="oobe-icon-button"> | |
| 23 <link rel="stylesheet" href="oobe_icon_button.css"> | |
| 24 <template> | |
| 25 <div on-click="onClick_" on-tap="onClick_"> | |
| 26 <paper-icon-button id="iconButton" icon="[[icon]]" disabled="[[disabled]]" | |
| 27 aria-label="[[ariaLabel]]"> | |
| 28 </paper-icon-button> | |
| 29 </div> | |
| 30 </template> | |
| 31 </dom-module> | |
| 32 | |
| 33 <!-- | |
| 34 Material design square button for text-labelled buttons. | 11 Material design square button for text-labelled buttons. |
| 35 By default, text is blue, background is white. | 12 By default, text is blue, background is white. |
| 36 |inverse| makes text white on a blue background. | 13 |inverse| makes text white on a blue background. |
| 37 | 14 |
| 38 Example: | 15 Example: |
| 39 <oobe-icon-button label="OK" inverse></oobe-icon-button> | 16 <oobe-icon-button i18n-content="oobeOKButtonText" inverse> |
| 40 <oobe-icon-button label="CANCEL"></oobe-icon-button> | 17 </oobe-icon-button> |
| 18 <oobe-icon-button i18n-content="oobeCancelButtonText"></oobe-icon-button> |
| 41 | 19 |
| 42 Attributes: | 20 Attributes: |
| 43 'label' - text on a button | |
| 44 'disabled' - button is disabled when the attribute is set. | 21 'disabled' - button is disabled when the attribute is set. |
| 45 'inverse' - makes text white and background blue | 22 'inverse' - makes text white and background blue |
| 46 --> | 23 --> |
| 47 <dom-module id="oobe-text-button"> | 24 <dom-module id="oobe-text-button"> |
| 48 <link rel="stylesheet" href="oobe_text_button.css"> | 25 <link rel="stylesheet" href="oobe_text_button.css"> |
| 49 <template> | 26 <template> |
| 50 <div on-click="onClick_" on-tap="onClick_"> | 27 <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" |
| 51 <paper-button id="textButton" disabled="[[disabled]]" | 28 inverse$="[[inverse]]"> |
| 52 inverse$="[[inverse]]"> | 29 <content></content> |
| 53 [[label]] | 30 </paper-button> |
| 54 <content></content> | |
| 55 </paper-button> | |
| 56 </div> | |
| 57 </template> | 31 </template> |
| 58 </dom-module> | 32 </dom-module> |
| 59 | 33 |
| 34 <!-- |
| 35 Material design button that shows an icon and displays text. |
| 36 |
| 37 Example: |
| 38 <oobe-welcome-secondary-button icon="close" |
| 39 i18n-content="oobeCloseButtonText"> |
| 40 </oobe-icon-button> |
| 41 |
| 42 Attributes: |
| 43 'icon' - a name of icon from material design set to show on button. |
| 44 'aria-label' - accessibility label. |
| 45 --> |
| 46 <dom-module id="oobe-welcome-secondary-button"> |
| 47 <link rel="stylesheet" href="oobe_welcome_secondary_button.css"> |
| 48 <template> |
| 49 <paper-button id="container" class="layout horizontal center" |
| 50 aria-label="[[ariaLabel]]"> |
| 51 <iron-icon icon="[[icon]]" class="oobe-icon"></iron-icon> |
| 52 <content></content> |
| 53 </paper-button> |
| 54 </template> |
| 55 </dom-module> |
| OLD | NEW |