// alerts-badges.scss.erb
// ALERT STYLES // ————
// Base alert styles .alert {
padding: 8px 35px 8px 14px; margin-bottom: $baseLineHeight; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: $warningBackground; border: 1px solid $warningBorder; @include border-radius(4px); color: $warningText;
} .alert-heading {
color: inherit;
}
// Adjust close link position .alert .close {
position: relative; top: -2px; right: -21px; line-height: 18px; padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; float: right; font-size: 20px; font-weight: bold; line-height: 20px; color: $grayDark; text-shadow: 0px 1px 0px rgb(255, 255, 255); opacity: 0.5; &:hover { color: $black; }
}
// Alternate styles // —————-
.alert-success {
background-color: $successBackground; border-color: $successBorder; color: $successText;
} .alert-danger, .alert-error {
background-color: $errorBackground; border-color: $errorBorder; color: $errorText;
} .alert-info {
background-color: $infoBackground; border-color: $infoBorder; color: $infoText;
} // Zero State Banner // Appears when there is nothing to show in a list or other part of the interface .alert-zero {
background-color: $zeroBackground; border-color: $zeroBorder; color: $zeroText; @include box-shadow(inset 0px 3px 3px $zeroBorder);
}
// Block alerts // ———————— .alert-block {
padding-top: 14px; padding-bottom: 14px;
} .alert-block > p, .alert-block > ul {
margin-bottom: 0;
} .alert-block p + p {
margin-top: 5px;
} .alert-block p.alert-heading {
font-weight: bold;
} .alert-banner, .alert-removeborder {
@extend .alert-block; @include border-radius(0px); margin-bottom: 0px;
}
.badge {
@include border-radius(2px); background: $concerto-blue-4; color: $white; font-family: $sans-body; display: inline; font-size: 10px; font-weight: bold; padding: 1px 4px; &.action { background-color: $red; } &.muted { background-color: $grayLight; }
}
.link-hl .badge {
position: relative; bottom: 2px; margin-right: 3px;
}
// Flash Notice Banner // Only appears for a short time to show flash text // Appears to “slide” from behind the top menu, then slide back up flash-banner {
background: $black; opacity: 0.8; // initial state: is rendered at top of screen behind the topbar position: absolute; width: 100%; top: 0px; left: 0px; z-index: 1; p { padding: 4px 12px; opacity: 1.0; color: $white; margin-bottom: 0px; }
}
// Zero State Well // Appears when there is nothing to show in a list .zero-well {
}