<table class="table table-striped table-hover">
If you are lucky all the pieces already exist.
<div class="media order-media-module">
<div class="pull-left">
<img alt="Michelle-jan-19-3-280px" class="media-object" src="https://s3.amazonaws.com/trueandco_prod/product_images/pictures/360/thumb/Michelle-Jan-19-3-280px.jpg?1327105867">
</div>
<div class="media-body">
<div class="media-heading">Christelle</div>
<div>
34D
-
$45
</div>
<div>Black</div>
<div>20037</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Transaction Date</th>
<th>Order #</th>
<th>Tracking Link</th>
<th>Shipping Address</th>
<th>Payment</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr data-order-id="168881">
<td>
March 5th, 2013
</td>
<td>
168881
</td>
<td>
</td>
<td>
<a href="/my/payment">3433 25th Street San Francisco CA 94110</a>
</td>
<td>
No credit card data available
</td>
<td>
<a href="/my/orders/168881" class="btn btn-mini" data-view-order="true">View Order</a>
</td>
</tr>
</tbody>
</table>
<div class="modal container hide fade in" id="variantDetailModal" aria-hidden="false">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">x</button>
<div class="modal-body product-detail-module">
<div class="row-fluid divided">
<div class="span3">
<div class="inner product-info">
<h1 class="h4">Midnight Kiss</h1>
<div class="brand">Blush</div>
</div>
</div>
</div>
<div class="span6 horz-ruled">
<div class="inner image-info" style="min-height: 485px; ">
<div class="image-main">
</div>
</div>
</div>
<div class="span3">
<div class="inner action-info">
<div class="btn-wrap">
<a href="/cart/edit/1141?quantity=1" class="btn btn-primary btn-block btn-small add" data-id="1141">Add to Cart</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="related-module span12">
<div class="related-items">
<label>Related Items:</label>
<ul>
<li class="related-item">
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tabbable tabs-left tabs-page row">
<ul class="nav nav-tabs span4">
<li class="active">
<a data-toggle="tab" href="#faq1">Home try-on program</a>
</li>
<li>
<a data-toggle="tab" href="#faq2">Bra Fitting, Sizes and Styles</a>
</li>
<li>
<a data-toggle="tab" href="#faq3">Order and Account information</a>
</li>
</ul>
<div class="tab-content faq-content span7">
<div class="tab-pane accordion active" id="faq1">
<div class="accordion-group">
<div class="accordion-body collapse" id="faq1answer2">
<div class="accordion-body collapse" id="faq1answer3">
</div>
</div>
</div>
</div>
</div>
// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";
/*
* Signin Controller css Manifest
*/
@import "components/signin";
// Signin module
// -------------------------------------------------------------
.signin-module {
margin-left: auto;
margin-right: auto;
padding: $l-space 0;
max-width: 860px;
ol {
padding-right: 40px;
}
ol li {
padding-bottom: 5px;
}
.action {
margin-top: 10px;
width: 160px;
}
.action-bottom {
.push {
height: 25px;
}
.btn {
width: 160px;
position: absolute;
bottom: 0;
}
}
.divided {
position: relative;
}
}
// Responsive
// For Signin module
// -------------------------------------------------------------
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.signin-module .action-bottom {
.push {
height: 0;
}
.btn {
margin-bottom: $l-space;
width: 160px;
position: relative;
bottom: auto;
}
}
}
- content_for :css do
:css
.giftcard-module {
margin-top: 30px
}
.giftcard-module [class*="span"].active .inner,
.giftcard-module [class*="span"]:hover .inner {
background-color: #fadad2;
}
.giftcard-module .inner {
display: block;
margin: 0 20px 0;
padding: 0;
border: 1px solid transparent;
}
.giftcard-module .inner.is-focus {
outline: 1px dotted #333;
/* Webkit */
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.giftcard-module p.body {
margin-bottom: 0;
}
.giftcard-module img {
border: 1px solid #ccc;
}
.how-it-works-module {
margin-top: 40px;
}
.how-it-works-module .thumbnails.thumbnails-ruled .thumbnail .inner {
padding-left: 0;
padding-right: 0;
}
.hero-sidekick {
margin: 30px auto;
width: 866px;
height: 577px;
background-image: url(/assets/giftcard/hero.jpg);
}
.hero-sidekick .hero-heading {
position: absolute;
left: 40px;
bottom: auto;
top: 270px;
max-width: 470px;
}