2021-10-03 18:19:33 +02:00

112 lines
4.4 KiB
JavaScript

import React, { Component } from 'react'
import styled from 'styled-components'
import { withTheme } from 'styled-components';
export class TextInput extends Component {
render() {
const InputWrapper = styled.div`
font-size: 1.1em;
overflow: hidden;
position: relative;
margin: 0.2em 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background: ${this.props.disabled===undefined ? this.props.theme.colours.color6 : this.props.theme.colours.color7};
border-bottom: 0.3em solid ${this.props.disabled===undefined ? this.props.theme.colours.color5 : this.props.theme.colours.color8};
:hover {
${this.props.disabled===undefined ? "outline: solid "+ this.props.theme.colours.color3 +";\nborder-bottom: 0.3em solid" + this.props.theme.colours.color3 + ";" : null};
button:hover{
${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
&::before{
${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
-webkit-transform: translateX(-90%) rotate(45deg) scale(1.2);
transform: translateX(-90%) rotate(45deg) scale(1.2);
}
}
}
input{
padding: 1em .2em .1em 0.2em;
display: inline-block;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
z-index: 1;
border: none;
background: none;
outline: none;
font-size: 1em;
${this.props.disabled!==undefined ? "user-select: none;" : null};
&:focus + label, &:not(:placeholder-shown) + label {
color: ${this.props.theme.colours.color5};
font-size: 0.7em;
-webkit-transform: translateY(0);
transform: translateY(0);
bottom: 50%;
font-weight: bold;
}
:disabled{
color: ${this.props.theme.colours.color1};
&:focus + label, &:not(:placeholder-shown) + label{
}
}
}
label{
padding: 0;
color: ${this.props.theme.colours.color2};
z-index: 0;
position: absolute;
left: 0.2em;
padding-bottom: 0.2em;
bottom: 0;
-webkit-transition: all ease-in-out 350ms;
transition: all ease-in-out 350ms;
}
button{
position: relative;
background: ${this.props.theme.colours.color2};
color: ${this.props.theme.colours.color6};
border: none;
font-size: 0.8em;
font-weight: bold;
padding: 0 .5em;
-webkit-transition: ease all 300ms;
transition: ease all 300ms;
z-index: 1;
::before {
position: absolute;
display: block;
content: '';
-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
-webkit-transform: translateX(-90%) rotate(45deg);
transform: translateX(-90%) rotate(45deg);
height: 1em;
width: 1em;
background: ${this.props.theme.colours.color2};
-webkit-transition: ease all 300ms;
transition: ease all 300ms;
}
}
`;
return (
<InputWrapper>
<input id={this.props.id} placeholder="" type={this.props.type ? this.props.type : "text"} value={this.props.value} disabled={this.props.disabled} />
{this.props.label != null ? <label htmlFor={this.props.id}>{this.props.label}</label> : ""}
{this.props.button != null ? <button onClick={this.props.onClick}>{this.props.button}</button> : ""}
</InputWrapper>
)
}
}
export default withTheme(TextInput)