@fishtank/fishtank-vue
Version:
Fish Tank VueJS Component Module
131 lines (114 loc) • 3 kB
CSS
.ft-input-text__input {
width: 100%;
height: 2.5rem;
padding-left: 0.75rem;
padding-right: 2.5rem;
box-sizing: border-box;
font-family: open sans, arial, sans-serif;
font-weight: 400;
line-height: 1.5rem;
letter-spacing: 0rem;
border: #C5CACD 1px solid;
color: #292E31;
border-radius: 2px;
font-size: 1rem;
line-height: 1.5rem; }
.ft-input-text__input:focus {
outline: #0D9DDB 2px solid; }
.ft-input-text__input:disabled {
background-color: #EDF2F5;
color: #C5CACD; }
.ft-input-text__input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #C5CACD;
font-style: italic; }
.ft-input-text__input::-moz-placeholder {
/* Firefox 19+ */
color: #C5CACD;
font-style: italic; }
.ft-input-text__input:-ms-input-placeholder {
/* IE 10+ */
color: #C5CACD;
font-style: italic; }
.ft-input-text__input:-moz-placeholder {
/* Firefox 18- */
color: #C5CACD;
font-style: italic; }
input[type=number] {
text-align: right;
padding-right: 0.75rem; }
.ft-input-text__left-icon ~ .ft-input-text__input {
padding-left: 2.75rem; }
.ft-input-text__input-wrapper {
position: relative; }
.ft-input-text__left-icon,
.ft-input-text__right-icon {
position: absolute;
top: 0.5rem; }
.ft-input-text__left-icon svg,
.ft-input-text__right-icon svg {
width: 24px;
height: 24px; }
.ft-input-text__left-icon {
left: 0.5rem; }
.ft-input-text__right-icon {
right: 0.5rem; }
.ft-input-text__label {
text-transform: uppercase;
font-weight: 600;
font-family: open sans, arial, sans-serif;
line-height: 1.25rem;
letter-spacing: 0.00625rem;
color: #292E31;
font-size: 0.875rem;
line-height: 1.25rem; }
.ft-input-text__label-wrapper {
position: relative;
margin-bottom: 0.25rem; }
.ft-input-text__auxillary-slot {
font-size: 0.75rem;
line-height: 1rem;
position: absolute;
right: 0;
bottom: 0; }
.ft-input-text {
padding-bottom: 1.5rem; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
.ft-input-text--error .ft-input-text__input {
border-color: #E1483E;
color: #E1483E; }
.ft-input-text--error .ft-input-text__error-text {
margin-top: 0.25rem;
color: #E1483E;
font-size: 0.875rem;
letter-spacing: 0.00625rem;
line-height: 1.25rem;
font-weight: 400;
font-family: open sans, arial, sans-serif; }
.ft-input-text--error .ft-input-text__label {
color: #E1483E; }
.ft-input-text__input__textarea {
overflow: auto;
transition: all 250ms ease-in-out;
padding-top: 6px;
padding-bottom: 1px;
min-height: 2.5rem;
padding-left: 0.75rem;
padding-right: 2.5rem; }
.ft-false-text-area {
min-height: 2.5rem;
padding-left: 0.75rem;
padding-right: 2.5rem;
visibility: hidden;
font-size: 1rem;
margin: 0px;
position: absolute;
top: 0;
background: lightblue;
display: block;
white-space: pre-line;
word-wrap: break-word;
width: calc(100% - 3.25rem); }