From 7aabd493647fbe1110cbdf2637828e34df6a4b90 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 10 Dec 2015 19:43:28 -0800 Subject: Reorganize utilities into more separate files under a `/scss/utilities/` directory [skip sauce] [skip validator] --- scss/_utilities-background.scss | 24 --------- scss/_utilities-responsive.scss | 49 ------------------ scss/_utilities-spacing.scss | 39 -------------- scss/_utilities.scss | 103 +++---------------------------------- scss/bootstrap.scss | 3 -- scss/utilities/_background.scss | 24 +++++++++ scss/utilities/_center-block.scss | 3 ++ scss/utilities/_clearfix.scss | 3 ++ scss/utilities/_pulls.scss | 13 +++++ scss/utilities/_screenreaders.scss | 11 ++++ scss/utilities/_spacing.scss | 39 ++++++++++++++ scss/utilities/_text.scss | 53 +++++++++++++++++++ scss/utilities/_visibility.scss | 55 ++++++++++++++++++++ 13 files changed, 209 insertions(+), 210 deletions(-) delete mode 100644 scss/_utilities-background.scss delete mode 100644 scss/_utilities-responsive.scss delete mode 100644 scss/_utilities-spacing.scss create mode 100644 scss/utilities/_background.scss create mode 100644 scss/utilities/_center-block.scss create mode 100644 scss/utilities/_clearfix.scss create mode 100644 scss/utilities/_pulls.scss create mode 100644 scss/utilities/_screenreaders.scss create mode 100644 scss/utilities/_spacing.scss create mode 100644 scss/utilities/_text.scss create mode 100644 scss/utilities/_visibility.scss diff --git a/scss/_utilities-background.scss b/scss/_utilities-background.scss deleted file mode 100644 index 4bbf7318d..000000000 --- a/scss/_utilities-background.scss +++ /dev/null @@ -1,24 +0,0 @@ -// -// Contextual backgrounds -// - -// 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); diff --git a/scss/_utilities-responsive.scss b/scss/_utilities-responsive.scss deleted file mode 100644 index 0470dc5bf..000000000 --- a/scss/_utilities-responsive.scss +++ /dev/null @@ -1,49 +0,0 @@ -// -// Responsive utilities -// - -@each $bp in map-keys($grid-breakpoints) { - .hidden-#{$bp}-up { - @include media-breakpoint-up($bp) { - display: none !important; - } - } - .hidden-#{$bp}-down { - @include media-breakpoint-down($bp) { - display: none !important; - } - } -} - - -// Print utilities -// -// Media queries are placed on the inside to be mixin-friendly. - -.visible-print-block { - display: none !important; - - @media print { - display: block !important; - } -} -.visible-print-inline { - display: none !important; - - @media print { - display: inline !important; - } -} -.visible-print-inline-block { - display: none !important; - - @media print { - display: inline-block !important; - } -} - -.hidden-print { - @media print { - display: none !important; - } -} diff --git a/scss/_utilities-spacing.scss b/scss/_utilities-spacing.scss deleted file mode 100644 index cd543c8c9..000000000 --- a/scss/_utilities-spacing.scss +++ /dev/null @@ -1,39 +0,0 @@ -// Margin and Padding - -.m-x-auto { - margin-right: auto !important; - margin-left: auto !important; -} - -@each $prop, $abbrev in (margin: m, padding: p) { - @each $size, $lengths in $spacers { - $length-x: map-get($lengths, x); - $length-y: map-get($lengths, y); - - .#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides - .#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; } - - // Axes - .#{$abbrev}-x-#{$size} { - #{$prop}-right: $length-x !important; - #{$prop}-left: $length-x !important; - } - .#{$abbrev}-y-#{$size} { - #{$prop}-top: $length-y !important; - #{$prop}-bottom: $length-y !important; - } - } -} - -// Positioning - -.pos-f-t { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: $zindex-navbar-fixed; -} diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 520666ec1..c0df1222f 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 2ea6f902d..bbcf35b64 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 new file mode 100644 index 000000000..4bbf7318d --- /dev/null +++ b/scss/utilities/_background.scss @@ -0,0 +1,24 @@ +// +// Contextual backgrounds +// + +// 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); diff --git a/scss/utilities/_center-block.scss b/scss/utilities/_center-block.scss new file mode 100644 index 000000000..0c986667a --- /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 000000000..e92522a94 --- /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 000000000..7fec56c9a --- /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 000000000..9f26fde03 --- /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 new file mode 100644 index 000000000..cd543c8c9 --- /dev/null +++ b/scss/utilities/_spacing.scss @@ -0,0 +1,39 @@ +// Margin and Padding + +.m-x-auto { + margin-right: auto !important; + margin-left: auto !important; +} + +@each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $lengths in $spacers { + $length-x: map-get($lengths, x); + $length-y: map-get($lengths, y); + + .#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides + .#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; } + .#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; } + .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; } + .#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; } + + // Axes + .#{$abbrev}-x-#{$size} { + #{$prop}-right: $length-x !important; + #{$prop}-left: $length-x !important; + } + .#{$abbrev}-y-#{$size} { + #{$prop}-top: $length-y !important; + #{$prop}-bottom: $length-y !important; + } + } +} + +// Positioning + +.pos-f-t { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; +} diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss new file mode 100644 index 000000000..f3a0c9880 --- /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/_visibility.scss b/scss/utilities/_visibility.scss new file mode 100644 index 000000000..cdb142869 --- /dev/null +++ b/scss/utilities/_visibility.scss @@ -0,0 +1,55 @@ +// +// Visibility utilities +// + +.invisible { + visibility: hidden !important; +} + +// Responsive visibility utilities + +@each $bp in map-keys($grid-breakpoints) { + .hidden-#{$bp}-up { + @include media-breakpoint-up($bp) { + display: none !important; + } + } + .hidden-#{$bp}-down { + @include media-breakpoint-down($bp) { + display: none !important; + } + } +} + + +// Print utilities +// +// Media queries are placed on the inside to be mixin-friendly. + +.visible-print-block { + display: none !important; + + @media print { + display: block !important; + } +} +.visible-print-inline { + display: none !important; + + @media print { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; + + @media print { + display: inline-block !important; + } +} + +.hidden-print { + @media print { + display: none !important; + } +} -- cgit v1.2.3