Style PHP-Classes + Add property-card als central styling for property-cards

Author: Tim-Obert

packages/typo3-docs-theme/assets/sass/components/directives/_confval.scss

@@ -1,27 +1,4 @@
 
 dl.confval {
-    background-color: $white;
-    border-radius: $border-radius;
-    margin-bottom: $spacer * 1.5;
-    padding-bottom: $spacer * .3;
-    border: solid 3px $light;
-    border-top-color: $gray-500;
-    word-wrap: anywhere;
-    white-space: normal;
-    & > dt {
-        display: block;
-        background-color: $light;
-        color: color-contrast($light);
-        font-size: $h4-font-size;
-        padding: .25em .5em;
-        margin-bottom: .75em;
-        code {
-            color: color-contrast($light);
-            word-wrap: anywhere;
-            white-space: normal;
-        }
-    }
-    & > dd {
-        margin-right: 1rem;
-    }
+    @extend .property-card;
 }

packages/typo3-docs-theme/assets/sass/components/directives/_phpdomain.scss

@@ -3,47 +3,6 @@
 //
 .rst-content {
     dl.php {
-        border-radius: $border-radius;
-        margin-bottom: $spacer;
-        padding-bottom: $spacer * .3;
-        .descname {
-            background-color: transparent;
-            border: none;
-            color: $code-color;
-            font-size: 100%;
-            padding: 0;
-        }
-        .optional {
-            padding: 0 .25em;
-        }
-        code {
-            padding: 0 .25em;
-        }
-        .pre {
-            font-family: $font-family-monospace;
-        }
-        .headerlink,
-        .optional {
-            color: $body-color;
-        }
-        .viewcode-link {
-            padding-left: 1em;
-        }
-        & > dt {
-            background-color: lighten($info, 50%);
-            border-radius: $border-radius;
-            border-top: solid 3px $info;
-            color: darken($info, 50%);
-            display: inline-block;
-            font-size: $font-size-base;
-            margin-bottom: calc(#{$spacer} / 2);
-            padding: .25em .5em;
-            position: relative;
-        }
-        dl.php > dt {
-            background-color: $lighter;
-            border-top: 2px solid darken($lighter, 30%);
-            color: color-contrast($lighter);
-        }
+        @extend .property-card;
     }
 }

packages/typo3-docs-theme/assets/sass/components/directives/_propertyCard.scss

@@ -0,0 +1,32 @@
+//
+// _propertyCard.scss used to display confvals, commands and php-classes
+//
+.property-card {
+    background-color: $white;
+    border-radius: $border-radius;
+    margin-bottom: $spacer * 1.5;
+    padding-bottom: $spacer * .3;
+    border: solid 3px $light;
+    border-top-color: $gray-500;
+    word-wrap: anywhere;
+    white-space: normal;
+
+    & > dt {
+        display: block;
+        background-color: $light;
+        color: color-contrast($light);
+        font-size: $h4-font-size;
+        padding: .25em .5em;
+        margin-bottom: .75em;
+
+        code {
+            color: color-contrast($light);
+            word-wrap: anywhere;
+            white-space: normal;
+        }
+    }
+
+    & > dd {
+        margin-right: 1rem;
+    }
+}

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

@@ -50,6 +50,7 @@
 
 // Styles for special directives
 @import 'components/directives/admonition';
+@import 'components/directives/propertyCard';
 @import 'components/directives/confval.scss';
 @import 'components/directives/fieldlist';
 @import 'components/directives/phpdomain';

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

@@ -25233,7 +25233,7 @@ ul[class*=horizbuttons-][class*=-note-] > li:hover, ul[class*=horizbuttons-][cla
   content: "\f071";
 }
 
-dl.confval {
+.property-card, .rst-content dl.php, dl.confval {
   background-color: #ffffff;
   border-radius: 0.375rem;
   margin-bottom: 1.5rem;
@@ -25243,20 +25243,20 @@ dl.confval {
   word-wrap: anywhere;
   white-space: normal;
 }
-dl.confval > dt {
+.property-card > dt, .rst-content dl.php > dt, dl.confval > 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;
 }
-dl.confval > dt code {
+.property-card > dt code, .rst-content dl.php > dt code, dl.confval > dt code {
   color: #000;
   word-wrap: anywhere;
   white-space: normal;
 }
-dl.confval > dd {
+.property-card > dd, .rst-content dl.php > dd, dl.confval > dd {
   margin-right: 1rem;
 }
 
@@ -25290,51 +25290,6 @@ dl.field-list > dt:after {
     margin: 0;
   }
 }
-.rst-content dl.php {
-  border-radius: 0.375rem;
-  margin-bottom: 1rem;
-  padding-bottom: 0.3rem;
-}
-.rst-content dl.php .descname {
-  background-color: transparent;
-  border: none;
-  color: hsl(350, 100%, 40%);
-  font-size: 100%;
-  padding: 0;
-}
-.rst-content dl.php .optional {
-  padding: 0 0.25em;
-}
-.rst-content dl.php code {
-  padding: 0 0.25em;
-}
-.rst-content dl.php .pre {
-  font-family: "Source Code Pro", monospace;
-}
-.rst-content dl.php .headerlink,
-.rst-content dl.php .optional {
-  color: #212529;
-}
-.rst-content dl.php .viewcode-link {
-  padding-left: 1em;
-}
-.rst-content dl.php > dt {
-  background-color: rgb(243.846473029, 250.2365145228, 252.153526971);
-  border-radius: 0.375rem;
-  border-top: solid 3px #319fc0;
-  color: black;
-  display: inline-block;
-  font-size: 1rem;
-  margin-bottom: calc(1rem / 2);
-  padding: 0.25em 0.5em;
-  position: relative;
-}
-.rst-content dl.php dl.php > dt {
-  background-color: rgb(247.35, 247.35, 247.35);
-  border-top: 2px solid rgb(170.85, 170.85, 170.85);
-  color: #000;
-}
-
 .sidebar {
   margin: 0;
   margin-bottom: 1rem;