From 8bacae2aaef64342b271b7e82087e5ed059e6e63 Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Wed, 11 Oct 2023 16:22:23 +0400
Subject: [PATCH] chore: improve examples

---
 .../surface/examples/1/index.less             | 27 ++++++++++++++++---
 .../surface/surface.template.html             |  6 +++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/projects/demo/src/modules/experimental/surface/examples/1/index.less b/projects/demo/src/modules/experimental/surface/examples/1/index.less
index f52271e124811..906044a507045 100644
--- a/projects/demo/src/modules/experimental/surface/examples/1/index.less
+++ b/projects/demo/src/modules/experimental/surface/examples/1/index.less
@@ -14,8 +14,21 @@
 
 .overlay {
     &:after {
-        background: var(--tui-info-bg);
         opacity: 0;
+        background: linear-gradient(
+            -45deg,
+            #a1a1b3 0.36%,
+            #d4d1d8 46.96%,
+            #f7fafa 67.14%,
+            #d4d1d8 83.19%,
+            #a1a1b3 93.03%
+        );
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover:after {
+            opacity: 0.5;
+        }
     }
 
     &:active:after {
@@ -23,8 +36,16 @@
     }
 }
 
-.highlight:active:before {
-    backdrop-filter: brightness(0.9);
+.highlight {
+    @media (hover: hover) and (pointer: fine) {
+        &:hover:before {
+            backdrop-filter: brightness(1.1);
+        }
+    }
+
+    &:active:before {
+        backdrop-filter: brightness(0.9);
+    }
 }
 
 .offset:hover {
diff --git a/projects/demo/src/modules/experimental/surface/surface.template.html b/projects/demo/src/modules/experimental/surface/surface.template.html
index 062aaa83e0270..60fa318715400 100644
--- a/projects/demo/src/modules/experimental/surface/surface.template.html
+++ b/projects/demo/src/modules/experimental/surface/surface.template.html
@@ -17,6 +17,12 @@
             heading="Behaviors"
             [content]="example1"
         >
+            <tui-notification class="tui-space_bottom-4">
+                You can enable hover effects only on devices with pointer:
+                <div>
+                    <code>@media (hover: hover) and (pointer: fine)</code>
+                </div>
+            </tui-notification>
             <tui-surface-example-1></tui-surface-example-1>
         </tui-doc-example>