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.scss): add estilo de 2500px no header

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-10 19:04:56 -03:00
parent 6ac75f4e79
commit 5126731d40
2 changed files with 45 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,3 @@
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
@ -21,6 +19,9 @@
img { img {
height: 37.14px; height: 37.14px;
width: auto; width: auto;
@media (min-width: $checkout2500px){
height: 91.2px;
}
} }
} }
} }
@ -29,9 +30,16 @@
display: flex; display: flex;
width: 119px; width: 119px;
justify-content: space-between; justify-content: space-between;
@media (min-width: $checkout2500px){
width: 235.28px;
}
img { img {
width: 12px; width: 12px;
height: 15px; height: 15px;
@media (min-width: $checkout2500px){
width: 29.47px;
height: 41.46px;
}
} }
span { span {
align-items: center; align-items: center;
@ -44,6 +52,10 @@
line-height: 16px; line-height: 16px;
font-weight: 400; font-weight: 400;
color: $color-gray; color: $color-gray;
@media (min-width: $checkout2500px){
font-size: 24px;
line-height: 33px;
}
} }
i { i {
@ -56,6 +68,9 @@
.progress-bar { .progress-bar {
font-family: "Tenor Sans", sans-serif; font-family: "Tenor Sans", sans-serif;
width: 439px; width: 439px;
@media (min-width: $checkout2500px){
width: 1078px;
}
ul { ul {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
@ -72,6 +87,11 @@
line-height: 14px; line-height: 14px;
color: #000000; color: #000000;
width: 39.9103%; width: 39.9103%;
@media (min-width: $checkout2500px){
font-size: 24px;
line-height: 28px;
width: 120%;
}
.containerLi { .containerLi {
&__first { &__first {
width: 100%; width: 100%;
@ -101,16 +121,19 @@
justify-content: center; justify-content: center;
p { p {
margin-bottom: 9px; margin-bottom: 9px;
@media (min-width: $checkout2500px){
margin-bottom: 15px;
}
} }
.progress-bar-text { .progress-bar-text {
white-space: nowrap; white-space: nowrap;
} }
.progress-bar-circle-1{ .progress-bar-circle-1 {
transform: translateX(-2px); transform: translateX(-2px);
} }
.progress-bar-circle-3{ .progress-bar-circle-3 {
transform: translateX(-5px); transform: translateX(-5px);
} }
@ -122,6 +145,10 @@
border: 1px solid #000000; border: 1px solid #000000;
border-radius: 50%; border-radius: 50%;
margin-bottom: 0px; margin-bottom: 0px;
@media (min-width: $checkout2500px){
width: 20px;
height: 20px;
}
} }
.active { .active {
@ -130,14 +157,24 @@
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background-color: #000; background-color: #000;
@media (min-width: $checkout2500px){
width: 22px;
height: 22px;
}
} }
.progress-bar-line-1 { .progress-bar-line-1 {
left: 25%; left: 25%;
@media (min-width: $checkout2500px){
left: 18.9%;
}
} }
.progress-bar-line-3 { .progress-bar-line-3 {
right: 25%; right: 25%;
@media (min-width: $checkout2500px){
right: 18%;
}
} }
.progress-bar-line-1, .progress-bar-line-1,

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

@ -36,3 +36,7 @@ $z-index: (
level4: 20, level4: 20,
level5: 25 level5: 25
) !default; ) !default;
/* media querie 2500 */
$checkout2500px: (2500px);