diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css new file mode 100644 index 0000000..64d6962 --- /dev/null +++ b/styles/css/vtex.menu.css @@ -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; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.menu.scss b/styles/sass/pages/product/vtex.menu.scss new file mode 100644 index 0000000..69b9cf5 --- /dev/null +++ b/styles/sass/pages/product/vtex.menu.scss @@ -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; + } + } +}