Violin.css

Form Toggle 

<!-- Default -->
<div class="inv-form-toggle" data-error-message="">
    <div class="inv-form-toggle__container " data-status-message="Inativo">
        <label class="inv-toggle">
            <input type="checkbox">
            <span class="inv-toggle__slider "></span>
        </label>
    </div>
</div>


<!-- Default Accent -->
<div class="inv-form-toggle" data-error-message="">
    <div class="inv-form-toggle__container " data-status-message="Inativo">
        <label class="inv-toggle">
            <input type="checkbox">
            <span class="inv-toggle__slider inv-toggle__slider--accent"></span>
        </label>
    </div>
</div>


<!-- Default Checked -->
<div class="inv-form-toggle" data-error-message="">
    <div class="inv-form-toggle__container " data-status-message="Ativo">
        <label class="inv-toggle">
            <input type="checkbox" checked>
            <span class="inv-toggle__slider "></span>
        </label>
    </div>
</div>


<!-- Disabled -->
<div class="inv-form-toggle" data-error-message="">
    <div class="inv-form-toggle__container inv-form-toggle__container--disabled" data-status-message="Inativo">
        <label class="inv-toggle">
            <input type="checkbox" disabled>
            <span class="inv-toggle__slider "></span>
        </label>
    </div>
</div>


<!-- Disabled Checked -->
<div class="inv-form-toggle" data-error-message="">
    <div class="inv-form-toggle__container inv-form-toggle__container--disabled" data-status-message="Ativo">
        <label class="inv-toggle">
            <input type="checkbox" checked disabled>
            <span class="inv-toggle__slider "></span>
        </label>
    </div>
</div>


<!-- Error -->
<div class="inv-form-toggle" data-error-message="Cara, não pode ser assim">
    <div class="inv-form-toggle__container inv-form-toggle__container--error" data-status-message="Inativo">
        <label class="inv-toggle">
            <input type="checkbox">
            <span class="inv-toggle__slider "></span>
        </label>
    </div>
</div>


<!-- Error -->
<div class="inv-form-toggle" data-error-message="Cara, não pode ser assim">
    <div class="inv-form-toggle__container inv-form-toggle__container--error" data-status-message="Ativo">
        <label class="inv-toggle">
            <input type="checkbox" checked>
            <span class="inv-toggle__slider "></span>
        </label>
    </div>
</div>


<div
  class="inv-form-toggle"
  data-error-message="{{ form-toggle.error-message }}">
  <div
    class="inv-form-toggle__container {{ form-toggle.modifier }}"
    data-status-message="{{ form-toggle.message }}"
  >
    {{> @toggle}}
  </div>
</div>
 
/* Default */
{
  "form-toggle": {
    "message": "Inativo"
  }
}


/* Default Accent */
{
  "form-toggle": {
    "message": "Inativo"
  },
  "toggle": {
    "modifier": "inv-toggle__slider--accent"
  }
}


/* Default Checked */
{
  "form-toggle": {
    "message": "Ativo"
  },
  "toggle": {
    "checked": "checked"
  }
}


/* Disabled */
{
  "form-toggle": {
    "modifier": "inv-form-toggle__container--disabled",
    "message": "Inativo"
  },
  "toggle": {
    "disabled": "disabled"
  }
}


/* Disabled Checked */
{
  "form-toggle": {
    "modifier": "inv-form-toggle__container--disabled",
    "message": "Ativo"
  },
  "toggle": {
    "disabled": "disabled",
    "checked": "checked"
  }
}


/* Error */
{
  "form-toggle": {
    "modifier": "inv-form-toggle__container--error",
    "message": "Inativo",
    "error-message": "Cara, não pode ser assim"
  }
}


/* Error */
{
  "form-toggle": {
    "modifier": "inv-form-toggle__container--error",
    "message": "Ativo",
    "error-message": "Cara, não pode ser assim"
  },
  "toggle": {
    "checked": "checked"
  }
}
  • Content: 
    .inv-form-toggle::after {
  content: attr(data-error-message);
  font-size: 12px;
  color: var(--color-accent--dark);
}

.inv-form-toggle__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  max-width: 239px;
  background-color: var(--color-system--white);
  outline: 1px;
  outline-color: var(--color-system--light);
  border: solid;
  border-color: var(--color-system--light);
  border-radius: 4px;
  box-sizing: border-box;
  border-width: 1px;
  padding-left: var(--space-16);
  padding-right: var(--space-8);
  font-weight: 600;
  color: var(--color-system--regular);
}

.inv-form-toggle__container::before {
  content: attr(data-status-message);
}

.inv-form-toggle__container--disabled {
  background-color: var(--color-default--white);
  border: none;
  color: var(--color-default--regular);
}

.inv-form-toggle__container--error {
  background-color: var(--color-error--white);
  border-color: var(--color-error--regular);
  border-width: 2px;
}
  • URL: /components/raw/form-toggle/form-toggle.css
  • Filesystem Path: src/components/form-toggle/form-toggle.css
  • Size: 1 KB

There are no notes for this item.