@vendasta/store
Version:
Components and data for Store
17 lines (16 loc) • 1.87 kB
JavaScript
import { Component } from '@angular/core';
var CardStencilComponent = /** @class */ (function () {
function CardStencilComponent() {
}
CardStencilComponent.decorators = [
{ type: Component, args: [{
selector: 'card-stencil',
template: "\n <div class=\"card-stencil-container\">\n <mat-card class=\"card-stencil\">\n <div class=\"card-stencil-header stencil-shimmer\"></div>\n <div class=\"card-stencil-footer\">\n <div class=\"card-stencil-circle stencil-shimmer\"></div>\n <div>\n <div class=\"card-stencil-line-large stencil-shimmer\"></div>\n <div class=\"card-stencil-line-medium stencil-shimmer\"></div>\n </div>\n </div>\n </mat-card>\n </div>\n ",
styles: [".card-stencil-container { position: relative; width: 100%; padding-bottom: 100%; margin-bottom: -45%; } .card-stencil { position: absolute; width: 100%; height: 55%; padding: 0; margin-bottom: 0; } .card-stencil-header { display: flex; height: 60%; } .card-stencil-footer { display: flex; height: 40%; align-items: center; } .card-stencil-circle { margin: 0 16px; height: 60px; width: 60px; border-radius: 50%; } @media screen and (max-width: 650px) { .card-stencil-circle { width: 45px; height: 45px; } } .card-stencil-line-large { height: 20px; width: 200px; margin-bottom: 10px; } @media screen and (max-width: 650px) { .card-stencil-line-large { width: 100px; height: 10px; } } .card-stencil-line-medium { height: 20px; width: 160px; } @media screen and (max-width: 650px) { .card-stencil-line-medium { width: 80px; height: 10px; } } "]
},] },
];
/** @nocollapse */
CardStencilComponent.ctorParameters = function () { return []; };
return CardStencilComponent;
}());
export { CardStencilComponent };