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

feat(product): adicionando e estilizando table de frete

Browse Source 
product
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-26 17:59:48 -03:00
parent a92e23b101
commit 2c5a29d4f7
2 changed files with 176 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -339,4 +339,89 @@
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}
.shippingTable {
border: none;
padding: 0;
margin: 16px 0 0;
width: 326px;
}
@media (min-width: 280px) and (max-width: 768px) {
.shippingTable {
width: 100%;
}
}
.shippingTable .shippingTableHead {
display: block;
}
.shippingTable .shippingTableHead .shippingTableRow {
display: grid;
grid-template-columns: repeat(3, 33.3%);
grid-template-areas: "entrega frete prazo";
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
padding: 0;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
text-align: left;
grid-area: entrega;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
text-align: center;
grid-area: frete;
font-size: 0;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
content: "FRETE";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
text-align: right;
grid-area: prazo;
}
.shippingTable .shippingTableBody .shippingTableRow {
display: grid;
grid-template-columns: repeat(3, 33.3%);
grid-template-areas: "entrega valor prazo";
column-gap: 32px;
margin-top: 15px;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
grid-area: entrega;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
white-space: nowrap;
grid-area: prazo;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
grid-area: valor;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
padding: 0;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableLabel .shippingTableRadioBtn {
display: none;
}

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

@ -374,3 +374,94 @@
}
}
}
.shippingTable {
border: none;
padding: 0;
margin: 16px 0 0;
width: 326px;
@media #{$mq-mobile}{
width: 100%;
}
.shippingTableHead {
display: block;
.shippingTableRow {
display: grid;
grid-template-columns: repeat(3, 33.3%);
grid-template-areas: "entrega frete prazo";
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
padding: 0;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
}
.shippingTableHeadDeliveryName {
text-align: left;
grid-area: entrega;
}
.shippingTableHeadDeliveryPrice{
text-align: center;
grid-area: frete;
font-size: 0;
&::after {
content: ("FRETE");
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
}
.shippingTableHeadDeliveryEstimate{
text-align: right;
grid-area: prazo;
}
}
}
.shippingTableBody {
.shippingTableRow{
display: grid;
grid-template-columns: repeat(3, 33.3%);
grid-template-areas: "entrega valor prazo";
column-gap: 32px;
margin-top: 15px;
.shippingTableCellDeliveryName {
grid-area: entrega;
}
.shippingTableCellDeliveryEstimate {
white-space: nowrap;
grid-area: prazo;
}
.shippingTableCellDeliveryPrice {
grid-area: valor;
}
.shippingTableCell {
padding: 0;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
.shippingTableLabel {
.shippingTableRadioBtn {
display: none;
}
}
}
}
}