| OLD | NEW |
| 1 /* Copyright 2015 The Chromium Authors. All rights reserved. | 1 /* Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
| 4 | 4 |
| 5 :host { | 5 :host { |
| 6 @apply(--downloads-shared-style); | 6 @apply(--downloads-shared-style); |
| 7 display: flex; | 7 display: flex; |
| 8 margin: 32px 0; | 8 margin: 24px 0; |
| 9 } | 9 } |
| 10 | 10 |
| 11 :host([hide-date]) { | 11 :host([hide-date]) { |
| 12 margin-top: -16px; | 12 margin-top: -12px; |
| 13 } |
| 14 |
| 15 :host(:not(:first-of-type):not([hide-date])) { |
| 16 border-top: 1px solid rgba(0, 0, 0, .14); |
| 17 padding-top: 30px; |
| 18 } |
| 19 |
| 20 :host(:first-of-type), |
| 21 :host(:not(:first-of-type):not([hide-date])) { |
| 22 margin-top: 30px; |
| 13 } | 23 } |
| 14 | 24 |
| 15 #date-container, | 25 #date-container, |
| 16 #end-cap { | 26 #end-cap { |
| 17 flex: 1 0 var(--downloads-side-column-basis); | 27 flex: 1 0 var(--downloads-side-column-basis); |
| 18 } | 28 } |
| 19 | 29 |
| 20 #date-container > * { | 30 #date-container > * { |
| 21 color: #616161; | 31 color: #5a5a5a; |
| 22 font-size: 107.69%; | 32 font-size: 92.3%; |
| 23 font-weight: bold; | 33 font-weight: bold; |
| 24 } | 34 } |
| 25 | 35 |
| 26 :host([hide-date]) #date-container { | 36 :host([hide-date]) #date-container { |
| 27 visibility: hidden; | 37 visibility: hidden; |
| 28 } | 38 } |
| 29 | 39 |
| 30 #content { | 40 #content { |
| 31 background: white; | 41 background: white; |
| 32 border-radius: 2px; /* TODO(dbeam): why does this differ from Polymer? */ | 42 border-radius: 2px; /* TODO(dbeam): why does this differ from Polymer? */ |
| (...skipping 121 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 154 #remove { | 164 #remove { |
| 155 --paper-icon-button: { | 165 --paper-icon-button: { |
| 156 height: 16px; | 166 height: 16px; |
| 157 width: 16px; | 167 width: 16px; |
| 158 }; | 168 }; |
| 159 --iron-icon-height: 16px; | 169 --iron-icon-height: 16px; |
| 160 --iron-icon-width: 16px; | 170 --iron-icon-width: 16px; |
| 161 } | 171 } |
| 162 | 172 |
| 163 @media not all and (max-width: 1024px) { | 173 @media not all and (max-width: 1024px) { |
| 164 /* Only show date separators in wide mode. */ | |
| 165 :host(:not(:first-of-type):not([hide-date])) :-webkit-any(#content-wrapper, | |
| 166 #since) { | |
| 167 border-top: 1px solid rgba(0, 0, 0, .2); /* TODO(dbeam): real color. */ | |
| 168 padding-top: 32px; | |
| 169 } | |
| 170 | |
| 171 #date-container > * { | 174 #date-container > * { |
| 172 -webkit-margin-start: 24px; | 175 -webkit-margin-start: 24px; |
| 173 } | 176 } |
| 174 } | 177 } |
| 175 | 178 |
| 176 @media all and (max-width: 1024px) { | 179 @media all and (max-width: 1024px) { |
| 177 /* In narrow windows, put the dates on top instead of on the side. */ | 180 /* In narrow windows, put the dates on top instead of on the side. */ |
| 178 :host { | 181 :host { |
| 179 flex-direction: column; | 182 flex-direction: column; |
| 180 } | 183 } |
| 181 | 184 |
| 182 :host([hide-date]) #date-container, | 185 :host([hide-date]) #date-container, |
| 183 #end-cap { | 186 #end-cap { |
| 184 display: none; | 187 display: none; |
| 185 } | 188 } |
| 186 | 189 |
| 187 #content { | 190 #content { |
| 188 margin: 0 auto; | 191 margin: 0 auto; |
| 189 } | 192 } |
| 190 | 193 |
| 191 #date-container { | 194 #date-container { |
| 192 flex: none !important; | 195 flex: none !important; |
| 193 margin: 0 auto 32px; | 196 margin: 0 auto 30px; |
| 194 width: var(--downloads-item-width); | 197 width: var(--downloads-item-width); |
| 195 } | 198 } |
| 196 } | 199 } |
| OLD | NEW |