improve form-row classes so they can work with create room form

This commit is contained in:
Bruno Windels 2022-02-09 19:01:35 +01:00
parent 8523f6feaf
commit 4b1be30dc0
4 changed files with 30 additions and 5 deletions

View File

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.form input { .form .form-row.text > input, .form .form-row.text > textarea {
display: block; display: block;
width: 100%; width: 100%;
min-width: 0; min-width: 0;

View File

@ -216,3 +216,14 @@ the layout viewport up without resizing it when the keyboard shows */
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.vertical-layout {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
.vertical-layout > .stretch {
flex: 1 0 0;
}

View File

@ -80,11 +80,19 @@ limitations under the License.
flex: 1 0 auto; flex: 1 0 auto;
} }
.form textarea {
font-family: "Inter", sans-serif;
}
.form-group {
margin: 24px 0;
}
.form-row { .form-row {
margin: 12px 0; margin: 12px 0;
} }
.form-row input { .form-row.text > input, .form-row.text > textarea {
padding: 12px; padding: 12px;
border: 1px solid rgba(141, 151, 165, 0.15); border: 1px solid rgba(141, 151, 165, 0.15);
border-radius: 8px; border-radius: 8px;
@ -92,7 +100,13 @@ limitations under the License.
font-size: 1em; font-size: 1em;
} }
.form-row label, .form-row input { .form-row.check {
display: flex;
align-items: baseline;
gap: 4px;
}
.form-row.text > label, .form-row.text > input {
display: block; display: block;
} }

View File

@ -41,8 +41,8 @@ export class PasswordLoginView extends TemplateView {
} }
}, [ }, [
t.if(vm => vm.errorMessage, (t, vm) => t.p({className: "error"}, vm.i18n(vm.errorMessage))), t.if(vm => vm.errorMessage, (t, vm) => t.p({className: "error"}, vm.i18n(vm.errorMessage))),
t.div({ className: "form-row" }, [t.label({ for: "username" }, vm.i18n`Username`), username]), t.div({ className: "form-row text" }, [t.label({ for: "username" }, vm.i18n`Username`), username]),
t.div({ className: "form-row" }, [t.label({ for: "password" }, vm.i18n`Password`), password]), t.div({ className: "form-row text" }, [t.label({ for: "password" }, vm.i18n`Password`), password]),
t.div({ className: "button-row" }, [ t.div({ className: "button-row" }, [
t.button({ t.button({
className: "button-action primary", className: "button-action primary",