Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SASS file for main layout of the product tabs to handle benefit ratings, features, and tech modules split up into "2 tabs"
@media (min-width: $small) {
#container-4 {
button, .button{
display:none;
}
button.benefit-rating-info {
display:inline-block;
}
}
}
@media (min-width: $medium) {
body.pdp {
#product-info {
.pr-snippet-slider-root{
display:none;
}
}
#container-4 {
iframe{
display:none;
height:320px;
margin-top:2em;
}
.button{
display:block;
}
.swatches-product-details-container {
.swatches-product-details.row {
display: block;
position: relative;
padding: 3em 0.5em 1em 0.5em;
max-width: 1108px;
hr {
top: -1px;
margin: 0 auto;
}
button:focus {
outline: 0;
}
h1 {
padding: 0.5em 0 0.5em 0;
}
h3 {
font-size: 1.25rem;
padding: 0 2em 0.5em 0;
color: #777;
}
.pdp-tabs-ctas {
padding: 0;
text-align: center;
position:relative;
z-index:1;
button {
display:inline-block;
background-color: transparent;
color: black;
padding: 0;
opacity: 0.5;
margin: 0 0.5em;
min-width: 75px;
padding-bottom: 1em;
&:hover {
opacity: 0.3;
}
}
.pdp-active-tab {
border-bottom: 2px solid #2a2a2a;
opacity: 1;
&:hover {
color: #2a2a2a;
opacity: 1;
cursor: auto;
}
}
}
.pdp-details,
.pdp-specifications {
display: flex;
flex-wrap: wrap;
padding-top: 0.5em;
&:focus {
outline: 0;
}
&-header {
flex: 0 0 100%;
}
.inner-content {
padding-left: 0;
}
}
.pdp-specifications {
padding-left: 3em;
&-list {
border-bottom: none;
dt,
dd {
padding: 0em 0.3em 0.5em 0;
padding-right: 0.3em;
padding-bottom: 0.5em;
}
}
}
.pdp-details {
justify-content: space-evenly;
.desc-container{
.pr-snippet-stars-reco-inline{
display:none;
}
}
&-inner-content {
padding: 0 3em 0 0;
.benefit-rating__graph{
&-container{
.br-labels {
padding-top: 0.5em;
}
}
&-bar{
height: 0.8rem;
}
}
}
.pdp-features {
.inner-content {
column-count: 2;
}
&-truncate {
position: relative;
div.button {
position: absolute;
top: 300px;
width: 100%;
border: transparent;
background: none;
text-decoration: underline;
text-transform: uppercase;
font-family: Neue Helvetica VFDP Cond, helvetica, sans-serif;
font-weight: 500;
letter-spacing: 0.03em;
margin: 0 auto;
font-size: 1.2rem;
&:hover {
background: transparent;
color: #e72b1e;
}
}
ul.pdp-features-list {
height: 300px;
position: relative;
overflow: hidden;
&:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 85%);
margin: -1%;
}
}
}
}
.pdp-details-inner-content,
.pdp-features {
display: inline-block;
max-width: 44%;
}
.inner-content {
.benefit-rating__graph-container {
padding: 0px;
}
}
.desc-container {
h1 {
padding: 2em 0 0.5em 0;
}
}
}
.pdp-tab-content.pdp-active-tab {
display: flex;
visibility: visible;
opacity: 1;
height: auto;
transition: all 200ms ease-out;
}
.pdp-tab-content {
display: none;
transition: all 200ms ease-out;
}
}
}
}
}
// body.pdp-tabs-ab-test-dark {
// .benefit-rating__container
// .benefit-rating__graph-item[data-benefit-item-value="1"]
// .benefit-rating__graph-bar:nth-child(1),
// .benefit-rating__container
// .benefit-rating__graph-item[data-benefit-item-value="2"]
// .benefit-rating__graph-bar:nth-child(1),
// .benefit-rating__container
// .benefit-rating__graph-item[data-benefit-item-value="2"]
// .benefit-rating__graph-bar:nth-child(2),
// .benefit-rating__container
// .benefit-rating__graph-item[data-benefit-item-value="3"]
// .benefit-rating__graph-bar:nth-child(1),
// .benefit-rating__container
// .benefit-rating__graph-item[data-benefit-item-value="3"]
// .benefit-rating__graph-bar:nth-child(2),
// .benefit-rating__container
// .benefit-rating__graph-item[data-benefit-item-value="3"]
// .benefit-rating__graph-bar:nth-child(3) {
// background: radial-gradient(circle, #2a2a2a, #2a2a2a 70%, white 50%, white) !important;
// background-size: 3px 3px !important;
// }
// .desc-container {
// h1 {
// color: white;
// }
// }
// #container-4 {
// h3 {
// color: white;
// }
// .benefit-rating__graph-container {
// .br-labels {
// padding-top: 0.5em;
// }
// }
// .benefit-rating__graph-bar {
// border-right: 2px solid #2a2a2a;
// &:after {
// //background-color:#e72b1e;
// background: radial-gradient(circle, #2a2a2a, #2a2a2a 50%, white 50%, white);
// background-size: 3px 3px;
// }
// }
// }
// }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment