docs

saadeghi · Dec 13, 2024 · 112ea1a · 112ea1a
1 parent 9df4d70
commit 112ea1a
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 110 deletions.
diff --git a/packages/daisyui/src/components/badge.css b/packages/daisyui/src/components/badge.css
@@ -9,7 +9,7 @@
   background-color: var(--badge-color, var(--color-base-100));
   --size: calc(var(--size-selector, 0.25rem) * 6);
   height: var(--size);
-  box-shadow:
+  /* box-shadow:
     0 3px 0 -2px oklch(100% 0 0 / calc(var(--gloss) * 0.08)) inset,
     0 1px
       color-mix(
@@ -18,7 +18,7 @@
           calc(var(--gloss) * 20%),
         transparent
       ),
-    0 4px 3px -2px oklch(0% 0 0 / calc(var(--gloss) * 0.08));
+    0 4px 3px -2px oklch(0% 0 0 / calc(var(--gloss) * 0.08)); */
   &.badge-outline {
     color: var(--badge-color, var(--color-base-content));
     @apply border-current bg-transparent;

diff --git a/packages/daisyui/src/components/dock.css b/packages/daisyui/src/components/dock.css
@@ -1,35 +1,25 @@
 .dock {
-  @apply bg-base-100 fixed right-0 bottom-0 left-0 z-[1] flex h-16 w-full flex-row items-center justify-around py-2 text-current;
+  @apply bg-base-100 fixed right-0 bottom-0 left-0 z-[1] flex h-16 w-full flex-row items-center justify-around p-2 text-current;
   border-top: 0.5px solid color-mix(in oklab, var(--color-base-content) 5%, transparent);
   padding-bottom: env(safe-area-inset-bottom);
-
-  &:has(> *:hover) > *:not(:hover) {
-    background-color: transparent;
-  }
-
   > * {
-    @apply relative mb-2 flex h-full shrink-1 basis-full cursor-pointer flex-col items-center justify-center gap-px rounded-full bg-transparent;
-    transition: background-color 0.4s ease-in-out;
-
-    &:where(:hover) {
-      @apply bg-base-200;
-    }
-
+    @apply rounded-box relative mb-2 flex h-full max-w-32 shrink-1 basis-full cursor-pointer flex-col items-center justify-center gap-px bg-transparent;
+    transition: opacity 0.2s ease-out;
     &:where(.dock-active) {
-      @apply bg-base-200;
-
       &:after {
         content: "";
         @apply absolute h-1 w-10 rounded-full bg-current;
         bottom: 0.2rem;
       }
     }
-
+    &:hover {
+      @apply opacity-80;
+    }
     &[aria-disabled="true"],
     &[disabled] {
       &,
       &:hover {
-        @apply text-base-content/10 pointer-events-none;
+        @apply text-base-content/10 pointer-events-none opacity-100;
       }
     }
 
@@ -40,7 +30,7 @@
 }
 
 .dock-xs {
-  @apply h-10;
+  @apply h-12;
 
   .dock-active {
     &:after {
@@ -49,12 +39,12 @@
   }
 
   .dock-label {
-    font-size: 0.6875rem;
+    font-size: 0.625rem;
   }
 }
 
 .dock-sm {
-  @apply h-12;
+  @apply h-14;
 
   .dock-active {
     &:after {
@@ -63,7 +53,7 @@
   }
 
   .dock-label {
-    font-size: 0.6875rem;
+    font-size: 0.625rem;
   }
 }
 
@@ -85,7 +75,7 @@
   }
 
   .dock-label {
-    font-size: 0.75rem;
+    font-size: 0.625rem;
   }
 }
 
@@ -99,6 +89,6 @@
   }
 
   .dock-label {
-    font-size: 0.875rem;
+    font-size: 0.75rem;
   }
 }
