0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 16:02:38 +00:00

Add color mixins, help dropdown, and remove unused nav items

This commit is contained in:
Charlie Humphreys
2022-01-26 08:40:33 -06:00
parent 603cf2c0ab
commit 38c0527d35
12 changed files with 102 additions and 77 deletions

View File

@@ -1,3 +1,4 @@
@import '../styles/colors';
@keyframes glideDropDown {
0% {transform : translate(0px, -100%);
opacity : 0;
@@ -49,6 +50,7 @@ nav{
}
}
.navItem{
#backgroundColors;
.animate(background-color);
padding : 8px 12px;
cursor : pointer;
@@ -62,26 +64,6 @@ nav{
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;

View File

@@ -20,4 +20,27 @@
@silverLight : #ECF0F1;
@silver : #BDC3C7;
@greyLight : #95A5A6;
@grey : #7F8C8D;
@grey : #7F8C8D;
#backgroundColors {
&.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 };
}