fixed header styles
This commit is contained in:
andres alcocer
@@ -1,264 +1,252 @@
|
||||
|
||||
.navigation {
|
||||
background-color: transparent;
|
||||
z-index: 100;
|
||||
grid-column: 1 / 13;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 6.7rem;
|
||||
transition-timing-function: ease-in;
|
||||
transition: all 1s;
|
||||
background-color: transparent;
|
||||
z-index: 100;
|
||||
grid-column: 1 / 13;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 6.7rem;
|
||||
transition-timing-function: ease-in;
|
||||
transition: all 1s;
|
||||
top: 0;
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
&.black {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
&.black {
|
||||
background-color: $color-background;
|
||||
}
|
||||
&__container {
|
||||
background-color: transparent;
|
||||
margin-left: 3.8rem;
|
||||
display: flex;
|
||||
height: 6.7rem;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&__container {
|
||||
background-color: transparent;
|
||||
margin-left: 3.8rem;
|
||||
@include responsive(phone) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
a:first-child {
|
||||
padding-left: 0.2%;
|
||||
color: $color-red;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
&--bellLogo {
|
||||
cursor: pointer;
|
||||
height: 2.2rem;
|
||||
fill: red;
|
||||
width: 2.2rem;
|
||||
padding-right: 2.5rem;
|
||||
|
||||
@include responsive(phone) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--userLogo {
|
||||
margin-top: 2rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: rgb(201, 199, 78);
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
@include responsive(phone) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover > .dropdownContent {
|
||||
transition: all 0.4s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&--downArrow {
|
||||
cursor: pointer;
|
||||
fill: #fff;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-right: 5.8rem;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--downArrow-2 {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
fill: #fff;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include responsive(phone) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--logo {
|
||||
margin-top: 1rem;
|
||||
height: 5rem;
|
||||
padding-right: 1rem;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
padding-right: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
color: rgb(221, 221, 221);
|
||||
text-decoration: none;
|
||||
margin-right: 2rem;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 2.6rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgb(167, 167, 167);
|
||||
}
|
||||
}
|
||||
|
||||
&--left {
|
||||
flex-grow: 1;
|
||||
color: #fff;
|
||||
padding-right: 2rem;
|
||||
display: flex;
|
||||
height: 6.7rem;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include responsive(phone) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
&__input {
|
||||
font-size: 1.4rem;
|
||||
border: none;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
width: 0px;
|
||||
padding: 10px;
|
||||
padding-right: 2rem;
|
||||
background: $color-background;
|
||||
border: 1px solid #fff;
|
||||
transition: width 0.5s;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
|
||||
a:first-child {
|
||||
padding-left: .2%;
|
||||
color: $color-red;
|
||||
font-size: 4rem;
|
||||
&:focus {
|
||||
padding-left: 4rem;
|
||||
width: 22rem;
|
||||
cursor: text;
|
||||
opacity: 1;
|
||||
|
||||
@include responsive(phone) {
|
||||
width: 16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--bellLogo {
|
||||
cursor: pointer;
|
||||
height: 2.2rem;
|
||||
fill: red;
|
||||
width: 2.2rem;
|
||||
padding-right: 2.5rem;
|
||||
|
||||
@include responsive(phone) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--userLogo {
|
||||
margin-top: 2rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: rgb(201, 199, 78);
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
margin-right: .5rem;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
@include responsive(phone) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover > .dropdownContent {
|
||||
|
||||
transition: all .4s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&--downArrow {
|
||||
cursor: pointer;
|
||||
fill: #fff;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-right: 5.8rem;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--downArrow-2 {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
fill: #fff;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include responsive(phone) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--logo {
|
||||
margin-top: 1rem;
|
||||
height: 5rem;
|
||||
padding-right: 1rem;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
padding-right: .1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-link {
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
color: rgb(221, 221, 221);
|
||||
text-decoration: none;
|
||||
margin-right: 2rem;
|
||||
transition: all .2s;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 2.6rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgb(167, 167, 167);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--left {
|
||||
flex-grow: 1;
|
||||
color: #fff;
|
||||
padding-right: 2rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
&__input {
|
||||
font-size: 1.4rem;
|
||||
border: none;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
width: 0px;
|
||||
padding: 10px;
|
||||
padding-right: 2rem;
|
||||
background: $color-background;
|
||||
border: 1px solid #fff;
|
||||
transition: width .5s;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
|
||||
&:focus {
|
||||
padding-left: 4rem;
|
||||
width: 22rem;
|
||||
cursor: text;
|
||||
opacity: 1;
|
||||
|
||||
@include responsive(phone) {
|
||||
width: 16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
transform: translateX(2.4rem) translateY(1rem);
|
||||
cursor: pointer;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
transform: translateX(2.4rem) translateY(1rem);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dropdownContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// align-items: center;
|
||||
opacity: 0;
|
||||
|
||||
color: #FFF;
|
||||
transition-delay: .5s;
|
||||
padding-left: 1rem;
|
||||
padding-top: 1.8rem;
|
||||
visibility: hidden;
|
||||
height: 19rem;
|
||||
border: 1px solid rgb(73, 73, 73);
|
||||
width: 15rem;
|
||||
background-color: rgba(#000, .9);
|
||||
transform: translateY(4.6rem) translateX(-11rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// align-items: center;
|
||||
opacity: 0;
|
||||
|
||||
&--2 {
|
||||
height: 10rem;
|
||||
}
|
||||
color: #fff;
|
||||
transition-delay: 0.5s;
|
||||
padding-left: 1rem;
|
||||
padding-top: 1.8rem;
|
||||
visibility: hidden;
|
||||
height: 19rem;
|
||||
border: 1px solid rgb(73, 73, 73);
|
||||
width: 15rem;
|
||||
background-color: rgba(#000, 0.9);
|
||||
transform: translateY(4.6rem) translateX(-11rem);
|
||||
|
||||
&-text {
|
||||
width: 60%;
|
||||
padding-top: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid #fff;
|
||||
// border-width: 2%;
|
||||
}
|
||||
}
|
||||
&--2 {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
&-textOutside {
|
||||
font-size: 1.2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
&-text {
|
||||
width: 60%;
|
||||
padding-top: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&--user {
|
||||
height: 3rem;
|
||||
&:hover {
|
||||
border-bottom: 1px solid #fff;
|
||||
// border-width: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
&-textOutside {
|
||||
font-size: 1.2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
&--user {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 5px;
|
||||
background-color: rgb(64, 168, 228);
|
||||
|
||||
&-2 {
|
||||
background-color: rgb(230, 145, 48);
|
||||
}
|
||||
|
||||
&-3 {
|
||||
background-color: rgb(123, 230, 96);
|
||||
}
|
||||
|
||||
&-text {
|
||||
width: 3rem;
|
||||
border-radius: 5px;
|
||||
background-color: rgb(64, 168, 228);
|
||||
font-size: 1.2rem;
|
||||
transform: translateX(4rem) translateY(-2rem);
|
||||
|
||||
&-2 {
|
||||
background-color: rgb(230, 145, 48);
|
||||
&:hover {
|
||||
border-bottom: 1px solid #fff;
|
||||
border-width: 100%;
|
||||
}
|
||||
|
||||
&-3 {
|
||||
background-color: rgb(123, 230, 96);
|
||||
}
|
||||
|
||||
&-text {
|
||||
width: 3rem;
|
||||
font-size: 1.2rem;
|
||||
transform: translateX(4rem) translateY(-2rem);
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid #fff;
|
||||
border-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownContainer {
|
||||
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
&:hover .dropdownContent {
|
||||
transition: all .4s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
&:hover .dropdownContent {
|
||||
transition: all 0.4s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.pseudo-link {
|
||||
cursor: pointer;
|
||||
@include responsive(tab_port) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
cursor: pointer;
|
||||
@include responsive(tab_port) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user