diff --git a/packages/daisyui/src/components/mockup.css b/packages/daisyui/src/components/mockup.css
@@ -1,5 +1,5 @@
 .mockup-code {
-  @apply bg-neutral text-neutral-content rounded-box relative overflow-hidden overflow-x-auto py-5;
+  @apply bg-neutral text-neutral-content rounded-box relative overflow-hidden overflow-x-auto py-5 text-sm;
   direction: ltr;
 
   &:before {
@@ -91,25 +91,22 @@
   background-color: #000;
   padding: 11px;
   overflow: hidden;
-
-  .mockup-phone-camera {
-    grid-column: 1/1;
-    grid-row: 1/1;
-    background: black;
-    height: 32px;
-    width: 126px;
-    border-radius: 17px;
-    z-index: 1;
-    margin-top: 6px;
-  }
-
-  .mockup-phone-display {
-    grid-column: 1/1;
-    grid-row: 1/1;
-    @apply bg-base-100;
-    overflow: hidden;
-    border-radius: 49px;
-    width: 390px;
-    height: 844px;
-  }
+}
+.mockup-phone-camera {
+  grid-column: 1/1;
+  grid-row: 1/1;
+  background: black;
+  height: 32px;
+  width: 126px;
+  border-radius: 17px;
+  z-index: 1;
+  margin-top: 6px;
+}
+.mockup-phone-display {
+  grid-column: 1/1;
+  grid-row: 1/1;
+  overflow: hidden;
+  border-radius: 49px;
+  width: 390px;
+  height: 845px;
 }
diff --git a/packages/docs/src/components/homepage/Opensource.svelte b/packages/docs/src/components/homepage/Opensource.svelte
@@ -37,7 +37,7 @@
       </a>
     </p>
     <div class="flex w-full justify-center">
-      <div class="flex w-full max-w-5xl flex-wrap justify-center gap-3 p-10">
+      <div class="flex w-full max-w-6xl flex-wrap justify-center gap-3 p-10">
         {#each contributors as contributor}
           <div class="tooltip" data-tip={contributor.login}>
             <div class="avatar">
@@ -71,7 +71,7 @@
       </a>
     </p>
     <div class="flex w-full justify-center">
-      <div class="flex w-full max-w-5xl flex-wrap justify-center gap-3 p-10">
+      <div class="flex w-full max-w-6xl flex-wrap justify-center gap-3 p-10">
         {#each backers as backer}
           <div class="tooltip" data-tip={backer.name}>
             {#if backer.image}

diff --git a/packages/docs/src/routes/(routes)/components/dock/+page.md b/packages/docs/src/routes/(routes)/components/dock/+page.md
@@ -39,7 +39,7 @@ classnames:
 > `<meta name="viewport" content="viewport-fit=cover">` is required for responsivness of the dock in iOS.
 
 ### ~Dock
-<div class="bg-base-300 rounded-box w-full pt-32">
+<div class="bg-base-300 rounded-box w-full max-w-sm pt-32">
   <div class="dock relative border border-base-300">
     <button>
       <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
@@ -76,7 +76,7 @@ classnames:
 ```
 
 ### ~Dock Extra Small size
-<div class="bg-base-300 rounded-box w-full pt-32">
+<div class="bg-base-300 rounded-box w-full max-w-sm pt-32">
   <div class="dock dock-xs relative border border-base-300">
     <button>
       <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
@@ -107,7 +107,7 @@ classnames:
 ```
 
 ### ~Dock Small size
-<div class="bg-base-300 rounded-box w-full pt-32">
+<div class="bg-base-300 rounded-box w-full max-w-sm pt-32">
   <div class="dock dock-sm relative border border-base-300">
     <button>
       <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
@@ -138,7 +138,7 @@ classnames:
 ```
 
 ### ~Dock Medium size
-<div class="bg-base-300 rounded-box w-full pt-32">
+<div class="bg-base-300 rounded-box w-full max-w-sm pt-32">
   <div class="dock dock-md relative border border-base-300">
     <button>
       <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
@@ -176,7 +176,7 @@ classnames:
 
 
 ### ~Dock Large size
-<div class="bg-base-300 rounded-box w-full pt-32">
+<div class="bg-base-300 rounded-box w-full max-w-sm pt-32">
   <div class="dock dock-lg relative border border-base-300">
     <button>
       <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
@@ -214,7 +214,7 @@ classnames:
 
 
 ### ~Dock Extra Large size
-<div class="bg-base-300 rounded-box w-full pt-32">
+<div class="bg-base-300 rounded-box w-full max-w-sm pt-32">
   <div class="dock dock-xl relative border border-base-300">
     <button>
       <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
@@ -252,17 +252,17 @@ classnames:
 
 
 ### ~Dock with custom colors
-<div class="bg-base-300 rounded-box w-full pt-32">
+<div class="bg-base-300 rounded-box w-full max-w-sm pt-32">
   <div class="dock relative border border-base-300 bg-neutral text-neutral-content">
-    <button class="hover:bg-primary hover:text-primary-content">
+    <button>
       <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
       <span class="dock-label">Home</span>
     </button>
-    <button class="bg-secondary text-secondary-content">
+    <button class="dock-active">
       <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="3 14 9 14 9 17 15 17 15 14 21 14" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><rect x="3" y="3" width="18" height="18" rx="2" ry="2" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></rect></g></svg>
       <span class="dock-label">Inbox</span>
     </button>
-    <button class="hover:bg-accent hover:text-accent-content">
+    <button>
       <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path></g></svg>
       <span class="dock-label">Settings</span>
     </button>

diff --git a/packages/docs/src/routes/(routes)/components/mask/+page.md b/packages/docs/src/routes/(routes)/components/mask/+page.md
@@ -1,5 +1,4 @@
 ---
-alert: This page is not up to date. Some of the examples might not work as expected.
 title: Mask
 desc: Mask crops the content of the element to common shapes.
 layout: components

diff --git a/packages/docs/src/routes/(routes)/components/mockup-browser/+page.md b/packages/docs/src/routes/(routes)/components/mockup-browser/+page.md
@@ -1,5 +1,4 @@
 ---
-alert: This page is not up to date. Some of the examples might not work as expected.
 title: Browser mockup
 desc: Browser mockup shows a box that looks like a browser window.
 layout: components
@@ -17,36 +16,36 @@ classnames:
 </script>
 
 ### ~browser mockup with border
-<div class="border mockup-browser border-base-300 w-full">
+<div class="mockup-browser border border-base-300 w-full">
   <div class="mockup-browser-toolbar">
-    <div class="input border border-base-300">https://daisyui.com</div>
+    <div class="input">https://daisyui.com</div>
   </div>
-  <div class="flex justify-center px-4 py-16 border-t border-base-300">Hello!</div>
+  <div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
 </div>
 
 ```html
-<div class="$$mockup-browser border-base-300 border">
+<div class="$$mockup-browser border-base-300 border w-full">
   <div class="$$mockup-browser-toolbar">
-    <div class="$$input border-base-300 border">https://daisyui.com</div>
+    <div class="$$input">https://daisyui.com</div>
   </div>
-  <div class="border-base-300 flex justify-center border-t px-4 py-16">Hello!</div>
+  <div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
 </div>
 ```
 
 
 ### ~browser mockup with background color
-<div class="border mockup-browser bg-base-300 w-full">
+<div class="mockup-browser bg-base-100 w-full border border-base-300">
   <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 class="grid place-content-center h-80">Hello!</div>
 </div>
 
 ```html
-<div class="$$mockup-browser bg-base-300 border">
+<div class="$$mockup-browser border border-base-300 w-full">
   <div class="$$mockup-browser-toolbar">
     <div class="$$input">https://daisyui.com</div>
   </div>
-  <div class="bg-base-200 flex justify-center px-4 py-16">Hello!</div>
+  <div class="grid place-content-center h-80">Hello!</div>
 </div>
 ```