dordogne-cd24: add "demarche" custom cell (#61687)

static/dordogne-cd24/_custom.scss

@@ -300,6 +300,26 @@ div#tracking-code {
 }
 
 .gru-content {
+	div.cell {
+		&.demarche, &.rubriques-internes {
+			background: #d1e8f6;
+			h2:first-child, ul {
+				margin-left: 2rem;
+				margin-right: 2rem;
+			}
+			h2:first-child {
+				text-align: center;
+				border: 0;
+				padding-left: 0;
+				padding-right: 0;
+				text-transform: uppercase;
+				background: transparent;
+			}
+		}
+		&.demarche h2:first-child {
+			border-bottom: 2px solid black;
+		}
+	}
 	div.cell, .block {
 		margin-bottom: 2em;
 	}
@@ -340,25 +360,14 @@ div#tracking-code {
 			color: $purple;
 		}
 		&.rubriques-internes {
-			background: #d1e8f6;
-			h2:first-child {
-				text-align: center;
-				border: 0;
-				padding-left: 0;
-				padding-right: 0;
-				+ div.links-list {
-					li {
-						border: 0;
-					}
+			h2:first-child + div.links-list {
+				li {
+					border: 0;
 				}
 			}
 			&.has-asset-picture h2:first-child {
 				padding-left: 1rem;
 			}
-			h2:first-child, ul {
-				margin-left: 2rem;
-				margin-right: 2rem;
-			}
 			ul {
 				padding: 0.5rem 0;
 				border-top: 1px solid $title-color;
@@ -742,3 +751,39 @@ div.linkcell .internal-page-link {
 		}
 	}
 }
+
+.demarche-link {
+	padding-bottom: 1.5rem;
+	&--description {
+		margin: 1.5rem;
+	}
+	&--arrow {
+		background: $nav-background;
+		color: white;
+		font-weight: bold;
+		text-transform: uppercase;
+		padding: 0.75rem 1rem 0.75rem 2.75rem;
+		border-radius: 5px;
+		box-shadow: 0px 1px 3px #aaa;
+		display: flex;
+		@media ($max-mobile-viewport) {
+			padding: 0.75rem 1rem;
+		}
+		&::after {
+			content: '\f054'; /* fa-chevron-right */
+			font-family: FontAwesome;
+			background: $green;
+			color: black;
+			margin-left: 1rem;
+			height: 1.25em;
+			padding: 2px 5px;
+		}
+		&:hover::after {
+			background: white;
+		}
+	}
+	&--arrow-container {
+		display: flex;
+		justify-content: center;
+	}
+}

static/dordogne-cd24/_vars.scss

@@ -1,5 +1,6 @@
 $primary-color: #f4f7fa;
 $purple: #88446b;
+$green: #cbd05d;
 $width: 1316px;
 
 $font-family: Montserrat, sans-serif;
@@ -25,7 +26,7 @@ $widget-border: 0;
 
 $widget-custom-radio-checkbox: true;
 $widget-custom-radio-checkbox-color: #888;
-$widget-custom-radio-checkbox-marker-color: #cbd05d;
+$widget-custom-radio-checkbox-marker-color: $green;
 $widget-unique-checkbox-position: left;
 
 $title-background: $primary-color;
@@ -37,7 +38,7 @@ $cell-entry-hover-background: $primary-color;
 
 $button-background: #000;
 $button-color: #fff;
-$button-hover-background: #cbd05d;
+$button-hover-background: $green;
 $button-hover-color: #000;
 $buttons-alignment: flex-end;
 
@@ -46,7 +47,7 @@ $notification_info_color: $primary-color;
 $buttons-order: previous (grow), cancel, submit;
 
 $footer-color: #000;
-$footer-background: #cbd05d;
+$footer-background: $green;
 
 $wcs-step-current-label-color: #000;
 $wcs-step-marker-color: #88446b;

templates/variants/dordogne-cd24/combo/cells/demarche/link-cell.html

@@ -0,0 +1,13 @@
+{% if cell.link_page %}
+ <div class="demarche-link">
+   <h2>{{ cell.link_page.title }}</h2>
+   <p class="demarche-link--description">{{ cell.link_page.description }}</p>
+   <div class="demarche-link--arrow-container">
+     <a href="{{ url }}" class="demarche-link--arrow">{{ title }}</a>
+   </div>
+ </div>
+{% else %}
+<div class="links-list">
+  <ul><li><a href="{{url}}">{{title}}</a></li></ul>
+</div>
+{% endif %}