@aortl/admin-css 0.2.0 → 0.4.0

package/README.md

@@ -2,6 +2,8 @@
 
 Pre-built CSS for the admin design system. No Tailwind setup required to consume.
 
+[View on npm](https://www.npmjs.com/package/@aortl/admin-css) · [Docs](https://digital-udvikling.github.io/admin-design-system/)
+
 ## Install
 
 ```fish

package/dist/admin.css

@@ -7,6 +7,7 @@
     --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
     monospace;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -354,10 +355,77 @@
   }
 }
 @layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .block {
+    display: block;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .table {
+    display: table;
+  }
+  .table-cell {
+    display: table-cell;
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
 }
 @font-face {
   font-family: "IBM Plex Sans";
@@ -3218,6 +3286,122 @@
     outline-color: var(--color-primary);
   }
 }
+@layer components {
+  .tooltip {
+    pointer-events: none;
+    display: inline-block;
+    max-width: var(--container-xs);
+    border-radius: var(--radius-md);
+    background-color: var(--color-text);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-surface);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    text-wrap: balance;
+  }
+  .tooltip-sm {
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .tooltip {
+    transition: opacity 150ms ease-out, transform 150ms ease-out;
+  }
+  .tooltip[data-starting-style], .tooltip[data-ending-style] {
+    opacity: 0;
+  }
+  .tooltip[data-side="top"][data-starting-style], .tooltip[data-side="top"][data-ending-style] {
+    transform: translateY(0.25rem);
+  }
+  .tooltip[data-side="bottom"][data-starting-style], .tooltip[data-side="bottom"][data-ending-style] {
+    transform: translateY(-0.25rem);
+  }
+  .tooltip[data-side="left"][data-starting-style], .tooltip[data-side="left"][data-ending-style] {
+    transform: translateX(0.25rem);
+  }
+  .tooltip[data-side="right"][data-starting-style], .tooltip[data-side="right"][data-ending-style] {
+    transform: translateX(-0.25rem);
+  }
+  .tooltip-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  .tooltip-wrap > .tooltip {
+    visibility: hidden;
+    position: absolute;
+    opacity: 0%;
+    left: 50%;
+    bottom: 100%;
+    margin-bottom: calc(var(--spacing) * 1.5);
+    transform: translateX(-50%);
+    transition: opacity 150ms ease-out 0ms, visibility 0s linear 150ms;
+  }
+  .tooltip-wrap-bottom > .tooltip {
+    top: 100%;
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    margin-top: calc(var(--spacing) * 1.5);
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    transform: translateX(-50%);
+  }
+  .tooltip-wrap-left > .tooltip {
+    top: 50%;
+    right: 100%;
+    bottom: auto;
+    left: auto;
+    margin-top: 0;
+    margin-right: calc(var(--spacing) * 1.5);
+    margin-bottom: 0;
+    margin-left: 0;
+    transform: translateY(-50%);
+  }
+  .tooltip-wrap-right > .tooltip {
+    top: 50%;
+    right: auto;
+    bottom: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: calc(var(--spacing) * 1.5);
+    transform: translateY(-50%);
+  }
+  .tooltip-wrap:hover > .tooltip, .tooltip-wrap:focus-within > .tooltip {
+    visibility: visible;
+    opacity: 100%;
+    transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
+  }
+}
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -3324,29 +3508,14 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-ordinal {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-slashed-zero {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-numeric-figure {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-numeric-spacing {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-numeric-fraction {
-  syntax: "*";
-  inherits: false;
-}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -3370,11 +3539,6 @@
       --tw-translate-y: 0;
       --tw-translate-z: 0;
       --tw-tracking: initial;
-      --tw-ordinal: initial;
-      --tw-slashed-zero: initial;
-      --tw-numeric-figure: initial;
-      --tw-numeric-spacing: initial;
-      --tw-numeric-fraction: initial;
     }
   }
 }