flyonui/components/alert.css

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

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.alert{border-radius:var(--radius-box);width:100%;color:var(--color-neutral-content);text-align:start;background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--alert-bg);border:var(--border)solid var(--alert-border);box-shadow:0 .1875rem 0 -.125rem oklch(100% 0 0/calc(var(--depth)*.08))inset;--alert-bg:var(--alert-color,var(--color-neutral));--alert-border:var(--alert-color,var(--color-neutral));padding:1rem;position:relative;&.alert-outline{color:var(--alert-color,var(--color-neutral));--alert-bg:transparent;box-shadow:none;background-image:none}&.alert-soft{color:var(--alert-color,var(--color-neutral));--alert-bg:color-mix(in oklab,var(--alert-color,var(--color-neutral))10%,var(--color-base-100));box-shadow:none;background-image:none}}.alert-primary{color:var(--color-primary-content);--alert-color:var(--color-primary)}.alert-info{color:var(--color-info-content);--alert-color:var(--color-info)}.alert-success{color:var(--color-success-content);--alert-color:var(--color-success)}.alert-warning{color:var(--color-warning-content);--alert-color:var(--color-warning)}.alert-error{color:var(--color-error-content);--alert-color:var(--color-error)}@media (width>=640px){.sm\:alert{border-radius:var(--radius-box);width:100%;color:var(--color-neutral-content);text-align:start;background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--alert-bg);border:var(--border)solid var(--alert-border);box-shadow:0 .1875rem 0 -.125rem oklch(100% 0 0/calc(var(--depth)*.08))inset;--alert-bg:var(--alert-color,var(--color-neutral));--alert-border:var(--alert-color,var(--color-neutral));padding:1rem;position:relative;&.alert-outline{color:var(--alert-color,var(--color-neutral));--alert-bg:transparent;box-shadow:none;background-image:none}&.alert-soft{color:var(--alert-color,var(--color-neutral));--alert-bg:color-mix(in oklab,var(--alert-color,var(--color-neutral))10%,var(--color-base-100));box-shadow:none;background-image:none}}.sm\:alert-primary{color:var(--color-primary-content);--alert-color:var(--color-primary)}.sm\:alert-info{color:var(--color-info-content);--alert-color:var(--color-info)}.sm\:alert-success{color:var(--color-success-content);--alert-color:var(--color-success)}.sm\:alert-warning{color:var(--color-warning-content);--alert-color:var(--color-warning)}.sm\:alert-error{color:var(--color-error-content);--alert-color:var(--color-error)}}@media (width>=768px){.md\:alert{border-radius:var(--radius-box);width:100%;color:var(--color-neutral-content);text-align:start;background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--alert-bg);border:var(--border)solid var(--alert-border);box-shadow:0 .1875rem 0 -.125rem oklch(100% 0 0/calc(var(--depth)*.08))inset;--alert-bg:var(--alert-color,var(--color-neutral));--alert-border:var(--alert-color,var(--color-neutral));padding:1rem;position:relative;&.alert-outline{color:var(--alert-color,var(--color-neutral));--alert-bg:transparent;box-shadow:none;background-image:none}&.alert-soft{color:var(--alert-color,var(--color-neutral));--alert-bg:color-mix(in oklab,var(--alert-color,var(--color-neutral))10%,var(--color-base-100));box-shadow:none;background-image:none}}.md\:alert-primary{color:var(--color-primary-content);--alert-color:var(--color-primary)}.md\:alert-info{color:var(--color-info-content);--alert-color:var(--color-info)}.md\:alert-success{color:var(--color-success-content);--alert-color:var(--color-success)}.md\:alert-warning{color:var(--color-warning-content);--alert-color:var(--color-warning)}.md\:alert-error{color:var(--color-error-content);--alert-color:var(--color-error)}}@media (width>=1024px){.lg\:alert{border-radius:var(--radius-box);width:100%;color:var(--color-neutral-content);text-align:start;background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--alert-bg);border:var(--border)solid var(--alert-border);box-shadow:0 .1875rem 0 -.125rem oklch(100% 0 0/calc(var(--depth)*.08))inset;--alert-bg:var(--alert-color,var(--color-neutral));--alert-border:var(--alert-color,var(--color-neutral));padding:1rem;position:relative;&.alert-outline{color:var(--alert-color,var(--color-neutral));--alert-bg:transparent;box-shadow:none;background-image:none}&.alert-soft{color:var(--alert-color,var(--color-neutral));--alert-bg:color-mix(in oklab,var(--alert-color,var(--color-neutral))10%,var(--color-base-100));box-shadow:none;background-image:none}}.lg\:alert-primary{color:var(--color-primary-content);--alert-color:var(--color-primary)}.lg\:alert-info{color:var(--color-info-content);--alert-color:var(--color-info)}.lg\:alert-success{color:var(--color-success-content);--alert-color:var(--color-success)}.lg\:alert-warning{color:var(--color-warning-content);--alert-color:var(--color-warning)}.lg\:alert-error{color:var(--color-error-content);--alert-color:var(--color-error)}}@media (width>=1280px){.xl\:alert{border-radius:var(--radius-box);width:100%;color:var(--color-neutral-content);text-align:start;background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--alert-bg);border:var(--border)solid var(--alert-border);box-shadow:0 .1875rem 0 -.125rem oklch(100% 0 0/calc(var(--depth)*.08))inset;--alert-bg:var(--alert-color,var(--color-neutral));--alert-border:var(--alert-color,var(--color-neutral));padding:1rem;position:relative;&.alert-outline{color:var(--alert-color,var(--color-neutral));--alert-bg:transparent;box-shadow:none;background-image:none}&.alert-soft{color:var(--alert-color,var(--color-neutral));--alert-bg:color-mix(in oklab,var(--alert-color,var(--color-neutral))10%,var(--color-base-100));box-shadow:none;background-image:none}}.xl\:alert-primary{color:var(--color-primary-content);--alert-color:var(--color-primary)}.xl\:alert-info{color:var(--color-info-content);--alert-color:var(--color-info)}.xl\:alert-success{color:var(--color-success-content);--alert-color:var(--color-success)}.xl\:alert-warning{color:var(--color-warning-content);--alert-color:var(--color-warning)}.xl\:alert-error{color:var(--color-error-content);--alert-color:var(--color-error)}}@media (width>=1536px){.\32 xl\:alert{border-radius:var(--radius-box);width:100%;color:var(--color-neutral-content);text-align:start;background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--alert-bg);border:var(--border)solid var(--alert-border);box-shadow:0 .1875rem 0 -.125rem oklch(100% 0 0/calc(var(--depth)*.08))inset;--alert-bg:var(--alert-color,var(--color-neutral));--alert-border:var(--alert-color,var(--color-neutral));padding:1rem;position:relative;&.alert-outline{color:var(--alert-color,var(--color-neutral));--alert-bg:transparent;box-shadow:none;background-image:none}&.alert-soft{color:var(--alert-color,var(--color-neutral));--alert-bg:color-mix(in oklab,var(--alert-color,var(--color-neutral))10%,var(--color-base-100));box-shadow:none;background-image:none}}.\32 xl\:alert-primary{color:var(--color-primary-content);--alert-color:var(--color-primary)}.\32 xl\:alert-info{color:var(--color-info-content);--alert-color:var(--color-info)}.\32 xl\:alert-success{color:var(--color-success-content);--alert-color:var(--color-success)}.\32 xl\:alert-warning{color:var(--color-warning-content);--alert-color:var(--color-warning)}.\32 xl\:alert-error{color:var(--color-error-content);--alert-color:var(--color-error)}}}