forked from M3-Academy/desafio-react-e-typescript
feat(HeaderTop): Cria o estilo para todos os tamanhos de tela
This commit is contained in:
parent
553fd8a402
commit
bf65870046
BIN
desafio-react-typescript/src/assets/imgs/Logo-M3Academy.png
Normal file
BIN
desafio-react-typescript/src/assets/imgs/Logo-M3Academy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,5 @@
|
||||
<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
|
||||
<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
|
||||
<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 688 B |
@ -0,0 +1,123 @@
|
||||
@import "../../../styles/variaveis.scss";
|
||||
@import "../../../styles/mixins.scss";
|
||||
|
||||
.headerTop {
|
||||
@include display(flex, row, center, space-between);
|
||||
|
||||
padding: 22px 100px;
|
||||
background: $black;
|
||||
|
||||
@include mq($lg, max) {
|
||||
padding: 25px 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__menu-container {
|
||||
display: none;
|
||||
@include mq($lg, max) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
width: 12.59259259%;
|
||||
min-width: 100px;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 13.709678%;
|
||||
}
|
||||
|
||||
@include mq($sm, max) {
|
||||
width: 39.650145%;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 11.549%;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__input-container {
|
||||
position: relative;
|
||||
width: 22.77777777778%;
|
||||
|
||||
@include mq($lg, max) {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 22.4185%;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 8px 44px 8px 16px;
|
||||
|
||||
@include borderStyle(2px, $primary-700, 5px);
|
||||
@include fontStyle($Roboto, 400, 14px, 16px, $primary-500);
|
||||
|
||||
@include mq($lg, max) {
|
||||
height: 35px;
|
||||
padding: 10px 44px 10px 16px ;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
height: 57px;
|
||||
padding: 12px 64px 12px 16px;
|
||||
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
}
|
||||
}
|
||||
|
||||
&__lupa-wrapper {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-right: 16px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
|
||||
margin-right: 16.47px;
|
||||
}
|
||||
}
|
||||
|
||||
&__login-container {
|
||||
@include display(flex, row, center, space-between);
|
||||
gap: 55px;
|
||||
}
|
||||
|
||||
&__login {
|
||||
@include fontStyle($Roboto, 400, 14px, 16px, $white);
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq($lg, max) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(28px, 33px);
|
||||
}
|
||||
}
|
||||
|
||||
&__minicart-container {
|
||||
@include mq($xl, min) {
|
||||
width: 54.68px;
|
||||
height: 54.68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,26 +1,44 @@
|
||||
import React from "react";
|
||||
|
||||
import logoM3 from "../../../assets/imgs/logo-m3.png";
|
||||
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 styles from "./HeaderTop.module.scss";
|
||||
|
||||
const HeaderTop = () => {
|
||||
return (
|
||||
<div>
|
||||
<figure>
|
||||
<img src={logoM3} alt="Logo da M3" />
|
||||
</figure>
|
||||
<div>
|
||||
<input type="search" />
|
||||
<span>
|
||||
<img src={lupa} alt="" />
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/">Entrar</a>
|
||||
<span>
|
||||
<img src={carrinho} alt="" />
|
||||
</span>
|
||||
<figure className={styles["headerTop__image-container"]}>
|
||||
<img
|
||||
className={styles["headerTop__image"]}
|
||||
src={logoM3Academy}
|
||||
alt="Logo da M3 Academy"
|
||||
/>
|
||||
</figure>
|
||||
<div className={styles["headerTop__input-container"]}>
|
||||
<input
|
||||
className={styles["headerTop__input"]}
|
||||
type="search"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<button className={styles["headerTop__lupa-wrapper"]}>
|
||||
<img src={lupa} alt="Lupa" />
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles["headerTop__login-container"]}>
|
||||
<a className={styles["headerTop__login"]} href="/">
|
||||
Entrar
|
||||
</a>
|
||||
<button className={styles["headerTop__minicart-container"]}>
|
||||
<img src={carrinho} alt="Carrinho" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,9 +3,9 @@ import Header from "../components/Header/Header";
|
||||
|
||||
const Institucional = () => {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Header />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,29 @@
|
||||
@import "variaveis.scss";
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
32
desafio-react-typescript/src/styles/mixins.scss
Normal file
32
desafio-react-typescript/src/styles/mixins.scss
Normal file
@ -0,0 +1,32 @@
|
||||
@mixin display($display, $fd, $al, $jc) {
|
||||
display: $display;
|
||||
flex-direction: $fd;
|
||||
align-items: $al;
|
||||
justify-content: $jc;
|
||||
}
|
||||
|
||||
@mixin fontStyle($fm, $fw, $fs, $lh, $fc) {
|
||||
font-family: $fm;
|
||||
font-weight: $fw;
|
||||
font-size: $fs;
|
||||
line-height: $lh;
|
||||
color: $fc;
|
||||
}
|
||||
|
||||
@mixin fontStyleResponsive($fs, $lh) {
|
||||
font-size: $fs;
|
||||
line-height: $lh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin borderStyle($bpx, $bc, $br) {
|
||||
border: $bpx solid $bc;
|
||||
border-radius: $br;
|
||||
}
|
||||
|
||||
@mixin mq($width, $type) {
|
||||
@media only screen and (#{$type}-width: $width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -11,4 +11,13 @@ $primary-500: #C6C6C6;
|
||||
$primary-600: #C4C4C4;
|
||||
$primary-700: #F2F2F2;
|
||||
$primary-800: #F9F9F9;
|
||||
$primary-900: #FF0000;
|
||||
$primary-900: #FF0000;
|
||||
|
||||
|
||||
//Fonts
|
||||
$Roboto: "Roboto";
|
||||
|
||||
//media Queries
|
||||
$sm: 375px;
|
||||
$lg: 1024px;
|
||||
$xl: 2500px;
|
||||
Loading…
Reference in New Issue
Block a user