vendor/assets/stylesheets/bootstrap/_alerts.scss in bootstrap-sass-2.3.2.2 vs vendor/assets/stylesheets/bootstrap/_alerts.scss in bootstrap-sass-3.0.0.0.rc

- old
+ new

@@ -5,75 +5,63 @@ // Base 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($baseBorderRadius); -} -.alert, -.alert h4 { - // Specified for the h4 to prevent conflicts of changing $headingsColor - color: $warningText; -} -.alert h4 { - margin: 0; -} + padding: $alert-padding; + margin-bottom: $line-height-computed; + border: 1px solid transparent; + border-radius: $alert-border-radius; -// Adjust close link position -.alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: $baseLineHeight; + // Headings for larger alerts + h4 { + margin-top: 0; + // Specified for the h4 to prevent conflicts of changing $headingsColor + color: inherit; + } + // Provide class for links that match alerts + .alert-link { + font-weight: $alert-link-font-weight; + } + + // Improve alignment and spacing of inner content + > p, + > ul { + margin-bottom: 0; + } + > p + p { + margin-top: 5px; + } } +// Dismissable alerts +// +// Expand the right padding and account for the close button's positioning. +.alert-dismissable { + padding-right: ($alert-padding + 20); + + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } +} + // Alternate styles -// ------------------------- +// +// Generate contextual modifier classes for colorizing the alert. .alert-success { - background-color: $successBackground; - border-color: $successBorder; - color: $successText; + @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); } -.alert-success h4 { - color: $successText; -} -.alert-danger, -.alert-error { - background-color: $errorBackground; - border-color: $errorBorder; - color: $errorText; -} -.alert-danger h4, -.alert-error h4 { - color: $errorText; -} .alert-info { - background-color: $infoBackground; - border-color: $infoBorder; - color: $infoText; + @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); } -.alert-info h4 { - color: $infoText; +.alert-warning { + @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); } - - -// 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-danger { + @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); }