@digdir/designsystemet-css/dist/src/field.css

CSS for Designsystemet

.ds-field{--dsc-field-content-spacing:var(--ds-size-2);-webkit-print-color-adjust:exact;print-color-adjust:exact}.ds-field>*{margin-block:0}.ds-field>*+*{margin-top:var(--dsc-field-content-spacing)}.ds-field [data-field=description]{color:var(
      --ds-color-neutral-text-subtle
    )}.ds-field .ds-input:not([hidden]),.ds-field input:not([hidden]),.ds-field select:not([hidden]),.ds-field textarea:not([hidden]){display:block}.ds-field:has([aria-disabled=true]:not(u-option,[role=option][aria-disabled=true]),:disabled:not(option))>*{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}:is(.ds-field:has([aria-readonly=true],[readonly]) label):before{background:currentcolor;content:"";display:inline-block;height:calc(1em*var(--ds-line-height-md));height:1lh;margin-inline-end:.25ch;-webkit-mask:center/contain no-repeat var(--ds-readonly-icon-url);mask:center/contain no-repeat var(--ds-readonly-icon-url);vertical-align:bottom;width:var(--ds-readonly-icon-size)}:is(:is(.ds-field:has([aria-readonly=true],[readonly]) label):before){-webkit-print-color-adjust:exact;print-color-adjust:exact}@media (forced-colors:active){:is(.ds-field:has([aria-readonly=true],[readonly]) label):before{background:CanvasText}}.ds-field:has(input:is([type=radio],[type=checkbox])){border-radius:var(--ds-border-radius-md);grid-template-areas:"input content";grid-template-columns:auto 1fr;width:-moz-fit-content;width:fit-content}.ds-field:has(input:is([type=radio],[type=checkbox])):not([hidden]){display:grid}.ds-field:has(input:is([type=radio],[type=checkbox]))>*{grid-column:content;margin-block:0}.ds-field:has(input:is([type=radio],[type=checkbox]))>:not(input){padding-inline-start:var(--dsc-field-content-spacing)}.ds-field:has(input:is([type=radio],[type=checkbox])) label{font-weight:var(--ds-font-weight-regular)}.ds-field:has(input:is([type=radio],[type=checkbox])) label:before{content:none}.ds-field:has(input:is([type=radio],[type=checkbox])) input{grid-column:input;grid-row:1}.ds-field:has(input:is([type=radio],[type=checkbox])):not(:has([readonly],[aria-disabled=true]:not(u-option),:disabled:not(option))) label{cursor:pointer}.ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible){box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible) *{--_ds--focus: }.ds-field:has(input:is([type=radio],[type=checkbox])) .ds-input:is([type=radio],[type=checkbox]):not([aria-label]){translate:0 calc(.5lh - 50%)}.ds-field[data-position=end]:has(input:is([type=radio],[type=checkbox])){grid-template-areas:"content input";grid-template-columns:1fr auto;width:auto}.ds-field[data-position=end]:has(input:is([type=radio],[type=checkbox]))>:not(input){padding-inline-end:var(--dsc-field-content-spacing);padding-inline-start:0}.ds-field-affixes{--dsc-field-affix-border-width:var(--ds-border-width-default);--dsc-field-affix-border-style:solid;--dsc-field-affix-border-color:var(--ds-color-neutral-border-default);--dsc-field-affix-padding-inline:var(--ds-size-4);background:var(--ds-color-neutral-surface-tinted);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-text-subtle);max-width:100%;white-space:nowrap}.ds-field-affixes:not([hidden]){display:flex}.ds-field-affixes:has([size]){width:-moz-fit-content;width:fit-content}.ds-field-affixes .ds-field-affix{align-items:center;border-color:var(--dsc-field-affix-border-color);border-style:var(--dsc-field-affix-border-style);border-width:var(--dsc-field-affix-border-width);flex-shrink:0;padding-inline:var(--dsc-field-affix-padding-inline)}:is(.ds-field-affixes .ds-field-affix):not([hidden]){display:flex}:is(.ds-field-affixes .ds-field-affix):first-child{border-end-start-radius:inherit;border-inline-end:0;border-start-start-radius:inherit}:is(.ds-field-affixes .ds-field-affix):last-child{border-end-end-radius:inherit;border-inline-start:0;border-start-end-radius:inherit}.ds-field-affixes .ds-input{border-style:var(--dsc-field-affix-border-style);border-width:var(--dsc-field-affix-border-width);flex:1 1 auto}:is(.ds-field-affixes .ds-input):not(:last-child){border-end-end-radius:0;border-start-end-radius:0}:is(.ds-field-affixes .ds-input):not(:first-child){border-end-start-radius:0;border-start-start-radius:0}