@navikt/ds-css 0.18.11 → 0.18.14

package/form/confirmation-panel.css

@@ -5,6 +5,9 @@
   --navds-confirmation-panel-color-background-checked: var(
     --navds-global-color-green-50
   );
+  --navds-confirmation-panel-color-background-error: var(
+    --navds-global-color-red-50
+  );
   --navds-confirmation-panel-color-border: var(
     --navds-semantic-color-feedback-warning-border
   );
@@ -12,32 +15,14 @@
     --navds-semantic-color-feedback-success-border
   );
   --navds-confirmation-panel-color-border-error: var(
-    --navds-semantic-color-feedback-danger-background
-  );
-  --navds-confirmation-panel-color-background-error: var(
-    --navds-global-color-red-50
-  );
-  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
-    --navds-global-color-green-700
-  );
-  --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
-    --navds-global-color-green-700
-  );
-  --navds-confirmation-panel-color-checkbox-background-checked: var(
-    --navds-global-color-green-500
-  );
-  --navds-confirmation-panel-color-checkbox-border-checked: var(
-    --navds-semantic-color-feedback-success-border
-  );
-  --navds-confirmation-panel-color-checkbox-label-checked: var(
-    --navds-semantic-color-text
+    --navds-semantic-color-feedback-danger-border
   );
 }
 
 .navds-confirmation-panel__inner {
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-4);
+  gap: var(--navds-spacing-3);
   padding: var(--navds-spacing-4);
   border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-confirmation-panel-color-border);
@@ -49,11 +34,6 @@
   max-width: 80ch;
 }
 
-.navds-confirmation-panel--small .navds-confirmation-panel__inner {
-  padding: var(--navds-spacing-3);
-  gap: var(--navds-spacing-2);
-}
-
 .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
   background-color: var(--navds-confirmation-panel-color-background-checked);
   border-color: var(--navds-confirmation-panel-color-border-checked);
@@ -61,45 +41,5 @@
 
 .navds-confirmation-panel--error .navds-confirmation-panel__inner {
   background-color: var(--navds-confirmation-panel-color-background-error);
-  border: 1px solid transparent;
-}
-
-.navds-confirmation-panel
-  .navds-checkbox__input:hover
-  + .navds-checkbox__label {
-  text-decoration: underline;
-}
-
-.navds-confirmation-panel--checked
-  .navds-checkbox__input:hover
-  + .navds-checkbox__label {
-  color: var(--navds-confirmation-panel-color-checkbox-label-checked);
-}
-
-.navds-confirmation-panel--checked
-  .navds-checkbox__input
-  + .navds-checkbox__label::before {
-  transition: none;
-  background-color: var(
-    --navds-confirmation-panel-color-checkbox-background-checked
-  );
-  border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
-}
-
-.navds-confirmation-panel--checked
-  .navds-checkbox__input:hover
-  + .navds-checkbox__label::before {
-  background-color: var(
-    --navds-confirmation-panel-color-checkbox-background-checked-hover
-  );
-  border-color: var(
-    --navds-confirmation-panel-color-checkbox-border-checked-hover
-  );
-}
-
-.navds-confirmation-panel--checked
-  .navds-checkbox__input:focus:hover
-  + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  border-color: var(--navds-confirmation-panel-color-border-error);
 }

package/form/error-summary.css

@@ -28,6 +28,7 @@
   flex-direction: column;
   gap: var(--navds-spacing-3);
   padding-left: var(--navds-spacing-6);
+  list-style: inherit;
 }
 
 .navds-error-summary__list > * {

package/form/form.css

@@ -1,12 +1,11 @@
-.navds-form-field > :not(:first-child):not(:empty),
-.navds-form-field > input:not(:first-child) {
-  margin-top: var(--navds-spacing-2);
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--navds-spacing-2);
 }
 
