challenge-vtex-io-josecarlo.../styles/sass/pages/product/vtex.tab-layout.scss

82 lines
1.4 KiB
SCSS

.container--description-pdp-tab-layout{
padding: 0 40px;
}
.listContainer--container-list-tab-layout-pdp{
display: flex;
list-style: none;
padding: 0 64px;
justify-content: space-between;
border-bottom: 1px solid #B9B9B9;
margin-bottom: 32px;
.listItem{
width: 114px;
height: 38px;
display: grid;
place-items: center;
padding: 0;
margin: 0;
:global(.vtex-button){
border: 0;
width: max-content;
min-height: auto;
background: transparent;
:global(.vtex-button__label){
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #BFBFBF;
text-transform: capitalize;
padding: 0 !important;
}
}
}
.listItemActive{
border-bottom: 2px solid #000000;
:global(.vtex-button){
:global(.vtex-button__label){
color: #000000;
}
}
}
}
@media screen and (min-width: 1920px) {
.container--description-pdp-tab-layout{
padding: 0 360px;
}
}
@media screen and (max-width: 1024px) {
.listContainer--container-list-tab-layout-pdp{
flex-direction: column;
padding: 0;
// gap: 16px;
margin-bottom: 16px;
border-top: 1px solid #B9B9B9;
.listItem{
width: max-content;
margin-bottom: 16px;
&:first-child{
margin-top: 16px;
}
}
.listItemActive{
border: 0;
}
}
}