264 lines
5.0 KiB
SCSS
264 lines
5.0 KiB
SCSS
|
|
.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;
|
|
|
|
|
|
&.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;
|
|
|
|
@include responsive(phone) {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
a:first-child {
|
|
padding-left: .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: .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;
|
|
}
|
|
|
|
|
|
|
|
.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);
|
|
|
|
&--2 {
|
|
height: 10rem;
|
|
}
|
|
|
|
&-text {
|
|
width: 60%;
|
|
padding-top: 1.2rem;
|
|
font-size: 1.2rem;
|
|
|
|
&: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;
|
|
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;
|
|
|
|
&:hover .dropdownContent {
|
|
transition: all .4s;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.pseudo-link {
|
|
cursor: pointer;
|
|
@include responsive(tab_port) {
|
|
display: none;
|
|
}
|
|
|
|
} |