From 8f95bc9da3a73523828794fb01484a3dddbd4cd9 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 21 Feb 2020 12:57:46 +0100
Subject: [PATCH] Refactored CSS

---
 .../install/files/style/ui/reactions.scss     | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/reactions.scss b/wcfsetup/install/files/style/ui/reactions.scss
index 398d9acd76..40f8cd4217 100644
--- a/wcfsetup/install/files/style/ui/reactions.scss
+++ b/wcfsetup/install/files/style/ui/reactions.scss
@@ -77,64 +77,65 @@
 		}
 	}
 	
-	> ul > li.reactionTypeButton > img {
+	.reactionTypeButton > img {
 		width: 24px;
 		height: 24px;
-	}
-	
-	> ul > li.reactionTypeButton > img:hover {
-		transform: scale(1.2);
+		
+		&:hover {
+			transform: scale(1.2);
+		}
 	}
 	
 	@include screen-md-down {
 		padding: 5px 0;
 		
-		> ul > li.reactionTypeButton {
+		.reactionTypeButton {
 			margin: 0;
 			display: block;
 			padding: 5px 25px;
-		}
-		
-		> ul > li.reactionTypeButton > .reactionTypeButtonTitle {
-			vertical-align: middle;
-			padding-left: 5px;
-		}
-		
-		> ul > li.reactionTypeButton.active {
-			background-color: $wcfContentBorderInner; // @TODO maybe find a better color value
+			
+			&.active {
+				background-color: $wcfContentBorderInner;
+			}
+			
+			> .reactionTypeButtonTitle {
+				vertical-align: middle;
+				padding-left: 5px;
+			}
 		}
 	}
 	
 	@include screen-lg {
 		padding: 5px 15px;
 		
-		> ul > li.reactionTypeButton > .reactionTypeButtonTitle {
-			display: none;
-		}
-		
-		> ul > li.reactionTypeButton {
+		.reactionTypeButton {
 			display: inline-block;
 			padding-top: 10px;
 			padding-bottom: 10px;
 			cursor: pointer;
 			margin-left: 10px;
-		}
-		
-		> ul > li.reactionTypeButton.active {
-			padding-left: 5px;
-			padding-right: 5px;
-		}
-		
-		> ul > li.reactionTypeButton.active > img {
-			transform: scale(1.4);
-		}
-		
-		> ul > li.reactionTypeButton.active > img:hover {
-			transform: scale(1.2);
-		}
-		
-		> ul > li.reactionTypeButton:first-child {
-			margin-left: 0;
+			
+			&:first-child {
+				margin-left: 0;
+			}
+			
+			&.active {
+				padding-left: 5px;
+				padding-right: 5px;
+				
+				> img {
+					transform: scale(1.4);
+					
+					&:hover {
+						transform: scale(1.2);
+					}
+				}
+				
+			}
+			
+			> .reactionTypeButtonTitle {
+				display: none;
+			}
 		}
 	}
 }
-- 
2.20.1