Merge pull request #505 from appuniversum/add-missing-content-styles

Add missing content styles
appuniversum · Aug 7, 2024 · 3e2765c · 3e2765c
2 parents c7102fe + 93a3e26
commit 3e2765c
Showing 1 changed file with 110 additions and 4 deletions.
diff --git a/styles/components/_c-content.scss b/styles/components/_c-content.scss
@@ -24,7 +24,7 @@ $au-content-tiny: var(--au-small) !default;
 /* Component
    ========================================================================== */
 
-// @TODO: add base styling for common elements (tables, hr, blockquote, ...)
+// @TODO: add base styling for common elements (hr, blockquote, ...)
 .au-c-content {
   @include au-font-size($au-content-base-small);
   color: var(--au-gray-900);
@@ -77,7 +77,13 @@ $au-content-tiny: var(--au-small) !default;
     margin-left: $au-unit;
   }
 
-  ul.au-c-list {
+  ol:not(.au-c-list-horizontal) {
+    list-style: decimal;
+    margin-left: $au-unit;
+  }
+
+  ul.au-c-list,
+  ol.au-c-list {
     list-style: none;
     margin-left: 0;
   }
@@ -88,11 +94,13 @@ $au-content-tiny: var(--au-small) !default;
   }
 
   // @TODO: list-horizontal needs to be refactored to the list component.
-  ul:not(.au-c-list-horizontal) li + li {
+  ul:not(.au-c-list-horizontal) li + li,
+  ol:not(.au-c-list-horizontal) li + li {
     margin-top: $au-unit-tiny;
   }
 
-  ul.au-c-list li + li {
+  ul.au-c-list li + li,
+  ol.au-c-list li + li {
     margin-top: 0;
   }
 
@@ -117,6 +125,104 @@ $au-content-tiny: var(--au-small) !default;
     color: var(--au-gray-700);
   }
 
+  // Table styles are based on the <AuTable> component styles
+  table:not(.au-c-table) {
+    @include au-font-size(var(--au-h6));
+    display: table;
+    position: relative;
+    width: 100%;
+    border-collapse: collapse;
+    outline: 0.1rem solid var(--au-gray-300); // border doesn't have the intended effect
+
+    thead {
+      position: relative;
+      width: 100%;
+      z-index: var(--au-z-index-alpha);
+      border: 0;
+      @include au-font-size(var(--au-base), 1.2);
+    }
+
+    th,
+    td {
+      max-width: 55ch;
+      position: relative;
+      text-align: start;
+    }
+
+    th + th,
+    th + td,
+    td + th,
+    td + td {
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 0.1rem;
+        left: -0.1rem;
+        top: 0;
+        height: 100%;
+        border-left: 0.1rem dotted var(--au-gray-300);
+      }
+    }
+  }
+
+  thead:not(.au-c-table__header) {
+    background-color: var(--au-white);
+
+    th {
+      font-weight: var(--au-medium);
+      text-align: left;
+      white-space: nowrap;
+      padding: $au-unit-small;
+      border-radius: 0;
+      border: 0;
+      outline: 0;
+      background-color: var(--au-white);
+      box-shadow: inset 0 -0.2rem 0 0 var(--au-gray-300);
+    }
+  }
+
+  tbody:not(.au-c-table__body) {
+    tr {
+      border-bottom: 0.1rem solid var(--au-gray-300);
+      background-color: var(--au-white);
+    }
+
+    td,
+    th {
+      padding: $au-unit-small;
+    }
+  }
+
+  tfoot:not(.au-c-table__footer) {
+    tr + tr {
+      border-top: 0.1rem solid var(--au-gray-300);
+    }
+
+    tr:first-child {
+      border-top: 0.2rem solid var(--au-gray-300);
+    }
+
+    tr {
+      background-color: var(--au-white);
+    }
+
+    td,
+    th {
+      @include au-font-size(var(--au-base));
+      padding: $au-unit-tiny $au-unit-small;
+    }
+  }
+
+  caption:not(.au-c-table__caption) {
+    @include au-font-size(var(--au-h5));
+    font-weight: var(--au-medium);
+    text-align: left;
+    padding: $au-unit-tiny $au-unit-small;
+    background-color: var(--au-gray-100);
+    border-bottom: 0.1rem solid var(--au-gray-300);
+  }
+
   @include mq(small) {
     h1,
     .au-c-heading--1 {