systrace/catapult/third_party/polymer/components/app-route/demo/youtube-demo/youtube-toolbar.html

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../iron-icons/iron-icons.html">

<dom-module id="youtube-toolbar">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
        --paper-icon-button-ink-color: #fff;
        --iron-icon-fill-color: #fff;
      }

      :host([collapsed]) #background {
        transform: scaleY(calc(60/230));
      }

      :host([collapsed]) #youtube-logo {
        transform: scale(calc(60/230)) translateY(-195px);
      }

      :host([collapsed]) #back {
        transform: translateX(0);
      }

      :host([collapsed]) #content {
        opacity: 0;
        transition-delay: 0s;
        transform: translateY(-10px);
      }

      #background {
        height: 230px;
        background-image: linear-gradient(#E7291A, #C21616);
        @apply(--shadow-elevation-2dp);
        transform-origin: 0 0;
        transition: transform 0.3s;
        transform: scaleY(1);
      }

      #youtube-logo {
        display: block;
        position: absolute;
        margin: auto;
        top: 30px;

        left: calc(50% - 75px);

        width: 150px;
        height: calc(150px / 1.45);
        background-image: radial-gradient(transparent 50%, #fff 50%);
        border-radius: 9% / 13%;
        transition: transform 0.3s;
      }

      #youtube-logo:before,
      #youtube-logo:after {
        content: '';
        display: block;
        position: absolute;
        background-color: #fff;
        width: 90%;
        height: 14%;
        left: 5%;
        border-radius: 100% / 90%;
      }

      #youtube-logo:before {
        top: -3.7%;
      }

      #youtube-logo:after {
        bottom: -3.7%;
      }

      #youtube-logo > .lr-edge {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
      }

      #youtube-logo > .lr-edge:before,
      #youtube-logo > .lr-edge:after {
        content: '';
        display: block;
        position: absolute;
        background-color: #fff;
        width: 10%;
        height: 90%;
        top: 5%;

        border-radius: 100% / 90%;
      }

      #youtube-logo > .lr-edge:before {
        left: -2.5%;
      }

      #youtube-logo > .lr-edge:after {
        right: -2.5%;
      }

      #youtube-logo > .play-icon {
        display: block;
        position: absolute;
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
        overflow: hidden;
        background-image:
          linear-gradient(90deg, #fff 38%, transparent 38%),
          linear-gradient(35deg, transparent 57%, rgba(0, 0, 0, 0.3) 57%);
      }

      #youtube-logo > .play-icon:before,
      #youtube-logo > .play-icon:after {
        content: '';
        display: block;
        position: absolute;
        width: 200%;
        height: 65%;
        background-color: #fff;
      }

      #youtube-logo > .play-icon:before {
        transform-origin: top left;
        top: -80%;
        transform: rotate(29deg);
      }

      #youtube-logo > .play-icon:after {
        transform-origin: bottom left;
        bottom: -80%;
        transform: rotate(-29deg);
      }

      #content {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        transition: transform 0.15s, opacity 0.15s;
        transition-delay: 0.2s;
      }

      #back {
        position: absolute;
        top: 10px;
        transform: translateX(-64px);
        transition: transform 0.3s;
      }
    </style>
    <div id="background"></div>
    <div id="youtube-logo">
      <div class="lr-edge"></div>
      <div class="play-icon"></div>
    </div>
    <div id="content">
      <content></content>
    </div>
    <a id="back" href="../#/search/"><paper-icon-button icon="icons:arrow-back"></paper-icon-button></a>
  </template>
  <script>
    Polymer({
      is: 'youtube-toolbar'
    });
  </script>
</dom-module>