chrome/browser/resources/settings/settings_page/settings_subpage.html

<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_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
<link rel="import" href="chrome://resources/html/find_shortcut_behavior.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-ripple/paper-ripple.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.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: var(--cr-card-background-color);
        box-sizing: border-box;
        display: block;
        left: 0;
        min-height: calc(100vh - var(--cr-toolbar-height));
        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);
      }

      cr-icon-button {
        /* 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 {
        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">
      <cr-icon-button class="icon-arrow-back" id="closeButton"
          on-click="onTapBack_" aria-label="$i18n{back}"></cr-icon-button>
      <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>