savvy-js/test/assemblerTestData.less

Savvy - Style sheet documentation tool

//
// Bootstrap Alerts
// --------------------------------------------------

/**
 * Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
 *
 *    <div class="alert alert-success" role="alert">...</div>
 *    <div class="alert alert-info" role="alert">...</div>
 *    <div class="alert alert-warning" role="alert">...</div>
 *    <div class="alert alert-danger" role="alert">...</div>
 *
 * @class alert
 * @module components
 */
.alert {
  padding: @alert-padding;
  margin-bottom: @line-height-computed;
  border: 1px solid transparent;
  border-radius: @alert-border-radius;

  // Headings for larger alerts
  h4 {
    margin-top: 0;
    // Specified for the h4 to prevent conflicts of changing @headings-color
    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;
  }
}

/**
 * Build on any alert by adding an optional .alert-dismissible and close button.
 *
 *    <div class="alert alert-warning alert-dismissible" role="alert">
 *      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 *      <strong>Warning!</strong> Better check yourself, you're not looking too good.
 *    </div>
 *
 * @class alert-dismissible
 * @stateof alert
 */

.alert-dismissible {
  padding-right: (@alert-padding + 20);

  /**
   * Adjust close link position
   *
   * @class close
   * @parent alert-dismissible
   */
  .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
  }
}

/**
 *    <div class="alert alert-success" role="alert">...</div>
 *
 * @class alert-success
 * @stateof alert
 */
.alert-success {
  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}

/**
 *    <div class="alert alert-info" role="alert">...</div>
 *
 * @class alert-info
 * @stateof alert
 */
.alert-info {
  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}

/**
 *    <div class="alert alert-warning" role="alert">...</div>
 *
 * @class alert-warning
 * @stateof alert
 */
.alert-warning {
  .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}

/**
 *    <div class="alert alert-danger" role="alert">...</div>
 *
 * @class alert-danger
 * @stateof alert
 */
.alert-danger {
  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}