HenriqueSantosSantana/desafio-react-e-typescript-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): created small styles for hover details in links

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-12-28 00:58:06 -03:00
parent d2d9b25774
commit a1d3fe7bcb
3 changed files with 73 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/settings/styles/global/_config.scss
View File

@ -7,6 +7,7 @@
}
--clr-primary-purple-500: #{map-get(var.$clr-primary-purple, '500')};
--clr-primary-blue-500: #{map-get(var.$clr-primary-blue, '500')};
@each $name, $value in var.$clr-gray {
--clr-gray-#{$name}: #{$value};

4
src/settings/styles/utils/resources/_colors.scss
View File

@ -9,6 +9,10 @@ $clr-primary-purple: (
'500': #5200ff,
);
$clr-primary-blue: (
'500': #00c8ff,
);
$clr-gray: (
'100': #fafafa,
'150': #f0f0f0,

100
src/template/Header/index.module.scss
View File

@ -6,13 +6,16 @@
left: 0;
padding: 25px 0;
background-color: var(--clr-common-black);
@media screen and (min-width: 1025px) {
background-color: var(--clr-common-black);
}
.header {
@media only screen and (min-width: 1025px) {
padding: 25px 0 0;
}
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
min-height: 162px;
}
}
@ -22,27 +25,29 @@
align-items: center;
justify-content: space-between;
padding: 0 16px;
padding: 0px 16px;
margin-bottom: 27.14px;
}
@media screen and (min-width: 1025px) {
.content {
@media only screen and (min-width: 1025px) {
width: #{function.fluid(1080px, 1280px)};
padding: 0;
margin: 0 auto 27.14px;
}
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
width: #{function.fluid(2299.68px, 2500px)};
margin-bottom: 22px;
}
}
.logo {
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
width: function.fluid(136px, 1080px);
}
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
width: function.fluid(265.62px, 2299.68px);
}
}
@ -52,7 +57,6 @@
align-items: center;
justify-content: center;
min-height: auto;
min-height: 36px;
border: 2px solid var(--clr-gray-150);
border-radius: 5px;
@ -61,12 +65,15 @@
input {
width: 100%;
min-height: 36px;
font-size: var(--txt-normal);
padding: 0 9px 0 16px;
min-height: 36px;
border-radius: 5px 0 0 5px;
}
font-size: var(--txt-normal);
}
}
.search {
button {
display: flex;
align-items: center;
@ -77,13 +84,16 @@
background-color: var(--clr-common-white);
}
@media screen and (min-width: 1025px) {
}
.search {
@media only screen and (min-width: 1025px) {
button {
width: 50px;
}
}
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
&,
input {
min-height: 57px;
@ -106,15 +116,22 @@
align-items: center;
a {
color: var(--clr-common-white);
display: block;
font-size: var(--txt-normal);
text-transform: uppercase;
color: var(--clr-common-white);
transition: color 200ms linear;
&:hover {
color: var(--clr-primary-blue-500);
}
}
}
.actions-top {
gap: 55px;
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
img {
width: 54.68px;
height: 54.68px;
@ -126,7 +143,7 @@
.open {
display: flex;
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
display: none;
}
}
@ -137,7 +154,7 @@
display: none;
}
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
a {
display: block;
}
@ -145,12 +162,14 @@
}
.menu {
@media screen and (max-width: 1024px) {
@media only screen and (max-width: 1024px) {
position: fixed;
width: 100vw;
height: 100vh;
left: -100%;
top: 0;
width: 100vw;
height: 100vh;
background-color: transparent;
transition: 300ms ease;
@ -159,40 +178,52 @@
height: 100vh;
}
}
}
@media screen and (max-width: 768px) {
.menu {
@media only screen and (max-width: 768px) {
&-content {
width: function.fluid(339px, 375px);
height: 100vh;
}
}
}
.menu {
.actions-bottom {
width: 100%;
height: 78px;
background-color: var(--clr-common-black);
}
.actions-bottom,
.list {
padding: 0 16px;
a {
display: block;
text-transform: uppercase;
transition: color 200ms linear;
&:hover {
color: var(--clr-primary-blue-500);
}
}
}
}
.menu {
.list {
height: calc(100% - 78px);
background-color: var(--clr-common-white);
padding-top: 31px;
background-color: var(--clr-common-white);
a {
margin-bottom: 12px;
font-size: var(--txt-normal);
font-weight: 500;
font-size: var(--txt-normal);
color: var(--clr-gray-400);
}
@ -205,17 +236,22 @@
justify-content: space-between;
}
// menu styles for large devices 1025 > x
// styles for menu is active
.menu {
&.active {
left: 0;
background-color: #0004;
}
}
@media screen and (min-width: 1025px) {
width: 100%;
// menu styles for large devices 1025 > x
.menu {
@media only screen and (min-width: 1025px) {
display: block;
width: 100%;
.list {
display: flex;
align-items: center;
@ -242,11 +278,11 @@
}
.search-top {
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
width: function.fluid(264px, 1080px);
}
@media screen and (min-width: 2500px) {
@media only screen and (min-width: 2500px) {
width: function.fluid(515.62px, 2299.68px);
}
}
@ -259,7 +295,7 @@
.search-top {
display: none;
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
display: flex;
}
}
@ -273,7 +309,7 @@
width: 100%;
}
@media screen and (min-width: 1025px) {
@media only screen and (min-width: 1025px) {
display: none;
}
}