| 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/paper-styles/color.html
"> |
| 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-icon/iron-icon.htm
l"> |
| 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/iron-iconset-svg/iron-i
conset-svg.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-button/paper-butt
on.html"> |
| 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-fab/paper-fab.htm
l"> |
| 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 <g id="arrow-forward"> | 18 <g id="arrow-forward"> |
| 19 <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"> | 19 <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"> |
| 20 </path> | 20 </path> |
| 21 </g> | 21 </g> |
| 22 </defs> | 22 </defs> |
| 23 </svg> | 23 </svg> |
| 24 </iron-iconset-svg> | 24 </iron-iconset-svg> |
| 25 | 25 |
| 26 <!-- | 26 <!-- |
| 27 Material design square button for text-labelled buttons. | 27 Material design square button for text-labelled buttons. |
| 28 By default, text is blue, background is white. | 28 By default, text is blue, background is white. |
| 29 |inverse| makes text white on a blue background. | 29 |inverse| makes text white on a blue background. |
| 30 Note, that content must have separate DOM node (i.e. a separate div). | 30 Note, that content must have separate DOM node (i.e. a separate div). |
| 31 | 31 |
| 32 Example: | 32 Example: |
| 33 <oobe-icon-button inverse> | 33 <oobe-icon-button inverse> |
| 34 <div i18n-content="oobeOKButtonText"></div> | 34 <div i18n-content="oobeOKButtonText"></div> |
| 35 </oobe-icon-button> | 35 </oobe-icon-button> |
| 36 | 36 |
| 37 Attributes: | 37 Attributes: |
| 38 'disabled' - button is disabled when the attribute is set. | 38 'disabled' - button is disabled when the attribute is set. |
| 39 'inverse' - makes text white and background blue | 39 'inverse' - makes text white and background blue. |
| 40 'label-for-aria' - accessibility label. | 40 'label-for-aria' - accessibility label. |
| 41 'border' - adds border to the button. |
| 41 --> | 42 --> |
| 42 <dom-module id="oobe-text-button"> | 43 <dom-module id="oobe-text-button"> |
| 43 <link rel="stylesheet" href="oobe_text_button.css"> | 44 <link rel="stylesheet" href="oobe_text_button.css"> |
| 44 <template> | 45 <template> |
| 45 <style> | 46 <style> |
| 46 :root { | 47 :root { |
| 47 --paper-button-flat-keyboard-focus: { | 48 --paper-button-flat-keyboard-focus: { |
| 48 border-color: var(--oobe-text-button-focused-border-color); | 49 border-color: var(--oobe-text-button-focused-border-color); |
| 49 border-radius: 2px; | 50 border-radius: 2px; |
| 50 border-style: solid; | 51 border-style: solid; |
| 51 border-width: 2px; | 52 border-width: 2px; |
| 52 }; | 53 }; |
| 53 } | 54 } |
| 54 </style> | 55 </style> |
| 55 <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" | 56 <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" |
| 56 inverse$="[[inverse]]" aria-label$="[[labelForAria]]"> | 57 inverse$="[[inverse]]" aria-label$="[[labelForAria]]" |
| 58 border$="[[border]]"> |
| 57 <div id="container" | 59 <div id="container" |
| 58 class="flex layout horizontal center center-justified self-stretch"> | 60 class="flex layout horizontal center center-justified self-stretch"> |
| 59 <content></content> | 61 <content></content> |
| 60 </div> | 62 </div> |
| 61 </paper-button> | 63 </paper-button> |
| 62 </template> | 64 </template> |
| 63 </dom-module> | 65 </dom-module> |
| 64 | 66 |
| 65 <!-- | 67 <!-- |
| 66 Material design square "<- Back" and "Next ->" buttons. | 68 Material design square "<- Back" and "Next ->" buttons. |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 122 class="flex layout horizontal center self-stretch"> | 124 class="flex layout horizontal center self-stretch"> |
| 123 <hd-iron-icon icon1x="[[icon1x]]" icon2x="[[icon2x]]" | 125 <hd-iron-icon icon1x="[[icon1x]]" icon2x="[[icon2x]]" |
| 124 class="oobe-icon"> | 126 class="oobe-icon"> |
| 125 </hd-iron-icon> | 127 </hd-iron-icon> |
| 126 <content></content> | 128 <content></content> |
| 127 </div> | 129 </div> |
| 128 </div> | 130 </div> |
| 129 </paper-button> | 131 </paper-button> |
| 130 </template> | 132 </template> |
| 131 </dom-module> | 133 </dom-module> |
| OLD | NEW |