/** * * fields * * @author Björn Hase, me@herr-hase.wtf * @license http://opensource.org/licenses/MIT The MIT License * @link https://gitea.node001.net/tiny-components/plain-ui.git * */ .field-group { margin: $margin; &--valid { .field-text { border-color: var(--success); } .icon { fill: var(--success); } } &--error { .field-text { border-color: var(--danger); } .icon { fill: var(--danger); } } } .field-label { font-size: 1rem; font-family: var(--font-family); .icon { vertical-align: text-bottom; } &:hover { cursor: pointer; } } .field-text, .field-choice { font-family: var(--font-family); font-size: 0.95rem; width: 100%; border: 1px solid lighten($color__primary, 40%); border-radius: $border-radius; margin: 0.7rem 0 0; &:focus, &:active { outline: 0; border-color: var(--border); } } .field-text { padding: 0.8em 1.1em; } textarea.field-text { height: 180px; } /** * field-choice * * */ .field-choice { appearance: none; padding: 0.8em; background-image: linear-gradient(to right, $color__active, $color__active); background-position: 100%; background-size: 1.5rem 100%; background-repeat: no-repeat; &:active, &:focus { background-image: linear-gradient(to right, $color__border, $color__border); } } /** * radio & checkbox * *