126 lines
2.6 KiB
Sass
126 lines
2.6 KiB
Sass
.navbar
|
|
background: $primaryAlt;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: 55px;
|
|
|
|
.navbar-brand
|
|
margin-left: 0.75em;
|
|
margin-right: auto;
|
|
|
|
h3
|
|
margin-bottom: 0;
|
|
|
|
.navbar-burger
|
|
display: none;
|
|
width: 32px;
|
|
margin-right: 10px;
|
|
|
|
&.active div
|
|
&:nth-child(1)
|
|
transform-origin: center;
|
|
transform: translateY(8px) rotate(45deg);
|
|
&:nth-child(2)
|
|
opacity: 0;
|
|
&:nth-child(3)
|
|
transform-origin: left -6px;
|
|
transform: translateY(8px) rotate(-45deg);
|
|
|
|
div
|
|
transition: all ease-in-out 150ms;
|
|
width: 100%;
|
|
height: 2px;
|
|
margin: 5px 0;
|
|
border-radius: 1px;
|
|
background: $text;
|
|
|
|
|
|
.navbar-items
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
|
|
.active .item, .item:hover
|
|
background: $primary;
|
|
|
|
.item
|
|
margin: 0;
|
|
cursor: pointer;
|
|
padding: 15px 20px;
|
|
|
|
// .dropdown
|
|
// position: relative;
|
|
|
|
// &:hover
|
|
// .dropdown-items
|
|
// height: auto;
|
|
|
|
// .dropdown-root:after
|
|
// content: ' \25BE';
|
|
|
|
// .dropdown-items
|
|
// height: 0;
|
|
// width: 125px;
|
|
// overflow: hidden;
|
|
// top: 100%;
|
|
// left: 0px;
|
|
// z-index: 6;
|
|
// position: absolute;
|
|
// background: $primaryAlt;
|
|
|
|
// .item
|
|
// padding: 0;
|
|
// margin: 0 !important;
|
|
// padding: 8px 10px;
|
|
// &.active, &:hover,
|
|
// background: none;
|
|
// color: $linkAct;
|
|
|
|
|
|
@media screen and (max-width: 840px)
|
|
.navbar
|
|
.navbar-burger
|
|
display: inline-block;
|
|
|
|
.navbar-items
|
|
display: block;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 55px;
|
|
left: 0;
|
|
z-index: 5;
|
|
background: $primaryAlt;
|
|
width: 100%;
|
|
transform: scaleY(0);
|
|
transform-origin: top;
|
|
transition: all ease-in-out 125ms;
|
|
|
|
&.active
|
|
transform: scaleY(1);
|
|
overflow: auto;
|
|
|
|
.item
|
|
text-align: center;
|
|
width: 100%;
|
|
padding: 5px 0;
|
|
|
|
// .dropdown
|
|
// padding: 0 !important;
|
|
|
|
// .dropdown-root
|
|
// display: none;
|
|
|
|
// .dropdown-items
|
|
// position: relative !important;
|
|
// overflow: hidden;
|
|
// padding: 0 !important;
|
|
// height: auto !important;
|
|
// width: 100% !important;
|
|
|
|
// .item
|
|
// width: 100% !important;
|
|
// padding: 5px 0 !important;
|
|
// text-align: center !important;
|
|
|
|
// &:last-child
|
|
// padding: 5px 0 0 !important; |