| <!-- Copyright 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. --> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| |
| <iron-iconset-svg name="oobe-buttons-20" size="20"> |
| <svg> |
| <defs> |
| <g id="arrow-forward" fill-rule="nonzero"> |
| <path d="M7 13.825L11.327 10 7 6.175 8.332 5 14 10l-5.668 5z"> |
| </path> |
| </g> |
| </defs> |
| </svg> |
| </iron-iconset-svg> |
| |
| <iron-iconset-svg name="oobe-buttons-40" size="40"> |
| <svg> |
| <defs> |
| <g id="arrow-forward" fill-rule="nonzero"> |
| <path d="M14 27.65L22.653 20 14 12.35 16.664 10 28 20 16.664 30z"> |
| </path> |
| </g> |
| </defs> |
| </svg> |
| </iron-iconset-svg> |
| |
| <!-- |
| Material design square button for text-labelled buttons. |
| By default, text is blue, background is white. |
| |inverse| makes text white on a blue background. |
| Note, that slotted element must have separate DOM node (i.e. a separate div). |
| |
| Example: |
| <oobe-icon-button inverse> |
| <div i18n-content="oobeOKButtonText"></div> |
| </oobe-icon-button> |
| |
| Attributes: |
| 'disabled' - button is disabled when the attribute is set. |
| (See crbug.com/900640) |
| 'inverse' - makes text white and background blue. |
| 'label-for-aria' - accessibility label. |
| 'border' - adds border to the button. |
| --> |
| <dom-module id="oobe-text-button"> |
| <template> |
| <style include="iron-flex iron-flex-alignment iron-positioning"></style> |
| <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css"> |
| <style include="cr-icons cr-shared-style"></style> |
| <link rel="stylesheet" href="oobe_fonts.css"> |
| <link rel="stylesheet" href="oobe_text_buttons.css"> |
| <cr-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" |
| inverse$="[[inverse]]" aria-label$="[[labelForAria]]" |
| border$="[[border]]" android$="[[android]]"> |
| <div id="container" |
| class="flex layout horizontal center center-justified self-stretch"> |
| <slot></slot> |
| </div> |
| </cr-button> |
| </template> |
| </dom-module> |
| |
| <!-- |
| Material design square "<- Back" and "Next ->" buttons. |
| Text is blue, background is white. |
| |
| Example: |
| <oobe-back-button on-click="handleOnClick_"></oobe-back-button> |
| |
| (Note that there is no space between opening and closing tag.) |
| |
| Content is optional, "Back" and "Next" will be used if not specified. |
| <oobe-back-button on-click="handleOnClick_"> |
| Continue |
| </oobe-back-button> |
| |
| Attributes: |
| 'disabled' - button is disabled when the attribute is set. |
| (See crbug.com/900640) |
| 'label-for-aria' - accessibility label. |
| --> |
| <dom-module id="oobe-back-button"> |
| <template> |
| <style include="iron-flex iron-flex-alignment iron-positioning"></style> |
| <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css"> |
| <style include="cr-icons cr-shared-style"></style> |
| <link rel="stylesheet" href="oobe_fonts.css"> |
| <link rel="stylesheet" href="oobe_text_buttons.css"> |
| <link rel="stylesheet" href="oobe_back_button.css"> |
| <cr-button id="button" on-click="onClick_" disabled="[[disabled]]" |
| aria-label$="[[labelForAria]]"> |
| <div class="flex horizontal layout start center"> |
| <hd-iron-icon |
| icon1x="oobe-buttons-20:arrow-forward" |
| icon2x="oobe-buttons-40:arrow-forward"> |
| </hd-iron-icon> |
| <slot> |
| <div id="text" i18n-content="back"></div> |
| </slot> |
| </div> |
| </cr-button> |
| </template> |
| </dom-module> |
| |
| <dom-module id="oobe-next-button"> |
| <template> |
| <style include="iron-flex iron-flex-alignment iron-positioning"></style> |
| <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css"> |
| <style include="cr-icons cr-shared-style"></style> |
| <link rel="stylesheet" href="oobe_fonts.css"> |
| <link rel="stylesheet" href="oobe_text_buttons.css"> |
| <link rel="stylesheet" href="oobe_next_button.css"> |
| <cr-button id="button" on-tap="onClick_" disabled="[[disabled]]" |
| class="action-button"> |
| <div class="flex horizontal layout start center"> |
| <slot> |
| <div id="text" i18n-content="next"></div> |
| </slot> |
| <hd-iron-icon |
| icon1x="oobe-buttons-20:arrow-forward" |
| icon2x="oobe-buttons-40:arrow-forward"> |
| </hd-iron-icon> |
| </div> |
| </cr-button> |
| </template> |
| </dom-module> |
| |
| <!-- |
| Material design button that shows an icon and displays text. |
| |
| Example: |
| <oobe-welcome-secondary-button icon="close"> |
| <div i18n-content="oobeCloseButtonText"></div> |
| </oobe-welcome-secondary-button> |
| |
| Attributes: |
| 1x and 2x icons: |
| 'icon1x' - a name of icon from material design set to show on button. |
| 'icon2x' - a name of icon from material design set to show on button. |
| 'label-for-aria' - accessibility label. |
| --> |
| <dom-module id="oobe-welcome-secondary-button"> |
| <template> |
| <style include="iron-flex iron-flex-alignment iron-positioning"></style> |
| <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css"> |
| <style include="cr-icons cr-shared-style"></style> |
| <link rel="stylesheet" href="oobe_fonts.css"> |
| <link rel="stylesheet" href="oobe_text_buttons.css"> |
| <link rel="stylesheet" href="oobe_welcome_secondary_button.css"> |
| <cr-button id="button" aria-label$="[[labelForAria]]"> |
| <div id="container" class="flex vertical layout center self-stretch"> |
| <div class="flex layout horizontal center self-stretch center-justified"> |
| <hd-iron-icon id="icon" icon1x="[[icon1x]]" icon2x="[[icon2x]]" |
| class="oobe-icon" hidden> |
| </hd-iron-icon> |
| <slot></slot> |
| </div> |
| </div> |
| </cr-button> |
| </template> |
| </dom-module> |