daisyui/components/stat.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.stats{@layer daisyui.l1.l2.l3{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}}.stat{@layer daisyui.l1.l2.l3{grid-template-columns:repeat(1,1fr);column-gap:1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;&:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.stat-figure{@layer daisyui.l1.l2.l3{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}}.stat-title{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.stat-value{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1;font-size:2rem;font-weight:800}}.stat-desc{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.stat-actions{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1}}.stats-horizontal{@layer daisyui.l1.l2{grid-auto-flow:column;overflow-x:auto;& .stat:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.stats-vertical{@layer daisyui.l1.l2{grid-auto-flow:row;overflow-y:auto;& .stat:not(:last-child){border-inline-end:none;border-block-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)}}}@media (width>=640px){.sm\:stats{@layer daisyui.l1.l2.l3{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}}.sm\:stat{@layer daisyui.l1.l2.l3{grid-template-columns:repeat(1,1fr);column-gap:1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;&:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.sm\:stat-figure{@layer daisyui.l1.l2.l3{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}}.sm\:stat-title{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.sm\:stat-value{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1;font-size:2rem;font-weight:800}}.sm\:stat-desc{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.sm\:stat-actions{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1}}.sm\:stats-horizontal{@layer daisyui.l1.l2{grid-auto-flow:column;overflow-x:auto;& .stat:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.sm\:stats-vertical{@layer daisyui.l1.l2{grid-auto-flow:row;overflow-y:auto;& .stat:not(:last-child){border-inline-end:none;border-block-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)}}}}@media (width>=768px){.md\:stats{@layer daisyui.l1.l2.l3{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}}.md\:stat{@layer daisyui.l1.l2.l3{grid-template-columns:repeat(1,1fr);column-gap:1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;&:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.md\:stat-figure{@layer daisyui.l1.l2.l3{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}}.md\:stat-title{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.md\:stat-value{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1;font-size:2rem;font-weight:800}}.md\:stat-desc{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.md\:stat-actions{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1}}.md\:stats-horizontal{@layer daisyui.l1.l2{grid-auto-flow:column;overflow-x:auto;& .stat:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.md\:stats-vertical{@layer daisyui.l1.l2{grid-auto-flow:row;overflow-y:auto;& .stat:not(:last-child){border-inline-end:none;border-block-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)}}}}@media (width>=1024px){.lg\:stats{@layer daisyui.l1.l2.l3{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}}.lg\:stat{@layer daisyui.l1.l2.l3{grid-template-columns:repeat(1,1fr);column-gap:1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;&:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.lg\:stat-figure{@layer daisyui.l1.l2.l3{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}}.lg\:stat-title{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.lg\:stat-value{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1;font-size:2rem;font-weight:800}}.lg\:stat-desc{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.lg\:stat-actions{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1}}.lg\:stats-horizontal{@layer daisyui.l1.l2{grid-auto-flow:column;overflow-x:auto;& .stat:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.lg\:stats-vertical{@layer daisyui.l1.l2{grid-auto-flow:row;overflow-y:auto;& .stat:not(:last-child){border-inline-end:none;border-block-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)}}}}@media (width>=1280px){.xl\:stats{@layer daisyui.l1.l2.l3{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}}.xl\:stat{@layer daisyui.l1.l2.l3{grid-template-columns:repeat(1,1fr);column-gap:1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;&:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.xl\:stat-figure{@layer daisyui.l1.l2.l3{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}}.xl\:stat-title{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.xl\:stat-value{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1;font-size:2rem;font-weight:800}}.xl\:stat-desc{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.xl\:stat-actions{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1}}.xl\:stats-horizontal{@layer daisyui.l1.l2{grid-auto-flow:column;overflow-x:auto;& .stat:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.xl\:stats-vertical{@layer daisyui.l1.l2{grid-auto-flow:row;overflow-y:auto;& .stat:not(:last-child){border-inline-end:none;border-block-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)}}}}@media (width>=1536px){.\32 xl\:stats{@layer daisyui.l1.l2.l3{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}}.\32 xl\:stat{@layer daisyui.l1.l2.l3{grid-template-columns:repeat(1,1fr);column-gap:1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid;&:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.\32 xl\:stat-figure{@layer daisyui.l1.l2.l3{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}}.\32 xl\:stat-title{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.\32 xl\:stat-value{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1;font-size:2rem;font-weight:800}}.\32 xl\:stat-desc{@layer daisyui.l1.l2.l3{white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);grid-column-start:1;font-size:.75rem}}.\32 xl\:stat-actions{@layer daisyui.l1.l2.l3{white-space:nowrap;grid-column-start:1}}.\32 xl\:stats-horizontal{@layer daisyui.l1.l2{grid-auto-flow:column;overflow-x:auto;& .stat:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);border-block-end:none}}}.\32 xl\:stats-vertical{@layer daisyui.l1.l2{grid-auto-flow:row;overflow-y:auto;& .stat:not(:last-child){border-inline-end:none;border-block-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)}}}}}