Work in progress

appwrite · Jun 5, 2024 · f800a23 · f800a23
1 parent cc40395
commit f800a23
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git 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
@@ -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);