From f800a23085a2c4ea0b3aa39c676228ed95f58d35 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 5 Jun 2024 12:44:44 +0300
Subject: [PATCH] Work in progress

---
 src/routes/integration/+page.svelte    | 29 +++++++++++++++++++++++---
 src/scss/6-elements/_input-button.scss | 10 +++++++--
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/routes/integration/+page.svelte b/src/routes/integration/+page.svelte
index 93a17d5a7d..0fc4f08197 100644
--- a/src/routes/integration/+page.svelte
+++ b/src/routes/integration/+page.svelte
@@ -29,9 +29,9 @@
 </svelte:head>
 
 <Main>
-	<header class="">
+	<header class="web-u-sep-block-end">
 		<div class="web-container">
-			<div class="l-integrations u-flex-vertical u-main-center u-gap-20 web-u-max-width-680">
+			<div class="l-integrations-hero u-flex-vertical u-main-center u-gap-20 web-u-max-width-680">
 				<div class="web-eyebrow web-u-color-text-primary">
 					INTEGRATIONS<span class="web-u-color-text-accent">_</span>
 				</div>
@@ -40,6 +40,19 @@
 			</div>
 		</div>
 	</header>
+	<div>
+		<div class="web-container">
+			<div class="l-integrations-grid">
+				<aside>
+					<label class="web-input-button web-u-flex-basis-400">
+						<span class="web-icon-search" aria-hidden="true"></span>
+						<input class="text" placeholder="Search" />
+					</label>
+				</aside>
+				<div></div>
+			</div>
+		</div>
+	</div>
 
 	<div class="web-container">
 		<FooterNav />
@@ -49,7 +62,17 @@
 
 <style lang="scss">
 	@use '$scss/abstract' as *;
-	.l-integrations {
+	.l-integrations-grid {
+		@media #{$break1} {}
+		@media #{$break2open} {
+			display: grid;
+			gap: pxToRem(68);
+			grid-template-columns: pxToRem(240) 1fr;
+			min-block-size: pxToRem(628);
+			padding-block-start: pxToRem(60);
+		}
+	}
+	.l-integrations-hero {
 		@media #{$break1} {}
 		@media #{$break2open} {
 			min-block-size: pxToRem(628);
diff --git a/src/scss/6-elements/_input-button.scss b/src/scss/6-elements/_input-button.scss
index 058739367d..9c6e6a0766 100644
--- a/src/scss/6-elements/_input-button.scss
+++ b/src/scss/6-elements/_input-button.scss
@@ -72,12 +72,14 @@
     --p-input-bg-color: var(--p-input-bg-color-hover);
     --p-input-border-color: var(--p-input-border-color-hover);
   }
-  &:is(:focus) {
+  &:is(:focus),
+  &:has(:focus) {
     --p-input-bg-color: var(--p-input-bg-color-focus);
     --p-input-border-color: var(--p-input-border-color-focus);
     box-shadow: 0 0 0 pxToRem(4) hsl(var(--p-input-focus-box-shadow-color));
   }
-  &:is(:active) {
+  &:is(:active),
+  &:has(:active){
     --p-input-bg-color: var(--p-input-bg-color-active);
     --p-input-border-color: var(--p-input-border-color-active);
     box-shadow: 0 0 0 pxToRem(4) hsl(var(--p-input-focus-box-shadow-color));
@@ -89,6 +91,10 @@
     --p-input-border-color: var(--p-input-border-color-disabled);
     opacity: 0.4;
   }
+  input:focus {
+    box-shadow:none;
+    inline-size:100%;
+  }
 
   &-search-wrapper {
     position:relative; min-inline-size:pxToRem(350);