gui-elements/src/components/Checkbox/checkbox.scss at 5d7801cd03224d0845b9fe5700ea00a158822dd9 · eccenca/gui-elements · 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
// our vars
$eccgui-color-checkbox: $eccgui-color-workspace-text !default;
$eccgui-color-checkbox-background: transparent !default;
$eccgui-color-checkbox-checked: $eccgui-color-accent !default;
$eccgui-color-checkbox-checked-background: transparent !default;

// library vars
$control-background-color: $eccgui-color-checkbox-background !default;
$control-background-color-hover: $eccgui-color-checkbox-background !default;
$control-background-color-active: $eccgui-color-checkbox-background !default;

// $dark-control-background-color: $dark-button-background-color !default;
// $dark-control-background-color-hover: $dark-button-background-color-hover !default;
// $dark-control-background-color-active: $dark-button-background-color-active !default;
$control-checked-background-color: $eccgui-color-checkbox-checked-background !default;
$control-checked-background-color-hover: $eccgui-color-checkbox-checked-background !default;
$control-checked-background-color-active: $eccgui-color-checkbox-checked-background !default;
$control-indicator-size: 16px; // !default;
$control-indicator-size-large: 20px !default;
$control-indicator-spacing: $eccgui-size-inline-whitespace !default;

// $switch-background-color: rgba($gray4, 0.5) !default;
// $switch-background-color-hover: rgba($gray2, 0.5) !default;
// $switch-background-color-active: rgba($gray1, 0.5) !default;
// $switch-background-color-disabled: $button-background-color-disabled !default;
$switch-checked-background-color: $eccgui-color-accent !default;
$switch-checked-background-color-hover: eccgui-color-rgba(
    $switch-checked-background-color,
    $eccgui-opacity-narrow
) !default;
$switch-checked-background-color-active: $switch-checked-background-color-hover !default;
$switch-checked-background-color-disabled: eccgui-color-rgba(
    $switch-checked-background-color,
    $eccgui-opacity-disabled
) !default;

@import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch

.#{$ns}-control {
    max-width: 100%;

    &.#{$ns}-checkbox {
        input ~ .#{$ns}-control-indicator,
        input:checked ~ .#{$ns}-control-indicator,
        input:indeterminate ~ .#{$ns}-control-indicator {
            box-shadow: none;
        }

        input:focus ~ .#{$ns}-control-indicator {
            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
        }

        input:disabled ~ .#{$ns}-control-indicator,
        input:disabled:checked ~ .#{$ns}-control-indicator {
            background-color: $eccgui-color-checkbox-background;
            opacity: 1;

            &::before {
                opacity: 0.25;
            }
        }

        input ~ .#{$ns}-control-indicator::before {
            // TODO: set set icon line colors here we need a custom js inject like blueprint uses
            color: $eccgui-color-checkbox-checked;
            background-image: url("~@carbon/icons/svg/32/checkbox.svg");
        }
        input:checked ~ .#{$ns}-control-indicator::before {
            background-image: url("~@carbon/icons/svg/32/checkbox--checked.svg");
        }
        input:indeterminate ~ .#{$ns}-control-indicator::before {
            background-image: url("~@carbon/icons/svg/32/checkbox--indeterminate.svg");
        }
    }

    &.#{$ns}-switch {
        --#{$eccgui}-a11y-outline-offset: 1px;

        input:focus ~ .#{$ns}-control-indicator {
            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
        }
    }
}

.#{$ns}-control-indicator + *,
.#{$ns}-control-indicator + .#{$eccgui}-typography__overflowtext {
    display: inline-block;
    vertical-align: text-top;
}

@media print {
    .#{$ns}-control {
        print-color-adjust: exact;
    }
}