chrome/browser/resources/settings/device_page/display_layout.html

<link rel="import" href="chrome://resources/html/polymer.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-material/paper-material-shared-styles.html">
<link rel="import" href="drag_behavior.html">
<link rel="import" href="layout_behavior.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="display-layout">
  <template>
    <style include="settings-shared paper-material-shared-styles">
      /* Use relative position with no offset so that display divs (children),
         which have absolute positions, are offset from the displayArea div. */
      #displayArea {
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      /* Note: the size of the border / box shadow affects the style generated
         in getDivStyle_ and getMirrorDivStyle_ */
      .display {
        align-items: center;
        background: var(--paper-grey-100);
        color: var(--paper-grey-700);
        cursor: default;
        display: flex;
        font-size: 100%;
        font-weight: 500;
        justify-content: center;
        margin: 4px;
        padding: 3px;
        position: absolute;
        text-align: center;
      }
      .display[selected] {
        border: var(--google-blue-500) solid 1px;
      }
      .display.mirror {
        border: var(--google-blue-500) solid 1px;
      }
      .highlight-left {
        border-left: var(--google-blue-700) solid 1px;
      }
      .highlight-right {
        border-right: var(--google-blue-700) solid 1px;
      }
      .highlight-top {
        border-top: var(--google-blue-700) solid 1px;
      }
      .highlight-bottom {
        border-bottom: var(--google-blue-700) solid 1px;
      }

      .display.elevate {
        @apply(--shadow-elevation-2dp);
      }
    </style>
    <div id="displayArea" on-iron-resize="calculateVisualScale_">
      <template is="dom-repeat" items="[[displays]]">
        <div id="_mirror_[[item.id]]" class="display mirror"
            hidden$="[[!mirroring]]"
            style$="[[getMirrorDivStyle_(item.id, item.bounds, visualScale)]]">
        </div>
      </template>
      <template is="dom-repeat" items="[[displays]]">
        <div id="_[[item.id]]" class="display elevate"
            draggable="[[dragEnabled]]" on-tap="onSelectDisplayTap_"
            style$="[[getDivStyle_(item.id, item.bounds, visualScale)]]"
            selected$="[[isSelected_(item, selectedDisplay)]]">
          [[item.name]]
        </div>
      </template>
    </div>
  </template>
  <script src="display_layout.js"></script>
</dom-module>