@inkline/inkline/components/IToggle/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Toggle
 */
.toggle {
  position: relative;
  margin-bottom: 0;
  display: flex;
}
.toggle > input {
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
}
.toggle > input:checked + .toggle-label::before {
  background: var(--toggle--checked--background, var(--color-primary));
  border-color: var(--toggle--checked--border-color, var(--toggle--checked--border-top-color, var(--color-primary)) var(--toggle--checked--border-right-color, var(--color-primary)) var(--toggle--checked--border-bottom-color, var(--color-primary)) var(--toggle--checked--border-left-color, var(--color-primary)));
}
.toggle > input:checked + .toggle-label::after {
  background: var(--toggle--checked--indicator--background, var(--color-white));
  transform: translate(calc(var(--toggle--width, 40px) * 0.5), 0);
}
.toggle > input:focus + .toggle-label::before {
  box-shadow: 0 0 1px var(--toggle--checked--background);
}
.toggle > input:disabled + .toggle-label, .toggle > input[readonly] + .toggle-label {
  cursor: default;
  color: var(--toggle--disabled--label--color);
}
.toggle > input:disabled + .toggle-label::before, .toggle > input[readonly] + .toggle-label::before {
  background: var(--toggle--disabled--background);
  border-color: var(--toggle--disabled--border-color, var(--toggle--disabled--border-top-color, var(--toggle--border-top-color, var(--border-top-color))) var(--toggle--disabled--border-right-color, var(--toggle--border-right-color, var(--border-right-color))) var(--toggle--disabled--border-bottom-color, var(--toggle--border-bottom-color, var(--border-bottom-color))) var(--toggle--disabled--border-left-color, var(--toggle--border-left-color, var(--border-left-color))));
}
.toggle > input:disabled + .toggle-label::after, .toggle > input[readonly] + .toggle-label::after {
  background: var(--toggle--disabled--indicator--background);
}
.toggle > input:disabled:checked + .toggle-label::before, .toggle > input[readonly]:checked + .toggle-label::before {
  background: var(--toggle--checked--disabled--background);
  border-color: var(--toggle--checked--disabled--border-color, var(--toggle--checked--disabled--border-top-color, var(--color-primary)) var(--toggle--checked--disabled--border-right-color, var(--color-primary)) var(--toggle--checked--disabled--border-bottom-color, var(--color-primary)) var(--toggle--checked--disabled--border-left-color, var(--color-primary)));
}
.toggle > input:disabled:checked + .toggle-label::after, .toggle > input[readonly]:checked + .toggle-label::after {
  background: var(--toggle--checked--disabled--indicator--background);
}
.toggle .toggle-label {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
  color: var(--toggle--label--color, var(--toggle--color));
  font-size: var(--toggle--label--font-size, var(--toggle--font-size, var(--font-size)));
}
.toggle .toggle-label::before {
  content: "";
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition-duration: var(--toggle--transition-duration, var(--transition-duration));
  transition-property: var(--toggle--transition-property, background-color, border-color, transform);
  transition-timing-function: var(--toggle--transition-timing-function, var(--transition-timing-function));
  border-width: var(--toggle--border-width, var(--toggle--border-top-width, var(--border-top-width)) var(--toggle--border-right-width, var(--border-right-width)) var(--toggle--border-bottom-width, var(--border-bottom-width)) var(--toggle--border-left-width, var(--border-left-width)));
  border-style: var(--toggle--border-style, var(--toggle--border-top-style, var(--border-top-style)) var(--toggle--border-right-style, var(--border-right-style)) var(--toggle--border-bottom-style, var(--border-bottom-style)) var(--toggle--border-left-style, var(--border-left-style)));
  border-color: var(--toggle--border-color, var(--toggle--border-top-color, var(--border-top-color)) var(--toggle--border-right-color, var(--border-right-color)) var(--toggle--border-bottom-color, var(--border-bottom-color)) var(--toggle--border-left-color, var(--border-left-color)));
  margin-right: var(--toggle--margin-right, var(--margin-right));
  flex-shrink: 0;
  flex-grow: 0;
  background-color: var(--toggle--background);
  width: var(--toggle--width, 40px);
  height: var(--toggle--height, 20px);
  border-radius: var(--toggle--border-radius, var(--toggle--border-top-left-radius, var(--border-top-left-radius)) var(--toggle--border-top-right-radius, var(--border-top-right-radius)) var(--toggle--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--toggle--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.toggle .toggle-label::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translate(0, 0);
  transition-duration: var(--toggle--transition-duration, var(--transition-duration));
  transition-property: var(--toggle--transition-property, background-color, border-color, transform);
  transition-timing-function: var(--toggle--transition-timing-function, var(--transition-timing-function));
  background-color: var(--toggle--indicator--background);
  height: var(--toggle--indicator--width, 16px);
  width: var(--toggle--indicator--height, 16px);
  border-radius: var(--toggle--indicator--border-radius, var(--toggle--indicator--border-top-left-radius, var(--toggle--border-top-left-radius, var(--border-top-left-radius))) var(--toggle--indicator--border-top-right-radius, var(--toggle--border-top-right-radius, var(--border-top-right-radius))) var(--toggle--indicator--border-bottom-right-radius, var(--toggle--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--toggle--indicator--border-bottom-left-radius, var(--toggle--border-bottom-left-radius, var(--border-bottom-left-radius))));
  margin-top: calc(var(--toggle--indicator--height, 16px) / -2);
  margin-left: calc(var(--toggle--height, 20px) / 2 - var(--toggle--indicator--height, 16px) / 2);
}
.toggle.-rounded .toggle-label::before {
  border-radius: var(--toggle--rounded--border-radius, var(--toggle--rounded--border-top-left-radius, var(--toggle--height)) var(--toggle--rounded--border-top-right-radius, var(--toggle--height)) var(--toggle--rounded--border-bottom-right-radius, var(--toggle--height)) var(--toggle--rounded--border-bottom-left-radius, var(--toggle--height)));
}
.toggle.-rounded .toggle-label::after {
  border-radius: var(--toggle--rounded--indicator--border-radius, var(--toggle--rounded--indicator--border-top-left-radius, 50%) var(--toggle--rounded--indicator--border-top-right-radius, 50%) var(--toggle--rounded--indicator--border-bottom-right-radius, 50%) var(--toggle--rounded--indicator--border-bottom-left-radius, 50%));
}

/**
 * Color variants
 */
.toggle.-light {
  --toggle--background: var(--toggle--light--background, var(--color-light));
  --toggle--border-top-color: var(
      --toggle--light--border-top-color,
      var(--color-light-shade-50)
  );
  --toggle--border-right-color: var(
      --toggle--light--border-right-color,
      var(--color-light-shade-50)
  );
  --toggle--border-bottom-color: var(
      --toggle--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --toggle--border-left-color: var(
      --toggle--light--border-left-color,
      var(--color-light-shade-50)
  );
  --toggle--indicator--background: var(
      --toggle--light--indicator--background,
      var(--color-white)
  );
  --toggle--label--color: var(
      --toggle--light--label--color,
      var(--contrast-text-color-white)
  );
  --toggle--checked--background: var(
      --toggle--light--checked--background,
      var(--color-primary)
  );
  --toggle--checked--border-top-color: var(
      --toggle--light--checked--border-top-color,
      var(--color-primary-shade-50)
  );
  --toggle--checked--border-right-color: var(
      --toggle--light--checked--border-right-color,
      var(--color-primary-shade-50)
  );
  --toggle--checked--border-bottom-color: var(
      --toggle--light--checked--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --toggle--checked--border-left-color: var(
      --toggle--light--checked--border-left-color,
      var(--color-primary-shade-50)
  );
  --toggle--disabled--background: var(
      --toggle--light--disabled--background,
      var(--color-light-shade-50)
  );
  --toggle--disabled--border-top-color: var(
      --toggle--light--disabled--border-top-color,
      var(--color-light-shade-50)
  );
  --toggle--disabled--border-right-color: var(
      --toggle--light--disabled--border-right-color,
      var(--color-light-shade-50)
  );
  --toggle--disabled--border-bottom-color: var(
      --toggle--light--disabled--border-bottom-color,
      var(--color-light-shade-50)
  );
  --toggle--disabled--border-left-color: var(
      --toggle--light--disabled--border-left-color,
      var(--color-light-shade-50)
  );
  --toggle--disabled--indicator--background: var(
      --toggle--disabled--light--indicator--background,
      var(--color-gray-50)
  );
  --toggle--disabled--label--color: var(
      --toggle--light--disabled--label--color,
      var(--text-color-weak)
  );
  --toggle--checked--disabled--background: var(
      --toggle--light--checked--disabled--background,
      var(--color-primary-200)
  );
  --toggle--checked--disabled--border-color: var(
      --toggle--light--checked--disabled--border-color,
      var(--color-primary-300)
  );
  --toggle--checked--disabled--indicator--background: var(
      --toggle--checked--light--indicator--disabled--background,
      var(--color-gray-50)
  );
}
.toggle.-dark {
  --toggle--background: var(--toggle--dark--background, var(--color-dark));
  --toggle--border-top-color: var(
      --toggle--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --toggle--border-right-color: var(
      --toggle--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --toggle--border-bottom-color: var(
      --toggle--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --toggle--border-left-color: var(
      --toggle--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --toggle--indicator--background: var(
      --toggle--light--indicator--background,
      var(--color-white)
  );
  --toggle--label--color: var(--toggle--dark--label--color, var(--contrast-text-color-dark));
  --toggle--checked--background: var(
      --toggle--dark--checked--background,
      var(--color-primary)
  );
  --toggle--checked--border-top-color: var(
      --toggle--dark--checked--border-top-color,
      var(--color-primary-tint-50)
  );
  --toggle--checked--border-right-color: var(
      --toggle--dark--checked--border-right-color,
      var(--color-primary-tint-50)
  );
  --toggle--checked--border-bottom-color: var(
      --toggle--dark--checked--border-bottom-color,
      var(--color-primary-tint-50)
  );
  --toggle--checked--border-left-color: var(
      --toggle--dark--checked--border-left-color,
      var(--color-primary-tint-50)
  );
  --toggle--disabled--background: var(
      --toggle--dark--disabled--background,
      var(--color-dark-tint-100)
  );
  --toggle--disabled--border-color: var(
      --toggle--dark--disabled--border-color,
      var(--color-dark-tint-50)
  );
  --toggle--disabled--indicator--background: var(
      --toggle--dark--disabled--indicator--background,
      var(--color-gray-400)
  );
  --toggle--disabled--label--color: var(
      --toggle--dark--disabled--label--color,
      var(--text-color-weak)
  );
  --toggle--checked--disabled--background: var(
      --toggle--dark--checked--disabled--background,
      var(--color-primary-800)
  );
  --toggle--checked--disabled--border-color: var(
      --toggle--dark--checked--disabled--border-color,
      var(--color-primary-900)
  );
  --toggle--checked--disabled--indicator--background: var(
      --toggle--dark--checked--disabled--indicator--background,
      var(--color-gray-300)
  );
}

/**
 * Size variants
 */
.toggle.-sm {
  --toggle--width: var(--toggle--sm--width, calc(40px * var(--size-multiplier-sm)));
  --toggle--height: var(--toggle--sm--height, calc(20px * var(--size-multiplier-sm)));
  --toggle--border-top-left-radius: var(
      --toggle--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --toggle--border-top-right-radius: var(
      --toggle--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --toggle--border-bottom-right-radius: var(
      --toggle--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --toggle--border-bottom-left-radius: var(
      --toggle--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --toggle--indicator--width: var(
      --toggle--sm--indicator--width,
      calc(16px * var(--size-multiplier-sm))
  );
  --toggle--indicator--height: var(
      --toggle--sm--indicator--height,
      calc(16px * var(--size-multiplier-sm))
  );
  --toggle--label--font-size: var(
      --toggle--sm--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
}
.toggle.-md {
  --toggle--width: var(--toggle--md--width, calc(40px * var(--size-multiplier-md)));
  --toggle--height: var(--toggle--md--height, calc(20px * var(--size-multiplier-md)));
  --toggle--border-top-left-radius: var(
      --toggle--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --toggle--border-top-right-radius: var(
      --toggle--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --toggle--border-bottom-right-radius: var(
      --toggle--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --toggle--border-bottom-left-radius: var(
      --toggle--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --toggle--indicator--width: var(
      --toggle--md--indicator--width,
      calc(16px * var(--size-multiplier-md))
  );
  --toggle--indicator--height: var(
      --toggle--md--indicator--height,
      calc(16px * var(--size-multiplier-md))
  );
  --toggle--label--font-size: var(
      --toggle--md--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
}
.toggle.-lg {
  --toggle--width: var(--toggle--lg--width, calc(40px * var(--size-multiplier-lg)));
  --toggle--height: var(--toggle--lg--height, calc(20px * var(--size-multiplier-lg)));
  --toggle--border-top-left-radius: var(
      --toggle--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --toggle--border-top-right-radius: var(
      --toggle--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --toggle--border-bottom-right-radius: var(
      --toggle--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --toggle--border-bottom-left-radius: var(
      --toggle--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --toggle--indicator--width: var(
      --toggle--lg--indicator--width,
      calc(16px * var(--size-multiplier-lg))
  );
  --toggle--indicator--height: var(
      --toggle--lg--indicator--height,
      calc(16px * var(--size-multiplier-lg))
  );
  --toggle--label--font-size: var(
      --toggle--lg--label--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
}