flyonui/components/stat.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.2.0 - MIT License */ @layer utilities{.stats{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);grid-auto-flow:column;display:inline-grid;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}&:where(.stats-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}}.stat{border-color:inherit;grid-template-columns:repeat(1,1fr);gap:.25rem 1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;& .stat-figure{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}& .stat-title{white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)80%,transparent);grid-column-start:1}& .stat-value{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);white-space:nowrap;color:var(--color-base-content);grid-column-start:1}& .stat-desc{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)50%,transparent);grid-column-start:1}& .stat-actions{white-space:nowrap;grid-column-start:1;margin-top:.75rem}}.stats-horizontal{grid-auto-flow:column;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}}.stats-vertical{grid-auto-flow:row;overflow-y:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(0px*var(--tw-divide-x-reverse));border-inline-end-width:calc(0px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}}@media (width>=640px){.sm\:stats{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);grid-auto-flow:column;display:inline-grid;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}&:where(.stats-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}}.sm\:stat{border-color:inherit;grid-template-columns:repeat(1,1fr);gap:.25rem 1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;& .stat-figure{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}& .stat-title{white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)80%,transparent);grid-column-start:1}& .stat-value{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);white-space:nowrap;color:var(--color-base-content);grid-column-start:1}& .stat-desc{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)50%,transparent);grid-column-start:1}& .stat-actions{white-space:nowrap;grid-column-start:1;margin-top:.75rem}}.sm\:stats-horizontal{grid-auto-flow:column;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}}.sm\:stats-vertical{grid-auto-flow:row;overflow-y:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(0px*var(--tw-divide-x-reverse));border-inline-end-width:calc(0px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}}}@media (width>=768px){.md\:stats{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);grid-auto-flow:column;display:inline-grid;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}&:where(.stats-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}}.md\:stat{border-color:inherit;grid-template-columns:repeat(1,1fr);gap:.25rem 1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;& .stat-figure{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}& .stat-title{white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)80%,transparent);grid-column-start:1}& .stat-value{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);white-space:nowrap;color:var(--color-base-content);grid-column-start:1}& .stat-desc{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)50%,transparent);grid-column-start:1}& .stat-actions{white-space:nowrap;grid-column-start:1;margin-top:.75rem}}.md\:stats-horizontal{grid-auto-flow:column;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}}.md\:stats-vertical{grid-auto-flow:row;overflow-y:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(0px*var(--tw-divide-x-reverse));border-inline-end-width:calc(0px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}}}@media (width>=1024px){.lg\:stats{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);grid-auto-flow:column;display:inline-grid;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}&:where(.stats-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}}.lg\:stat{border-color:inherit;grid-template-columns:repeat(1,1fr);gap:.25rem 1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;& .stat-figure{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}& .stat-title{white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)80%,transparent);grid-column-start:1}& .stat-value{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);white-space:nowrap;color:var(--color-base-content);grid-column-start:1}& .stat-desc{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)50%,transparent);grid-column-start:1}& .stat-actions{white-space:nowrap;grid-column-start:1;margin-top:.75rem}}.lg\:stats-horizontal{grid-auto-flow:column;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}}.lg\:stats-vertical{grid-auto-flow:row;overflow-y:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(0px*var(--tw-divide-x-reverse));border-inline-end-width:calc(0px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}}}@media (width>=1280px){.xl\:stats{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);grid-auto-flow:column;display:inline-grid;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}&:where(.stats-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}}.xl\:stat{border-color:inherit;grid-template-columns:repeat(1,1fr);gap:.25rem 1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;& .stat-figure{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}& .stat-title{white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)80%,transparent);grid-column-start:1}& .stat-value{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);white-space:nowrap;color:var(--color-base-content);grid-column-start:1}& .stat-desc{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)50%,transparent);grid-column-start:1}& .stat-actions{white-space:nowrap;grid-column-start:1;margin-top:.75rem}}.xl\:stats-horizontal{grid-auto-flow:column;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}}.xl\:stats-vertical{grid-auto-flow:row;overflow-y:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(0px*var(--tw-divide-x-reverse));border-inline-end-width:calc(0px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}}}@media (width>=1536px){.\32 xl\:stats{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);grid-auto-flow:column;display:inline-grid;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}&:where(.stats-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}}.\32 xl\:stat{border-color:inherit;grid-template-columns:repeat(1,1fr);gap:.25rem 1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;& .stat-figure{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}& .stat-title{white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)80%,transparent);grid-column-start:1}& .stat-value{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);white-space:nowrap;color:var(--color-base-content);grid-column-start:1}& .stat-desc{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));white-space:nowrap;color:color-mix(in oklab,var(--color-base-content)50%,transparent);grid-column-start:1}& .stat-actions{white-space:nowrap;grid-column-start:1;margin-top:.75rem}}.\32 xl\:stats-horizontal{grid-auto-flow:column;overflow-x:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px*var(--tw-divide-y-reverse));border-bottom-width:calc(0px*calc(1 - var(--tw-divide-y-reverse)))}}.\32 xl\:stats-vertical{grid-auto-flow:row;overflow-y:auto;:where(&>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(0px*var(--tw-divide-x-reverse));border-inline-end-width:calc(0px*calc(1 - var(--tw-divide-x-reverse)));--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}}}}