@dnb/eufemia/cjs/components/checkbox/style/dnb-checkbox.min.css

DNB Eufemia Design System UI Library

.dnb-checkbox{--checkbox-width--medium:1.25rem;--checkbox-height--medium:1.25rem;--checkbox-border-radius:0.25rem;--checkbox-border-width:0.0625rem;--checkbox-width--large:2rem;--checkbox-height--large:2rem;--checkbox-gfx-size__indeterminate:0.625rem;--checkbox-gfx-size__indeterminate--large:1rem;--checkbox-gfx-border-radius__indeterminate:0.125rem;--checkbox-color-gfx-on:var(--token-color-icon-neutral-inverse);--checkbox-color-gfx-off:var(--token-color-background-neutral);--checkbox-color-background-off:var(--token-color-background-neutral);--checkbox-color-background-on:var(--token-color-background-selected);--checkbox-color-border-off:var(
    --token-color-stroke-action-alternative
  );--checkbox-color-border-on:var(--token-color-background-selected);--checkbox-color-gfx__indeterminate:var(
    --token-color-background-selected
  );--checkbox-color-background__indeterminate:var(
    --token-color-background-selected-subtle
  );--checkbox-color-border__indeterminate:var(
    --token-color-stroke-selected
  );--checkbox-color-gfx--disabled:var(--token-color-icon-neutral-inverse);--checkbox-color-background-on--disabled:var(
    --token-color-background-action-disabled
  );--checkbox-color-background-off--disabled:var(
    --token-color-background-neutral
  );--checkbox-color-border-on--disabled:var(
    --token-color-background-action-disabled
  );--checkbox-color-border-off--disabled:var(
    --token-color-stroke-action-disabled
  );--checkbox-color-gfx__indeterminate--disabled:var(
    --token-color-background-action-disabled
  );--checkbox-color-background__indeterminate--disabled:var(
    --token-color-background-neutral
  );--checkbox-color-background-off--active:var(
    --token-color-background-action-pressed-subtle
  );--checkbox-color-border-off--active:var(
    --token-color-stroke-action-pressed
  );--checkbox-color-background-on--active:var(
    --token-color-background-action-pressed
  );--checkbox-color-border-on--active:var(
    --token-color-stroke-action-pressed
  );--checkbox-color-gfx__indeterminate--active:var(
    --token-color-background-action-pressed
  );--checkbox-border-width--hover:0.125rem;--checkbox-color-gfx--hover:var(--token-color-icon-neutral-inverse);--checkbox-color-background-on--hover:var(
    --token-color-background-action-hover
  );--checkbox-color-background-off--hover:var(
    --token-color-background-action-hover-subtle
  );--checkbox-color-border--hover:var(--token-color-stroke-action-hover);--checkbox-color-gfx__indeterminate--hover:var(
    --token-color-background-action-hover
  );--checkbox-color-background__indeterminate--hover:var(
    --token-color-background-action-hover-subtle
  );--checkbox-color-border__indeterminate--hover:var(
    --token-color-stroke-action-hover
  );--checkbox-color-gfx--focus:var(--token-color-icon-action-focus);--checkbox-color-background--focus:var(
    --token-color-background-action-focus-subtle
  );--checkbox-color-gfx__indeterminate--focus:var(
    --token-color-background-action-focus
  );--checkbox-color-gfx--error:var(--token-color-icon-neutral-inverse);--checkbox-color-background-on--error:var(
    --token-color-background-error
  );--checkbox-color-background-off--error:var(
    --token-color-background-error-subtle
  );--checkbox-color-border--error:var(--token-color-stroke-error);--checkbox-color-gfx__indeterminate--error:var(
    --token-color-background-error
  );--checkbox-bounding--medium:1.75,1.75;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-checkbox,.dnb-checkbox__inner{display:inline-flex;flex-direction:column}.dnb-checkbox__inner{align-self:center}.dnb-checkbox__shell{align-items:center;display:flex;height:var(--checkbox-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--checkbox-width--medium)}.dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__button{background-color:var(--checkbox-color-background-off);border:var(--checkbox-border-width) solid var(--checkbox-color-border-off);display:inline-block}.dnb-checkbox__focus{--focus-ring-width:0.25rem;display:none;outline:none}html[data-whatinput=keyboard] .dnb-checkbox__focus{--border-color:var(--token-color-stroke-action-focus);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-checkbox__button,.dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:var(--checkbox-height--medium);position:relative;width:var(--checkbox-width--medium);z-index:4}.dnb-checkbox--large .dnb-checkbox__button,.dnb-checkbox--large .dnb-checkbox__focus{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__gfx{shape-rendering:geometricprecision;height:calc(var(--checkbox-height--medium) - .5rem);left:auto;position:absolute;top:auto;transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--checkbox-width--medium) - .5rem);z-index:5}.dnb-checkbox--large{line-height:var(--checkbox-height--large)}.dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.dnb-checkbox__input{border:0;height:var(--checkbox-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--checkbox-bounding--medium));width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);transform:scale(1);width:var(--checkbox-width--large)}.dnb-checkbox__input:not([disabled]){cursor:pointer}.dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-checkbox__order{align-items:baseline;display:inline-flex}.dnb-checkbox__suffix{order:4}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.dnb-checkbox__input:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on);opacity:1;transform:scale(1)}.dnb-checkbox__input:checked~.dnb-checkbox__button,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on);border-color:var(--checkbox-color-border-on)}.dnb-checkbox__input:not(:checked):not([data-checked=true]):not(:indeterminate)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-off);opacity:0;transform:scale(.8)}.dnb-checkbox__input~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate);border-radius:var(--checkbox-gfx-border-radius__indeterminate);height:var(--checkbox-gfx-size__indeterminate);opacity:0;position:absolute;transform:scale(.85);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--checkbox-gfx-size__indeterminate);z-index:5}.dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{opacity:1;transform:scale(1)}.dnb-checkbox__input:indeterminate~.dnb-checkbox__button{background-color:var(--checkbox-color-background__indeterminate);border-color:var(--checkbox-color-border__indeterminate)}.dnb-checkbox__input:indeterminate:hover~.dnb-checkbox__gfx,.dnb-checkbox__input:indeterminate~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox--large .dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{height:var(--checkbox-gfx-size__indeterminate--large);width:var(--checkbox-gfx-size__indeterminate--large)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__button,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--disabled);border-color:var(--checkbox-color-border-on--disabled)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--disabled)}.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--disabled);border-color:var(--checkbox-color-border-off--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__button{background-color:var(--checkbox-color-background__indeterminate--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--error);border-color:var(--checkbox-color-border--error)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:indeterminate)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):checked~.dnb-checkbox__button,.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled])[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--error)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--error)}.dnb-checkbox__input:not([disabled]):hover:not(:active):not(:focus)~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--hover);border-color:var(--checkbox-color-border--hover);border-width:var(--checkbox-border-width--hover)}.dnb-checkbox__input:hover:not(:active):not(:focus)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--hover)}.dnb-checkbox__input:not([disabled]):checked:hover:not(:active):not(:focus)~.dnb-checkbox__button,.dnb-checkbox__input:not([disabled])[data-checked=true]:hover:not(:active):not(:focus)~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--hover);border-color:var(--checkbox-color-border--hover);border-width:var(--checkbox-border-width--hover)}.dnb-checkbox__input:not([disabled]):indeterminate:hover:not(:active):not(:focus)~.dnb-checkbox__button{background-color:var(--checkbox-color-background__indeterminate--hover);border-color:var(--checkbox-color-border__indeterminate--hover)}.dnb-checkbox__input:not([disabled]):indeterminate:hover:not(:active):not(:focus)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--hover)}.dnb-checkbox__input:not([disabled]):indeterminate:hover:not(:active):not(:focus)~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--active);border-color:var(--checkbox-color-border-off--active);border-width:var(--checkbox-border-width)}.dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__button,.dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--active);border-color:var(--checkbox-color-border-on--active);border-width:var(--checkbox-border-width)}.dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__gfx,.dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--active);border-color:var(--checkbox-color-border-off--active);border-width:var(--checkbox-border-width)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--active)}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{background-color:var(--checkbox-color-background--focus);border:none}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--focus)}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):indeterminate:focus~.dnb-checkbox__gfx{color:transparent}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button .dnb-checkbox__focus{display:block}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--focus)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__gfx{color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__indeterminate{background-color:var(--skeleton-color)}