Merge pull request 'style: trocado cor hexadecimal por variável sass.' (#14) from release/header into development

Reviewed-on: #14
This commit is contained in:
Luiz Felipe Silva 2023-01-19 02:34:51 +00:00
commit 652a5ffbe3
4 changed files with 90 additions and 96 deletions

View File

@ -7,7 +7,7 @@
align-items: center;
border-bottom: 1px solid $primary-500;
padding: 0 100px;
background-color: $black;
background-color: $black-100;
@media (min-width: 2500px) {
padding: 22px 100px;

View File

@ -1,89 +0,0 @@
.menu-wrapper {
position: absolute;
/* O inset é uma abreviação do top, bottom, left e right juntos. */
inset: 0;
display: flex;
pointer-events: none;
opacity: 0;
}
div:has(> .menu-wrapper.false) {
display: none;
}
@media (max-width: 1024px) {
div:has(> .menu-wrapper.false) {
display: flex;
}
}
.menu-wrapper.false {
display: none;
}
.menu-wrapper.opened {
opacity: 1;
pointer-events: all;
}
.menu-content {
z-index: 2;
width: 90.5%;
height: 585px;
}
@media (max-width: 1024px) {
.menu-icon {
display: flex;
}
}
@media (min-width: 280px) and (max-width: 1024px) {
.menu-content {
width: 95.30%;
}
}
.menu-content-header {
padding: 31px 16px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #000;
}
.menu-content-header a {
font-size: 14px;
font-weight: 400;
line-height: 16px;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.menu-content-nav {
background-color: #fff;
height: 100%;
padding: 31px 16px;
}
.menu-content-nav li {
list-style: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-transform: uppercase;
color: #c4c4c4;
}
.menu-content-nav li:nth-child(2) {
margin: 12px 0;
}
.menu-overlay {
position: fixed;
inset: 0;
background-color: #454545B2;
z-index: 1;
}

View File

@ -0,0 +1,74 @@
@import "../../styles/utils/variables.scss";
.menuWrapper {
position: absolute;
/* O inset é uma abreviação do top, bottom, left e right juntos. */
inset: 0;
display: flex;
pointer-events: none;
opacity: 0;
.menuContent {
z-index: 2;
width: 90.5%;
}
.menuContent-header {
padding: 31px 16px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $black-100;
a {
font-size: 14px;
font-weight: 400;
line-height: 16px;
text-transform: uppercase;
color: $white;
text-decoration: none;
}
}
.menuContent-nav {
background-color: $white;
height: 585px;
padding: 31px 16px;
li {
list-style: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-transform: uppercase;
color: $primary-400;
&:nth-child(2) {
margin: 12px 0;
}
}
}
.menuOverlay {
position: fixed;
inset: 0;
background-color: #454545b2;
z-index: 1;
}
}
.menuOpened {
opacity: 1;
pointer-events: all;
@media (min-width: 280px) and (max-width: 1024px) {
width: 95.3%;
}
}
@media (min-width: 1025px) {
div:has(> .menuWrapper) {
display: none;
}
}

View File

@ -1,7 +1,10 @@
// Bibliotecas
import React from "react";
import "./Menu.css";
// Componentes
import menuOpened from "./Menu.module.scss";
// Imagens
import menuClose from "../../assets/svg/closeMenu.svg";
interface MenuProps {
@ -11,9 +14,15 @@ interface MenuProps {
const MenuOpened = ({ isOpened, setIsOpened }: MenuProps) => {
return (
<div className={`menu-wrapper ${isOpened && "opened"}`}>
<div className="menu-content">
<div className="menu-content-header">
<div
className={
isOpened
? `${menuOpened['menuWrapper']} ${menuOpened["menuOpened"]}`
: `${menuOpened["menuWrapper"]}`
}
>
<div className={menuOpened["menuContent"]}>
<div className={menuOpened["menuContent-header"]}>
<div>
<a href="#entrar">Entrar</a>
</div>
@ -27,7 +36,7 @@ const MenuOpened = ({ isOpened, setIsOpened }: MenuProps) => {
</div>
</div>
<nav className="menu-content-nav">
<nav className={menuOpened["menuContent-nav"]}>
<ul>
<li>Cursos</li>
<li>Saiba mais</li>
@ -37,7 +46,7 @@ const MenuOpened = ({ isOpened, setIsOpened }: MenuProps) => {
</div>
<div
className="menu-overlay"
className={menuOpened["menuOverlay"]}
onClick={() => setIsOpened(false)}
/>
</div>