code { font-family: 'Roboto Mono', monospace; font-weight: 400; } .form-container { max-width: 400px; padding: 20px; margin: 0 auto; } .simple_form { .input { margin-bottom: 15px; } .input.file, .input.select { padding: 15px 0; margin-bottom: 0; display: flex; label { font-family: 'Roboto'; font-size: 16px; color: #fff; 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: 'Roboto'; font-size: 14px; color: #9baec8; display: block; } label.checkbox { position: relative; padding-left: 25px; } input[type=checkbox] { position: absolute; left: 0; top: 0; } } input[type=text], input[type=email], input[type=password], textarea { background: transparent; box-sizing: border-box; border: 0; border-bottom: 2px solid #9baec8; border-radius: 2px 2px 0 0; padding: 7px 4px; font-size: 16px; color: #fff; display: block; width: 100%; outline: 0; font-family: 'Roboto'; &:invalid { box-shadow: none; } &:focus:invalid { border-bottom-color: #df405a; } &:required:valid { border-bottom-color: #79bd9a; } &:active, &:focus { border-bottom-color: #2b90d9; background: rgba(0, 0, 0, 0.1); } } .input.field_with_errors { input[type=text], input[type=email], input[type=password] { border-bottom-color: #df405a; } .error { font-weight: 500; color: #df405a; } } .actions { margin-top: 30px; } button { display: block; width: 100%; border: 0; border-radius: 4px; background: #2b90d9; color: #fff; font-size: 18px; padding: 10px; text-transform: uppercase; cursor: pointer; font-weight: 500; outline: 0; margin-bottom: 10px; &:hover { background-color: lighten(#2b90d9, 5%); } &:active, &:focus { position: relative; top: 1px; background-color: darken(#2b90d9, 5%); } &.negative { background: #df405a; &:hover { background-color: lighten(#df405a, 5%); } &:active, &:focus { background-color: darken(#df405a, 5%); } } } } .flash-message { background: #282c37; color: #9baec8; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); text-align: center; strong { font-weight: 500; } } .form-footer { margin-top: 30px; text-align: center; a { color: #9baec8; text-decoration: none; &:hover { color: #d9e1e8; text-decoration: underline; } } } .oauth-prompt { margin-bottom: 30px; text-align: center; color: #9baec8; h2 { font-size: 16px; margin-bottom: 30px; } strong { color: #d9e1e8; font-weight: 500; } }