From 99676c780963d3cfe671294a776b738bb4876480 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 17 Jul 2019 06:56:54 -0700 Subject: [PATCH 23/24] Use :focus-within for .form-file focus state (#29036) Fixes #26563, closes #26576, closes #29021. --- scss/forms/_form-file.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss index 7e6a0adba54c..b3c0d0df0284 100644 --- a/scss/forms/_form-file.scss +++ b/scss/forms/_form-file.scss @@ -14,11 +14,18 @@ margin: 0; opacity: 0; + // Separate rules for :focus and :focus-within as IE doesn't support the latter, and + // thus ignores the entire ruleset. See https://github.com/twbs/bootstrap/pull/29036. &:focus ~ .form-file-label { border-color: $form-file-focus-border-color; box-shadow: $form-file-focus-box-shadow; } + &:focus-within ~ .form-file-label { + border-color: $form-file-focus-border-color; + box-shadow: $form-file-focus-box-shadow; + } + // Use disabled attribute instead of :disabled pseudo-class // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231 &[disabled] ~ .form-file-label .form-file-text { From 62b8e849701ed35ada121b0c7060641ee93bb896 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Thu, 18 Jul 2019 07:49:39 +0200 Subject: [PATCH 24/24] Make it possible to change default alignment & allow to inherit alignment from table (#29039) --- scss/_tables.scss | 6 +++- scss/_variables.scss | 2 ++ site/content/docs/4.3/content/tables.md | 37 +++++++++++++++++++++++++ 3 files changed, 44 insertions(+), 1 deletion(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index d1fbdc21d2f2..20177384b572 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -6,15 +6,19 @@ width: 100%; margin-bottom: $spacer; color: $table-color; + vertical-align: $table-cell-vertical-align; background-color: $table-bg; // Reset for nesting within parents with `background-color`. th, td { padding: $table-cell-padding; - vertical-align: top; border-bottom: $table-border-width solid $table-border-color; } + tbody { + vertical-align: inherit; + } + td { border-bottom: $table-border-width solid $table-border-color; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 4cab2f5f3028..f376e9dfba57 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -355,6 +355,8 @@ $hr-margin-y: $spacer !default; $table-cell-padding: .5rem !default; $table-cell-padding-sm: .25rem !default; +$table-cell-vertical-align: top !default; + $table-color: $body-color !default; $table-bg: null !default; $table-accent-bg: rgba($black, .05) !default; diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md index f29e525f4af3..4a029ace7d05 100644 --- a/site/content/docs/4.3/content/tables.md +++ b/site/content/docs/4.3/content/tables.md @@ -396,6 +396,43 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` {{< /example >}} +## Vertical alignment + +Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the the top by default. + +{{< example >}} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Heading 1Heading 2Heading 2Heading 4
This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableNulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
This cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowNulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell is aligned to the top.Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
+{{< /example >}} + ### Variants Use contextual classes to color table rows or individual cells.