fix style for titled foldable callout

r4ai · Apr 5, 2024 · 40d857e · 40d857e
1 parent dc91db2
commit 40d857e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/packages/remark-callout/README.md b/packages/remark-callout/README.md
@@ -166,11 +166,16 @@ yields:
      }
 
      &::after {
-       @apply w-full bg-contain bg-right bg-no-repeat;
-       content: "Note";
+       @apply w-full bg-right bg-no-repeat;
+       content: "";
 
        /* lucide:chevron-right */
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im05IDE4bDYtNmwtNi02Ii8+PC9zdmc+");
+       background-size: 1.5rem;
+     }
+
+     &:not(:empty)::after {
+       @apply my-auto ml-auto h-6 w-6;
      }
    }
 
@@ -194,8 +199,8 @@ yields:
        }
 
        &::before {
-         /* radix-icons:info */
-         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 15 15'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.5.877a6.623 6.623 0 1 0 0 13.246A6.623 6.623 0 0 0 7.5.877ZM1.827 7.5a5.673 5.673 0 1 1 11.346 0a5.673 5.673 0 0 1-11.346 0Zm6.423-3a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0ZM6 6h1.5a.5.5 0 0 1 .5.5V10h1v1H6v-1h1V7H6V6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+         /* lucide:info */
+         mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00bTAtNGguMDEiLz48L2c+PC9zdmc+");
        }
      }
    }

diff --git a/packages/website/src/pages/playground/_callout.css b/packages/website/src/pages/playground/_callout.css
@@ -43,11 +43,16 @@ details[data-callout] > summary[data-callout-title] {
   }
 
   &::after {
-    @apply w-full bg-contain bg-right bg-no-repeat;
-    content: "Note";
+    @apply w-full bg-right bg-no-repeat;
+    content: "";
 
     /* lucide:chevron-right */
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im05IDE4bDYtNmwtNi02Ii8+PC9zdmc+");
+    background-size: 1.5rem;
+  }
+
+  &:not(:empty)::after {
+    @apply my-auto ml-auto h-6 w-6;
   }
 }
 
@@ -71,8 +76,8 @@ details[data-callout][open] > summary[data-callout-title]::after {
     }
 
     &::before {
-      /* radix-icons:info */
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 15 15'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.5.877a6.623 6.623 0 1 0 0 13.246A6.623 6.623 0 0 0 7.5.877ZM1.827 7.5a5.673 5.673 0 1 1 11.346 0a5.673 5.673 0 0 1-11.346 0Zm6.423-3a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0ZM6 6h1.5a.5.5 0 0 1 .5.5V10h1v1H6v-1h1V7H6V6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+      /* lucide:info */
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00bTAtNGguMDEiLz48L2c+PC9zdmc+");
     }
   }
 }
@@ -92,8 +97,8 @@ details[data-callout][open] > summary[data-callout-title]::after {
     }
 
     &::before {
-      /* radix-icons:check-circled */
-      mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.49991%200.877045C3.84222%200.877045%200.877075%203.84219%200.877075%207.49988C0.877075%2011.1575%203.84222%2014.1227%207.49991%2014.1227C11.1576%2014.1227%2014.1227%2011.1575%2014.1227%207.49988C14.1227%203.84219%2011.1576%200.877045%207.49991%200.877045ZM1.82708%207.49988C1.82708%204.36686%204.36689%201.82704%207.49991%201.82704C10.6329%201.82704%2013.1727%204.36686%2013.1727%207.49988C13.1727%2010.6329%2010.6329%2013.1727%207.49991%2013.1727C4.36689%2013.1727%201.82708%2010.6329%201.82708%207.49988ZM10.1589%205.53774C10.3178%205.31191%2010.2636%205.00001%2010.0378%204.84109C9.81194%204.68217%209.50004%204.73642%209.34112%204.96225L6.51977%208.97154L5.35681%207.78706C5.16334%207.59002%204.84677%207.58711%204.64973%207.78058C4.45268%207.97404%204.44978%208.29061%204.64325%208.48765L6.22658%2010.1003C6.33054%2010.2062%206.47617%2010.2604%206.62407%2010.2483C6.77197%2010.2363%206.90686%2010.1591%206.99226%2010.0377L10.1589%205.53774Z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
+      /* lucide:circle-check-big */
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0yMiAxMS4wOFYxMmExMCAxMCAwIDEgMS01LjkzLTkuMTQiLz48cGF0aCBkPSJtOSAxMWwzIDNMMjIgNCIvPjwvZz48L3N2Zz4=");
     }
   }
 }