1<!-- 2@license 3Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10<link rel="import" href="../../../polymer/polymer.html"> 11<link rel="import" href="../../../paper-styles/shadow.html"> 12<link rel="import" href="../../../paper-icon-button/paper-icon-button.html"> 13<link rel="import" href="../../../iron-icons/iron-icons.html"> 14 15<dom-module id="youtube-toolbar"> 16 <template> 17 <style> 18 :host { 19 display: block; 20 position: relative; 21 --paper-icon-button-ink-color: #fff; 22 --iron-icon-fill-color: #fff; 23 } 24 25 :host([collapsed]) #background { 26 transform: scaleY(calc(60/230)); 27 } 28 29 :host([collapsed]) #youtube-logo { 30 transform: scale(calc(60/230)) translateY(-195px); 31 } 32 33 :host([collapsed]) #back { 34 transform: translateX(0); 35 } 36 37 :host([collapsed]) #content { 38 opacity: 0; 39 transition-delay: 0s; 40 transform: translateY(-10px); 41 } 42 43 #background { 44 height: 230px; 45 background-image: linear-gradient(#E7291A, #C21616); 46 @apply(--shadow-elevation-2dp); 47 transform-origin: 0 0; 48 transition: transform 0.3s; 49 transform: scaleY(1); 50 } 51 52 #youtube-logo { 53 display: block; 54 position: absolute; 55 margin: auto; 56 top: 30px; 57 58 left: calc(50% - 75px); 59 60 width: 150px; 61 height: calc(150px / 1.45); 62 background-image: radial-gradient(transparent 50%, #fff 50%); 63 border-radius: 9% / 13%; 64 transition: transform 0.3s; 65 } 66 67 #youtube-logo:before, 68 #youtube-logo:after { 69 content: ''; 70 display: block; 71 position: absolute; 72 background-color: #fff; 73 width: 90%; 74 height: 14%; 75 left: 5%; 76 border-radius: 100% / 90%; 77 } 78 79 #youtube-logo:before { 80 top: -3.7%; 81 } 82 83 #youtube-logo:after { 84 bottom: -3.7%; 85 } 86 87 #youtube-logo > .lr-edge { 88 display: block; 89 position: absolute; 90 width: 100%; 91 height: 100%; 92 } 93 94 #youtube-logo > .lr-edge:before, 95 #youtube-logo > .lr-edge:after { 96 content: ''; 97 display: block; 98 position: absolute; 99 background-color: #fff; 100 width: 10%; 101 height: 90%; 102 top: 5%; 103 104 border-radius: 100% / 90%; 105 } 106 107 #youtube-logo > .lr-edge:before { 108 left: -2.5%; 109 } 110 111 #youtube-logo > .lr-edge:after { 112 right: -2.5%; 113 } 114 115 #youtube-logo > .play-icon { 116 display: block; 117 position: absolute; 118 width: 80%; 119 height: 80%; 120 top: 10%; 121 left: 10%; 122 overflow: hidden; 123 background-image: 124 linear-gradient(90deg, #fff 38%, transparent 38%), 125 linear-gradient(35deg, transparent 57%, rgba(0, 0, 0, 0.3) 57%); 126 } 127 128 #youtube-logo > .play-icon:before, 129 #youtube-logo > .play-icon:after { 130 content: ''; 131 display: block; 132 position: absolute; 133 width: 200%; 134 height: 65%; 135 background-color: #fff; 136 } 137 138 #youtube-logo > .play-icon:before { 139 transform-origin: top left; 140 top: -80%; 141 transform: rotate(29deg); 142 } 143 144 #youtube-logo > .play-icon:after { 145 transform-origin: bottom left; 146 bottom: -80%; 147 transform: rotate(-29deg); 148 } 149 150 #content { 151 display: block; 152 position: absolute; 153 bottom: 0; 154 width: 100%; 155 transition: transform 0.15s, opacity 0.15s; 156 transition-delay: 0.2s; 157 } 158 159 #back { 160 position: absolute; 161 top: 10px; 162 transform: translateX(-64px); 163 transition: transform 0.3s; 164 } 165 </style> 166 <div id="background"></div> 167 <div id="youtube-logo"> 168 <div class="lr-edge"></div> 169 <div class="play-icon"></div> 170 </div> 171 <div id="content"> 172 <content></content> 173 </div> 174 <a id="back" href="../#/search/"><paper-icon-button icon="icons:arrow-back"></paper-icon-button></a> 175 </template> 176 <script> 177 Polymer({ 178 is: 'youtube-toolbar' 179 }); 180 </script> 181</dom-module> 182