forked from M3-Academy/m3-academy-template-checkout
feat(css): Adiciona css da parte de dados de perfil
This commit is contained in:
amanda almeida
parent
07ee278366
commit
b4113e0eff
@ -157,6 +157,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #00C8FF;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,10 @@ $color-gray6: #C4C4C4;
|
||||
$color-gray7: #EEEEEE;
|
||||
$color-gray8: #989898;
|
||||
$color-gray9: #EDEDED;
|
||||
$color-gray10: #E0E0E0;
|
||||
$color-gray11: #808080;
|
||||
$calor-gray12: #828282;
|
||||
|
||||
|
||||
|
||||
$color-blue: #4267b2;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user