cato447/EIST-Teamprojekt
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

rename modules according to rules

Browse Source
This commit is contained in:
Simon Bußmann
2022-07-22 01:01:21 +02:00
parent 6d6d060d5b
commit 11c1e022b6
51 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
client/src/styling/navbar.scss Normal file
View File

@@ -0,0 +1,268 @@
.navbar-header {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
top: 2vh;
left: 0;
width: 100vw;
padding: 0 5vw;
color: black;
z-index: 4;
a {
text-decoration: none;
color: inherit;
text-transform: uppercase;
font-size: 2vh;
}
.nav-links {
a {
margin: 0.2vh;
padding: 1vh 0.5vh;
transition: all 300ms;
}
a:hover {
font-size: 3vh;
transition: all 300ms;
color: brown;
}
}
}
.menu-icon {
position: relative;
padding: 0.5vh 0.5vh;
cursor: pointer;
z-index: 1;
display: none;
&__line {
display: block;
position: relative;
background: black;
height: 0.2vh;
width: 3vh;
border-radius: 2vh;
&::before, &::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
border-radius: 2vh;
background: black;
transition: background .8s ease;
}
&::before {
transform: translateY(-0.75vh);
}
&::after {
transform: translateY(0.75vh);
}
}
}
.menu-btn {
display: none;
}
.logo{
position: relative;
padding: 0.5vh 0.5vh;
}
.logo:hover {
cursor: default;
}
@media screen {
.navbar-header {
.menu-icon {
display: block;
font-weight: bold;
&__line {
animation: closedButton 1s backwards;
animation-direction: reverse;
&::before {
animation: closedButtonBefore 1s backwards;
animation-direction: reverse;
}
&::after {
animation: closedButtonAfter 1s backwards;
animation-direction: reverse;
}
}
}
.nav-links {
position: absolute;
top: -2vh;
left: 0;
opacity: 0;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
padding: 5vh 0;
width: 100vw;
height: 120vh;
font-weight: bolder;
letter-spacing: 0.25vh;
color: white;
background: #272727;
align-content: center;
transition: opacity 0.8s 0.5s, clip-path 1s 0.5s;
clip-path: circle(9.615384615384615vh at top right);
.nav-links {
opacity: 0;
transform: translateX(100%);
width: 100%;
text-align: center;
justify-content: center;
display: grid;
a {
display: block;
padding: 2vh 0;
}
}
}
.menu-btn:checked{
body{
overflow: hidden;
}
}
.menu-btn:checked ~ .nav-links {
opacity: 1;
clip-path: circle(100% at center);
.nav-link {
justify-content: center;
align-content: center;
display: flex;
opacity: 1;
transform: translateX(0);
}
a {
position: relative;
align-content: center;
justify-content: center;
display: flex;
right: -0.2vh;
top: -11.5vh;
}
}
.menu-btn:checked ~ .menu-icon {
.menu-icon__line {
background: white;
animation: openButton 1s forwards;
&::before {
background: white;
animation: openButtonBefore 1s forwards;
}
&::after {
background: white;
animation: openButtonAfter 1s forwards;
}
}
}
}
.logo{
a {
position: absolute;
left: 0;
font-size: 4vh;
top: -0.68vh;
}
a:hover{
font-size: 4vh;
cursor: default;
}
}
}
@keyframes openButtonBefore {
0% {
transform: translateY(-0.75vh) rotate(0deg);
}
50% {
transform: translateY(0px) rotate(0deg);
}
100% {
transform: translateY(0px) rotate(90deg);
}
}
@keyframes openButton {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
@keyframes openButtonAfter {
0% {
transform: translateY(0.75vh) rotate(0deg);
}
50% {
transform: translateY(0px) rotate(0deg);
}
100% {
transform: translateY(0px) rotate(90deg);
}
}
@keyframes closedButtonBefore {
0% {
transform: translateY(-0.75vh) rotate(0deg);
}
50% {
transform: translateY(0px) rotate(0deg);
}
100% {
transform: translateY(0px) rotate(90deg);
}
}
@keyframes closedButton {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
@keyframes closedButtonAfter {
0% {
transform: translateY(0.75vh) rotate(0deg);
}
50% {
transform: translateY(0px) rotate(0deg);
}
100% {
transform: translateY(0px) rotate(90deg);
}
}