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

feat: Adiciona responsividade TV

Browse Source
This commit is contained in:
SamuelCondack 2022-12-18 22:06:15 -03:00
parent d49bc72a1d
commit e8526d9a11
6 changed files with 306 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,13 @@
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
color: #000000; color: #000000;
@media (min-width: 2500px){
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 47px;
}
} }
small{ small{
font-family: 'Tenor Sans'; font-family: 'Tenor Sans';
@ -95,6 +102,18 @@
text-transform: uppercase; text-transform: uppercase;
padding: 12.56px 14.4px 12px 14.41px; padding: 12.56px 14.4px 12px 14.41px;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 28px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
}
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
@ -105,6 +124,13 @@
span.help.error { span.help.error {
color: red; color: red;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
} }
} }
@ -113,10 +139,24 @@
background-color: $color-white; background-color: $color-white;
border: 1px solid #000000; border: 1px solid #000000;
border-radius: 5px; border-radius: 5px;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
h3 { h3 {
color: #303030; color: #303030;
margin: 0 0 8px 0; margin: 0 0 8px 0;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
} }
ul { ul {
@ -131,6 +171,7 @@
color: #00C8FF; color: #00C8FF;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
font-size: 30px;
} }
} }
} }
@ -151,6 +192,13 @@
} }
} }
#client-profile-data{ #client-profile-data{
@media (min-width: 2500px){
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 37px;
}
@media (max-width: 1024px){ @media (max-width: 1024px){
width: 100%; width: 100%;
} }
@ -204,6 +252,13 @@
span[data-i18n="clientProfileData.identification"]::before { span[data-i18n="clientProfileData.identification"]::before {
content: "Identificação"; content: "Identificação";
color: #000000; color: #000000;
@media (min-width: 2500px){
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 37px;
}
} }
} }
@ -323,6 +378,11 @@
display: none; display: none;
} }
} }
}
.payment-group-list-btn{
span{
background-image: none !important;
}
} }
/* General configurations */ /* General configurations */
@ -435,12 +495,10 @@
.shp-summary-group-info { .shp-summary-group-info {
border-color: $color-gray4; border-color: $color-gray4;
} }
.address-summary { .address-summary {
display: none; background: none;
background: none; border-color: #E0E0E0;
border-color: $color-gray4; border-radius: 5;
border-radius: 0;
color: #303030; color: #303030;
padding: 12px; padding: 12px;
@ -453,6 +511,7 @@
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
} }
.ship-complement{ .ship-complement{
input{ input{
@ -561,6 +620,13 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #7D7D7D; color: #7D7D7D;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
}
} }
.input-small{ .input-small{
height: 42px; height: 42px;
@ -569,6 +635,13 @@
width: 40%; width: 40%;
#client-first-name{ #client-first-name{
width: 100%; width: 100%;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
} }
@media (max-width: 1024px){ @media (max-width: 1024px){
width: 45%; width: 45%;
@ -578,6 +651,13 @@
width: 40%; width: 40%;
#client-last-name{ #client-last-name{
width: 100%; width: 100%;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
} }
@media (max-width: 1024px){ @media (max-width: 1024px){
width: 45%; width: 45%;
@ -588,6 +668,13 @@
width: 40%; width: 40%;
#client-document{ #client-document{
width: 100%; width: 100%;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
} }
@media (max-width: 1024px){ @media (max-width: 1024px){
width: 45%; width: 45%;
@ -600,6 +687,13 @@
width: 40%; width: 40%;
#client-phone{ #client-phone{
width: 100%; width: 100%;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
} }
@media (max-width: 1024px){ @media (max-width: 1024px){
width: 45%; width: 45%;
@ -607,8 +701,24 @@
} }
} }
}
span[data-i18n="global.optinNewsLetter"]{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
} }
.client-email{ .client-email{
#client-email{
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
}
}
label{ label{
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;

71
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -153,6 +153,13 @@
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@media (min-width: 2500px){
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
@ -167,6 +174,7 @@
padding: 0; padding: 0;
width: 60px; width: 60px;
@include mq(sm, max) { @include mq(sm, max) {
width: 72px; width: 72px;
} }
@ -180,6 +188,7 @@
height: 72px; height: 72px;
width: auto; width: auto;
} }
} }
} }
@ -195,6 +204,14 @@
padding-top: 20px; padding-top: 20px;
@media (min-width: 2500px){
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 28px;
}
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
} }
@ -416,6 +433,17 @@
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
} }
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 48px;
line-height: 65px;
display: flex;
align-items: center;
text-align: center;
}
} }
.srp-description { .srp-description {
@ -423,6 +451,13 @@
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
margin: 0 0 12px; margin: 0 0 12px;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 36px;
}
} }
.ship-country{ .ship-country{
display: none; display: none;
@ -499,6 +534,16 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
display: flex;
align-items: center;
text-transform: uppercase;
}
} }
&__current { &__current {
@ -650,6 +695,18 @@
#cart-shipping-calculate{ #cart-shipping-calculate{
background-color: #00C8FF; background-color: #00C8FF;
border-radius: 8px; border-radius: 8px;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
}
} }
&-totalizers { &-totalizers {
@ -798,6 +855,13 @@
tfoot { tfoot {
td.info{ td.info{
padding-left: 17px; padding-left: 17px;
@media (min-width: 2500px){
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
} }
td.info, td.info,
td.monetary { td.monetary {
@ -808,6 +872,13 @@
font-size: 18px; font-size: 18px;
line-height: 21px; line-height: 21px;
color: $color-black; color: $color-black;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 49px;
}
} }
} }
} }

