chore: break last example into two sections

taiga-family · Oct 6, 2023 · 0fe83e8 · 0fe83e8
1 parent 4901d2c
commit 0fe83e8
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 53 deletions.
diff --git a/projects/demo/src/modules/experimental/surface/examples/6/index.less b/projects/demo/src/modules/experimental/surface/examples/6/index.less
@@ -10,27 +10,12 @@
     height: 7rem;
     display: flex;
     flex-direction: column;
-    border-radius: 1.25rem;
-    padding: 1rem;
-    background-size: contain;
-    background-position: right;
     font: var(--tui-font-text-xs);
-    background-color: currentColor;
-    box-shadow: inset -4rem 0 3rem -2rem;
 
     &:first-child {
         grid-column: span 2;
     }
 
-    &:hover {
-        box-shadow: inset 0 0 3rem -2rem;
-        transform: scale(1.1);
-    }
-
-    &:active:before {
-        backdrop-filter: brightness(0.9);
-    }
-
     .heading {
         font: var(--tui-font-text-s);
         color: var(--tui-text-01-night);
@@ -57,14 +42,6 @@
     justify-content: space-between;
     color: var(--tui-text-01-night);
     font-size: 1.375rem;
-    border-radius: 1.25rem;
-    padding: 1rem;
-    box-shadow: inset 0 10rem 7rem -5rem #000;
-    background-image: url('/assets/images/restaurant-1.jpg');
-
-    &:hover {
-        background-image: url('/assets/images/restaurant-2.jpg');
-    }
 
     .header {
         display: flex;
@@ -86,14 +63,6 @@
     gap: 1rem;
     font: var(--tui-font-heading-6);
     color: var(--tui-text-01-night);
-    background-image: url(/assets/images/restaurant-2.jpg);
-    border-radius: 0;
-    clip-path: inset(0 round 5rem); // for crisp edges
-
-    &:before {
-        backdrop-filter: blur(1rem);
-        mix-blend-mode: multiply; // Fix for https://bugs.chromium.org/p/chromium/issues/detail?id=1486408
-    }
 
     .button {
         border-radius: 100%;
@@ -162,29 +131,8 @@
 .mask {
     grid-column: span 3;
     grid-row: span 3;
-    border-radius: 0;
     padding: 4rem 2rem 7rem;
     color: var(--tui-text-01-night);
-    background: #333 radial-gradient(circle at 80% 70%, #aff218 -20%, transparent 60%);
-    mask: linear-gradient(
-        180deg,
-        #222222 77.89%,
-        rgba(36, 36, 36, 0.991353) 79.36%,
-        rgba(42, 42, 42, 0.96449) 80.84%,
-        rgba(52, 52, 52, 0.91834) 82.31%,
-        rgba(67, 67, 67, 0.852589) 83.79%,
-        rgba(85, 85, 85, 0.768225) 85.26%,
-        rgba(107, 107, 107, 0.668116) 86.73%,
-        rgba(132, 132, 132, 0.557309) 88.21%,
-        rgba(157, 157, 157, 0.442691) 89.68%,
-        rgba(182, 182, 182, 0.331884) 91.16%,
-        rgba(204, 204, 204, 0.231775) 92.63%,
-        rgba(222, 222, 222, 0.147411) 94.1%,
-        rgba(237, 237, 237, 0.0816599) 95.58%,
-        rgba(247, 247, 247, 0.03551) 97.05%,
-        rgba(253, 253, 253, 0.0086472) 98.53%,
-        rgba(255, 255, 255, 0) 100%
-    );
 
     .heading {
         display: flex;

diff --git a/projects/demo/src/modules/experimental/surface/examples/6/index.ts b/projects/demo/src/modules/experimental/surface/examples/6/index.ts
@@ -5,7 +5,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 @Component({
     selector: 'tui-surface-example-6',
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
+    styleUrls: ['./index.less', './surface.less'],
     changeDetection,
     encapsulation,
 })

diff --git a/projects/demo/src/modules/experimental/surface/examples/6/surface.less b/projects/demo/src/modules/experimental/surface/examples/6/surface.less
@@ -0,0 +1,66 @@
+.card {
+    border-radius: 1.25rem;
+    padding: 1rem;
+    background-position: right;
+    background-color: currentColor;
+    box-shadow: inset -4rem 0 3rem -2rem;
+
+    &:hover {
+        box-shadow: inset 0 0 3rem -2rem;
+        transform: scale(1.1);
+    }
+
+    &:active:before {
+        backdrop-filter: brightness(0.9);
+    }
+}
+
+.restaurant {
+    border-radius: 1.25rem;
+    padding: 1rem;
+    box-shadow: inset 0 10rem 7rem -5rem #000;
+    background-image: url('/assets/images/restaurant-1.jpg');
+
+    &:hover {
+        background-image: url('/assets/images/restaurant-2.jpg');
+    }
+}
+
+.blur {
+    background-image: url(/assets/images/restaurant-2.jpg);
+    border-radius: 0;
+    clip-path: inset(0 round 5rem); // for crisp edges
+
+    &:before {
+        backdrop-filter: blur(1rem);
+        mix-blend-mode: multiply; // Fix for https://bugs.chromium.org/p/chromium/issues/detail?id=1486408
+    }
+}
+
+.reviews {
+    // tuiSurface="elevated" preset
+}
+
+.mask {
+    border-radius: 0;
+    background: #333 radial-gradient(circle at 80% 70%, #aff218 -20%, transparent 60%);
+    mask: linear-gradient(
+        180deg,
+        #222222 77.89%,
+        rgba(36, 36, 36, 0.991353) 79.36%,
+        rgba(42, 42, 42, 0.96449) 80.84%,
+        rgba(52, 52, 52, 0.91834) 82.31%,
+        rgba(67, 67, 67, 0.852589) 83.79%,
+        rgba(85, 85, 85, 0.768225) 85.26%,
+        rgba(107, 107, 107, 0.668116) 86.73%,
+        rgba(132, 132, 132, 0.557309) 88.21%,
+        rgba(157, 157, 157, 0.442691) 89.68%,
+        rgba(182, 182, 182, 0.331884) 91.16%,
+        rgba(204, 204, 204, 0.231775) 92.63%,
+        rgba(222, 222, 222, 0.147411) 94.1%,
+        rgba(237, 237, 237, 0.0816599) 95.58%,
+        rgba(247, 247, 247, 0.03551) 97.05%,
+        rgba(253, 253, 253, 0.0086472) 98.53%,
+        rgba(255, 255, 255, 0) 100%
+    );
+}
diff --git a/projects/demo/src/modules/experimental/surface/surface.component.ts b/projects/demo/src/modules/experimental/surface/surface.component.ts
@@ -41,6 +41,7 @@ export class ExampleTuiSurfaceComponent {
 
     readonly example6: TuiDocExample = {
         HTML: import('./examples/5/index.html?raw'),
+        'surface.less': import('./examples/5/surface.less?raw'),
         LESS: import('./examples/5/index.less?raw'),
     };
 }