Skip to content

Instantly share code, notes, and snippets.

@ChristopherDosin
Created January 13, 2016 17:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ChristopherDosin/fde52a726df841c96b16 to your computer and use it in GitHub Desktop.
Save ChristopherDosin/fde52a726df841c96b16 to your computer and use it in GitHub Desktop.
.product--details {
.product--header {
padding-bottom:0;
.product--title {
color:@brand-primary;
.unitize(font-size, 24);
}
.product--features {
.unitize-margin(20, 0);
.unitize(padding-bottom, 20);
border-bottom: 1px #e6e6e6 solid;
clear:both;
overflow:hidden;
.w70 {
width:70%;
float:left;
}
.w30 {
width:30%;
float:left;
}
.w50 {
width:50%;
float:left;
}
.product--features-sizetable {
text-align:center;
a {
display:block;
}
i {
display:block;
.unitize(font-size, 40);
.unitize(margin-top, 5);
}
&:hover a, &:hover i {
color:@highlight-success;
}
}
}
.features-list {
li {
list-style:none;
.unitize(line-height, 25);
i {
color:@highlight-success;
.unitize(margin-right, 5);
}
}
}
}
.product--image-container {
.unitize-padding(45,0,0,45);
}
.product--buybox {
.price--content {
color:@highlight-success;
}
.product--price-wrapper {
.block {
width:70%;
&:first-child {
width:30%;
}
}
}
}
.product--tax {
.unitize(padding-top, 5);
.unitize(font-size, 13);
font-weight:bold;
color:@brand-primary;
}
.delivery--text {
font-weight:bold;
display:flex;
.unitize(padding-top, 5);
i {
.unitize(font-size, 20);
.unitize(margin-right, 10);
}
}
}
.product-suction {
clear:both;
overflow:hidden;
.unitize-padding(10, 0, 10, 0);
border-bottom: 1px #e6e6e6 solid;
p {
.unitize(font-size, 14);
.unitize(margin-right, 10);
margin-bottom:0;
font-weight:bold;
float:left;
}
i {
color:@brand-primary;
.unitize(font-size, 18);
&.active {
color:@brand-primary-light;
}
}
}
.product--detail-upper {
border:solid 1px @border-color;
border-top:none;
.unitize-margin(0, 0, 10, 0);
}
@media screen and (min-width: @tabletViewportWidth) {
.product--details {
.product--header {
.product--title {
width:100%;
}
}
}
}
@media screen and (min-width: @tabletLandscapeViewportWidth) {
.product--details {
.product--image-container {
width: 48%;
}
.product--buybox {
width: 48%;
}
}
}
.listing--wrapper {
.listing--actions {
margin-bottom:0;
border-bottom:1px solid @border-color;
}
}
.listing {
margin:0;
.box--minimal {
&.product--box {
padding: 0 0 0 0;
&:first-child, &:nth-child(7) {
.box--content {
border-left:1px solid @border-color;
}
}
.box--content {
border-right:1px solid @border-color;
border-top:none;
border-left:none;
box-shadow: -1px -1px 0 @border-color;
&:hover {
border-color:@brand-primary;
box-shadow: -1px -1px 0 @brand-primary;
position: relative;
z-index: 2;
}
}
}
}
}
@media screen and(min-width: @desktopViewportWidth) {
.listing--content {
.unitize(padding-top, 25);
}
}
@media screen and(min-width: @desktopViewportWidth) {
.image-slider--container {
.unitize-height(430);
margin-bottom: 0;
}
.image-slider--thumbnails {
width:100%;
.unitize-height(70);
.unitize-margin(0, 0, 0, 0);
position: relative;
bottom:0;
left: 0;
float: none;
.thumbnail--link {
.unitize-margin(0, 0, 20, 0);
display: inline-block;
}
}
}
.container {
.unitize-max-width(1200, 16);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment