ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/paper-dialog-shared-styles.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">

<dom-module id="cr-dialog">
  <template>
    <style include="paper-dialog-shared-styles">
      :host {
        border-radius: 2px;
      }

      :host ::content > * {
        /* Overrides paper-dialog-shared-styles. */
        -webkit-padding-end: 0;
        -webkit-padding-start: 0;
        margin-bottom: 0;
        margin-top: 0;
      }

      .title-container {
        align-items: center;
        /* TODO(dbeam): should this be a --settings-separator-line? */
        border-bottom: 1px solid rgba(0, 0, 0, 0.14);
        display: flex;
        min-height: 52px;
      }

      :host ::content .title {
        font-size: 114.28%; /* (16px / 14px) * 100 */
      }

      #close {
        --paper-icon-button: {
          height: 40px;
          width: 40px;
        };
        -webkit-margin-end: 6px;
        /* <paper-icon-button> overrides --iron-icon-{height,width}, so this
         * padding essentially reduces 40x40 to 20x20. */
        padding: 10px;
      }

      .body-container {
        display: flex;
        flex-direction: column;
        max-width: 800px;
        min-width: 512px;
        /* TODO(dbeam): use <paper-dialog-scrollable> to get dividers? */
        overflow: auto;
      }

      :host ::content .body {
        margin: 12px 0;
      }

      :host ::content .body,
      :host ::content .title {
        -webkit-padding-end: 24px;
        -webkit-padding-start: 24px;
        flex: 1;
      }

      :host ::content .body,
      :host ::content .footer,
      :host ::content paper-button {
        font-size: 92.86%; /* (13px / 14px) * 100 */
      }

      :host ::content .button-container {
        -webkit-padding-end: 16px;
        -webkit-padding-start: 16px;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 12px;
        margin-top: 12px;
      }

      :host ::content .button-container .cancel-button {
        -webkit-margin-end: 8px;
        color: var(--paper-grey-600);
      }

      :host ::content .footer {
        background-color: var(--paper-grey-200);
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        margin: 0;
        padding: 12px 20px;
      }
    </style>
    <div class="title-container">
      <content select=".title"></content>
      <paper-icon-button icon="cr:clear" on-tap="cancel" id="close">
      </paper-icon-button>
    </div>
    <div class="body-container">
      <content select=".body"></content>
    </div>
    <content select=".button-container"></content>
    <content select=".footer"></content>
  </template>
  <script src="cr_dialog.js"></script>
</dom-module>