| 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-icon/iron-icon.htm
l"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> |
| 6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-i
conset-svg.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-i
conset-svg.html"> |
| 7 <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-button/paper-butt
on.html"> |
| 8 <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-fab/paper-fab.htm
l"> |
| 9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> | 9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
| 10 | 10 |
| 11 <iron-iconset-svg name="oobe-buttons" size="24"> | 11 <iron-iconset-svg name="oobe-buttons" size="24"> |
| 12 <svg> | 12 <svg> |
| 13 <defs> | 13 <defs> |
| 14 <g id="arrow-back"> | 14 <g id="arrow-back"> |
| 15 <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"> | 15 <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"> |
| 16 </path> | 16 </path> |
| 17 </g> | 17 </g> |
| 18 </defs> | 18 </defs> |
| 19 </svg> | 19 </svg> |
| 20 </iron-iconset-svg> | 20 </iron-iconset-svg> |
| 21 | 21 |
| 22 <!-- | 22 <!-- |
| 23 Material design square button for text-labelled buttons. | 23 Material design square button for text-labelled buttons. |
| 24 By default, text is blue, background is white. | 24 By default, text is blue, background is white. |
| 25 |inverse| makes text white on a blue background. | 25 |inverse| makes text white on a blue background. |
| 26 Note, that content must have separate DOM node (i.e. a separate div). | 26 Note, that content must have separate DOM node (i.e. a separate div). |
| 27 | 27 |
| 28 Example: | 28 Example: |
| 29 <oobe-icon-button inverse> | 29 <oobe-icon-button inverse> |
| 30 <div>$i18n{oobeOKButtonText}</div> | 30 <div i18n-content="oobeOKButtonText"></div> |
| 31 </oobe-icon-button> | 31 </oobe-icon-button> |
| 32 | 32 |
| 33 Attributes: | 33 Attributes: |
| 34 'disabled' - button is disabled when the attribute is set. | 34 'disabled' - button is disabled when the attribute is set. |
| 35 'inverse' - makes text white and background blue | 35 'inverse' - makes text white and background blue |
| 36 --> | 36 --> |
| 37 <dom-module id="oobe-text-button"> | 37 <dom-module id="oobe-text-button"> |
| 38 <link rel="stylesheet" href="oobe_text_button.css"> | 38 <link rel="stylesheet" href="oobe_text_button.css"> |
| 39 <template> | 39 <template> |
| 40 <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" | 40 <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" |
| (...skipping 16 matching lines...) Expand all Loading... |
| 57 | 57 |
| 58 Attributes: | 58 Attributes: |
| 59 'disabled' - button is disabled when the attribute is set. | 59 'disabled' - button is disabled when the attribute is set. |
| 60 --> | 60 --> |
| 61 <dom-module id="oobe-back-button"> | 61 <dom-module id="oobe-back-button"> |
| 62 <link rel="stylesheet" href="oobe_back_button.css"> | 62 <link rel="stylesheet" href="oobe_back_button.css"> |
| 63 <template> | 63 <template> |
| 64 <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"> | 64 <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"> |
| 65 <div class="flex horizontal layout start center"> | 65 <div class="flex horizontal layout start center"> |
| 66 <iron-icon icon="oobe-buttons:arrow-back"></iron-icon> | 66 <iron-icon icon="oobe-buttons:arrow-back"></iron-icon> |
| 67 <div id="text">$i18n{back}</div> | 67 <div id="text" i18n-content="back"></div> |
| 68 </div> | 68 </div> |
| 69 </paper-button> | 69 </paper-button> |
| 70 </template> | 70 </template> |
| 71 </dom-module> | 71 </dom-module> |
| 72 | 72 |
| 73 <!-- | 73 <!-- |
| 74 Material design button that shows an icon and displays text. | 74 Material design button that shows an icon and displays text. |
| 75 | 75 |
| 76 Example: | 76 Example: |
| 77 <oobe-welcome-secondary-button icon="close"> | 77 <oobe-welcome-secondary-button icon="close"> |
| 78 <div>i18n version of oobeCloseButtonText</div> | 78 <div i18n-content="oobeCloseButtonText"></div> |
| 79 </oobe-welcome-secondary-button> | 79 </oobe-welcome-secondary-button> |
| 80 | 80 |
| 81 Attributes: | 81 Attributes: |
| 82 'icon' - a name of icon from material design set to show on button. | 82 'icon' - a name of icon from material design set to show on button. |
| 83 'aria-label' - accessibility label. | 83 'aria-label' - accessibility label. |
| 84 --> | 84 --> |
| 85 <dom-module id="oobe-welcome-secondary-button"> | 85 <dom-module id="oobe-welcome-secondary-button"> |
| 86 <link rel="stylesheet" href="oobe_welcome_secondary_button.css"> | 86 <link rel="stylesheet" href="oobe_welcome_secondary_button.css"> |
| 87 <template> | 87 <template> |
| 88 <paper-button id="button" aria-label="[[ariaLabel]]"> | 88 <paper-button id="button" aria-label="[[ariaLabel]]"> |
| 89 <div id="container" class="flex layout vertical center self-stretch"> | 89 <div id="container" class="flex layout vertical center self-stretch"> |
| 90 <div id="subcontainer" | 90 <div id="subcontainer" |
| 91 class="flex layout horizontal center self-stretch"> | 91 class="flex layout horizontal center self-stretch"> |
| 92 <iron-icon icon="[[icon]]" class="oobe-icon"></iron-icon> | 92 <iron-icon icon="[[icon]]" class="oobe-icon"></iron-icon> |
| 93 <content></content> | 93 <content></content> |
| 94 </div> | 94 </div> |
| 95 </div> | 95 </div> |
| 96 </paper-button> | 96 </paper-button> |
| 97 </template> | 97 </template> |
| 98 </dom-module> | 98 </dom-module> |
| OLD | NEW |