chrome/browser/resources/nearby_share/shared/nearby_page_template.html

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">

<dom-module id="nearby-page-template">
  <template>
    <style include="cr-icons cr-shared-style"></style>
    <style>
      :host {
        --nearby-page-space-block: 24px;
        --nearby-page-space-inline: 24px;
      }

      #pageContainer {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      #header {
        margin-inline-end:  var(--nearby-page-space-inline);
        margin-inline-start: var(--nearby-page-space-inline);
        padding-block-end: 16px;
        padding-block-start: var(--nearby-page-space-block);
      }

      #contentContainer {
        box-sizing: border-box;
        display: flex;
        flex-grow: 1;
        justify-content: center;
        overflow: hidden;
      }

      #pageTitle {
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        margin: 0;
      }

      #pageSubTitle {
        font-size: 14px;
        font-weight: inherit;
        line-height: 20px;
        margin: 0;
      }

      #actions {
        display: flex;
        justify-content: flex-end;
        padding-block-end: var(--nearby-page-space-block);
        padding-block-start: var(--nearby-page-space-block);
        padding-inline-end:  var(--nearby-page-space-inline);
        padding-inline-start: var(--nearby-page-space-inline);
      }

      #utilityButton {
        margin-inline-end: auto;
      }
    </style>
    <div id="pageContainer" role="dialog" aria-modal="true"
        aria-labelledby="pageTitle pageSubTitle">
      <div id="header">
        <h1 id="pageTitle">[[title]]</h1>
        <h2 id="pageSubTitle">[[subTitle]]</h2>
      </div>

      <div id="contentContainer">
        <slot name="content"></slot>
      </div>

      <div id="actions">
        <template is="dom-if" if="[[!closeOnly]]">
          <template is="dom-if" if="[[utilityButtonLabel]]">
            <cr-button id="utilityButton" class="cancel-button"
                on-click="onUtilityClick_" aria-label="[[utilityButtonLabel]]">
              [[utilityButtonLabel]]
            </cr-button>
          </template>
          <template is="dom-if" if="[[cancelButtonLabel]]">
            <cr-button id="cancelButton" class="cancel-button"
                on-click="onCancelClick_" aria-label="[[cancelButtonLabel]]">
              [[cancelButtonLabel]]
            </cr-button>
          </template>
          <template is="dom-if" if="[[actionButtonLabel]]">
            <cr-button id="actionButton" class="action-button"
                on-click="onActionClick_" disabled="[[actionDisabled]]"
                aria-label="[[actionButtonLabel]]">
              [[actionButtonLabel]]
            </cr-button>
          </template>
        </template>
        <template is="dom-if" if="[[closeOnly]]">
          <cr-button id="closeButton" class="action-button"
              on-click="onCloseClick_"
              aria-label="$i18n{nearbyShareActionsClose}">
            $i18n{nearbyShareActionsClose}
          </cr-button>
        </template>
      </div>
    </div>
  </template>
  <script src="nearby_page_template.js"></script>
</dom-module>