@navikt/ds-css 6.15.0 → 6.16.1

package/form/form-summary.css

@@ -2,6 +2,7 @@
   overflow: hidden;
   border: 1px solid var(--a-border-subtle);
   border-radius: var(--a-border-radius-large);
+  background: var(--a-surface-default);
 }
 
 .navds-form-summary__header {

package/modal.css

@@ -3,7 +3,9 @@
 }
 
 .navds-modal {
-  background-color: var(--ac-modal-bg, var(--a-surface-default));
+  --__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));
+
+  background-color: var(--__ac-modal-bg);
   border: none;
   border-radius: var(--a-border-radius-large);
   box-shadow: var(--a-shadow-xlarge);
@@ -128,6 +130,18 @@
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+  background:
+    linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
+    linear-gradient(transparent, var(--__ac-modal-bg) 60%) bottom,
+    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
+    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
+  background-size:
+    100% 40px,
+    100% 50px,
+    100% 16px,
+    100% 16px;
+  background-attachment: local, local, scroll, scroll;
+  background-repeat: no-repeat;
 }
 
 .navds-modal--small .navds-modal__body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "6.15.0",
+  "version": "6.16.1",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^6.15.0",
+    "@navikt/ds-tokens": "^6.16.1",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

package/primitives/base.css

@@ -286,6 +286,18 @@
   flex-shrink: var(--__ac-r-flex-shrink);
 }
 
+.navds-r-grid-column {
+  --__ac-r-grid-column-xs: initial;
+  --__ac-r-grid-column-sm: var(--__ac-r-grid-column-xs);
+  --__ac-r-grid-column-md: var(--__ac-r-grid-column-sm);
+  --__ac-r-grid-column-lg: var(--__ac-r-grid-column-md);
+  --__ac-r-grid-column-xl: var(--__ac-r-grid-column-lg);
+  --__ac-r-grid-column-2xl: var(--__ac-r-grid-column-xl);
+  --__ac-r-grid-column: var(--__ac-r-grid-column-xs);
+
+  grid-column: var(--__ac-r-grid-column);
+}
+
 @media (min-width: 480px) {
   .navds-r-p {
     --__ac-r-padding: var(--__ac-r-p-sm);
@@ -382,6 +394,10 @@
   .navds-r-flex-shrink {
     --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-sm);
   }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-sm);
+  }
 }
 
 @media (min-width: 768px) {
@@ -480,6 +496,10 @@
   .navds-r-flex-shrink {
     --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-md);
   }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-md);
+  }
 }
 
 @media (min-width: 1024px) {
@@ -578,6 +598,10 @@
   .navds-r-flex-shrink {
     --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-lg);
   }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-lg);
+  }
 }
 
 @media (min-width: 1280px) {
@@ -676,6 +700,10 @@
   .navds-r-flex-shrink {
     --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xl);
   }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-xl);
+  }
 }
 
 @media (min-width: 1440px) {
@@ -774,4 +802,8 @@
   .navds-r-flex-shrink {
     --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-2xl);
   }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-2xl);
+  }
 }

package/table.css

@@ -176,9 +176,8 @@
 }
 
 .navds-table__toggle-expand-cell {
-  padding: 0 var(--a-spacing-2);
-  position: relative;
-  width: 2.5rem;
+  padding: 0;
+  width: 3rem;
 }
 
 .navds-table--large .navds-table__toggle-expand-cell {
@@ -193,20 +192,25 @@
   display: grid;
   place-content: center;
   cursor: pointer;
-  margin: 0;
   background: transparent;
   border: none;
   border-radius: var(--a-border-radius-medium);
   height: 2rem;
   width: 2rem;
   font-size: 1.5rem;
+  margin: 0 auto;
 }
 
 .navds-table__expandable-icon {
   transition: transform 150ms ease-in-out;
 }
 
+.navds-table__toggle-expand-cell:hover {
+  cursor: pointer;
+}
+
 .navds-table__toggle-expand-button:hover,
+.navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
 .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
   background-color: var(--a-surface-hover);
 }
@@ -235,16 +239,6 @@
   }
 }
 
-.navds-table__toggle-expand-button::after {
-  inset: 0;
-  z-index: 1;
-  position: absolute;
-  content: "";
-  height: 100%;
-  width: 100%;
-  cursor: pointer;
-}
-
 .navds-table__expanded-row-cell {
   padding: 0;
 }