frontend/app/primitives/switcher/index.scss

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../../public/stylesheets/variables';

label.switcher--ignite {
    $width: 34px;
    $height: 20px;

    $color-inactive-primary: #c5c5c5;
    $color-inactive-secondary: #ffffff;
    $color-active-primary: $ignite-brand-primary;
    $color-active-secondary: #ff8485;

    width: $width;
    max-width: $width !important;
    height: $height;

    line-height: $height;
    vertical-align: middle;

    cursor: pointer;

    input[type='checkbox'] {
        position: absolute;
        opacity: 0.0;

        & + div {
            position: relative;

            width: $width;
            height: 14px;
            margin: 3px 0;

            border-radius: 8px;
            background-color: $color-inactive-primary;
            transition: background 0.2s ease;

            &:before {
                content: '';

                position: absolute;
                top: -3px;
                left: 0;

                width: $height;
                height: $height;

                border-width: 1px;
                border-style: solid;
                border-radius: 50%;
                border-color: $color-inactive-primary;
                background-color: $color-inactive-secondary;

                transition: all 0.12s ease;
            }

            &:active:before {
                transform: scale(1.15, 0.85);
            }
        }

        &[is-in-progress='true'] + div:before {
            border-left-width: 2px;
            border-left-color: $color-active-primary;

            animation-name: switcher--animation;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        &:checked + div {
            background-color: $color-active-secondary;

            &:before {
                content: '';

                left: 14px;

                border-color: $color-active-primary;
                background-color: $color-active-primary;
            }
        }

        &[is-in-progress='true']:checked + div {
            background-color: $color-inactive-primary;

            &:before {
                border-color: $color-inactive-primary;
                border-left-color: $color-active-primary;
                background-color: $color-inactive-secondary;
            }
        }
    }
}

@keyframes switcher--animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}