OpenConext-Invite/welcome/src/components/InputField.scss at ab7423d30bc52c83a6dcd672ee9019b90bdad732 · OpenConext/OpenConext-Invite · 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
@use "../styles/vars.scss";
@use "../styles/mixins";

.input-field {
    @include input-field;

    display: flex;
    position: relative;
    flex-direction: column;

    textarea {
        display: block;
        width: 100%;
        border: 1px solid var(--sds--color--gray--300);
        padding: 6px 12px;
        border-radius: vars.$br;
        font-size: 16px;
        height: 48px;
        color: black;

        &[disabled] {
            background-color: var(--sds--color--gray--200);
            cursor: not-allowed;
            color: black;
        }

        &.error {
            border: 1px solid var(--sds--color--red--400);
        }

        &:focus {
            outline: none;
            box-shadow: 3px 3px 3px var(--sds--color--blue--200), -3px -3px 1px var(--sds--color--blue--200);
        }

    }

    textarea {
        height: 90px;

        &.large {
            height: 170px;
        }

    }

    span.remove {
        display: flex;
        align-items: center;

        em {
            display: inline-block;
            margin-right: 10px;
        }

        svg.fa-trash {
            margin: 0 5px 0 auto;
            color: var(--sds--color--red--400);
        }
    }

    div.inner-input-field {
        display: flex;

        button.sds--btn {
            min-width: 120px;
            margin-left: 10px;
        }
    }

    div.input-field-link {
        margin-left: 10px;
        display: flex;
        border-radius: 4px;
        border: 1px solid var(--sds--color--blue--400);
        font-size: 20px;
        color: var(--sds--color--blue--200);
        cursor: pointer;

        &:hover {
            background-color: #ddf2fd;
        }


        a {
            padding: 8px 12px;
        }

        svg {

            color: var(--sds--color--blue--200);
            cursor: pointer;

            &:hover {
                color: var(--sds--color--blue--400);
            }

        }
    }


    span.no-input {
        margin-bottom: 6px;
        display: block;

    }
}