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

feat: estiliza o bloco shipping-simulator nos elementos de entrega, frete e prazo e retira borda arredondada dos botões e input

Browse Source
This commit is contained in:
Sabrina Miranda 2023-02-03 14:58:57 -03:00
parent c15689a338
commit 8ccd7cd95d
3 changed files with 149 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
react/components/Html/styles.css
View File

@ -24,6 +24,7 @@
[class*="html--add-to-cart-button"] button {
background-color: #000000 !important;
border-radius: 0;
border: none;
width: 100%;
height: 49px;
@ -59,13 +60,18 @@
font-size: 16px;
line-height: 22px;
color: #000000;
border-radius: 0;
}
[class*="html--shipping-simulator"] button {
background-color: #000000;
border-radius: 0;
border: none;
width: 49px;
height: 49px;
position: absolute;
left: 228px;
}
[class*="html--shipping-simulator"] a {

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

@ -191,8 +191,79 @@
.shippingContainer :global(.vtex-input-prefix__group) {
height: 49px;
width: 231px;
border-radius: 0;
}
.shippingContainer :global(.vtex-input__error) {
position: absolute;
margin: 2px;
}
.shippingTable {
margin: 16px 0 0 0;
padding: 0;
border: none;
}
.shippingTableHead {
display: table-header-group;
text-align: left;
}
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
margin-bottom: 15px;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
}
.shippingTableHeadDeliveryPrice::after {
content: "Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
margin-bottom: 15px;
}
.shippingTableRow {
display: grid;
grid-template-columns: 20% 15% 65%;
}
.shippingTableCellDeliveryName,
.shippingTableCellDeliveryName {
grid-area: 1/1;
}
.shippingTableHeadDeliveryEstimate,
.shippingTableCellDeliveryEstimate {
grid-area: 1/3;
}
.shippingTableHeadDeliveryPrice,
.shippingTableCellDeliveryPrice {
grid-area: 1/2;
}
.shippingTableCellDeliveryName,
.shippingTableCellDeliveryEstimate,
.shippingTableCellDeliveryPrice {
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
padding: 0 0 15px 0;
}
.shippingTableRadioBtn {
display: none;
}

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

@ -195,6 +195,7 @@
:global(.vtex-input-prefix__group ) {
height: 49px;
width: 231px;
border-radius: 0;
}
:global(.vtex-input__error) {
@ -202,3 +203,74 @@
margin: 2px;
}
}
.shippingTable {
margin: 16px 0 0 0;
padding: 0;
border: none;
}
.shippingTableHead {
display: table-header-group;
text-align: left;
}
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
margin-bottom: 15px;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
&::after {
content: "Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
margin-bottom: 15px;
}
}
.shippingTableRow {
display: grid;
grid-template-columns: 20% 15% 65%;
}
.shippingTableCellDeliveryName,
.shippingTableCellDeliveryName{
grid-area: 1/1;
}
.shippingTableHeadDeliveryEstimate,
.shippingTableCellDeliveryEstimate {
grid-area: 1/3;
}
.shippingTableHeadDeliveryPrice,
.shippingTableCellDeliveryPrice {
grid-area: 1/2;
}
.shippingTableCellDeliveryName,
.shippingTableCellDeliveryEstimate,
.shippingTableCellDeliveryPrice {
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
padding: 0 0 15px 0;
}
.shippingTableRadioBtn {
display: none;
}