@vendasta/store/stencils/details-stencil.component.metadata.json

Components and data for Store

[{"__symbolic":"module","version":3,"metadata":{"DetailsStencilComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"details-stencil","template":"\n    <div class=\"details\">\n\n      <mat-card class=\"details-header\">\n        <div class=\"details-column-0\">\n          <div class=\"details-column-0-1\">\n            <div class=\"details-icon stencil-shimmer\"></div>\n          </div>\n          <div class=\"details-column-0-2\">\n            <div class=\"details-title stencil-shimmer\"></div>\n            <div class=\"details-title stencil-shimmer\"></div>\n          </div>\n        </div>\n        <div class=\"details-column-1\">\n          <div class=\"details-column-1-0 stencil-shimmer\"></div>\n          <div class=\"details-column-1-1 stencil-shimmer\"></div>\n        </div>\n      </mat-card>\n\n      <mat-card>\n        <div class=\"details-box-large stencil-shimmer\"></div>\n      </mat-card>\n\n      <mat-card class=\"details-body\">\n        <div class=\"details-body-column-0\" >\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n        </div>\n        <div class=\"details-body-column-1\">\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n        </div>\n        <div class=\"details-body-column-2\">\n          <div class=\"details-box stencil-shimmer\"></div>\n          <div class=\"details-box stencil-shimmer\"></div>\n          <div class=\"details-box stencil-shimmer\"></div>\n          <div class=\"details-box stencil-shimmer\"></div>\n          <div class=\"details-box stencil-shimmer\"></div>\n        </div>\n      </mat-card>\n\n    </div>\n  ","styles":[".details { position: relative; margin: 0 auto 20px; background: #ffffff; box-shadow: 0 3px 10px rgba(33, 33, 33, 0.3); overflow: hidden; font-size: 16px; } .details-header { display: flex; height: 180px; } .details-column-0 { display: flex; width: 66%; } @media screen and (max-width: 600px) { .details-column-0 { width: 100%; } } .details-column-0-1 { display: flex; width: 25%; min-width: 120px; } @media screen and (max-width: 600px) { .details-column-0-1 { width: 50%; } } .details-icon { height: 120px; width: 120px; border-radius: 50%; } .details-title { margin: 20px 0 20px 20px; height: 32px; width: 250px; } @media screen and (max-width: 600px) { .details-title { width: 120px; } } .details-column-1 { width: 34%; display: flex; flex-direction: column; } @media screen and (max-width: 1100px) { .details-column-1 { width: 0; } } .details-column-1-0 { height: 32px; margin: 10px 0; } @media screen and (max-width: 600px) { .details-column-1-0 { width: 0; margin: 0; } } .details-column-1-1 { height: 70px; } @media screen and (max-width: 600px) { .details-column-1-1 { height: 0; } } .details-box-large { display: flex; width: 650px; height: 150px; } @media screen and (max-width: 1100px) { .details-box-large { width: 100%; } } .details-body { display: flex; height: 500px; width: 100%; } .details-body-column-0 { width: 10%; display: flex; flex-direction: column; } @media screen and (max-width: 600px) { .details-body-column-0 { width: 0%; } } .details-body-column-1 { width: 56%; display: flex; flex-direction: column; } @media screen and (max-width: 600px) { .details-body-column-1 { width: 100%; } } .details-icon-small { margin-bottom: 24px; display: flex; height: 32px; width: 32px; border-radius: 50%; } .details-line { margin-bottom: 24px; height: 32px; width: 400px; } @media screen and (max-width: 600px) { .details-line { width: 100%; margin-right: 10px; } } .details-body-column-2 { width: 34%; display: flex; flex-direction: column; } @media screen and (max-width: 1100px) { .details-body-column-2 { width: 0; } } .details-box { height: 70px; margin-bottom: 10px; } @media screen and (max-width: 600px) { .details-box { width: 0; margin: 0; } } "]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"DetailsStencilComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"details-stencil","template":"\n    <div class=\"details\">\n\n      <mat-card class=\"details-header\">\n        <div class=\"details-column-0\">\n          <div class=\"details-column-0-1\">\n            <div class=\"details-icon stencil-shimmer\"></div>\n          </div>\n          <div class=\"details-column-0-2\">\n            <div class=\"details-title stencil-shimmer\"></div>\n            <div class=\"details-title stencil-shimmer\"></div>\n          </div>\n        </div>\n        <div class=\"details-column-1\">\n          <div class=\"details-column-1-0 stencil-shimmer\"></div>\n          <div class=\"details-column-1-1 stencil-shimmer\"></div>\n        </div>\n      </mat-card>\n\n      <mat-card>\n        <div class=\"details-box-large stencil-shimmer\"></div>\n      </mat-card>\n\n      <mat-card class=\"details-body\">\n        <div class=\"details-body-column-0\" >\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n          <div class=\"details-icon-small stencil-shimmer\"></div>\n        </div>\n        <div class=\"details-body-column-1\">\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n          <div class=\"details-line stencil-shimmer\"></div>\n        </div>\n        <div class=\"details-body-column-2\">\n          <div class=\"details-box stencil-shimmer\"></div>\n          <div class=\"details-box stencil-shimmer\"></div>\n          <div class=\"details-box stencil-shimmer\"></div>\n          <div class=\"details-box stencil-shimmer\"></div>\n          <div class=\"details-box stencil-shimmer\"></div>\n        </div>\n      </mat-card>\n\n    </div>\n  ","styles":[".details { position: relative; margin: 0 auto 20px; background: #ffffff; box-shadow: 0 3px 10px rgba(33, 33, 33, 0.3); overflow: hidden; font-size: 16px; } .details-header { display: flex; height: 180px; } .details-column-0 { display: flex; width: 66%; } @media screen and (max-width: 600px) { .details-column-0 { width: 100%; } } .details-column-0-1 { display: flex; width: 25%; min-width: 120px; } @media screen and (max-width: 600px) { .details-column-0-1 { width: 50%; } } .details-icon { height: 120px; width: 120px; border-radius: 50%; } .details-title { margin: 20px 0 20px 20px; height: 32px; width: 250px; } @media screen and (max-width: 600px) { .details-title { width: 120px; } } .details-column-1 { width: 34%; display: flex; flex-direction: column; } @media screen and (max-width: 1100px) { .details-column-1 { width: 0; } } .details-column-1-0 { height: 32px; margin: 10px 0; } @media screen and (max-width: 600px) { .details-column-1-0 { width: 0; margin: 0; } } .details-column-1-1 { height: 70px; } @media screen and (max-width: 600px) { .details-column-1-1 { height: 0; } } .details-box-large { display: flex; width: 650px; height: 150px; } @media screen and (max-width: 1100px) { .details-box-large { width: 100%; } } .details-body { display: flex; height: 500px; width: 100%; } .details-body-column-0 { width: 10%; display: flex; flex-direction: column; } @media screen and (max-width: 600px) { .details-body-column-0 { width: 0%; } } .details-body-column-1 { width: 56%; display: flex; flex-direction: column; } @media screen and (max-width: 600px) { .details-body-column-1 { width: 100%; } } .details-icon-small { margin-bottom: 24px; display: flex; height: 32px; width: 32px; border-radius: 50%; } .details-line { margin-bottom: 24px; height: 32px; width: 400px; } @media screen and (max-width: 600px) { .details-line { width: 100%; margin-right: 10px; } } .details-body-column-2 { width: 34%; display: flex; flex-direction: column; } @media screen and (max-width: 1100px) { .details-body-column-2 { width: 0; } } .details-box { height: 70px; margin-bottom: 10px; } @media screen and (max-width: 600px) { .details-box { width: 0; margin: 0; } } "]}]}]}}}]