CSS-Floating-Labels/FloatingLabels.css at main · spencerkphillips/CSS-Floating-Labels · 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
@charset "UTF-8";

/** Floating Labels | V 1.5 */
.floating-labels {
    margin: 2rem 0;
    /**
    * Make the field a flex-container, reverse the order so label is on top.
    */
    ;
}

.floating-labels .form-group {
    display: flex;
    flex-flow: column-reverse;
    margin-bottom: 1rem;
    /**
        * Add a transition to the label and input.
        * I'm not even sure that touch-action: manipulation works on
        * inputs, but hey, it's new and cool and could remove the
        * pesky delay.
        */
    /**
        * Translate down and scale the label up to cover the placeholder,
        * when following an input (with placeholder-shown support).
        * Also make sure the label is only on one row, at max 2/3rds of the
        * field—to make sure it scales properly and doesn't wrap.
        */
}

.floating-labels .form-group label,
.floating-labels .form-group input,
.floating-labels .form-group textarea {
    transition: all 0.2s;
    touch-action: manipulation;
}

.floating-labels .form-group input,
.floating-labels .form-group textarea {
    font-size: 1.5rem;
    border: 0;
    border-bottom: .1rem solid #ccc;
    -webkit-appearance: none;
    padding: 1rem;
    cursor: text;
    /**
            * Target focussed input
            **/
    /**
            * Target un-focussed input placeholder, remove opacity until focussed
            **/
    /**
            * Target an input that has text in it, remove placeholder opacity
            **/
    /**
            * When the element is focused, remove the label transform.
            * Also, do this when the placeholder is _not_ shown, i.e. when
            * there's something in the input at all.
            */
    ;
}

.floating-labels .form-group input:focus,
.floating-labels .form-group textarea:focus {
    outline: 0;
    border-bottom: .3rem solid blue;
}

.floating-labels .form-group input::-webkit-input-placeholder,
.floating-labels .form-group textarea::-webkit-input-placeholder {
    opacity: 0;
}

.floating-labels .form-group input:focus::-webkit-input-placeholder,
.floating-labels .form-group textarea:focus::-webkit-input-placeholder {
    opacity: 1;
}

.floating-labels .form-group input:not(:empty)::-webkit-input-placeholder,
.floating-labels .form-group textarea:not(:empty)::-webkit-input-placeholder {
    opacity: 0;
}

.floating-labels .form-group input:focus+label,
.floating-labels .form-group textarea:focus+label {
    transform: translate(0, 0) scale(1);
    cursor: pointer;
    color: blue;
    margin-bottom: .5rem;
    margin-left: 0;
}

.floating-labels .form-group input+label,
.floating-labels .form-group textarea+label {
    cursor: text;
    max-width: 66.666%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    transform: translate(0, 2.125rem) scale(1.5);
}

.floating-labels .form-group label {
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: inherit;
    margin-left: .5rem;
}

.floating-labels .select-group select {
    font-size: 1.5rem;
    border: 0;
    border-bottom: .1rem solid #ccc;
    -webkit-appearance: none;
    padding: 1rem;
    cursor: text;
    margin-top: .5rem;
    /**
            * Target focussed input
            **/
    ;
}

.floating-labels .select-group select:focus {
    outline: 0;
    border-bottom: .3rem solid blue;
}

.floating-labels .select-group label {
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    max-width: 66.666%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    transform: translate(0, 0) scale(1);
    cursor: pointer;
    color: blue;
    margin-bottom: 0.5rem;
    margin-left: 0;
}