MD Downloads: update "expanded" (i.e. in progress) cards

chrome/browser/resources/md_downloads/item.css

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 :host {
   @apply(--downloads-shared-style);
   display: flex;
   margin: 24px 0;
 }
 
@@ skipping 21 matching lines @@
   font-size: 92.3%;
   font-weight: bold;
 }
 
 :host([hide-date]) #date-container {
   visibility: hidden;
 }
 
 #content {
   background: white;
   border-radius: 2px;  /* TODO(dbeam): why does this differ from Polymer? */

[michaelpg, 2015/08/18 19:57:07]

Unrelated to this CL, but at some point you can remove this TODO.

This differs because the demo styles the paper-material with a border-radius,
while the Polymer element itself does not.

paper-card has this border-radius by default.

   display: flex;
   flex: none;
   min-height: 103px;
   width: var(--downloads-item-width);
 }
 
 #details {
   -webkit-border-start: 1px #d8d8d8 solid;
   display: flex;
   flex: 1;
@@ skipping 10 matching lines @@
   flex: none;
   justify-content: center;
   margin: 0 32px;
 }
 
 .icon {
   height: 32px;
   width: 32px;
 }
 
+#content.show-progress #file-icon-wrapper {
+  /* TODO(dbeam): animate from top-aligned to centered when items finish? */
+  align-self: flex-start;
+  padding-top: 16px;
+}
+
 #content:not(.is-active) .icon {
   -webkit-filter: grayscale(100%);
 }
 
 #warning {
   -webkit-mask-image: url(../../../../ui/webui/resources/images/warning.svg);
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: 100%;
   background: rgb(217, 84, 61);
 }
@@ skipping 54 matching lines @@
 .dangerous #description {
   color: rgb(217, 84, 61);
 }
 
 #progress {
   --paper-progress-active-color: rgb(54, 126, 237);
   --paper-progress-container-color: rgb(223, 222, 223);
   width: auto;
 }
 
-/* TODO(dbeam): open up a CSS mixin instead in Polymer. */
-#progress /deep/ #progressContainer {
-  border-radius: 2px;
+#content:not(.show-progress) #progress {
+  display: none;
 }
 
 #cancel,
 #retry,
 .discard {
   color: #5a5a5a;
 }
 
 #remove-wrapper {
   align-self: flex-start;
@@ skipping 38 matching lines @@
   #content {
     margin: 0 auto;
   }
 
   #date-container {
     flex: none !important;
     margin: 0 auto 30px;
     width: var(--downloads-item-width);
   }
 }