anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adicionando arquivos .scss e .css vtex.menu com estilos do footer

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-02-01 10:36:15 -03:00
parent 01f4e4cc6b
commit b95541fb3f
2 changed files with 461 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
styles/css/vtex.menu.css Normal file
View 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
View 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;
}
}
}