TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tidy up checkbox list - refs #4599 

Also had to revert the 100vw improvement on tabs because it causes unnecessary scroll/drag activation. Also reverted change in form.base.less that had no reasoning.
This commit is contained in:
Samuel Georges 2019-09-21 12:36:31 +10:00
parent 202d1f6b04
commit 6daea258b9
5 changed files with 44 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
modules/backend/widgets/form/partials/_field_checkboxlist.htm
View File

@ -42,17 +42,21 @@
<!-- Quick selection -->
<div class="checkboxlist-controls">
<div>
<a href="javascript:;" data-field-checkboxlist-all><i class="icon-check-square"></i> <?= e(trans('backend::lang.form.select_all')) ?></a>
<a href="javascript:;" data-field-checkboxlist-all>
<i class="icon-check-square"></i> <?= e(trans('backend::lang.form.select_all')) ?>
</a>
</div>
<div>
<a href="javascript:;" data-field-checkboxlist-none><i class="icon-eraser"></i> <?= e(trans('backend::lang.form.select_none')) ?></a>
<a href="javascript:;" data-field-checkboxlist-none>
<i class="icon-eraser"></i> <?= e(trans('backend::lang.form.select_none')) ?>
</a>
</div>
</div>
<?php endif ?>
<div class="field-checkboxlist-container <?= $isScrollable ? 'is-scrollable' : '' ?>">
<div class="field-checkboxlist-inner">
<?php if ($isScrollable): ?>
<?php if ($isScrollable): ?>
<!-- Scrollable Checkbox list -->
<div class="field-checkboxlist-scrollable">
<div class="control-scrollbar" data-control="scrollbar">

2
modules/system/assets/ui/less/form.base.less
View File

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

61
modules/system/assets/ui/less/form.less
View File

@ -315,27 +315,18 @@
&.size-giant { min-height: @size-giant; }
}
.field-checkboxlist:not(.is-scrollable) {
.border-radius(@border-radius-base);
background: @color-form-checkboxlist-background;
border: 1px solid @color-form-checkboxlist-border;
//.checkbox:last-of-type {
// margin-bottom: 0;
//}
}
.field-checkboxlist.is-scrollable {
small {
color: @text-muted;
}
}
.field-checkboxlist {
&:not(.is-scrollable) {
.border-radius(@border-radius-base);
background: @color-form-checkboxlist-background;
border: 1px solid @color-form-checkboxlist-border;
.field-checkboxlist-inner {
padding: 20px 20px 2px 20px;
}
}
.checkboxlist-controls {
padding: 15px 15px 0 15px;
border-bottom: 1px solid #e2e2e2;
color: @color-label;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -344,28 +335,26 @@
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
a {
margin-right: 15px;
margin-bottom: 15px;
text-decoration: none;
color: @color-label;
}
>div {
padding-right: 15px;
padding-bottom: 15px;
}
> div {
padding-bottom: 7px;
.search-input-wrap {
margin-left: auto;
> a {
font-size: 13px;
margin-right: 20px;
text-decoration: none;
> i {
color: @text-muted;
margin: 0 4px;
}
&:hover > i {
color: @color-label;
}
}
}
}
}
.field-checkboxlist-container {
&:not(.is-scrollable) {
padding: 20px 20px 2px 20px;
}
}
.field-checkboxlist-scrollable {
background: @color-form-checkboxlist-background;

4
modules/system/assets/ui/less/tab.less
View File

@ -112,7 +112,7 @@
padding-top: 7px;
> span:not([class*="oc-icon"]) {
margin-right: 8px;
}
}
}
}
@ -250,7 +250,7 @@
position: absolute;
bottom: 0;
height: 1px;
width: 100vw;
width: 100%;
z-index: @zindex-tab - 1;
content: ' ';
border-bottom: 2px solid @color-tab-active-border;

16
modules/system/assets/ui/storm.css
View File

@ -2872,7 +2872,7 @@ body.compact-container .control-breadcrumb {margin-top:0;margin-left:0;margin-ri
.control-tabs.primary-tabs >div >div >ul.nav-tabs {position:relative;margin-left:0;margin-right:0}
.control-tabs.primary-tabs >ul.nav-tabs:before,
.control-tabs.primary-tabs >div >ul.nav-tabs:before,
.control-tabs.primary-tabs >div >div >ul.nav-tabs:before {position:absolute;bottom:0;height:1px;width:100vw;z-index:9;content:' ';border-bottom:2px solid #d0d0d0}
.control-tabs.primary-tabs >div >div >ul.nav-tabs:before {position:absolute;bottom:0;height:1px;width:100%;z-index:9;content:' ';border-bottom:2px solid #d0d0d0}
.control-tabs.primary-tabs >ul.nav-tabs >li,
.control-tabs.primary-tabs >div >ul.nav-tabs >li,
.control-tabs.primary-tabs >div >div >ul.nav-tabs >li {padding-right:0;padding-left:0;margin-left:0;margin-right:-20px;background:transparent}
@ -3705,7 +3705,7 @@ input[type="search"] {-webkit-appearance:none}
input[type="date"] {line-height:38px}
.form-group {margin-bottom:15px}
.radio,
.checkbox {display:block;min-height:20px;margin-top:10px;margin-bottom:15px;padding-left:20px}
.checkbox {display:block;min-height:20px;margin-top:10px;margin-bottom:10px;padding-left:20px}
.radio label,
.checkbox label {display:inline;font-weight:normal;cursor:pointer}
.radio input[type="radio"],
@ -4237,12 +4237,12 @@ html.cssanimations .cursor-loading-indicator.hide {display:none}
.field-textarea.size-huge {min-height:250px}
.field-textarea.size-giant {min-height:350px}
.field-checkboxlist:not(.is-scrollable) {-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#fff;border:1px solid #e2e2e2}
.field-checkboxlist.is-scrollable small {color:#999}
.field-checkboxlist .checkboxlist-controls {padding:15px 15px 0;border-bottom:1px solid #e2e2e2;color:#2a3e51;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}
.field-checkboxlist .checkboxlist-controls a {margin-right:15px;margin-bottom:15px;text-decoration:none;color:#2a3e51}
.field-checkboxlist .checkboxlist-controls > div {padding-right:15px;padding-bottom:15px}
.field-checkboxlist .checkboxlist-controls .search-input-wrap {margin-left: auto}
.field-checkboxlist-container:not(.is-scrollable) {padding: 20px 20px 2px 20px}
.field-checkboxlist:not(.is-scrollable) .field-checkboxlist-inner {padding:20px 20px 2px 20px}
.field-checkboxlist .checkboxlist-controls {display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}
.field-checkboxlist .checkboxlist-controls >div {padding-bottom:7px}
.field-checkboxlist .checkboxlist-controls >div >a {font-size:13px;margin-right:20px;text-decoration:none}
.field-checkboxlist .checkboxlist-controls >div >a >i {color:#999;margin:0 4px}
.field-checkboxlist .checkboxlist-controls >div >a:hover >i {color:#2a3e51}
.field-checkboxlist-scrollable {background:#fff;border:1px solid #e2e2e2;padding-left:15px;height:300px}
.field-checkboxlist-scrollable .checkbox {margin-top:15px;margin-bottom:5px}
.field-checkboxlist-scrollable .checkbox ~ .checkbox {margin-top:0}