Contents

/*

Alerts

Wrap any text and an optional dismiss button in `.alert` for a basic warning alert message.

Markup:
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Alert!</strong> Best check yourself, you're not looking too good.
</div>

Styleguide 1

*/

@if $alerts {

  .alert {
    padding: $alerts-padding;
    margin-bottom: rhythm();
    @extend %alert;

    p { @extend %no-margin; }

    .close {
      position: relative;
      top: 0;
      right: 0;
    }
  }

/*

Alert Block

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding `.alert-block`.

Markup:
<div class="alert alert--block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Error</strong>
  <p>The field Number is required and must contain a value.</p>
  <p>The field Product Title is required and must contain a value.</p>
  <p>The field Total Expenses is required and must contain a value.</p>
</div>

Styleguide 1.1

*/


  .alert--block {
    * { margin-bottom: 0; }
    * + * {  margin-top: 5px; }
  }

}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
rapido-css-0.2.4	stylesheets/components/_alerts.scss
rapido-css-0.2.3	stylesheets/components/_alerts.scss