// stylelint-disable selector-max-type, no-duplicate-selectors
// Default flash .flash {
position: relative; // stylelint-disable-next-line primer/spacing padding: 20px $spacer-3; border-style: $border-style; border-width: $border-width; border-radius: $border-radius; p:last-child { margin-bottom: 0; } .octicon { // stylelint-disable-next-line primer/spacing margin-right: 12px; }
}
// Contain the flash messages .flash-messages {
margin-bottom: $spacer-4;
}
// Close button .flash-close {
float: right; padding: $spacer-3; margin: -$spacer-3; text-align: center; cursor: pointer; // Undo `<button>` styles background: none; border: 0; appearance: none; &:hover { opacity: 0.7; } &:active { opacity: 0.5; } .octicon { margin-right: 0; }
}
// Action button .flash-action {
float: right; // stylelint-disable-next-line primer/spacing margin-top: -3px; margin-left: $spacer-4; background-clip: padding-box;
}
// // Color variations //
.flash {
color: var(--color-alert-info-text); background-image: linear-gradient(var(--color-alert-info-bg), var(--color-alert-info-bg)); border-color: var(--color-alert-info-border); .octicon { // stylelint-disable-next-line primer/colors color: var(--color-alert-info-icon); }
}
.flash-warn {
color: var(--color-alert-warn-text); background-image: linear-gradient(var(--color-alert-warn-bg), var(--color-alert-warn-bg)); border-color: var(--color-alert-warn-border); .octicon { // stylelint-disable-next-line primer/colors color: var(--color-alert-warn-icon); }
}
.flash-error {
color: var(--color-alert-error-text); background-image: linear-gradient(var(--color-alert-error-bg), var(--color-alert-error-bg)); border-color: var(--color-alert-error-border); .octicon { // stylelint-disable-next-line primer/colors color: var(--color-alert-error-icon); }
}
.flash-success {
color: var(--color-alert-success-text); background-image: linear-gradient(var(--color-alert-success-bg), var(--color-alert-success-bg)); border-color: var(--color-alert-success-border); .octicon { // stylelint-disable-next-line primer/colors color: var(--color-alert-success-icon); }
}
// // Layout variations //
.flash-full {
// stylelint-disable-next-line primer/spacing margin-top: -1px; border-width: $border-width 0; border-radius: 0;
}
// A banner rendered at the top of the page. .flash-banner {
position: fixed; top: 0; z-index: 90; width: 100%; border-top: 0; border-right: 0; border-left: 0; border-radius: 0;
}
// Makes sure the background is opaque to cover any content underneath .flash-full, .flash-banner {
background-color: var(--color-bg-canvas);
}
// FIXME deprecate this .warning {
padding: $em-spacer-5; // stylelint-disable-next-line primer/spacing margin-bottom: 0.8em; font-weight: $font-weight-bold; background-color: var(--color-alert-warn-bg);
}