Style search menus

skins/elastic/styles/styles.less

@@ -137,6 +137,11 @@ a:hover {
     animation: fa-spin 2s infinite linear;
 }
 
+/*** Common sizing variables ***/
+
+@listing-line-height:           2.5rem;
+@listing-touch-line-height:     3.6rem;
+
 
 /*** Common UI elements ***/
 

skins/elastic/styles/widgets/forms.less

@@ -159,15 +159,41 @@ td.editfield { width: 99%;  /* TODO */ }
 /*** Forms in popups ***/
 
 .popupmenu.form {
-    margin: .5rem;
+    &.nolist {
+        padding: 0 .5rem;
+    }
 
     ul {
         list-style-type: none;
         padding: 0;
+        margin: 0;
+    }
+
+    li:not(.separator) {
+        padding: 0 1rem;
+
+        label {
+            margin: 0;
+            line-height: @listing-line-height;
+
+            input {
+                margin-right: .5rem;
+            }
+        }
+    }
+
+    input {
+        vertical-align: middle;
+        height: @listing-line-height !important;
+    }
+
+    select {
+        margin: .5rem 0;
     }
 
     .buttons {
         text-align: center;
+        padding: .5rem;
     }
 }
 
@@ -333,6 +359,7 @@ td.editfield { width: 99%;  /* TODO */ }
 
 input.icon-checkbox {
     opacity: 0;
+    margin-left: -1.5em;
 
     & + label {
         margin: 0;

skins/elastic/styles/widgets/lists.less

@@ -11,9 +11,6 @@
 
 /*** List and treelist widgets ***/
 
-@listing-line-height:           2.5rem;
-@listing-touch-line-height:     3.6rem;
-
 .listing {
     tbody td,
     li {

skins/elastic/templates/addressbook.html

@@ -110,7 +110,7 @@
 
 <div id="search-menu" class="popupmenu form" data-editable="true" data-popup-init="searchmenu">
 	<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-search-menu">
+	<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-search-menu">
 		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="name" id="s_mod_name" /> <span><roundcube:label name="name" /></span></label></li>
 		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="firstname" id="s_mod_firstname" /> <span><roundcube:label name="firstname" /></span></label></li>
 		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="surname" id="s_mod_surname" /> <span><roundcube:label name="surname" /></span></label></li>

skins/elastic/templates/folders.html

@@ -50,8 +50,8 @@
 	<roundcube:object name="folderframe" id="preferences-frame" src="/watermark.html" />
 </div>
 
-<div id="search-filter" class="popupmenu" data-editable="true">
-	<roundcube:object name="folderfilter" id="folderlist-filter" class="listing" noheader="true" />
+<div id="search-filter" class="popupmenu form nolist toolbarmenu" data-editable="true">
+	<roundcube:object name="folderfilter" id="folderlist-filter" noheader="true" />
 </div>
 
 <roundcube:include file="includes/footer.html" />

skins/elastic/ui.js

@@ -269,7 +269,10 @@ function rcube_elastic_ui()
         $('[data-list]').each(function() {
             $('input[type="checkbox"]', this).each(function() { pretty_checkbox(this); });
         });
-        $('table.propform input[type=checkbox], .form-check > input').each(function() { pretty_checkbox(this); });
+
+        // The same for some other checkboxes
+        $('table.propform input[type=checkbox], .form-check > input, .popupmenu.form input[type=checkbox]')
+            .each(function() { pretty_checkbox(this); });
 
         // Assign .formcontainer class to the iframe body, when it
         // contains .formcontent and .formbuttons.
@@ -500,6 +503,8 @@ function rcube_elastic_ui()
             $('a.nav-link:first', nav).click();
         });
 
+        $('.toolbarmenu select').addClass('form-control');
+
         // Make message-objects alerts pretty (the same as UI alerts)
         $('#message-objects').children().each(function() {
             alert_style(this, $(this).attr('class').split(/\s/)[0]);
@@ -1344,7 +1349,7 @@ function rcube_elastic_ui()
 
                 if (!is_mobile()) {
                     // Set popup height so it is less than the window height
-                    popup.css('max-height', Math.min(500, $(window).height() - 30));
+                    popup.css('max-height', Math.min(510, $(window).height() - 30));
                 }
             })
             .on('shown.bs.popover', function(event, el) {