Refactored Admonitions with flex layout

src/assets/stylesheets/extensions/_admonition.scss

@@ -21,7 +21,7 @@
 ////
 
 // ----------------------------------------------------------------------------
-// Rules
+// Rules: layout
 // ----------------------------------------------------------------------------
 
 // Icon definitions
@@ -82,81 +82,35 @@
     .md-typeset__table {
       padding: 0 px2rem(12px);
     }
-
-    // Build representational classes
-    @each $names, $tint in (
-      abstract summary tldr: $clr-light-blue-a400,
-      info todo: $clr-cyan-a700,
-      tip hint important: $clr-teal-a700,
-      success check done: $clr-green-a700,
-      question help faq: $clr-light-green-a700,
-      warning caution attention: $clr-orange-a400,
-      failure fail missing: $clr-red-a200,
-      danger error: $clr-red-a400,
-      bug: $clr-pink-a400,
-      example: $clr-deep-purple-a400,
-      quote cite: $clr-grey
-    ) {
-      $type: #{nth($names, 1)};
-
-      // Define base class
-      &.#{$type} {
-        border-left-color: $tint;
-
-        // Title
-        > :first-child {
-          background-color: transparentize($tint, 0.9);
-
-          // Icon
-          &::before {
-            background-color: $tint;
-            mask-image: var(--md-admonition-icon--#{$type});
-          }
-        }
-      }
-
-      // Define synonyms for base class
-      @if length($names) > 1 {
-        @for $n from 2 through length($names) {
-          &.#{nth($names, $n)} {
-            @extend .#{nth($names, 1)};
-          }
-        }
-      }
-    }
   }
 
   // Admonition title
   .admonition-title {
+    display: flex;
     margin: 0 px2rem(-12px);
-    padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
+    padding: px2rem(8px) px2rem(12px);
     font-weight: 700;
     background-color: transparentize($clr-blue-a200, 0.9);
 
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
-    }
-
     // Reset spacing, if title is the only element
-    &:last-child {
+    html &:last-child {
       margin-bottom: 0;
     }
 
     // Icon
     &::before {
-      position: absolute;
+      flex-shrink: 0;
       width: px2rem(20px);
       height: px2rem(20px);
-      margin-left: px2rem(-28px);
+      margin-right: px2rem(8px);
       background-color: $clr-blue-a200;
       mask-image: var(--md-admonition-icon--note);
       content: "";
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        margin-right: px2rem(-28px);
+        margin-right: initial;
-        margin-left: initial;
+        margin-left: px2rem(8px);
       }
     }
 
@@ -171,3 +125,48 @@
     }
   }
 }
+
+// ----------------------------------------------------------------------------
+// Rules: different flavours
+// ----------------------------------------------------------------------------
+
+@each $names, $tint in (
+  abstract summary tldr: $clr-light-blue-a400,
+  info todo: $clr-cyan-a700,
+  tip hint important: $clr-teal-a700,
+  success check done: $clr-green-a700,
+  question help faq: $clr-light-green-a700,
+  warning caution attention: $clr-orange-a400,
+  failure fail missing: $clr-red-a200,
+  danger error: $clr-red-a400,
+  bug: $clr-pink-a400,
+  example: $clr-deep-purple-a400,
+  quote cite: $clr-grey
+) {
+  $type: #{nth($names, 1)};
+
+  // Define base class
+  .md-typeset .admonition.#{$type} {
+    border-left-color: $tint;
+  }
+
+  // Define base class
+  .md-typeset .#{$type} > .admonition-title {
+    background-color: transparentize($tint, 0.9);
+
+    // Icon
+    &::before {
+      background-color: $tint;
+      mask-image: var(--md-admonition-icon--#{$type});
+    }
+  }
+
+  // Define synonyms for base class
+  @if length($names) > 1 {
+    @for $n from 2 through length($names) {
+      .#{nth($names, $n)} {
+        @extend .#{nth($names, 1)};
+      }
+    }
+  }
+}

src/assets/stylesheets/extensions/pymdown/_details.scss

@@ -43,28 +43,17 @@
 
     // Rotate title icon
     &[open] > summary::after {
-      transform: rotate(180deg);
+      transform: rotate(0deg);
     }
 
     // Remove bottom spacing
     &:not([open]) {
       padding-bottom: 0;
-
-      // Remove bottom border if block is closed
-      > summary {
-        border-bottom: none;
-      }
     }
 
-    // Increase spacing to the right - scoped here for higher specificity
+    // Ensure clickable area, even if no title is set
     summary {
-      position: relative;
+      min-height: px2rem(20px);
-      padding-right: px2rem(40px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        padding-left: px2rem(40px);
-      }
     }
   }
 
@@ -73,7 +62,6 @@
     @extend .admonition-title;
 
     // Hack: set to block, so Firefox doesn't render marker
-    display: block;
     outline: none;
     cursor: pointer;
 
@@ -84,18 +72,19 @@
 
     // Icon
     &::after {
-      position: absolute;
+      flex-shrink: 0;
-      right: px2rem(12px);
       width: px2rem(20px);
       height: px2rem(20px);
-      background-color: var(--md-default-fg-color--lighter);
+      margin-left: auto;
-      mask-image: var(--md-details-icon);
+      background-image: var(--md-details-icon);
+      transform: rotate(-90deg);
+      transition: transform 250ms;
       content: "";
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        right: initial;
+        margin-right: auto;
-        left: px2rem(12px);
+        margin-left: initial;
       }
     }
   }