Moar CSS for forms

This commit is contained in:
swag 2023-05-20 01:54:12 -04:00
parent 380fca1db3
commit 4b29dfa85d
2 changed files with 25 additions and 5 deletions

View File

@ -89,6 +89,26 @@ pre > code {
padding: 0.5em 1em; padding: 0.5em 1em;
} }
.form-body {
background-color: var(--light-warm-gray);
border: outset var(--light-warm-gray);
padding: 0.5em 1em;
display: flex;
flex-flow: column wrap;
gap: 1em;
}
.form-field {
display: flex;
flex-flow: column wrap;
}
.form-button {
border: outset var(--light-blue);
background-color: var(--light-blue);
padding: 0.5em 0;
}
.field-with-info { .field-with-info {
border-style: solid; border-style: solid;
border-color: var(--highlight-green); border-color: var(--highlight-green);

View File

@ -1,8 +1,8 @@
% layout 'default'; % layout 'default';
% title 'New Thread'; % title 'New Thread';
<h2 class="page-title"><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post" class="field"> <form method="post" class="form-body">
<div class="field__author"> <div class="form-field">
<%= label_for author => 'Author' %> <%= label_for author => 'Author' %>
<%= text_field author => session->{'author'}, ( <%= text_field author => session->{'author'}, (
id => 'author', id => 'author',
@ -14,7 +14,7 @@
<p class="field-with-error">Invalid author: 1 to 63 characters please.</p> <p class="field-with-error">Invalid author: 1 to 63 characters please.</p>
<% } =%> <% } =%>
</div> </div>
<div class="field__title"> <div class="form-field">
<%= label_for title => 'Title' %> <%= label_for title => 'Title' %>
<%= text_field title => ( <%= text_field title => (
id => 'title', id => 'title',
@ -27,7 +27,7 @@
<p class="field-with-error">Invalid title: 1 to 127 characters please.</p> <p class="field-with-error">Invalid title: 1 to 127 characters please.</p>
<% } =%> <% } =%>
</div> </div>
<div class="field__text"> <div class="form-field">
<%= label_for body => 'Text' %> <%= label_for body => 'Text' %>
<%= text_area body => ( <%= text_area body => (
id => 'body', id => 'body',
@ -40,5 +40,5 @@
<p class="field-with-error">Invalid text: Up to 4,000 characters only.</p> <p class="field-with-error">Invalid text: Up to 4,000 characters only.</p>
<% } =%> <% } =%>
</div> </div>
<%= submit_button 'Post', class => 'field__submit' %> <%= submit_button 'Post', class => 'form-button' %>
</form> </form>