diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less index ed22b2436..b95ecea1c 100644 --- a/skins/elastic/styles/widgets/forms.less +++ b/skins/elastic/styles/widgets/forms.less @@ -651,11 +651,12 @@ html.touch .popupmenu.form { /*** Files upload widget with list of files, upload form and drop area ***/ .file-upload { - // TODO + padding: 1rem 1rem 12rem; + margin: 0 1rem .25rem 1rem; + border-radius: .5rem; + border: .2rem dashed #ddd; - padding: 1em 1em 12em; - margin: 1em; - background-color: #f4f4f4; + // TODO background image .upload-form { text-align: center; @@ -664,22 +665,43 @@ html.touch .popupmenu.form { .hint { margin-bottom: .5rem; + color: @color-form-hint; } .attachmentslist { li { + position: relative; display: flex; + padding-right: 1.8em; a.filename { flex-grow: 1; } + + a.delete, + a.cancelupload { + position: absolute; + right: 0; + + &:before { + margin: 0; + } + } + + .inner { + display: none; + } } } &.droptarget { - &.hover { - } &.active { + border-color: darken(@color-toolbar-button-background-hover, 20%); + } + + &.hover { + border-color: darken(@color-toolbar-button-background-hover, 20%); + background-color: @color-toolbar-button-background-hover; } } } diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less index 4657b59c7..4e90b6b39 100644 --- a/skins/elastic/styles/widgets/lists.less +++ b/skins/elastic/styles/widgets/lists.less @@ -749,7 +749,6 @@ html.touch { &:before { &:extend(.font-icon-class); content: @fa-var-file-o; - line-height: @attachmentslist-item-height; height: @attachmentslist-item-height; } @@ -844,32 +843,28 @@ html.touch { color: @color-list-secondary; } - /* assume the filename is always first */ - a:first-child { - .overflow-ellipsis; + a { + text-decoration: none; + line-height: @attachmentslist-item-height; + height: @attachmentslist-item-height; + + // assume the filename is always first + &:first-child { + .overflow-ellipsis; + } } + a.cancelupload:before, a.delete:before { &:extend(.font-icon-class); content: @fa-var-trash; - text-decoration: none; line-height: @attachmentslist-item-height; height: @attachmentslist-item-height; } - &.uploading { - &:before { - .animated-icon-class; - content: @fa-var-circle-o-notch; - line-height: @attachmentslist-item-height; - height: @attachmentslist-item-height; - } - - a.cancelupload:before { - float: right; - &:extend(.font-icon-class); - content: @fa-var-remove; - } + &.uploading:before { + .animated-icon-class; + content: @fa-var-circle-o-notch; } } }