From 8cb32b1b484698d207e4da2c0ddfe415af068d89 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Fri, 19 Mar 2021 16:42:09 +0100
Subject: [PATCH] replaced :hover by @media(hover: hover)

---
 .../custom/materiotheme/assets/dist/main.css  | 87 ++++++++++++-------
 .../materiotheme/assets/styles/main.scss      | 39 ++++++---
 2 files changed, 85 insertions(+), 41 deletions(-)

diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css
index b2fcef9..74ddea8 100644
--- a/web/themes/custom/materiotheme/assets/dist/main.css
+++ b/web/themes/custom/materiotheme/assets/dist/main.css
@@ -19385,11 +19385,14 @@ header[role="banner"] {
       top: 1.7em;
       box-sizing: content-box;
       z-index: 100; }
-    header[role="banner"] #block-userlogin:hover > section {
-      transition-delay: 0s;
-      max-height: 20em;
-      padding: 1em 1em;
-      box-shadow: 0 0 10px #ccc; }
+    @media (hover: hover) {
+      header[role="banner"] #block-userlogin {
+        /* solves sticky problem */ }
+        header[role="banner"] #block-userlogin:hover > section {
+          transition-delay: 0s;
+          max-height: 20em;
+          padding: 1em 1em;
+          box-shadow: 0 0 10px #ccc; } }
     header[role="banner"] #block-userlogin .form-item {
       margin: 0;
       position: relative;
@@ -19470,11 +19473,14 @@ header[role="banner"] {
       top: 1.7em;
       box-sizing: content-box;
       z-index: 30; }
-    header[role="banner"] #user-flags:hover ul {
-      transition-delay: 0s;
-      max-height: 50em;
-      padding: 1em 1em;
-      box-shadow: 0 0 10px #ccc; }
+    @media (hover: hover) {
+      header[role="banner"] #user-flags {
+        /* solves sticky problem */ }
+        header[role="banner"] #user-flags:hover ul {
+          transition-delay: 0s;
+          max-height: 50em;
+          padding: 1em 1em;
+          box-shadow: 0 0 10px #ccc; } }
     header[role="banner"] #user-flags li {
       width: 100%;
       display: flex;
@@ -19497,8 +19503,11 @@ header[role="banner"] {
           color: #4e4d4d; }
         header[role="banner"] #user-flags li div.actions span.delete-btn.loading:before {
           animation: rotating 2s linear infinite; }
-      header[role="banner"] #user-flags li:hover div.actions {
-        opacity: 1; }
+      @media (hover: hover) {
+        header[role="banner"] #user-flags li {
+          /* solves sticky problem */ }
+          header[role="banner"] #user-flags li:hover div.actions {
+            opacity: 1; } }
       header[role="banner"] #user-flags li.create-flag {
         margin-top: 0.2em; }
         header[role="banner"] #user-flags li.create-flag input {
@@ -19592,10 +19601,13 @@ header[role="banner"] {
       margin: 0;
       box-sizing: content-box;
       transition: all 0.4s ease-in-out; }
-    header[role="banner"] #block-languageswitcher:hover > ul.links {
-      transition-delay: 0s;
-      height: 2em;
-      padding: 0.3em 0; }
+    @media (hover: hover) {
+      header[role="banner"] #block-languageswitcher {
+        /* solves sticky problem */ }
+        header[role="banner"] #block-languageswitcher:hover > ul.links {
+          transition-delay: 0s;
+          height: 2em;
+          padding: 0.3em 0; } }
     header[role="banner"] #block-languageswitcher li {
       list-style: none;
       padding: 0;
@@ -20034,8 +20046,11 @@ article.card {
       background: rgba(255, 255, 255, 0.8); }
       article.card.minicard > nav.tools .mdi.unflag {
         cursor: pointer; }
-      article.card.minicard > nav.tools .tool.samples:hover .tool-content {
-        max-width: 140px; }
+      @media (hover: hover) {
+        article.card.minicard > nav.tools .tool.samples {
+          /* solves sticky problem */ }
+          article.card.minicard > nav.tools .tool.samples:hover .tool-content {
+            max-width: 140px; } }
   article.card.linkedmaterialcard {
     width: 190px;
     height: 110px; }
@@ -20118,12 +20133,15 @@ article.card {
         overflow: hidden;
         transition: all 0.2s ease-in-out;
         transition-delay: 0.1s; }
-      article.card nav.tools > *:hover .tool-content {
-        transition: all 0.3s ease-in-out;
-        opacity: 1;
-        padding: 0.3em;
-        max-height: 195px;
-        max-width: 200px; }
+      @media (hover: hover) {
+        article.card nav.tools > * {
+          /* solves sticky problem */ }
+          article.card nav.tools > *:hover .tool-content {
+            transition: all 0.3s ease-in-out;
+            opacity: 1;
+            padding: 0.3em;
+            max-height: 195px;
+            max-width: 200px; } }
     article.card nav.tools .tool.flags .tool-content ul {
       display: flex;
       flex-flow: row wrap; }
