chrome/browser/resources/welcome/onboarding_welcome/google_apps/nux_google_apps.html

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

<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.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/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="../navigation_behavior.html">
<link rel="import" href="../shared/animations_css.html">
<link rel="import" href="../shared/bookmark_proxy.html">
<link rel="import" href="../shared/chooser_shared_css.html">
<link rel="import" href="../shared/i18n_setup.html">
<link rel="import" href="../shared/module_metrics_proxy.html">
<link rel="import" href="../shared/step_indicator.html">
<link rel="import" href="google_app_proxy.html">

<dom-module id="nux-google-apps">
  <template>
    <style include="animations chooser-shared-css">
      .apps-ask {
        text-align: center;
      }

      .chrome-logo {
        content: url(../images/module_icons/google_light.svg);
        height: 38px;
        margin: auto;
        margin-bottom: 16px;
        width: 42px;
      }

      @media (prefers-color-scheme: dark) {
        .chrome-logo {
          content: url(../images/module_icons/google_dark.svg);
        }
      }

      h1 {
        color: var(--cr-primary-text-color);
        font-size: 1.5rem;
        font-weight: 500;
        margin: 0;
        margin-bottom: 48px;
        outline: none;
      }

      #appChooser {
        display: block;
        white-space: nowrap;
      }

      .button-bar {
        margin-top: 4rem;
      }

      .option {
        -webkit-appearance: none;
        align-items: center;
        border-radius: 8px;
        box-sizing: border-box;
        display: inline-flex;
        font-family: inherit;
        height: 7.5rem;
        justify-content: center;
        outline: 0;
        position: relative;
        transition-duration: 500ms;
        transition-property: box-shadow;
        vertical-align: bottom;
        width: 6.25rem;
      }

      .option:not(:first-of-type) {
        margin-inline-start: 1.5rem;
      }

      .option[active] {
        border: 1px solid var(--cr-checked-color);
        color: var(--cr-checked-color);
        font-weight: 500;
      }

      .option.keyboard-focused:focus {
        outline: var(--navi-keyboard-focus-color) solid 3px;
      }

      .option-name {
        flex-grow: 0;
        line-height: 1.25rem;
        text-align: center;
        white-space: normal;
      }

      .option-icon {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        height: 2rem;
        margin: auto;
        width: 2rem;
      }

      .option-icon-shadow {
        background-color: var(--navi-option-icon-shadow-color);
        border-radius: 50%;
        display: flex;
        height: 3rem;
        margin-bottom: .25rem;
        width: 3rem;
      }

      .option iron-icon {
        --iron-icon-fill-color: var(--cr-card-background-color);
        background: var(--navi-check-icon-color);
        border-radius: 50%;
        display: none;
        height: .75rem;
        margin: 0;
        position: absolute;
        right: .375rem;
        top: .375rem;
        width: .75rem;
      }

      :host-context([dir=rtl]) .option iron-icon {
        left: .375rem;
        right: unset;
      }

      .option.keyboard-focused:focus iron-icon[icon='cr:check'],
      .option:hover iron-icon[icon='cr:check'],
      .option[active] iron-icon[icon='cr:check'] {
        display: block;
      }

      .option[active] iron-icon[icon='cr:check'] {
        background: var(--cr-checked-color);
      }

      /* App Icons */
      .gmail {
        content: -webkit-image-set(
            url(chrome://theme/IDS_ONBOARDING_WELCOME_GMAIL@1x) 1x,
            url(chrome://theme/IDS_ONBOARDING_WELCOME_GMAIL@2x) 2x);
      }

      .youtube {
        content: -webkit-image-set(
            url(chrome://theme/IDS_ONBOARDING_WELCOME_YOUTUBE@1x) 1x,
            url(chrome://theme/IDS_ONBOARDING_WELCOME_YOUTUBE@2x) 2x);
      }

      .maps {
        content: -webkit-image-set(
            url(chrome://theme/IDS_ONBOARDING_WELCOME_MAPS@1x) 1x,
            url(chrome://theme/IDS_ONBOARDING_WELCOME_MAPS@2x) 2x);
      }

      .translate {
        content: -webkit-image-set(
            url(chrome://theme/IDS_ONBOARDING_WELCOME_TRANSLATE@1x) 1x,
            url(chrome://theme/IDS_ONBOARDING_WELCOME_TRANSLATE@2x) 2x);
      }

      .news {
        content: -webkit-image-set(
            url(chrome://theme/IDS_ONBOARDING_WELCOME_NEWS@1x) 1x,
            url(chrome://theme/IDS_ONBOARDING_WELCOME_NEWS@2x) 2x);
      }

      .search {
        content: -webkit-image-set(
            url(chrome://theme/IDS_ONBOARDING_WELCOME_SEARCH@1x) 1x,
            url(chrome://theme/IDS_ONBOARDING_WELCOME_SEARCH@2x) 2x);
      }
    </style>
    <div class="apps-ask">
      <div class="chrome-logo" alt=""></div>
      <h1 tabindex="-1">$i18n{googleAppsDescription}</h1>
      <div id="appChooser">
        <div class="slide-in">
          <template is="dom-repeat" items="[[appList_]]">
            <button active$="[[item.selected]]"
                aria-pressed$="[[getAriaPressed_(item.selected)]]"
                on-click="onAppClick_" on-pointerdown="onAppPointerDown_"
                on-keyup="onAppKeyUp_" class="option">
              <div class="option-icon-shadow">
                <div class$="[[item.icon]] option-icon"></div>
              </div>
              <div class="option-name">[[item.name]]</div>
              <iron-icon icon="cr:check"></iron-icon>
            </button>
          </template>
        </div>

        <div class="button-bar">
          <cr-button id="noThanksButton" on-click="onNoThanksClicked_">
            $i18n{skip}
          </cr-button>
          <step-indicator model="[[indicatorModel]]"></step-indicator>
          <cr-button class="action-button" disabled$="[[!hasAppsSelected_]]"
              on-click="onGetStartedClicked_">
            $i18n{next}
            <iron-icon icon="cr:chevron-right"></iron-icon>
          </cr-button>
        </div>
      </div>
    </div>
  </template>
  <script src="nux_google_apps.js"></script>
</dom-module>