Skip to content

Commit 79a7f83

Browse files
frankpaganfrankpagan
committed
feat: add input.css
1 parent 486d389 commit 79a7f83

File tree

2 files changed

+213
-0
lines changed

2 files changed

+213
-0
lines changed

‎src/css/input.css

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
2+
.floating-label_field {
3+
position: relative;
4+
margin-top:10px;
5+
display: block;
6+
box-sizing: border-box;
7+
}
8+
9+
.floating-label_field * {
10+
box-sizing: border-box;
11+
}
12+
13+
.floating-label_field .floating-label {
14+
display: flex;
15+
width:100%;
16+
padding: 8px 14px 8px 14px;
17+
border: none !important;
18+
outline: none !important;
19+
background-color: transparent;
20+
font-size: 16px;
21+
line-height: 1.5;
22+
/*color: rgba(0, 0, 0, 0.87);*/
23+
/*z-index: 5;*/
24+
}
25+
26+
.floating-label.active::placeholder{
27+
opacity: 0;
28+
}
29+
30+
cocreate-select.floating-label {
31+
padding: 2px 2px 2px 2px!important;
32+
}
33+
cocreate-select[multiple].floating-label {
34+
padding: 2px 2px 8px 2px!important;
35+
}
36+
37+
input.floating-label[type="date"],input.floating-label[type="time"],input.floating-label[type="datetime-local"],input.floating-label[type="week"],input.floating-label[type="month"],select.floating-label{
38+
color: transparent;
39+
height:40px;
40+
}
41+
input.floating-label.active[type="date"],input.floating-label.active[type="time"],input.floating-label.active[type="datetime-local"],input.floating-label.active[type="week"],input.floating-label.active[type="month"],select.floating-label.active{
42+
color: rgba(0, 0, 0, 0.87);
43+
}
44+
select.floating-label[multiple]{
45+
height:auto;
46+
}
47+
48+
input[type='color'] {
49+
height: 39px;
50+
padding: 5px 6px 5px 6px!important;
51+
}
52+
53+
.floating-label_outline {
54+
display: flex;
55+
position: absolute;
56+
z-index: 6;
57+
top: 0;
58+
width: 100%;
59+
max-width: 100%;
60+
height: 100%;
61+
text-align: left;
62+
pointer-events: none;
63+
border-color: rgba(0, 0, 0, 0.24);
64+
}
65+
66+
.floating-label_leading,
67+
.floating-label_notch,
68+
.floating-label_trailing {
69+
border-color: inherit;
70+
border-width: 1px;
71+
border-style: solid;
72+
transition: border 0.15s cubic-bezier(0.4, 0, 0.2, 1);
73+
}
74+
75+
.floating-label_leading {
76+
border-radius: 4px 0 0 4px;
77+
border-right: none;
78+
width: 12px;
79+
}
80+
81+
.floating-label_notch {
82+
flex: 0 1 auto;
83+
border-right: none;
84+
border-left: none;
85+
}
86+
87+
.floating-label_trailing {
88+
flex-grow: 1;
89+
border-radius: 0 4px 4px 0;
90+
border-left: none;
91+
}
92+
93+
.floating-label_label {
94+
display: inline-block;
95+
position: relative;
96+
top: 11px;
97+
bottom: auto;
98+
margin-bottom: 0px!important;
99+
left: 4px;
100+
max-width: 100%;
101+
color: inherit;
102+
transform-origin: left top;
103+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
104+
will-change: transform;
105+
}
106+
107+
input.floating-label ~ .floating-label_outline .floating-label_label,
108+
textarea.floating-label ~ .floating-label_outline .floating-label_label {
109+
opacity: 0;
110+
}
111+
112+
.floating-label:hover ~ .floating-label_outline {
113+
border-color: inherit;
114+
}
115+
116+
.floating-label_field .open ~ .floating-label_outline .floating-label_leading,
117+
.floating-label_field .open ~ .floating-label_outline .floating-label_notch,
118+
.floating-label_field .open ~ .floating-label_outline .floating-label_trailing,
119+
.floating-label:focus ~ .floating-label_outline .floating-label_leading,
120+
.floating-label:focus ~ .floating-label_outline .floating-label_notch,
121+
.floating-label:focus ~ .floating-label_outline .floating-label_trailing,
122+
input:-webkit-autofill + .floating-label_outline .floating-label_leading,
123+
input:-webkit-autofill + .floating-label_outline .floating-label_notch,
124+
input:-webkit-autofill + .floating-label_outline .floating-label_trailing {
125+
border-color: inherit;
126+
border-width: 2px;
127+
}
128+
129+
.floating-label_field [active] ~ .floating-label_outline .floating-label_notch,
130+
.floating-label_field .active ~ .floating-label_outline .floating-label_notch,
131+
.floating-label_field .open ~ .floating-label_outline .floating-label_notch,
132+
input.floating-label:not(:placeholder-shown) ~ .floating-label_outline .floating-label_notch,
133+
textarea.floating-label:not(:placeholder-shown) ~ .floating-label_outline .floating-label_notch,
134+
/*.floating-label:valid ~ .floating-label_outline .floating-label_notch,*/
135+
.floating-label:focus ~ .floating-label_outline .floating-label_notch,
136+
input:-webkit-autofill + .floating-label_outline .floating-label_notch {
137+
border-top: none;
138+
}
139+
140+
.floating-label_field [active] ~ .floating-label_outline .floating-label_label,
141+
.floating-label_field .active ~ .floating-label_outline .floating-label_label,
142+
.floating-label_field .open ~ .floating-label_outline .floating-label_label,
143+
input.floating-label:not(:placeholder-shown) ~ .floating-label_outline .floating-label_label,
144+
textarea.floating-label:not(:placeholder-shown) ~ .floating-label_outline .floating-label_label,
145+
/*.floating-label:valid ~ .floating-label_outline .floating-label_label,*/
146+
.floating-label:focus ~ .floating-label_outline .floating-label_label,
147+
input:-webkit-autofill + .floating-label_outline .floating-label_label {
148+
color: inherit;
149+
transform: translateY(-17px) scale(0.75);
150+
opacity: 1;
151+
}
152+
153+
154+
input:-webkit-autofill,
155+
input:-webkit-autofill:hover,
156+
input:-webkit-autofill:focus,
157+
textarea:-webkit-autofill,
158+
textarea:-webkit-autofill:hover,
159+
textarea:-webkit-autofill:focus,
160+
select:-webkit-autofill,
161+
select:-webkit-autofill:hover,
162+
select:-webkit-autofill:focus {
163+
background-color: rgba(0, 0, 0, 0) !important;
164+
}
165+
166+
@-webkit-keyframes autofill {
167+
to {
168+
background: transparent;
169+
}
170+
}
171+
172+
input:-webkit-autofill {
173+
-webkit-animation-name: autofill;
174+
-webkit-animation-fill-mode: both;
175+
}
176+
177+
.input--error .floating-label_label {
178+
color: #FF8484 !important;
179+
animation: shake 0.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
180+
backface-visibility: hidden;
181+
perspective: 1000px;
182+
}
183+
184+
@keyframes shake {
185+
33.33% {
186+
transform: translate3d(8px, -21px, 0) scale(0.75);
187+
}
188+
66.33% {
189+
transform: translate3d(-2px, -21px, 0) scale(0.75);
190+
}
191+
100% {
192+
transform: translate3d(0, -21px, 0) scale(0.75);
193+
}
194+
}
195+
196+
textarea.floating-label::-webkit-scrollbar {
197+
width: 10px;
198+
}
199+
200+
textarea.floating-label::-webkit-scrollbar-track {
201+
background: rgba(0, 0, 0, 0.04);
202+
203+
}
204+
205+
textarea.floating-label::-webkit-scrollbar-thumb {
206+
background: rgba(0, 0, 0, 0.1);
207+
}
208+
209+
textarea.floating-label.scroll::-webkit-scrollbar-thumb {
210+
background: #f13b48;
211+
}
212+

‎src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import './css/checkbox.css';
77
import './css/core.css';
88
import './css/dropdown.css';
99
import './css/flip-item.css';
10+
import './css/input.css';
1011
import './css/menu-icon.css';
1112
import './css/navbar.css';
1213
import './css/overlay-content.css';

0 commit comments

Comments
 (0)