@salesforcedevs/docs-components 0.3.11 → 0.3.14-banner-alpha1

package/src/modules/doc/content/content.css

@@ -1,13 +1,13 @@
 /* stylelint-disable selector-class-pattern */
 
-/* This css file contains rules for the content html and it's specific selectors, 
- * pattern validation cannot be applied 
+/* This css file contains rules for the content html and it's specific selectors,
+ * pattern validation cannot be applied
  */
 
-@import "helpers/text";
-@import "helpers/reset";
-@import "helpers/card";
-@import "helpers/table";
+@import "dxHelpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/card";
+@import "dxHelpers/table";
 
 .doc-content {
     width: 100%;
@@ -48,6 +48,10 @@
 
 img.content-image {
     height: auto;
+    display: unset;
+}
+
+.image-block .content-image {
     margin-top: var(--dx-g-spacing-lg);
     margin-bottom: var(--dx-g-spacing-sm);
     display: block;
@@ -62,31 +66,47 @@ td > img.content-image:first-child:last-child[alt="No"] {
 
 h1 {
     font-family: var(--dx-g-font-display);
-    font-size: 36px;
+    font-size: var(--dx-g-text-4xl);
 
     /* not registered */
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: -0.4px;
-    line-height: 40px;
+    line-height: 56px;
 }
 
 h2 {
     font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-xl);
+    font-size: var(--dx-g-text-3xl);
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: -0.1px;
-    line-height: var(--dx-g-spacing-sm);
+    line-height: var(--dx-g-spacing-3xl);
 }
 
 h3 {
     font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-lg);
+    font-size: 32px;
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: -0.1px;
-    line-height: var(--dx-g-spacing-lg);
+    line-height: var(--dx-g-spacing-2xl);
 }
 
 h4 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-xl);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-xl);
+}
+
+h5 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: 28px;
+}
+
+h6 {
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-base);
     color: var(--dx-g-blue-vibrant-20);
@@ -112,6 +132,12 @@ p,
     margin-bottom: var(--dx-g-spacing-md);
 }
 
+dd > p,
+dd > .p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
 .li {
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-base);
@@ -171,7 +197,8 @@ a,
     margin-right: var(--dx-g-spacing-lg);
 }
 
-.codeph {
+.codeph,
+.filepath {
     font-family: var(--dx-g-font-mono);
     font-size: var(--dx-g-text-sm);
     line-height: var(--dx-g-text-lg);
@@ -234,10 +261,13 @@ dd {
     color: var(--dx-g-gray-10);
     letter-spacing: 0;
     line-height: var(--dx-g-spacing-lg);
+    margin-left: var(--dx-g-spacing-smd);
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 li {
-    margin-left: var(--dx-g-spacing-lg);
+    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-lg);
 }
 
 li > li {
@@ -270,97 +300,10 @@ a:hover,
 @media (min-width: 769px) {
     /* Desktop */
     img.content-image {
-        max-width: min(50vw, 500px);
+        max-width: min(60vw, 650px);
     }
 }
 
-table {
-    --table-border-radius: 4px;
-
-    border-collapse: separate;
-    border-spacing: 0;
-    margin-top: var(--dx-g-spacing-lg);
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-th,
-td {
-    padding: var(--dx-g-spacing-md);
-}
-
-th {
-    background-color: var(--dx-g-indigo-vibrant-95);
-    font-weight: inherit;
-    border-bottom: 3px solid var(--dx-g-indigo-vibrant-30);
-}
-
-doc-content-callout table {
-    background-color: white;
-}
-
-doc-content-callout table th {
-    background-color: var(--dx-g-indigo-vibrant-90);
-}
-
-th:first-of-type {
-    font-weight: var(--dx-g-font-bold);
-    border-top-left-radius: var(--table-border-radius);
-}
-
-th:last-of-type {
-    border-top-right-radius: var(--table-border-radius);
-}
-
-td {
-    vertical-align: top;
-    border-bottom: 1px solid var(--dx-g-gray-90);
-}
-
-td:first-of-type {
-    border-left: 1px solid var(--dx-g-gray-90);
-}
-
-td:last-of-type {
-    border-right: 1px solid var(--dx-g-gray-90);
-}
-
-th:first-of-type,
-td:first-of-type {
-    min-width: 160px;
-}
-
-tr:first-of-type td {
-    border-top: 1px solid var(--dx-g-gray-90);
-}
-
-thead + tbody > tr:first-of-type > td {
-    border-top: none;
-}
-
-tr:first-of-type td:first-of-type {
-    border-top-left-radius: var(--table-border-radius);
-}
-
-tr:first-of-type td:last-of-type {
-    border-top-right-radius: var(--table-border-radius);
-}
-
-tr:last-of-type td:first-of-type {
-    border-bottom-left-radius: var(--table-border-radius);
-}
-
-tr:last-of-type td:last-of-type {
-    border-bottom-right-radius: var(--table-border-radius);
-}
-
-thead + tbody > tr:first-of-type > td:first-of-type {
-    border-radius: 0;
-}
-
-thead + tbody > tr:first-of-type > td:last-of-type {
-    border-radius: 0;
-}
-
 ul,
 ol {
     margin-left: var(--dx-g-spacing-lg);
@@ -441,3 +384,16 @@ figcaption {
     font-size: var(--dx-g-text-xs);
     margin-top: var(--dx-g-spacing-sm);
 }
+
+code,
+kbd,
+pre,
+samp,
+.parmname {
+    font-family: Menlo, monospace;
+    font-size: 1em;
+}
+
+mark {
+    background-color: var(--dx-g-yellow-vibrant-90);
+}