Skip to content
This repository was archived by the owner on Feb 6, 2021. It is now read-only.
This repository was archived by the owner on Feb 6, 2021. It is now read-only.

replace pin classes with current inset etc. classes #4

@evdama

Description

@evdama

Hi there,

pin was the past whereas inset and friends are the now...
https://tailwindcss.com/docs/top-right-bottom-left/

pasting what I've put in my project with things switched already... please review, it's untested

.form-switch {
    @apply relative select-none w-12 mr-2 leading-normal;
}

.form-switch-checkbox {
    @apply hidden;
}

.form-switch-label {
    @apply block overflow-hidden cursor-pointer bg-four border rounded-full h-6 shadow-inner;

    transition: background-color 0.2s ease-in;
}

.form-switch-label:before {
    @apply absolute block bg-white inset-y-0 w-6 border rounded-full -ml-1;

    right: 40%;
    content: "";
    transition: all 0.2s ease-in;
}

.form-switch-checkbox:checked+.form-switch-label,
.form-switch-checkbox:checked+.form-switch-label:before {}

.form-switch-checkbox:checked+.form-switch-label {
    @apply bg-three shadow-none;
}

.form-switch-checkbox:checked+.form-switch-label:before {
    @apply inset-y-0 right-0;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions