diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius index fc659b5c7..4586121b8 100644 --- a/templates/standalone/inputs.lucius +++ b/templates/standalone/inputs.lucius @@ -11,11 +11,12 @@ form { grid-template-columns: 1fr 3fr; grid-gap: 5px; justify-content: flex-start; - align-items: baseline; + align-items: center; + padding: 4px; border-left: 2px solid transparent; + .form-group { - margin-top: 17px; + margin-top: 13px; } } @@ -23,6 +24,22 @@ form { font-weight: 600; } +.form-group--required { + + .form-group__label::after { + content: ' *'; + color: var(--color-error); + } +} + +.form-group--has-error { + background-color: rgba(255, 0, 0, 0.1); + + input, textarea { + border-color: var(--color-error) !important; + } +} + @media (max-width: 768px) { .form-group { grid-template-columns: 1fr; @@ -63,33 +80,6 @@ input[type*="time"] { min-width: 240px; } -.form-group--required { - - .form-group__label::before { - content: '*'; - position: absolute; - left: -14px; - } - - input, textarea { - border-bottom-color: var(--color-primary); - } -} - -.form-group--valid { - - input, textarea { - border-bottom-color: var(--color-success); - } -} - -.form-group--has-error { - - input, textarea { - border-bottom-color: var(--color-error); - } -} - input[type="text"]:focus, input[type="password"]:focus, input[type="url"]:focus, @@ -128,6 +118,20 @@ textarea:focus { outline: 0; } +/* OPTIONS */ +select, +option { + font-size: 1rem; + line-height: 1.5; + padding: 4px 13px; + border: 1px solid #dbdbdb; + border-radius: 2px; + outline: 0; + color: #363636; + background-color: #f3f3f3; + box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05); +} + /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */ input[type="checkbox"] { position: relative;