@yomologic/react-ui 0.2.6 → 0.2.7

package/dist/styles.css

@@ -75,7 +75,7 @@
     --container-md: 28rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
-    --container-5xl: 64rem;
+    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -301,6 +301,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .absolute {
     position: absolute;
   }
@@ -337,9 +340,6 @@
   .top-12 {
     top: calc(var(--spacing) * 12);
   }
-  .top-\[var\(--nav-height\)\] {
-    top: var(--nav-height);
-  }
   .top-full {
     top: 100%;
   }
@@ -349,12 +349,30 @@
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
   .left-full {
     left: 100%;
   }
+  .\[z-index\:var\(--z-index-drawer-button\)\] {
+    z-index: var(--z-index-drawer-button);
+  }
+  .\[z-index\:var\(--z-index-drawer-header\)\] {
+    z-index: var(--z-index-drawer-header);
+  }
+  .\[z-index\:var\(--z-index-nav\)\] {
+    z-index: var(--z-index-nav);
+  }
+  .\[z-index\:var\(--z-index-nav-mobile-menu\)\] {
+    z-index: var(--z-index-nav-mobile-menu);
+  }
+  .\[z-index\:var\(--z-index-nav-mobile-overlay\)\] {
+    z-index: var(--z-index-nav-mobile-overlay);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -403,9 +421,6 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -484,9 +499,6 @@
   .flex {
     display: flex;
   }
-  .grid {
-    display: grid;
-  }
   .hidden {
     display: none;
   }
@@ -595,8 +607,8 @@
   .max-h-\[400px\] {
     max-height: 400px;
   }
-  .max-h-\[calc\(100vh-var\(--nav-height\)\)\] {
-    max-height: calc(100vh - var(--nav-height));
+  .max-h-screen {
+    max-height: 100vh;
   }
   .\[min-height\:var\(--nav-height\)\] {
     min-height: var(--nav-height);
@@ -694,8 +706,8 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
-  .max-w-5xl {
-    max-width: var(--container-5xl);
+  .max-w-7xl {
+    max-width: var(--container-7xl);
   }
   .max-w-full {
     max-width: 100%;
@@ -721,9 +733,6 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
-  .min-w-0 {
-    min-width: calc(var(--spacing) * 0);
-  }
   .min-w-\[200px\] {
     min-width: 200px;
   }
@@ -748,6 +757,14 @@
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .rotate-45 {
     rotate: 45deg;
   }
@@ -769,9 +786,6 @@
   .appearance-none {
     appearance: none;
   }
-  .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -817,9 +831,6 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
   .space-y-0 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1189,6 +1200,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2091,11 +2105,6 @@
       max-width: var(--container-md);
     }
   }
-  .sm\:grid-cols-2 {
-    @media (width >= 40rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
   .sm\:flex-row {
     @media (width >= 40rem) {
       flex-direction: row;
@@ -2127,19 +2136,9 @@
       display: none;
     }
   }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .md\:p-8 {
-    @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 8);
-    }
-  }
-  .lg\:mr-64 {
+  .lg\:top-0 {
     @media (width >= 64rem) {
-      margin-right: calc(var(--spacing) * 64);
+      top: calc(var(--spacing) * 0);
     }
   }
   .lg\:block {
@@ -2163,16 +2162,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .lg\:grid-cols-2 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .lg\:grid-cols-3 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);
@@ -2183,6 +2172,11 @@
       padding-top: calc(var(--spacing) * 0);
     }
   }
+  .lg\:pr-72 {
+    @media (width >= 64rem) {
+      padding-right: calc(var(--spacing) * 72);
+    }
+  }
 }
 :root {
   --color-primary: #3b82f6;
@@ -2253,6 +2247,39 @@
   --container-max-width-lg: 1024px;
   --container-max-width-xl: 1280px;
   --container-max-width-2xl: 1536px;
+  --z-index-dropdown: 1000;
+  --z-index-popover: 1100;
+  --z-index-tooltip: 1500;
+  --z-index-overlay: 1200;
+  --z-index-nav: 50;
+  --z-index-nav-mobile-overlay: 60;
+  --z-index-nav-mobile-menu: 70;
+  --z-index-drawer-header: 100;
+  --z-index-drawer-button: 101;
+  --z-index-drawer-overlay: 90;
+  --z-index-drawer-panel: 95;
+  --z-index-modal-backdrop: 1300;
+  --z-index-modal: 1400;
+  --z-index-snackbar: 1600;
+  --z-index-toast: 1700;
+  --nav-height: 4rem;
+  --nav-gap: 0.5rem;
+  --nav-border-radius: 0.5rem;
+  --nav-item-padding-xs-x: 0.5rem;
+  --nav-item-padding-xs-y: 0.25rem;
+  --nav-item-padding-sm-x: 0.75rem;
+  --nav-item-padding-sm-y: 0.5rem;
+  --nav-item-padding-md-x: 1rem;
+  --nav-item-padding-md-y: 0.625rem;
+  --nav-item-padding-lg-x: 1.5rem;
+  --nav-item-padding-lg-y: 0.75rem;
+  --nav-item-padding-xl-x: 2rem;
+  --nav-item-padding-xl-y: 1rem;
+  --nav-font-size-xs: 0.75rem;
+  --nav-font-size-sm: 0.875rem;
+  --nav-font-size-md: 1rem;
+  --nav-font-size-lg: 1.125rem;
+  --nav-font-size-xl: 1.25rem;
 }
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }