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

18
snikket_web/templates/demo.html
View File

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