UNPKG

@primer/css

Version:

The CSS implementation of GitHub's Primer Design System

3 lines (2 loc) 2.6 kB
.Toast{display:flex;margin:8px;color:var(--color-toast-text);background-color:var(--color-toast-bg);border-radius:6px;box-shadow:inset 0 0 0 1px var(--color-toast-border),var(--color-toast-shadow)}@media (min-width: 544px){.Toast{width:max-content;max-width:450px;margin:16px}}.Toast-icon{display:flex;align-items:center;justify-content:center;width:48px;flex-shrink:0;color:var(--color-toast-icon);background-color:var(--color-toast-icon-bg);border:1px solid var(--color-toast-icon-border);border-right:0;border-top-left-radius:inherit;border-bottom-left-radius:inherit}.Toast-content{padding:16px}.Toast-dismissButton{max-height:54px;padding:16px;color:inherit;background-color:transparent;border:0}.Toast-dismissButton:focus,.Toast-dismissButton:hover{outline:none;opacity:0.7}.Toast-dismissButton:active{opacity:0.5}.Toast--loading{color:var(--color-toast-loading-text);box-shadow:inset 0 0 0 1px var(--color-toast-loading-border),var(--color-toast-shadow)}.Toast--loading .Toast-icon{color:var(--color-toast-loading-icon);background-color:var(--color-toast-loading-icon-bg);border-color:var(--color-toast-loading-icon-border)}.Toast--error{color:var(--color-toast-danger-text);box-shadow:inset 0 0 0 1px var(--color-toast-danger-border),var(--color-toast-shadow)}.Toast--error .Toast-icon{color:var(--color-toast-danger-icon);background-color:var(--color-toast-danger-icon-bg);border-color:var(--color-toast-danger-icon-border)}.Toast--warning{color:var(--color-toast-warning-text);box-shadow:inset 0 0 0 1px var(--color-toast-warning-border),var(--color-toast-shadow)}.Toast--warning .Toast-icon{color:var(--color-toast-warning-icon);background-color:var(--color-toast-warning-icon-bg);border-color:var(--color-toast-warning-icon-border)}.Toast--success{color:var(--color-toast-success-text);box-shadow:inset 0 0 0 1px var(--color-toast-success-border),var(--color-toast-shadow)}.Toast--success .Toast-icon{color:var(--color-toast-success-icon);background-color:var(--color-toast-success-icon-bg);border-color:var(--color-toast-success-icon-border)}.Toast--animateIn{animation:Toast--animateIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) backwards}@keyframes Toast--animateIn{0%{opacity:0;transform:translateY(100%)}}.Toast--animateOut{animation:Toast--animateOut 0.18s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards}@keyframes Toast--animateOut{100%{pointer-events:none;opacity:0;transform:translateY(100%)}}.Toast--spinner{animation:Toast--spinner 1000ms linear infinite}@keyframes Toast--spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /*# sourceMappingURL=toasts.css.map */