feat: add input.css

src/css/input.css

@@ -0,0 +1,212 @@
+
+.floating-label_field {
+  position: relative;
+  margin-top:10px;
+  display: block;
+  box-sizing: border-box;
+}
+
+.floating-label_field * {
+  box-sizing: border-box;
+}
+
+.floating-label_field .floating-label  {
+  display: flex;
+  width:100%;
+  padding: 8px 14px 8px 14px;
+  border: none !important;
+  outline: none !important;
+  background-color: transparent;
+  font-size: 16px;
+  line-height: 1.5;
+  /*color: rgba(0, 0, 0, 0.87);*/
+  /*z-index: 5;*/
+}
+
+.floating-label.active::placeholder{
+  opacity: 0; 
+}
+
+cocreate-select.floating-label {
+    padding: 2px 2px 2px 2px!important;
+}
+cocreate-select[multiple].floating-label {
+    padding: 2px 2px 8px 2px!important;
+}
+
+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{
+    color: transparent;
+    height:40px;
+}
+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{
+ color: rgba(0, 0, 0, 0.87); 
+}
+select.floating-label[multiple]{
+  height:auto;
+}
+
+input[type='color'] {
+  height: 39px;
+  padding: 5px 6px 5px 6px!important;
+}
+
+.floating-label_outline {
+  display: flex;
+  position: absolute;
+  z-index: 6;
+  top: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  text-align: left;
+  pointer-events: none;
+  border-color: rgba(0, 0, 0, 0.24);
+}
+
+.floating-label_leading,
+.floating-label_notch,
+.floating-label_trailing {
+  border-color: inherit;
+  border-width: 1px;
+  border-style: solid;
+  transition: border 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.floating-label_leading {
+  border-radius: 4px 0 0 4px;
+  border-right: none;
+  width: 12px;
+}
+
+.floating-label_notch {
+  flex: 0 1 auto;
+  border-right: none;
+  border-left: none;
+}
+
+.floating-label_trailing {
+  flex-grow: 1;
+  border-radius: 0 4px 4px 0;
+  border-left: none;
+}
+
+.floating-label_label {
+  display: inline-block;
+  position: relative;
+  top: 11px;
+  bottom: auto;
+  margin-bottom: 0px!important;
+  left: 4px;
+  max-width: 100%;
+  color: inherit;
+  transform-origin: left top;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+
+input.floating-label ~ .floating-label_outline .floating-label_label,
+textarea.floating-label ~ .floating-label_outline .floating-label_label {
+  opacity: 0;
+}
+
+.floating-label:hover ~ .floating-label_outline {
+  border-color: inherit;
+}
+
+.floating-label_field .open ~ .floating-label_outline .floating-label_leading,
+.floating-label_field .open ~ .floating-label_outline .floating-label_notch,
+.floating-label_field .open ~ .floating-label_outline .floating-label_trailing,
+.floating-label:focus ~ .floating-label_outline .floating-label_leading,
+.floating-label:focus ~ .floating-label_outline .floating-label_notch,
+.floating-label:focus ~ .floating-label_outline .floating-label_trailing,
+input:-webkit-autofill + .floating-label_outline .floating-label_leading,
+input:-webkit-autofill + .floating-label_outline .floating-label_notch,
+input:-webkit-autofill + .floating-label_outline .floating-label_trailing {
+  border-color: inherit;
+  border-width: 2px;
+}
+
+.floating-label_field [active] ~ .floating-label_outline .floating-label_notch, 
+.floating-label_field .active ~ .floating-label_outline .floating-label_notch, 
+.floating-label_field .open ~ .floating-label_outline .floating-label_notch,
+input.floating-label:not(:placeholder-shown) ~ .floating-label_outline .floating-label_notch,
+textarea.floating-label:not(:placeholder-shown) ~ .floating-label_outline .floating-label_notch,
+/*.floating-label:valid ~ .floating-label_outline .floating-label_notch,*/
+.floating-label:focus ~ .floating-label_outline .floating-label_notch,
+input:-webkit-autofill + .floating-label_outline .floating-label_notch {
+  border-top: none;
+}
+
+.floating-label_field [active] ~ .floating-label_outline .floating-label_label, 
+.floating-label_field .active ~ .floating-label_outline .floating-label_label, 
+.floating-label_field .open ~ .floating-label_outline .floating-label_label,
+input.floating-label:not(:placeholder-shown) ~ .floating-label_outline .floating-label_label,
+textarea.floating-label:not(:placeholder-shown) ~ .floating-label_outline .floating-label_label,
+/*.floating-label:valid ~ .floating-label_outline .floating-label_label,*/
+.floating-label:focus ~ .floating-label_outline .floating-label_label,
+input:-webkit-autofill + .floating-label_outline .floating-label_label {
+  color: inherit;
+  transform: translateY(-17px) scale(0.75);
+  opacity: 1;
+}
+
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+
+@-webkit-keyframes autofill {
+  to {
+    background: transparent;
+  }
+}
+
+input:-webkit-autofill {
+  -webkit-animation-name: autofill;
+  -webkit-animation-fill-mode: both;
+}
+
+.input--error .floating-label_label {
+  color: #FF8484 !important;
+  animation: shake 0.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+@keyframes shake {
+  33.33% {
+    transform: translate3d(8px, -21px, 0) scale(0.75);
+  }
+  66.33% {
+    transform: translate3d(-2px, -21px, 0) scale(0.75);
+  }
+  100% {
+    transform: translate3d(0, -21px, 0) scale(0.75);
+  }
+}
+
+textarea.floating-label::-webkit-scrollbar {
+  width: 10px;
+}
+
+textarea.floating-label::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.04);
+
+}
+
+textarea.floating-label::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+textarea.floating-label.scroll::-webkit-scrollbar-thumb {
+  background: #f13b48;
+}  
+

src/index.js

@@ -7,6 +7,7 @@ import './css/checkbox.css';
 import './css/core.css';
 import './css/dropdown.css';
 import './css/flip-item.css';
+import './css/input.css';
 import './css/menu-icon.css';
 import './css/navbar.css';
 import './css/overlay-content.css';