Skip to content

Instantly share code, notes, and snippets.

@dompascal
Created December 6, 2013 16:52
Show Gist options
  • Save dompascal/7828166 to your computer and use it in GitHub Desktop.
Save dompascal/7828166 to your computer and use it in GitHub Desktop.
Woocommerce - Shopping Bag Widget Dropdown CSS
header .btm .shopping-bag {
width: 260px;
position: absolute;
top:-5px;
right:0;
z-index: 1000;
text-transform: uppercase;
font-size: 0.9em;
}
header .btm .shopping-bag a.shopping-bag-link {
width: 100%;
height: 30px;
line-height: 30px;
display: block;
background: #333 url('css/img/shopping-bag-icon.png')no-repeat 10px center;
color: white;
text-indent: 30px;
text-transform: uppercase;
font-family: 'ProximaNovaRegular';
}
header .btm .shopping-bag a.shopping-bag-link span.subtotal {
font-family: 'ProximaNovaBold';
float: right;
margin: 0 10px 0 0;
}
header .btm .shopping-bag .dropdown {
background: rgba(255,255,255,0.8);
padding: 10px 10px 60px 10px;
line-height: 20px;
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
box-shadow: 0px 0px 7px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
header .btm .shopping-bag .dropdown {
position: relative;
}
header .btm .shopping-bag .dropdown .pointer {
width: 17px;
height: 7px;
display: block;
background: url('css/img/shopping-bag-pointer.png')no-repeat;
position: absolute;
left: 50px;
top:-7px;
}
header .btm .shopping-bag .dropdown ul li {
float: none;
display: block;
overflow: hidden;
padding: 0 0 5px 0;
margin: 0 0 10px 0;
border-bottom: 2px solid black;
}
header .btm .shopping-bag .dropdown ul li span.shop-bag-thumb {
width: 62px;
display: block;
float:left;
}
header .btm .shopping-bag .dropdown ul li span.shop-bag-thumb img {
width: 100%;
}
header .btm .shopping-bag .dropdown ul li span.details {
width: 100px;
display: block;
float:left;
margin: 0 0 0 10px;
}
header .btm .shopping-bag .dropdown ul li span.details span.title {
font-family: 'ProximaNovaBold';
}
header .btm .shopping-bag .dropdown ul li span.amount {
float: right;
}
header .btm .shopping-bag .dropdown .subtotal {
width: 100%;
position: relative;
font-family: 'ProximaNovaBold';
}
header .btm .shopping-bag .dropdown .subtotal .text {
float:left;
}
header .btm .shopping-bag .dropdown .subtotal .total {
float:right;
}
header .btm .shopping-bag .dropdown a.go-to-checkout {
width: 100%;
height: 30px;
line-height: 30px;
background: black;
color:white;
text-align: center;
display: block;
position: absolute;
left:0;
bottom: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment