From cced667591edaabe59849ef6b6d53b58ad5467ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Mon, 11 Jun 2018 20:44:22 +0200
Subject: [PATCH] scss: reduce specificity of navigation selectors (#24447)

---
 static/includes/_nav.scss                     | 44 +++++++++----------
 templates/theme.html                          |  6 +--
 .../variants/alfortville/prepare-template.py  |  2 +-
 templates/variants/grandlyon-gnm/theme.html   |  4 +-
 .../variants/grenoble-metropole/theme.html    |  2 +-
 .../combo/page_template_neutre.html           |  2 +-
 .../variants/hautes-alpes-2018/theme.html     |  2 +-
 templates/variants/minint/theme.html          |  2 +-
 templates/variants/montpellier/theme.html     |  4 +-
 9 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/static/includes/_nav.scss b/static/includes/_nav.scss
index 0cb197c..823cd73 100644
--- a/static/includes/_nav.scss
+++ b/static/includes/_nav.scss
@@ -36,25 +36,25 @@ $responsive-menu: top-to-bottom !default; /* or left-to-right */
 
 
 @if $nav-full-width-background == true {
-	div#nav-wrapper {
+	div.gru-nav-wrapper {
 		background: $nav-background;
 		color: $nav-color;
 	}
 } @else {
-	div#nav {
+	div.gru-nav {
 		background: $nav-background;
 		color: $nav-color;
 	}
 }
 
-div#nav {
+div.gru-nav {
 	padding: 0;
 	margin: 10px auto;
 	height: $nav-height;
 	border-radius: $border-radius;
 }
 
-div#nav > ul {
+div.gru-nav > ul {
 	border-color: $nav-border-color;
 	height: $nav-height;
 	padding: 0;
@@ -62,13 +62,13 @@ div#nav > ul {
 	overflow: hidden;
 }
 
-div#nav > ul > li:first-child > a {
+div.gru-nav > ul > li:first-child > a {
 	@if $nav-item-selected-mode == background and $nav-full-width-background == false {
 		border-radius: $border-radius 0 0 $border-radius;
 	}
 }
 
-div#nav > ul > li {
+div.gru-nav > ul > li {
 	background: $nav-item-background;
 	margin: 0;
 	margin-right: $nav-item-spacing;
@@ -76,7 +76,7 @@ div#nav > ul > li {
 	padding: 0;
 }
 
-div#nav > ul > li a {
+div.gru-nav > ul > li a {
 	color: $nav-color;
 	font-weight: bold;
 	padding: 0px 20px;
@@ -86,14 +86,14 @@ div#nav > ul > li a {
 	text-decoration: none;
 }
 
-div#nav li > a {
+div.gru-nav li > a {
 	@if $nav-item-selected-mode == bottom-border {
 		border-bottom: $nav-item-selected-border;
 		border-bottom-color: transparent;
 	}
 }
 
-div#nav li.selected > a {
+div.gru-nav li.selected > a {
 	@if $nav-item-selected-mode == background {
 		background-color: $nav-item-selected-background;
 		color: $nav-item-selected-color;
@@ -104,7 +104,7 @@ div#nav li.selected > a {
 	}
 }
 
-div#nav li:hover > a {
+div.gru-nav li:hover > a {
 	@if $nav-item-selected-mode == background {
 		background-color: $nav-item-hover-background;
 		color: $nav-item-hover-color;
@@ -116,7 +116,7 @@ div#nav li:hover > a {
 
 }
 
-div#nav > ul ul {
+div.gru-nav > ul ul {
 	display: none;
 	position: absolute;
 	background: $nav-submenu-background;
@@ -131,30 +131,30 @@ div#nav > ul ul {
 	}
 }
 
-div#nav > ul ul a {
+div.gru-nav > ul ul a {
 	box-sizing: border-box;
 	width: 100%;
 }
 
-div#nav > ul ul li:last-child a {
+div.gru-nav > ul ul li:last-child a {
 	border-radius: 0 0 $border-radius $border-radius;
 }
 
-div#nav > ul li:hover ul {
+div.gru-nav > ul li:hover ul {
 	display: block;
 }
 
-#nav-button::-moz-focus-inner {
+.gru-nav-button::-moz-focus-inner {
 	border: 0;
 }
 
-#nav-button {
+.gru-nav-button {
 	display: none;
 	border-radius: $border-radius $border-radius 0 0;
 	cursor: pointer;
 }
 
-div#nav,
+div.gru-nav,
 div.menucell {
 	span.badge {
 		font-size: 80%;
@@ -172,11 +172,11 @@ div.menucell {
 		}
 	}
 
-	#nav-wrapper {
+	.gru-nav-wrapper {
 		margin-top: -$nav-menu-side - 10px;
 	}
 
-	div#nav {
+	div.gru-nav {
 		height: auto;
 		background: transparent;
 		@if $responsive-menu == left-to-right {
@@ -184,7 +184,7 @@ div.menucell {
 		}
 	}
 
-	div#nav ul ul {
+	div.gru-nav ul ul {
 		position: static;
 		display: block;
 		background: transparent;
@@ -193,7 +193,7 @@ div.menucell {
 		}
 	}
 
-	div#nav #nav-button {
+	div.gru-nav .gru-nav-button {
 		display: block;
 		z-index: 200;
 		position: relative;
@@ -279,7 +279,7 @@ div.menucell {
 			}
 		}
 	}
-	div#nav #nav-button.toggled {
+	div.gru-nav .gru-nav-button.toggled {
 		@if $responsive-menu == left-to-right {
 			background: transparent;
 		}
diff --git a/templates/theme.html b/templates/theme.html
index fec085c..09c53a6 100644
--- a/templates/theme.html
+++ b/templates/theme.html
@@ -71,9 +71,9 @@
 
 {% block nav %}
 <nav>
-<div id="nav-wrapper" >
-<div id="nav" class="togglable">
-  <button id="nav-button" class="togglable" aria-label="Menu">
+<div id="nav-wrapper" class="gru-nav-wrapper">
+<div id="nav" class="gru-nav togglable">
+  <button id="nav-button" class="gru-nav-button togglable" aria-label="Menu">
     <span class="sr-only">Ouvrir le menu</span>
     <span class="icon-bar icon-bar-1"></span>
     <span class="icon-bar icon-bar-2"></span>
diff --git a/templates/variants/alfortville/prepare-template.py b/templates/variants/alfortville/prepare-template.py
index 441b952..8a15e79 100644
--- a/templates/variants/alfortville/prepare-template.py
+++ b/templates/variants/alfortville/prepare-template.py
@@ -51,7 +51,7 @@ content = content.replace('>Compte citoyen<', '>{{ site_title }}<')
 content = content.replace('<div class="gru-content">',
         '''
 <nav>
-<div id="nav" class="togglable">
+<div id="nav" class="gru-nav togglable">
 {% block menu %}
   <ul>
   </ul>
diff --git a/templates/variants/grandlyon-gnm/theme.html b/templates/variants/grandlyon-gnm/theme.html
index 76f2c85..c656095 100644
--- a/templates/variants/grandlyon-gnm/theme.html
+++ b/templates/variants/grandlyon-gnm/theme.html
@@ -19,8 +19,8 @@ data-map-controls-position="bottomright"
 
 {% block nav %}
 <nav class="{% block nav-classes %}{% endblock %}">
-<div id="nav-wrapper" >
-<div id="nav" class="togglable">
+<div id="nav-wrapper" class="gru-nav-wrapper">
+<div id="nav" class="gru-nav togglable">
 {% get_gnm_portal_url as gnm_portal_url %}
 <h1 id="nav-title"><a href="{{gnm_portal_url}}">toodego</a></h1>
 {% block menu %}
diff --git a/templates/variants/grenoble-metropole/theme.html b/templates/variants/grenoble-metropole/theme.html
index 507358d..dcb50cc 100644
--- a/templates/variants/grenoble-metropole/theme.html
+++ b/templates/variants/grenoble-metropole/theme.html
@@ -42,7 +42,7 @@
 
 {% block nav %}
 <nav>
-<div id="nav" class="togglable">
+<div id="nav" class="gru-nav togglable">
 {% block menu %}
 {% endblock %}
 </div>
diff --git a/templates/variants/hautes-alpes-2018/combo/page_template_neutre.html b/templates/variants/hautes-alpes-2018/combo/page_template_neutre.html
index 0fc0336..b57a446 100644
--- a/templates/variants/hautes-alpes-2018/combo/page_template_neutre.html
+++ b/templates/variants/hautes-alpes-2018/combo/page_template_neutre.html
@@ -44,7 +44,7 @@ data-api-root="{{ site_base }}/api/"
 
 {% block nav %}
 <nav>
-  <div id="nav">
+  <div id="nav" class="gru-nav">
   {% block menu %}
   {% show_menu depth=2 %}
   {% placeholder "menu_right" %}
diff --git a/templates/variants/hautes-alpes-2018/theme.html b/templates/variants/hautes-alpes-2018/theme.html
index 83d0d6f..3a3f1cb 100644
--- a/templates/variants/hautes-alpes-2018/theme.html
+++ b/templates/variants/hautes-alpes-2018/theme.html
@@ -25,7 +25,7 @@
 
 {% block nav %}
 <nav>
-<div id="nav">
+<div id="nav" class="gru-nav">
 {% block menu %}
 {% endblock %}
 </div>
diff --git a/templates/variants/minint/theme.html b/templates/variants/minint/theme.html
index 3523e2d..a311482 100644
--- a/templates/variants/minint/theme.html
+++ b/templates/variants/minint/theme.html
@@ -128,7 +128,7 @@
 
     <div id="main-content-wrapper">
 
-      <div id="nav" class="togglable" role="navigation">
+      <div id="nav" class="gru-nav togglable" role="navigation">
 {% block menu %}
 {% endblock %}
             </div>
diff --git a/templates/variants/montpellier/theme.html b/templates/variants/montpellier/theme.html
index 81d1228..114deae 100644
--- a/templates/variants/montpellier/theme.html
+++ b/templates/variants/montpellier/theme.html
@@ -66,8 +66,8 @@
           {% endif %}
         {% endblock %}
 
-        <div id="nav" class="togglable">
-            <button id="nav-button" class="togglable">
+        <div id="nav" class="gru-nav togglable">
+            <button id="nav-button" class="gru-nav-button togglable">
     <span class="sr-only">Ouvrir le menu</span>
     <span class="icon-bar icon-bar-1"></span>
     <span class="icon-bar icon-bar-2"></span>
-- 
2.17.1