igniteui-webcomponents/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss at 76d54944296c86776ffde2e92d9e2b17aaf6c8bb · 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
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
@use 'styles/utilities' as *;
@use '../../light/themes' as *;

$theme: $bootstrap;

:host(igc-calendar) {
    // TODO see from where is the inline style coming that overrides this one
    --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;

    color: var-get($theme, 'content-foreground');
    background: var-get($theme, 'content-background');
    box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
    border-radius: var-get($theme, 'border-radius');
}

[part~='content']:not([part~='content-vertical']) {
    [part='days-view-container'] + [part='days-view-container'] {
        [part='navigation'],
        igc-days-view::part(days-row) {
            padding-inline: rem(22px);
        }
    }

    [part='days-view-container']:first-of-type:not(:only-child) {
        [part='navigation'],
        igc-days-view::part(days-row) {
            padding-inline-end: rem(22px);
        }
    }

    [part='days-view-container']:last-of-type:not(:only-child) {
        [part='navigation'],
        igc-days-view::part(days-row) {
            padding-inline-end: rem(12px);
        }
    }
}

[part='navigation'] {
    --ig-icon-size: #{rem(24px)};

    height: rem(56px);
    color: var-get($theme, 'picker-foreground');
    background: var-get($theme, 'picker-background');
}

:host([hide-header]) {
    [part~='navigation'] {
        border-start-start-radius: var-get($theme, 'border-radius');
        border-start-end-radius: var-get($theme, 'border-radius');
    }
}

[part~='header'] {
    background: var-get($theme, 'header-background');
    color: var-get($theme, 'header-foreground');
}

[part='navigation-buttons'] {
    gap: rem(24px);
}

[part='months-navigation'],
[part='years-navigation'],
[part='years-range'] {
    @include type-style('subtitle-1');
}

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

    min-height: rem(24px);
}

[part='header-date'] {
    @include type-style('h4');
}

[part='years-range'] {
    color: var-get($theme, 'picker-foreground');
}

[part~='navigation'] {
    background: var-get($theme, 'picker-background');
    color: var-get($theme, 'picker-foreground');
}

[part~='months-navigation'],
[part~='years-navigation'] {
    color: var-get($theme, 'picker-foreground');

    &:hover {
        color: var-get($theme, 'picker-hover-foreground');
    }

    &:focus {
        color: var-get($theme, 'picker-focus-foreground');
    }
}

[part~='navigation-button'] {
    background: transparent;
    color: var-get($theme, 'navigation-color');

    &:hover {
        color: var-get($theme, 'navigation-hover-color');
    }

    &:focus {
        color: var-get($theme, 'navigation-focus-color');
    }
}