@@ -20134,7 +20152,12 @@ article.card {
       font-size: 0.756em;
       color: #bbb;
       transition: color 0.3s ease-in-out; }
-      article.card nav.tools .tool.flags span.flag:hover, article.card nav.tools .tool.flags span.flag.isActive {
+      @media (hover: hover) {
+        article.card nav.tools .tool.flags span.flag {
+          /* solves sticky problem */ }
+          article.card nav.tools .tool.flags span.flag:hover {
+            color: #1a1a1a; } }
+      article.card nav.tools .tool.flags span.flag.isActive {
         color: #1a1a1a; }
     article.card nav.tools .tool.flags li.create-flag {
       margin-top: 0.2em;
@@ -20161,8 +20184,11 @@ article.card {
         font-weight: bold; }
         article.card nav.tools .tool.samples .tool-content ul li span.showroom {
           font-weight: 400; }
-  article.card:hover nav.tools {
-    opacity: 1; }
+  @media (hover: hover) {
+    article.card {
+      /* solves sticky problem */ }
+      article.card:hover nav.tools {
+        opacity: 1; } }
   article.card section.images {
     position: relative; }
     article.card section.images, article.card section.images * {
@@ -20251,8 +20277,11 @@ article.card {
         padding-right: 0.5em; }
         article.card.modal-card section.col-right section.tool.samples div.tool-content ul li span.showroom {
           font-weight: 500; }
-    article.card.modal-card section.col-right section.tool.note:hover div.tool-content {
-      max-height: 370px; }
+    @media (hover: hover) {
+      article.card.modal-card section.col-right section.tool.note {
+        /* solves sticky problem */ }
+        article.card.modal-card section.col-right section.tool.note:hover div.tool-content {
+          max-height: 370px; } }
     article.card.modal-card section.col-right section.tool.note div.tool-content textarea,
     article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus,
     article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus-visible,
diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss
index 85bf6b6..6079422 100644
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -28,6 +28,14 @@ html{
 	}
 }
 
+@mixin hover{
+  @media (hover: hover) { /* solves sticky problem */
+    &:hover {
+      @content;
+    }
+  }
+}
+
 aside.messages{
   border:none;
 }
@@ -98,7 +106,7 @@ header[role="banner"]{
       box-sizing: content-box;
       z-index:100;
     }
-    &:hover{
+    @include hover{
       &>section{
         transition-delay: 0s;
         max-height:20em;
@@ -221,7 +229,7 @@ header[role="banner"]{
       box-sizing: content-box;
       z-index: 30;
     }
-    &:hover{
+    @include hover{
       ul{
         transition-delay: 0s;
         max-height:50em;
@@ -262,7 +270,7 @@ header[role="banner"]{
           }
         }
       }
-      &:hover{
+      @include hover{
         div.actions{
           opacity:1;
         }
@@ -384,7 +392,7 @@ header[role="banner"]{
       // outline: 1px solid blue;
       // transition-delay: 2s;
     }
-    &:hover{
+    @include hover{
       &>ul.links{
         transition-delay: 0s;
         height:2em;
@@ -1091,9 +1099,11 @@ article.card{
       .mdi.unflag{
         cursor: pointer;
       }
-      .tool.samples:hover{
-        .tool-content{
-          max-width:140px;
+      .tool.samples{
+        @include hover{
+          .tool-content{
+            max-width:140px;
+          }
         }
       }
     }
@@ -1200,7 +1210,7 @@ article.card{
         transition: all 0.2s ease-in-out;
         transition-delay: 0.1s;
       }
-      &:hover{
+      @include hover{
         .tool-content{
           transition: all 0.3s ease-in-out;
           opacity: 1;
@@ -1226,7 +1236,10 @@ article.card{
         font-size: 0.756em;
         color: #bbb;
         transition: color 0.3s ease-in-out;
-        &:hover, &.isActive{
+        @include hover{
+          color:#1a1a1a;
+        }
+        &.isActive{
           color:#1a1a1a;
         }
       }
@@ -1271,7 +1284,7 @@ article.card{
     transition: opacity 0.2s ease-in-out;
   }
 
-  &:hover{
+  @include hover{
     nav.tools{
       opacity:1;
     }
@@ -1419,8 +1432,10 @@ article.card{
         }
       }
       section.tool.note{
-        &:hover div.tool-content{
-          max-height: 370px;
+        @include hover{
+          div.tool-content{
+            max-height: 370px;
+          }
         }
         div.tool-content{
           textarea,