From 98f63b22b6a436ba6a3fcf4cb5a656610a2b847f Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 22 Oct 2019 18:47:58 +0200
Subject: [PATCH] WIP #3053

---
 .../resources/assets/images/rendezvous.svg    | 36 +++++++----
 .../assets/images/teleconsultation.svg        | 31 +++++++---
 .../assets/styles/components/mmenu.styl       | 59 ++++++++++++++++---
 3 files changed, 99 insertions(+), 27 deletions(-)

diff --git a/wp-content/themes/CCV/resources/assets/images/rendezvous.svg b/wp-content/themes/CCV/resources/assets/images/rendezvous.svg
index f2c1bff..4632889 100644
--- a/wp-content/themes/CCV/resources/assets/images/rendezvous.svg
+++ b/wp-content/themes/CCV/resources/assets/images/rendezvous.svg
@@ -1,12 +1,26 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="26.073" height="26.074" viewBox="0 0 26.073 26.074">
-  <g id="Phones-Mobile-Devices_Phone-Actions_phone-actions-ring" data-name="Phones-Mobile-Devices / Phone-Actions / phone-actions-ring" transform="translate(-618.833 -488)">
-    <g id="Group_52" data-name="Group 52" transform="translate(619.749 488.75)">
-      <g id="phone-actions-ring">
-        <path id="Shape_194" data-name="Shape 194" d="M632.354,512.03l.011.008a4.88,4.88,0,0,0,6.074-.667l.682-.682a1.629,1.629,0,0,0,0-2.3l-2.878-2.876a1.629,1.629,0,0,0-2.3,0h0a1.626,1.626,0,0,1-2.3,0l-4.6-4.6a1.626,1.626,0,0,1,0-2.3h0a1.629,1.629,0,0,0,0-2.3l-2.877-2.876a1.628,1.628,0,0,0-2.3,0l-.683.682a4.88,4.88,0,0,0-.666,6.074l.007.011a44.024,44.024,0,0,0,11.834,11.832Z" transform="translate(-619.749 -488.394)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-        <path id="Shape_195" data-name="Shape 195" d="M630.25,496.25a4.882,4.882,0,0,1,4.881,4.881" transform="translate(-618.859 -488.115)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-        <path id="Shape_196" data-name="Shape 196" d="M630.25,492.5a8.949,8.949,0,0,1,8.949,8.949" transform="translate(-618.859 -488.432)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-        <path id="Shape_197" data-name="Shape 197" d="M630.25,488.75a13.017,13.017,0,0,1,13.017,13.017" transform="translate(-618.859 -488.75)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-      </g>
-    </g>
-  </g>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="25px" viewBox="0 0 30 25" style="enable-background:new 0 0 30 25;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g id="Phones-Mobile-Devices_Phone-Actions_phone-actions-ring" transform="translate(-618.833 -488)">
+	<g id="Group_52" transform="translate(619.749 488.75)">
+		<g id="phone-actions-ring">
+			<path class="st0" d="M16.8,23.2c-0.9,0-1.8-0.3-2.7-0.8c0,0,0,0-0.1,0C9.8,19.6,6.2,16,3.4,11.8c-1.3-2-1-4.6,0.7-6.2l0.6-0.6
+				c0.8-0.8,2.2-0.8,3,0l2.6,2.6c0.8,0.8,0.8,2.2,0,3C10.1,10.6,10,10.8,10,11c0,0.2,0.1,0.4,0.2,0.5l4.1,4.1c0.3,0.3,0.8,0.3,1.1,0
+				c0.8-0.8,2.2-0.8,3,0l2.6,2.6c0.8,0.8,0.8,2.2,0,3l-0.6,0.6C19.3,22.7,18.1,23.2,16.8,23.2z M14.8,21.3
+				C14.8,21.3,14.8,21.3,14.8,21.3L14.8,21.3c1.5,1,3.4,0.8,4.6-0.5l0.6-0.6c0.3-0.3,0.3-0.8,0-1.1l-2.6-2.6c-0.3-0.3-0.8-0.3-1.1,0
+				c-0.8,0.8-2.2,0.8-3,0l-4.1-4.1c-0.4-0.4-0.6-0.9-0.6-1.5s0.2-1.1,0.6-1.5c0.3-0.3,0.3-0.8,0-1.1L6.7,5.9c-0.3-0.3-0.8-0.3-1.1,0
+				L5,6.5C3.8,7.7,3.6,9.6,4.5,11C7.2,15.1,10.7,18.6,14.8,21.3z"/>
+			<path class="st0" d="M17.7,13.1c-0.4,0-0.7-0.3-0.7-0.7c0-2-1.6-3.7-3.7-3.7c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7
+				c0,0,0,0,0,0c2.8,0,5,2.2,5,5C18.4,12.8,18.1,13.1,17.7,13.1z"/>
+			<path class="st0" d="M21.3,13.1c-0.4,0-0.7-0.3-0.7-0.7c0-4-3.3-7.3-7.3-7.3c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7
+				c4.7,0,8.6,3.9,8.6,8.6C22,12.8,21.7,13.1,21.3,13.1z"/>
+			<path class="st0" d="M24.9,13.1c-0.4,0-0.7-0.3-0.7-0.7c0-6-4.9-10.9-10.9-10.9c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7
+				c6.7,0,12.2,5.5,12.2,12.2C25.6,12.8,25.3,13.1,24.9,13.1z"/>
+		</g>
+	</g>
+</g>
 </svg>
