@norges-domstoler/dds-components 22.0.0 → 22.2.0

package/dist/index.css

@@ -2540,21 +2540,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 
 /* src/components/date-inputs/common/DateInput.module.css */
-.DateInput_date-input {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--dds-spacing-x0-5);
-}
-.DateInput_date-input--medium--clearable {
-  padding-inline-end: var(--dds-spacing-x0-5);
-}
-.DateInput_date-input--small--clearable {
-  padding-inline-end: var(--dds-spacing-x0-5);
-}
-.DateInput_date-input--xsmall--clearable {
-  padding-inline-end: var(--dds-spacing-x0-25);
-}
 .DateInput_date-segment-container {
   display: flex;
   flex-direction: row;
@@ -2567,6 +2552,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: max-content;
   font-variant-numeric: tabular-nums;
   outline: none;
+  font-family: var(--dds-font-family-monospace);
   &:focus {
     background-color: var(--dds-color-surface-action-selected);
     color: var(--dds-color-text-on-action);
@@ -2586,9 +2572,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   height: 0;
   width: 0;
 }
-.DateInput_clear-button {
-  align-self: center;
-}
 .DateInput_clear-button--inactive {
   visibility: hidden;
 }
@@ -2683,6 +2666,14 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .Input_input-group {
   position: relative;
+  --dds-input-absolute-el-left-xsmall: var(--dds-spacing-x0-25);
+  --dds-input-absolute-el-left-small: var(--dds-spacing-x0-5);
+  --dds-input-absolute-el-left-medium: var(--dds-spacing-x0-75);
+  --dds-input-absolute-el-left-large: var(--dds-spacing-x0-75);
+  --dds-input-absolute-el-right-xsmall: var(--dds-spacing-x0-25);
+  --dds-input-absolute-el-right-small: var(--dds-spacing-x0-5);
+  --dds-input-absolute-el-right-medium: var(--dds-spacing-x0-75);
+  --dds-input-absolute-el-right-large: var(--dds-spacing-x0-75);
 }
 :where(.Input_input) {
   position: relative;
@@ -2788,40 +2779,40 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   padding: var(--dds-spacing-x0-25);
 }
 .Input_input-with-icon--large {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
+  padding-left: calc(var(--dds-input-absolute-el-left-large) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
 }
 .Input_input-with-icon--medium {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
+  padding-left: calc(var(--dds-input-absolute-el-left-medium) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
 }
 .Input_input-with-icon--small {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
+  padding-left: calc(var(--dds-input-absolute-el-left-small) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
 }
 .Input_input-with-icon--xsmall {
-  padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
+  padding-left: calc(var(--dds-input-absolute-el-left-xsmall) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
 }
 .Input_input-with-el-right--large {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-large) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
 }
 .Input_input-with-el-right--medium {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-medium) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
 }
 .Input_input-with-el-right--small {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-small) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
 }
 .Input_input-with-el-right--xsmall {
-  padding-inline-end: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-xsmall) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
 }
-.Input_el-right--large {
-  right: var(--dds-spacing-x0-75);
+.Input_input-group__absolute-el-right--large {
+  right: var(--dds-input-absolute-el-left-large);
 }
-.Input_el-right--medium {
-  right: var(--dds-spacing-x0-75);
+.Input_input-group__absolute-el-right--medium {
+  right: var(--dds-input-absolute-el-left-medium);
 }
-.Input_el-right--small {
-  right: var(--dds-spacing-x0-5);
+.Input_input-group__absolute-el-right--small {
+  right: var(--dds-input-absolute-el-left-small);
 }
-.Input_el-right--xsmall {
-  right: var(--dds-spacing-x0-25);
+.Input_input-group__absolute-el-right--xsmall {
+  right: var(--dds-input-absolute-el-left-xsmall);
 }
 :where(.Input_input--with-affix) {
   gap: var(--dds-spacing-x1);
@@ -2834,16 +2825,16 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   color: var(--dds-color-icon-default);
 }
 :where(.Input_input-group__absolute-el--large) {
-  left: var(--dds-spacing-x0-75);
+  left: var(--dds-input-absolute-el-left-large);
 }
 :where(.Input_input-group__absolute-el--medium) {
-  left: var(--dds-spacing-x0-75);
+  left: var(--dds-input-absolute-el-left-medium);
 }
 :where(.Input_input-group__absolute-el--small) {
-  left: var(--dds-spacing-x0-5);
+  left: var(--dds-input-absolute-el-left-small);
 }
 :where(.Input_input-group__absolute-el--xsmall) {
-  left: var(--dds-spacing-x0-25);
+  left: var(--dds-input-absolute-el-left-xsmall);
 }
 
 /* src/components/DescriptionList/DescriptionList.module.css */