@vuesax-alpha/nightly/theme-chalk/vs-alert.css

A Component Library for Vue 3

.vs-alert{--vs-alert-bg-light:rgba(var(--vs-color), 0.1);--vs-alert-border-radius:4px 12px 12px 4px;--vs-alert-shadow--icon-close:0px 0px 0px 0px rgba(0, 0, 0, 0.15);--vs-alert-shadow--icon-close-hover:0px 5px 18px 0px rgba(0, 0, 0, 0.15);--vs-alert-icon-close-width:30px;--vs-alert-icon-close-height:30px;--vs-alert-font-size:0.9rem;--vs-alert-alert-with-border-height:calc(100% - 2px);--vs-alert-alert-with-border-width:calc(100% - 2px);--vs-alert-content-text-padding:20px 15px;background:var(--vs-alert-bg-light);color:rgba(var(--vs-color),1);width:100%;padding:0 20px;border-radius:var(--vs-alert-border-radius);position:relative;font-size:var(--vs-alert-font-size);z-index:10;transition:var(--vs-transition-ease);overflow:hidden}.vs-alert::-moz-selection{background:rgba(var(--vs-color),.15)}.vs-alert::selection{background:rgba(var(--vs-color),.15)}.vs-alert ::-moz-selection{background:rgba(var(--vs-color),.15)}.vs-alert ::selection{background:rgba(var(--vs-color),.15)}.vs-alert b{font-weight:600}.vs-alert a{color:inherit!important;text-decoration:underline}.vs-alert a:hover{opacity:.6}.vs-alert::after{content:"";background:rgba(var(--vs-color),1);left:0;top:0;width:2px;height:100%;position:absolute}.vs-alert--solid{background:rgba(var(--vs-color),1);color:#fff}.vs-alert--solid .vs-alert__icon i{color:#fff}.vs-alert--solid .vs-alert__icon svg{fill:#fff}.vs-alert--solid .vs-alert__close{color:#fff;box-shadow:var(--vs-alert-shadow--icon-close)}.vs-alert--solid .vs-alert__close:hover{transform:translate(0,-2px);box-shadow:var(--vs-alert-shadow--icon-close-hover)}.vs-alert--solid .vs-alert__close svg{fill:#fff}.vs-alert--solid::after{background:rgba(255,255,255,.4)}.vs-alert--border{background:0 0}.vs-alert--border::before{border:1px solid rgba(var(--vs-color),1);border-left:0;width:var(--vs-alert-alert-with-border-width);content:"";position:absolute;height:var(--vs-alert-alert-with-border-height);top:0;left:0;z-index:-1;border-radius:inherit}.vs-alert--shadow{background:0 0;box-shadow:0 4px 15px 0 rgba(var(--vs-color),.12)}.vs-alert--gradient{background:rgba(var(--vs-color),1);color:#fff;border-radius:12px}.vs-alert--gradient .vs-alert__icon i{color:#fff}.vs-alert--gradient .vs-alert__icon svg{fill:#fff}.vs-alert--gradient .vs-alert__close{color:#fff;box-shadow:var(--vs-alert-shadow--icon-close)}.vs-alert--gradient .vs-alert__close:hover{transform:translate(0,-2px);box-shadow:var(--vs-alert-shadow--icon-close-hover)}.vs-alert--gradient .vs-alert__close svg{fill:#fff}.vs-alert--gradient::after{display:none}.vs-alert--gradient::before{background:linear-gradient(30deg,rgba(var(--vs-color),0) 33%,rgba(var(--vs-color),1) 100%);filter:hue-rotate(-50deg);width:100%;content:"";position:absolute;height:100%;top:0;left:0;z-index:-1;border-radius:inherit}.vs-alert--flat{background:rgba(0,0,0,.03)}.vs-alert--relief{background:rgba(var(--vs-color),1);color:#fff;border-radius:12px;margin-bottom:7px;box-shadow:6px 6px 0 0 rgba(var(--vs-color),.3)}.vs-alert--relief .vs-alert__icon i{color:#fff}.vs-alert--relief .vs-alert__icon svg{fill:#fff}.vs-alert--relief .vs-alert__close{color:#fff;box-shadow:var(--vs-alert-shadow--icon-close)}.vs-alert--relief .vs-alert__close:hover{transform:translate(0,-2px);background:rgba(0,0,0,.2);box-shadow:var(--vs-alert-shadow--icon-close-hover)}.vs-alert--relief .vs-alert__close svg{fill:#fff}.vs-alert--relief::after{display:none}.vs-alert__title{font-weight:600;font-size:1rem;padding:15px;display:flex;justify-content:space-between;align-items:center}.vs-alert__title--click__hidden{cursor:pointer;padding-right:0}.vs-alert__title~.vs-alert__content .vs-alert__content__text{padding-top:0}.vs-alert__content{transition:var(--vs-transition-ease);overflow:hidden}.vs-alert__content--text{padding:var(--vs-alert-content-text-padding)}.vs-alert__close{position:absolute;top:15px;right:20px;background:0 0;border:0;color:rgba(var(--vs-color),1);width:var(--vs-alert-icon-close-width);height:var(--vs-alert-icon-close-height);display:flex;justify-content:center;align-items:center;transition:var(--vs-transition-ease);box-shadow:0 0 0 0 rgba(var(--vs-color),.3);border-radius:10px;padding:0}.vs-alert__close:hover{transform:translate(0,-2px);box-shadow:0 5px 18px 0 rgba(var(--vs-color),.3)}.vs-alert__close:active{transform:translate(0,-1px)}.vs-alert__close svg{fill:rgba(var(--vs-color),1)}.vs-alert__footer{display:flex;justify-content:flex-end;align-items:center;position:relative;width:100%;padding:10px 15px;padding-top:0}.vs-alert__icon{position:absolute;left:0;top:0;display:flex;justify-content:center;align-items:center;width:50px;height:100%;padding-left:2px}.vs-alert__icon i{font-size:1.3rem;color:rgba(var(--vs-color),1)}.vs-alert__icon svg{width:24px;height:24px;fill:rgba(var(--vs-color),1)}.vs-alert__icon~.vs-alert__footer{padding-left:35px}.vs-alert__icon~.vs-alert__content{padding-left:20px}.vs-alert__icon~.vs-alert__title{padding-left:35px}.vs-alert__progress{width:100%;position:absolute;bottom:0;left:0;height:2px;background:rgba(var(--vs-color),.2)}.vs-alert__progress--bar{left:0;position:relative;height:100%;background:rgba(var(--vs-color),1);transition:var(--vs-transition-ease)}.vs-alert__pagination{position:relative;padding:0 20px;display:flex;justify-content:flex-start;align-items:center;margin-bottom:10px}.vs-alert__pagination span{font-size:.8rem;margin:0 8px;min-width:28px;text-align:center}.vs-alert__pagination button{border:0;background:0 0;color:rgba(var(--vs-color),1);padding:0 7px;font-size:1rem;background:var(--vs-alert-bg-light);border-radius:8px;transition:var(--vs-transition-ease)}.vs-alert__pagination button:hover{background:rgba(var(--vs-color),1);color:#fff}