website/assets/partials/_nav.scss

117 lines
2.4 KiB
SCSS
Raw Normal View History

2020-09-14 16:24:02 +02:00
nav {
background: rgb(60, 60, 90);
2020-09-21 10:59:52 +02:00
overflow-x: auto;
overflow-y: hidden;
position: sticky;
top: 0;
white-space: nowrap;
2020-09-14 16:24:02 +02:00
.container {
align-items: center;
display: flex;
height: 64px;
2020-09-21 10:59:52 +02:00
.website-name {
2020-09-14 16:24:02 +02:00
a {
color: rgb(245, 245, 245);
display: block;
padding: 20px 30px;
text-decoration: none;
transition: background .2s;
&:hover {
background: rgb(50, 50, 75);
}
2020-10-05 09:57:10 +02:00
&.active {
border-bottom: 2px solid rgb(215,215,225);
border-top: 2px solid transparent;
padding: 16px 30px;
}
2020-09-14 16:24:02 +02:00
}
}
.seperator {
2020-10-05 09:57:10 +02:00
cursor: default;
display: block;
padding: 20px;
}
.website-mainmenu {
2020-09-14 16:24:02 +02:00
ul {
display: flex;
2020-09-23 18:17:31 +02:00
margin: 0;
padding: 0;
2020-09-23 18:17:31 +02:00
li {
list-style-type: none;
2020-10-05 09:57:10 +02:00
&.active a {
border-bottom: 2px solid rgb(215,215,225);
border-top: 4px solid transparent;
padding: 16px 30px;
}
2020-09-23 18:17:31 +02:00
a {
color: rgb(245, 245, 245);
display: block;
text-decoration: none;
2020-09-23 18:17:31 +02:00
transition: background .2s;
padding: 20px 30px;
&:hover {
background: rgb(50, 50, 75);
}
2020-09-23 18:17:31 +02:00
}
}
}
}
.website-externallinks {
margin-left: auto;
ul {
display: flex;
margin: 0;
padding: 0;
li {
list-style-type: none;
a {
color: rgb(245, 245, 255);
display: block;
text-decoration: none;
transition: background .2s;
padding: 20px 30px;
&:hover {
background: rgb(50, 50, 75);
}
}
2020-09-23 18:17:31 +02:00
.seperator {
display: block;
padding: 20px 10px;
2020-09-23 18:17:31 +02:00
}
}
2020-09-14 16:24:02 +02:00
}
}
}
}
@media (max-width: 1140px) {
2020-09-21 10:59:52 +02:00
nav {
.container {
margin: 0;
width: 100%;
}
}
}
@media (max-width: 800px) {
nav {
.container {
.website-externallinks {
ul {
li {
a {
background: rgb(50, 50, 75);
2020-10-05 09:57:10 +02:00
color: rgb(215, 215, 225);
&:hover {
background: rgb(40, 40, 60);
}
}
.seperator {
display: block;
padding: 20px 10px;
}
}
}
2020-09-21 10:59:52 +02:00
}
}
}
}