diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius index 98f2c64d3..fdc940104 100644 --- a/templates/standalone/inputs.lucius +++ b/templates/standalone/inputs.lucius @@ -1,3 +1,54 @@ +/* GENERAL STYLES FOR FORMS */ +form { + margin: 20px 0; +} + +/* FORM GROUPS */ +.form-group { + position: relative; + display: flex; + display: grid; + grid-template-columns: 25% 300px; + grid-auto-columns: 25%; + grid-gap: 5px; + justify-content: flex-start; + align-items: center; + margin: 10px 0; + padding-left: 10px; + border-left: 8px solid transparent; +} + +.form-group--required { + border-left: 8px solid var(--lighterbase); +} + +.form-group--valid { + border-left: 8px solid var(--validbase); +} + +.form-group--has-error { + border-left: 8px solid var(--errorbase) !important; +} + +.form-group__label { + width: 25%; + white-space: nowrap; +} + +@media (max-width: 999px) { + .form-group { + grid-template-columns: 1fr; + grid-template-rows: 30px; + align-items: baseline; + margin-top: 17px; + flex-direction: column; + + > * { + width: 100%; + } + } +} + /* TEXT INPUTS */ input[type="text"], input[type="password"], diff --git a/templates/widgets/form.lucius b/templates/widgets/form.lucius index b16b91603..e69de29bb 100644 --- a/templates/widgets/form.lucius +++ b/templates/widgets/form.lucius @@ -1,50 +0,0 @@ -/* GENERAL STYLES FOR FORMS */ -form { - margin: 20px 0; -} - -/* FORM GROUPS */ -.form-group { - position: relative; - display: flex; - display: grid; - grid-template-columns: 25% 300px; - grid-auto-columns: 25%; - grid-gap: 5px; - justify-content: flex-start; - align-items: center; - margin: 10px 0; - padding-left: 10px; - border-left: 8px solid transparent; -} - -.form-group--required { - border-left: 8px solid var(--lighterbase); -} - -.form-group--valid { - border-left: 8px solid var(--validbase); -} - -.form-group--has-error { - border-left: 8px solid var(--errorbase) !important; -} - -.form-group__label { - width: 25%; - white-space: nowrap; -} - -@media (max-width: 999px) { - .form-group { - grid-template-columns: 1fr; - grid-template-rows: 30px; - align-items: baseline; - margin-top: 17px; - flex-direction: column; - - > * { - width: 100%; - } - } -}