igniteui-webcomponents/src/components/button-group/themes/shared/button/button.indigo.scss at 6fc81638d2c7a2ea0b3aa53be586ea8aa637ed6c · IgniteUI/igniteui-webcomponents · 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
@use 'styles/utilities' as *;
@use '../../light/themes' as *;

$theme: $indigo;
$group-item-border-thickness: rem(1px);

:host {
    --button-icon: #{rem(16px)};

    [part~='toggle'] {
        @include type-style(body-2);

        min-height: $indigo-flat-btn-size;
        border-width: $group-item-border-thickness;
        padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
    }

    ::slotted(igc-icon) {
        --size: var(--button-icon) !important;
    }

    [part='toggle focused'] {
        box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');

        ::slotted(igc-icon) {
            color: var-get($theme, 'item-icon-color');
        }
    }
}

:host(:hover) [part='toggle focused'],
[part='toggle focused']:active {
    ::slotted(igc-icon) {
        color: var-get($theme, 'item-hover-icon-color');
    }
}

:host([selected]) [part='toggle focused'] {
    box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
    border-color: var-get($theme, 'item-selected-border-color');
}

:host([selected]:hover) [part='toggle focused'],
:host([selected]) [part='toggle focused']:active {
    border-color: var-get($theme, 'item-selected-hover-border-color');
}

:host([selected]:disabled),
:host([selected][disabled]) {
    [part~='toggle'] {
        border: none;
    }
}