code { font-family: 'Roboto Mono', monospace; font-weight: 400; } .form-container { max-width: 400px; padding: 20px; margin: 0 auto; p { font-size: 14px; line-height: 18px; color: $color2; margin-bottom: 20px; strong { color: $color5; font-weight: 500; } } } .simple_form { .input { margin-bottom: 15px; } .hint { display: block; color: rgba($color5, 0.8); font-size: 12px; } .input.file, .input.select { padding: 15px 0; margin-bottom: 0; display: flex; label { font-family: inherit; font-size: 16px; color: $color5; width: 100px; display: block; flex: 0 0 auto; padding-top: 5px; } input[type=file], select { flex: 1 1 auto; } } .fields-group { margin-bottom: 25px; } .input.boolean { margin-bottom: 5px; label { font-family: inherit; font-size: 14px; color: white; display: block; } label.checkbox { position: relative; padding-left: 25px; } input[type=checkbox] { position: absolute; left: 0; top: 1px; margin: 0; } .hint { padding-left: 25px; } } input[type=text], input[type=email], input[type=password], textarea { background: transparent; box-sizing: border-box; border: 0; border-bottom: 2px solid $color3; border-radius: 2px 2px 0 0; padding: 7px 4px; font-size: 16px; color: $color5; display: block; width: 100%; outline: 0; font-family: inherit; &:invalid { box-shadow: none; } &:focus:invalid { border-bottom-color: $color6; } &:required:valid { border-bottom-color: $color7; } &:active, &:focus { border-bottom-color: $color4; background: rgba($color8, 0.1); } } .input.field_with_errors { input[type=text], input[type=email], input[type=password] { border-bottom-color: $color6; } .error { font-weight: 500; color: $color6; } } .actions { margin-top: 30px; } button, .block-button { display: block; width: 100%; border: 0; border-radius: 4px; background: $color4; color: $color5; font-size: 18px; padding: 10px; text-transform: uppercase; text-decoration: none; text-align: center; box-sizing: border-box; cursor: pointer; font-weight: 500; outline: 0; margin-bottom: 10px; &:hover { background-color: lighten($color4, 5%); } &:active, &:focus { position: relative; top: 1px; background-color: darken($color4, 5%); } &.negative { background: $color6; &:hover { background-color: lighten($color6, 5%); } &:active, &:focus { background-color: darken($color6, 5%); } } } } .flash-message { background: $color1; color: $color3; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; box-shadow: 0 0 5px rgba($color8, 0.2); text-align: center; strong { font-weight: 500; } } .form-footer { margin-top: 30px; text-align: center; a { color: $color5; text-decoration: none; &:hover { text-decoration: underline; } } } .oauth-prompt, .follow-prompt { margin-bottom: 30px; text-align: center; color: $color3; h2 { font-size: 16px; margin-bottom: 30px; } strong { color: $color2; font-weight: 500; } } .qr-code { background: #fff; padding: 4px; margin-bottom: 20px; box-shadow: 0 0 15px rgba($color8, 0.2); display: inline-block; svg { display: block; margin: 0; } }