Fix for tabs (#1287)

* updates * Update Tabs.svelte * update * Update Tabs.svelte
appwrite · Aug 30, 2024 · 226923c · 226923c
1 parent c64dfbb
commit 226923c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/src/lib/components/carousel/Carousel.svelte b/src/lib/components/carousel/Carousel.svelte
@@ -144,7 +144,7 @@
 <div class="web-carousel-bullets">
     <ul class="web-carousel-bullets-list">
         {#each Array.from({ length: emblaApi?.scrollSnapList().length }) as _, i}
-            <li class="web-carousel-bullets-item">
+            <li class="web-carousel-bullets-item rounded-full">
                 <button
                     class="web-carousel-bullets-button"
                     class:is-selected={selectedScrollIndex === i}

diff --git a/src/markdoc/layouts/Integration.svelte b/src/markdoc/layouts/Integration.svelte
@@ -113,7 +113,7 @@
                     </div>
                     <div class="l-grid-sidebar">
                         <dl
-                            class="flex-vertical sidebar-desc gap-5"
+                            class="flex flex-col sidebar-desc gap-5"
                             style:top={$isHeaderHidden ? '4rem' : '9rem'}
                         >
                             <div class="flex justify-between gap-2">

diff --git a/src/markdoc/tags/Tabs.svelte b/src/markdoc/tags/Tabs.svelte
@@ -27,11 +27,11 @@
 
 <div class="web-card is-normal mt-4" {...$root} use:root>
     <div class="tabs flex gap-4">
-        <ul class="tabs-list" {...$list} use:list>
+        <ul class="tabs-list flex items-center gap-4" {...$list} use:list>
             {#each $ctx.triggers.entries() as [id, title]}
-                <li class="tabs-item">
+                <li class="tabs-item hover:bg-white/[0.04] rounded-t-[0.625rem]">
                     <button
-                        class="tabs-button"
+                        class="tabs-button px-1 py-[0.625rem] font-light outline-none bg-clip-padding data-[state=active]:text-white cursor-pointer"
                         class:is-selected={$value === id}
                         {...$trigger(id)}
                         use:trigger>{title}</button

diff --git a/src/scss/7-components/_carousel.scss b/src/scss/7-components/_carousel.scss
@@ -1,5 +1,7 @@
 @use '../abstract' as *;
-
+:root {
+  --border-radius-circular:50%;
+}
 .#{$p}-carousel {
   position:relative;