@navikt/ds-css 4.11.2 → 4.12.0

package/form/combobox.css

@@ -253,6 +253,11 @@
   padding-left: calc(var(--a-spacing-3) - 4px);
 }
 
+.navds-form-field--small .navds-combobox__list-item--focus,
+.navds-form-field--small .navds-combobox__list-item:hover {
+  padding-left: calc(var(--a-spacing-2) - 4px);
+}
+
 .navds-combobox__list-item--selected {
   background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
 }

package/form/radio-checkbox.css

@@ -114,14 +114,27 @@
 }
 
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
-  background-position: 0.375rem center;
-  background-repeat: no-repeat;
-  background-size: 0.8125rem;
   box-shadow: none;
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
+.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
+  display: none;
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  position: absolute;
+  height: 1.5rem;
+  transform: translate(0.375rem);
+  pointer-events: none;
+}
+
+.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  transform: translate(0.25rem, -10%);
+  height: 1.25rem;
+}
+
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-position: 0.25rem center;
 }
@@ -283,11 +296,14 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuNjUpIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
   box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
 }
 
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--a-icon-subtle);
+}
+
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
   background-color: var(--a-icon-subtle);

package/list.css

@@ -1,14 +1,24 @@
 .navds-list ul,
 .navds-list ol {
   padding: 0;
+  margin-block: var(--a-spacing-4);
 }
 
-.navds-list--nested {
-  margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
+.navds-list--nested ul,
+.navds-list--nested ol {
+  margin-block: var(--a-spacing-2);
 }
 
-.navds-list li:not(.navds-list__item--noMargin) {
-  margin-bottom: var(--a-spacing-5);
+.navds-list li {
+  margin-block-end: var(--a-spacing-5);
+}
+
+.navds-list--small li {
+  margin-block-end: var(--a-spacing-2);
+}
+
+.navds-list--nested li {
+  margin-block-end: var(--a-spacing-3);
 }
 
 .navds-list:last-child > ul > li:last-child,
@@ -34,17 +44,25 @@
 
 .navds-list .navds-list__item-marker--bullet {
   display: flex;
-  margin-top: 0.375rem;
+  align-items: center;
+  height: var(--a-font-line-height-large);
   grid-column: 1 / 2;
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
 }
 
+.navds-list--small .navds-list__item-marker--bullet {
+  height: var(--a-font-line-height-medium);
+}
+
 .navds-list__item-marker--icon {
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
   display: flex;
   align-items: center;
+  height: var(--a-font-line-height-large);
+  padding-block-end: 1px;
+}
+
+.navds-list--small .navds-list__item-marker--icon {
   height: var(--a-font-line-height-medium);
 }
 
@@ -58,6 +76,7 @@
 
 .navds-list ol {
   padding-left: var(--a-spacing-2);
+  list-style: decimal;
 }
 
 .navds-list ol li {
@@ -67,7 +86,12 @@
 
 .navds-list ol li::marker {
   font-weight: var(--a-font-weight-bold);
-  font-size: var(--a-font-size-medium);
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  font-size: var(--a-font-size-large);
   color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+  line-height: var(--a-font-line-height-large);
+}
+
+.navds-list--small ol li::marker {
+  font-size: var(--a-font-size-small);
+  line-height: var(--a-font-line-height-medium);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "4.11.2",
+  "version": "4.12.0",
   "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": "^4.11.2",
+    "@navikt/ds-tokens": "^4.12.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",