t-fighting-design/theme/alert.css

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

.f-alert{padding:10px 22px;position:relative;box-sizing:border-box;border-radius:2px;display:flex;justify-content:space-between;align-items:center}.f-alert.f-alert__default{background:var(--f-alert-background, #f0f0f0);color:var(--f-alert-color, #333)}.f-alert.f-alert__simple.f-alert__default{background:#f8f8f8;color:var(--f-alert-color, #333)}.f-alert.f-alert__primary{background:var(--f-alert-background, #2d5af1);color:var(--f-alert-color, #fff)}.f-alert.f-alert__simple.f-alert__primary{background:#dee5fd;color:var(--f-alert-color, #2d5af1)}.f-alert.f-alert__success{background:var(--f-alert-background, #52b35e);color:var(--f-alert-color, #fff)}.f-alert.f-alert__simple.f-alert__success{background:#e7f4e8;color:var(--f-alert-color, #52b35e)}.f-alert.f-alert__danger{background:var(--f-alert-background, #ff0200);color:var(--f-alert-color, #fff)}.f-alert.f-alert__simple.f-alert__danger{background:#ffd7d6;color:var(--f-alert-color, #ff0200)}.f-alert.f-alert__warning{background:var(--f-alert-background, #fcc202);color:var(--f-alert-color, #fff)}.f-alert.f-alert__simple.f-alert__warning{background:#fff5d6;color:var(--f-alert-color, #fcc202)}.f-alert__content{display:flex;justify-content:flex-start;flex-direction:column;flex:1}.f-alert__content .f-alert__title{font-size:var(--f-alert-title-size, 17px);color:var(--f-alert-title-color);font-weight:700}.f-alert__content .f-alert__sub-title{display:block;font-size:var(--f-alert-font-size, 15px)}.f-alert__content.f-alert__content-hidden{overflow:hidden;white-space:nowrap}.f-alert.f-alert__bold{font-weight:700}.f-alert.f-alert__center{text-align:center}.f-alert.f-alert__round{border-radius:20px}.f-alert.f-alert__fixed{width:100%;position:fixed}