diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less index 4c6dcb166..10191a28a 100644 --- a/skins/elastic/styles/styles.less +++ b/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 ***/ diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less index f02453d4f..5089fbd04 100644 --- a/skins/elastic/styles/widgets/forms.less +++ b/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; diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less index 5d0f3c039..bf0cca1a8 100644 --- a/skins/elastic/styles/widgets/lists.less +++ b/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 { diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html index 1f8d5ed69..cc3e172f4 100644 --- a/skins/elastic/templates/addressbook.html +++ b/skins/elastic/templates/addressbook.html @@ -110,7 +110,7 @@

-
-
- +
+
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index 35184eafc..b3c97531e 100644 --- a/skins/elastic/ui.js +++ b/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) {