@dnb/eufemia/components/switch/style/themes/dnb-switch-theme-sbanken.css

DNB Eufemia Design System UI Library

@charset "UTF-8";
/*
* Switch theme for Sbanken
*
*/
/*
 * Utilities
 */
.dnb-switch {
  --switch-width--medium: 3.75rem;
  --switch-height--medium: 2rem;
  --switch-width--large: 5rem;
  --switch-height--large: 2.625rem;
  --switch-border-width--medium: 0.0625rem;
  --switch-border-width--large: 0.0625rem;
  --switch-spacing-height--medium: 0.375rem;
  --switch-spacing-width--medium: 0.25rem;
  --switch-spacing-height--large: 0.5rem;
  --switch-spacing-width--large: 0.25rem;
  --switch-content-width: 1.125rem;
  --switch-content-spacing--medium: 0.5rem;
  --switch-content-spacing--large: 0.875rem;
  --button-dimension--medium: calc(
    var(--switch-height--medium) - var(--switch-spacing-height--medium)
  );
  --button-dimension--large: calc(
    var(--switch-height--large) - var(--switch-spacing-height--large)
  );
}
.dnb-switch--large .dnb-switch__row {
  height: var(--switch-height--large);
}
.dnb-switch__background {
  height: 100%;
  background-color: var(--sb-color-gray);
  border-radius: 1.5rem;
}
.dnb-switch__background::after {
  color: var(--sb-color-text);
  font-size: var(--sb-font-size-small);
  content: "Av";
}
.dnb-switch--large .dnb-switch__background {
  height: 100%;
  border-radius: 1.5rem;
}
.dnb-switch--large .dnb-switch__background::after {
  font-size: var(--sb-font-size-basis);
}
.dnb-switch__button {
  width: var(--button-dimension--medium);
  height: var(--button-dimension--medium);
  background-color: var(--sb-color-white);
}
.dnb-switch--large .dnb-switch__button {
  width: var(--button-dimension--large);
  height: var(--button-dimension--large);
}
.dnb-switch {
  /* stylelint-disable no-descending-specificity */
  /*
   * When switched ON
   */
}
.dnb-switch__input:checked ~ .dnb-switch__button {
  transform: translateX(calc(var(--switch-width--medium) - var(--button-dimension--medium) - var(--switch-spacing-width--medium)));
}
.dnb-switch__input:checked ~ .dnb-switch__background {
  background-color: var(--sb-color-violet-light);
}
.dnb-switch__input:checked ~ .dnb-switch__background::after {
  color: var(--sb-color-white);
  content: "På";
  transform: translateX(var(--switch-content-spacing--medium));
}
.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__button {
  transform: translateX(calc(var(--switch-width--large) - var(--button-dimension--large) - var(--switch-spacing-width--large)));
}
.dnb-switch--large .dnb-switch__input:checked ~ .dnb-switch__background::after {
  transform: translateX(var(--switch-content-spacing--large));
}
.dnb-switch {
  /*
   * When switched OFF
   */
}
.dnb-switch__input:not(:checked) ~ .dnb-switch__button {
  transform: translateX(var(--switch-spacing-width--medium));
}
.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
  transform: translateX(var(--switch-spacing-width--large));
}
.dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
  transform: translateX(calc(var(--switch-width--medium) - var(--switch-content-width) - var(--switch-content-spacing--medium)));
}
.dnb-switch--large .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
  transform: translateX(calc(var(--switch-width--large) - var(--switch-content-width) - var(--switch-content-spacing--large)));
}
.dnb-switch {
  /*
   * On disabled state
   *
   */
}
.dnb-switch__input[disabled] ~ .dnb-switch__background {
  background-color: var(--sb-color-gray);
}
.dnb-switch__input[disabled] ~ .dnb-switch__background::after {
  color: var(--sb-color-gray-dark);
}
.dnb-switch__input[disabled] ~ .dnb-switch__button {
  background-color: var(--sb-color-gray-light);
}
.dnb-switch__input[disabled]:checked ~ .dnb-switch__background {
  background-color: var(--sb-color-violet);
  opacity: 0.3;
}
.dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after {
  color: var(--sb-color-white);
}
.dnb-switch__input[disabled]:checked ~ .dnb-switch__button {
  background-color: var(--sb-color-white);
}
.dnb-switch {
  /*
   * On focus state
   *
   */
}
html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
  outline: initial;
  box-shadow: none;
}
html[data-whatinput=""] html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
  box-shadow: none;
}
html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):checked:focus ~ .dnb-switch__button {
  background-color: var(--focus-ring-color);
}
html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
  outline: initial;
  box-shadow: none;
}
html[data-whatinput=""] html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
  box-shadow: none;
}
html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background {
  background-color: var(--sb-color-blue-light-3);
}
html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background::after {
  color: var(--focus-ring-color);
  font-weight: var(--sb-font-weight-bold);
}
html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus {
  --border-color: var(--focus-ring-color);
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-switch {
  /*
   * On hover state
   *
   */
}
.dnb-switch__background:hover, .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover ~ .dnb-switch__background {
  color: var(--sb-color-violet);
  background-color: var(--sb-color-violet-light-3);
  --border-color: var(--sb-color-violet);
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-switch__background:hover::after, .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover ~ .dnb-switch__background::after {
  color: var(--sb-color-violet);
}
.dnb-switch__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-switch__background {
  background-color: var(--sb-color-violet);
}
.dnb-switch {
  /*
   * On error state
   *
   */
}
.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
  background-color: var(--sb-color-white);
  --border-color: var(--sb-color-red);
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__background {
  background-color: var(--sb-color-magenta-light-2);
  --border-color: var(--sb-color-red);
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after {
  color: var(--sb-color-red);
}
.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background {
  background-color: var(--sb-color-magenta);
  box-shadow: none;
}
.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked:hover ~ .dnb-switch__background {
  background-color: var(--sb-color-red);
}
.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked) ~ .dnb-switch__button .dnb-switch__focus {
  --border-color: var(--sb-color-red);
  --border-width: 0.0625rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
  box-shadow: none;
}
.dnb-switch {
  /* stylelint-enable no-descending-specificity */
}