Merge pull request #3028 from nextcloud/tooltip-scss-optimisation

Tooltip scss optimisation

core/css/tooltip.scss

@@ -30,96 +30,95 @@
 		opacity: 0.9;
 		filter: alpha(opacity = 90);
 	}
+
 	&.top {
 		margin-top: -3px;
 		padding: 5px 0;
 	}
-	&.right {
-		margin-left: 3px;
-		padding: 0 5px;
-	}
 	&.bottom {
 		margin-top: 3px;
 		padding: 5px 0;
 	}
+
+	&.right {
+		margin-left: 3px;
+		padding: 0 5px;
+		.tooltip-arrow {
+			top: 50%;
+			left: 0;
+			margin-top: -5px;
+			border-width: 5px 5px 5px 0;
+			border-right-color: #000000;
+		}
+	}
 	&.left {
 		margin-left: -3px;
 		padding: 0 5px;
+		.tooltip-arrow {
+			top: 50%;
+			right: 0;
+			margin-top: -5px;
+			border-width: 5px 0 5px 5px;
+			border-left-color: #000000;
+		}
 	}
-}
-
-.tooltip-inner {
-	max-width: 350px;
-	padding: 3px 8px;
-	color: #ffffff;
-	text-align: center;
-	background-color: #000000;
-	border-radius: 4px;
-}
-
-.tooltip-arrow {
-	position: absolute;
-	width: 0;
-	height: 0;
-	border-color: transparent;
-	border-style: solid;
-}
 
-.tooltip {
-	&.top .tooltip-arrow {
+	/* TOP */
+	&.top .tooltip-arrow,
+	&.top-left .tooltip-arrow,
+	&.top-right .tooltip-arrow  {
 		bottom: 0;
-		left: 50%;
-		margin-left: -5px;
 		border-width: 5px 5px 0;
 		border-top-color: #000000;
 	}
+	&.top .tooltip-arrow {
+		left: 50%;
+		margin-left: -5px;
+	}
 	&.top-left .tooltip-arrow {
-		bottom: 0;
 		right: 5px;
 		margin-bottom: -5px;
-		border-width: 5px 5px 0;
-		border-top-color: #000000;
 	}
 	&.top-right .tooltip-arrow {
-		bottom: 0;
 		left: 5px;
 		margin-bottom: -5px;
-		border-width: 5px 5px 0;
-		border-top-color: #000000;
-	}
-	&.right .tooltip-arrow {
-		top: 50%;
-		left: 0;
-		margin-top: -5px;
-		border-width: 5px 5px 5px 0;
-		border-right-color: #000000;
 	}
-	&.left .tooltip-arrow {
-		top: 50%;
-		right: 0;
-		margin-top: -5px;
-		border-width: 5px 0 5px 5px;
-		border-left-color: #000000;
+
+	/* BOTTOM */
+	&.bottom .tooltip-arrow,
+	&.bottom-left .tooltip-arrow,
+	&.bottom-right .tooltip-arrow  {
+		top: 0;
+		border-width: 0 5px 5px;
+		border-bottom-color: #000000;
 	}
 	&.bottom .tooltip-arrow {
-		top: 0;
 		left: 50%;
 		margin-left: -5px;
-		border-width: 0 5px 5px;
-		border-bottom-color: #000000;
 	}
 	&.bottom-left .tooltip-arrow {
-		top: 0;
 		right: 5px;
 		margin-top: -5px;
-		border-width: 0 5px 5px;
-		border-bottom-color: #000000;
 	}
 	&.bottom-right .tooltip-arrow {
-		top: 0;
 		left: 5px;
 		margin-top: -5px;
-		border-width: 0 5px 5px;
-		border-bottom-color: #000000;
 	}
 }
+
+.tooltip-inner {
+	max-width: 350px;
+	padding: 3px 8px;
+	color: #ffffff;
+	text-align: center;
+	background-color: #000000;
+	border-radius: 4px;
+}
+
+.tooltip-arrow {
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-color: transparent;
+	border-style: solid;
+}