25
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -20,6 +20,15 @@
line-height: 33px; line-height: 33px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 48px;
line-height: 65px;
text-align: center;
text-transform: uppercase;
}
} }
&-links { &-links {
@ -33,6 +42,13 @@
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
}
@media (min-width: 2500px){
#cart-choose-products{
width: 20%;
line-height: 30px;
}
} }
a::after { a::after {
@ -41,6 +57,15 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@media (min-width: 2500px){
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 33px;
text-align: center;
text-transform: uppercase;
}
@media (max-width: 406px) { @media (max-width: 406px) {
white-space: pre; white-space: pre;
bottom: 10px; bottom: 10px;

41
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -54,6 +54,14 @@ footer .footerCheckout__wrapper {
line-height: 18px; line-height: 18px;
color: #000000; color: #000000;
width: 100%; width: 100%;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 35px;
text-align: center;
}
} }
.itemSku{ .itemSku{
display: flex; display: flex;
@ -81,6 +89,18 @@ footer .footerCheckout__wrapper {
margin: 0; margin: 0;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 26px;
line-height: 35px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
}
} }
} }
.productLink{ .productLink{
@ -101,6 +121,18 @@ footer .footerCheckout__wrapper {
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 0 5px; padding: 0 5px;
text-transform: uppercase; text-transform: uppercase;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 26px;
line-height: 35px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
}
&:hover{ &:hover{
text-decoration: none; text-decoration: none;
} }
@ -195,6 +227,15 @@ body {
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 48px;
line-height: 65px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;

33
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -40,6 +40,10 @@
height: 33px; height: 33px;
border-left: 1px solid #c4c4c4; border-left: 1px solid #c4c4c4;
padding-left: 10px; padding-left: 10px;
@media (min-width: 2500px){
width: 103.52px;
height: 64.46px;
}
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;
@ -57,7 +61,13 @@
line-height: 12px; line-height: 12px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; max-width: 40%;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 27px;
}
@include mq(dt, max) { @include mq(dt, max) {
display: flex; display: flex;
order: 2; order: 2;
@ -83,6 +93,9 @@
align-items: left; align-items: left;
justify-content: left; justify-content: left;
} }
@media (min-width: 2500px){
height: 39.06px;
}
&__divider { &__divider {
background-color: $color-gray4; background-color: $color-gray4;
@ -111,11 +124,29 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.footer_description_1{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
.footer_description_2{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
} }
.images_footer_developed{ .images_footer_developed{
width: 38.71px; width: 38.71px;
height: 16px; height: 16px;
padding: 10px 10px; padding: 10px 10px;
@media (min-width: 2500px){
width: 70.91px;
height: 31.25px;
}
} }
li:last-child { li:last-child {

22
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -9,9 +9,20 @@
width: 100%; width: 100%;
padding-top: 29px; padding-top: 29px;
padding-bottom: 29px; padding-bottom: 29px;
.headerCheckout__logo{
@media (min-width: 2500px){
img{
height: auto;
width: auto;
}
}
}
} }
#progressBar{ #progressBar{
width: 446px; width: 446px;
@media (min-width: 2500px){
width: 888px;
}
ul{ ul{
list-style-type: none; list-style-type: none;
display: flex; display: flex;
@ -129,6 +140,10 @@
padding-right: 131px; padding-right: 131px;
img{ img{
width: 12px; width: 12px;
@media (min-width: 2500px){
width: 29.47px;
height: 41.46px;
}
} }
span { span {
display: flex; display: flex;
@ -139,6 +154,13 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray; color: $color-gray;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
} }
i { i {