@navikt/ds-css 8.10.0 → 8.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.10.0",
+  "version": "8.10.2",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -30,7 +30,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.10.0",
+    "@navikt/ds-tokens": "^8.10.2",
     "browserslist": "^4.25.0",
     "esbuild": "^0.27.4",
     "fast-glob": "3.3.3",

package/src/data-table.css

@@ -1,3 +1,4 @@
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
 /* stylelint-disable no-duplicate-selectors */
 
 .aksel-data-table__border-wrapper {
@@ -151,6 +152,15 @@
   text-align: start;
   vertical-align: middle;
   scroll-margin: var(--ax-space-0);
+  padding: 0;
+
+  &[data-nested="true"] {
+    position: relative;
+
+    & > div {
+      margin-inline-start: calc(32px + 8px + calc(var(--__axc-data-table-nested-depth) * var(--ax-space-16)));
+    }
+  }
 
   .aksel-data-table__thead & {
     background-color: var(--ax-bg-neutral-soft);
@@ -219,9 +229,11 @@
     }
   }
 
+  --__axc-data-table-pi-cell: var(--ax-space-16);
+
   &:not([data-selectable="true"]) > div {
     padding-block: var(--__axc-data-table-density);
-    padding-inline: var(--ax-space-16);
+    padding-inline: var(--__axc-data-table-pi-cell);
 
     .aksel-data-table[data-truncate-content="true"] & {
       text-overflow: ellipsis;
@@ -240,11 +252,11 @@
   position: relative;
   font-weight: var(--ax-font-weight-bold);
 
-  &:has(.aksel-data-table__th-sort-button):hover {
+  &:has(.aksel-data-table__th-sort-button:hover) {
     background-color: var(--ax-bg-neutral-moderate-hover);
   }
 
-  &:has(.aksel-data-table__th-sort-button):active {
+  &:has(.aksel-data-table__th-sort-button:active) {
     background-color: var(--ax-bg-neutral-moderate-pressed);
   }
 
@@ -265,6 +277,7 @@
   background-color: transparent;
   border: none;
   font-weight: inherit;
+  padding: 0;
 
   &:focus-visible {
     outline: none;
@@ -571,3 +584,12 @@ html[data-dragging-cursor="true"] *::before,
 html[data-dragging-cursor="true"] *::after {
   cursor: grabbing !important;
 }
+
+/* TODO: alignment not optimal when resizing column with nesting */
+.aksel-data-table__nested-toggle {
+  position: absolute;
+  inset-block: 0;
+  left: calc(var(--__axc-data-table-pi-cell) + var(--__axc-data-table-nested-depth) * var(--ax-space-16));
+  display: flex;
+  align-items: center;
+}

package/src/dialog.css

@@ -96,7 +96,7 @@
       transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - 0.02 * var(--__axc-nested-level)));
     }
 
-    @media (max-width: 768px) or (max-height: 479px) {
+    @media (max-width: 480px) or (max-height: 479px) {
       --__axc-dialog-transform: translateY(35%);
 
       max-height: calc(100dvh - max(16px, 10dvh));

package/src/modal.css

@@ -49,13 +49,7 @@
   left: 0;
 }
 
-.aksel-modal--medium {
-  width: 700px;
-}
-
 .aksel-modal--small {
-  width: 450px;
-
   & .aksel-modal__header {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
@@ -70,6 +64,14 @@
   }
 }
 
+.aksel-modal--width-medium {
+  width: 700px;
+}
+
+.aksel-modal--width-small {
+  width: 450px;
+}
+
 @media (min-width: 480px) {
   .aksel-modal {
     max-width: calc(100% - 2em);