You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
2.6 KiB
154 lines
2.6 KiB
:root {
|
|
--navbar-background-color: #f2f2f2;
|
|
--navbar-item-hovered-color:white;
|
|
--navbar-separator-color:#ececec;
|
|
--navbar-icon-color:#646c79;
|
|
--navbar-text-color:black;
|
|
--navbar-transition-speed: .2s;
|
|
--primary-color:$color-8;
|
|
--navbar-logo-background-color:#e2dfe4;
|
|
}
|
|
|
|
html, body {
|
|
margin:0;
|
|
font-family: 'Source Sans Pro';
|
|
font-size:16px;
|
|
}
|
|
|
|
main {
|
|
padding: 1rem 4rem;
|
|
margin-left: 5rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.RightBar{
|
|
width: 20%;
|
|
}
|
|
|
|
.navbar {
|
|
width:5rem;
|
|
position:fixed;
|
|
top:0px;
|
|
left:0px;
|
|
bottom:0px;
|
|
background:var(--navbar-background-color);
|
|
box-shadow: rgba(12,43, 30, 0.2) 0 4px 14px;
|
|
transition: width var(--navbar-transition-speed) ease;
|
|
z-index: 11;
|
|
}
|
|
|
|
.navbar:hover {
|
|
width:15rem;
|
|
}
|
|
|
|
.navbar-menu {
|
|
list-style: none;
|
|
padding:0;
|
|
margin:0;
|
|
display:flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height:100%;
|
|
}
|
|
|
|
.navbar-item {
|
|
width: 100%;
|
|
border-bottom:solid 1px var(--navbar-separator-color);
|
|
transition: background-color var(--navbar-transition-speed);
|
|
}
|
|
|
|
.navbar-item:hover {
|
|
background-color:var(--navbar-item-hovered-color);
|
|
}
|
|
|
|
.navbar-item:last-child {
|
|
margin-top:auto;
|
|
}
|
|
|
|
.navbar-link {
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
height:5rem;
|
|
width:100%;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navbar-icon {
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
min-width: 2rem;
|
|
margin: 0 1.5rem;
|
|
color:var(--navbar-icon-color);
|
|
transition:var(--navbar-transition-speed);
|
|
}
|
|
|
|
.navbar-item:hover .navbar-icon {
|
|
color:var(--primary-color);
|
|
}
|
|
|
|
.navbar-title {
|
|
color:var(--navbar-text-color);
|
|
}
|
|
|
|
.navbar:not(:hover) .navbar-title {
|
|
display:none;
|
|
}
|
|
|
|
.logo {
|
|
background:var(--navbar-logo-background-color);
|
|
}
|
|
|
|
.logo .navbar-title {
|
|
font-size:1.5rem;
|
|
font-weight:bold;
|
|
margin-left:1.5rem;
|
|
}
|
|
|
|
.navbar:hover .logo .navbar-icon {
|
|
transform:rotate(180deg);
|
|
}
|
|
|
|
/*
|
|
** RESPONSIVE
|
|
*/
|
|
|
|
@media only screen and (max-width:1024px) {
|
|
.navbar {
|
|
top:auto;
|
|
width:100%;
|
|
bottom:0px;
|
|
}
|
|
|
|
.navbar:hover {
|
|
width:100%;
|
|
}
|
|
|
|
.navbar-menu {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.logo {
|
|
display:none;
|
|
}
|
|
|
|
main {
|
|
margin-left:0;
|
|
margin-bottom:5rem;
|
|
}
|
|
|
|
.navbar:hover .navbar-title {
|
|
display:none;
|
|
}
|
|
|
|
.navbar-icon {
|
|
min-width:auto;
|
|
margin:0;
|
|
}
|
|
|
|
.navbar-link {
|
|
justify-content: center;
|
|
}
|
|
} |