diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less index c6d5db901..1a9d2b126 100644 --- a/skins/elastic/styles/colors.less +++ b/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; diff --git a/skins/elastic/styles/widgets/common.less b/skins/elastic/styles/widgets/common.less index 2929a185d..a1d0230a9 100644 --- a/skins/elastic/styles/widgets/common.less +++ b/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; } diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less index eb19ec1e1..74d5c3846 100644 --- a/skins/elastic/styles/widgets/forms.less +++ b/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; diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index be32c8b61..57ca2f638 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -648,8 +648,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 = $('').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')