// 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 {

}