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;
}
.flexRowContent--shipping-container .stretchChildrenWidth {
flex-direction: column;
}
.flexRowContent--button-container {
margin-bottom: 10px;
}

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

@ -116,7 +116,7 @@
line-height: 19px;
color: #ffffff;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
.shippingContainer :global(.vtex-button__label) {
height: 0;
width: 0;
}
@ -153,27 +153,59 @@
}
.shippingTable {
border: 0;
border: none;
padding-top: unset;
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 {
display: block;
margin-bottom: 15px;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryName,
.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
.shippingTable .shippingTableHead .shippingTableHeadDeliveryName {
width: 33%;
text-align: left;
order: 1;
}
.shippingTable .shippingTableCell {
padding: 0 8px 15px 0;
font-size: 12px;
line-height: 16px;
color: #afafaf;
.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate {
width: 33%;
text-align: left;
order: 3;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
width: 25%;
text-align: left;
order: 2;
}
.newsletter {
@ -210,10 +242,6 @@
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-swiperCaretPrev),
:global(.vtex-store-components-3-x-swiper-pagination) {

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

@ -7,4 +7,67 @@
*/
/* Media Query M3 */
@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;
}
.flexRowContent--shipping-container {
.stretchChildrenWidth {
flex-direction: column;
}
}
.flexRowContent--button-container {
margin-bottom: 10px;
:global(.vtex-button) {

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

@ -1,5 +1,6 @@
.container {
padding: 0 40px;
.productNameContainer {
font-weight: 300;
font-size: 20px;
@ -23,6 +24,7 @@
&.skuSelectorItem--selected {
border: 2px solid #000;
.diagonalCross {
color: #000;
border: 2px;
@ -115,10 +117,11 @@
line-height: 19px;
color: #ffffff;
}
:global(.vtex-button__label) {
height: 0;
width: 0;
}
}
:global(.vtex-button__label) {
height: 0;
width: 0;
}
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
@ -155,27 +158,66 @@
}
.shippingTable {
border: 0;
border: none;
padding-top: unset;
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 {
display: block;
margin-bottom: 15px;
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
.shippingTableHeadDeliveryName {
width: 33%;
text-align: left;
order: 1;
}
.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;
}
:global(.vtex-store-components-3-x-shippingTableRadioBtn) {
display: none;
}
:global(.vtex-store-components-3-x-swiperCaretNext),
:global(.vtex-store-components-3-x-swiperCaretPrev),
: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;
}
}
}
}
}