Amandaalmeida/challenge-vtex-io-amanda-almeida
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(frete): Adiciona css da parte de consuta de entrega

Browse Source
This commit is contained in:
amanda almeida 2023-01-28 19:10:03 -03:00
parent faeb5ed817
commit f56b97418e
3 changed files with 171 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
styles/configs/style.json
View File

@ -23,29 +23,29 @@
],
"customMedia": [
{
"s": "375px"
"s": 48
},
{
"ns": {
"value": "1024px",
"value": 48,
"minWidth": true
}
},
{
"m": {
"value": "1024px",
"value": 48,
"minWidth": true
}
},
{
"l": {
"value": "1024px",
"value": 64,
"minWidth": true
}
},
{
"xl": {
"value": "2501px",
"value": 120,
"minWidth": true
}
}

78
styles/css/vtex.store-components.css
View File

@ -168,6 +168,7 @@
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
align-items: center;
gap: 32px;
}
@ -209,8 +210,8 @@
background-color: #000000;
border: 0;
position: absolute;
bottom: 32px;
left: 230px;
bottom: 0;
left: 232px;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
@ -224,6 +225,73 @@
align-items: center;
color: #FFFFFF;
}
.shippingContainer :global(.vtex-input__error) {
position: absolute;
font-size: 10px;
margin-top: 5px;
}
.shippingTable {
border: 0;
padding: 0;
margin: 16px 0 0;
}
.shippingTable .shippingTableHead {
display: block;
}
.shippingTable .shippingTableHead .shippingTableRow {
display: flex;
justify-content: flex-start;
align-items: center;
text-align: start;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: #202020;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
font-size: 0;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice::after {
content: "Frete";
font-size: 14px;
}
.shippingTable .shippingTableHeadDeliveryName,
.shippingTable .shippingTableCellDeliveryName {
display: flex;
width: 90px;
margin-right: 32px;
text-align: start;
order: 1;
}
.shippingTable .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableCellDeliveryEstimate {
display: flex;
width: 136px;
text-align: start;
order: 3;
}
.shippingTable .shippingTableHeadDeliveryPrice,
.shippingTable .shippingTableCellDeliveryPrice {
display: flex;
width: 48px;
margin-right: 32px;
text-align: start;
order: 2;
}
.shippingTable .shippingTableBody .shippingTableRow {
display: flex;
margin-top: 15px;
}
.shippingTable .shippingTableBody .shippingTableCell {
font-size: 12px;
line-height: 16px;
padding: 0;
color: #AFAFAF;
}
.shippingTable .shippingTableBody .shippingTableRadioBtn {
display: none;
}
@media screen and (max-width: 1024px) {
.productImageTag--main {
@ -233,7 +301,7 @@
text-align: start;
}
}
@media screen and (max-width: 375px) {
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
flex-direction: column;
align-items: flex-end;
@ -247,7 +315,7 @@
padding: 0;
}
.shippingContainer :global(.vtex-button) {
bottom: 56px;
left: 245px;
bottom: 24px;
left: calc(100% - 48px);
}
}

98
styles/sass/pages/product/vtex.store-components.scss
View File

@ -175,6 +175,7 @@
:global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
align-items: center;
gap: 32px;
}
@ -225,8 +226,9 @@
background-color: #000000;
border: 0;
position: absolute;
bottom: 32px;
left: 230px;
bottom: 0;
left: 232px;
}
:global(.vtex-button__label) {
@ -243,8 +245,94 @@
color: #FFFFFF;
}
}
:global(.vtex-input__error) {
position: absolute;
font-size: 10px;
margin-top: 5px;
}
}
.shippingTable {
border: 0;
padding: 0;
margin: 16px 0 0;
.shippingTableHead {
display: block;
.shippingTableRow {
display: flex;
justify-content: flex-start;
align-items: center;
text-align: start;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: #202020;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
&::after {
content: "Frete";
font-size: 14px;
}
}
}
.shippingTableHeadDeliveryName,
.shippingTableCellDeliveryName {
display: flex;
width: 90px;
margin-right: 32px;
text-align: start;
order: 1;
}
.shippingTableHeadDeliveryEstimate,
.shippingTableCellDeliveryEstimate {
display: flex;
width: 136px;
text-align: start;
order: 3;
}
.shippingTableHeadDeliveryPrice,
.shippingTableCellDeliveryPrice {
display: flex;
width: 48px;
margin-right: 32px;
text-align: start;
order: 2;
}
.shippingTableBody {
.shippingTableRow {
display: flex;
margin-top: 15px;
}
.shippingTableCell {
font-size: 12px;
line-height: 16px;
padding: 0;
color: #AFAFAF;
}
.shippingTableRadioBtn {
display: none;
}
}
}
@media screen and (min-width: 1920px) {}
@media screen and (max-width: 1024px) {
@ -257,7 +345,7 @@
}
}
@media screen and (max-width: 375px) {
@media screen and (max-width: 768px) {
.shippingContainer {
:global(.vtex-address-form__postalCode) {
flex-direction: column;
@ -275,8 +363,8 @@
}
:global(.vtex-button) {
bottom: 56px;
left: 245px;
bottom: 24px;
left: calc(100% - 48px);
}
}
}