Amandaalmeida/m3-academy-template-checkout-amanda-almeida
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(css): Adiciona css da parte de dados de perfil

Browse Source
This commit is contained in:
amanda almeida 2022-12-17 04:21:17 -03:00
parent 07ee278366
commit b4113e0eff
2 changed files with 246 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -157,6 +157,10 @@
} }
} }
.focus-visible {
box-shadow: none;
}
button { button {
background: #00C8FF; background: #00C8FF;
border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px;
@ -298,5 +302,243 @@
} }
} }
.icon-spin {
display: none !important;
}
}
.client-profile-data {
.accordion-group {
padding: 24px 17px;
border: 1px solid $color-gray3;
border-radius: 8px;
width: 297px;
}
.accordion-inner {
padding: 0;
}
.icon-user,
.client-notice,
.corporate-hide-link {
display: none;
}
.accordion-toggle {
padding: 0;
margin-bottom: 36px;
span {
font-family: 'Tenor Sans';
font-size: 16px;
line-height: 19px;
color: $color-black-400;
}
i::before {
content: '';
background: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
background-size: contain;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: initial;
}
}
.accordion-body {
width: 297px;
}
.box-client-info-pf {
label {
font-family: 'Open Sans';
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
input {
border: 1px solid $color-gray10;
border-radius: 5px;
font-family: 'Open Sans';
font-size: 14px;
line-height: 19px;
padding: 0;
padding-left: 11px;
}
.client-email,
.client-first-name,
.client-last-name {
margin: 0;
margin-bottom: 16px;
input {
height: 42px;
}
}
.client-email {
input {
width: 96%;
}
}
.client-first-name {
input {
margin-right: 14px;
width: 128px;
}
}
.client-last-name,
.client-phone,
.client-document {
input {
width: 128px;
}
}
.client-document,
.client-phone {
input {
height: 44px;
&::placeholder {
padding: 12px 24px 12px 0;
color: #BDBDBD;
}
}
margin: 0;
margin-bottom: 13px;
}
.client-document {
input {
width: 128px;
margin-right: 14px;
}
}
}
.newsletter {
input {
border: 1px solid $calor-gray12;
border-radius: 3px;
}
span {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray11;
}
#opt-in-newsletter {
&:active {
background-color: #00C8FF;
}
}
.optinNewsLetter {
background-color: #BDBDBD;
}
}
.submit {
margin-top: 44px;
margin-bottom: 10px;
button {
background: $color-blue2;
border-radius: 8px;
font-family: 'Open Sans';
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
width: 100%;
height: 42px;
}
}
}
.payment-data,
.shipping-data {
border: 1px solid #F0F0F0;
border-radius: 8px;
width: 330px;
padding: 0;
margin: 0;
margin-bottom: 17px;
.accordion-toggle {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #292929;
margin-top: 24px;
padding: 0;
}
.icon-home,
.icon-credit-card,
.icon-edit {
width: 20px;
height: 20px;
&::before {
content: '';
background: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
background-size: contain;
width: 20px;
height: 20px;
}
}
.shipping-summary-info,
.notification {
margin-top: 15px;
margin-bottom: 28px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #7D7D7D;
}
} }
} }

4
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -19,6 +19,10 @@ $color-gray6: #C4C4C4;
$color-gray7: #EEEEEE; $color-gray7: #EEEEEE;
$color-gray8: #989898; $color-gray8: #989898;
$color-gray9: #EDEDED; $color-gray9: #EDEDED;
$color-gray10: #E0E0E0;
$color-gray11: #808080;
$calor-gray12: #828282;
$color-blue: #4267b2; $color-blue: #4267b2;