Created
April 16, 2015 11:01
-
-
Save mattvagni/85b809ce27ad595cdb8c to your computer and use it in GitHub Desktop.
Product Card Details
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Product card details, | |
Markup for non sale item: | |
---- | |
<div class="product-card-details"> | |
<a href="#"> | |
<div class="product-card-details__designer"> | |
Valentino | |
</div> | |
<div class="product-card-details__description"> | |
Blue Silk Skirt | |
</div> | |
</a> | |
<div class="product-card-details__price-area"> | |
<span class="price">$500</span> | |
</div> | |
</div> | |
Markup for sale item: | |
---- | |
<div class="product-card-details"> | |
<a href="#"> | |
<div class="product-card-details__designer"> | |
Valentino | |
</div> | |
<div class="product-card-details__description"> | |
Blue Silk Skirt | |
</div> | |
</a> | |
<div class="product-card-details__price-area"> | |
<span class="product-card-details__price product-card-details__price--old">$500</span> | |
<span class="product-card-details__price product-card-details__price--sale">$450</span> | |
<span class="product-card-details__price-info">(30% off + Free Shipping)</span> | |
</div> | |
</div> | |
*/ | |
.product-card-details { | |
font-size: 14px; | |
&__designer { | |
font-family: @secondary-heading-font-name; | |
line-height: 20px; | |
margin-bottom: 5px; | |
} | |
&__description { | |
line-height: 17px; | |
margin-bottom: 5px; | |
} | |
&__price-area { | |
margin-bottom: 15px; | |
} | |
&__price { | |
font-size: 14px; | |
line-height: 17px; | |
&--sale { | |
color: @red; | |
} | |
&--old { | |
text-decoration: line-through; | |
} | |
} | |
a:hover { | |
color: @blue; | |
} | |
// Additional shipping details or % sale | |
&__price-info { | |
color: @text-grey; | |
margin-left: 5px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment