input/input.css at master · timlg07/input · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/* Container */
.input {
    box-sizing: border-box;

    /* this is needed for label-positioning */
    position: relative;

    /* padding properties */
    --horizontal-padding: 16px;
    --vertical-padding: 14px;

    /* this can be adjusted */
    height: 56px;
    width: 100%;
    max-width: 220px;
}


/* Input field */
.input input {

    /* input fills the whole size of the container (.input) */
    width:  100%;
    height: 100%;
    box-sizing: border-box;

    /* Space around the text; Subtract border size because border-box-sizing is used. */
    padding: calc(var(--vertical-padding)   - var(--input-border-size))
             calc(var(--horizontal-padding) - var(--input-border-size));

    /* border */
    --input-border-size: 1.2px;
    border: var(--input-border-size) solid rgba(0, 0, 0, .28);
    border-radius: 7px;
    transition: border .2s;

    /* font */
    font-size: 17px;
}

.input input:hover {

    /* darker and thicker border on hover */
    --input-border-size: 1.6px;
    border-color: rgba(0, 0, 0, .445);
}

.input input:focus {

    /* colored border on focus, instead of outline */
    --input-border-size: 2.3px;
    border-color: var(--primary-color);
    outline: 0;
}

/* define the different primary colors */
.input, /* use green as default color */
.input.green  {--primary-color: #0B6;}
.input.blue   {--primary-color: #06B;}
.input.red    {--primary-color: #B02;}
.input.yellow {--primary-color: #FC1;}
.input.orange {--primary-color: #F62;}
.input.purple {--primary-color: #60E;}


/* The label describing the input field */
.input label {

    /* position the label in the center of the input field */
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    /*
     * Subtract the current label-border-size from the input padding, so that the
     * resulting space between the container border and the label text is the same
     * as between the container border and the input text.
     */
    left: calc(var(--horizontal-padding) - var(--label-border-size));

    /* bring it to the top but without being target of mouse events */
    z-index: 100;
    pointer-events: none;

    /* handle labels with much text */
    max-width: calc(100% - (2 * var(--horizontal-padding)));
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;

    /*
     * This space will get replaced by the border when
     * the input is in focus, but is needed also here so the
     * left-value is correct.
     */
    --label-border-size: 5px;
    padding-left:  var(--label-border-size);

    /* smooth transition to the top */
    transition-property: color, top, font;
    transition-duration: .32s;

    /* white background to hide the border behind the text */
    background: white;

    /* styling the text */
    color: rgba(0, 0, 0, .54);
    font-size: 17px;
}

.input label:focus {

    /* remove outline */
    outline: 0;
}

.input > input:focus ~ label,
.input > input[required]:valid ~ label,
.input > input[placeholder]:not(:placeholder-shown) ~ label {

    /* new position at the top */
    top: calc(2.3px / 2);
    transform: translate(0%, -50%);

    /*
     * Remove the padding and use borders instead,
     * since text can overlap paddings, but not borders.
     */
    padding: 0;
    border-left:  var(--label-border-size) solid transparent;
    border-right: var(--label-border-size) solid transparent;

    /* decrease the font size */
    font-size: 13px;
}

.input > input:hover ~ label {

    /* darker text onHover */
    color: rgba(0, 0, 0, .76);
}

.input > input:focus ~ label {

    /* colored text on focus */
    color: var(--primary-color) !important;
}