From f45c2908ed933a4a5b059256ee0a08465e2a6c2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Thu, 5 Nov 2020 08:51:18 +0100
Subject: [PATCH] scss: build an extra css file for backoffice usage (#47838)

---
 Makefile                             |  2 +-
 static/includes/_misc.scss           | 64 ----------------------------
 static/includes/_wcs.scss            |  1 +
 static/includes/gadjo-extra.scss     |  5 +++
 static/includes/wcs/_evaluation.scss | 63 +++++++++++++++++++++++++++
 templates/gadjo/base.html            |  3 +-
 6 files changed, 72 insertions(+), 66 deletions(-)
 create mode 100644 static/includes/gadjo-extra.scss
 create mode 100644 static/includes/wcs/_evaluation.scss

diff --git a/Makefile b/Makefile
index 4d9feb29..f8b7b415 100644
--- a/Makefile
+++ b/Makefile
@@ -29,7 +29,7 @@ themes.json: $(wildcard static/*/config.json) help/fr/misc-scss.page
 %.css: %.scss $(wildcard static/includes/*.scss  static/includes/*/*.scss) static/includes/_data_uris.scss static/lille/_data_uris.scss static/lomme/_data_uris.scss static/hellemmes/_data_uris.scss static/toodego/_data_uris.scss $$(wildcard $$(@D)/*.scss)
 	sassc --sourcemap $< $@
 
-css: $(shell python3 get_themes.py) static/portal-agent/css/agent-portal.css
+css: $(shell python3 get_themes.py) static/portal-agent/css/agent-portal.css static/includes/gadjo-extra.css
 	rm -rf static/*/.sass-cache/
 
 icons:
diff --git a/static/includes/_misc.scss b/static/includes/_misc.scss
index 96513c62..f8d5f93c 100644
--- a/static/includes/_misc.scss
+++ b/static/includes/_misc.scss
@@ -731,70 +731,6 @@ div.leaflet-control-gps {
 	}
 }
 
-// evaluation field
-.template-evaluation label.star-choice,
-div.star-choice {
-	span.star {
-		&::before {
-			position: static;
-			height: auto;
-			width: auto;
-			border: none;
-			font-family: FontAwesome;
-			content: "\f006";  // star-o
-			color: #776;
-			font-size: 22px;
-			display: inline-block;
-			transition: transform ease 0.2s;
-		}
-		&.selected::before, &:hover::before {
-			content: "\f005"; // star
-			color: #ffaa00;
-		}
-	}
-	input[type=radio]:hover + span.star::before,
-	input[type=radio]:focus + span.star::before,
-	span.star:hover::before {
-		transform: scale(1.4);
-		opacity: 0.8;
-	}
-}
-
-.RadiobuttonsWidget.template-evaluation {
-	br {
-		display: none;
-	}
-	input {
-		@extend .sr-only;
-	}
-	input:focus + span.star {
-		@if $widget-focus-outline == none {
-			outline: $widget-border;
-			@if extract-color($widget-border) == transparent {
-				outline-color: #444;
-			}
-			outline-style: dotted;
-		} @else {
-			outline: $widget-focus-outline;
-			outline-offset: $widget-focus-outline-offset;
-		}
-
-	}
-	input + span::after {
-		// cancel custom radio rendering
-		display: none;
-	}
-	label {
-		margin-right: 0;
-	}
-	input + span {
-		padding-left: 0;
-	}
-	.star-label {
-		@extend .sr-only;
-	}
-}
-
 #fc-linking {
 	padding: 0 1rem;
 	&.no-account {
diff --git a/static/includes/_wcs.scss b/static/includes/_wcs.scss
index c1165401..3d294d64 100644
--- a/static/includes/_wcs.scss
+++ b/static/includes/_wcs.scss
@@ -1,4 +1,5 @@
 @import 'grid';
 @import 'wcs/bulk';
+@import 'wcs/evaluation';
 @import 'wcs/steps';
 @import 'wcs/nearby-form';
diff --git a/static/includes/gadjo-extra.scss b/static/includes/gadjo-extra.scss
new file mode 100644
index 00000000..8a732b1e
--- /dev/null
+++ b/static/includes/gadjo-extra.scss
@@ -0,0 +1,5 @@
+$widget-focus-outline: none;
+$widget-border: 1px solid #AAA;
+
+@import 'utils';
+@import 'wcs/evaluation';
diff --git a/static/includes/wcs/_evaluation.scss b/static/includes/wcs/_evaluation.scss
new file mode 100644
index 00000000..00dcf7dd
--- /dev/null
+++ b/static/includes/wcs/_evaluation.scss
@@ -0,0 +1,63 @@
+// style for ../../templates/qommon/forms/widgets/*evaluation.html
+.template-evaluation label.star-choice,
+div.star-choice {
+	span.star {
+		&::before {
+			position: static;
+			height: auto;
+			width: auto;
+			border: none;
+			font-family: FontAwesome;
+			content: "\f006";  // star-o
+			color: #776;
+			font-size: 22px;
+			display: inline-block;
+			transition: transform ease 0.2s;
+		}
+		&.selected::before, &:hover::before {
+			content: "\f005"; // star
+			color: #ffaa00;
+		}
+	}
+	input[type=radio]:hover + span.star::before,
+	input[type=radio]:focus + span.star::before,
+	span.star:hover::before {
+		transform: scale(1.4);
+		opacity: 0.8;
+	}
+}
+
+.RadiobuttonsWidget.template-evaluation {
+	br {
+		display: none;
+	}
+	input {
+		@extend .sr-only;
+	}
+	input:focus + span.star {
+		@if $widget-focus-outline == none {
+			outline: $widget-border;
+			@if extract-color($widget-border) == transparent {
+				outline-color: #444;
+			}
+			outline-style: dotted;
+		} @else {
+			outline: $widget-focus-outline;
+			outline-offset: $widget-focus-outline-offset;
+		}
+
+	}
+	input + span::after {
+		// cancel custom radio rendering
+		display: none;
+	}
+	label {
+		margin-right: 0;
+	}
+	input + span {
+		padding-left: 0;
+	}
+	.star-label {
+		@extend .sr-only;
+	}
+}
diff --git a/templates/gadjo/base.html b/templates/gadjo/base.html
index 926b34bd..d0b2a066 100644
--- a/templates/gadjo/base.html
+++ b/templates/gadjo/base.html
@@ -1,5 +1,5 @@
 {% extends "gadjo/root.html" %}
-{% load gadjo %}
+{% load gadjo static %}
 
 {% block site-header %}
   <h1 class="breadcrumbs">{% block breadcrumb %}{% endblock %}</h1>
@@ -11,6 +11,7 @@
 {% endblock %}
 
 {% block extrascripts %}
+<link rel="stylesheet" type="text/css" href="{{site_base}}{% static "" %}includes/gadjo-extra.css">
 {% if manager_homepage_url %}
 <script src="{{manager_homepage_url}}__services.js"></script>
 <script src="{{manager_homepage_url}}static/portal-agent/js/publik.js?{% start_timestamp %}"></script>
-- 
2.29.2

