davejansen/snikket-web-portal
1
0
Fork 0
Code Issues Pull Requests Activity

Tweak form layout

Browse Source 
- Use boldface for labels
- Use the equivalent of h4 for the heading
- Indent checkbox/radio choices
This commit is contained in:
Jonas Schäfer
2021-01-27 16:32:21 +01:00
parent 2f368e0a34
commit 4d0ba8ef9a
2 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
snikket_web/scss/app.scss
View File

@@ -171,10 +171,10 @@ body > footer {
@for $n from 1 through 6 { @for $n from 1 through 6 {
div.form h#{$n}.form-title { div.form h#{$n}.form-title {
font-size: 100%; font-size: nth($h-sizes, 4);
font-weight: bold; /* font-weight: bold; */
line-height: 1.5; line-height: 1.5 / (nth($h-sizes, 4) / 100%);
margin-bottom: 1.5em; margin: 1.5em / (nth($h-sizes, 4) / 100%) 0;
} }
} }
@@ -224,11 +224,18 @@ div.form {
div.form.layout-expanded { div.form.layout-expanded {
label { label {
display: block; display: block;
font-weight: bold;
color: $gray-200; color: $gray-200;
} }
input[type="radio"] + label, input[type="checkbox"] + label {
font-weight: inherit;
color: inherit;
}
div.f-ebox { div.f-ebox {
margin-bottom: $w-l1; margin: 1.5em 0;
line-height: 1.5;
} }
div.f-bbox { div.f-bbox {
@@ -242,7 +249,6 @@ div.form.layout-expanded {
border: none; border: none;
border-bottom: $w-s4 solid $primary-500; border-bottom: $w-s4 solid $primary-500;
margin-bottom: -$w-s4; margin-bottom: -$w-s4;
padding: 0 $w-s3;
} }
input[type=$type].has-error { input[type=$type].has-error {
@@ -258,6 +264,11 @@ div.form.layout-expanded {
} }
} }
ul[id] {
padding: $w-s1 0;
padding-left: $w-l1;
}
input[type="checkbox"], input[type="radio"] { input[type="checkbox"], input[type="radio"] {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
@@ -378,6 +389,7 @@ div.form.layout-expanded {
width: 100%; width: 100%;
border: none; border: none;
border-bottom: $w-s4 solid $primary-500; border-bottom: $w-s4 solid $primary-500;
line-height: 1.5;
} }
textarea:hover { textarea:hover {

18
snikket_web/templates/demo.html
View File

@@ -145,14 +145,20 @@
<input type="text" id="fex-f1" name="fex-f1"> <input type="text" id="fex-f1" name="fex-f1">
</div> </div>
<div class="f-ebox"> <div class="f-ebox">
<input type="checkbox" id="fex-f2" name="fex-f2"><label for="fex-f2">Enable fancy features</label> <label>Optional features</label>
<input type="checkbox" id="fex-f3" name="fex-f3"><label for="fex-f3">Enable more features</label> <ul id="check-features">
<input type="checkbox" id="fex-f4" name="fex-f4"><label for="fex-f4">Also do that other thing</label> <li><input type="checkbox" id="fex-f2" name="fex-f2"><label for="fex-f2">Enable fancy features</label></li>
<li><input type="checkbox" id="fex-f3" name="fex-f3"><label for="fex-f3">Enable more features</label></li>
<li><input type="checkbox" id="fex-f4" name="fex-f4"><label for="fex-f4">Also do that other thing</label></li>
</ul>
</div> </div>
<div class="f-ebox"> <div class="f-ebox">
<input type="radio" id="fex-f5" name="fex-rg1"><label for="fex-f5">High difficulty</label> <label>Level</label>
<input type="radio" id="fex-f6" name="fex-rg1"><label for="fex-f6">Medium difficulty</label> <ul id="radio-difficulty">
<input type="radio" id="fex-f7" name="fex-rg1"><label for="fex-f7">Low difficulty</label> <li><input type="radio" id="fex-f5" name="fex-rg1"><label for="fex-f5">High difficulty</label></li>
<li><input type="radio" id="fex-f6" name="fex-rg1"><label for="fex-f6">Medium difficulty</label></li>
<li><input type="radio" id="fex-f7" name="fex-rg1"><label for="fex-f7">Low difficulty</label></li>
</ul>
</div> </div>
<div class="f-ebox"> <div class="f-ebox">
<label for="fex-f8">Select dropdown:</label> <label for="fex-f8">Select dropdown:</label>