forked from M3-Academy/challenge-vtex-io
desenvolvimento #5
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user