From e21f530cba8dac85be138eed0a76dea37c283ee1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sat, 29 Feb 2020 13:20:27 +0100
Subject: [PATCH 1/7] scss: use mixin to style notification messages (#25297)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This also allows replacing compound selector by a simple %extend, as
required for sassc ≥ 3.6.1.
---
 static/hautes-alpes-2018/_custom.scss |  2 +-
 static/includes/_misc.scss            | 61 ++++++++-------------------
 static/strasbourg-2018/_custom.scss   |  2 +-
 3 files changed, 19 insertions(+), 46 deletions(-)

diff --git a/static/hautes-alpes-2018/_custom.scss b/static/hautes-alpes-2018/_custom.scss
index b5ee35a8..a94092ca 100644
--- a/static/hautes-alpes-2018/_custom.scss
+++ b/static/hautes-alpes-2018/_custom.scss
@@ -17,7 +17,7 @@ div#main-content-wrapper {
 
 	// override .errornotice (includes/misc)
 	%custom-error-notice {
-		@extend div.errornotice;
+		@extend .errornotice;
 		&::before {
 			font-size: 30px;
 		}
diff --git a/static/includes/_misc.scss b/static/includes/_misc.scss
index 3c250a13..0525de2d 100644
--- a/static/includes/_misc.scss
+++ b/static/includes/_misc.scss
@@ -260,32 +260,28 @@ div#page-change-overlay.on {
 	}
 }
 
-#messages li,
-div.infonotice,
-div.successnotice,
-div.warningnotice,
-div.errornotice {
-	background: $notification_error_color;
-	color: text-color($notification_error_color);
+@mixin notification-message($color, $symbol) {
+	background: $color;
+	color: text-color($color);
 	margin: 1rem 0;
 	padding: 0.5rem;
 	padding-left: 4rem;
 	position: relative;
 	@if $notification-style == border-icon {
-		border-left: 4px solid darken($notification_error_color, 40%);
+		border-left: 4px solid darken($color, 40%);
 		padding-left: 2rem;
 	}
 
 	min-height: 2rem;
 	&::before {
-		content: "\f06a";
+		content: $symbol;
 		font-family: FontAwesome;
 		font-size: 2rem;
 		position: absolute;
 		left: 1rem;
 		top: 0.5rem;
 		@if $notification-style == border-icon {
-			color: darken($notification_error_color, 40%);
+			color: darken($color, 40%);
 			left: calc(-0.5rem - 2px);
 			width: 1rem;
 			display: block;
@@ -307,49 +303,26 @@ div.errornotice {
 	}
 }
 
-#messages li.warning,
-div.warningnotice {
-	background: $notification_warning_color;
-	color: text-color($notification_warning_color);
-	border-color: darken($notification_warning_color, 40%);
-	&::before {
-		content: "\f071";
-		@if $notification-style == border-icon {
-			color: darken($notification_warning_color, 40%);
-		}
-	}
+#messages li.error, .errornotice {
+	@include notification-message($notification_error_color, "\f06a");
 }
 
-#messages li.success,
-div.successnotice {
-	background: $notification_success_color;
-	color: text-color($notification_success_color);
-	border-color: darken($notification_success_color, 40%);
-	&::before {
-		content: "\f058";  // check-circle
-		@if $notification-style == border-icon {
-			color: darken($notification_success_color, 40%);
-		}
-	}
+#messages li.warning, .warningnotice {
+	@include notification-message($notification_warning_color, "\f071");
 }
 
-#messages li.info,
-div.infonotice {
-	background: $notification_info_color;
-	color: text-color($notification_info_color);
-	border-color: darken($notification_info_color, 40%);
-	&::before {
-		content: "\f05a";
-		@if $notification-style == border-icon {
-			color: darken($notification_info_color, 40%);
-		}
-	}
+#messages li.success, .successnotice {
+	@include notification-message($notification_success_color, "\f058"); // check-circle
+}
+
+#messages li.info, .infonotice {
+	@include notification-message($notification_info_color, "\f05a");
 }
 
 form ul.errorlist.nonfield {
 	margin-top: 0;
 	li {
-		@extend div.errornotice;
+		@extend .errornotice;
 		margin-top: 0;
 	}
 }
diff --git a/static/strasbourg-2018/_custom.scss b/static/strasbourg-2018/_custom.scss
index a90a1c4e..79e6bcc1 100644
--- a/static/strasbourg-2018/_custom.scss
+++ b/static/strasbourg-2018/_custom.scss
@@ -398,7 +398,7 @@ div.dataview div.page::after {
 }
 
 div.widget div.content div.error {
-	@extend div.errornotice;
+	@extend .errornotice;
 	margin-top: 0;
 }
 
-- 
2.25.1

