From 9b04519e3364fe6f0634372895aa9fdad84ed9ab Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Wed, 15 Jul 2020 10:49:36 +0200
Subject: [PATCH] nav menu: add support for buttons i.e. forms

---
 assets/sass/layout.scss | 106 ++++++++++++++++++++++++++--------------
 1 file changed, 70 insertions(+), 36 deletions(-)

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 540c517..ce1e32f 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -63,19 +63,21 @@ header {
 			li {
 				list-style: none;
 
-				a, span {
+				a, button {
 					position: relative;
+					height: 64px;
+					margin: 0;
+					padding: 0 24px;
+
 					display: flex;
 					flex-direction: row;
 					align-items: center;
-					height: 64px;
-					padding: 0 24px;
 
-					.feather {
-						--icon-size: 24px;
-					}
+					&:hover, &:active {
+						&:not(button) {
+							background-color: rgba(255, 255, 255, 0.07);
+						}
 
-					&:hover {
 						.tip {
 							visibility: visible;
 							opacity: 1;
@@ -83,10 +85,32 @@ header {
 							transition-delay: 150ms;
 						}
 					}
+
+					.feather {
+						--icon-size: 24px;
+					}
 				}
 
-				a:hover, a:active {
-					background-color: rgba(255, 255, 255, 0.07);
+				button {
+					margin: 8px;
+					padding: 24px;
+					height: 32px;
+
+					.feather {
+						margin-right: 0;
+					}
+
+					.tip {
+						text-transform: initial;
+						font-weight: initial;
+					}
+				}
+
+				form {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					padding: 0;
 				}
 			}
 		}
@@ -139,10 +163,14 @@ header {
 					transform: translateX(0%);
 				}
 
-				li a {
-					.tip {
-						display: block;
-						margin-left: 8px;
+				li {
+					a, button {
+						.tip {
+							display: block;
+							margin-left: 8px;
+							text-transform: inherit;
+							font-weight: inherit;
+						}
 					}
 				}
 			}
@@ -151,32 +179,38 @@ header {
 
 	@media (min-width: $menuLayoutSwitchTreshold) {
 		nav ul li {
-			a .tip {
-				visibility: hidden;
-				position: absolute;
-				display: block;
-				width: max-content;
-				height: 30px;
-				padding: 4px 8px;
-				line-height: 22px;
-				top: calc(100% + 8px);
-				left: 50%;
-				transform: translateX(-50%);
+			a, button {
+				.tip {
+					visibility: hidden;
+					position: absolute;
+					display: block;
+					width: max-content;
+					height: 30px;
+					padding: 4px 8px;
+					line-height: 22px;
+					top: calc(100% + 8px);
+					left: 50%;
+					transform: translateX(-50%);
 
-				text-align: center;
-				font-size: 18px;
-				color: $defaultTextColor;
-				opacity: 0;
-				transition: opacity ease-out 100ms, visibility step-end 150ms;
-				transition-delay: 0ms;
-				background-color: #000;
-				border-radius: 5px;
+					text-align: center;
+					font-size: 18px;
+					color: $defaultTextColor;
+					opacity: 0;
+					transition: opacity ease-out 100ms, visibility step-end 150ms;
+					transition-delay: 0ms;
+					background-color: #000;
+					border-radius: 5px;
+				}
 			}
 
-			&:last-child a .tip {
-				left: unset;
-				right: 4px;
-				transform: none;
+			&:last-child {
+				a, button {
+					.tip {
+						left: unset;
+						right: 4px;
+						transform: none;
+					}
+				}
 			}
 		}
 	}