fix: rename toolbar class of browser mockup to `mockup-browser-tool…

…bar` to avoid future conflicts
saadeghi · Jul 20, 2023 · 23f9e17 · 23f9e17
1 parent 6852b65
commit 23f9e17
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/components/styled/mockup.css b/src/components/styled/mockup.css
@@ -77,7 +77,7 @@
   }
   &-browser {
     @apply rounded-box;
-    .toolbar {
+    .mockup-browser-toolbar {
       @apply my-3 inline-flex w-full items-center pr-[1.4em];
       &:before {
         content: "";

diff --git a/src/docs/src/routes/components/mockup-browser/+page.svelte.md b/src/docs/src/routes/components/mockup-browser/+page.svelte.md
@@ -14,20 +14,21 @@ published: true
 <ClassTable
 data="{[
   { type:'component', class: 'mockup-browser', desc: 'Container element' },
+  { type:'component', class: 'mockup-browser-toolbar', desc: 'The toolbar that can include addressbar or other things' },
 ]}"
 />
 
 <Component title="browser mockup with border">
 <div class="border mockup-browser border-base-300 w-full">
-  <div class="toolbar">
+  <div class="mockup-browser-toolbar">
     <div class="input border border-base-300">https://daisyui.com</div>
   </div>
   <div class="flex justify-center px-4 py-16 border-t border-base-300">Hello!</div>
 </div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$mockup-browser border border-base-300">
-  <div class="toolbar">
-    <div class="input border border-base-300">https://daisyui.com</div>
+  <div class="$$mockup-browser-toolbar">
+    <div class="$$input border border-base-300">https://daisyui.com</div>
   </div>
   <div class="flex justify-center px-4 py-16 border-t border-base-300">Hello!</div>
 </div>`
@@ -36,15 +37,15 @@ data="{[
 
 <Component title="browser mockup with background color">
 <div class="border mockup-browser bg-base-300 w-full">
-  <div class="toolbar">
+  <div class="mockup-browser-toolbar">
     <div class="input">https://daisyui.com</div>
   </div>
   <div class="flex justify-center px-4 py-16 bg-base-200">Hello!</div>
 </div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$mockup-browser border bg-base-300">
-  <div class="toolbar">
-    <div class="input">https://daisyui.com</div>
+  <div class="$$mockup-browser-toolbar">
+    <div class="$$input">https://daisyui.com</div>
   </div>
   <div class="flex justify-center px-4 py-16 bg-base-200">Hello!</div>
 </div>`