ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / costbloc.com / public / datta-able / scss / partials / other

/**  =====================
      Switches css start
========================== **/

.switch {
    input[type=checkbox] {
        opacity: 0;
        position: absolute;

+ .cr {
            position: relative;
            display: inline-block;
            transition: 0.4s ease;
            height: 20px;
            width: 35px;
            border: 1px solid #e9eaec;
            border-radius: 60px;
            cursor: pointer;
            z-index: 0;
            top: 12px;

&:after,
            &:before {
                content: "";
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }

&:before {
                transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
                height: 20px;
                width: 35px;
                border-radius: 30px;
            }

&:after {
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
                transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
                background: #f7f7f7;
                height: 19px;
                width: 19px;
                border-radius: 60px;
            }
        }

&:checked + .cr {
            &:before {
                background: $theme-color;
                transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
            }

&:after {
                left: 16px;
            }
        }

&:disabled + label {
            opacity: 0.5;
            filter: grayscale(0.4);
            cursor: not-allowed;
        }
    }
    @each $value in $color-bt-name {
        $i: index($color-bt-name, $value);

&.switch-#{$value} input[type=checkbox]:checked + .cr:before {
            background: nth($color-bt-color,$i);
        }
    }

&.switch-alternative input[type=checkbox]:checked + .cr:before {
        background: $theme-color2;
    }
}
/**====== Switches css end ======**/

[-] _wizard.scss [edit]
[-] _toolbar.scss [edit]
[+] ..
[-] _prism.scss [edit]
[-] _chat.scss [edit]
[-] _icon-lauouts.scss [edit]
[-] _calendar.scss [edit]
[-] _switches.scss [edit]
[-] _file-upload.scss [edit]
[-] _chart.scss [edit]