-/* Applied when hideLabel is applied to form-element */
-.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
-.navds-form-field > .navds-sr-only + input:not(:first-child) {
-  margin-top: 0;
+.navds-form-field__description {
+  margin-top: -4px;
 }
 
 .navds-form-field .navds-error-message,
@@ -19,3 +18,12 @@
 .navds-fieldset .navds-error-message::before {
   content: "•";
 }
+
+.navds-form-field--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.navds-form-field__error:empty {
+  display: none;
+}

package/form/select.css

@@ -70,13 +70,6 @@
   border-color: var(--navds-select-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-select--disabled {
-  opacity: 0.3;
-}
-
 .navds-select__input:disabled {
   background-color: var(--navds-select-color-background);
   border-color: var(--navds-select-color-border);

package/form/text-field.css

@@ -45,6 +45,10 @@
   color: var(--navds-text-field-color-text);
 }
 
+.navds-text-field__input[size] {
+  width: auto;
+}
+
 .navds-text-field__input::placeholder {
   color: var(--navds-text-field-color-placeholder-text);
 }
@@ -54,10 +58,6 @@
   min-height: 32px;
 }
 
-.navds-form-field--small > .navds-text-field__description:not(:empty) {
-  margin-top: var(--navds-spacing-1);
-}
-
 .navds-text-field__input:hover {
   border-color: var(--navds-text-field-color-border-hover);
 }
@@ -87,7 +87,6 @@
   border-color: var(--navds-text-field-color-border);
   box-shadow: none;
   cursor: not-allowed;
-  opacity: 0.3;
 }
 
 .navds-text-field__input[readonly] {
@@ -97,11 +96,6 @@
   cursor: not-allowed;
 }
 
-.navds-text-field--disabled > .navds-text-field__label,
-.navds-text-field--disabled > .navds-text-field__description {
-  opacity: 0.3;
-}
-
 /**
   * Removes default search icon
   */

package/form/textarea.css

@@ -89,13 +89,6 @@
   border-color: var(--navds-textarea-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-textarea--disabled {
-  opacity: 0.3;
-}
-
 .navds-textarea__input:disabled {
   background-color: var(--navds-textarea-color-background);
   border-color: var(--navds-textarea-color-border);

package/loader.css

@@ -10,7 +10,7 @@
   --navds-loader-color-inverted-foreground: var(
     --navds-semantic-color-component-background-light
   );
-  --navds-loader-color-inverted-background: rgb(255 255 255 / 0.3);
+  --navds-loader-color-inverted-background: var(--navds-global-color-gray-600);
   --navds-loader-color-transparent-background: transparent;
 }
 
@@ -20,6 +20,8 @@
   position: relative;
   animation: loader-rotate 1.8s linear infinite;
   stroke-width: 6;
+
+  --navds-loader-background-stroke-width: 5.9;
 }
 
 .navds-loader__foreground {
@@ -31,6 +33,7 @@
 
 .navds-loader__background {
   stroke: var(--navds-loader-color-background);
+  stroke-width: var(--navds-loader-background-stroke-width);
 }
 
 .navds-loader--neutral .navds-loader__foreground {
@@ -56,36 +59,50 @@
 .navds-loader--3xlarge {
   width: 5.5rem;
   stroke-width: 5;
+
+  --navds-loader-background-stroke-width: 4.8;
 }
 
 .navds-loader--2xlarge {
   width: 4rem;
   stroke-width: 6;
+
+  --navds-loader-background-stroke-width: 5.8;
 }
 
 .navds-loader--xlarge {
   width: 2.5rem;
   stroke-width: 6;
+
+  --navds-loader-background-stroke-width: 5.8;
 }
 
 .navds-loader--large {
   width: 2rem;
   stroke-width: 7;
+
+  --navds-loader-background-stroke-width: 6.8;
 }
 
 .navds-loader--medium {
   width: 1.5rem;
   stroke-width: 7;
+
+  --navds-loader-background-stroke-width: 6.8;
 }
 
 .navds-loader--small {
   width: 1.25rem;
   stroke-width: 8;
+
+  --navds-loader-background-stroke-width: 7.8;
 }
 
 .navds-loader--xsmall {
   width: 1rem;
   stroke-width: 8;
+
+  --navds-loader-background-stroke-width: 7.8;
 }
 
 @keyframes loader-rotate {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.18.11",
+  "version": "0.18.14",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -27,5 +27,5 @@
     "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "^14.0.2"
   },
-  "gitHead": "ff89d6e4e8ccc2c891346de7339f368286e89baf"
+  "gitHead": "92febc6e0c7831e9362395a5935490a622506bf3"
 }