diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 520666ec1d..c0df1222fa 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,95 +1,8 @@ -// -// 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"; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 2ea6f902de..bbcf35b649 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -51,6 +51,3 @@ // Utility classes @import "utilities"; -@import "utilities-background"; -@import "utilities-spacing"; -@import "utilities-responsive"; diff --git a/scss/_utilities-background.scss b/scss/utilities/_background.scss similarity index 100% rename from scss/_utilities-background.scss rename to scss/utilities/_background.scss diff --git a/scss/utilities/_center-block.scss b/scss/utilities/_center-block.scss new file mode 100644 index 0000000000..0c986667ae --- /dev/null +++ b/scss/utilities/_center-block.scss @@ -0,0 +1,3 @@ +.center-block { + @include center-block(); +} diff --git a/scss/utilities/_clearfix.scss b/scss/utilities/_clearfix.scss new file mode 100644 index 0000000000..e92522a94d --- /dev/null +++ b/scss/utilities/_clearfix.scss @@ -0,0 +1,3 @@ +.clearfix { + @include clearfix(); +} diff --git a/scss/utilities/_pulls.scss b/scss/utilities/_pulls.scss new file mode 100644 index 0000000000..7fec56c9a3 --- /dev/null +++ b/scss/utilities/_pulls.scss @@ -0,0 +1,13 @@ +@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; + } + } +} diff --git a/scss/utilities/_screenreaders.scss b/scss/utilities/_screenreaders.scss new file mode 100644 index 0000000000..9f26fde035 --- /dev/null +++ b/scss/utilities/_screenreaders.scss @@ -0,0 +1,11 @@ +// +// Screenreaders +// + +.sr-only { + @include sr-only(); +} + +.sr-only-focusable { + @include sr-only-focusable(); +} diff --git a/scss/_utilities-spacing.scss b/scss/utilities/_spacing.scss similarity index 100% rename from scss/_utilities-spacing.scss rename to scss/utilities/_spacing.scss diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss new file mode 100644 index 0000000000..f3a0c98804 --- /dev/null +++ b/scss/utilities/_text.scss @@ -0,0 +1,53 @@ +// +// 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(); +} diff --git a/scss/_utilities-responsive.scss b/scss/utilities/_visibility.scss similarity index 87% rename from scss/_utilities-responsive.scss rename to scss/utilities/_visibility.scss index 0470dc5bfd..cdb1428698 100644 --- a/scss/_utilities-responsive.scss +++ b/scss/utilities/_visibility.scss @@ -1,7 +1,13 @@ // -// 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) {