Toggle Button

Ready

Notes
HTML
Assets

Toggle buttons. Typically used for things like toggling filters on search results.

Sass Mixin

@mixin toggleButton()

Parameters

None.


        
        
            <!-- Default -->
<label class="toggleButton">
    <input class="toggleButton__input" type="checkbox">
    <span class="toggleButton__label">
        Checkbox
    </span>
</label>

<label class="toggleButton -disabled">
    <input disabled class="toggleButton__input" type="checkbox">
    <span class="toggleButton__label">
        Disabled
    </span>
</label>

<label class="toggleButton -radio">
    <input name="example-1" class="toggleButton__input" type="radio">
    <span class="toggleButton__label">
        Radio
    </span>
</label>

<label class="toggleButton -radio">
    <input name="example-1" class="toggleButton__input" type="radio">
    <span class="toggleButton__label">
        Radio
    </span>
</label>

<label class="toggleButton -radio -disabled">
    <input disabled class="toggleButton__input" type="radio">
    <span class="toggleButton__label">
        Disabled
    </span>
</label>

<label class="toggleButton -primary">
    <input class="toggleButton__input" type="checkbox">
    <span class="toggleButton__label">
        Primary
    </span>
</label>

<label class="toggleButton -secondary">
    <input class="toggleButton__input" type="checkbox">
    <span class="toggleButton__label">
        Secondary
    </span>
</label>


        
            <!-- Blank -->
<label class="toggleButton -blank">
    <input class="toggleButton__input" type="checkbox">
    <span class="toggleButton__label">
        Checkbox
    </span>
</label>

<label class="toggleButton -blank -disabled">
    <input disabled class="toggleButton__input" type="checkbox">
    <span class="toggleButton__label">
        Disabled
    </span>
</label>

<label class="toggleButton -blank -radio">
    <input name="example-1" class="toggleButton__input" type="radio">
    <span class="toggleButton__label">
        Radio
    </span>
</label>

<label class="toggleButton -blank -radio">
    <input name="example-1" class="toggleButton__input" type="radio">
    <span class="toggleButton__label">
        Radio
    </span>
</label>

<label class="toggleButton -blank -radio -disabled">
    <input disabled class="toggleButton__input" type="radio">
    <span class="toggleButton__label">
        Disabled
    </span>
</label>


        
            <!-- Outline -->
<label class="toggleButton -outline">
    <input class="toggleButton__input" type="checkbox">
    <span class="toggleButton__label">
        Checkbox
    </span>
</label>

<label class="toggleButton -disabled -outline">
    <input disabled class="toggleButton__input" type="checkbox">
    <span class="toggleButton__label">
        Disabled
    </span>
</label>

<label class="toggleButton -radio -outline">
    <input name="example-2" class="toggleButton__input" type="radio">
    <span class="toggleButton__label">
        Radio
    </span>
</label>

<label class="toggleButton -radio -outline">
    <input name="example-2" class="toggleButton__input" type="radio">
    <span class="toggleButton__label">
        Radio
    </span>
</label>

<label class="toggleButton -radio -disabled -outline">
    <input disabled class="toggleButton__input" type="radio">
    <span class="toggleButton__label">
        Disabled
    </span>
</label>

File:

Content:


                                ///
/// A toggle button mixin.
///
/// $checked-color
///     button color when checked
/// $unchecked-color
///     button color when unchecked
/// $disabled-color
///     button color when disabled
///
@mixin toggleButton(
    $color: $gray-400,
    $text-color: $white,
    $hover-color: $link-hover,
    $checked-color: $gray-600,
    $disabled-color: $disabled,
) {
    $b: &;

    display: inline-block;

    &__input {
        display: none;
    }

    &__label {
        color: $text-color;
        background-color: $color;
        padding: 0.618em 1.618em;
        user-select: none;

        &::before {
            @include fontawesome(900, $fa-var-square);
            width: 1em;
            margin-right: .618em;
        }
    }

    @include color-modifiers(primary secondary) using ($color) {
        #{$b}__label {
            background-color: $color;
            color: blackwhite($color,  $text-color);
        }
    }

    &.-checked &__label,
    &__input:checked ~ &__label {
        background-color: $checked-color;

        &::before {
            @include fontawesome(900, $fa-var-check-square);
        }
    }

    &.-disabled {
        #{$b}__label {
            background-color: $disabled-color;
            cursor: default;
        }
    }


    &.-radio {
        #{$b}__label {
            &::before {
                @include fontawesome(900, $fa-var-circle);
            }
        }

        &.-checked #{$b}__label,
        #{$b}__input:checked ~ #{$b}__label {
            &::before {
                @include fontawesome(400, $fa-var-dot-circle);
            }
        }
    }


    &.-outline {
        #{$b}__label {
            color: $color;
            background-color: transparent;
            box-shadow: 0 0 0 2px inset;

            &::before {
                font-weight: 400;
            }
        }

        #{$b}.-checked #{$b}__label,
        #{$b}__input:checked ~ #{$b}__label {
            color: $checked-color;
        }

        &.-disabled {
            #{$b}__label {
                color: $disabled-color;
            }
        }
    }

    &.-blank {
        #{$b}:not(.-checked) #{$b}__label,
        #{$b}__input:not(:checked) ~ #{$b}__label {
            &::before {
                content: unset;
            }
        }
    }
}

URL: /components/raw/toggle-button/toggle-button.scss
Filesystem Path: resources/styles/atoms/toggle-button/toggle-button.scss
Size: 2.3 KB