Improve UX for checkboxlists on mobile (#4841)

Credit to @ayumi-cloud.
This commit is contained in:
Ayumi 2019-12-22 19:39:22 +00:00 committed by Luke Towers
parent 953061797d
commit 0436165a90
3 changed files with 5 additions and 5 deletions

View File

@ -197,7 +197,7 @@ input[type="date"] {
display: block; display: block;
min-height: @line-height-computed; // clear the floating input if there is no label text min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 15px;
padding-left: 20px; padding-left: 20px;
label { label {
display: inline; display: inline;

View File

@ -377,7 +377,7 @@
// First checkbox // First checkbox
.checkbox { .checkbox {
margin-top: 15px; margin-top: 15px;
margin-bottom: 5px; margin-bottom: 10px;
} }
// All others // All others
@ -554,4 +554,4 @@ body.slim-container {
select.form-control.custom-select { select.form-control.custom-select {
display: none; display: none;
} }
} }

View File

@ -3705,7 +3705,7 @@ input[type="search"] {-webkit-appearance:none}
input[type="date"] {line-height:38px} input[type="date"] {line-height:38px}
.form-group {margin-bottom:15px} .form-group {margin-bottom:15px}
.radio, .radio,
.checkbox {display:block;min-height:20px;margin-top:10px;margin-bottom:10px;padding-left:20px} .checkbox {display:block;min-height:20px;margin-top:10px;margin-bottom:15px;padding-left:20px}
.radio label, .radio label,
.checkbox label {display:inline;font-weight:normal;cursor:pointer} .checkbox label {display:inline;font-weight:normal;cursor:pointer}
.radio input[type="radio"], .radio input[type="radio"],
@ -4250,7 +4250,7 @@ html.cssanimations .cursor-loading-indicator.hide {display:none}
.field-checkboxlist .checkboxlist-controls >div >a >i {color:#999;margin:0 4px} .field-checkboxlist .checkboxlist-controls >div >a >i {color:#999;margin:0 4px}
.field-checkboxlist .checkboxlist-controls >div >a:hover >i {color:#2a3e51} .field-checkboxlist .checkboxlist-controls >div >a:hover >i {color:#2a3e51}
.field-checkboxlist-scrollable {padding-left:15px;height:300px} .field-checkboxlist-scrollable {padding-left:15px;height:300px}
.field-checkboxlist-scrollable .checkbox {margin-top:15px;margin-bottom:5px} .field-checkboxlist-scrollable .checkbox {margin-top:15px;margin-bottom:10px}
.field-checkboxlist-scrollable .checkbox ~ .checkbox {margin-top:0} .field-checkboxlist-scrollable .checkbox ~ .checkbox {margin-top:0}
.field-recordfinder {background-color:#fff;border:1px solid #d1d6d9;overflow:hidden;position:relative;-webkit-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} .field-recordfinder {background-color:#fff;border:1px solid #d1d6d9;overflow:hidden;position:relative;-webkit-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.field-recordfinder .form-control {background:transparent;border-color:transparent;height:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:7px 30px 7px 11px;-webkit-box-shadow:none;box-shadow:none} .field-recordfinder .form-control {background:transparent;border-color:transparent;height:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:7px 30px 7px 11px;-webkit-box-shadow:none;box-shadow:none}