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
This commit is contained in:
Starsam80
Mark Otto
parent
2f9a94caac
commit
b226766b62
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue