From 6daea258b95e307f669efd38170c2a57dd0fbba5 Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Sat, 21 Sep 2019 12:36:31 +1000
Subject: [PATCH] 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.
---
 .../form/partials/_field_checkboxlist.htm     | 12 ++--
 modules/system/assets/ui/less/form.base.less  |  2 +-
 modules/system/assets/ui/less/form.less       | 61 ++++++++-----------
 modules/system/assets/ui/less/tab.less        |  4 +-
 modules/system/assets/ui/storm.css            | 16 ++---
 5 files changed, 44 insertions(+), 51 deletions(-)

diff --git a/modules/backend/widgets/form/partials/_field_checkboxlist.htm b/modules/backend/widgets/form/partials/_field_checkboxlist.htm
index 2eab55016..a5dc947fc 100644
--- a/modules/backend/widgets/form/partials/_field_checkboxlist.htm
+++ b/modules/backend/widgets/form/partials/_field_checkboxlist.htm
@@ -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">
diff --git a/modules/system/assets/ui/less/form.base.less b/modules/system/assets/ui/less/form.base.less
index 00078238a..ce08b8f0f 100644
--- a/modules/system/assets/ui/less/form.base.less
+++ b/modules/system/assets/ui/less/form.base.less
@@ -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;
diff --git a/modules/system/assets/ui/less/form.less b/modules/system/assets/ui/less/form.less
index 409cf07f2..30bd6b029 100644
--- a/modules/system/assets/ui/less/form.less
+++ b/modules/system/assets/ui/less/form.less
@@ -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;
diff --git a/modules/system/assets/ui/less/tab.less b/modules/system/assets/ui/less/tab.less
index 1be5efeac..8ceeaee54 100644
--- a/modules/system/assets/ui/less/tab.less
+++ b/modules/system/assets/ui/less/tab.less
@@ -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;
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index dc22ccfa5..72422b225 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -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}