From 0728f8389b7e8051bb4feaa77145c11ee004604c Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Thu, 25 Jan 2024 18:12:50 -0600
Subject: [PATCH] Website: Update mobile docs styles (#16367)

Closes: #16324

Changes:
- Updated the "Edit page" button on documentation pages to always be
visible on mobile devices.
---
 .../pages/docs/basic-documentation.less       | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less
index 0da027c2e6..ed638a1813 100644
--- a/website/assets/styles/pages/docs/basic-documentation.less
+++ b/website/assets/styles/pages/docs/basic-documentation.less
@@ -210,7 +210,7 @@
 
     [purpose='edit-button'] {
       color: @core-vibrant-blue;
-      opacity: 0;
+
       font-size: 12px;
       position: absolute;
       right: 230px;
@@ -228,13 +228,9 @@
         color: @accent-white;
         text-decoration: none;
       }
-    } &:hover {
-      [purpose='edit-button'] {
-        opacity: 1;
-      }
-
     }
 
+
     [purpose='search'] {
 
       .form-control {
@@ -283,6 +279,7 @@
         padding: 0;
         padding-top: 12px;
         padding-bottom: 12px;
+        cursor: pointer;
 
         &:focus {
             box-shadow: none;
@@ -972,7 +969,18 @@
     }
 
   }
-
+  @media(hover) {
+    [purpose='docs-template'] {
+      [purpose='edit-button'] {
+        opacity: 0;
+      }
+    }
+    [purpose='docs-template']:hover {
+      [purpose='edit-button'] {
+        opacity: 1;
+      }
+    }
+  }
 
   @import 'code-blocks.less'; // styles for code blocks and hljs