UNPKG

react-input-ui

Version:
218 lines (183 loc) 5.88 kB
:root { --i-jiroUI-activeTextColor: #f2f2f2; --i-jiroUI-focusColor: #2196f3; --i-jiroUI-hoverColor: #252525; --i-jiroUI-mainColor: #727272; } .i-jiroUI { border: none; padding: 0; position: relative; } .i-jiroUI__input { -webkit-appearance: none; -webkit-box-shadow: none; -webkit-box-sizing: border-box; background: transparent; border-radius: 0; border: none; box-shadow: none; box-sizing: border-box; color: var(--i-jiroUI-mainColor); cursor: text; outline: none; padding: .7em; position: relative; width: 100%; z-index: 1; } .i-jiroUI__input:hover { color: var(--i-jiroUI-hoverColor); } .i-jiroUI__input:focus { color: var(--i-jiroUI-activeTextColor); } /*Label*/ .i-jiroUI__label { -khtml-user-select: none; -moz-osx-font-smoothing: grayscale; -moz-user-select: none; -ms-user-select: none; -webkit-font-smoothing: antialiased; -webkit-touch-callout: none; -webkit-user-select: none; bottom: 0; color: var(--i-jiroUI-mainColor); height: 100%; left: 0; pointer-events: none; position: absolute; user-select: none; width: 100%; } .i-jiroUI__input:hover ~ .i-jiroUI__label { color: var(--i-jiroUI-hoverColor); } .i-jiroUI__label::before, .i-jiroUI__label::after { -o-transition: transform .3s; -webkit-transition: -webkit-transform .3s; content: ''; height: 100%; left: 0; position: absolute; top: -1px; transition: transform .3s, -webkit-transform .3s; width: 100%; } .i-jiroUI__label::before { -o-transition-delay: .3s; -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0); -webkit-transition-delay: .3s; border-top: 1px solid var(--i-jiroUI-mainColor); transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0); transition-delay: .3s; } .i-jiroUI__label::after { -ms-transform-origin: 50% 0; -webkit-transform-origin: 50% 0; -webkit-transform: scale3d(1, 0, 1); background: var(--i-jiroUI-mainColor); border-radius: 4px; transform-origin: 50% 0; transform: scale3d(1, 0, 1); z-index: 0; } .i-jiroUI__input:hover ~ .i-jiroUI__label::before { border-top-color: var(--i-jiroUI-hoverColor); } .i-jiroUI__input:focus + .i-jiroUI__label::before { -o-transition-delay: 0s; -webkit-transition-delay: 0s; border-radius: 4px; border-top: 2px solid var(--i-jiroUI-focusColor); transition-delay: 0s; } .i-jiroUI__input:focus + .i-jiroUI__label::before { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .i-jiroUI__input:focus + .i-jiroUI__label::after { -o-transition-delay: .3s; -o-transition-timing-function: cubic-bezier(.2, 1, .3, 1); -webkit-transform: scale3d(1, 1, 1); -webkit-transition-delay: .3s; -webkit-transition-timing-function: cubic-bezier(.2, 1, .3, 1); background: var(--i-jiroUI-focusColor); transform: scale3d(1, 1, 1); transition-delay: .3s; transition-timing-function: cubic-bezier(.2, 1, .3, 1); } .i-jiroUI__input:focus ~ .i-jiroUI__label { color: var(--i-jiroUI-focusColor); } /*Label title*/ .i-jiroUI__label--title { -o-transition: all .3s .3s; -o-transition-property: bottom, font-size; -webkit-transition: all .3s .3s; -webkit-transition-property: bottom, font-size; bottom: 5px; display: block; position: absolute; transition: all .3s .3s; transition-property: bottom, font-size; width: 100%; } .i-jiroUI__input:not([value=""]) + .i-jiroUI__label .i-jiroUI__label--title, .i-jiroUI__input:focus + .i-jiroUI__label .i-jiroUI__label--title { bottom: 100%; font-size: small; } /*Placeholder*/ .i-jiroUI__input::-webkit-input-placeholder { -webkit-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); -o-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); } .i-jiroUI__input:-ms-input-placeholder { -webkit-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); -o-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); } .i-jiroUI__input::-ms-input-placeholder { -webkit-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); -o-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); } .i-jiroUI__input::placeholder { -webkit-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); -o-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); } .i-jiroUI__input::-webkit-input-placeholder { -webkit-transition: color .3s cubic-bezier(0.2, 1, 0.3, 1); -o-transition: color 1s cubic-bezier(0.2, 1, 0.3, 1); transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); } .i-jiroUI__input::-ms-input-placeholder { -webkit-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); -o-transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); transition: color .6s cubic-bezier(0.98, 0, 0.3, 1); } .i-jiroUI__input:not(:focus)::-webkit-input-placeholder { color: transparent; } .i-jiroUI__input:not(:focus):-ms-input-placeholder { color: transparent; } .i-jiroUI__input:not(:focus)::-ms-input-placeholder { color: transparent; } .i-jiroUI__input:not(:focus)::placeholder { color: transparent; } .i-jiroUI__input:not(:focus)::-webkit-input-placeholder { color: transparent; } .i-jiroUI__input:not(:focus)::-ms-input-placeholder { color: transparent; } .i-jiroUI__input:not(:focus)::-moz-placeholder { color: transparent; }