theme-bootstrap/src/assets/scss/components/_checkbox.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
@use "sass:map";

/* @bootstrap docs */
// $form-check-input-width:                  1em;
// $form-check-min-height:                   $font-size-base * $line-height-base;
// $form-check-padding-start:                $form-check-input-width + .5em;
// $form-check-margin-bottom:                .125rem;
// $form-check-label-color:                  null;
// $form-check-label-cursor:                 null;
// $form-check-transition:                   null;

// $form-check-input-active-filter:          brightness(90%);

// $form-check-input-bg:                     $input-bg;
// $form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
// $form-check-input-border-radius:          .25em;
// $form-check-radio-border-radius:          50%;
// $form-check-input-focus-border:           $input-focus-border-color;
// $form-check-input-focus-box-shadow:       $focus-ring-box-shadow;

// $form-check-input-checked-color:          $component-active-color;
// $form-check-input-checked-bg-color:       $component-active-bg;
// $form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
// $form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
// $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

// $form-check-input-indeterminate-color:          $component-active-color;
// $form-check-input-indeterminate-bg-color:       $component-active-bg;
// $form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
// $form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

// $form-check-input-disabled-opacity:        .5;
// $form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
// $form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

// $form-check-inline-margin-end:    1rem;
/* @bootstrap docs */

@function checkmarkSVG($color) {
    @return escape-svg(
        str-replace(
            $form-check-input-checked-bg-image,
            "#{$form-check-input-checked-color}",
            $color
        )
    );
}
@function checkcircleSVG($color) {
    @return escape-svg(
        str-replace(
            $form-check-radio-checked-bg-image,
            "#{$form-check-input-checked-color}",
            $color
        )
    );
}
@function indeterminateSVG($color) {
    @return escape-svg(
        str-replace(
            $form-check-input-indeterminate-bg-image,
            "#{$form-check-input-indeterminate-color}",
            $color
        )
    );
}

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

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

                &[type="checkbox"] {
                    &:checked {
                        --#{$prefix}form-check-bg-image: #{checkmarkSVG(
                                $color
                            )};
                    }

                    &:indeterminate {
                        --#{$prefix}form-check-bg-image: #{indeterminateSVG(
                                $color
                            )};
                    }
                }

                &[type="radio"]:checked {
                    --#{$prefix}form-check-bg-image: #{checkcircleSVG($color)};
                }
            }
        }

        &.variant-#{$name}-subtle {
            $color: map.get($theme-colors-bg-subtle, #{$name});

            input[type="radio"],
            input[type="checkbox"] {
                background-color: transparent;
                border-color: var(--#{$prefix}#{$name}-border-subtle);

                &[type="checkbox"] {
                    &:checked {
                        --#{$prefix}form-check-bg-image: #{checkmarkSVG(
                                $color
                            )};
                    }

                    &:indeterminate {
                        --#{$prefix}form-check-bg-image: #{indeterminateSVG(
                                $color
                            )};
                    }
                }

                &[type="radio"]:checked {
                    --#{$prefix}form-check-bg-image: #{checkcircleSVG($color)};
                }
            }
        }
    }

    // size variants
    @each $name, $size in $sizes {
        &.size-#{$name} {
            font-size: $size;

            // input size should not defined for switch style
            &:not(.form-switch) {
                input[type="radio"],
                input[type="checkbox"] {
                    width: $size;
                    height: $size;
                    margin-right: calc(#{$size} / 2);
                }
            }
        }
    }

    &.disabled,
    &.disabled .form-check-label {
        cursor: not-allowed;
    }

    &:not(.rounded) input {
        border-radius: var(--#{$prefix}border-radius);
    }
}

.input-field.input-group {
    .form-check {
        @extend .form-check-inline;
    }
}