Elastic: Custom switch improvements

skins/elastic/styles/widgets/common.less

@@ -459,6 +459,11 @@ table.table {
         white-space: nowrap;
         overflow: hidden;
         text-align: center;
+        padding: .5rem;
+
+        html.touch & {
+            padding: .5rem .3rem;
+        }
     }
 
     th.checkbox-cell {
@@ -517,15 +522,6 @@ table.table {
     }
 }
 
-html.touch {
-    table.table {
-        th.checkbox-cell:before {
-            font-size: 1.5rem;
-        }
-    }
-}
-
-
 /* Bootstrap's .table style overwrites */
 .table {
     thead th {

skins/elastic/styles/widgets/forms.less

@@ -269,6 +269,10 @@ input.smart-upload {
         }
     }
 
+    .form-group .proplist {
+        padding: 0 15px;
+    }
+
     // Some forms may use multiple elements that are not part of .input-group
     // add proper spacing
     select + select,
@@ -505,8 +509,9 @@ html.ms .propform {
             margin: .5rem 0; // fixes checkbox alignment with other inputs in a form
         }
 
-        .custom-control-label {
+        .custom-switch + a {
-            overflow: unset;
+            line-height: 2;
+            vertical-align: bottom;
         }
 
         td > label {
@@ -651,22 +656,14 @@ html.ms .propform {
         line-height: @proplist-record-height;
         margin-bottom: .25rem;
         display: flex;
+        align-items: center;
 
         &:last-child {
             margin-bottom: 0;
         }
 
         input[type=radio] {
-            vertical-align: middle;
             margin-right: .5em;
-
-            & + .input-group {
-                flex-grow: 1;
-            }
-        }
-
-        .custom-control-label {
-            overflow: unset; // for .custom-switch
         }
 
         label:not(.input-group-text) {
@@ -684,6 +681,7 @@ html.ms .propform {
 .checklist {
     & > div {
         line-height: 2rem;
+        display: block; // overwrite .custom-switch
     }
 
     .custom-control-label {
@@ -1245,6 +1243,9 @@ html.ms .propform {
 }
 
 .custom-switch {
+    padding-left: 0;
+    display: inline-block;
+
     .custom-control-input {
         left: 0;
 
@@ -1269,40 +1270,49 @@ html.ms .propform {
 
     // Make switches bigger, we use smaller font than Bootstrap's default
 
-    html.touch & {
-        padding-left: 3rem;
-    }
-
     .custom-control-label {
+        padding-left: 2.5rem;
+        min-height: 2rem;
+        line-height: 2;
+        display: inline-block;
+
+        html.touch & {
+            padding-left: 3rem;
+        }
+
+        &:before,
+        &:after {
+            border-radius: .6rem;
+            margin: .15rem 0;
+            cursor: pointer;
+
+            html.touch & {
+                border-radius: .8rem;
+                margin: 0;
+            }
+        }
+
         &:before {
+            left: 2px;
             width: 2rem;
             height: 1.2rem;
-            border-radius: .6rem;
-            margin: .125rem 0;
 
             html.touch & {
-                left: -3rem;
                 top: .2rem;
                 width: 2.6rem;
                 height: 1.6rem;
-                border-radius: .8rem;
-                margin: 0;
             }
         }
 
         &:after {
+            left: 4px;
             width: ~"calc(1.2rem - 4px)";
             height: ~"calc(1.2rem - 4px)";
-            border-radius: .6rem;
-            margin: .125rem 0;
 
             html.touch & {
-                left: ~"calc(-3rem + 2px)";
                 top: ~"calc(.2rem + 2px)";
                 height: ~"calc(1.6rem - 4px)";
                 width: ~"calc(1.6rem - 4px)";
-                border-radius: .8rem;
-                margin: 0;
             }
         }
     }

skins/elastic/styles/widgets/lists.less

@@ -170,21 +170,16 @@ ul.listing {
             padding: 0;
             top: 0;
             right: 0;
-            margin-right: .3rem;
             height: @listing-line-height;
             vertical-align: middle;
 
-            html.touch & {
-                margin-right: 0;
-            }
-
             .custom-control-label {
                 &:before,
                 &:after {
                     margin-top: .4rem;
 
                     html.touch & {
-                        margin-top: .8rem;
+                        margin-top: .75rem;
                     }
                 }
             }