forked from M3-Academy/challenge-vtex-io
Entrega do Desafio #2
247
styles/css/vtex.menu.css
Normal file
247
styles/css/vtex.menu.css
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
/*
|
||||||
|
0 - 600PX: Phone
|
||||||
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.menuContainerNav .menuContainer {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.menuContainerNav .menuContainer {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: rgba(255, 255, 255, 0.45);
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isClosed,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 17px;
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isClosed::before,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed::before {
|
||||||
|
visibility: visible;
|
||||||
|
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg);
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isOpen,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isOpen {
|
||||||
|
visibility: hidden;
|
||||||
|
transform: rotate(179deg);
|
||||||
|
width: 17px;
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isOpen::before,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isOpen::before {
|
||||||
|
visibility: visible;
|
||||||
|
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg);
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block {
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--cnpj,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--responsabilidade-social {
|
||||||
|
line-height: 30px;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-link,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--multimarcas {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 164px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-link,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--multimarcas {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-link,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--multimarcas {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy-mobile,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy-mobile {
|
||||||
|
border-bottom: 1px solid #ffffff;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--site-m3-academy-mobile,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--cnpj,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--am3academy-mobile,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--responsabilidade-social,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent--seja-um-franqueado-block {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer--am3academy-mobile,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer--site-m3-academy-mobile {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer--seja-um-franqueado-link,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer--multimarcas {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer--seja-um-franqueado-link,
|
||||||
|
.menuContainerNav .menuContainer .menuItem .styledLinkContainer--multimarcas {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.FooterRightBlock {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.FooterRightBlock {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.FooterRightBlock {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.FooterRightBlock .SpanTitle {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
.FooterRightBlock .SpanTitleBig {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.FooterRightBlock .SpanTitleBig {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.FooterRightBlock .SpanTitleBig {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.FooterRightBlock .UlGroup {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
row-gap: 4px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.FooterRightBlock .UlGroup {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.FooterRightBlock .UlGroup {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.FooterRightBlock .UlGroup .UlSecondary {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
column-gap: 8px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
.FooterRightBlock .UlGroup .UlSecondary .ImgCard {
|
||||||
|
width: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
.FooterRightBlock .UlGroup .UlSecondary .ImgCard {
|
||||||
|
width: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.AutoresBlock .Autores-Group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 15.73px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.AutoresBlock .Autores-Group .Autores-List {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
color: #ffffff;
|
||||||
|
column-gap: 8.72px;
|
||||||
|
}
|
||||||
214
styles/sass/pages/product/vtex.menu.scss
Normal file
214
styles/sass/pages/product/vtex.menu.scss
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
//Footer
|
||||||
|
.menuContainerNav {
|
||||||
|
.menuContainer {
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.menuItem {
|
||||||
|
.styledLinkContainer {
|
||||||
|
margin-left: 0;
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.styledLink {
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.styledLinkContent {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: rgba(255, 255, 255, 0.45);
|
||||||
|
.accordionIcon--site-m3-academy-mobile--isClosed,
|
||||||
|
.accordionIcon--am3academy-mobile--isClosed {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 17px;
|
||||||
|
}
|
||||||
|
.accordionIcon--site-m3-academy-mobile--isClosed::before,
|
||||||
|
.accordionIcon--am3academy-mobile--isClosed::before {
|
||||||
|
visibility: visible;
|
||||||
|
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg);
|
||||||
|
}
|
||||||
|
.accordionIcon--site-m3-academy-mobile--isOpen,
|
||||||
|
.accordionIcon--am3academy-mobile--isOpen {
|
||||||
|
visibility: hidden;
|
||||||
|
transform: rotate(179deg);
|
||||||
|
width: 17px;
|
||||||
|
}
|
||||||
|
.accordionIcon--site-m3-academy-mobile--isOpen::before,
|
||||||
|
.accordionIcon--am3academy-mobile--isOpen::before {
|
||||||
|
visibility: visible;
|
||||||
|
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-up-footer-m3academy-anacarolinaduartecavalcante.svg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.styledLinkContent--site-m3-academy,
|
||||||
|
.styledLinkContent--am3academy,
|
||||||
|
.styledLinkContent--seja-um-franqueado-block {
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.styledLinkContent--seja-um-franqueado-block {
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.styledLinkContent--cnpj,
|
||||||
|
.styledLinkContent--responsabilidade-social {
|
||||||
|
line-height: 30px;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
.styledLinkContent--seja-um-franqueado-link,
|
||||||
|
.styledLinkContent--multimarcas {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 164px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.styledLinkContent--site-m3-academy-mobile,
|
||||||
|
.styledLinkContent--am3academy-mobile {
|
||||||
|
border-bottom: 1px solid #ffffff;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
.styledLinkContent--site-m3-academy,
|
||||||
|
.styledLinkContent--site-m3-academy-mobile,
|
||||||
|
.styledLinkContent--cnpj,
|
||||||
|
.styledLinkContent--am3academy,
|
||||||
|
.styledLinkContent--am3academy-mobile,
|
||||||
|
.styledLinkContent--responsabilidade-social,
|
||||||
|
.styledLinkContent--seja-um-franqueado-block {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.styledLinkContainer--am3academy-mobile,
|
||||||
|
.styledLinkContainer--site-m3-academy-mobile {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.styledLinkContainer--seja-um-franqueado-link,
|
||||||
|
.styledLinkContainer--multimarcas {
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.FooterRightBlock {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.SpanTitle {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
.SpanTitleBig {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.UlGroup {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
row-gap: 4px;
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.UlSecondary {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
column-gap: 8px;
|
||||||
|
list-style: none;
|
||||||
|
.ImgCard {
|
||||||
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
|
width: 42px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
width: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer Credits
|
||||||
|
|
||||||
|
.AutoresBlock {
|
||||||
|
.Autores-Group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 15.73px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
.Autores-List {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
color: #ffffff;
|
||||||
|
column-gap: 8.72px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user