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

fix: estiliza shippingTable

Browse Source
This commit is contained in:
Naian Felix dos Santos 2023-02-07 20:33:56 -03:00
parent 892cce275b
commit 1d58fbf2ee
8 changed files with 346 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/css/vtex.flex-layout.css
View File

@ -24,6 +24,10 @@
display: none; display: none;
} }
.flexRowContent--shipping-container .stretchChildrenWidth {
flex-direction: column;
}
.flexRowContent--button-container { .flexRowContent--button-container {
margin-bottom: 10px; margin-bottom: 10px;
} }

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

@ -116,7 +116,7 @@
line-height: 19px; line-height: 19px;
color: #ffffff; color: #ffffff;
} }
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { .shippingContainer :global(.vtex-button__label) {
height: 0; height: 0;
width: 0; width: 0;
} }
@ -153,27 +153,59 @@
} }
.shippingTable { .shippingTable {
border: 0; border: none;
padding-top: unset;
margin-top: 16px; margin-top: 16px;
padding: 0; table-layout: fixed;
width: 100%;
max-width: 362px;
}
.shippingTable .shippingTableRow {
display: flex;
}
.shippingTable .shippingTableRow .shippingTableCell {
font-family: "Open Sans", sans-serif;
font-size: 12px;
line-height: 16px;
color: #afafaf;
padding: 0 0 15px 0;
}
.shippingTable .shippingTableRow .shippingTableCell .shippingTableRadioBtn {
display: none;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryName {
width: 33%;
padding-left: 0;
order: 1;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate {
width: 33%;
padding-left: 0;
order: 3;
}
.shippingTable .shippingTableRow .shippingTableCellDeliveryPrice {
width: 25%;
padding-left: 0;
order: 2;
} }
.shippingTable .shippingTableHead { .shippingTable .shippingTableHead {
display: block; display: block;
margin-bottom: 15px; margin-bottom: 15px;
} }
.shippingTable .shippingTableHead .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableHeadDeliveryName {
.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate, width: 33%;
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { text-align: left;
font-weight: 400; order: 1;
font-size: 14px;
line-height: 19px;
color: #202020;
} }
.shippingTable .shippingTableCell { .shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate {
padding: 0 8px 15px 0; width: 33%;
font-size: 12px; text-align: left;
line-height: 16px; order: 3;
color: #afafaf; }
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
width: 25%;
text-align: left;
order: 2;
} }
.newsletter { .newsletter {
@ -210,10 +242,6 @@
justify-content: end; justify-content: end;
} }
:global(.vtex-store-components-3-x-shippingTableRadioBtn) {
display: none;
}
:global(.vtex-store-components-3-x-swiperCaretNext), :global(.vtex-store-components-3-x-swiperCaretNext),
:global(.vtex-store-components-3-x-swiperCaretPrev), :global(.vtex-store-components-3-x-swiperCaretPrev),
:global(.vtex-store-components-3-x-swiper-pagination) { :global(.vtex-store-components-3-x-swiper-pagination) {

63
styles/css/vtex.tab-layout.css
View File

@ -8,3 +8,66 @@
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.container--description {
margin: 16px 40px;
}
.container--description .listContainer {
display: flex;
justify-content: space-around;
border-bottom: 1px solid #bfbfbf;
}
.container--description .listContainer .listItem {
padding: 0;
margin: 0;
}
.container--description .listContainer .listItem :global(.vtex-button) {
background: white;
border: none;
font-family: "Open Sans", sans-serif;
font-size: 18px;
text-transform: none;
color: #bfbfbf;
}
.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}
.container--description .listContainer .listItemActive {
border-bottom: 2px solid black;
}
.container--description .listContainer .listItemActive :global(.vtex-button) {
color: black;
}
.container--description .contentContainer .contentItem {
display: flex;
}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) {
width: 100%;
height: 100%;
max-width: 632px;
max-height: 632px;
}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesGallerySlide) {
margin: 32px 32px 16px 32px;
}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-carouselGaleryThumbs) {
display: none;
}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
margin-top: 32px;
margin-left: 32px;
}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
font-family: "Open Sans", sans-serif;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) {
padding: 0;
}

63
styles/iconpacks/SPOILER_quemabrireboiola.txt Normal file
View File

@ -0,0 +1,63 @@
.shippingTable {
border: none;
padding-top: unset;
margin-top: 16px;
table-layout: fixed;
width: 100%;
max-width: 362px;
.shippingTableRow {
display: flex;
.shippingTableCell {
font-family: "Open Sans", sans-serif;
font-size: 12px;
line-height: 16px;
color: #afafaf;
padding: 0 0 15px 0;
.shippingTableRadioBtn {
display: none;
}
}
.shippingTableCellDeliveryName {
width: 33%;
padding-left: 0;
order: 1;
}
.shippingTableCellDeliveryEstimate {
width: 33%;
padding-left: 0;
order: 3;
}
.shippingTableCellDeliveryPrice {
width: 25%;
padding-left: 0;
order: 2;
}
}
.shippingTableHead {
display: block;
margin-bottom: 15px;
.shippingTableHeadDeliveryName {
width: 33%;
text-align: left;
order: 1;
}
.shippingTableHeadDeliveryEstimate {
width: 33%;
text-align: left;
order: 3;
}
.shippingTableHeadDeliveryPrice {
width: 25%;
text-align: left;
order: 2;
}
}
}

