components/nux_google_apps/resources/apps_chooser.html

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

<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">

<dom-module id="apps-chooser">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      .app-icon {
        -webkit-margin-end: 16px;
        -webkit-margin-start: 4px;
      }

      iron-icon {
        -webkit-margin-end: 48px;
      }

      [active] iron-icon[icon="cr:check"] {
        --iron-icon-fill-color: var(--google-blue-600);
        opacity: unset;
      }

      iron-icon[icon="cr:check"] {
        opacity: 0;
      }

      .gmail {
        content: -webkit-image-set(
            url(chrome://welcome/apps/gmail_1x.png) 1x,
            url(chrome://welcome/apps/gmail_2x.png) 2x);
      }

      .youtube {
        content: -webkit-image-set(
            url(chrome://welcome/apps/youtube_1x.png) 1x,
            url(chrome://welcome/apps/youtube_2x.png) 2x);
      }

      .maps {
        content: -webkit-image-set(
            url(chrome://welcome/apps/maps_1x.png) 1x,
            url(chrome://welcome/apps/maps_2x.png) 2x);
      }

      .translate {
        content: -webkit-image-set(
            url(chrome://welcome/apps/translate_1x.png) 1x,
            url(chrome://welcome/apps/translate_2x.png) 2x);
      }

      .news {
        content: -webkit-image-set(
            url(chrome://welcome/apps/news_1x.png) 1x,
            url(chrome://welcome/apps/news_2x.png) 2x);
      }

      .chrome_store {
        content: -webkit-image-set(
            url(chrome://welcome/apps/chrome_store_1x.png) 1x,
            url(chrome://welcome/apps/chrome_store_2x.png) 2x);
      }

      paper-button:first-of-type {
        border-top: unset;
      }

      paper-button {
        border-radius: 0;
        border-top: var(--cr-section_-_border-top);
        display: flex;
        margin: 0;
        padding: 12px 0;
        text-transform: unset;
      }

      paper-button:not([raised]).keyboard-focus {
        outline-width: unset;
        font-weight: unset;
      }

      .app-name {
        flex: 1;
      }
    </style>

    <template is="dom-repeat" items="[[appList]]">
      <paper-button toggles noink
          active$="[[item.selected]]" on-click="onAppClick_">
        <div class$="[[item.icon]] app-icon"></div>
        <div class="app-name">[[item.name]]</div>
        <iron-icon icon="cr:check"></iron-icon>
      </paper-button>
    </template>
  </template>
  <script src="apps_chooser.js"></script>
</dom-module>