fix: #425

saadeghi · Mar 4, 2022 · 6a81aa0 · 6a81aa0
1 parent 2ad9cba
commit 6a81aa0
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 29 deletions.
diff --git a/src/components/styled/collapse.css b/src/components/styled/collapse.css
@@ -1,8 +1,10 @@
-.collapse {
-  @apply outline-none;
+.collapse:focus-visible {
+  outline: 2px solid hsl(var(--nf));
+  outline-offset: 2px;
 }
 .collapse-arrow .collapse-title:after {
-  @apply absolute block h-2 w-2 transition-all duration-300 ease-in-out;
+  @apply absolute block h-2 w-2 transition-all ease-in-out;
+  transition-duration: 0.2s;
   top: 1.4rem;
   right: 1.4rem;
   content: "";
@@ -32,44 +34,32 @@
   min-height: 3.75rem;
   transition: background-color 0.2s ease-in-out;
 }
-
-.collapse:not(.collapse-close) input[type="checkbox"]:focus ~ .collapse-title {
+/* 
+.collapse-open :where(.collapse-title),
+.collapse:focus:not(.collapse-close) :where(.collapse-title),
+.collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-title) {
   @apply bg-base-content bg-opacity-10;
-}
-
-.collapse-open .collapse-title,
-.collapse:focus:not(.collapse-close) .collapse-title,
-.collapse:not(.collapse-close)
-  input[type="checkbox"]:checked
-  ~ .collapse-title {
-  @apply bg-base-content bg-opacity-10 outline-none;
-}
+} */
 
 .collapse-content {
   @apply px-4;
   cursor: unset;
   transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
 }
-.collapse-open .collapse-content,
-.collapse:focus:not(.collapse-close) .collapse-content,
-.collapse:not(.collapse-close)
-  input[type="checkbox"]:checked
-  ~ .collapse-content {
-  @apply bg-base-content bg-opacity-10 pb-4 opacity-100;
+.collapse-open :where(.collapse-content),
+.collapse:focus:not(.collapse-close) :where(.collapse-content),
+.collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-content) {
+  @apply pb-4;
   transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
 }
 
 .collapse-open.collapse-arrow .collapse-title:after,
 .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
-.collapse-arrow:not(.collapse-close)
-  input[type="checkbox"]:checked
-  ~ .collapse-title:after {
+.collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
   transform: rotate(225deg);
 }
 .collapse-open.collapse-plus .collapse-title:after,
 .collapse-plus:focus:not(.collapse-close) .collapse-title:after,
-.collapse-plus:not(.collapse-close)
-  input[type="checkbox"]:checked
-  ~ .collapse-title:after {
+.collapse-plus:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
   content: "−";
 }
diff --git a/src/docs/src/routes/components/collapse.svelte.md b/src/docs/src/routes/components/collapse.svelte.md
@@ -24,7 +24,7 @@ data="{[
 />
 
 <Component title="Collapse with focus" desc="This collapse works with focus. When div loses focus, it gets closed">
-<div tabindex="0" class="collapse"> 
+<div tabindex="0" class="collapse">
   <div class="collapse-title text-xl font-medium">
     Focus me to see content
   </div>
@@ -46,11 +46,11 @@ data="{[
 
 <Component title="Collapse with checkbox" desc="This collapse works with checkbox instead of focus. It needs to get clicked again to get closed.">
 <div tabindex="0" class="collapse">
-  <input type="checkbox"> 
+  <input type="checkbox">
   <div class="collapse-title text-xl font-medium">
     Click me to show/hide content
   </div>
-  <div class="collapse-content"> 
+  <div class="collapse-content">
     <p>tabindex="0" attribute is necessary to make the div focusable</p>
   </div>
 </div>
@@ -171,3 +171,47 @@ data="{[
 </div>`
 }</pre>
 </Component>
+
+<Component title="Custom colors for collapse that works with focus" desc="Use Tailwind CSS `group` and `group-focus` utilities to apply style when parent div is focused">
+<div tabindex="0" class="collapse group">
+  <div class="collapse-title bg-primary text-primary-content group-focus:bg-secondary group-focus:text-secondary-content">
+    Focus me to see content
+  </div>
+  <div class="collapse-content bg-primary text-primary-content group-focus:bg-secondary group-focus:text-secondary-content"> 
+    <p>tabindex="0" attribute is necessary to make the div focusable</p>
+  </div>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div tabindex="0" class="collapse group">
+  <div class="$$collapse-title bg-primary text-primary-content group-focus:bg-secondary group-focus:text-secondary-content">
+    Focus me to see content
+  </div>
+  <div class="$$collapse-content bg-primary text-primary-content group-focus:bg-secondary group-focus:text-secondary-content"> 
+    <p>tabindex="0" attribute is necessary to make the div focusable</p>
+  </div>
+</div>`
+}</pre>
+</Component>
+
+<Component title="Custom colors for collapse that works with checkbox" desc="Use Tailwind CSS `peer` and `peer-checked` utilities to apply style when sibling checkbox is checked">
+<div tabindex="0" class="collapse">
+  <input type="checkbox" class="peer"> 
+  <div class="collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content">
+    Click me to show/hide content
+  </div>
+  <div class="collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"> 
+    <p>tabindex="0" attribute is necessary to make the div focusable</p>
+  </div>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div tabindex="0" class="collapse">
+  <input type="checkbox" class="peer"> 
+  <div class="$$collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content">
+    Click me to show/hide content
+  </div>
+  <div class="$$collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"> 
+    <p>tabindex="0" attribute is necessary to make the div focusable</p>
+  </div>
+</div>`
+}</pre>
+</Component>