@aortl/admin-css 0.13.2 → 0.14.0

package/dist/admin.css

@@ -452,6 +452,10 @@
     --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,);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    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;
@@ -4011,6 +4015,220 @@
     word-wrap: normal;
   }
 }
+@layer components {
+  .chart {
+    --chart-max: 100;
+    --chart-height: 8rem;
+    --chart-size: 8rem;
+    --chart-gap: 0.25rem;
+    color: var(--color-primary);
+  }
+  .chart-success {
+    color: var(--color-success);
+  }
+  .chart-warning {
+    color: var(--color-warning);
+  }
+  .chart-danger {
+    color: var(--color-danger);
+  }
+  .chart-info {
+    color: var(--color-info);
+  }
+  .chart-bars {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    row-gap: var(--chart-gap);
+    align-items: center;
+    inline-size: 100%;
+  }
+  .chart-bar {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: center;
+  }
+  .chart-bar-label {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-text-muted);
+    grid-column: 1;
+    text-align: end;
+    padding-inline-end: 0.5rem;
+    white-space: nowrap;
+  }
+  .chart-bar-track {
+    grid-column: 2;
+    min-inline-size: 0;
+  }
+  .chart-bar-fill {
+    block-size: 0.75rem;
+    inline-size: calc(var(--value) / var(--chart-max) * 100%);
+    background: var(--bar-color, currentColor);
+    border-radius: 2px;
+    transition: inline-size 200ms ease, block-size 200ms ease;
+  }
+  .chart-bar-value {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-text-muted);
+    --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,);
+    grid-column: 3;
+    text-align: end;
+    padding-inline-start: 0.5rem;
+    white-space: nowrap;
+  }
+  .chart:not(.chart-values) .chart-bar-value {
+    display: none;
+  }
+  .chart-bars-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--chart-gap);
+    block-size: var(--chart-height);
+    inline-size: 100%;
+  }
+  .chart-bars-vertical .chart-bar {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-inline-size: 0;
+    align-items: stretch;
+    gap: 0.25rem;
+  }
+  .chart-bars-vertical .chart-bar-value {
+    order: 0;
+    grid-column: auto;
+    text-align: center;
+    padding: 0;
+  }
+  .chart-bars-vertical .chart-bar-track {
+    order: 1;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+  }
+  .chart-bars-vertical .chart-bar-fill {
+    inline-size: 100%;
+    block-size: calc(var(--value) / var(--chart-max) * 100%);
+  }
+  .chart-bars-vertical .chart-bar-label {
+    order: 2;
+    text-align: center;
+    padding: 0;
+  }
+  .chart-stack {
+    display: flex;
+    flex-direction: row;
+    inline-size: 100%;
+    block-size: 0.75rem;
+    border-radius: 9999px;
+    overflow: hidden;
+    background: var(--color-surface-strong);
+  }
+  .chart-segment {
+    flex: var(--value) 1 0;
+    min-inline-size: 0;
+    background: var(--segment-color, currentColor);
+    transition: flex-grow 200ms ease;
+  }
+  .chart-segment + .chart-segment {
+    box-shadow: -1px 0 0 0 var(--color-surface);
+  }
+  .chart-donut-figure {
+    position: relative;
+    inline-size: var(--chart-size);
+    aspect-ratio: 1;
+    display: inline-grid;
+    place-items: center;
+  }
+  .chart-donut {
+    --donut-thickness: 33%;
+    inline-size: var(--chart-size);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: conic-gradient(var(--donut-segments, currentColor 0 100%));
+    -webkit-mask: radial-gradient( circle at center, transparent calc(50% - var(--donut-thickness)), #000 calc(50% - var(--donut-thickness)) );
+    mask: radial-gradient( circle at center, transparent calc(50% - var(--donut-thickness)), #000 calc(50% - var(--donut-thickness)) );
+  }
+  .chart-donut-figure > .chart-donut {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+  }
+  .chart-donut-pie {
+    --donut-thickness: 50%;
+  }
+  .chart-donut-center {
+    text-align: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    --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,);
+    grid-area: 1 / 1;
+    z-index: 1;
+    pointer-events: none;
+  }
+  .chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: calc(var(--spacing) * 3);
+    row-gap: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-text-muted);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .chart-legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+  }
+  .chart-legend-item::before {
+    content: "";
+    inline-size: 0.625rem;
+    block-size: 0.625rem;
+    border-radius: 2px;
+    background: var(--legend-color, currentColor);
+    flex-shrink: 0;
+  }
+  .chart-sm {
+    --chart-height: 4rem;
+    --chart-size: 4rem;
+  }
+  .chart-lg {
+    --chart-height: 12rem;
+    --chart-size: 12rem;
+  }
+  .chart-inline {
+    display: inline-flex;
+    vertical-align: middle;
+    --chart-height: 1em;
+    --chart-size: 1.25em;
+  }
+  .chart-inline .chart-stack {
+    inline-size: 6em;
+    block-size: 0.5em;
+  }
+  .chart-inline .chart-bars, .chart-inline.chart-bars {
+    inline-size: 6em;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .chart-bar-fill, .chart-segment {
+      transition: none;
+    }
+  }
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -4051,28 +4269,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -4138,6 +4334,28 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -4170,11 +4388,6 @@
       --tw-numeric-figure: initial;
       --tw-numeric-spacing: initial;
       --tw-numeric-fraction: initial;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-border-style: solid;
-      --tw-outline-style: solid;
-      --tw-duration: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -4189,6 +4402,11 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-border-style: solid;
+      --tw-outline-style: solid;
+      --tw-duration: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;