| <style> |
| :host { |
| max-width: 400px; |
| outline: none; |
| } |
| #container { |
| align-items: stretch; |
| background-color: #FFF; |
| border-radius: 4px; |
| box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), |
| 1px 1px 3px 0 rgba(60, 64, 67, 0.15); |
| display: flex; |
| flex-direction: column; |
| max-width: min-content; |
| z-index: 100; |
| } |
| #separator { |
| background-color: rgba(60, 64, 67, 0.15); |
| height: 1px; |
| } |
| /* Limit to 3 visible progress panels before scroll. */ |
| #panels { |
| max-height: calc(192px + 28px); |
| overflow-y: auto; |
| } |
| xf-panel-item:not(:only-child) { |
| --progress-height: 64px; |
| } |
| xf-panel-item:not(:only-child):first-child { |
| --progress-padding-top: 14px; |
| } |
| xf-panel-item:not(:only-child):last-child { |
| --progress-padding-bottom: 14px; |
| } |
| xf-panel-item:only-child { |
| --progress-height: 68px; |
| } |
| @keyframes setcollapse { |
| 0% { |
| max-height: 0; |
| max-width: 0; |
| opacity: 0; |
| } |
| 75% { |
| max-height: calc(192px + 28px); |
| opacity: 0; |
| width: 400px; |
| } |
| 100% { |
| max-height: calc(192px + 28px); |
| opacity: 1; |
| width: 400px; |
| } |
| } |
| |
| @keyframes setexpand { |
| 0% { |
| max-height: calc(192px + 28px); |
| max-width: 400px; |
| opacity: 1; |
| } |
| 25% { |
| max-height: calc(192px + 28px); |
| max-width: 400px; |
| opacity: 0; |
| } |
| 100% { |
| max-height: 0; |
| max-width: 0; |
| opacity: 0; |
| } |
| } |
| .expanded { |
| animation: setcollapse 200ms forwards; |
| width: 400px; |
| } |
| .collapsed { |
| animation: setexpand 200ms forwards; |
| } |
| .expanding { |
| overflow: hidden; |
| } |
| .expandfinished { |
| max-height: calc(192px + 28px); |
| opacity: 1; |
| overflow-y: auto; |
| width: 400px; |
| } |
| xf-panel-item:not(:only-child) { |
| --multi-progress-height: 92px; |
| } |
| </style> |
| <div id="container"> |
| <div id="summary"></div> |
| <div id="separator" hidden></div> |
| <div id="panels"></div> |
| </div> |