| 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-content="oobeOKButtonText"></div> | 30       <div>$i18n{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-content="back"></div> | 67         <div id="text">$i18n{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-content="oobeCloseButtonText"></div> | 78       <div>i18n version of 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 | 
|---|