diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius index 10b1b33b8..98f2c64d3 100644 --- a/templates/standalone/inputs.lucius +++ b/templates/standalone/inputs.lucius @@ -1,8 +1,3 @@ -/* GENERAL STYLES FOR FORMS */ -form { - margin: 20px 0; -} - /* TEXT INPUTS */ input[type="text"], input[type="password"], @@ -51,30 +46,6 @@ textarea:focus { background-color: transparent; border-bottom-color: var(--lightbase); } -/* FORM GROUPS */ -.form-group { - position: relative; - display: grid; - grid-template-columns: repeat(2, minmax(150px, max-content)); - grid-auto-columns: minmax(150px, max-content); - grid-gap: 5px; - 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; -} /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */ input[type="checkbox"] { @@ -196,24 +167,15 @@ input[type="checkbox"]:checked::after { color: var(--fontsec); transform: translate(0, 0); transition: all .1s; - display: inline-block; - width: 30%; } .reactive-label--small { cursor: default; color: var(--fontbase); } @media (max-width: 999px) { - .form-group { - grid-template-rows: 30px; - grid-template-columns: 1fr; - align-items: baseline; - margin-top: 17px; - } .reactive-label { position: relative; transform: translate(2px, 30px); - display: block; } .reactive-label--small { transform: translate(2px, 0px); diff --git a/templates/widgets/form.lucius b/templates/widgets/form.lucius index e69de29bb..b16b91603 100644 --- a/templates/widgets/form.lucius +++ b/templates/widgets/form.lucius @@ -0,0 +1,50 @@ +/* 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%; + } + } +}