Merge pull request #18537 from twbs/utils-dir

Reorganize utilities into more separate files under a `utilities` directory

scss/_utilities.scss

-//
-// Floats
-//
-
-.clearfix {
-  @include clearfix();
-}
-
-.center-block {
-  @include center-block();
-}
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    .pull-#{$breakpoint}-left {
-      @include pull-left();
-    }
-    .pull-#{$breakpoint}-right {
-      @include pull-right();
-    }
-    .pull-#{$breakpoint}-none {
-      float: none !important;
-    }
-  }
-}
-
-
-//
-// Screenreaders
-//
-
-.sr-only {
-  @include sr-only();
-}
-
-.sr-only-focusable {
-  @include sr-only-focusable();
-}
-
-.invisible {
-  visibility: hidden !important;
-}
-
-.text-hide {
-  @include text-hide();
-}
-
-
-//
-// Text
-//
-
-// Alignment
-
-.text-justify        { text-align: justify !important; }
-.text-nowrap         { white-space: nowrap !important; }
-.text-truncate       { @include text-truncate; }
-
-// Responsive alignment
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    .text-#{$breakpoint}-left   { text-align: left !important; }
-    .text-#{$breakpoint}-right  { text-align: right !important; }
-    .text-#{$breakpoint}-center { text-align: center !important; }
-  }
-}
-
-// Transformation
-
-.text-lowercase      { text-transform: lowercase !important; }
-.text-uppercase      { text-transform: uppercase !important; }
-.text-capitalize     { text-transform: capitalize !important; }
-
-// Weight and italics
-
-.font-weight-normal  { font-weight: normal; }
-.font-weight-bold    { font-weight: bold; }
-.font-italic         { font-style: italic; }
-
-// Contextual colors
-
-.text-muted {
-  color: $text-muted;
-}
-
-@include text-emphasis-variant('.text-primary', $brand-primary);
-
-@include text-emphasis-variant('.text-success', $brand-success);
-
-@include text-emphasis-variant('.text-info', $brand-info);
-
-@include text-emphasis-variant('.text-warning', $brand-warning);
-
-@include text-emphasis-variant('.text-danger', $brand-danger);
+@import "utilities/background";
+@import "utilities/center-block";
+@import "utilities/clearfix";
+@import "utilities/pulls";
+@import "utilities/screenreaders";
+@import "utilities/spacing";
+@import "utilities/text";
+@import "utilities/visibility";

scss/bootstrap.scss

@@ -51,6 +51,3 @@
 
 // Utility classes
 @import "utilities";
-@import "utilities-background";
-@import "utilities-spacing";
-@import "utilities-responsive";

scss/utilities/_center-block.scss

+.center-block {
+  @include center-block();
+}

scss/utilities/_clearfix.scss

+.clearfix {
+  @include clearfix();
+}

scss/utilities/_pulls.scss

+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .pull-#{$breakpoint}-left {
+      @include pull-left();
+    }
+    .pull-#{$breakpoint}-right {
+      @include pull-right();
+    }
+    .pull-#{$breakpoint}-none {
+      float: none !important;
+    }
+  }
+}

scss/utilities/_screenreaders.scss

+//
+// Screenreaders
+//
+
+.sr-only {
+  @include sr-only();
+}
+
+.sr-only-focusable {
+  @include sr-only-focusable();
+}

scss/utilities/_text.scss

+//
+// Text
+//
+
+// Alignment
+
+.text-justify        { text-align: justify !important; }
+.text-nowrap         { white-space: nowrap !important; }
+.text-truncate       { @include text-truncate; }
+
+// Responsive alignment
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .text-#{$breakpoint}-left   { text-align: left !important; }
+    .text-#{$breakpoint}-right  { text-align: right !important; }
+    .text-#{$breakpoint}-center { text-align: center !important; }
+  }
+}
+
+// Transformation
+
+.text-lowercase      { text-transform: lowercase !important; }
+.text-uppercase      { text-transform: uppercase !important; }
+.text-capitalize     { text-transform: capitalize !important; }
+
+// Weight and italics
+
+.font-weight-normal  { font-weight: normal; }
+.font-weight-bold    { font-weight: bold; }
+.font-italic         { font-style: italic; }
+
+// Contextual colors
+
+.text-muted {
+  color: $text-muted;
+}
+
+@include text-emphasis-variant('.text-primary', $brand-primary);
+
+@include text-emphasis-variant('.text-success', $brand-success);
+
+@include text-emphasis-variant('.text-info', $brand-info);
+
+@include text-emphasis-variant('.text-warning', $brand-warning);
+
+@include text-emphasis-variant('.text-danger', $brand-danger);
+
+// Misc
+
+.text-hide {
+  @include text-hide();
+}

scss/_utilities-responsive.scss → scss/utilities/_visibility.scss

 //
-// Responsive utilities
+// Visibility utilities
 //
 
+.invisible {
+  visibility: hidden !important;
+}
+
+// Responsive visibility utilities
+
 @each $bp in map-keys($grid-breakpoints) {
   .hidden-#{$bp}-up {
     @include media-breakpoint-up($bp) {