diff options
author | Blake Gentry <blakesgentry@gmail.com> | 2017-01-06 21:10:24 +0300 |
---|---|---|
committer | Blake Gentry <blakesgentry@gmail.com> | 2017-01-06 21:10:24 +0300 |
commit | f82164992580fca0c3e3dde7d6d097784a514e5b (patch) | |
tree | bb3ff36c326d696623203563a53cab5982970ad8 /assets/stylesheets/bootstrap/utilities | |
parent | 023043a2da9098e7b8521a2ac62b7b5a470c40d9 (diff) |
rake update[v4.0.0-alpha.6]
Diffstat (limited to 'assets/stylesheets/bootstrap/utilities')
11 files changed, 160 insertions, 107 deletions
diff --git a/assets/stylesheets/bootstrap/utilities/_align.scss b/assets/stylesheets/bootstrap/utilities/_align.scss index 4886e05..4dbbbc2 100644 --- a/assets/stylesheets/bootstrap/utilities/_align.scss +++ b/assets/stylesheets/bootstrap/utilities/_align.scss @@ -1,6 +1,6 @@ -.align-baseline { vertical-align: baseline !important; } // Browser default -.align-top { vertical-align: top !important; } -.align-middle { vertical-align: middle !important; } -.align-bottom { vertical-align: bottom !important; } +.align-baseline { vertical-align: baseline !important; } // Browser default +.align-top { vertical-align: top !important; } +.align-middle { vertical-align: middle !important; } +.align-bottom { vertical-align: bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; } -.align-text-top { vertical-align: text-top !important; } +.align-text-top { vertical-align: text-top !important; } diff --git a/assets/stylesheets/bootstrap/utilities/_background.scss b/assets/stylesheets/bootstrap/utilities/_background.scss index a81dcff..b9ac295 100644 --- a/assets/stylesheets/bootstrap/utilities/_background.scss +++ b/assets/stylesheets/bootstrap/utilities/_background.scss @@ -3,7 +3,7 @@ // .bg-faded { - background-color: $gray-lightest; + background-color: darken($body-bg, 3%); } @include bg-variant('.bg-primary', $brand-primary); diff --git a/assets/stylesheets/bootstrap/utilities/_borders.scss b/assets/stylesheets/bootstrap/utilities/_borders.scss index b2e70aa..b256881 100644 --- a/assets/stylesheets/bootstrap/utilities/_borders.scss +++ b/assets/stylesheets/bootstrap/utilities/_borders.scss @@ -1,9 +1,12 @@ // -// Border-width +// Border // -// TBD...? - +.border-0 { border: 0 !important; } +.border-top-0 { border-top: 0 !important; } +.border-right-0 { border-right: 0 !important; } +.border-bottom-0 { border-bottom: 0 !important; } +.border-left-0 { border-left: 0 !important; } // // Border-radius @@ -28,3 +31,7 @@ .rounded-circle { border-radius: 50%; } + +.rounded-0 { + border-radius: 0; +} diff --git a/assets/stylesheets/bootstrap/utilities/_display.scss b/assets/stylesheets/bootstrap/utilities/_display.scss index d74049b..ae942a6 100644 --- a/assets/stylesheets/bootstrap/utilities/_display.scss +++ b/assets/stylesheets/bootstrap/utilities/_display.scss @@ -2,12 +2,17 @@ // Display utilities // -.d-block { - display: block !important; -} -.d-inline-block { - display: inline-block !important; -} -.d-inline { - display: inline !important; +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .d#{$infix}-none { display: none !important; } + .d#{$infix}-inline { display: inline !important; } + .d#{$infix}-inline-block { display: inline-block !important; } + .d#{$infix}-block { display: block !important; } + .d#{$infix}-table { display: table !important; } + .d#{$infix}-table-cell { display: table-cell !important; } + .d#{$infix}-flex { display: flex !important; } + .d#{$infix}-inline-flex { display: inline-flex !important; } + } } diff --git a/assets/stylesheets/bootstrap/utilities/_flex.scss b/assets/stylesheets/bootstrap/utilities/_flex.scss index 502885a..1b98aaa 100644 --- a/assets/stylesheets/bootstrap/utilities/_flex.scss +++ b/assets/stylesheets/bootstrap/utilities/_flex.scss @@ -2,36 +2,47 @@ // // Custom styles for additional flex alignment options. -@if $enable-flex { - @each $breakpoint in map-keys($grid-breakpoints) { - // Flex column reordering - @include media-breakpoint-up($breakpoint) { - .flex-#{$breakpoint}-first { order: -1; } - .flex-#{$breakpoint}-last { order: 1; } - .flex-#{$breakpoint}-unordered { order: 0; } - } - - // Alignment for every item - @include media-breakpoint-up($breakpoint) { - .flex-items-#{$breakpoint}-top { align-items: flex-start; } - .flex-items-#{$breakpoint}-middle { align-items: center; } - .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } - } - - // Alignment per item - @include media-breakpoint-up($breakpoint) { - .flex-#{$breakpoint}-top { align-self: flex-start; } - .flex-#{$breakpoint}-middle { align-self: center; } - .flex-#{$breakpoint}-bottom { align-self: flex-end; } - } - - // Horizontal alignment of item - @include media-breakpoint-up($breakpoint) { - .flex-items-#{$breakpoint}-left { justify-content: flex-start; } - .flex-items-#{$breakpoint}-center { justify-content: center; } - .flex-items-#{$breakpoint}-right { justify-content: flex-end; } - .flex-items-#{$breakpoint}-around { justify-content: space-around; } - .flex-items-#{$breakpoint}-between { justify-content: space-between; } - } +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .flex#{$infix}-first { order: -1; } + .flex#{$infix}-last { order: 1; } + .flex#{$infix}-unordered { order: 0; } + + .flex#{$infix}-row { flex-direction: row !important; } + .flex#{$infix}-column { flex-direction: column !important; } + .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; } + .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; } + + .flex#{$infix}-wrap { flex-wrap: wrap !important; } + .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } + .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; } + + .justify-content#{$infix}-start { justify-content: flex-start !important; } + .justify-content#{$infix}-end { justify-content: flex-end !important; } + .justify-content#{$infix}-center { justify-content: center !important; } + .justify-content#{$infix}-between { justify-content: space-between !important; } + .justify-content#{$infix}-around { justify-content: space-around !important; } + + .align-items#{$infix}-start { align-items: flex-start !important; } + .align-items#{$infix}-end { align-items: flex-end !important; } + .align-items#{$infix}-center { align-items: center !important; } + .align-items#{$infix}-baseline { align-items: baseline !important; } + .align-items#{$infix}-stretch { align-items: stretch !important; } + + .align-content#{$infix}-start { align-content: flex-start !important; } + .align-content#{$infix}-end { align-content: flex-end !important; } + .align-content#{$infix}-center { align-content: center !important; } + .align-content#{$infix}-between { align-content: space-between !important; } + .align-content#{$infix}-around { align-content: space-around !important; } + .align-content#{$infix}-stretch { align-content: stretch !important; } + + .align-self#{$infix}-auto { align-self: auto !important; } + .align-self#{$infix}-start { align-self: flex-start !important; } + .align-self#{$infix}-end { align-self: flex-end !important; } + .align-self#{$infix}-center { align-self: center !important; } + .align-self#{$infix}-baseline { align-self: baseline !important; } + .align-self#{$infix}-stretch { align-self: stretch !important; } } } diff --git a/assets/stylesheets/bootstrap/utilities/_float.scss b/assets/stylesheets/bootstrap/utilities/_float.scss index eea34bf..01655e9 100644 --- a/assets/stylesheets/bootstrap/utilities/_float.scss +++ b/assets/stylesheets/bootstrap/utilities/_float.scss @@ -1,13 +1,9 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - .float-#{$breakpoint}-left { - @include float-left(); - } - .float-#{$breakpoint}-right { - @include float-right(); - } - .float-#{$breakpoint}-none { - float: none !important; - } + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .float#{$infix}-left { @include float-left; } + .float#{$infix}-right { @include float-right; } + .float#{$infix}-none { @include float-none; } } } diff --git a/assets/stylesheets/bootstrap/utilities/_position.scss b/assets/stylesheets/bootstrap/utilities/_position.scss new file mode 100644 index 0000000..2cf08bf --- /dev/null +++ b/assets/stylesheets/bootstrap/utilities/_position.scss @@ -0,0 +1,23 @@ +// Positioning + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-fixed; +} + +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-fixed; +} + +.sticky-top { + position: sticky; + top: 0; + z-index: $zindex-sticky; +} diff --git a/assets/stylesheets/bootstrap/utilities/_sizing.scss b/assets/stylesheets/bootstrap/utilities/_sizing.scss new file mode 100644 index 0000000..a7dc3e4 --- /dev/null +++ b/assets/stylesheets/bootstrap/utilities/_sizing.scss @@ -0,0 +1,10 @@ +// Width and height + +@each $prop, $abbrev in (width: w, height: h) { + @each $size, $length in $sizes { + .#{$abbrev}-#{$size} { #{$prop}: $length !important; } + } +} + +.mw-100 { max-width: 100% !important; } +.mh-100 { max-height: 100% !important; } diff --git a/assets/stylesheets/bootstrap/utilities/_spacing.scss b/assets/stylesheets/bootstrap/utilities/_spacing.scss index 99c98f8..6056e2b 100644 --- a/assets/stylesheets/bootstrap/utilities/_spacing.scss +++ b/assets/stylesheets/bootstrap/utilities/_spacing.scss @@ -1,44 +1,43 @@ -// Width and height - -.w-100 { width: 100% !important; } -.h-100 { height: 100% !important; } - // Margin and Padding -.mx-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}-#{$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; } +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @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}#{$infix}-#{$size} { #{$prop}: $length-y $length-x !important; } + .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length-y !important; } + .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length-x !important; } + .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; } + .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length-x !important; } + .#{$abbrev}x#{$infix}-#{$size} { + #{$prop}-right: $length-x !important; + #{$prop}-left: $length-x !important; + } + .#{$abbrev}y#{$infix}-#{$size} { + #{$prop}-top: $length-y !important; + #{$prop}-bottom: $length-y !important; + } + } + } - // Axes - .#{$abbrev}x-#{$size} { - #{$prop}-right: $length-x !important; - #{$prop}-left: $length-x !important; + // Some special margin utils + .m#{$infix}-auto { margin: auto !important; } + .mt#{$infix}-auto { margin-top: auto !important; } + .mr#{$infix}-auto { margin-right: auto !important; } + .mb#{$infix}-auto { margin-bottom: auto !important; } + .ml#{$infix}-auto { margin-left: auto !important; } + .mx#{$infix}-auto { + margin-right: auto !important; + margin-left: auto !important; } - .#{$abbrev}y-#{$size} { - #{$prop}-top: $length-y !important; - #{$prop}-bottom: $length-y !important; + .my#{$infix}-auto { + margin-top: auto !important; + margin-bottom: auto !important; } } } - -// Positioning - -.pos-f-t { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: $zindex-navbar-fixed; -} diff --git a/assets/stylesheets/bootstrap/utilities/_text.scss b/assets/stylesheets/bootstrap/utilities/_text.scss index b4468e9..4ac9053 100644 --- a/assets/stylesheets/bootstrap/utilities/_text.scss +++ b/assets/stylesheets/bootstrap/utilities/_text.scss @@ -4,31 +4,33 @@ // Alignment -.text-justify { text-align: justify !important; } -.text-nowrap { white-space: nowrap !important; } -.text-truncate { @include text-truncate; } +.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; } + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .text#{$infix}-left { text-align: left !important; } + .text#{$infix}-right { text-align: right !important; } + .text#{$infix}-center { text-align: center !important; } } } // Transformation -.text-lowercase { text-transform: lowercase !important; } -.text-uppercase { text-transform: uppercase !important; } -.text-capitalize { text-transform: capitalize !important; } +.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; } +.font-weight-normal { font-weight: $font-weight-normal; } +.font-weight-bold { font-weight: $font-weight-bold; } +.font-italic { font-style: italic; } // Contextual colors diff --git a/assets/stylesheets/bootstrap/utilities/_visibility.scss b/assets/stylesheets/bootstrap/utilities/_visibility.scss index cdb1428..fcedc9c 100644 --- a/assets/stylesheets/bootstrap/utilities/_visibility.scss +++ b/assets/stylesheets/bootstrap/utilities/_visibility.scss @@ -3,7 +3,7 @@ // .invisible { - visibility: hidden !important; + @include invisible(); } // Responsive visibility utilities |