| <!-- 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-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 text-key="oobeOKButtonText"> |
| </oobe-icon-button> |
| |
| Button text can be also changed by specifying element for "text" slot. |
| |
| Attributes: |
| 'disabled' - button is disabled when the attribute is set. |
| (See crbug.com/900640) |
| 'inverse' - makes text white and background blue. |
| 'text-key' - ID of localized string to be used as button text. |
| 'border' - adds border to the button. |
| 'label-for-aria' - accessibility label, override usual behavior |
| (string specified by text-key is used as aria-label). |
| --> |
| <dom-module id="oobe-text-button"> |
| <template> |
| <style include="cr-shared-style oobe-common"></style> |
| <link rel="stylesheet" href="oobe_text_buttons.css"> |
| <cr-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" |
| inverse$="[[inverse]]" aria-label$="[[labelForAriaText_]]" |
| border$="[[border]]"> |
| <div id="container" |
| class="flex layout horizontal center center-justified self-stretch"> |
| <slot name="text"> |
| <div class="fallback">[[i18nDynamic(locale, textKey)]]</div> |
| </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> |
| |
| The content of button can be overridden from default "Back" and "Next" |
| by specifying text-key property or setting text via "text" slot: |
| |
| <oobe-back-button on-click="handleOnClick_" text-key="continueButton"> |
| </oobe-back-button> |
| |
| or |
| |
| <oobe-back-button on-click="handleOnClick_"> |
| <div slot="text">[[i18nDynamic(locale, 'continueButton')]]</div> |
| </oobe-back-button> |
| |
| Attributes: |
| 'disabled' - button is disabled when the attribute is set. |
| (See crbug.com/900640) |
| 'text-key' - ID of localized string to be used as button text. |
| --> |
| <dom-module id="oobe-back-button"> |
| <template> |
| <style include="cr-icons cr-shared-style oobe-common"></style> |
| <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 name="text"> |
| <div class="fallback">[[i18nDynamic(locale, textKey)]]</div> |
| </slot> |
| </div> |
| </cr-button> |
| </template> |
| </dom-module> |
| |
| <dom-module id="oobe-next-button"> |
| <template> |
| <style include="cr-icons cr-shared-style oobe-common"></style> |
| <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]]" |
| aria-label$="[[labelForAria_]]" class="action-button"> |
| <div class="flex horizontal layout start center"> |
| <slot name="text"> |
| <div class="fallback">[[i18nDynamic(locale, textKey)]]</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" text-key="offlineLoginCloseBtn"> |
| </oobe-welcome-secondary-button> |
| |
| or |
| |
| <oobe-welcome-secondary-button icon="close"> |
| <div slot="text">[[i18nDynamic(locale, 'offlineLoginCloseBtn')]]</div> |
| </oobe-welcome-secondary-button> |
| |
| Attributes: |
| 'text-key' - ID of localized string to be used as button text. |
| 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, override usual behavior |
| (string specified by text-key is used as aria-label). |
| --> |
| <dom-module id="oobe-welcome-secondary-button"> |
| <template> |
| <style include="cr-icons cr-shared-style oobe-common"></style> |
| <link rel="stylesheet" href="oobe_text_buttons.css"> |
| <link rel="stylesheet" href="oobe_welcome_secondary_button.css"> |
| <cr-button id="button" aria-label$="[[labelForAriaText_]]"> |
| <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 name="text"> |
| <div class="fallback">[[i18nDynamic(locale, textKey)]]</div> |
| </slot> |
| </div> |
| </div> |
| </cr-button> |
| </template> |
| </dom-module> |