From c4913cdb21d2e04818cc8d9ea72c3863da0e6c0f Mon Sep 17 00:00:00 2001
From: tcharlss <tcharlss@bravecassine.com>
Date: Sun, 30 May 2021 15:46:42 +0200
Subject: [PATCH] Refacto des styles des onglets #4802.

---
 prive/themes/spip/icons.css.html       | 194 +----------------
 prive/themes/spip/onglets.css.html     | 288 +++++++++++++++++++++++++
 prive/themes/spip/style_prive.css.html |   1 +
 3 files changed, 291 insertions(+), 192 deletions(-)
 create mode 100644 prive/themes/spip/onglets.css.html

diff --git a/prive/themes/spip/icons.css.html b/prive/themes/spip/icons.css.html
index 82df0c0dd9..6a00a28633 100644
--- a/prive/themes/spip/icons.css.html
+++ b/prive/themes/spip/icons.css.html
@@ -5,9 +5,7 @@
 	Organisation du fichier :
 
 	1. Icones horizontales et verticales
-	2. Barre onglets
-	3. Onglets simples
-	4. Divers et dépréciés
+	2. Divers et dépréciés
 
 <style>]
 #CACHE{3600*100,cache-client}
@@ -300,196 +298,8 @@
 }
 
 
-/* ================
- * 2. Barre onglets
- * ================
- *
- * Markup :
- *
- * <div class='barre_onglet'><ul class='clearfix'>
- * <li><strong></strong><li><a></a></li>
- * </ul></div>
- */
-.barre_onglet {
-	padding: 7px;
-	clear: both;
-	text-align: center;
-}
-.barre_onglet ul {
-	display: inline-block;
-	margin: 0 auto;
-	text-align: #ENV{left};
-	padding:0;
-	list-style:none;
-}
-.barre_onglet li {
-	float: #ENV{left};
-	border: 1px solid #ENV{foncee};
-	margin:0;
-	padding:0;
-	margin-#ENV{right}: 3px;
-	position:relative;
-	list-style:none;
-	margin-right: 0px;
-	border-left-width: 0px;
-	border-color: #eee;
-}
-.barre_onglet a,
-.barre_onglet strong {
-	display: block;
-	font-weight: bold;
-	padding: 5px 8px;
-	text-decoration: none;
-	background-color: #fff;
-}
-.barre_onglet a {
-	background-color: #eee;
-}
-.barre_onglet a:hover,
-.barre_onglet a:focus {
-	background-color: #ENV{claire};
-	color: #fff;
-	text-decoration: none;
-	background-color: white;
-	background-image: linear-gradient(top, #ffffff, #ffffff);
-	color: #[(#ENV{foncee}|couleur_luminance{0.7})];
-}
-.barre_onglet strong {
-	background-color: #ENV{foncee};
-	color: #fff;
-}
-.barre_onglet strong.on {
-	background-color: #ENV{foncee};
-}
-.barre_onglet li:first-child strong.on {
-	border-bottom-left-radius:5px;
-	border-top-left-radius:5px;
-}
-.barre_onglet li:last-child strong.on {
-	border-bottom-right-radius:5px;
-	border-top-right-radius:5px;
-}
-.barre_onglet ul > li:first-child {
-	position: relative;
-	border-left-width: 1px;
-	border-bottom-left-radius: 5px;
-	border-top-left-radius: 5px;
-}
-.barre_onglet ul > li:first-child a {
-	position: relative;
-	border-bottom-left-radius: 5px;
-	border-top-left-radius: 5px;
-}
-.barre_onglet ul > li:last-child {
-	position: relative;
-	border-bottom-right-radius: 5px;
-	border-top-right-radius: 5px;
-}
-.barre_onglet ul > li:last-child a {
-	position: relative;
-	border-bottom-right-radius: 5px;
-	border-top-right-radius: 5px;
-}
-.barre_onglet .cadre-icone {
-	top: -8px;
-	#ENV{left}: 4px;
-}
-.barre_onglet .cadre-icone + a,
-.barre_onglet .cadre-icone + strong {
-	padding-#ENV{left}: 32px;
-}
-
-
-/* ==================
- * 3. Onglets simples
- * ==================
- *
- * Markup :
- *
- * <div class='onglets_simple clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
- * <div class='onglets_simple second clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
- */
-
-.onglets_simple {
-	margin: 1em 0;
-	clear: #ENV{left};
-	border-bottom:1px solid #ENV{foncee};
-	padding-#ENV{left}:5px;
-}
-.onglets_simple ul {
-	list-style: none;
-	margin-#ENV{left}:1px;
-	padding:0;
-}
-.onglets_simple ul li {
-	float: #ENV{left};
-	padding: 0;
-	margin: 0;
-	margin-bottom: -1px;
-}
-.onglets_simple ul li strong,
-.onglets_simple ul li a {
-	display: block;
-	float: #ENV{left};
-	padding: 4px 7px;
-	border: 1px solid #ENV{foncee};
-	margin-#ENV{left}: 5px;
-	background-color: #eee;
-	background-position: center #ENV{left};
-	background-repeat: no-repeat;
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-}
-.onglets_simple ul li strong,
-.onglets_simple ul li a:hover {
-	background-color: #f8f7f3;
-}
-.onglets_simple ul li a {
-	position: relative;
-	opacity: 0.7;
-}
-.onglets_simple ul li a:hover,
-.onglets_simple ul li a:focus {
-	cursor: hand;
-	cursor: pointer;
-	opacity: 1;
-}
-.onglets_simple ul li strong {
-	position: relative;
-	color: #555;
-	background-color: transparent;
-	border-bottom: 1px solid #f8f7f3;
-	border-top-right-radius: 5px;
-	border-bottom-color: #f9f9f9;
-}
-.onglets_simple .cadre-icone {
-	display: none;
-}
-
-/* Second niveau */
-
-.onglets_simple.second {
-	font-size: 0.9em;
-	border: 0;
-	padding-#ENV{left}: 0;
-}
-.onglets_simple.second ul li strong,
-.onglets_simple.second ul li a {
-	margin-#ENV{left}:0px;
-	margin-#ENV{right}:5px;
-	margin-bottom:5px;
-}
-.onglets_simple.second ul li strong {
-	border:1px solid #ENV{foncee};
-}
-.onglets_simple.second ul li strong,
-.onglets_simple.second ul li a:hover,
-.onglets_simple.second ul li a:focus {
-	background-color: #fff;
-}
-
 /* ==================
- * 4. Divers & oldies
+ * 2. Divers & oldies
  * ==================
  */
 
diff --git a/prive/themes/spip/onglets.css.html b/prive/themes/spip/onglets.css.html
new file mode 100644
index 0000000000..d8a9910f8a
--- /dev/null
+++ b/prive/themes/spip/onglets.css.html
@@ -0,0 +1,288 @@
+[(#REM)
+
+	Ce squelette définit les styles des menus onglets de l'espace privé
+
+	Organisation du fichier :
+
+	1. Onglets simples
+	2. Barre onglets
+
+<style>]
+#CACHE{3600*100,cache-client}
+#HTTP_HEADER{Content-Type: text/css;charset=utf-8}
+#HTTP_HEADER{Vary: Accept-Encoding}
+
+
+/* ============
+ * 0. Variables
+ * ============
+ */
+:root {
+	--spip-tabs-border-width: 2px;
+	--spip-tabs-border-radius: var(--spip-border-radius);
+	--spip-tabs-spacing-x: 1em;
+	--spip-tabs-spacing-y: 0.5em;
+}
+
+
+/**
+ * =================
+ * 0. Onglets (tous)
+ * =================
+ * Styles mutualisés
+ */
+.onglets_simple a:focus,
+.barre_onglet a:focus {
+	box-shadow: 0 0 0 0.2rem var(--spip-btn-color-focus);
+	outline: none;
+	z-index: 2;
+}
+
+
+/* ==================
+ * 1. Onglets simples
+ * ==================
+ *
+ * Markup :
+ *
+ * div.onglets_simple
+ *   ul
+ *     li
+ *       strong | a
+ * div.onglets_simple.second
+ *   ul
+ *     li
+ *       strong | a
+ *   ul…
+ */
+
+/**
+ * Onglets de base
+ */
+.onglets_simple {
+	margin: calc(var(--spip-spacing-y) * 1.5) 0;
+	border-bottom: var(--spip-tabs-border-width) solid hsla(0, 0%, 0%, 0.1);
+}
+.onglets_simple ul {
+	display: flex;
+	flex-flow: row wrap;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+.onglets_simple li {
+	display: flex;
+	padding: 0;
+	margin: 0;
+	margin-bottom: calc(var(--spip-tabs-border-width) * -1);
+}
+/* Items */
+.onglets_simple li strong,
+.onglets_simple li a {
+	flex: 1;
+	position: relative;
+	display: block;
+	padding: calc(var(--spip-tabs-spacing-y) * 2) var(--spip-tabs-spacing-x);
+	border-bottom: var(--spip-tabs-border-width) solid transparent;
+	transition: background 0.15s, border 0.15s;
+	text-transform: uppercase;
+	text-align: center;
+	font-weight: 500;
+	font-size: 0.9em;
+	background-position: center var(--spip-left);
+	background-repeat: no-repeat;
+}
+/* Items non exposés (liens) */
+.onglets_simple li a {
+	color: var(--spip-color-gray-dark);
+	text-decoration: none;
+}
+.onglets_simple li a:hover,
+.onglets_simple li a:active {
+	cursor: pointer;
+	z-index: 2;
+}
+.onglets_simple li a:hover {
+	background-color: var(--spip-color-theme-lightest);
+	border-bottom-color: var(--spip-color-theme-light);
+}
+.onglets_simple li a:active {
+	background-color: var(--spip-color-theme-lighter);
+	border-bottom-color: var(--spip-color-theme);
+}
+/* Item exposé */
+.onglets_simple li strong {
+	color: var(--spip-color-theme-dark);
+	border-bottom-color: var(--spip-color-theme-dark);
+	z-index: 2;
+}
+/* Divers */
+.onglets_simple .cadre-icone {
+	display: none;
+}
+/* Variante bloc */
+.onglets_simple.bloc ul {
+	flex-wrap: nowrap;
+}
+.onglets_simple.bloc ul li {
+	flex: 1;
+}
+
+
+/**
+ * Onglets secondaires = filtres
+ */
+.onglets_simple.second {
+	border: 0;
+}
+.onglets_simple.second ul {
+	display: inline-flex;
+}
+.onglets_simple.second ul + ul {
+	margin-#LEFT: 2em;
+}
+/* Items */
+.onglets_simple.second li strong,
+.onglets_simple.second li a {
+	padding: var(--spip-tabs-spacing-y) var(--spip-tabs-spacing-x);
+	text-transform: none;
+	border: 1px solid var(--spip-color-gray-light);
+	border-radius: var(--spip-tabs-border-radius);
+}
+.onglets_simple.second li:not(:first-child) > * {
+	border-top-#LEFT-radius: 0;
+	border-bottom-#LEFT-radius: 0;
+}
+.onglets_simple.second li:not(:last-child) > * {
+	border-top-#RIGHT-radius: 0;
+	border-bottom-#RIGHT-radius: 0;
+}
+.onglets_simple.second li:not(:first-child):not(:only-child) > * {
+	margin-#LEFT: -1px;
+}
+/* Items non exposés (liens) */
+.onglets_simple.second li a {
+	background-color: transparent;
+}
+.onglets_simple.second li a:hover,
+.onglets_simple.second li a:focus,
+.onglets_simple.second li a:active {
+	color: var(--spip-color-theme-dark);
+	border-color: var(--spip-color-theme);
+}
+.onglets_simple.second li a:hover {
+	background-color: var(--spip-color-theme-lightest);
+}
+.onglets_simple.second li a:active {
+	background-color: var(--spip-color-theme-light);
+}
+/* Item exposé */
+.onglets_simple.second li strong {
+	background-color: var(--spip-color-theme-dark);
+	border-color: var(--spip-color-theme-dark);
+	color: white;
+}
+
+
+/* ================
+ * 2. Barre onglets
+ * ================
+ *
+ * Markup :
+ *
+ * div.barre_onglet
+ *   ul
+ *     li
+ *       [img.cadre-icone]
+ *       strong | a
+ */
+.barre_onglet {
+	margin: calc(var(--spip-spacing-y) * 1.5) 0;
+}
+.barre_onglet ul {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: center;
+	margin: 0 auto;
+	padding: 0;
+	margin: 0;
+	text-align: var(--spip-left);
+	list-style:none;
+}
+.barre_onglet li {
+	margin: 0;
+	padding: 0;
+	position: relative;
+	list-style: none;
+}
+/* Items */
+.barre_onglet a,
+.barre_onglet strong {
+	display: block;
+	padding: calc(var(--spip-tabs-spacing-y) * 1.5) var(--spip-tabs-spacing-x);
+	font-weight: 500;
+	text-decoration: none;
+	transition: background 0.15s, border 0.15s;
+	border-radius: 99em;
+}
+.barre_onglet li:first-child a,
+.barre_onglet li:first-child strong {
+	padding-#LEFT: calc(var(--spip-tabs-spacing-x) * 1.5); /* plus grand because arrondi */
+}
+.barre_onglet li:last-child a,
+.barre_onglet li:last-child strong {
+	padding-#RIGHT: calc(var(--spip-tabs-spacing-x) * 1.5); /* plus grand because arrondi */
+}
+.barre_onglet li:not(:last-child) a,
+.barre_onglet li:not(:last-child) strong {
+	border-right: 1px solid hsla(0, 0%, 0%, 0.1);
+}
+.barre_onglet li:not(:first-child) a,
+.barre_onglet li:not(:first-child) strong {
+	border-top-#LEFT-radius: 0;
+	border-bottom-#LEFT-radius: 0;
+}
+.barre_onglet li:not(:last-child) a,
+.barre_onglet li:not(:last-child) strong {
+	border-top-#RIGHT-radius: 0;
+	border-bottom-#RIGHT-radius: 0;
+}
+/* Item non exposé (lien) */
+.barre_onglet a {
+	background-color: var(--spip-color-gray-lighter);
+	text-decoration: none;
+	color: var(--spip-color-theme-dark);
+}
+.barre_onglet a:hover {
+	text-decoration: none;
+	background-color: var(--spip-color-theme-lighter);
+}
+.barre_onglet a:active {
+	text-decoration: none;
+	background-color: var(--spip-color-theme-light);
+	color: var(--spip-color-theme-darker);
+}
+/* Items exposés */
+.barre_onglet strong,
+.barre_onglet strong.on {
+	background-color: var(--spip-color-theme-dark);
+	color: var(--spip-color-white);
+	z-index: 1;
+}
+/* Icônes */
+.barre_onglet .cadre-icone {
+	top: 50%;
+	#LEFT: var(--spip-tabs-spacing-x);
+	transform: translateY(-50%);
+}
+.barre_onglet .cadre-icone + a,
+.barre_onglet .cadre-icone + strong {
+	padding-#LEFT: calc(24px + (var(--spip-tabs-spacing-x) * 2));
+}
+.barre_onglet li:first-child .cadre-icone {
+	#LEFT: calc(var(--spip-tabs-spacing-x) * 1.5); /* plus grand because arrondi */
+}
+.barre_onglet li:first-child .cadre-icone + a,
+.barre_onglet li:first-child .cadre-icone + strong {
+	padding-#LEFT: calc(24px + (var(--spip-tabs-spacing-x) * 2.5)); /* plus grand because arrondi */
+}
\ No newline at end of file
diff --git a/prive/themes/spip/style_prive.css.html b/prive/themes/spip/style_prive.css.html
index 6e5fb04cbb..d07f623e1e 100644
--- a/prive/themes/spip/style_prive.css.html
+++ b/prive/themes/spip/style_prive.css.html
@@ -44,6 +44,7 @@ Valeurs par defaut :
 	bando.css,
 	boutons.css,
 	icons.css,
+	onglets.css,
 	tables.css,
 	box.css,
 	lists.css,
-- 
GitLab