forked from M3-Academy/m3-academy-template-checkout
feat(body): Estilizando o carrinho
This commit is contained in:
parent
71bb9076ea
commit
194d9ddbc6
@ -12,7 +12,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 0 !important;
|
margin: 50px 0 0 0 !important;
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -36,54 +36,82 @@
|
|||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
}
|
}
|
||||||
.infoCards {
|
.infoCards {
|
||||||
width: 79.375%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
.infoCard {
|
.infoCard {
|
||||||
width: 23.81%;
|
width: 242px;
|
||||||
height: 390px;
|
height: 390px;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
&__image {
|
&__image {
|
||||||
width: 100%;
|
max-width: 100%;
|
||||||
object-fit: fill;
|
height: 242px;
|
||||||
|
object-fit: cover;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #000;
|
color: #000;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__tamanhos {
|
&__tamanhos {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
margin-left: 0%;
|
||||||
|
gap: 5px;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
&__tamanho {
|
&__tamanho {
|
||||||
margin-right: 5px;
|
|
||||||
background-color: $color-blue-300;
|
background-color: $color-blue-300;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
&__numero {
|
&__numero {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
&__link {
|
&__link {
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
margin: 5px;
|
margin: 4px;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&__link {
|
||||||
|
padding: 12px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 242px;
|
||||||
|
height: 42px;
|
||||||
|
margin-top: 32px;
|
||||||
|
font-family: $font-family;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: $color-white;
|
||||||
|
background-color: $color-blue-300;
|
||||||
|
border-radius: 8px;
|
||||||
|
&::hoover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user