igniteui-angular-samples/src/app/data-entries/button/_bootstrap-button-theme.scss at 436cec7597357462a9ce594a1e92ef959dccc1f9 · IgniteUI/igniteui-angular-samples · 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
@use 'igniteui-angular/theming' as *;
@use 'igniteui-angular/lib/core/styles/components/button/button-component' as button;
@use 'igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light';
@use 'igniteui-theming/sass/typography/presets' as typography-presets;

:host ::ng-deep {
    @include typography(
        $font-family: typography-presets.$bootstrap-typeface,
        $type-scale: typography-presets.$bootstrap-type-scale
    );

    @include button(
        $flat: flat-button-theme(
            $schema: $light-bootstrap-schema,
            $foreground: color($light-bootstrap-palette, 'primary'),
            $hover-foreground: color($light-bootstrap-palette, 'primary'),
            $disabled-foreground: color($light-bootstrap-palette, 'primary', 200)
        ),
        $contained: contained-button-theme(
            $schema: $light-bootstrap-schema,
            $background: color($light-bootstrap-palette, 'primary'),
            $foreground: var(--ig-gray-50),
            $hover-background: color($light-bootstrap-palette, 'primary', 600),
            $hover-foreground: var(--ig-gray-50),
            $focus-background: color($light-bootstrap-palette, 'primary', 800),
            $focus-foreground: var(--ig-gray-50),
            $focus-hover-background: color($light-bootstrap-palette, 'primary', 600),
            $focus-hover-foreground: var(--ig-gray-50),
            $disabled-background: color($light-bootstrap-palette, 'primary', 50),
            $disabled-foreground: color($light-bootstrap-palette, 'primary', 200)
        ),
        $outlined: outlined-button-theme(
            $schema: $light-bootstrap-schema,
            $foreground: color($light-bootstrap-palette, 'primary'),
            $hover-background: color($light-bootstrap-palette, 'primary'),
            $hover-foreground: var(--ig-gray-50),
            $disabled-foreground: color($light-bootstrap-palette, 'primary', 200),
            $disabled-border-color: color($light-bootstrap-palette, 'primary', 50)
        ),
        $fab: fab-button-theme(
            $schema: $light-bootstrap-schema,
            $background: color($light-bootstrap-palette, 'secondary'),
            $foreground: var(--ig-gray-50),
            $hover-background: color($light-bootstrap-palette, 'primary'),
            $hover-foreground: var(--ig-gray-50),
            $disabled-background: color($light-bootstrap-palette, 'gray', 300),
            $disabled-foreground: color($light-bootstrap-palette, 'gray', 500),
            $resting-shadow: none,
            $hover-shadow: none
        )
    );
    @include button.component();

    [igxButton] {
        --ig-size: var(--ig-size-medium);
    }

    button[igxButton='fab'] {
        --ig-size: var(--ig-size-large);
    }
}