Created
February 18, 2016 18:30
-
-
Save vibby/a47c8833e659a3135ef7 to your computer and use it in GitHub Desktop.
Untitled
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
article { | |
width:16%; | |
} | |
.pgrd-content { | |
border: 4px solid #BF6B04; | |
position: relative; | |
box-shadow: 1px 1px 8px #888; | |
} | |
.pgrd-item{ | |
position: relative; | |
} | |
.pgrd-icon{ | |
font-size: 2.2em; | |
} | |
.pgrd-icon:hover{ | |
background: #BF6B04; | |
color: #fff; | |
cursor: pointer; | |
} | |
.turn{ | |
position: absolute; | |
top: 0; | |
right: 0; | |
padding: 0 .3em; | |
font-family: sans-serif; | |
background: rgba(255, 242, 234, .5); | |
z-index: 3; | |
} | |
.img2 { | |
display: none; | |
} | |
.pgrd-description { | |
bottom: 0; | |
position: absolute; | |
background: rgba(255, 242, 234, .7); | |
display: none; | |
padding: 0 .4em; | |
} | |
.productsgrd>*:hover .pgrd-description { | |
display: block; | |
} | |
.turn+input:checked+div img{ | |
display: none; | |
} | |
.turn+input{ | |
display: none; | |
} | |
.turn+input:checked+div img.img2{ | |
display: block; | |
} | |
.pgrd-options { | |
display: table; | |
border-top: 4px solid #BF6B04; | |
width: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
.pgrd-options li{ | |
list-style: none; | |
display: inline; | |
display: table-cell; | |
height: 3em; | |
border-left: 4px solid #BF6B04; | |
vertical-align: top; | |
} | |
.pgrd-options li>*{ | |
text-align: center; | |
width: 100%; | |
display: block; | |
border: none; | |
text-decoration: none; | |
color: #BF6B04; | |
padding: 0; | |
height: 100%; | |
} | |
.pgrd-options li:hover>*{ | |
background: #BF6B04; | |
color: #fff; | |
cursor: pointer; | |
} | |
.pgrd-options li:first-child{ | |
border-left: none; | |
} | |
.pgrd-options .pgrd-selectlist label>div{ | |
font-size: 1.1em; | |
padding: .2em 0; | |
} | |
.pgrd-options .pgrd-selectlist label:hover>div{ | |
background-color: #BF6B04; | |
color: #fff; | |
} | |
.pgrd-options .pgrd-selectlist label{ | |
position: relative; | |
} | |
.pgrd-options .pgrd-selectlist input{ | |
position: absolute; | |
left: .4em; | |
top: .4em; | |
} | |
.pgrd-options .pgrd-selectlist input:checked+*, .pgrd-options .pgrd-selectlist label:hover>input:checked+*{ | |
background-color: #E4A531; | |
color: #000; | |
} | |
.pgrd-options .pgrd-selectlist label{ | |
border-top: 4px solid #BF6B04; | |
display: block; | |
width: 100%; | |
} | |
.pgrd-options .pgrd-selectlist{ | |
color: #000; | |
position: absolute; | |
background: #fff; | |
border: 4px solid #BF6B04; | |
border-width: 0 0 4px 4px; | |
bottom: 2.5em; | |
left: -4px; | |
display: none; | |
right: 0; | |
} | |
.pgrd-options .pgrd-select:hover .pgrd-selectlist{ | |
display: block; | |
} | |
.pgrd-price a:before { | |
background: none repeat scroll 0 0 #FDF7F4; | |
border-radius: 4px 4px 4px 4px; | |
box-shadow: -1px -1px 1px #888; | |
content: ""; | |
display: inline-block; | |
height: 8px; | |
left: 0.3em; | |
position: absolute; | |
top: 0.3em; | |
width: 8px; | |
} | |
.pgrd-price a { | |
box-shadow: 1px 1px 1px #888; | |
background: none repeat scroll 0 0 #E4A531; | |
border-radius: 0.4em 0.2em 0.2em 1.2em; | |
color: #FFFFFF; | |
float: right; | |
font-size: 1.7em; | |
letter-spacing: 0.03em; | |
margin: 0.4em 0; | |
padding: 0 0.3em 0 0.9em; | |
position: relative; | |
text-decoration: none; | |
transform: rotate(3deg); | |
} | |
.addtocart span{ | |
position: relative; | |
} | |
.addtocart span{ | |
position: absolute; | |
} |
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
<article itemtype="http://schema.org/Product" itemscope=""> | |
<h3 itemprop="name">Book "Est" by "Maxie...</h3> | |
<div class="pgrd-content"> | |
<label for="turnbook-est-by-maxie-abernathy" class="turn pgrd-icon">↺</label> | |
<input type="checkbox" id="turnbook-est-by-maxie-abernathy"> | |
<div class="pgrd-item txtcenter"> | |
<a itemprop="url" title="Show product" href="/app_dev.php/p/book-est-by-maxie-abernathy"> | |
<img src="http://placehold.it/262x255" class="center"> | |
<img src="http://placehold.it/262x255" class="img2 center"> | |
</a> | |
<div itemprop="description" class="pgrd-description"> | |
<p>Expedita maiores commodi ex suscipit eum.</p> | |
</div><!--/end .description--> | |
</div> | |
<form class="clearfix" method="post" action="/app_dev.php/cart/add?id=101"> | |
<input type="hidden" value="1" class="center-text" min="1" required="required" name="sylius_cart_item[quantity]" id="sylius_cart_item_quantity"> | |
<input type="hidden" value="2abc79cae4a9bd6b9d4fa73e988288972196a39a" name="sylius_cart_item[_token]" id="sylius_cart_item__token"> | |
<ul class="pgrd-options"> | |
<li class="pgrd-optcompare"><a title="Compare product" href="/app_dev.php/p/book-est-by-maxie-abernathy" class=" pgrd-icon">𝌮</a></li> | |
<li class="pgrd-optfav"><a title="Add product to loved list" href="/app_dev.php/p/book-est-by-maxie-abernathy" class=" pgrd-icon"> ♥</a></li> | |
<li class="pgrd-optcart"> | |
<button class="addtocart pgrd-icon" type="submit"><span>↴</span>⎵</button> | |
</li> | |
</ul> | |
</form> | |
</div> | |
<span class="pgrd-price" itemprop="price"><a href="/app_dev.php/p/book-est-by-maxie-abernathy">€8.31</a></span> | |
</article> |
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
// alert('Hello world!'); |
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
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment