Extend styling of commands from property-cards

Author: Tim-Obert

packages/typo3-docs-theme/assets/sass/components/_command.scss

@@ -0,0 +1,20 @@
+dl.command {
+    @extend .property-card;
+
+    & > dt {
+        a:not([class*=headerlink]) {
+            float: right;
+        }
+    }
+
+    .command-description {
+        margin-block: $spacer;
+    }
+
+    .command-options,
+    .command-arguments {
+        section {
+            margin-left: calc($spacer * 2);
+        }
+    }
+}

packages/typo3-docs-theme/assets/sass/theme.scss

@@ -29,6 +29,7 @@
 @import 'components/button';
 @import 'components/card';
 @import 'components/code';
+@import 'components/command';
 @import 'components/directoryTree';
 @import 'components/frame';
 @import 'components/images';

packages/typo3-docs-theme/resources/public/css/theme.css

@@ -23831,6 +23831,17 @@ code {
     max-width: 60vw;
   }
 }
+dl.command > dt a:not([class*=headerlink]) {
+  float: right;
+}
+dl.command .command-description {
+  margin-block: 1rem;
+}
+dl.command .command-options section,
+dl.command .command-arguments section {
+  margin-left: 2rem;
+}
+
 .directory-tree ul {
   margin-bottom: 0;
   list-style: none;
@@ -25233,7 +25244,7 @@ ul[class*=horizbuttons-][class*=-note-] > li:hover, ul[class*=horizbuttons-][cla
   content: "\f071";
 }
 
-.property-card, .rst-content dl.php, dl.confval {
+.property-card, .rst-content dl.php, dl.confval, dl.command {
   background-color: #ffffff;
   border-radius: 0.375rem;
   margin-bottom: 1.5rem;
@@ -25243,20 +25254,20 @@ ul[class*=horizbuttons-][class*=-note-] > li:hover, ul[class*=horizbuttons-][cla
   word-wrap: anywhere;
   white-space: normal;
 }
-.property-card > dt, .rst-content dl.php > dt, dl.confval > dt {
+.property-card > dt, .rst-content dl.php > dt, dl.confval > dt, dl.command > dt {
   display: block;
   background-color: rgb(242.25, 242.25, 242.25);
   color: #000;
   font-size: 1.25em;
   padding: 0.25em 0.5em;
   margin-bottom: 0.75em;
 }
-.property-card > dt code, .rst-content dl.php > dt code, dl.confval > dt code {
+.property-card > dt code, .rst-content dl.php > dt code, dl.confval > dt code, dl.command > dt code {
   color: #000;
   word-wrap: anywhere;
   white-space: normal;
 }
-.property-card > dd, .rst-content dl.php > dd, dl.confval > dd {
+.property-card > dd, .rst-content dl.php > dd, dl.confval > dd, dl.command > dd {
   margin-right: 1rem;
 }