referansesider: 💄 sykepenger++

navikt · Oct 1, 2024 · 01411dc · 01411dc
1 parent b1b0d23
commit 01411dc
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/examples/referansesider/src/index.css b/examples/referansesider/src/index.css
@@ -8,3 +8,13 @@
   font-size: 18px;
   color: var(--a-text-default);
 }
+
+:where(:root) *:focus {
+  outline: 4px solid var(--a-bg-accent-strong-hover);
+  z-index: 200;
+}
+
+.dark *:focus,
+*.dark:focus {
+  outline-offset: 4px;
+}
diff --git a/examples/referansesider/src/routes/sykepenger.tsx b/examples/referansesider/src/routes/sykepenger.tsx
@@ -218,10 +218,31 @@ let PlainOrderedList: ReactNode;
 let AccordionItem: ReactNode;
 {
   const ScDetails = styled.details`
+    border-top: 1px solid ${tokens.BorderSubtle};
+    border-bottom: 1px solid ${tokens.BorderSubtle};
+
+    &:hover,
+    &:focus-within {
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+    }
+
+    &:hover + details,
+    &:focus-within + details {
+      border-top: 1px solid transparent;
+    }
+    details:has(+ &) {
+      border-bottom: 1px solid transparent;
+    }
+
     &:hover .icon-bg {
       background-color: ${tokens.BgAccentStrongHover};
       color: ${tokens.BgDefault};
     }
+
+    &:not(first-child) {
+      margin-top: -1px;
+    }
   `;
 
   const ScSummary = styled.summary`
@@ -250,13 +271,10 @@ let AccordionItem: ReactNode;
       <ScDetails className="group/details text-xl">
         <ScSummary
           className={clsx(
-            "group/summary",
             "flex gap-2 items-center",
             "group-open/details:border-b-0 group-open/details:mb-4",
             "hover:cursor-pointer p-3 rounded",
-            "sticky top-0 z-10",
-            "focus:z-20",
-            "border-opacity-0 border-x-black border",
+            "sticky top-0 z-10 focus:z-20",
           )}
         >
           {/* TODO: use tokens here */}