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

340 lines
5.2 KiB
SCSS
Raw Normal View History

.container {
padding: 0;
}
.productImageTag {
object-fit: fill !important;
}
.carouselGaleryThumbs {
display: block !important;
margin-top: 16px;
}
.productImagesThumb {
width: 90px !important;
margin-left: 16px;
margin-bottom: 0;
.thumbImg {
border-radius: 8px;
}
&:first-child {
margin-left: 0;
}
}
.productNameContainer {
line-height: 34px;
@media screen and (max-width: 768px) and (min-width: 375px) {
width: 70.94594594594594%;
margin-right: auto;
}
}
.skuSelectorContainer {
display: flex;
flex-direction: column;
}
.skuSelectorSubcontainer--cor,
.skuSelectorSubcontainer--tamanho {
.skuSelectorName {
font-size: 0;
&::before {
font-size: 14px;
text-transform: uppercase;
}
}
}
.skuSelectorSubcontainer--cor {
order: 1;
.skuSelectorSelectorImageValue {
font-size: 0;
width: 0;
height: 0;
}
.skuSelectorName {
&::before {
content: "Outros Cores";
}
}
}
.skuSelectorSubcontainer--tamanho {
order: 0;
.skuSelectorName {
&::before {
content: "Outros Tamanhos";
}
}
}
.skuSelectorOptionsList,
.skuSelectorOptionsList .skuSelectorItem,
.skuSelectorNameContainer {
margin: 0;
}
.skuSelectorOptionsList {
gap: 16px;
}
.skuSelectorItem {
width: 40px;
height: 40px;
.frameAround,
.skuSelectorInternalBox {
border-radius: 100%;
}
.skuSelectorInternalBox {
z-index: unset;
}
.frameAround {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.diagonalCross {
width: 100%;
background: transparent;
&::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 1px;
border-top: 1px solid #d5d5d5;
transform: translate(-50%, -50%) rotateZ(-45deg);
z-index: 2;
}
}
.skuSelectorItem--selected {
.skuSelectorItemTextValue {
color: $color-black;
}
.diagonalCross {
width: 100%;
background: transparent;
&::before {
border-top: 1px solid $color-black;
}
}
}
.skuSelectorItemTextValue {
width: 100%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.skuSelectorSubcontainer--cor {
margin: 0;
.skuSelectorItem {
width: 48px;
height: 48px;
}
}
.shippingContainer {
position: relative;
@media screen and (min-width: 769px) {
width: 280px;
}
:global(.vtex-address-form__postalCode) {
position: relative;
width: 100%;
padding: 0;
:global(.vtex-input-prefix__group) {
height: 49px;
border: 1px solid #cccccc;
border-radius: 0;
:global(.vtex-input__suffix) {
display: none;
}
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
text-align: right;
@media screen and (min-width: 769px) {
text-align: unset;
position: absolute;
right: -50.7%;
top: 70%;
margin-left: 16px;
padding: 0;
transform: translateY(-50%);
}
}
:global(.vtex-input__label) {
font-size: 0;
&::before {
content: "Calcular frete:";
font-size: 14px;
line-height: 19.07px;
text-transform: uppercase;
color: inherit;
}
}
:global(.vtex-button) {
background-color: $color-black;
position: absolute;
top: 27px;
right: 0;
color: $color-white;
height: 49px;
width: 49px;
margin: 0;
border: 0;
border-radius: 0;
:global(.vtex-button__label) {
font-size: 0;
&::before {
content: "OK";
font-size: 14px;
}
}
}
}
.shippingTable {
border: 0;
margin: 0;
padding: 16px 0 0;
}
.shippingTableHead {
display: table-header-group !important;
.shippingTableRow {
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
width: auto;
text-align: left;
color: $color-black;
font-weight: 400;
font-size: 14px;
line-height: 19.07px;
text-transform: uppercase;
}
}
}
.shippingTableRadioBtn {
display: none;
}
.shippingTableCell {
padding: 15px 0;
}
.subscriberContainer {
.title {
font-size: 0;
&::before {
content: "Produto indisponível";
font-size: 14px;
font-weight: 700;
color: #868686;
}
}
.subscribeLabel {
font-size: 0;
&::before {
content: "Deseja saber quando estiver disponível?";
font-size: 14px;
font-weight: 400;
color: #868686;
}
}
.form {
.content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 40px 48px;
gap: 16px 8px;
}
.input {
margin: 0;
width: 100%;
height: 100%;
:global(.vtex-input-prefix__group) {
border: 1px solid #989898;
border-radius: 0;
}
}
}
.submit {
grid-column: 1 / 2 span;
margin: 0;
:global(.vtex-button) {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
:global(.vtex-button__label) {
font-size: 0;
&::before {
content: "Avise-se";
font-size: 14px;
text-transform: uppercase;
}
}
}
}
}
2023-02-06 15:35:24 +00:00
.productDescriptionTitle {
font-size: 20px;
line-height: 32px;
@media screen and (min-width: 1025px) {
font-size: 24px;
}
}