Violin.css

Toggle 

<!-- Default -->
<label class="inv-toggle">
    <input type="checkbox">
    <span class="inv-toggle__slider "></span>
</label>


<!-- Checked -->
<label class="inv-toggle">
    <input type="checkbox" checked>
    <span class="inv-toggle__slider "></span>
</label>


<!-- Disabled -->
<label class="inv-toggle">
    <input type="checkbox" disabled>
    <span class="inv-toggle__slider "></span>
</label>


<!-- Checked Disabled -->
<label class="inv-toggle">
    <input type="checkbox" checked disabled>
    <span class="inv-toggle__slider "></span>
</label>


<!-- Default Accent -->
<label class="inv-toggle">
    <input type="checkbox">
    <span class="inv-toggle__slider inv-toggle__slider--accent"></span>
</label>


<label class="inv-toggle">
  <input type="checkbox" {{ toggle.checked }} {{ toggle.disabled }}>
  <span class="inv-toggle__slider {{ toggle.modifier }}"></span>
</label>
 
/* Default */
{
  "toggle": {
    "checked": "",
    "disabled": ""
  }
}


/* Checked */
{
  "toggle": {
    "checked": "checked",
    "disabled": ""
  }
}


/* Disabled */
{
  "toggle": {
    "checked": "",
    "disabled": "disabled"
  }
}


/* Checked Disabled */
{
  "toggle": {
    "checked": "checked",
    "disabled": "disabled"
  }
}


/* Default Accent */
{
  "toggle": {
    "checked": "",
    "disabled": "",
    "modifier": "inv-toggle__slider--accent"
  }
}
  • Content: 
    .inv-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 12px;
  margin-left: var(--space-8);
  margin-right: var(--space-8);
  margin-bottom: 6px;
  margin-top: 6px;
}

.inv-toggle input {
  display: none;
}

.inv-toggle__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-system--light);
  transition: 0.1s;
  border-radius: 16px;
}

.inv-toggle__slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  top: -2px;
  left: -4px;
  bottom: 4px;
  background-color: var(--color-default--regular);
  box-shadow: var(--shadow-4) var(--color-default--shadow);
  transition: 0.1s;
  border-radius: 50%;
}

.inv-toggle__slider--accent::before {
  background-color: var(--color-accent--regular);
  box-shadow: var(--shadow-4) var(--color-accent--shadow);
}

.inv-toggle__slider:hover::before {
  background-color: var(--color-default--regular);
  box-shadow: var(--shadow-3) var(--color-default--shadow);
}

.inv-toggle__slider--accent:hover::before {
  background-color: var(--color-accent--regular);
  box-shadow: var(--shadow-3) var(--color-accent--shadow);
}

.inv-toggle__slider:active::before {
  background-color: var(--color-default--dark);
  box-shadow: var(--shadow-3) var(--color-default--shadow);
}

.inv-toggle__slider--accent:active::before {
  background-color: var(--color-accent--dark);
  box-shadow: var(--shadow-3) var(--color-default--shadow);
}

input:checked + .inv-toggle__slider::before {
  transform: translateX(26px);
  background-color: var(--color-primary--regular);
  box-shadow: var(--shadow-4) var(--color-primary--shadow);
}

input:disabled + .inv-toggle__slider::before {
  background-color: var(--color-system--light);
  box-shadow: var(--shadow-4) var(--color-primary--shadow);
}

input:checked + .inv-toggle__slider:hover::before {
  box-shadow: var(--shadow-3) var(--color-primary--shadow);
}

input:checked + .inv-toggle__slider:active::before {
  background-color: var(--color-primary--dark);
  box-shadow: var(--shadow-3) var(--color-primary--shadow);
}

input:disabled + .inv-toggle__slider:active::before {
  background-color: var(--color-system--light);
  box-shadow: var(--shadow-4) var(--color-primary--shadow);
}

input:disabled + .inv-toggle__slider:hover::before {
  background-color: var(--color-system--light);
  box-shadow: var(--shadow-4) var(--color-primary--shadow);
}
  • URL: /components/raw/toggle/toggle.css
  • Filesystem Path: src/components/toggle/toggle.css
  • Size: 2.5 KB

There are no notes for this item.