Collapse with flex elements - simple approach (#25806)

* #22600: prevent display:block for visible content

* allow transition for elements with show class

diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index df5744b25f5a297a93e2e25e1cd1efdcb620a7a1..c8d91e27176a9ffe2fe0687e8f16328d2e2f1dd9 100644 (file)
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -1,30 +1,16 @@
 // stylelint-disable selector-no-qualifying-type
 
 .fade {
-  opacity: 0;
   @include transition($transition-fade);
 
-  &.show {
-    opacity: 1;
+  &:not(.show) {
+    opacity: 0;
   }
 }
 
 .collapse {
-  display: none;
-  &.show {
-    display: block;
-  }
-}
-
-tr {
-  &.collapse.show {
-    display: table-row;
-  }
-}
-
-tbody {
-  &.collapse.show {
-    display: table-row-group;
+  &:not(.show) {
+    display: none;
   }
 }