Template:CS/products/card/styles.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
 
(8 intermediate revisions by the same user not shown)
Line 1:
.capsach-align{display:block;}
/* 2) Template:CS/products/card/styles.css */
.capsach-cardalign-left{width:100%;maxtext-widthalign:480pxleft;margin:0}
.capsach-align-leftcenter{margin-left:0;margin-right:auto;text-align:leftcenter;}
.capsach-align-centerright{margintext-leftalign:auto;margin-right:auto;text-align:left}
.capsach-align-right{margin-left:auto;margin-right:0;text-align:left}
 
.cs-product-card{display:inline-block;width:300px;vertical-align:top;}
/* Media area: 2:3 aspect ratio and full-width image */
.capsach-card__media{position:relative;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
.capsach-card__ratio{display:block;width:100%;height:0;padding-top:150%} /* 3/2 = 150% */
.capsach-card__media-inner{position:absolute;top:0;right:0;bottom:0;left:0}
.capsach-card__media-inner a{display:block;width:100%;height:100%}
.capsach-card__media-inner img{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
 
.cs-product-card__media{line-height:0;}
/* Placeholder when no img is provided */
.cs-product-card__media .mw-file-element{display:block;width:100%;height:auto;box-sizing:border-box;border:1px solid #a2a9b1;background:#fff;}
.capsach-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9)}
 
.cs-product-card__placeholder{display:block;width:300px;box-sizing:border-box;border:1px solid #a2a9b1;background:#f8f9fa;padding-top:66.6667%;}
/* CTA */
 
.capsachcs-product-card__cta{margin-top:.5rem10px;}