mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-31 21:42:44 +00:00
111 lines
2.9 KiB
Plaintext
111 lines
2.9 KiB
Plaintext
@keyframes glideDropDown {
|
|
0% {transform : translate(0px, -100%);
|
|
opacity : 0;
|
|
background-color: #333;}
|
|
100% {transform : translate(0px, 0px);
|
|
opacity : 1;
|
|
background-color: #333;}
|
|
}
|
|
nav{
|
|
background-color : #333;
|
|
.navContent{
|
|
position : relative;
|
|
display : flex;
|
|
justify-content : space-between;
|
|
}
|
|
.navSection{
|
|
display : flex;
|
|
align-items : center;
|
|
}
|
|
.navLogo{
|
|
display : block;
|
|
margin-top : 0px;
|
|
margin-right : 8px;
|
|
margin-left : 8px;
|
|
color : white;
|
|
text-decoration : none;
|
|
&:hover{
|
|
.name{ color : @orange; }
|
|
svg{ fill : @orange }
|
|
}
|
|
svg{
|
|
height : 13px;
|
|
margin-right : 0.2em;
|
|
cursor : pointer;
|
|
fill : white;
|
|
}
|
|
span.name{
|
|
font-family : 'CodeLight';
|
|
font-size : 15px;
|
|
span.crit{
|
|
font-family : 'CodeBold';
|
|
}
|
|
small{
|
|
font-family : 'Open Sans';
|
|
font-size : 0.3em;
|
|
font-weight : 800;
|
|
text-transform : uppercase;
|
|
}
|
|
}
|
|
}
|
|
.navItem{
|
|
.animate(background-color);
|
|
padding : 8px 12px;
|
|
cursor : pointer;
|
|
background-color : #333;
|
|
font-size : 10px;
|
|
font-weight : 800;
|
|
color : white;
|
|
text-decoration : none;
|
|
text-transform : uppercase;
|
|
i{
|
|
margin-left : 5px;
|
|
font-size : 13px;
|
|
}
|
|
&.tealLight:hover{ background-color : @tealLight };
|
|
&.teal:hover{ background-color : @teal };
|
|
&.greenLight:hover{ background-color : @greenLight };
|
|
&.green:hover{ background-color : @green };
|
|
&.blueLight:hover{ background-color : @blueLight };
|
|
&.blue:hover{ background-color : @blue };
|
|
&.purpleLight:hover{ background-color : @purpleLight };
|
|
&.purple:hover{ background-color : @purple };
|
|
&.steelLight:hover{ background-color : @steelLight };
|
|
&.steel:hover{ background-color : @steel };
|
|
&.yellowLight:hover{ background-color : @yellowLight };
|
|
&.yellow:hover{ background-color : @yellow };
|
|
&.orangeLight:hover{ background-color : @orangeLight };
|
|
&.orange:hover{ background-color : @orange };
|
|
&.redLight:hover{ background-color : @redLight };
|
|
&.red:hover{ background-color : @red };
|
|
&.silverLight:hover{ background-color : @silverLight };
|
|
&.silver:hover{ background-color : @silver };
|
|
&.greyLight:hover{ background-color : @greyLight };
|
|
&.grey:hover{ background-color : @grey };
|
|
}
|
|
.navSection:last-child .navItem{
|
|
border-left : 1px solid #666;
|
|
}
|
|
.navDropdownContainer{
|
|
position: relative;
|
|
.navDropdown {
|
|
position : absolute;
|
|
top : 28px;
|
|
left : 0px;
|
|
z-index : 10000;
|
|
width : 100%;
|
|
.navItem{
|
|
animation-name: glideDropDown;
|
|
animation-duration: 0.4s;
|
|
position : relative;
|
|
display : block;
|
|
width : 100%;
|
|
vertical-align : middle;
|
|
padding : 8px 5px;
|
|
border : 1px solid #888;
|
|
border-bottom : 0;
|
|
}
|
|
}
|
|
}
|
|
}
|