challenge-vtex-io-josecarlo.../styles/sass/pages/product/vtex.store-components.scss

467 lines
8.7 KiB
SCSS

.newsletter{
background: red;
}
.figure--product-images-pdp{
display: flex;
height: 100%;
.thumbImg--product-images-pdp{
border-radius: 8px;
}
}
.productImage{
.productImageTag--main{
object-fit: fill !important;
max-height: max-content !important;
}
}
.carouselGaleryCursor{
cursor: auto;
.productImagesGallerySwiperContainer--product-images-pdp{
cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
}
}
.carouselGaleryThumbs{
margin-top: 16px;
}
.productImagesThumb--product-images-pdp{
margin-right: 16px;
margin-bottom: 0;
width: 90px !important;
&:last-child{
margin-right: 0;
}
}
.container{
margin: 0;
padding: 0;
max-width: none;
}
.skuSelectorNameContainer{
margin: 0;
}
.productNameContainer{
text-align: right;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
.skuSelectorContainer{
display: flex;
flex-direction: column-reverse;
margin-bottom: 16px;
.skuSelectorSubcontainer--cor{
margin: 0;
.skuSelectorOptionsList{
margin: 0;
}
.skuSelectorName {
font-size: 0;
&::after{
content: "Outras cores";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
}
}
.skuSelectorSubcontainer--tamanho{
margin-bottom: 10px;
.skuSelectorName {
font-size: 0;
&::after{
content: "Outros tamanhos:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
}
}
.skuSelectorSelectorImageValue{
display: none;
}
.skuSelectorOptionsList{
display: flex;
gap: 16px;
margin: 0;
margin-bottom: 2px;
.skuSelectorItem{
margin: 0;
width: 40px;
height: 40px;
.frameAround{
border-color: #000000;
border-radius: 50%;
border-width: 2px;
z-index: 5;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.skuSelectorInternalBox{
border: 1px solid #989898;
border-radius: 50%;
.valueWrapper{
padding: 0;
color: rgba(185, 185, 185, 0.6);
}
}
}
.skuSelectorItemImage{
width: 48px;
height: 48px;
.diagonalCross{
background: #D5D5D5;
top: 48%;
left: 1%;
width: 46px;
height: 1px;
transform: rotate(-45deg);
}
}
.skuSelectorItem--selected{
.skuSelectorInternalBox{
.valueWrapper{
color: #000000;
}
}
}
}
.diagonalCross{
background: #D5D5D5;
top: 46%;
left: 1%;
width: 38px;
height: 1px;
transform: rotate(-45deg);
}
}
.buyButtonText{
font-size: 0;
&::after{
content: "ADICIONAR À SACOLA";
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
}
.shippingContainer{
width: 409px;
position: relative;
display: grid;
grid-template-areas: "label button notCep";
grid-template-columns: 56.4792% max-content 1fr;
margin-bottom: 16px;
:global(.vtex-input__label){
font-size: 0;
&::after{
content: "CALCULAR FRETE:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
:global(.vtex-address-form__postalCode){
padding: 0;
:global(.vtex-input){
grid-area: label;
:global(.vtex-input-prefix__group){
:global(.vtex-address-form-4-x-input){
padding: 0 16px;
&::placeholder{
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
}
:global(.vtex-input__suffix){
display: none;
}
}
}
:global(.vtex-address-form__postalCode-forgottenURL){
grid-area: notCep;
position: absolute;
right: 0;
top: 43px;
padding: 0;
font-weight: 400;
font-size: 12px;
line-height: 16px;
:last-child{
color: #000000;
text-decoration-line: underline;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
:global(.vtex__icon-external-link){
display: none;
}
}
:global(.vtex-input-prefix__group){
height: 49px;
border-radius: 0;
box-sizing: border-box;
}
}
:global(.vtex-button){
grid-area: button;
width: max-content;
height: max-content;
background-color: #000000;
margin-top: 27px;
margin-left: -3px;
border-radius: 0;
border: 0;
padding: 0;
:global(.vtex-button__label){
font-size: 0;
width: 49px;
height: 49px;
padding: 0;
&::after{
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #FFFFFF;
}
}
}
}
.shippingTable {
border: 0;
padding: 0;
margin: 0;
width: max-content;
padding-bottom: 1px;
.shippingTableHead {
display: table-caption;
text-align: left;
.shippingTableRow{
display: grid;
grid-template-areas: "entrega frete prazo";
grid-template-columns: 1fr 1fr 1fr;
.shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice{
font-weight: 400;
font-size: 14px;
color: #202020;
text-transform: uppercase;
padding: 0;
padding-bottom: 15px;
}
.shippingTableHeadDeliveryName{
grid-area: entrega;
}
.shippingTableHeadDeliveryEstimate{
grid-area: prazo;
}
.shippingTableHeadDeliveryPrice{
grid-area: frete;
font-size: 0;
&::after{
content: "FRETE";
font-weight: 400;
font-size: 14px;
color: #202020;
text-transform: uppercase;
}
}
}
}
.shippingTableBody{
display: table-cell;
.shippingTableRow{
display: grid;
grid-template-areas: "entrega frete prazo";
grid-template-columns: 1fr 1fr 1fr;
.shippingTableCell{
padding: 0;
padding-bottom: 15px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
.shippingTableRadioBtn{
display: none;
}
.shippingTableCellDeliveryEstimate{
grid-area: prazo;
}
}
}
}
.productDescriptionContainer--container-description-pdp{
.productDescriptionTitle--container-description-pdp{
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
height: 40px;
margin-bottom: 8px;
}
}
.productDescriptionText--container-description-pdp{
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media screen and (min-width: 1920px) {
.productDescriptionContainer--container-description-pdp{
.productDescriptionTitle--container-description-pdp{
font-size: 32px;
line-height: 32px;
}
}
.productDescriptionText--container-description-pdp{
font-size: 18px;
line-height: 25px;
}
}
@media screen and (max-width: 1024px) {
.productNameContainer{
margin-top: 32px;
text-align: left;
}
.productDescriptionContainer--container-description-pdp{
.productDescriptionTitle--container-description-pdp{
font-size: 20px;
line-height: 32px;
}
}
.productDescriptionText--container-description-pdp{
font-size: 14px;
line-height: 19px;
margin-bottom: 16px;
}
}
@media screen and (max-width: 768px) {
.shippingContainer{
width: 100%;
grid-template-areas: "label button"
"notCep notCep";
grid-template-columns: 1fr 46px;
padding-bottom: 23px;
margin-bottom: 16px;
:global(.vtex-address-form__postalCode){
padding: 0;
:global(.vtex-input){
grid-area: label;
:global(.vtex-input-prefix__group){
:global(.vtex-address-form-4-x-input){
padding: 0 16px;
&::placeholder{
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
}
:global(.vtex-input__suffix){
display: none;
}
}
}
:global(.vtex-address-form__postalCode-forgottenURL){
top: 0;
margin-top: 8px;
}
}
}
.carouselGaleryThumbs--product-images-pdp{
display: block !important;
}
}
@media screen and (max-width: 416px) {
.shippingTable {
width: 100%;
.shippingTableBody{
.shippingTableRow{
align-items: center;
}
}
}
}