daisyui 3.2.2 → 3.3.0

package/README.md

@@ -138,7 +138,7 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
   - [x] Tab
 
 - Mockup
-  - [ ] Browser
+  - [x] Browser
   - [x] Code
   - [x] Phone
   - [x] Window

package/dist/full.css

@@ -2580,6 +2580,15 @@ html {
     content: attr(data-prefix);
     display: inline-block;
     text-align: right}
+.mockup-browser {
+    position: relative;
+    overflow: hidden;
+    overflow-x: auto;
+    border-radius: var(--rounded-box, 1rem)}
+.mockup-browser pre[data-prefix]:before {
+    content: attr(data-prefix);
+    display: inline-block;
+    text-align: right}
 .modal {
     pointer-events: none;
     position: fixed;
@@ -4214,8 +4223,8 @@ details.collapse summary::-webkit-details-marker {
     content: "";
     margin-bottom: 1rem;
     display: block;
+    aspect-ratio: 1 / 1;
     height: 0.75rem;
-    width: 0.75rem;
     border-radius: 9999px;
     opacity: 0.3;
     box-shadow: 1.4em 0, 2.8em 0, 4.2em 0}
@@ -4261,6 +4270,61 @@ details.collapse summary::-webkit-details-marker {
     overflow: hidden;
     border-radius: 40px;
     margin-top: -25px}
+.mockup-browser .toolbar {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    padding-right: 1.4em}
+.mockup-browser .toolbar:before {
+    content: "";
+    margin-right: 4.8rem;
+    display: inline-block;
+    aspect-ratio: 1 / 1;
+    height: 0.75rem;
+    border-radius: 9999px;
+    opacity: 0.3;
+    box-shadow: 1.4em 0, 2.8em 0, 4.2em 0}
+.mockup-browser .toolbar .input {
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    height: 1.75rem;
+    width: 24rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--b2) / var(--tw-bg-opacity));
+    padding-left: 2rem}
+.mockup-browser .toolbar .input:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0.5rem;
+    aspect-ratio: 1 / 1;
+    height: 0.75rem;
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    border-radius: 9999px;
+    border-width: 2px;
+    border-color: currentColor;
+    opacity: 0.6}
+.mockup-browser .toolbar .input:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 1.25rem;
+    height: 0.5rem;
+    --tw-translate-y: 25%;
+    --tw-rotate: -45deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    border-radius: 9999px;
+    border-width: 1px;
+    border-color: currentColor;
+    opacity: 0.6}
 .modal:not(dialog:not(.modal-open)),
   .modal::backdrop {
     background-color: rgba(0, 0, 0, 0.3);

package/dist/styled.css

@@ -845,6 +845,16 @@
         display: inline-block;
         text-align: right;
       }
+  .mockup-browser {
+        position: relative;
+        overflow: hidden;
+        overflow-x: auto;
+}
+  .mockup-browser pre[data-prefix]:before {
+        content: attr(data-prefix);
+        display: inline-block;
+        text-align: right;
+      }
 .modal {
   /* @apply pointer-events-none invisible fixed inset-0 flex justify-center opacity-0; */
   pointer-events: none;
@@ -3272,8 +3282,8 @@ details.collapse summary {
       content: "";
       margin-bottom: 1rem;
       display: block;
+      aspect-ratio: 1 / 1;
       height: 0.75rem;
-      width: 0.75rem;
       border-radius: 9999px;
       opacity: 0.3;
       box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
@@ -3325,6 +3335,69 @@ details.collapse summary {
       border-radius: 40px;
       margin-top: -25px;
     }
+  .mockup-browser {
+      border-radius: var(--rounded-box, 1rem);
+}
+  .mockup-browser .toolbar {
+      margin-top: 0.75rem;
+      margin-bottom: 0.75rem;
+      display: inline-flex;
+      width: 100%;
+      align-items: center;
+      padding-right: 1.4em;
+}
+  .mockup-browser .toolbar:before {
+        content: "";
+        margin-right: 4.8rem;
+        display: inline-block;
+        aspect-ratio: 1 / 1;
+        height: 0.75rem;
+        border-radius: 9999px;
+        opacity: 0.3;
+        box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
+      }
+  .mockup-browser .toolbar .input {
+      position: relative;
+      margin-left: auto;
+      margin-right: auto;
+      display: block;
+      height: 1.75rem;
+      width: 24rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      --tw-bg-opacity: 1;
+      background-color: hsl(var(--b2) / var(--tw-bg-opacity));
+      padding-left: 2rem;
+}
+  .mockup-browser .toolbar .input:before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 0.5rem;
+          aspect-ratio: 1 / 1;
+          height: 0.75rem;
+          --tw-translate-y: -50%;
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          border-radius: 9999px;
+          border-width: 2px;
+          border-color: currentColor;
+          opacity: 0.6;
+        }
+  .mockup-browser .toolbar .input:after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 1.25rem;
+          height: 0.5rem;
+          --tw-translate-y: 25%;
+          --tw-rotate: -45deg;
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          border-radius: 9999px;
+          border-width: 1px;
+          border-color: currentColor;
+          opacity: 0.6;
+        }
 .modal {
   background-color: transparent;
   color: inherit;