mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki Activity

Responsive display utilities (#20934)

Browse Source 
* Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name
* make floats use the same format, add float-none mixin
This commit is contained in:
Mark Otto
2016-10-31 21:27:56 -07:00
committed by GitHub
parent 76d53404b5
commit ffaad0a819
12 changed files with 73 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
scss/utilities/_display.scss
View File

@@ -2,12 +2,29 @@
// 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) {
$min: breakpoint-min($breakpoint, $grid-breakpoints);
@if $min {
@media (min-width: $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; }
}
}
}

22
scss/utilities/_float.scss
View File

@@ -1,13 +1,19 @@
@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;
$min: breakpoint-min($breakpoint, $grid-breakpoints);
@if $min {
// everything else
@media (min-width: $min) {
.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; }
}
}
}