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

feat(pdp): adiciona espacamento das opcoes de frete

Browse Source
This commit is contained in:
Cainã Milech 2023-02-07 11:11:28 -03:00
parent 9be2d763c5
commit e29bc78c96
4 changed files with 50 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
styles/configs/style.json
View File

@ -339,7 +339,7 @@
"letterSpacing": "0"
},
"code": {
"fontFamily": "Consolas, monaco, monospace",
"fontFamily": "Open Sans, Consolas, monaco, monospace",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",

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

@ -7,6 +7,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.container {
margin: 0;
@ -19,6 +20,7 @@
.carouselGaleryThumbs {
margin-top: 16px;
margin-bottom: 16px;
display: block;
}
@ -42,6 +44,7 @@
max-width: 90px;
width: 90px !important;
margin-right: 16px;
margin-bottom: 0;
}
.productImagesGallerySlide {
@ -238,8 +241,9 @@
color: #afafaf;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
padding-top: 8px;
position: absolute;
top: 28px;
top: 32px;
right: -180px;
font-weight: 400;
font-size: 12px;
@ -281,6 +285,8 @@
.shippingTable {
border: none;
margin: 16px 0;
padding: 0;
}
.shippingTableRadioBtn {
@ -307,10 +313,12 @@
}
.shippingTableHead .shippingTableHeadDeliveryName {
width: 110px;
margin-right: 32px;
}
@media screen and (max-width: 350px) {
.shippingTableHead .shippingTableHeadDeliveryName {
width: 90px;
margin-right: 8px;
}
}
.shippingTableHead .shippingTableHeadDeliveryEstimate {
@ -318,12 +326,13 @@
}
.shippingTableHead .shippingTableHeadDeliveryPrice {
display: flex;
width: 110px;
width: 48px;
margin-right: 32px;
font-size: 0;
}
@media screen and (max-width: 350px) {
.shippingTableHead .shippingTableHeadDeliveryPrice {
width: 56px;
margin-right: 8px;
}
}
.shippingTableHead .shippingTableHeadDeliveryPrice::after {
@ -343,10 +352,18 @@
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName,
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice,
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
padding: 15px 4px 0 0;
margin-right: 32px;
padding: 15px 0 0 0;
}
@media screen and (max-width: 350px) {
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName,
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice,
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
margin-right: 8px;
}
}
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
min-width: 112px;
min-width: 110px;
width: 110px;
}
@media screen and (max-width: 350px) {
@ -357,23 +374,13 @@
}
}
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
width: 110px;
}
@media screen and (max-width: 768px) {
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
width: 70px;
min-width: 72px;
}
}
@media screen and (max-width: 350px) {
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
min-width: 56px;
width: 56px;
min-width: 48px;
width: 48px;
padding-right: 0;
}
}
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
padding-right: 0;
margin-right: 0;
order: 3;
}

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

@ -10,6 +10,7 @@
.carouselGaleryThumbs {
margin-top: 16px;
margin-bottom: 16px;
display: block;
}
@ -33,6 +34,7 @@
max-width: 90px;
width: 90px !important;
margin-right: 16px;
margin-bottom: 0;
}
.productImagesGallerySlide {
@ -274,8 +276,9 @@
}
:global(.vtex-address-form__postalCode-forgottenURL) {
padding-top: 8px;
position: absolute;
top: 28px;
top: 32px;
right: -180px;
font-weight: 400;
font-size: 12px;
@ -323,6 +326,8 @@
.shippingTable {
border: none;
margin: 16px 0;
padding: 0;
}
.shippingTableRadioBtn {
@ -351,8 +356,10 @@
.shippingTableHeadDeliveryName {
width: 110px;
margin-right: 32px;
@media screen and (max-width: 350px) {
width: 90px;
margin-right: 8px;
}
}
@ -362,10 +369,11 @@
.shippingTableHeadDeliveryPrice {
display: flex;
width: 110px;
width: 48px;
margin-right: 32px;
font-size: 0;
@media screen and (max-width: 350px) {
width: 56px;
margin-right: 8px;
}
&::after {
content: "FRETE";
@ -388,11 +396,15 @@
.shippingTableCellDeliveryName,
.shippingTableCellDeliveryPrice,
.shippingTableCellDeliveryEstimate {
padding: 15px 4px 0 0;
margin-right: 32px;
padding: 15px 0 0 0;
@media screen and (max-width: 350px) {
margin-right: 8px;
}
}
.shippingTableCellDeliveryName {
min-width: 112px;
min-width: 110px;
width: 110px;
@media screen and (max-width: 350px) {
width: 90px;
@ -402,20 +414,14 @@
}
.shippingTableCellDeliveryPrice {
width: 110px;
@media screen and (max-width: 768px) {
width: 70px;
min-width: 72px;
}
@media screen and (max-width: 350px) {
min-width: 56px;
width: 56px;
min-width: 48px;
width: 48px;
padding-right: 0;
}
}
.shippingTableCellDeliveryEstimate {
padding-right: 0;
margin-right: 0;
order: 3;
}
}

2
styles/sass/utils/_vars.scss
View File

@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
$color-black: #292929;
$color-black-100: #000000;
$color-black2: #202020;