diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less index 3264c4f42..400c8b5a2 100644 --- a/skins/elastic/styles/styles.less +++ b/skins/elastic/styles/styles.less @@ -189,6 +189,24 @@ table.propform { } } +/* Some common icons for "iconized inputs" */ +.input-group-addon.icon { + + &:before { + &:extend(.font-icon-class); + margin: 0; + line-height: 1; + } + &.user:before { + content: @fa-var-user; + } + &.pass:before { + content: @fa-var-lock; + } + &.host:before { + content: @fa-var-home; + } +} /*** Widgets ***/ @@ -216,7 +234,7 @@ table.propform { #login-form { margin: auto; width: 95%; - max-width: 320px; + max-width: 280px; } diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index dfd6a94d3..47c41caa0 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -272,6 +272,22 @@ function rcube_elastic_ui() row.addClass(row_classes.join(' ')); }); + + // Make logon form prettier + if (rcmail.env.task == 'login') { + $('#login-form table tr').each(function() { + var input = $('input,select', this), + label = $('label', this), + icon = $('').attr('class', 'input-group-addon icon ' + input.attr('name').replace('_', '')); + + $(this).addClass('form-group row'); + label.parent().css('display', 'none'); + input.addClass('form-control') + .attr('placeholder', label.text()) + .before(icon) + .parent().addClass('input-group'); + }); + } }; /**