NicollyVieira/desafio-react-e-typescript-nicolly-vieira
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(HeaderBottom): Cria os estilos para todos os tamanhos de tela

Browse Source
This commit is contained in:
Nicolly Vieira Santos Costa 2023-01-03 14:29:00 -03:00
parent 6394f80cd2
commit 5bdbc158cd
11 changed files with 139 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
desafio-react-typescript/src/assets/svgs/close-button.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

3
desafio-react-typescript/src/components/Header/Header.module.scss Normal file
View File

@ -0,0 +1,3 @@
.header {
position: relative;
}

3
desafio-react-typescript/src/components/Header/Header.tsx
View File

@ -1,10 +1,11 @@
import React from "react";
import HeaderBottom from "./components/HeaderBottom";
import HeaderTop from "./components/HeaderTop";
import styles from "./Header.module.scss";
const Header = () => {
return (
<header>
<header className={styles["header"]}>
<HeaderTop />
<HeaderBottom />
</header>

78
desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss Normal file
View File

@ -0,0 +1,78 @@
@import "../../../styles/all.scss";
.headerBottom {
border-top: 1px solid $primary-600;
background: $black;
padding: 14px 100px;
@include mq($lg, max) {
position: absolute;
background-color: $white;
background: rgba(69, 69, 69, 0.7);
top: 0;
border: 0;
padding: 0;
width: 100%;
height: 100vh;
// display: none;
}
&__head {
display: none;
@include mq($lg, max) {
@include display(flex, row, center, space-between);
padding: 31px 16px;
background-color: $black;
width: 96.484375%;
}
@include mq($sm, max) {
width: 90.4%;
}
}
&__login {
@include fontStyle(400, 14px, 16px, $white);
text-transform: uppercase;
}
&__container {
display: flex;
gap: 55px;
@include mq($lg, max) {
padding: 31px 16px;
display: block;
width: 96.484375%;
height: 507px;
background-color: white;
li {
margin-bottom: 12px;
}
}
@include mq($sm, max) {
width: 90.4%;
}
}
&__content {
@include fontStyle(500, 14px, 16px, $white);
text-transform: uppercase;
@include mq($lg, max) {
@include fontStyle(500, 14px, 16px, $primary-600);
}
@include mq($xl, min) {
@include fontStyleResponsive(28px, 33px);
}
}
}

45
desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx
View File

@ -1,15 +1,36 @@
import React from 'react';
import React from "react";
import styles from "./HeaderBottom.module.scss";
import close from "../../../assets/svgs/close-button.svg";
const HeaderBottom = () => {
return (
<div>
<ul>
<li><a href="/">Cursos</a></li>
<li><a href="/">Saiba Mais</a></li>
<li><a href="/">Institucionais</a></li>
</ul>
</div>
)
}
return (
<div className={styles["headerBottom"]}>
<div className={styles["headerBottom__head"]}>
<p className={styles["headerBottom__login"]}>Entrar</p>
<button className={styles["headerBottom__close-button "]}>
<img src={close} alt="Fechar" />
</button>
</div>
<ul className={styles["headerBottom__container"]}>
<li>
<a className={styles["headerBottom__content"]} href="/">
Cursos
</a>
</li>
<li>
<a className={styles["headerBottom__content"]} href="/">
Saiba Mais
</a>
</li>
<li>
<a className={styles["headerBottom__content"]} href="/">
Institucionais
</a>
</li>
</ul>
</div>
);
};
export default HeaderBottom;
export default HeaderBottom;

8
desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/variaveis.scss";
@import "../../../styles/mixins.scss";
@import "../../../styles/all.scss";
.headerTop {
@include display(flex, row, center, space-between);
@ -66,7 +66,7 @@
padding: 8px 44px 8px 16px;
@include borderStyle(2px, $primary-700, 5px);
@include fontStyle($Roboto, 400, 14px, 16px, $primary-500);
@include fontStyle(400, 14px, 16px, $primary-500);
@include mq($lg, max) {
height: 35px;
@ -102,7 +102,7 @@
}
&__login {
@include fontStyle($Roboto, 400, 14px, 16px, $white);
@include fontStyle(400, 14px, 16px, $white);
text-transform: uppercase;
@include mq($lg, max) {

9
desafio-react-typescript/src/components/Header/components/HeaderTop.tsx
View File

@ -3,16 +3,19 @@ import React from "react";
import logoM3Academy from "../../../assets/imgs/Logo-M3Academy.png";
import carrinho from "../../../assets/svgs/carrinho.svg";
import lupa from "../../../assets/svgs/lupa.svg";
import menu from "../../../assets/svgs/menu-hamburguer.svg"
import menu from "../../../assets/svgs/menu-hamburguer.svg";
import styles from "./HeaderTop.module.scss";
const HeaderTop = () => {
return (
<div className={styles["headerTop"]}>
<div className={styles["headerTop__menu-container"]}>
<button className={styles["headerTop__menu-mobile"]}>
<img className={styles["headerTop__menu"]}src={menu} alt="Menu" />
<button
className={styles["headerTop__menu-mobile"]}
>
<img className={styles["headerTop__menu"]} src={menu} alt="Menu" />
</button>
</div>
<figure className={styles["headerTop__image-container"]}>

2
desafio-react-typescript/src/styles/all.scss Normal file
View File

@ -0,0 +1,2 @@
@import "./mixins.scss";
@import "variaveis.scss";

7
desafio-react-typescript/src/styles/global.scss
View File

@ -1,9 +1,10 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
input,
@ -21,6 +22,10 @@ a {
text-decoration: none;
}
ul {
list-style-type: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,

3
desafio-react-typescript/src/styles/mixins.scss
View File

@ -5,8 +5,7 @@
justify-content: $jc;
}
@mixin fontStyle($fm, $fw, $fs, $lh, $fc) {
font-family: $fm;
@mixin fontStyle($fw, $fs, $lh, $fc) {
font-weight: $fw;
font-size: $fs;
line-height: $lh;

4
desafio-react-typescript/src/styles/variaveis.scss
View File

@ -13,10 +13,6 @@ $primary-700: #F2F2F2;
$primary-800: #F9F9F9;
$primary-900: #FF0000;
//Fonts
$Roboto: "Roboto";
//media Queries
$sm: 375px;
$lg: 1024px;