From eb2e1102be0f4641ee3e5c4e7853360d5a04e3d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2016 20:26:17 -0800 Subject: Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) * remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom --- scss/.scss-lint.yml | 2 + scss/_card.scss | 78 +++++++++++--------------------------- scss/_forms.scss | 81 +++++++++++----------------------------- scss/_input-group.scss | 52 +++++++------------------- scss/_list-group.scss | 17 +++------ scss/_media.scss | 44 ++++++---------------- scss/_nav.scss | 14 +++---- scss/_type.scss | 11 ------ scss/_variables.scss | 1 - scss/bootstrap-flex.scss | 8 ---- scss/mixins/_grid-framework.scss | 32 ++++++---------- scss/mixins/_grid.scss | 34 +++++------------ scss/utilities/_flex.scss | 44 +++++++++++----------- 13 files changed, 122 insertions(+), 296 deletions(-) delete mode 100644 scss/bootstrap-flex.scss (limited to 'scss') diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index 2f5dc20e1..2a6914a07 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -160,6 +160,8 @@ linters: - flex-grow - flex-order - flex-pack + - align-items + - justify-content - float - width - min-width diff --git a/scss/_card.scss b/scss/_card.scss index c3b931518..3cbd1998a 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -12,9 +12,6 @@ } .card-block { - @if (not $enable-flex) { - @include clearfix; - } padding: $card-spacer-x; } @@ -69,9 +66,6 @@ // .card-header { - @if (not $enable-flex) { - @include clearfix; - } padding: $card-spacer-y $card-spacer-x; margin-bottom: 0; // Removes the default margin-bottom of background-color: $card-cap-bg; @@ -83,9 +77,6 @@ } .card-footer { - @if (not $enable-flex) { - @include clearfix; - } padding: $card-spacer-y $card-spacer-x; background-color: $card-cap-bg; border-top: $card-border-width solid $card-border-color; @@ -205,68 +196,41 @@ // // Those changes are noted by `// Margin balancing`. -@if $enable-flex { - @include media-breakpoint-up(sm) { - .card-deck { +@include media-breakpoint-up(sm) { + .card-deck { + display: flex; + flex-flow: row wrap; + margin-right: -$card-deck-margin; + margin-bottom: $card-spacer-y; // Margin balancing + margin-left: -$card-deck-margin; + + .card { display: flex; - flex-flow: row wrap; - margin-right: -$card-deck-margin; - margin-bottom: $card-spacer-y; // Margin balancing - margin-left: -$card-deck-margin; - - .card { - flex: 1 0 0; - margin-right: $card-deck-margin; - margin-bottom: 0; // Margin balancing - margin-left: $card-deck-margin; - } + flex: 1 0 0; + flex-direction: column; + margin-right: $card-deck-margin; + margin-bottom: 0; // Margin balancing + margin-left: $card-deck-margin; } - } -} @else { - @include media-breakpoint-up(sm) { - $space-between-cards: (2 * $card-deck-margin); - .card-deck { - display: table; - width: 100%; - margin-bottom: $card-spacer-y; // Margin balancing - table-layout: fixed; - border-spacing: $space-between-cards 0; - - .card { - display: table-cell; - margin-bottom: 0; // Margin balancing - vertical-align: top; - } - } - .card-deck-wrapper { - margin-right: (-$space-between-cards); - margin-left: (-$space-between-cards); + + .card-block { + flex-grow: 1; } } } + // // Card groups // @include media-breakpoint-up(sm) { .card-group { - @if $enable-flex { - display: flex; - flex-flow: row wrap; - } @else { - display: table; - width: 100%; - table-layout: fixed; - } + display: flex; + flex-flow: row wrap; .card { - @if $enable-flex { - flex: 1 0 0; - } @else { - display: table-cell; - vertical-align: top; - } + flex: 1 0 0; + .card { margin-left: 0; diff --git a/scss/_forms.scss b/scss/_forms.scss index 672d9dfc1..5bd86489a 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -300,39 +300,30 @@ select.form-control-lg { // default HTML form controls and our custom form controls (e.g., input groups). .form-inline { - @if $enable-flex { - display: flex; - flex-flow: row wrap; - - // Because we use flex, the initial sizing of checkboxes is collapsed and - // doesn't occupy the full-width (which is what we want for xs grid tier), - // so we force that here. - .form-check { - width: 100%; - } + display: flex; + flex-flow: row wrap; + + // Because we use flex, the initial sizing of checkboxes is collapsed and + // doesn't occupy the full-width (which is what we want for xs grid tier), + // so we force that here. + .form-check { + width: 100%; } // Kick in the inline @include media-breakpoint-up(sm) { label { - @if $enable-flex { - display: flex; - align-items: center; - justify-content: center; - } + display: flex; + align-items: center; + justify-content: center; margin-bottom: 0; } // Inline-block all the things for "inline" .form-group { - @if $enable-flex { - display: flex; - flex: 0 0 auto; - flex-flow: row wrap; - } @else { - display: inline-block; - vertical-align: middle; - } + display: flex; + flex: 0 0 auto; + flex-flow: row wrap; margin-bottom: 0; } @@ -351,24 +342,6 @@ select.form-control-lg { .input-group { width: auto; - - @if not $enable-flex { - display: inline-table; - vertical-align: middle; - - .input-group-addon, - .input-group-btn, - .form-control { - width: auto; - } - } - } - - // Input groups need that 100% width though - .input-group > .form-control { - @if not $enable-flex { - width: 100%; - } } .form-control-label { @@ -379,14 +352,9 @@ select.form-control-lg { // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match. .form-check { - @if $enable-flex { - display: flex; - align-items: center; - justify-content: center; - } @else { - display: inline-block; - vertical-align: middle; - } + display: flex; + align-items: center; + justify-content: center; width: auto; margin-top: 0; margin-bottom: 0; @@ -401,22 +369,15 @@ select.form-control-lg { // Custom form controls .custom-control { + display: flex; + align-items: center; + justify-content: center; padding-left: 0; - - @if $enable-flex { - display: flex; - align-items: center; - justify-content: center; - } @else { - vertical-align: middle; - } } .custom-control-indicator { position: static; display: inline-block; - @if $enable-flex { - margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate. - } + margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate. vertical-align: text-bottom; } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 17b9c8402..dc11490c6 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -4,54 +4,34 @@ .input-group { position: relative; + display: flex; width: 100%; - @if $enable-flex { - display: flex; - } @else { - display: table; - // Prevent input groups from inheriting border styles from table cells when - // placed within a table. - border-collapse: separate; - } - .form-control { // Ensure that the input is always above the *appended* addon button for // proper border colors. position: relative; z-index: 2; + flex: 1 1 auto; + // Add width 1% and flex-basis auto to ensure that button will not wrap out + // the column. Applies to IE Edge+ and Firefox. Chrome do not require this. + width: 1%; + margin-bottom: 0; + // Bring the "active" form control to the front @include hover-focus-active { z-index: 3; } - - @if $enable-flex { - flex: 1 1 auto; - // Add width 1% and flex-basis auto to ensure that button will not wrap out - // the column. Applies to IE Edge+ and Firefox. Chrome do not require this. - width: 1%; - } @else { - // IE9 fubars the placeholder attribute in text inputs and the arrows on - // select elements in input groups. To fix it, we float the input. Details: - // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 - float: left; - width: 100%; - } - margin-bottom: 0; } } .input-group-addon, .input-group-btn, .input-group .form-control { - @if $enable-flex { - // Vertically centers the content of the addons within the input group - display: flex; - flex-direction: column; - justify-content: center; - } @else { - display: table-cell; - } + // Vertically centers the content of the addons within the input group + display: flex; + flex-direction: column; + justify-content: center; &:not(:first-child):not(:last-child) { @include border-radius(0); @@ -60,9 +40,6 @@ .input-group-addon, .input-group-btn { - @if not $enable-flex { - width: 1%; - } white-space: nowrap; vertical-align: middle; // Match the inputs } @@ -167,11 +144,8 @@ // element above the siblings. > .btn { position: relative; - - @if $enable-flex { - // Vertically stretch the button and center its content - flex: 1; - } + // Vertically stretch the button and center its content + flex: 1; + .btn { margin-left: (-$input-btn-border-width); diff --git a/scss/_list-group.scss b/scss/_list-group.scss index bc949af30..4d78d95c0 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -3,10 +3,8 @@ // Easily usable on