A child stylesheet generated using Sass. The compiled CSS is meant to append and override the default Bootstrap stylesheet.
Last updated: October 3, 2016. View Changelog.
$white
$neutral_lighter
$neutral_light
$neutral
$neutral_dark
$neutral_darker
$black
$red$brand_primary
$brand_primary_hover
$brand_primary_light
$brand_critical
$brand_critical_hover$alert_success
$alert_success_border
$alert_success_background
$alert_info
$alert_info_border
$alert_info_background
$alert_warning
$alert_warning_background
$alert_warning_border
$alert_danger
$alert_danger_border
$alert_danger_background@include t_smaller
@include t_smaller_neutral
@include t_smaller_neutral_center
@include t_smaller_error
@include t_smaller_error_link@include t_small
@include t_small_neutral
@include t_small_neutral_center
@include t_small_neutral_right
@include t_small_bold
@include t_small_link
@include t_small_link_right
@include t_small_success
@include t_small_info
@include t_small_warning
@include t_small_danger
@include t_small_white_center_bold@include t_base
@include t_base_italic
@include t_base_bold
@include t_base_link
@include t_base_center
@include t_base_link_center
@include t_base_center_neutral
@include t_base_white_center_bold@include t_large
@include t_large_bold@include t_larger
@include t_larger_bold
@include t_larger_bold_neutral
@include t_larger_light_neutral
@include t_larger_light_neutral_center
@include t_larger_light_blue_center
@include t_largest
@include t_largest_light_blue
@include t_largest_bold_blue<h1>content</h1>
<h2>content</h2>
<h3>content</h3>
<h4>content</h4>
<h5>content</h5>
<h6>content</h6>
<p>content</p>
<em>content</em>
<strong>content</strong>
<code>content</code>
<pre>content</pre>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<ol>
<li>content</li>
<li>content</li>
<li>content</li>
</ol>content
content contentcontent
content
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Font Awesome Documentation<i class="fa fa-ban"></i>
<i class="fa fa-file"></i>
<i class="fa fa-refresh"></i><a href="#" class="btn-link btn-sm">...</a>
<a href="#" class="btn btn-link">...</a>
<a href="#" class="btn btn-link disabled">...</a>
<a href="#" class="btn btn-link btn-block">...</a><a href="#" btn-default btn-sm">...</a>
<a href="#" class="btn btn-default">...</a>
<a href="#" class="btn btn-default disabled">...</a>
<a href="#" class="btn btn-default btn-block">...</a><a href="#" class="btn btn-primary btn-sm">...</a>
<a href="#" class="btn btn-primary">...</a>
<a href="#" class="btn btn-primary disabled">...</a>
<a href="#" class="btn btn-primary btn-block">...</a><a href="#" class="btn btn-green btn-sm">...</a>
<a href="#" class="btn btn-green">...</a>
<a href="#" class="btn btn-green disabled">...</a>
<a href="#" class="btn btn-green btn-block">...</a><a href="#" class="btn btn-critical btn-sm">...</a>
<a href="#" class="btn btn-critical">...</a>
<a href="#" class="btn btn-critical disabled">...</a>
<a href="#" class="btn btn-critical btn-block">...</a><div class="btn-group">
<button class="btn btn-link btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-download fa-lg"></i> Download Trigger <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-download"></i> Download Trigger</a></li>
<li><a href="#"><i class="fa fa-cogs"></i> Advanced Download</a></li>
</ul>
</div>Error Validation Pattern
Client-side validation should occur as soon as a field loses :focus. If an error is detected, the error message should appear inline, directly below the effected field. Forms should always be tabbable using the keyboard from top to bottom.
Error Design
The sass mixin for error messages is t_smaller_error. Links within an error message should use t_smaller_error_link and open in a new tab. Whenever possible, change the border color of the form element to $red as well. Error messages should be limited to two lines in length.
<div class="radio">
<label>
<input type="radio" name="RadioGroupName">
Option one
</label>
</div>
<div class="radio" disabled">
<label class="disabled">
<input type="radio" name="RadioGroupName" disabled>
Option disabled
</label>
</div><div class="checkbox">
<label>
<input type="checkbox" value="">
Checkbox option one
</label>
</div>
<div class="checkbox disabled">
<label class="disabled">
<input type="checkbox" value="" disabled>
Checkbox option two is disabled
</label>
</div><form role="form">
<div class="form-group">
<label>Select List</label>
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
<p class="help-block">Help text here.</p>
</div>
<div class="form-group">
<label class="disabled">Disabled Select List</label>
<select class="form-control" disabled>
<option>1</option>
<option>2</option>
</select>
<p class="help-block">Help text here.</p>
</div>
<div class="form-group has-error">
<label>Select List With Error</label>
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
<p class="help-block">Error text here.</p>
</div>
</form><form role="form">
<div class="form-group">
<label>Input Label</label>
<input type="email" class="form-control" placeholder="Placeholder Text">
<p class="help-block">Help text here.</p>
</div>
<div class="form-group">
<label class="disabled">Disabled Input Label</label>
<input type="email" class="form-control" disabled placeholder="Placeholder Text">
<p class="help-block">Help text here.</p>
</div>
<div class="form-group has-error">
<label>Input Label With Error</label>
<input type="email" class="form-control" placeholder="Placeholder Text">
<p class="help-block">Error text here.</p>
</div>
<div class="form-group">
<label>Required Input Label <span class="required">*</span></label>
<textarea class="form-control" rows="3" placeholder="Placeholder Text"></textarea>
<p class="help-block">Help text here.</p>
</div>
<div class="form-group">
<label class="disabled">Disabled Input Label</label>
<textarea class="form-control" rows="3" disabled placeholder="Placeholder Text"></textarea>
<p class="help-block">Help text here.</p>
</div>
<div class="form-group has-error">
<label>Required Input Label With Error <span class="required">*</span></label>
<textarea class="form-control" rows="3" placeholder="Placeholder Text"></textarea>
<p class="help-block">Error text here.</p>
</div>
</form>Modals should appear above all other elements on the page, with respect to z-index. No other elements should overlap a modal window.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="myModalLabel">Modal title</h3>
</div>
<div class="modal-body">Modal body content.</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Close/Cancel Action</a>
<a href="#" class="btn btn-primary">Primary Action</a>
</div>
</div>
</div>
</div>
<div id="mySmallModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
<div id="mylargeModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<div class="alert alert-success alert-dismissable">
<i class="fa fa-check-circle"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p>This is a success alert, congratulations. Here's an inline <a href="#" class="alert-link">link</a>.</p>
</div>
<div class="alert alert-success alert-dismissable">
<i class="fa fa-check-circle"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p class="alert-title">Optional Alert Title</p>
<p>This is a success alert, congratulations.</p>
</div>This is a success alert, congratulations. Here's an inline link.
Optional Alert Title
This is a success alert, congratulations. This is a success alert, congratulations. This is a success alert, congratulations. This is a success alert, congratulations. This is a success alert, congratulations. This is a success alert, congratulations. This is a success alert, congratulations.
<div class="alert alert-info alert-dismissable">
<i class="fa fa-info-circle"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p>This is an info alert, here's the scoop. Here's an inline <a href="#" class="alert-link">link</a>.</p>
</div>
<div class="alert alert-info alert-dismissable">
<i class="fa fa-info-circle"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p class="alert-title">Optional Alert Title</p>
<p>This is an info alert, here's the scoop.</p>
</div>This is an info alert, here's the scoop. Here's an inline link.
Optional Alert Title
This is an info alert, here's the scoop. This is an info alert, here's the scoop. This is an info alert, here's the scoop. This is an info alert, here's the scoop. This is an info alert, here's the scoop. This is an info alert, here's the scoop. This is an info alert, here's the scoop.
<div class="alert alert-warning alert-dismissable">
<i class="fa fa-exclamation-circle"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p>This is a warning alert, be warned. Here's an inline <a href="#" class="alert-link">link</a>.</p>
</div>
<div class="alert alert-warning alert-dismissable">
<i class="fa fa-clock-o"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p>This is a warning alert, be warned. Here's an inline <a href="#" class="alert-link">link</a>.</p>
</div>
<div class="alert alert-warning alert-dismissable">
<i class="fa fa-exclamation-circle"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p class="alert-title">Optional Alert Title</p>
<p>This is a warning alert, be warned.</p>
</div>This is a warning alert, be warned. Here's an inline link.
This is a time-sensitive warning alert, be warned. Here's an inline link.
Optional Alert Title
This is a warning alert, be warned. This is a warning alert, be warned. This is a warning alert, be warned. This is a warning alert, be warned. This is a warning alert, be warned. This is a warning alert, be warned. This is a warning alert, be warned.
<div class="alert alert-danger alert-dismissable">
<i class="fa fa-times-circle"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p>This is a danger alert, look out! Here's an inline <a href="#" class="alert-link">link</a>.</p>
</div>
<div class="alert alert-danger alert-dismissable">
<i class="fa fa-times-circle"></i>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p class="alert-title">Optional Alert Title</p>
<p>This is a danger alert, look out!</p>
</div>This is a danger alert, look out! Here's an inline link.
Optional Alert Title
This is a danger alert, look out! This is a danger alert, look out! This is a danger alert, look out! This is a danger alert, look out! This is a danger alert, look out! This is a danger alert, look out! This is a danger alert, look out!
<div class="well">Look, I'm in a well!</div><ul class="breadcrumb">
<li><a href="#">All Links</a></li>
<li class="active">Link Name Here</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">Learn</a></li>
<li><a href="#">Technologies</a></li>
<li class="active">Digital Watermarks</li>
</ul><div class="pagination">
<span class="numbers">1-40</span> links of <span class="numbers">156</span>
<ul class="pager">
<li class="disabled"><a href="#"><i class="fa fa-chevron-left"></i></a></li>
<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
</ul>
</div>