@kelvininc/ui-components/dist/collection/components/toggle-button/toggle-button.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
:host {
  /**
   * @prop --button-height-small: toggle button component's height when size is small.
   * @prop --button-height-large: toggle button component's height when size is large.
   * @prop --button-padding-small: toggle button component's padding when size is small.
   * @prop --button-padding-large: toggle button component's padding when size is large.
   * @prop --button-icon-width-small: toggle button component's icon width when size is small.
   * @prop --button-icon-width-large: toggle button component's icon width when size is large.
   * @prop --button-icon-height-small: toggle button component's icon height when size is small.
   * @prop --button-icon-height-large: toggle button component's icon height when size is large.
   * @prop --text-color-default: toggle button component's text color default.
   * @prop --text-color-active: toggle button component's text color active.
   * @prop --text-color-disabled: toggle button component's text color disabled.
   * @prop --background-color-default: toggle button component's background color default.
   * @prop --background-color-active: toggle button component's background color active.
   * @prop --background-color-disabled: toggle button component's background color disabled.
   * @prop --border-color-default: toggle button component's border color default.
   * @prop --border-color-active: toggle button component's border color active.
   * @prop --border-color-disabled: toggle button component's border color disabled.
   */
  --button-height-large: 36px;
  --button-height-small: 28px;
  --button-width: 100%;
  --button-padding-large: var(--kv-spacing-2x, 8px) var(--kv-spacing-4x, 16px);
  --button-padding-small: var(--kv-spacing, 4px) var(--kv-spacing-3x, 12px);
  --button-icon-height-large: 24px;
  --button-icon-height-small: 16px;
  --button-icon-width-large: 24px;
  --button-icon-width-small: 16px;
  --text-color-default: var(--kv-neutral-2, #e5e5e5);
  --text-color-active: var(--kv-neutral-0, #fff);
  --text-color-disabled: var(--kv-neutral-5, #707070);
  --text-color-disabled-active: var(--kv-neutral-5, #707070);
  --background-color-default: var(--kv-neutral-6, #3f3f3f);
  --background-color-active: var(--kv-neutral-6, #3f3f3f);
  --background-color-disabled: var(--kv-neutral-7, #2a2a2a);
  --background-color-disabled-active: var(--kv-neutral-7, #2a2a2a);
  --border-color-default: var(--kv-neutral-6, #3f3f3f);
  --border-color-active: var(--kv-neutral-0, #fff);
  --border-color-disabled: var(--kv-neutral-6, #3f3f3f);
  --border-color-disabled-active: var(--kv-neutral-6, #3f3f3f);
  --border-radius-top-left: 2px;
  --border-radius-bottom-left: 2px;
  --border-radius-top-right: 2px;
  --border-radius-bottom-right: 2px;
}

.toggle-button {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 14px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 21px;
  letter-spacing: normal;
  text-transform: none;
  position: relative;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--kv-spacing-2x, 8px);
  border-top-left-radius: var(--border-radius-top-left);
  border-bottom-left-radius: var(--border-radius-bottom-left);
  border-top-right-radius: var(--border-radius-top-right);
  border-bottom-right-radius: var(--border-radius-bottom-right);
  border: 1px solid var(--border-color-default);
  background: var(--background-color-default);
  color: var(--text-color-default);
  height: var(--button-height-large);
  padding: var(--button-padding-large);
  width: var(--button-width);
}
.toggle-button .toggle-button-icon kv-icon {
  --icon-color: var(--text-color-default);
  --icon-width: 16px;
  --icon-height: 16px;
  width: 16px;
  height: 16px;
}
.toggle-button--checked {
  border: 1px solid var(--border-color-active);
  background: var(--background-color-active);
  color: var(--text-color-active);
}
.toggle-button--checked .toggle-button-icon kv-icon {
  --icon-color: var(--text-color-active);
}
.toggle-button--disabled {
  cursor: not-allowed;
  pointer-events: none;
  border: 1px solid var(--border-color-disabled);
  background: var(--background-color-disabled);
  color: var(--text-color-disabled);
}
.toggle-button--disabled.toggle-button--checked {
  border: 1px solid var(--border-color-disabled-active);
  background: var(--background-color-disabled-active);
  color: var(--text-color-disabled-active);
}
.toggle-button--disabled .toggle-button-icon kv-icon {
  --icon-color: var(--text-color-disabled);
}
.toggle-button--size-small {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 12px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  padding: var(--button-padding-small);
  height: var(--button-height-small);
}
.toggle-button--size-small.toggle-button--only-icon {
  width: var(--button-height-small);
  justify-content: center;
}
.toggle-button--size-small.toggle-button--only-icon .toggle-button-icon kv-icon {
  --icon-width: var(--button-icon-width-small);
  --icon-height: var(--button-icon-height-small);
  width: var(--button-icon-width-small);
  height: var(--button-icon-height-small);
}
.toggle-button--only-icon {
  padding: var(--kv-spacing, 4px);
  width: var(--button-height-large);
  justify-content: center;
}
.toggle-button--only-icon .toggle-button-icon kv-icon {
  --icon-width: var(--button-icon-width-large);
  --icon-height: var(--button-icon-height-large);
  width: var(--button-icon-width-large);
  height: var(--button-icon-height-large);
}