@oslokommune/punkt-css 11.12.3 → 11.12.8

package/dist/scss/elements/_table.scss

@@ -1,84 +1,166 @@
-/* 
+/*
  * Table elements
  */
 
 @use 'sass:map';
 @use '../abstracts/variables';
-
-$-borderRadius: 2px;
-$-boxShadow: 0 1px 3px rgba(map.get(variables.$pkt-colors, 'brand-dark-blue-1000'), 0.25);
-
-$-defaultColor: map.get(variables.$pkt-colors, 'brand-neutrals-200');
-$-infoColor: map.get(variables.$pkt-colors, 'brand-yellow-1000');
-$-successColor: map.get(variables.$pkt-colors, 'brand-light-green-1000');
-$-strongColor: map.get(variables.$pkt-colors, 'brand-dark-blue-1000');
+@use '../abstracts/mixins/typography';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/' as *;
+$-borderRadius: map.get(variables.$border-radius, 'size-4');
+$-spacing-size-8: map.get(variables.$spacing, 'size-8');
+$-spacing-size-12: map.get(variables.$spacing, 'size-12');
+$-spacing-size-16: map.get(variables.$spacing, 'size-16');
 
 .pkt-table {
   width: 100%;
-  font-size: map.get(variables.$font-size, 'size-14');
   border-radius: $-borderRadius;
   border-collapse: collapse;
 
-  &__th {
-    color: black;
-    font-weight: 500;
+  &__header,
+  thead {
     text-align: left;
-    background: $-defaultColor;
-    border-bottom: 1px solid $-defaultColor;
+    vertical-align: top;
+    font-size: map.get(variables.$font-size, 'size-18');
+    font-weight: map.get(variables.$font-weight, 'medium');
+  }
 
-    &:first-child {
-      border-top-left-radius: $-borderRadius;
+  &__body,
+  tbody {
+    text-align: left;
+    vertical-align: top;
+    font-size: map.get(variables.$font-size, 'size-16');
+    font-weight: map.get(variables.$font-weight, 'light');
+
+    .pkt-table__row:hover {
+      & > .pkt-table__data-cell {
+        background: rgba(map.get(variables.$pkt-colors, 'brand-dark-blue-1000'), 0.01);
+      }
     }
+  }
 
-    &:last-child {
-      border-top-right-radius: $-borderRadius;
-    }
+  &__header-cell,
+  th {
+    padding: $-spacing-size-16;
   }
 
-  th,
+  &__data-cell,
   td {
-    padding: 0.5rem;
-    text-align: left;
-    border-bottom: 1px solid $-defaultColor;
+    padding: $-spacing-size-16;
   }
+}
 
-  td.strong {
-    border-top: 1px solid $-defaultColor;
-    font-weight: 500;
-  }
+// To be used when the table contains several elements, such as Tags
+.pkt-table__cell-wrapper {
+  text-align: left;
+  vertical-align: top;
+  display: inline-flex;
+  gap: $-spacing-size-8;
+}
 
-  tbody tr:hover {
-    &>td {
-      background: rgba(map.get(variables.$pkt-colors, 'brand-dark-blue-1000'), 0.02);
-    }
-  }
+/**
+ * Compact table
+ */
 
-  &--info .pkt-table__th {
-    background: rgba($-infoColor, 0.25);
-    border-bottom: 1px solid $-infoColor;
+.pkt-table.pkt-table--compact {
+  .pkt-table__header-cell,
+  th {
+    padding: $-spacing-size-8 $-spacing-size-16;
   }
+}
 
-  &--success .pkt-table__th {
-    background: rgba($-successColor, 0.25);
-    border-bottom: 1px solid $-successColor;
+/**
+ * Skin: basic
+ */
+.pkt-table.pkt-table--basic {
+  .pkt-table__row,
+  tr {
+    border-bottom: 2px solid var(--pkt-color-surface-strong-gray);
   }
+}
 
-  &--strong .pkt-table__th {
-    background: rgba($-strongColor, 0.25);
-    border-bottom: 1px solid $-strongColor;
+/**
+ * Skin: zebra-grey
+ */
+.pkt-table.pkt-table--zebra-grey {
+  .pkt-table__body,
+  tbody {
+    .pkt-table__row:nth-child(odd),
+    tr:nth-child(odd) {
+      background: var(--pkt-color-surface-default-gray);
+    }
   }
+}
 
-  &--shadow {
-    background: white;
-    box-shadow: $-boxShadow;
-
-    &>tbody tr:last-of-type td {
-      border-bottom: none;
+/**
+ * Skin: zebra blue
+ */
+.pkt-table.pkt-table--zebra-blue {
+  .pkt-table__body,
+  tbody {
+    .pkt-table__row:nth-child(odd),
+    tr:nth-child(odd) {
+      background: var(--pkt-color-surface-subtle-pale-blue);
     }
   }
 }
 
-.pkt-table-container {
-  margin: 1rem 0;
-  overflow-x: auto;
+/**
+ * Responsive Mobile view if class is set
+ */
+
+@media screen and (max-width: map.get(variables.$breakpoints, 'tablet')) {
+  .pkt-table.pkt-table--responsive {
+    .pkt-table {
+      &__row,
+      tr {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        gap: $-spacing-size-16;
+        padding: $-spacing-size-16 $-spacing-size-16;
+
+        .pkt-table__header-cell,
+        th {
+          display: none;
+        }
+      }
+
+      &__cell-wrapper {
+        grid-column: 2/3;
+      }
+
+      &__data-cell,
+      td {
+        padding: $-spacing-size-8 $-spacing-size-16;
+        display: contents;
+
+        &::before {
+          grid-column: 1/2;
+          content: attr(data-label);
+          font-weight: map.get(variables.$font-weight, 'medium');
+        }
+      }
+
+      &__compact {
+        .pkt-table__row,
+        tr {
+          padding: $-spacing-size-8 $-spacing-size-8;
+          gap: $-spacing-size-8;
+        }
+      }
+
+      &__zebra-grey {
+        .pkt-table__row:nth-child(odd),
+        tr:nth-child(odd) {
+          background: var(--pkt-color-surface-subtle-pale-gray);
+        }
+      }
+      &__zebra-blue {
+        .pkt-table__row:nth-child(odd),
+        tr:nth-child(odd) {
+          background: var(--pkt-color-surface-subtle-pale-blue);
+        }
+      }
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "11.12.3",
+  "version": "11.12.8",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "3d1c0ec4fee5ae98b0e26d1068b76faec73406b0"
+  "gitHead": "5e5e6bc584d883a6f35e9008be199d690a1765e9"
 }