18
styles/iconpacks/SPOILER_quemlereboiola.txt Normal file
View File

@ -0,0 +1,18 @@
shippingTable{
table-layout: fixed;
width: 100%;
max-width: 362px;
}
shippingTableHeadDeliveryName { order: 1;
width: 33%;
text-align: left;
}(definir os outros também)
.vtex-store-components-3-x-shippingTableRow {
display: flex;
}
shippingTableCellDeliveryPrice{
width: 33%;
padding-left: 0;
}(definir os outros também)

6
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -15,6 +15,12 @@
display: none; display: none;
} }
.flexRowContent--shipping-container {
.stretchChildrenWidth {
flex-direction: column;
}
}
.flexRowContent--button-container { .flexRowContent--button-container {
margin-bottom: 10px; margin-bottom: 10px;
:global(.vtex-button) { :global(.vtex-button) {

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

@ -1,5 +1,6 @@
.container { .container {
padding: 0 40px; padding: 0 40px;
.productNameContainer { .productNameContainer {
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
@ -23,6 +24,7 @@
&.skuSelectorItem--selected { &.skuSelectorItem--selected {
border: 2px solid #000; border: 2px solid #000;
.diagonalCross { .diagonalCross {
color: #000; color: #000;
border: 2px; border: 2px;
@ -115,10 +117,11 @@
line-height: 19px; line-height: 19px;
color: #ffffff; color: #ffffff;
} }
:global(.vtex-button__label) { }
height: 0;
width: 0; :global(.vtex-button__label) {
} height: 0;
width: 0;
} }
:global(.vtex-address-form__postalCode-forgottenURL) { :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute; position: absolute;
@ -155,27 +158,66 @@
} }
.shippingTable { .shippingTable {
border: 0; border: none;
padding-top: unset;
margin-top: 16px; margin-top: 16px;
padding: 0; table-layout: fixed;
width: 100%;
max-width: 362px;
.shippingTableRow {
display: flex;
.shippingTableCell {
font-family: "Open Sans", sans-serif;
font-size: 12px;
line-height: 16px;
color: #afafaf;
padding: 0 0 15px 0;
.shippingTableRadioBtn {
display: none;
}
}
.shippingTableCellDeliveryName {
width: 33%;
padding-left: 0;
order: 1;
}
.shippingTableCellDeliveryEstimate {
width: 33%;
padding-left: 0;
order: 3;
}
.shippingTableCellDeliveryPrice {
width: 25%;
padding-left: 0;
order: 2;
}
}
.shippingTableHead { .shippingTableHead {
display: block; display: block;
margin-bottom: 15px; margin-bottom: 15px;
.shippingTableHeadDeliveryName, .shippingTableHeadDeliveryName {
.shippingTableHeadDeliveryEstimate, width: 33%;
.shippingTableHeadDeliveryPrice { text-align: left;
font-weight: 400; order: 1;
font-size: 14px; }
line-height: 19px;
color: #202020; .shippingTableHeadDeliveryEstimate {
width: 33%;
text-align: left;
order: 3;
}
.shippingTableHeadDeliveryPrice {
width: 25%;
text-align: left;
order: 2;
} }
}
.shippingTableCell {
padding: 0 8px 15px 0;
font-size: 12px;
line-height: 16px;
color: #afafaf;
} }
} }
@ -213,10 +255,6 @@
justify-content: end; justify-content: end;
} }
:global(.vtex-store-components-3-x-shippingTableRadioBtn) {
display: none;
}
:global(.vtex-store-components-3-x-swiperCaretNext), :global(.vtex-store-components-3-x-swiperCaretNext),
:global(.vtex-store-components-3-x-swiperCaretPrev), :global(.vtex-store-components-3-x-swiperCaretPrev),
:global(.vtex-store-components-3-x-swiper-pagination) { :global(.vtex-store-components-3-x-swiper-pagination) {

83
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -0,0 +1,83 @@
.container--description {
margin: 16px 40px;
.listContainer {
display: flex;
justify-content: space-around;
border-bottom: 1px solid #bfbfbf;
.listItem {
padding: 0;
margin: 0;
:global(.vtex-button) {
background: white;
border: none;
font-family: "Open Sans", sans-serif;
font-size: 18px;
text-transform: none;
color: #bfbfbf;
:global(.vtex-button__label) {
padding: 0;
}
}
}
.listItemActive {
border-bottom: 2px solid black;
:global(.vtex-button) {
color: black;
}
}
}
.contentContainer {
.contentItem {
display: flex;
:global(.vtex-store-components-3-x-productImagesContainer) {
width: 100%;
height: 100%;
max-width: 632px;
max-height: 632px;
}
:global(.vtex-store-components-3-x-productImagesGallerySlide) {
margin: 32px 32px 16px 32px;
}
:global(.vtex-store-components-3-x-carouselGaleryThumbs) {
display: none;
}
:global(.vtex-store-components-3-x-productDescriptionContainer) {
margin-top: 32px;
margin-left: 32px;
:global(.vtex-store-components-3-x-productDescriptionTitle) {
font-family: "Open Sans", sans-serif;
font-size: 24px;
line-height: 32px;
color: #575757;
}
:global(.vtex-store-components-3-x-productDescriptionText) {
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 22px;
color: #929292;
}
:global(.vtex-store-components-3-x-container) {
padding: 0;
}
}
}
}
}