| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.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-resizable-behavior/iron-resizable-behavior.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html"> |
| <link rel="import" href="../find_shortcut_behavior.html"> |
| <link rel="import" href="../icons.html"> |
| <link rel="import" href="../route.html"> |
| <link rel="import" href="../settings_shared_css.html"> |
| |
| <dom-module id="settings-subpage"> |
| <template> |
| <style include="settings-shared"> |
| :host { |
| background-color: white; |
| bottom: 0; |
| display: block; |
| left: 0; |
| min-height: fit-content; |
| padding-bottom: 60px; |
| position: absolute; |
| right: 0; |
| top: 0; |
| @apply --cr-card-elevation; |
| } |
| |
| #headerLine { |
| min-height: 40px; |
| padding-bottom: 24px; |
| padding-top: 8px; |
| } |
| |
| #learnMore { |
| @apply --cr-paper-icon-button-margin; |
| align-items: center; |
| display: flex; |
| height: var(--cr-icon-ripple-size); |
| justify-content: center; |
| position: relative; /* Needed for paper-ripple. */ |
| width: var(--cr-icon-ripple-size); |
| } |
| |
| paper-icon-button-light { |
| /* Centers the ripple on the icon with appropriate margin on right. */ |
| margin-inline-end: 10px; |
| margin-inline-start: -10px; |
| } |
| |
| paper-spinner-lite { |
| @apply --cr-icon-height-width; |
| } |
| |
| h1 { |
| color: var(--google-grey-refresh-700); |
| flex: 1; /* Push other items to the end. */ |
| @apply --cr-title-text; |
| } |
| |
| cr-search-field { |
| /* Keep normal icon spacing from subpage-title-extra controls. */ |
| margin-inline-start: 16px; |
| } |
| </style> |
| <div class="settings-box first" id="headerLine"> |
| <paper-icon-button-light class="icon-arrow-back"> |
| <button id="closeButton" on-click="onTapBack_" |
| aria-label="$i18n{back}"></button> |
| </paper-icon-button-light> |
| <h1>[[pageTitle]]</h1> |
| <slot name="subpage-title-extra"></slot> |
| <template is="dom-if" if="[[learnMoreUrl]]"> |
| <a id="learnMore" aria-label="$i18n{learnMore}" |
| href="[[learnMoreUrl]]" target="_blank"> |
| <iron-icon icon="settings:help-outline"></iron-icon> |
| <paper-ripple class="circle" center></paper-ripple> |
| </a> |
| </template> |
| <template is="dom-if" if="[[searchLabel]]"> |
| <cr-search-field label="[[searchLabel]]" |
| on-search-changed="onSearchChanged_"> |
| </cr-search-field> |
| </template> |
| <template is="dom-if" if="[[showSpinner]]"> |
| <paper-spinner-lite active></paper-spinner-lite> |
| </template> |
| </div> |
| <slot></slot> |
| </template> |
| <script src="settings_subpage.js"></script> |
| </dom-module> |
