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

feat(cep):cep fechado responsivo finalizado

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-09 22:26:22 -03:00
parent e1139a5185
commit fa96c824f4
2 changed files with 110 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -246,6 +246,13 @@
.form {
width: max-content;
}
@media screen and (max-width: 1024px) {
.form {
width: 100%;
display: flex;
justify-content: center;
}
}
.form .content {
width: 65.532%;
height: 108px;
@ -255,6 +262,11 @@
grid-template-rows: 1fr 1fr;
gap: 8px;
}
@media screen and (max-width: 1024px) {
.form .content {
width: 100%;
}
}
.form .content .inputName, .form .content .inputEmail {
width: 100%;
height: 40px;
@ -262,6 +274,11 @@
margin-right: 0;
margin-bottom: 7px;
}
@media screen and (max-width: 1024px) {
.form .content .inputName, .form .content .inputEmail {
min-width: 0;
}
}
.form .submit {
width: 100%;
justify-content: center;
@ -269,6 +286,7 @@
grid-row: 2;
}
.form .submit :global(.vtex-button) {
display: block;
width: 100%;
background: #000000;
width: 308px;
@ -298,21 +316,41 @@
.shippingContainer {
display: grid;
grid-template-columns: 1fr auto 1fr;
position: relative;
align-items: end;
width: max-content;
}
@media screen and (max-width: 1024px) {
.shippingContainer {
max-width: 100%;
min-width: 93.665%;
grid-template-columns: 1fr auto;
grid-template-rows: 1fr 1fr;
height: 100px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: grid;
grid-column: 1/2;
padding: 0;
min-width: 230px;
}
@media screen and (max-width: 1024px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
min-width: 100%;
max-width: 100%;
width: 100%;
grid-row: 1;
}
}
.shippingContainer :global(.vtex-button) {
display: block;
grid-column: 2/3;
background: #000000;
width: max-content;
width: 100%;
height: max-content;
border: 0;
border-radius: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
@ -336,7 +374,9 @@
}
.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) {
border: 1px solid #CCCCCC;
height: max-content;
height: 49px;
max-width: 100%;
border-radius: 0;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
color: #AFAFAF;
@ -349,6 +389,7 @@
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
font-size: 0;
width: max-content;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
@ -360,10 +401,27 @@
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
width: max-content;
position: absolute;
grid-column: 3/4;
right: 0;
bottom: 25%;
left: 0;
margin-left: 32px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
}
@media screen and (max-width: 1024px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
margin-left: 0;
grid-column: 1/4;
left: auto;
bottom: 0;
}
}

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

@ -218,6 +218,11 @@
.form{
width: max-content;
@media screen and (max-width: 1024px){
width: 100%;
display: flex;
justify-content: center;
}
.content{
width: 65.532%;
height: 108px;
@ -226,12 +231,18 @@
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 1fr;
gap: 8px;
@media screen and (max-width: 1024px){
width: 100%;
}
.inputName,.inputEmail{
width: 100%;
height: 40px;
min-width: 150px;
margin-right: 0;
margin-bottom: 7px;
@media screen and (max-width: 1024px){
min-width: 0;
}
}
}
.submit{
@ -240,6 +251,7 @@
grid-column: span 2;
grid-row: 2;
:global(.vtex-button){
display: block;
width: 100%;
background: #000000;
width: 308px;
@ -270,20 +282,36 @@
}
.shippingContainer{
display: grid;
grid-template-columns: 1fr auto 1fr;
position: relative;
align-items: end;
width: max-content;
@media screen and (max-width: 1024px){
max-width: 100%;
min-width: 93.665%;
grid-template-columns: 1fr auto;
grid-template-rows: 1fr 1fr;
height: 100px;
}
:global(.vtex-address-form__postalCode ){
display: grid;
grid-column: 1 / 2;
padding: 0;
min-width: 230px;
@media screen and (max-width: 1024px){
min-width: 100%;
max-width: 100%;
width: 100%;
grid-row: 1;
}
}
:global(.vtex-button){
display: block;
grid-column: 2 / 3;
background: #000000;
width: max-content;
width: 100%;
height: max-content;
border: 0;
border-radius: 0;
:global(.vtex-button__label){
font-size: 0;
padding: 0;
@ -306,7 +334,9 @@
grid-column: 1 / 2;
:global(.vtex-input-prefix__group){
border: 1px solid #CCCCCC;
height: max-content;
height: 49px;
max-width: 100%;
border-radius: 0;
:global(.vtex-address-form-4-x-input){
color: #AFAFAF;
font-family: 'Open Sans',sans-serif;
@ -319,6 +349,7 @@
}
:global(.vtex-input__label){
font-size: 0;
width:max-content;
&::after{
content: "CALCULAR FRETE:";
font-family: 'Open Sans',sans-serif;
@ -331,12 +362,27 @@
}
}
:global(.vtex-address-form__postalCode-forgottenURL){
width: max-content;
position: absolute;
grid-column: 3 / 4;
right: 0;
bottom: 25%;
left: 0;
margin-left: 32px;
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line:underline;
@media screen and (max-width: 1024px){
margin-left: 0;
grid-column:1 / 4;
left: auto;
bottom: 0;
}
}
}