From c70a91d78524f58d9eae5efe1988215f656876f7 Mon Sep 17 00:00:00 2001 From: Felix Hammerl Date: Tue, 15 Mar 2016 16:47:26 +0100 Subject: Issue #620: Float composer right of close button --- web-ui/app/scss/views/_compose-view.scss | 178 +++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 web-ui/app/scss/views/_compose-view.scss (limited to 'web-ui/app/scss/views/_compose-view.scss') diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss new file mode 100644 index 00000000..5d6fe0b2 --- /dev/null +++ b/web-ui/app/scss/views/_compose-view.scss @@ -0,0 +1,178 @@ +.compose-view { + overflow: auto; +} + +// COMPOSE PANE +#compose-box, #draft-box, #reply-box, #feedback-box { + div.floatlabel { + position: relative; + } + + margin: 5px 0 50px 30px; + padding: 0; + + .input-container { + padding: 1px; + } + + label, span { + color: $recipients_font_color; + padding: 0.5rem; + cursor: text; + display: inline-block; + } + + label { + padding: 13px 10px; + } + + span { + padding: 3px; + + &.attachment-size { + color: $attachment_size; + cursor: pointer; + } + } + + label.floatlabel { + padding: 0.4rem !important; + position: absolute; + font-size: 0.6rem; + transition: all 0.1s linear; + opacity: 0; + font-weight: bold; + } + + label.showfloatlabel { + color: $light_blue !important; + top: -0.3rem; + opacity: 1; + } + + input, textarea { + margin: 0; + border: none; + transition: all 0.1s linear; + } + + input.showfloatlabel, textarea.showfloatlabel { + padding-top: 1rem !important; + } + + input#subject, #feedback-subject { + font-size: 1.6875rem; + line-height: 1.4; + border-top: 1px solid $lighter_gray; + } + + #feedback-subject { + color: $dark_grey; + } + + textarea { + border-bottom: 2px solid $lighter_gray; + min-height: 400px; + font-family: inherit; + font-weight: normal; + font-size: 1rem; + line-height: 1.6; + text-rendering: optimizeLegibility; + } + + &.reply-box, &.forward-box { + margin: 0; + + h4 { + font-size: 0.9em; + font-style: italic; + color: $medium_grey; + margin: 2px 0; + clear: both; + cursor: pointer; + + &:hover { + background: $contrast; + } + } + + textarea { + min-height: 200px; + margin: 10px 0; + } + + p { + padding: 5px; + margin: 10px 0; + font-style: italic; + cursor: pointer; + + &:hover { + background: $contrast; + } + } + } + + button.close-mail-button { + margin: 1px; + } + + .buttons-group { + margin-top: 0px; + } + + #attachment-upload-item { + display: none; + + .progress { + width: 0%; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + min-height: 100%; + + .progress-bar { + height: 100%; + background-color: rgba($light_blue, 0.3); + } + } + } + + .attachmentsAreaWrap { + padding: 0; + + .attachmentsArea { + padding: 0; + border-top: 0; + + #upload-error { + color: $error; + margin-bottom: 20px; + + .close-icon { + font-size: 1.0rem; + cursor: pointer; + } + + span, a { + color: $error; + font-size: 0.9rem; + } + + a { + text-decoration: underline; + padding: 5px; + } + } + } + } + + @include recipients; +} + +#reply-box { + @include recipients; +} + -- cgit v1.2.3