igniteui-webcomponents/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss at 5bba8dfc92dc2c4a15de931b5506353d50e51599 · 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
@use 'styles/utilities' as *;
@use '../light/themes' as *;

$theme: $bootstrap;

:host {
    --calendar-border-color: #{$bootstrap-calendar-border-color};

    igc-dialog {
        igc-calendar {
            border: none;
        }
    }

    ::part(helper-text) {
        @include type-style('body-2');

        grid-auto-rows: minmax(rem(20px), auto);
    }
}

:host([readonly]) {
    igc-input::part(container),
    igc-input::part(prefix),
    igc-input::part(suffix),
    igc-date-time-input::part(container),
    igc-date-time-input::part(prefix),
    igc-date-time-input::part(suffix) {
        background: var-get($theme, 'border-disabled-background');
    }
}

:host(:not([disabled],[readonly]):state(ig-invalid)) {
    igc-input::part(input),
    igc-date-time-input::part(input) {
        border-color: var-get($theme, 'error-secondary-color');
    }

    igc-date-time-input:focus-within {
        &::part(input) {
            box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
        }
    }
}

:host(:not([disabled],[readonly]):state(ig-invalid):focus-within) {
    igc-input::part(input) {
        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
    }
}

[part='separator'] {
    @include type-style('body-1');
}

[part='actions'] {
    min-height: #{sizable(rem(47px), rem(54px), rem(64px))};
}

:host(:not([disabled])),
:host(:not(:disabled)) {
    ::slotted([slot^='prefix-']),
    [part|='calendar-icon'] {
        border-inline-start: rem(1px) solid var(--border-color);
    }

    ::slotted([slot^='suffix-']),
    [part|='clear-icon'] {
        border-inline-end: rem(1px) solid var(--border-color);
    }
}

:host(:disabled),
:host([disabled]) {
    ::slotted([slot^='prefix-']),
    [part|='calendar-icon'] {
        border-inline-start: rem(1px) solid var(--disabled-border-color);
    }

    ::slotted([slot^='suffix-']),
    [part|='clear-icon'] {
        border-inline-end: rem(1px) solid var(--disabled-border-color);
    }
}