Moar CSS for forms
This commit is contained in:
parent
380fca1db3
commit
4b29dfa85d
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user