diff --git a/wp-content/themes/CCV/resources/assets/images/teleconsultation.svg b/wp-content/themes/CCV/resources/assets/images/teleconsultation.svg
index a5682b5..1edb948 100644
--- a/wp-content/themes/CCV/resources/assets/images/teleconsultation.svg
+++ b/wp-content/themes/CCV/resources/assets/images/teleconsultation.svg
@@ -1,10 +1,23 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="31.092" height="25.92" viewBox="0 0 31.092 25.92">
-  <g id="Group_502" data-name="Group 502" transform="translate(-83.941 -511.537)">
-    <g id="Group_501" data-name="Group 501" transform="translate(87.701 512.337)">
-      <line id="Line_144" data-name="Line 144" x2="11.693" transform="translate(8.338 24.321)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
-      <line id="Line_145" data-name="Line 145" x2="15.905" transform="translate(10.451 16.585)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
-      <path id="Path_601" data-name="Path 601" d="M86.893,524.11v-9.753a2.019,2.019,0,0,1,2.01-2.019h22.5a2.026,2.026,0,0,1,2.019,2.019v16.593a2.026,2.026,0,0,1-2.019,2.019H96.026" transform="translate(-86.893 -512.337)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
-    </g>
-    <path id="Path_602" data-name="Path 602" d="M93.037,533.136l4.48-13.763-12.776,6.8,4.141,1.132-3.361,4,2.361,2.123,3.361-4Z" transform="translate(0 2.643)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
-  </g>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="25px" viewBox="0 0 30 25" style="enable-background:new 0 0 30 25;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g id="Group_502" transform="translate(-83.941 -511.537)">
+	<g id="Group_501" transform="translate(87.701 512.337)">
+		<path class="st0" d="M18.7,23.2H8.1c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h10.5c0.4,0,0.7,0.3,0.7,0.7S19.1,23.2,18.7,23.2z"/>
+		<path class="st0" d="M24.4,16.3H10c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7h14.3c0.4,0,0.7,0.3,0.7,0.7
+			C25.1,16,24.8,16.3,24.4,16.3z"/>
+		<path class="st0" d="M8.9,19.9c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h13.8c0.6,0,1.1-0.5,1.1-1.1V2.7c0-0.6-0.5-1.1-1.1-1.1H2.4
+			c-0.6,0-1.1,0.5-1.1,1.1v8.7c0,0.4-0.3,0.7-0.7,0.7s-0.7-0.3-0.7-0.7V2.7c0-1.4,1.1-2.5,2.5-2.5h20.3c1.4,0,2.5,1.1,2.5,2.5v14.7
+			c0,1.4-1.1,2.5-2.5,2.5H8.9z"/>
+	</g>
+	<path class="st0" d="M88.5,535c-0.2,0-0.3-0.1-0.5-0.2l-2.1-1.9c-0.3-0.3-0.3-0.7-0.1-1l2.3-2.7l-2.6-0.7c-0.3-0.1-0.5-0.3-0.5-0.6
+		c0-0.3,0.1-0.6,0.4-0.7l11.5-6c0.3-0.1,0.6-0.1,0.8,0.1c0.2,0.2,0.3,0.5,0.2,0.8l-4,12.2c-0.1,0.3-0.3,0.5-0.6,0.5
+		c-0.3,0-0.6-0.1-0.7-0.4l-1.1-2.3l-2.3,2.7C88.9,534.9,88.7,535,88.5,535C88.5,535,88.5,535,88.5,535z M87.4,532.4l1.1,0.9l2.5-3
+		c0.2-0.2,0.4-0.3,0.6-0.2c0.2,0,0.5,0.2,0.6,0.4l0.8,1.7l2.9-8.9l-8.3,4.4l2,0.5c0.2,0.1,0.4,0.2,0.5,0.5c0.1,0.2,0,0.5-0.1,0.7
+		L87.4,532.4z"/>
+</g>
 </svg>
diff --git a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
index c720810..c4b3f83 100644
--- a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl
@@ -3,7 +3,8 @@
   --mm-max-width: 308px
 
 #mobile-menu
-  @apply bg-purple-dark text-white
+  @apply bg-purple-dark text-white antialiased
+  font-size: 16px fixed
 
   // Submenu header
   &:after
@@ -12,28 +13,72 @@
     box-shadow: none
     border-bottom: 1px solid rgba(#fff, 0.2)
 
-  &.mm--main:after
-    display: none
+  &.mm--main
+    // Hide submenu header on root panel
+    &:after
+      display: none
+
+    .menu-item
+      margin-left: 36px
 
   .menu-list
     @apply bg-purple-dark
+    top: 90px // Space for close button + padding
 
   .menu-item
     @apply bg-purple-dark text-white font-display uppercase
 
-    // Submenu arrow (if applicable)
+    // Menu item divider
+    &:after
+      display: none
+
+  // Submenu arrow (if applicable)
+  .menu-item-has-children
     &:before
       opacity: 1
+      right: auto
+      left: -10px
+      border-width: 0 0 2px 2px // Reverse arrow
 
-    // Menu item divider
-    &:after
+  // Buttons
+  .cta-button
+    a
+      display: flex
+      padding-left: 16px
+
+    //img
+    //  height: 20px
+
+    // Sibling selector to add margin above first normal menu item
+    + .menu-item
+      margin-top: 1em
+
+    &:nth-of-type(odd)
+      @apply bg-pink
+    &:nth-of-type(even)
+      @apply bg-teal
+
+  // Language options
+  .locales
+    @apply font-display uppercase flex mt-6
+    margin-left: 56px
+
+    &:before, &:after, a:after
       display: none
 
+    a
+      width: auto
+      padding: 0
+
+      &:not(:last-child)
+        margin-right: 1.125em
+
+
 // Close button
 #close-menu
   padding: 0
   position: absolute
-  top: 2.5vw
+  top: 30px
   right: @top
   width: 30px
   height: @width
-- 
2.39.5