src/components/UI/Input/Input.scss
@import "../../../assets/sass/main";
.input-area {
width: 100%;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
&__input {
padding: .5rem;
font-size: 1.5rem;
border: none;
margin: .4rem 1rem;
outline: none;
font-family: $cutive-mono;
width: 100%;
&--edit {
border-bottom: 1px solid $color-black;
background-color: rgba($color-white, .5);
}
&--no-edit {
background-color: transparent;
cursor: not-allowed;
}
&--valid {
border-bottom: 1px solid green;
}
&--invalid {
border-bottom: 1px solid red;
}
}
&__edit-image {
width: 16px;
height: 16px;
}
}
.large {
width: 18rem;
}