anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Header): add estilo para telas 375px

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-11 09:02:07 -03:00
parent 6f011f6727
commit 9508cf89b9
2 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,9 @@
.container {
width: auto !important;
margin: 0 131px;
@media (max-width: $checkout375px) {
margin: 0 16px;
}
}
&__wrapper {
align-items: center;
@ -19,9 +22,12 @@
img {
height: 37.14px;
width: auto;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
height: 91.2px;
}
@media (max-width: $checkout375px) {
height: 33px;
}
}
}
}
@ -30,16 +36,20 @@
display: flex;
width: 119px;
justify-content: space-between;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
width: 235.28px;
}
img {
width: 12px;
height: 15px;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
width: 29.47px;
height: 41.46px;
}
@media (max-width: $checkout375px) {
width: 12px;
height: 13.33px;
}
}
span {
align-items: center;
@ -52,7 +62,7 @@
line-height: 16px;
font-weight: 400;
color: $color-gray;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
@ -68,9 +78,12 @@
.progress-bar {
font-family: "Tenor Sans", sans-serif;
width: 439px;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
width: 1078px;
}
@media (max-width: $checkout375px) {
width: 0;
}
ul {
list-style-type: none;
display: flex;
@ -87,7 +100,7 @@
line-height: 14px;
color: #000000;
width: 39.9103%;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 28px;
width: 120%;
@ -121,7 +134,7 @@
justify-content: center;
p {
margin-bottom: 9px;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
margin-bottom: 15px;
}
}
@ -145,7 +158,7 @@
border: 1px solid #000000;
border-radius: 50%;
margin-bottom: 0px;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
width: 20px;
height: 20px;
}
@ -157,7 +170,7 @@
border: none;
border-radius: 50%;
background-color: #000;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
width: 22px;
height: 22px;
}
@ -165,14 +178,14 @@
.progress-bar-line-1 {
left: 25%;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
left: 18.9%;
}
}
.progress-bar-line-3 {
right: 25%;
@media (min-width: $checkout2500px){
@media (min-width: $checkout2500px) {
right: 18%;
}
}

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

@ -38,5 +38,6 @@ $z-index: (
) !default;
/* media querie 2500 */
/* media querie */
$checkout2500px: (2500px);
$checkout375px: (376px);