Vebego Component Library

Toggle 

<!-- Default -->
<div class="atm-form-toggle ">
    <input type="checkbox" class="form-toggle" id="toggle" name="toggle">
    <span class="form-toggle-background"></span>
</div>


<!-- Checked -->
<div class="atm-form-toggle ">
    <input type="checkbox" class="form-toggle" id="toggle-checked" name="toggle-checked" checked>
    <span class="form-toggle-background"></span>
</div>


<!-- Disabled -->
<div class="atm-form-toggle ">
    <input type="checkbox" class="form-toggle" id="toggle-disabled" name="toggle-disabled" disabled>
    <span class="form-toggle-background"></span>
</div>


<!-- Checked Disabled -->
<div class="atm-form-toggle ">
    <input type="checkbox" class="form-toggle" id="toggle-checked-disabled" name="toggle-checked-disabled" checked disabled>
    <span class="form-toggle-background"></span>
</div>


<div class="atm-form-toggle {{modifier}}">
    <input 
        type="checkbox"
        class="form-toggle"
        {{#if id}}id="{{id}}"{{/if}}
        {{#if name}}name="{{name}}"{{/if}}
        {{#if value}}value="{{value}}"{{/if}}
        {{#if checked}}checked{{/if}}
        {{#if disabled}}disabled{{/if}}>
    <span class="form-toggle-background"></span>
</div>
 
/* Default */
{
  "modifier": "",
  "id": "toggle",
  "name": "toggle",
  "value": "",
  "checked": false,
  "disabled": false
}


/* Checked */
{
  "modifier": "",
  "id": "toggle-checked",
  "name": "toggle-checked",
  "value": "",
  "checked": true,
  "disabled": false
}


/* Disabled */
{
  "modifier": "",
  "id": "toggle-disabled",
  "name": "toggle-disabled",
  "value": "",
  "checked": false,
  "disabled": true
}


/* Checked Disabled */
{
  "modifier": "",
  "id": "toggle-checked-disabled",
  "name": "toggle-checked-disabled",
  "value": "",
  "checked": true,
  "disabled": true
}
  • Content: 
    .atm-form-toggle {
    @apply relative;
    @apply inline-block;
    @apply w-10;
    @apply mr-2;
    @apply align-middle;
    @apply select-none;
    @apply transition;
    @apply duration-200;
    @apply ease-in;

    .form-toggle {
        @apply absolute;
        @apply block;
        @apply w-6;
        @apply h-6;
        @apply rounded-full;
        @apply bg-white;
        @apply border-shade;
        @apply border-4;
        @apply appearance-none;
        @apply cursor-pointer;

        &:checked {
            @apply right-0;
            @apply border-cta;
        }

        &:checked + .form-toggle-background {
            @apply bg-cta;
        }

        &[disabled] {
            @apply cursor-not-allowed;
        }

        &[disabled] + .form-toggle-background {
            @apply cursor-not-allowed;
        }
    }

    .form-toggle-background {
        @apply block;
        @apply overflow-hidden;
        @apply h-6;
        @apply rounded-full;
        @apply bg-shade;
        @apply cursor-pointer;
    }
}
  • URL: /components/raw/toggle/toggle.css
  • Filesystem Path: src\components\02-atoms\forms\toggle\toggle.css
  • Size: 1.1 KB

No notes defined.