Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@marlocorridor
Forked from mattsimpson/docs style (bootstrap)
Last active November 9, 2016 03:43
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marlocorridor/c18908df55d5cd5ca990440393a3ef19 to your computer and use it in GitHub Desktop.
Save marlocorridor/c18908df55d5cd5ca990440393a3ef19 to your computer and use it in GitHub Desktop.
This is the Twitter Bootstrap documentation's callout css. Looks nice.
// Brands
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger: #bf5329;
.bs-callout {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
}
.bs-callout h4 {
margin-top: 0;
margin-bottom: 5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code {
border-radius: 3px;
}
/* Tighten up space between multiple callouts */
.bs-callout + .bs-callout {
margin-top: -5px;
}
/* Variations */
.bs-callout-danger {
border-left-color: $brand-danger;
}
.bs-callout-danger h4 {
color: $brand-danger;
}
.bs-callout-warning {
border-left-color: $brand-warning;
}
.bs-callout-warning h4 {
color: $brand-warning;
}
.bs-callout-info {
border-left-color: $brand-info;
}
.bs-callout-info h4 {
color: $brand-info;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment