forked from M3-Academy/desafio-react-e-typescript
feat(header): created styles for large devices
This commit is contained in:
parent
f2d7c3a5c7
commit
d2d9b25774
@ -0,0 +1,7 @@
|
||||
@function fluid($width, $design-width) {
|
||||
$width: calc($width / $design-width * 100);
|
||||
|
||||
$width: quote($width + '%');
|
||||
|
||||
@return unquote($width);
|
||||
}
|
@ -1,5 +1,9 @@
|
||||
@use '../../settings/styles/utils/helpers/functions' as function;
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
padding: 25px 0;
|
||||
background-color: var(--clr-common-black);
|
||||
@ -7,6 +11,10 @@
|
||||
@media screen and (min-width: 1025px) {
|
||||
padding: 25px 0 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
min-height: 162px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -16,6 +24,27 @@
|
||||
|
||||
padding: 0 16px;
|
||||
margin-bottom: 27.14px;
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
width: #{function.fluid(1080px, 1280px)};
|
||||
padding: 0;
|
||||
margin: 0 auto 27.14px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: #{function.fluid(2299.68px, 2500px)};
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
@media screen and (min-width: 1025px) {
|
||||
width: function.fluid(136px, 1080px);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: function.fluid(265.62px, 2299.68px);
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
@ -24,7 +53,7 @@
|
||||
justify-content: center;
|
||||
|
||||
min-height: auto;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
border: 2px solid var(--clr-gray-150);
|
||||
border-radius: 5px;
|
||||
|
||||
@ -32,7 +61,8 @@
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
font-size: var(--txt-normal);
|
||||
padding: 0 9px 0 16px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
@ -47,6 +77,27 @@
|
||||
|
||||
background-color: var(--clr-common-white);
|
||||
}
|
||||
@media screen and (min-width: 1025px) {
|
||||
button {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
&,
|
||||
input {
|
||||
min-height: 57px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 56.85px;
|
||||
|
||||
img {
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-top,
|
||||
@ -56,6 +107,18 @@
|
||||
|
||||
a {
|
||||
color: var(--clr-common-white);
|
||||
font-size: var(--txt-normal);
|
||||
}
|
||||
}
|
||||
|
||||
.actions-top {
|
||||
gap: 55px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
img {
|
||||
width: 54.68px;
|
||||
height: 54.68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,7 +131,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// remove action link for small devices and added for large devices 1025 > x
|
||||
// remove action top link for small devices and added for large devices 1025 > x
|
||||
.actions-top {
|
||||
a {
|
||||
display: none;
|
||||
@ -92,7 +155,14 @@
|
||||
transition: 300ms ease;
|
||||
|
||||
&-content {
|
||||
width: 90%;
|
||||
width: function.fluid(988px, 1024px);
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
&-content {
|
||||
width: function.fluid(339px, 375px);
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
@ -120,7 +190,10 @@
|
||||
|
||||
a {
|
||||
margin-bottom: 12px;
|
||||
|
||||
font-size: var(--txt-normal);
|
||||
font-weight: 500;
|
||||
|
||||
color: var(--clr-gray-400);
|
||||
}
|
||||
}
|
||||
@ -168,6 +241,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.search-top {
|
||||
@media screen and (min-width: 1025px) {
|
||||
width: function.fluid(264px, 1080px);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: function.fluid(515.62px, 2299.68px);
|
||||
}
|
||||
}
|
||||
|
||||
/*|[X]o-o-o-o[O]|*\
|
||||
|=| SEARCH BOXS |=|
|
||||
\*|[O]o-o-o-o[X]|*/
|
||||
|
@ -1,4 +1,5 @@
|
||||
import logoImg from '../../assets/m3-logo-small.png'
|
||||
import logoMediumImg from '../../assets/m3-logo-medium.png'
|
||||
import searchIcon from '../../assets/icons/search.svg'
|
||||
import cartIcon from '../../assets/icons/minicart.svg'
|
||||
import openIcon from '../../assets/icons/hamburger.svg'
|
||||
@ -49,6 +50,10 @@ export const Header = () => {
|
||||
|
||||
<a className={css.logo} href="/">
|
||||
<picture>
|
||||
<source
|
||||
media="(min-width:1025px)"
|
||||
srcSet={logoMediumImg}
|
||||
></source>
|
||||
<img src={logoImg} alt="logo da M3 Academy" />
|
||||
</picture>
|
||||
</a>
|
||||
|
Loading…
Reference in New Issue
Block a user