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

$theme: $bootstrap;
$theme-file-input: file-input.$bootstrap;

:host(:focus-within) {
    --border-color: #{var-get($theme, 'focused-border-color')};

    [part~='container'] {
        box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');
    }
}

[part~='file-selector-button'] igc-button {
    &::part(base) {
        font-size: var(--input-font);
        transition: border 0.15s ease-out;
        box-shadow: none;
        border: {
            style: solid;
            color: var(--input-border-color);
            inline: {
                start-width: 1px;
                end-width: 0;
            }
            block: {
                start-width: 1px;
                end-width: 1px;
            }
        }
    }
}

[part~='file-names'] {
    font-size: var(--input-font);
    padding-inline: pad-inline(8px, 12px, 16px);
    padding-block: pad-block(4px, 6px, 8px);
    border: 1px solid var-get($theme, 'border-color');
    border-start-end-radius: var-get($theme, 'border-border-radius');
    border-end-end-radius: var-get($theme, 'border-border-radius');
    transition:
        box-shadow 0.15s ease-out,
        border 0.15s ease-out;
}

[part*='prefixed'] {
    [part~='file-selector-button'] igc-button::part(base) {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
    }
}

[part*='suffixed'] {
    [part~='file-names'] {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }
}

[part~='container'] {
    transition:
        box-shadow 0.15s ease-out,
        border 0.15s ease-out;

    [part~='file-selector-button'] igc-button::part(base) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        height: var(--input-height);
    }
}


:host(:not([disabled])[invalid]) {
    --input-border-color: #{var-get($theme, 'error-secondary-color')};

    [part='prefix'],
    [part='suffix'],
    [part~='file-names'] {
        border-color: var-get($theme, 'error-secondary-color');
    }
}

:host(:not([disabled])[invalid]:focus-within) {
    [part~='container'] {
        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
    }
}

:host(:disabled),
:host([disabled]) {
    --input-border-color: #{var-get($theme, 'disabled-border-color')};

    [part~='file-names'] {
        color: var-get($theme-file-input, 'file-names-foreground--disabled');
        border-color: var-get($theme, 'disabled-border-color');
    }

    [part~='file-selector-button'] igc-button {
        --disabled-border-color: var(--input-border-color);
    }
}