@mixin placeholder { &::-webkit-input-placeholder {@content} &:-moz-placeholder {@content} &:-ms-input-placeholder {@content} } .form-row-submit { margin-top: $spacing-vertical; } .form-row-submit--with-footer { margin-bottom: $spacing-vertical; } .form-row__label-row { margin-top: $spacing-vertical * 5/6; margin-bottom: $spacing-vertical * 1/6; line-height: 1; font-size:calc( 0.9 * var(--font-size)); } .form-row__label-row--prefix { float: left; margin-right: 5px; } input[type="text"].input-copyable { background: var(--input-bg); border-bottom: var(--input-border-size) solid var(--input-border-color); color: var(--input-color); line-height: 1; padding-top: $spacing-vertical * 1/3; padding-bottom: $spacing-vertical * 1/3; width: var(--input-width); padding-left: 5px; padding-right: 5px; width: 100%; &:focus { border-color: var(--color-primary); } } .form-field { display: inline-block; input[type="checkbox"], input[type="radio"] { cursor: pointer; } select { transition: outline var(--transition-duration) var(--transition-type); box-sizing: border-box; padding-left: 5px; padding-right: 5px; height: $spacing-vertical; background: var(--select-bg); color: var(--select-color); &:focus { outline: var(--input-border-size) solid var(--color-primary); } } textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="date"] { @include placeholder { color: lighten($text-color, 60%); } transition: all var(--transition-duration) var(--transition-type); cursor: pointer; padding-left: 1px; padding-right: 1px; box-sizing: border-box; -webkit-appearance: none; background: var(--input-bg); color: var(--input-color); &[readonly] { background-color: var(--input-bg); } } input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="date"] { border-bottom: var(--input-border-size) solid var(--input-border-color); line-height: 1; padding-top: $spacing-vertical * 1/3; padding-bottom: $spacing-vertical * 1/3; &.form-field__input--error { border-color: var(--color-error); } &.form-field__input--inline { padding-top: 0; padding-bottom: 0; border-bottom-width: 1px; margin-left: 8px; margin-right: 8px; } } textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="date"]:focus { border-color: var(--color-primary); background: var(--input-active-bg); } textarea { padding: 2px; border: var(--input-border-size) solid var(--input-border-color); } } .form-field--SimpleMDE { display: block; } .form-field__label { color: var(--color-help); &[for] { cursor: pointer; } > input[type="checkbox"], input[type="radio"] { margin-right: 6px; } } .form-field__label--error { color: var(--color-error); } .form-field__input-text { width: var(--input-width); } .form-field__prefix { margin-right: 4px; } .form-field__postfix { margin-left: 4px; } .form-field__input-number { width: 70px; text-align: right; } .form-field--textarea { width: 100%; } .form-field__input-textarea { width: 100%; } .form-field__error, .form-field__helper { margin-top: $spacing-vertical * 1/3; font-size: 0.8em; transition: opacity var(--transition-duration) var(--transition-type); } .form-field__error { color: var(--color-error); } .form-field__helper { color:var(--color-help); } .form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll { height: auto; }