1 files changed, 107 insertions, 25 deletions

diff --git a/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss
index 8c99c71..12e2962 100644
--- a/assets/stylesheets/bootstrap/_utilities.scss
+++ b/assets/stylesheets/bootstrap/_utilities.scss
@@ -1,55 +1,137 @@
 //
-// Utility classes
-// --------------------------------------------------
-
-
 // Floats
-// -------------------------
+//
 
 .clearfix {
-  @include clearfix;
+  @include clearfix();
 }
+
 .center-block {
-  @include center-block;
+  @include center-block();
 }
+
 .pull-right {
-  float: right !important;
+  @include pull-right();
 }
+
 .pull-left {
-  float: left !important;
+  @include pull-left();
 }
 
 
-// Toggling content
-// -------------------------
+//
+// Screenreaders
+//
 
-// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
-.hide {
-  display: none !important;
+.sr-only {
+  @include sr-only();
+}
+
+.sr-only-focusable {
+  @include sr-only-focusable();
 }
-.show {
-  display: block !important;
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+[hidden] {
+  display: none !important;
 }
+
 .invisible {
   visibility: hidden;
 }
+
 .text-hide {
-  @include text-hide;
+  @include text-hide();
 }
 
 
-// Hide from screenreaders and browsers
 //
-// Credit: HTML5 Boilerplate
+// Text
+//
 
-.hidden {
-  display: none !important;
+// Alignment
+
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+.text-justify        { text-align: justify; }
+.text-nowrap         { white-space: nowrap; }
+.text-truncate       { @include text-truncate; }
+
+// Responsive alignment
+
+.text-xs-left   { text-align: left; }
+.text-xs-right  { text-align: right; }
+.text-xs-center { text-align: center; }
+
+@include media-breakpoint-up(sm) {
+  .text-sm-left   { text-align: left; }
+  .text-sm-right  { text-align: right; }
+  .text-sm-center { text-align: center; }
+}
+
+@include media-breakpoint-up(md) {
+  .text-md-left   { text-align: left; }
+  .text-md-right  { text-align: right; }
+  .text-md-center { text-align: center; }
+}
+
+@include media-breakpoint-up(lg) {
+  .text-lg-left   { text-align: left; }
+  .text-lg-right  { text-align: right; }
+  .text-lg-center { text-align: center; }
 }
 
+@include media-breakpoint-up(xl) {
+  .text-xl-left   { text-align: left; }
+  .text-xl-right  { text-align: right; }
+  .text-xl-center { text-align: center; }
+}
+
+// Transformation
+
+.text-lowercase      { text-transform: lowercase; }
+.text-uppercase      { text-transform: uppercase; }
+.text-capitalize     { text-transform: capitalize; }
+
+// Contextual colors
+
+.text-muted {
+  color: $text-muted;
+}
+
+@include text-emphasis-variant('.text-primary', $brand-primary);
+
+@include text-emphasis-variant('.text-success', $brand-success);
 
-// For Affix plugin
-// -------------------------
+@include text-emphasis-variant('.text-info', $brand-info);
 
-.affix {
-  position: fixed;
+@include text-emphasis-variant('.text-warning', $brand-warning);
+
+@include text-emphasis-variant('.text-danger', $brand-danger);
+
+
+// Contextual backgrounds
+// For now we'll leave these alongside the text classes until v4 when we can
+// safely shift things around (per SemVer rules).
+
+// Inverse
+// Todo: redo this as a proper class
+.bg-inverse {
+  color: $gray-lighter;
+  background-color: $gray-dark;
+}
+
+.bg-faded {
+  background-color: $gray-lightest;
 }
+
+@include bg-variant('.bg-primary', $brand-primary);
+
+@include bg-variant('.bg-success', $brand-success);
+
+@include bg-variant('.bg-info', $brand-info);
+
+@include bg-variant('.bg-warning', $brand-warning);
+
+@include bg-variant('.bg-danger', $brand-danger);