forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'feat: estilizacao do header progress bar' (#2) from feature/styleProgressBar into development
Reviewed-on: EmmanuelVitor/m3-academy-template-checkout-EmmanuelVitor#2
This commit is contained in:
commit
b2df905e97
@ -2,4 +2,5 @@
|
||||
@import "./lib/slick";
|
||||
@import "./partials/header";
|
||||
@import "./partials/footer";
|
||||
@import "./partials/prateleira";
|
||||
@import "./checkout/checkout.scss";
|
||||
@ -1,22 +1,231 @@
|
||||
/* _header.scss */
|
||||
.headerCheckout {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
.container {
|
||||
width: auto !important;
|
||||
width: 79.53125%;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
padding: 29px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 96.875%;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
img {
|
||||
height: 52px;
|
||||
width: auto;
|
||||
display: block;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 382.07px;
|
||||
height: 91.2px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 439px;
|
||||
height: 35px;
|
||||
margin: 30px 0;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 1078.68px;
|
||||
height: 67px;
|
||||
margin-right: 132px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
&.central {
|
||||
display: flex;
|
||||
|
||||
.containerLi {
|
||||
div {
|
||||
width: 90px;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 179px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.containerLi {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
width: 444px;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.progress-bar-text {
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.meu-carrinho {
|
||||
@media (min-width: 2500px) {
|
||||
|
||||
width: 155.3px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagamento {
|
||||
margin-left: 25px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
|
||||
width: 127.86px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-circle-1,
|
||||
.progress-bar-circle-2,
|
||||
.progress-bar-circle-3 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid;
|
||||
border-radius: 100%;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.progress-bar-circle-1 {
|
||||
margin-left: 25px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
margin-left: 50px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-circle-3 {
|
||||
margin-left: 50px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
margin-left: 100px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.progress-bar-line-1 {
|
||||
background-color: #000;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
left: 28%;
|
||||
width: 100%;
|
||||
bottom: 5px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
left: 17.2%;
|
||||
width: 100%;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-line-2 {
|
||||
background-color: #000;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
right: 63%;
|
||||
width: 100%;
|
||||
bottom: 5px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
right: 77%;
|
||||
width: 100%;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__safeBuy {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
margin-right: 8px;
|
||||
width: 12px;
|
||||
height: 15px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 29.47px;
|
||||
height: 41.46px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 12px;
|
||||
height: 13.11px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -27,6 +236,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-gray;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
|
||||
$font-family: "Open Sans", sans-serif;
|
||||
$font-family-secundary:"Tenor Sans", sans-serif;
|
||||
$font-family-secundary: "Tenor Sans", sans-serif;
|
||||
|
||||
/* Colors */
|
||||
$color-black: #292929;
|
||||
@ -26,13 +26,11 @@ $grid-breakpoints: (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
xl: 1200px) !default;
|
||||
|
||||
$z-index: (
|
||||
level1: 5,
|
||||
level2: 10,
|
||||
level3: 15,
|
||||
level4: 20,
|
||||
level5: 25
|
||||
) !default;
|
||||
level5: 25) !default;
|
||||
Loading…
Reference in New Issue
Block a user