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

DNB Eufemia Design System UI Library

.eufemia-scope--10_104_0{--checkbox-width--medium:1.5rem;--checkbox-height--medium:1.5rem}.eufemia-scope--10_104_0 .dnb-checkbox{--checkbox-border-radius:0.25rem;--checkbox-gfx-border-radius__indeterminate:0.125rem;--checkbox-width--large:2rem;--checkbox-height--large:2rem;--checkbox-gfx-height__indeterminate:0.625rem;--checkbox-gfx-width__indeterminate:0.625rem;--checkbox-gfx-height__indeterminate--large:0.875rem;--checkbox-gfx-width__indeterminate--large:0.875rem;--checkbox-border-width:0.09375rem;--checkbox-color-gfx-on:#000;--checkbox-color-gfx-off:#fff;--checkbox-color-background-on:#fff;--checkbox-color-background-off:#fff;--checkbox-color-border-on:#000;--checkbox-color-border-off:#000;--checkbox-border-width--disabled:0.125rem;--checkbox-color-gfx--disabled:grey;--checkbox-color-background-on--disabled:#d3d3d3;--checkbox-color-background-off--disabled:#d3d3d3;--checkbox-color-border-on--disabled:grey;--checkbox-color-border-off--disabled:grey;--checkbox-color-gfx__indeterminate--disabled:grey;--checkbox-color-background--active:#d3d3d3;--checkbox-color-border--active:transparent;--checkbox-border-width--hover:0.125rem;--checkbox-color-gfx--hover:grey;--checkbox-color-background--hover:#fff;--checkbox-color-border-on--hover:grey;--checkbox-color-border-off--hover:grey;--checkbox-color-gfx--focus:grey;--checkbox-color-background--focus:#d3d3d3;--checkbox-border-width--error:0.125rem;--checkbox-color-gfx--error:#fff0f5;--checkbox-color-gfx--error-contrast:red;--checkbox-color-background-on--error:red;--checkbox-color-background--error-contrast:#fff0f5;--checkbox-color-border--error:red;--checkbox-color-gfx-indeterminate--error:red;--checkbox-color-gfx--error--hover:red;--checkbox-color-background--error--hover:#fff0f5;--checkbox-color-border--error--hover:red;--checkbox-color-background-indeterminate:grey;--checkbox-color-gfx-indeterminate:#a9a9a9;--checkbox-color-background-indeterminate--active:grey;--checkbox-color-border-indeterminate--active:#fff;--checkbox-color-gfx-indeterminate--active:#fff;--checkbox-bounding--medium:1.75,1.75;display:inline-flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.eufemia-scope--10_104_0 .dnb-checkbox__inner{align-self:center;display:inline-flex;flex-direction:column}.eufemia-scope--10_104_0 .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)}.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.eufemia-scope--10_104_0 .dnb-checkbox__button{border:var(--checkbox-border-width) solid transparent;display:inline-block}.eufemia-scope--10_104_0 .dnb-checkbox__focus{display:none;outline:none}html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--10_104_0 .dnb-checkbox__button,.eufemia-scope--10_104_0 .dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:calc(var(--checkbox-height--medium) - .25rem);position:relative;width:calc(var(--checkbox-width--medium) - .25rem);z-index:4}.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__button,.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.eufemia-scope--10_104_0 .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}.eufemia-scope--10_104_0 .dnb-checkbox--large{line-height:var(--checkbox-height--large)}.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.eufemia-scope--10_104_0 .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}.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);transform:scale(1);width:var(--checkbox-width--large)}.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]){cursor:pointer}.eufemia-scope--10_104_0 .dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.eufemia-scope--10_104_0 .dnb-checkbox__order{align-items:baseline;display:inline-flex}.eufemia-scope--10_104_0 .dnb-checkbox__suffix{order:4}.eufemia-scope--10_104_0 .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.eufemia-scope--10_104_0 .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.eufemia-scope--10_104_0 .dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.eufemia-scope--10_104_0 .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.eufemia-scope--10_104_0 .dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.eufemia-scope--10_104_0 .dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.eufemia-scope--10_104_0 .dnb-checkbox__input:checked~.dnb-checkbox__gfx,.eufemia-scope--10_104_0 .dnb-checkbox__input[data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on);opacity:1;transform:scale(1)}.eufemia-scope--10_104_0 .dnb-checkbox__input:checked~.dnb-checkbox__button,.eufemia-scope--10_104_0 .dnb-checkbox__input[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on);border-color:var(--checkbox-color-border-on)}.eufemia-scope--10_104_0 .dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-off);opacity:0;transform:scale(.8)}.eufemia-scope--10_104_0 .dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off);border-color:var(--checkbox-color-border-off);transition:background-color .1s ease-out}.eufemia-scope--10_104_0 .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-height__indeterminate);opacity:0;position:absolute;transform:scale(.85);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--checkbox-gfx-width__indeterminate);z-index:5}.eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{opacity:1;transform:scale(1)}.eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__button{background-color:transparent;border-color:var(--checkbox-color-border-off)}.eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate:checked:hover~.dnb-checkbox__gfx,.eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__gfx,.eufemia-scope--10_104_0 .dnb-checkbox__input:indeterminate:hover~.dnb-checkbox__gfx{color:transparent}.eufemia-scope--10_104_0 .dnb-checkbox--large .dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{height:var(--checkbox-gfx-height__indeterminate--large);width:var(--checkbox-gfx-width__indeterminate--large)}.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:checked~.dnb-checkbox__button{border-width:var(--checkbox-border-width--disabled)}.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:checked~.dnb-checkbox__button,.eufemia-scope--10_104_0 .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)}.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:checked~.dnb-checkbox__gfx,.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--disabled)}.eufemia-scope--10_104_0 .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)}.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--disabled)}.eufemia-scope--10_104_0 .dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__gfx{color:transparent}.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button{background-color:var(--checkbox-color-background--active);border-color:var(--checkbox-color-border--active)}.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__gfx,.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on)}.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__button{background-color:var(--checkbox-color-background-indeterminate--active);border-color:var(--checkbox-color-border-indeterminate--active)}.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--active)}.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--hover);border-color:var(--checkbox-color-border-off--hover);border-width:var(--checkbox-border-width--hover)}.eufemia-scope--10_104_0 .dnb-checkbox__input:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--hover)}.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):checked:hover~.dnb-checkbox__button,.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled])[data-checked=true]:hover~.dnb-checkbox__button{border:var(--checkbox-border-width--hover) solid var(--checkbox-color-border-on--hover)}html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button{background-color:var(--checkbox-color-background--focus);border:none}html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--focus)}.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button .dnb-checkbox__focus,.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button .dnb-checkbox__focus{display:block}.eufemia-scope--10_104_0 .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--focus)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button{border:none}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus{--border-color:var(--checkbox-color-border--error);--border-width:var(--checkbox-border-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button[data-checked=true]{border-color:var(--checkbox-color-border--error--hover)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--error--hover)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error)}html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__button,html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{--border-color:var(--checkbox-color-border--error);--border-width:calc(var(--checkbox-border-width--hover));background-color:var(--checkbox-color-background--error-contrast);border:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked~.dnb-checkbox__button,.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--error)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{background-color:var(--checkbox-color-gfx--error-contrast);border-radius:var(--checkbox-border-radius);color:var(--checkbox-color-gfx--error-contrast)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not(:active):not(:hover)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not(:indeterminate)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:hover:not(:active)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--error--hover)}.eufemia-scope--10_104_0 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.eufemia-scope--10_104_0 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}.eufemia-scope--10_104_0 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.eufemia-scope--10_104_0 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__gfx{color:var(--skeleton-color)}.eufemia-scope--10_104_0 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__indeterminate{background-color:var(--skeleton-color)}