Violin.css

# Toggle

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <!-- 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": null,
        "disabled": null
      }
    }

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

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

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

    /* Default Accent */
    {
      "toggle": {
        "checked": null,
        "disabled": null,
        "modifier": "inv-toggle__slider--accent"
      }
    }

`
File:

- 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

- Handle: @toggle
- Variants (5): Default , Checked , Disabled , Checked Disabled , Default Accent
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/toggle/toggle.hbs
- Referenced by (6): @form-toggle, @form-toggle--default-accent, @form-toggle--default-checked, @form-toggle--disabled, @form-toggle--disabled-checked, @form-toggle--error

There are no notes for this item.