@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
1 lines • 4.66 kB
CSS
.eufemia-scope--10_104_0 .dnb-switch__background{background-color:var(--color-sea-green-30)}.eufemia-scope--10_104_0 .dnb-switch__focus{clip-path:polygon(50% 15%,110% 15%,110% -10%,-10% -10%,-10% 110%,110% 110%,110% 85%,50% 85%);transform:rotate(0deg);transition:transform .15s ease-out}.eufemia-scope--10_104_0 .dnb-switch__input:not(:checked)~.dnb-switch__button{background-color:var(--color-white);border-color:var(--color-sea-green)}.eufemia-scope--10_104_0 .dnb-switch__input:checked~.dnb-switch__button{background-color:var(--color-sea-green)}.eufemia-scope--10_104_0 .dnb-switch__input:not(:checked)~.dnb-switch__background:after{border:.0625rem solid var(--color-sea-green);border-radius:50%;height:.5rem;right:0;transform:translateX(calc(var(--switch-width--medium) - 2.8rem));width:.5rem}.eufemia-scope--10_104_0 .dnb-switch__input:checked~.dnb-switch__background:after{background-color:var(--color-sea-green);border-radius:.0625rem;height:.5rem;left:0;transform:translateX(calc(var(--switch-width--medium) - 1.87rem));width:.0625rem}.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__input:not(:checked)~.dnb-switch__background:after{height:.625rem;transform:translateX(calc(var(--switch-width--large) - 3.7rem));width:.625rem}.eufemia-scope--10_104_0 .dnb-switch--large .dnb-switch__input:checked~.dnb-switch__background:after{height:.625rem;transform:translateX(calc(var(--switch-width--large) - 2.5rem))}.eufemia-scope--10_104_0 .dnb-switch__input[disabled]~.dnb-switch__background{background-color:var(--color-mint-green-25)}.eufemia-scope--10_104_0 .dnb-switch__input[disabled]:checked~.dnb-switch__background:after{background-color:var(--color-sea-green-30)}.eufemia-scope--10_104_0 .dnb-switch__input[disabled]:not(:checked)~.dnb-switch__background:after,.eufemia-scope--10_104_0 .dnb-switch__input[disabled]~.dnb-switch__button{border-color:var(--color-sea-green-30)}.eufemia-scope--10_104_0 .dnb-switch__input[disabled]:checked~.dnb-switch__button{background-color:var(--color-sea-green-30)}html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):focus~.dnb-switch__button{border:none}html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):not(:checked):focus~.dnb-switch__button{background-color:var(--color-mint-green-50)}.eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):checked~.dnb-switch__button .dnb-switch__focus{transform:rotate(180deg)}.eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover~.dnb-switch__button{background-color:var(--color-mint-green-50);border-color:var(--color-sea-green)}.eufemia-scope--10_104_0 .dnb-switch__input:not([disabled]):active~.dnb-switch__button{background-color:var(--color-mint-green-50);border-color:transparent}.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover~.dnb-switch__button{background-color:var(--color-fire-red-8);border-color:var(--color-fire-red)}.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-switch__button{border-color:var(--color-fire-red-8)}.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-switch__button{background-color:var(--color-fire-red)}.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active)~.dnb-switch__background{--border-color:var(--color-fire-red);--border-width:var(--focus-ring-width);background-color:var(--color-fire-red-8);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked~.dnb-switch__background:after{background-color:var(--color-fire-red)}.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked)~.dnb-switch__background:after{border-color:var(--color-fire-red)}.eufemia-scope--10_104_0 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active)~.dnb-switch__button .dnb-switch__focus{--border-color:var(--color-fire-red);--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-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked~.dnb-switch__button .dnb-switch__focus{transform:rotate(180deg)}.eufemia-scope--10_104_0 .dnb-switch>.dnb-form-status{transform:translateY(.1875rem)}