scss/_custom-switch.scss at master · thxprotocol/scss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
@mixin switch($res: 'sm') {
    $index: 1rem;
    $mainVal: 1rem;

    @if $res == 'md' {
        $index: 2rem;
        $mainVal: 1.5rem;
    } @else if $res == 'lg' {
        $index: 3rem;
        $mainVal: 2rem;
    } @else if $res == 'xl' {
        $index: 4rem;
        $mainVal: 2.5rem;
    }

    .custom-control-label {
        padding-left: #{$index};
        padding-bottom: #{$mainVal};
    }

    .custom-control-label::before {
        height: $mainVal;
        width: calc(#{$index} + 0.75rem);
        border-radius: $mainVal * 2;
    }

    .custom-control-label::after {
        width: calc(#{$mainVal} - 4px);
        height: calc(#{$mainVal} - 4px);
        border-radius: calc(#{$index} - (#{$mainVal} / 2));
    }

    .custom-control-input:checked ~ .custom-control-label::after {
        transform: translateX(calc(#{$mainVal} - 0.25rem));
    }
}

// YOU CAN PUT ALL RESOLUTION HERE
// sm - DEFAULT, md, lg, xl
.custom-switch.custom-switch-sm {
    @include switch();
}

.custom-switch.custom-switch-md {
    @include switch('md');
}

.custom-switch.custom-switch-lg {
    @include switch('lg');
}

.custom-switch.custom-switch-xl {
    @include switch('xl');
}

.custom-switch .custom-control-input:checked {
    ~ .custom-control-label::before {
        background-color: $dark !important;
        border-color: $dark !important;
    }
}

.custom-switch .custom-control-input:focus {
    ~ .custom-control-label::before {
        box-shadow: 0 0 0 0.2rem rgb(0 0 0 / 25%);
    }
}

.custom-switch-light .custom-control-input:checked {
    ~ .custom-control-label::before {
        background-color: $light !important;
        border-color: $light !important;
    }
    ~ .custom-control-label::after {
        background-color: $darker !important;
    }
}

.custom-switch-light .custom-control-input:focus {
    ~ .custom-control-label::before {
        box-shadow: 0 0 0 0.2rem rgb(255 255 255 / 25%);
    }
}