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-transform: uppercase;
color: #000000;
@media (min-width: 2500px){
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 47px;
}
}
small{
font-family: 'Tenor Sans';
@ -95,6 +102,18 @@
text-transform: uppercase;
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) {
height: 48px;
@ -105,6 +124,13 @@
span.help.error {
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;
border: 1px solid #000000;
border-radius: 5px;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
h3 {
color: #303030;
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 {
@ -131,6 +171,7 @@
color: #00C8FF;
font-size: 1rem;
opacity: 1;
font-size: 30px;
}
}
}
@ -151,6 +192,13 @@
}
}
#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){
width: 100%;
}
@ -204,6 +252,13 @@
span[data-i18n="clientProfileData.identification"]::before {
content: "Identificação";
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;
}
}
}
.payment-group-list-btn{
span{
background-image: none !important;
}
}
/* General configurations */
@ -435,12 +495,10 @@
.shp-summary-group-info {
border-color: $color-gray4;
}
.address-summary {
display: none;
background: none;
border-color: $color-gray4;
border-radius: 0;
background: none;
border-color: #E0E0E0;
border-radius: 5;
color: #303030;
padding: 12px;
@ -453,6 +511,7 @@
font-weight: 500;
text-decoration: underline;
}
}
.ship-complement{
input{
@ -561,6 +620,13 @@
font-size: 14px;
line-height: 19px;
color: #7D7D7D;
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
}
}
.input-small{
height: 42px;
@ -569,6 +635,13 @@
width: 40%;
#client-first-name{
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){
width: 45%;
@ -578,6 +651,13 @@
width: 40%;
#client-last-name{
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){
width: 45%;
@ -588,6 +668,13 @@
width: 40%;
#client-document{
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){
width: 45%;
@ -600,6 +687,13 @@
width: 40%;
#client-phone{
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){
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{
@media (min-width: 2500px){
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 38px;
}
}
label{
font-family: 'Open Sans';
font-style: normal;

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

@ -153,6 +153,13 @@
font-weight: bold;
font-size: 14px;
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) {
&.quantity-price,
@ -167,6 +174,7 @@
padding: 0;
width: 60px;
@include mq(sm, max) {
width: 72px;
}
@ -180,6 +188,7 @@
height: 72px;
width: auto;
}
}
}
@ -195,6 +204,14 @@
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) {
width: 250px;
}
@ -416,6 +433,17 @@
@include mq(md, max) {
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 {
@ -423,6 +451,13 @@
font-size: 12px;
line-height: 18px;
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{
display: none;
@ -499,6 +534,16 @@
font-size: 14px;
line-height: 16px;
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 {
@ -650,6 +695,18 @@
#cart-shipping-calculate{
background-color: #00C8FF;
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 {
@ -798,6 +855,13 @@
tfoot {
td.info{
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.monetary {
@ -808,6 +872,13 @@
font-size: 18px;
line-height: 21px;
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;
text-align: center;
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 {
@ -33,6 +42,13 @@
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (min-width: 2500px){
#cart-choose-products{
width: 20%;
line-height: 30px;
}
}
a::after {
@ -41,6 +57,15 @@
position: absolute;
left: 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) {
white-space: pre;
bottom: 10px;

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

@ -54,6 +54,14 @@ footer .footerCheckout__wrapper {
line-height: 18px;
color: #000000;
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{
display: flex;
@ -81,6 +89,18 @@ footer .footerCheckout__wrapper {
margin: 0;
letter-spacing: 0.05em;
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{
@ -101,6 +121,18 @@ footer .footerCheckout__wrapper {
letter-spacing: 0.05em;
padding: 0 5px;
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{
text-decoration: none;
}
@ -195,6 +227,15 @@ body {
margin: 40px 0 30px;
letter-spacing: 0.05em;
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) {
margin-left: 30px;

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

@ -40,6 +40,10 @@
height: 33px;
border-left: 1px solid #c4c4c4;
padding-left: 10px;
@media (min-width: 2500px){
width: 103.52px;
height: 64.46px;
}
}
&__wrapper {
align-items: center;
@ -57,7 +61,13 @@
line-height: 12px;
text-transform: capitalize;
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) {
display: flex;
order: 2;
@ -83,6 +93,9 @@
align-items: left;
justify-content: left;
}
@media (min-width: 2500px){
height: 39.06px;
}
&__divider {
background-color: $color-gray4;
@ -111,11 +124,29 @@
flex-direction: row;
align-items: center;
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{
width: 38.71px;
height: 16px;
padding: 10px 10px;
@media (min-width: 2500px){
width: 70.91px;
height: 31.25px;
}
}
li:last-child {

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

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