mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 10:34:07 +02:00
Code Issues Releases Wiki 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

26
scss/utilities/_display.scss
View File

@@ -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; }
}
}

62
scss/utilities/_flex.scss
View File

@@ -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);
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if $min {
// Flex column reordering
.flex-#{$breakpoint}-first { order: -1; }
.flex-#{$breakpoint}-last { order: 1; }
.flex-#{$breakpoint}-unordered { order: 0; }
// Flex column reordering
.flex#{$infix}-first { order: -1; }
.flex#{$infix}-last { order: 1; }
.flex#{$infix}-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 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-#{$breakpoint}-top { align-self: flex-start; }
.flex-#{$breakpoint}-middle { align-self: center; }
.flex-#{$breakpoint}-bottom { align-self: 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-#{$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; }
}
// 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; }
}
}
}

16
scss/utilities/_float.scss
View File

@@ -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; }
}
}

45
scss/utilities/_spacing.scss
View File

@@ -20,40 +20,21 @@
$length-y: map-get($lengths, y);
@include media-breakpoint-up($breakpoint) {
$min: breakpoint-min($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($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;
}
.#{$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;
}
}
}
}

14
scss/utilities/_text.scss
View File

@@ -12,17 +12,11 @@
@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 {
.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; }
}
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}