theme-bootstrap/src/assets/scss/components/_switch.scss at main · oruga-ui/theme-bootstrap · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
@use "sass:map";

/* @docs */
$switch-spacer: 0.5rem !default;
/* @docs */

/* @bootstrap docs */
// $form-switch-color:               rgba($black, .25);
// $form-switch-width:               2em;
// $form-switch-padding-start:       $form-switch-width + .5em;
// $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
// $form-switch-border-radius:       $form-switch-width;
// $form-switch-transition:          background-position .15s ease-in-out;

// $form-switch-focus-color:         $input-focus-border-color;
// $form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");

// $form-switch-checked-color:       $component-active-color;
// $form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
// $form-switch-checked-bg-position: right center;
/* @bootstrap docs */

@function switchSVG($svg, $color) {
    @return escape-svg(str-replace($svg, "#{$form-switch-color}", $color));
}

.form-switch {
    --#{$prefix}switch-spacer: #{$switch-spacer};

    position: relative;

    &:not(:last-child) {
        margin-right: var(--#{$prefix}switch-spacer);
    }

    // color variant
    @each $name, $color in $theme-colors {
        &.variant-#{$name} input[type="checkbox"] {
            background-color: transparent;
            border-color: var(--#{$prefix}#{$name});

            --#{$prefix}form-switch-bg: #{switchSVG(
                    $form-switch-bg-image,
                    $color
                )};

            &:checked {
                background-color: var(--#{$prefix}#{$name});
                --#{$prefix}form-switch-bg: #{switchSVG(
                        $form-switch-checked-bg-image,
                        $white
                    )};
            }
        }

        // possive colors variant
        &.variant-#{$name}-passive {
            input[type="checkbox"]:checked {
                background-color: var(--#{$prefix}#{$name});
                border-color: var(--#{$prefix}#{$name});
            }
        }

        // subtle color variant
        &.variant-#{$name}-subtle input[type="checkbox"] {
            $color: map.get($theme-colors-bg-subtle, #{$name});

            background-color: transparent;
            border-color: var(--#{$prefix}#{$name}-border-subtle);

            --#{$prefix}form-switch-bg: #{switchSVG(
                    $form-switch-bg-image,
                    $color
                )};

            &:checked {
                background-color: var(--#{$prefix}#{$name}-bg-subtle);
                --#{$prefix}form-switch-bg: #{switchSVG(
                        $form-switch-checked-bg-image,
                        $white
                    )};
            }
        }
    }

    &.reversed {
        display: flex;
        padding-left: unset;

        .form-check-input {
            order: 2;
            margin-left: var(--#{$prefix}switch-spacer);
        }

        .form-check-label {
            order: 1;
        }
    }
}