chore: improve examples

taiga-family · Oct 11, 2023 · 8bacae2 · 8bacae2
1 parent fabffbc
commit 8bacae2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 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
@@ -14,17 +14,38 @@
 
 .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 {
         opacity: 1;
     }
 }
 
-.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
@@ -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>