Merge branch 'master' of github.com:roundcube/elastic

skins/elastic/styles/colors.less

@@ -128,6 +128,8 @@
 @color-checkbox-focus:              darken(@color-checkbox, 30%);
 @color-checkbox-checked-focus:      darken(@color-checkbox-checked, 30%);
 
+@color-form-hint:                   #888;
+
 @color-image-upload-background:     #f6f6f6;
 
 @color-blockquote-background:       #f6f6f6;

skins/elastic/styles/widgets/common.less

@@ -283,6 +283,24 @@ table.table {
         }
     }
 
+    .buttons-cell {
+        width: 1%;
+        white-space: nowrap;
+        text-align: center;
+
+        a.button:before {
+            line-height: 1;
+            float: none;
+            display: inline-block;
+        }
+
+        @media screen and (min-width: @screen-width-xs) {
+            a.button .inner {
+                display: inline;
+            }
+        }
+    }
+
     label {
         margin: 0;
     }

skins/elastic/styles/widgets/forms.less

@@ -210,6 +210,22 @@ input.smart-upload {
             margin-top: .5rem;
         }
     }
+
+    .form-text {
+        font-size: 90%;
+        color: @color-form-hint;
+    }
+
+    /* Some dialogs may use simple one-row forms like this */
+    &.row.form-group {
+        margin-left: 0;
+        margin-right: 0;
+
+        label, div {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
 }
 
 @media screen and (max-width: 576px) {
@@ -442,6 +458,9 @@ html.layout-phone {
     &.filter:before {
         content: @fa-var-filter;
     }
+    &.key:before {
+        content: @fa-var-key;
+    }
 
     .inner {
         display: none;

skins/elastic/ui.js

@@ -650,8 +650,13 @@ function rcube_elastic_ui()
             $('#login-form table tr').each(function() {
                 var input = $('input,select', this),
                     label = $('label', this),
+                    icon_name = input.data('icon'),
                     icon = $('<i>').attr('class', 'input-group-addon icon ' + input.attr('name').replace('_', ''));
 
+                if (icon_name) {
+                    icon.addClass(icon_name);
+                }
+
                 $(this).addClass('form-group row');
                 label.parent().css('display', 'none');
                 input.addClass('form-control')