vue-devui/alert/style.css

DevUI components based on Vite and Vue3

.devui-alert{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px);border:1px solid transparent;padding:8px 16px;line-height:24px;border-radius:var(--devui-border-radius, 2px);display:flex;align-items:center;position:relative;width:100%;overflow:hidden}.devui-alert.devui-alert--center{justify-content:center}.devui-alert .devui-alert__content{padding:0 16px 0 4px;word-break:normal;word-wrap:break-word}.devui-alert .devui-alert__close-icon{color:var(--devui-text, #252b3a);opacity:1;line-height:26px;height:24px;position:absolute;right:16px;top:8px}.devui-alert .devui-alert__close-icon>svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__close-icon span{color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px);font-weight:700}.devui-alert.devui-alert--success{background-color:var(--devui-success-bg, #cffcee);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--success .devui-alert__close-icon>svg path{fill:var(--devui-success-line, #50d4ab)}.devui-alert.devui-alert--info{background-color:var(--devui-info-bg, #e9edfa);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--info .devui-alert__close-icon>svg path{fill:var(--devui-info-line, #5e7ce0)}.devui-alert.devui-alert--warning{background-color:var(--devui-warning-bg, #ffe1c7);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--warning .devui-alert__close-icon>svg path{fill:var(--devui-warning-line, #fa9841)}.devui-alert.devui-alert--danger{background-color:var(--devui-danger-bg, #ffd5d4);color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--danger .devui-alert__close-icon>svg path{fill:var(--devui-danger-line, #f66f6a)}.devui-alert.devui-alert--simple{color:var(--devui-text, #252b3a)}.devui-alert.devui-alert--simple .devui-alert__close-icon>svg path{fill:var(--devui-text-weak, #575d6c)}.devui-alert svg.devui-alert__icon{width:16px;height:16px;vertical-align:middle;transform:translateY(-1px)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g path{fill:var(--devui-success-line, #50d4ab)}.devui-alert .devui-alert__icon.devui-alert__icon--success>g polygon{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-outer{fill:var(--devui-warning-line, #fa9841)}.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-outer{fill:var(--devui-info-line, #5e7ce0)}.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-outer{fill:var(--devui-danger-line, #f66f6a)}.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert__icon-wrap{margin-right:4px}.devui-alert--close{margin:0;padding-top:0;padding-bottom:0;transform-origin:50% 0;transition:all .3s ease-in-out}.devui-alert-leave-active{animation:alertUpOut .3s ease-in-out;animation-fill-mode:both}@keyframes alertUpOut{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(0);transform-origin:0% 0%;opacity:0}}