mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Remove lots of duplication + minor cleanup (#21238)

Browse Source 
* Remove comment that duplicated some code
* Use transition mixin whenever possible
* Create a new function to reduce duplication
* Use the new `breakpoint-infix` method
This commit is contained in:
Starsam80
2016-11-28 14:23:59 -07:00
committed by Mark Otto
parent 2f9a94caac
commit b226766b62
13 changed files with 88 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/mixins/_breakpoints.scss
+11
View File
@@ -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) {
scss/mixins/_grid-framework.scss
+20 -63
View File
@@ -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)
}
}
}