From 4f0a783671ed28e21e67dcbcd4209bc3a9b311b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Wed, 24 Jun 2020 18:56:15 +0200
Subject: [PATCH] scss: introduce pk-information/attention/error classes
 (#33135)

---
 help/fr/misc-css-classes.page | 24 ++++++++++++++
 static/includes/_cells.scss   |  2 +-
 static/includes/_library.scss | 12 +++++++
 static/includes/_misc.scss    | 60 +++++++++++++++++++++++++----------
 4 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/help/fr/misc-css-classes.page b/help/fr/misc-css-classes.page
index 6718f26a..b1f01f1b 100644
--- a/help/fr/misc-css-classes.page
+++ b/help/fr/misc-css-classes.page
@@ -61,6 +61,18 @@ de classes CSS réutilisables.
    « titre et liens », pour cela le texte doit contenir un titre
    (&lt;h2&gt;) suivi d'une liste de liens (&lt;ul&gt;).</p></td>
  </tr>
+ <tr>
+  <td><p><code>pk-information</code></p></td>
+  <td><p>Donne à la cellule le style de bloc d’information.</p></td>
+ </tr>
+ <tr>
+  <td><p><code>pk-attention</code></p></td>
+  <td><p>Donne à la cellule le style de bloc d’attention.</p></td>
+ </tr>
+ <tr>
+  <td><p><code>pk-error</code></p></td>
+  <td><p>Donne à la cellule le style de bloc d’erreur.</p></td>
+ </tr>
 </table>
 
 </section>
@@ -83,6 +95,18 @@ de classes CSS réutilisables.
   <td><p>Marque le champ comme étant particulièrement important, le rendu sera
   généralement un libellé mis en gras.</p></td>
  </tr>
+ <tr>
+  <td><p><code>pk-information</code></p></td>
+  <td><p>Marque le champ commentaire avec le style de bloc d’information.</p></td>
+ </tr>
+ <tr>
+  <td><p><code>pk-attention</code></p></td>
+  <td><p>Marque le champ commentaire avec le style de bloc d’attention.</p></td>
+ </tr>
+ <tr>
+  <td><p><code>pk-error</code></p></td>
+  <td><p>Marque le champ commentaire avec le style de bloc d’erreur.</p></td>
+ </tr>
 </table>
 </section>
 
diff --git a/static/includes/_cells.scss b/static/includes/_cells.scss
index 1d57e473..84499c24 100644
--- a/static/includes/_cells.scss
+++ b/static/includes/_cells.scss
@@ -84,7 +84,7 @@ div#sidebar + div#columns {
 div.a2-continue,
 div#services > ul > li,
 div.a2-block,
-.gru-content div.cell,
+.gru-content .cell,
 .block {
 	text-align: left;
 	background: $cell-background;
diff --git a/static/includes/_library.scss b/static/includes/_library.scss
index d6344ce0..9a47f5f7 100644
--- a/static/includes/_library.scss
+++ b/static/includes/_library.scss
@@ -115,3 +115,15 @@ table.pk-data-table {
 		width: 30%;
 	}
 }
+
+.pk-information {
+	@include notification-message($notification_info_color, "\f05a");
+}
+
+.pk-attention {
+	@include notification-message($notification_warning_color, "\f071");
+}
+
+.pk-error {
+	@include notification-message($notification_error_color, "\f06a");
+}
diff --git a/static/includes/_misc.scss b/static/includes/_misc.scss
index 33717cc0..7fbbd599 100644
--- a/static/includes/_misc.scss
+++ b/static/includes/_misc.scss
@@ -10,6 +10,11 @@ $notification_info_color: adjust-hue($notification_base_color, 220deg) !default;
 //  border-icon: colored icon on left boder
 $notification-style: classic !default;
 
+$notification-left-padding: 4rem;
+@if $notification-style == border-icon {
+	$notification-left-padding: 2rem;
+}
+
 div.textcell {
 	h3, h4, h5, p, table {
 		margin: 0.7em 0.5rem;
@@ -295,20 +300,18 @@ div#page-change-overlay.on {
 	}
 }
 
-@mixin notification-message($color, $symbol) {
-	box-sizing: content-box;
+@mixin notification-message-base($color, $symbol) {
 	background: $color;
 	color: text-color($color);
 	margin: 1rem 0;
 	padding: 0.5rem;
-	padding-left: 4rem;
+	padding-left: $notification-left-padding !important;
 	position: relative;
 	@if $notification-style == border-icon {
 		border-left: 4px solid darken($color, 40%);
-		padding-left: 2rem;
 	}
 
-	min-height: 2rem;
+	min-height: 3rem;
 	&::before {
 		content: $symbol;
 		font-family: FontAwesome;
@@ -339,21 +342,46 @@ div#page-change-overlay.on {
 	}
 }
 
-#messages li.error, .errornotice {
-	@include notification-message($notification_error_color, "\f06a");
+@mixin notification-message($color, $symbol) {
+	@include notification-message-base($color, $symbol);
+	&[class*=grid-].comment-field {
+		// adapt when used as comment field in grid system.
+		@if $grid-gutter != 0px {
+			box-sizing: border-box;
+		}
+		margin-right: 1rem;
+	}
+	&:not([class*=grid-]).comment-field {
+		// clear everything if not in a grid.
+		clear: both;
+	}
+
+	&.cell {
+		// increased selector weight is required for cells.
+		background: $color !important;
+		padding-bottom: 0.5em !important;
+		h2:first-child {
+			background: transparent !important;
+			font-weight: bold !important;
+			margin: 0.7em 0.5rem !important;
+			padding: 0 !important;
+			color: darken($color, 40%) !important;
+			border-color: darken($color, 40%) !important;
+		}
+	}
 }
 
-#messages li.warning, .warningnotice {
-	@include notification-message($notification_warning_color, "\f071");
-}
+#messages li.error { @include notification-message-base($notification_error_color, "\f06a") }
+.errornotice { @include notification-message($notification_error_color, "\f06a"); }
 
-#messages li.success, .successnotice {
-	@include notification-message($notification_success_color, "\f058"); // check-circle
-}
+#messages li.warning { @include notification-message-base($notification_warning_color, "\f071"); }
+.warningnotice { @include notification-message($notification_warning_color, "\f071"); }
 
-#messages li.info, .infonotice {
-	@include notification-message($notification_info_color, "\f05a");
-}
+#messages li.success { @include notification-message-base($notification_success_color, "\f058"); } // check-circle
+.successnotice { @include notification-message($notification_success_color, "\f058"); }
+
+#messages li.info { @include notification-message-base($notification_info_color, "\f05a"); }
+.infonotice { @include notification-message($notification_info_color, "\f05a"); }
 
 #messages li {
 	&.error, &.warning, &.success, &.info {
-- 
2.28.0

