@varlet/ui/es/alert/alert.css

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

:root { --alert-padding: 16px; --alert-border-radius: 4px; --alert-icon-size: 22px; --alert-icon-margin: 0 12px 0 0; --alert-close-icon-size: 22px; --alert-close-icon-margin: 2px 0 0 12px; --alert-standard-info-text-color: var(--color-on-info); --alert-standard-danger-text-color: var(--color-on-danger); --alert-standard-success-text-color: var(--color-on-success); --alert-standard-warning-text-color: var(--color-on-warning); --alert-danger-background: var(--color-danger); --alert-success-background: var(--color-success); --alert-warning-background: var(--color-warning); --alert-info-background: var(--color-info); --alert-tonal-danger-background: hsla(var(--hsl-danger), 0.12); --alert-tonal-success-background: hsla(var(--hsl-success), 0.12); --alert-tonal-warning-background: hsla(var(--hsl-warning), 0.12); --alert-tonal-info-background: hsla(var(--hsl-info), 0.12); --alert-tonal-danger-text-color: var(--color-danger); --alert-tonal-success-text-color: var(--color-success); --alert-tonal-warning-text-color: var(--color-warning); --alert-tonal-info-text-color: var(--color-info); --alert-message-font-size: 14px; --alert-title-font-size: 16px; --alert-title-font-weight: 500; --alert-message-margin-top: 4px; --alert-message-line-height: 1.5; --alert-title-line-height: 1.5;}.var-alert { display: flex; padding: var(--alert-padding); border-radius: var(--alert-border-radius);}.var-alert__icon { margin: var(--alert-icon-margin);}.var-alert__icon .var-icon { font-size: var(--alert-icon-size);}.var-alert__content { flex: 1;}.var-alert__title { font-size: var(--alert-title-font-size); font-weight: var(--alert-title-font-weight); line-height: var(--alert-title-line-height); word-break: normal; word-wrap: break-word;}.var-alert__title + .var-alert__message { margin-top: var(--alert-message-margin-top);}.var-alert__message { font-size: var(--alert-message-font-size); line-height: var(--alert-message-line-height);}.var-alert__close-icon { cursor: pointer; margin: var(--alert-close-icon-margin);}.var-alert__close-icon .var-icon[alert-cover] { font-size: var(--alert-close-icon-size);}.var-alert--outlined { border: thin solid currentColor; background-color: transparent;}.var-alert--outlined.var-alert--info { border-color: var(--alert-info-background); color: var(--alert-info-background);}.var-alert--outlined.var-alert--success { border-color: var(--alert-success-background); color: var(--alert-success-background);}.var-alert--outlined.var-alert--warning { border-color: var(--alert-warning-background); color: var(--alert-warning-background);}.var-alert--outlined.var-alert--danger { border-color: var(--alert-danger-background); color: var(--alert-danger-background);}.var-alert--tonal.var-alert--info { background-color: var(--alert-tonal-info-background); color: var(--alert-tonal-info-text-color);}.var-alert--tonal.var-alert--success { background-color: var(--alert-tonal-success-background); color: var(--alert-tonal-success-text-color);}.var-alert--tonal.var-alert--warning { background-color: var(--alert-tonal-warning-background); color: var(--alert-tonal-warning-text-color);}.var-alert--tonal.var-alert--danger { background-color: var(--alert-tonal-danger-background); color: var(--alert-tonal-danger-text-color);}.var-alert--standard.var-alert--info { background-color: var(--alert-info-background); color: var(--alert-standard-info-text-color);}.var-alert--standard.var-alert--success { background-color: var(--alert-success-background); color: var(--alert-standard-success-text-color);}.var-alert--standard.var-alert--warning { background-color: var(--alert-warning-background); color: var(--alert-standard-warning-text-color);}.var-alert--standard.var-alert--danger { background-color: var(--alert-danger-background); color: var(--alert-standard-danger-text-color);}