diff options
author | Starsam80 <samraskauskas@gmail.com> | 2016-11-29 00:23:59 +0300 |
---|---|---|
committer | Mark Otto <markd.otto@gmail.com> | 2016-11-29 00:23:59 +0300 |
commit | b226766b62bf91c54dba5e586e557c39a03bdda6 (patch) | |
tree | 3888b37c71c80227daf16d3a69354d6975fb4ccb | |
parent | 2f9a94caac58a68a12c17818da0d1e2c2402368e (diff) |
Remove lots of duplication + minor cleanup (#21238)
* Remove comment that duplicated some code
* Use transition mixin whenever possible
* Create a new function to reduce duplication
* Use the new `breakpoint-infix` method
-rw-r--r-- | scss/_animation.scss | 10 | ||||
-rw-r--r-- | scss/_card.scss | 3 | ||||
-rw-r--r-- | scss/_carousel.scss | 4 | ||||
-rw-r--r-- | scss/_images.scss | 2 | ||||
-rw-r--r-- | scss/_modal.scss | 2 | ||||
-rw-r--r-- | scss/_navbar.scss | 5 | ||||
-rw-r--r-- | scss/mixins/_breakpoints.scss | 11 | ||||
-rw-r--r-- | scss/mixins/_grid-framework.scss | 83 | ||||
-rw-r--r-- | scss/utilities/_display.scss | 26 | ||||
-rw-r--r-- | scss/utilities/_flex.scss | 70 | ||||
-rw-r--r-- | scss/utilities/_float.scss | 16 | ||||
-rw-r--r-- | scss/utilities/_spacing.scss | 47 | ||||
-rw-r--r-- | scss/utilities/_text.scss | 16 |
13 files changed, 94 insertions, 201 deletions
diff --git a/scss/_animation.scss b/scss/_animation.scss index 4112468d04..2586bf2d16 100644 --- a/scss/_animation.scss +++ b/scss/_animation.scss @@ -1,9 +1,7 @@ .fade { opacity: 0; - @if $enable-transitions { - transition: opacity .15s linear; - } + @include transition(opacity .15s linear); &.active { opacity: 1; @@ -34,9 +32,5 @@ tbody { height: 0; overflow: hidden; - @if $enable-transitions { - transition-timing-function: ease; - transition-duration: .35s; - transition-property: height; - } + @include transition(height .35s ease); } diff --git a/scss/_card.scss b/scss/_card.scss index 23a5e07c72..c3b9315182 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -7,9 +7,8 @@ display: block; margin-bottom: $card-spacer-y; background-color: $card-bg; - // border: $card-border-width solid $card-border-color; - @include border-radius($card-border-radius); border: $card-border-width solid $card-border-color; + @include border-radius($card-border-radius); } .card-block { diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 625ab1c8de..09f6ea73e0 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -11,7 +11,7 @@ > .carousel-item { position: relative; display: none; - transition: .6s ease-in-out left; + @include transition(left .6s ease-in-out); // Account for jankitude on images > img, @@ -22,7 +22,7 @@ // CSS3 transforms when supported by the browser @include if-supports-3d-transforms() { - transition: transform .6s ease-in-out; + @include transition(transform .6s ease-in-out); backface-visibility: hidden; perspective: 1000px; diff --git a/scss/_images.scss b/scss/_images.scss index 2189f719f0..c7b95dec9d 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -16,7 +16,7 @@ background-color: $thumbnail-bg; border: $thumbnail-border-width solid $thumbnail-border-color; @include border-radius($thumbnail-border-radius); - transition: all .2s ease-in-out; + @include transition(all .2s ease-in-out); @include box-shadow($thumbnail-box-shadow); // Keep them at most 100% wide diff --git a/scss/_modal.scss b/scss/_modal.scss index c6f56637dd..85aef719b6 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -28,7 +28,7 @@ // When fading in the modal, animate it to slide down &.fade .modal-dialog { - transition: transform .3s ease-out; + @include transition(transform .3s ease-out); transform: translate(0, -25%); } &.active .modal-dialog { transform: translate(0, 0); } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index c6cc4e2fec..2715f1d09f 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -257,9 +257,8 @@ .navbar-toggleable { @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); - - // Get rid of the 'xs' prefix while reducing duplication - #{if(breakpoint-min($breakpoint, $grid-breakpoints), "&-#{$breakpoint}", "&")} { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + &#{$infix} { @include clearfix; @include media-breakpoint-down($breakpoint) { diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 5abe252666..178cfd5033 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -38,6 +38,17 @@ @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); } +// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. +// Useful for making responsive utilities. +// +// >> breakpoint-infix(xs, (xs: 0, sm: 544px, md: 768px)) +// "" (Returns a blank string) +// >> breakpoint-infix(sm, (xs: 0, sm: 544px, md: 768px)) +// "-sm" +@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { + @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); +} + // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 6ea2e7882d..2df7b988ef 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -18,96 +18,53 @@ } @each $breakpoint in map-keys($breakpoints) { - // Logic is a little reversed here: `breakpoint-min` returns false when it's the smallest breakpoint. - $min: not breakpoint-min($breakpoint, $breakpoints); + $infix: breakpoint-infix($breakpoint, $breakpoints); // Allow columns to stretch full width below their breakpoints @for $i from 1 through $columns { - @if $min { - .col-#{$i} { - @extend %grid-column; - } - } @else { - .col-#{$breakpoint}-#{$i} { - @extend %grid-column; - } + .col#{$infix}-#{$i} { + @extend %grid-column; } } @if $enable-flex { - @if $min { - .col { - @extend %grid-column; - } - } @else { - .col-#{$breakpoint} { - @extend %grid-column; - } + .col#{$infix} { + @extend %grid-column; } } @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns @if $enable-flex { - @if $min { - .col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-auto { - flex: 0 0 auto; - width: auto; - } - } @else { - .col-#{$breakpoint} { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - .col-#{$breakpoint}-auto { - flex: 0 0 auto; - width: auto; - } + .col#{$infix} { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .col#{$infix}-auto { + flex: 0 0 auto; + width: auto; } } @for $i from 1 through $columns { - @if $min { - .col-#{$i} { - @include make-col($i, $columns); - } - } @else { - .col-#{$breakpoint}-#{$i} { - @include make-col($i, $columns); - } + .col#{$infix}-#{$i} { + @include make-col($i, $columns); } } @each $modifier in (pull, push) { @for $i from 0 through $columns { - @if $min { - .#{$modifier}-#{$i} { - @include make-col-modifier($modifier, $i, $columns) - } - } @else { - .#{$modifier}-#{$breakpoint}-#{$i} { - @include make-col-modifier($modifier, $i, $columns) - } + .#{$modifier}#{$infix}-#{$i} { + @include make-col-modifier($modifier, $i, $columns) } } } // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { - @if not $min or $i != 0 { // Avoid emitting useless .offset-xs-0 - @if $min { - .offset-#{$i} { - @include make-col-modifier(offset, $i, $columns) - } - } @else { - .offset-#{$breakpoint}-#{$i} { - @include make-col-modifier(offset, $i, $columns) - } + @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0 + .offset#{$infix}-#{$i} { + @include make-col-modifier(offset, $i, $columns) } } } diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss index 6325f72227..395e41c397 100644 --- a/scss/utilities/_display.scss +++ b/scss/utilities/_display.scss @@ -5,24 +5,14 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - $min: breakpoint-min($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - @if $min { - .d-#{$breakpoint}-none { display: none !important; } - .d-#{$breakpoint}-inline { display: inline !important; } - .d-#{$breakpoint}-inline-block { display: inline-block !important; } - .d-#{$breakpoint}-block { display: block !important; } - .d-#{$breakpoint}-table { display: table !important; } - .d-#{$breakpoint}-table-cell { display: table-cell !important; } - .d-#{$breakpoint}-flex { display: flex !important; } - } @else { - .d-none { display: none !important; } - .d-inline { display: inline !important; } - .d-inline-block { display: inline-block !important; } - .d-block { display: block !important; } - .d-table { display: table !important; } - .d-table-cell { display: table-cell !important; } - .d-flex { display: flex !important; } - } + .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; } } } diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index 6e3c39b8f7..c3efb9d71d 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -5,53 +5,29 @@ @if $enable-flex { @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - $min: breakpoint-min($breakpoint, $grid-breakpoints); - - @if $min { - // Flex column reordering - .flex-#{$breakpoint}-first { order: -1; } - .flex-#{$breakpoint}-last { order: 1; } - .flex-#{$breakpoint}-unordered { order: 0; } - - // Alignment for every item - .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 - .flex-#{$breakpoint}-top { align-self: flex-start; } - .flex-#{$breakpoint}-middle { align-self: center; } - .flex-#{$breakpoint}-bottom { align-self: flex-end; } - - // Horizontal alignment of item - .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; } - } @else { - // Flex column reordering - .flex-first { order: -1; } - .flex-last { order: 1; } - .flex-unordered { order: 0; } - - // Alignment for every item - .flex-items-top { align-items: flex-start; } - .flex-items-middle { align-items: center; } - .flex-items-bottom { align-items: flex-end; } - - // Alignment per item - .flex-top { align-self: flex-start; } - .flex-middle { align-self: center; } - .flex-bottom { align-self: flex-end; } - - // Horizontal alignment of item - .flex-items-left { justify-content: flex-start; } - .flex-items-center { justify-content: center; } - .flex-items-right { justify-content: flex-end; } - .flex-items-around { justify-content: space-around; } - .flex-items-between { justify-content: space-between; } - } + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + // Flex column reordering + .flex#{$infix}-first { order: -1; } + .flex#{$infix}-last { order: 1; } + .flex#{$infix}-unordered { order: 0; } + + // Alignment for every item + .flex-items#{$infix}-top { align-items: flex-start; } + .flex-items#{$infix}-middle { align-items: center; } + .flex-items#{$infix}-bottom { align-items: flex-end; } + + // Alignment per item + .flex#{$infix}-top { align-self: flex-start; } + .flex#{$infix}-middle { align-self: center; } + .flex#{$infix}-bottom { align-self: flex-end; } + + // Horizontal alignment of item + .flex-items#{$infix}-left { justify-content: flex-start; } + .flex-items#{$infix}-center { justify-content: center; } + .flex-items#{$infix}-right { justify-content: flex-end; } + .flex-items#{$infix}-around { justify-content: space-around; } + .flex-items#{$infix}-between { justify-content: space-between; } } } } diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss index 5f8c2d5879..01655e9a52 100644 --- a/scss/utilities/_float.scss +++ b/scss/utilities/_float.scss @@ -1,17 +1,9 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - $min: breakpoint-min($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - @if $min { - // everything else - .float-#{$breakpoint}-left { @include float-left; } - .float-#{$breakpoint}-right { @include float-right; } - .float-#{$breakpoint}-none { @include float-none; } - } @else { - // xs - .float-left { @include float-left; } - .float-right { @include float-right; } - .float-none { @include float-none; } - } + .float#{$infix}-left { @include float-left; } + .float#{$infix}-right { @include float-right; } + .float#{$infix}-none { @include float-none; } } } diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index a845cf9ad8..a8d8e0afb5 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -20,40 +20,21 @@ $length-y: map-get($lengths, y); @include media-breakpoint-up($breakpoint) { - $min: breakpoint-min($breakpoint, $grid-breakpoints); - - @if $min { - // everything else - .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } - .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; } - .#{$abbrev}x-#{$breakpoint}-#{$size} { - #{$prop}-right: $length-x !important; - #{$prop}-left: $length-x !important; - } - .#{$abbrev}y-#{$breakpoint}-#{$size} { - #{$prop}-top: $length-y !important; - #{$prop}-bottom: $length-y !important; - } - } @else { - // xs - .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } - .#{$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; } - .#{$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; - } + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .#{$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; } - } } } diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 75f694a853..4ac90533ac 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -12,17 +12,11 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - $min: breakpoint-min($breakpoint, $grid-breakpoints); - - @if $min { - .text-#{$breakpoint}-left { text-align: left !important; } - .text-#{$breakpoint}-right { text-align: right !important; } - .text-#{$breakpoint}-center { text-align: center !important; } - } @else { - .text-left { text-align: left !important; } - .text-right { text-align: right !important; } - .text-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; } } } |