diff options
| -rw-r--r-- | web-ui/app/scss/_read.scss | 291 |
1 files changed, 154 insertions, 137 deletions
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss index 236a7c7c..77ff958d 100644 --- a/web-ui/app/scss/_read.scss +++ b/web-ui/app/scss/_read.scss @@ -1,171 +1,188 @@ /* MAIL PANE */ -@mixin read-msg { - #mail-view { +#mail-view { .msg-header { - display: flex; - flex-wrap: nowrap; - - top: 0; - z-index: 10; - background-color: white; - font-size: 0.9em; - padding: 0px 0; - margin: 1px 0 0 0; - .recipients { - padding-bottom: 5px; - line-height: 1.5em; - i { - padding: 0 5px; + display: flex; + flex-wrap: nowrap; + top: 0; + z-index: 10; + background-color: white; + font-size: 0.9em; + padding: 0px 0; + margin: 1px 0 0 0; + + .recipients { + padding-bottom: 5px; + line-height: 1.5em; + + i { + padding: 0 5px; + } + + .from { + font-weight: 700; + } } - .from { - font-weight: 700; + + .close-mail-button { + position: relative; + float: none; + flex-shrink: 0; + display: inline-block; + vertical-align: top; + height: 27px; + margin-right: 3px; + } + + .full-view-header { + display: inline-block; + padding-top: 5px; + width: 95%; + flex-shrink: 1; + } + + .headline-area { + clear: both; + border-top: 1px solid $lighter_gray; } - } - .close-mail-button { - position: relative; - float: none; - flex-shrink: 0; - display: inline-block; - vertical-align: top; - height: 27px; - margin-right: 3px; - } - - .full-view-header { - display:inline-block; - padding-top: 5px; - width:95%; - flex-shrink:1; - } - .headline-area { - clear: both; - border-top: 1px solid $lighter_gray; - } } + h3 { - margin-bottom: 0; + margin-bottom: 0; } + .tagsArea { - clear: both; - margin: 0 0 10px; - @include tags; - ul li { - &.tag:hover { - &:before { - content: "click to remove"; - text-transform: lowercase; - font-size: 0.5rem; - @include tooltip(18px, 8px); - } + clear: both; + margin: 0 0 10px; + + @include tags; + + ul li { + &.tag:hover { + &:before { + content: "click to remove"; + text-transform: lowercase; + font-size: 0.5rem; + + @include tooltip(18px, 8px); + } + } } - } } - } } .bodyArea { - padding: 10px 30px 0 30px; - box-sizing: border-box; - - iframe { - box-sizing: inherit; - border: none; - width: 100%; - } + padding: 10px 30px 0 30px; + box-sizing: border-box; + + iframe { + box-sizing: inherit; + border: none; + width: 100%; + } } .attachmentsAreaWrap { - padding: 0 30px; + padding: 0 30px; - .attachmentsArea { - border-top: 1px solid $lighter_gray; - padding: 10px 0 0; + .attachmentsArea { + border-top: 1px solid $lighter_gray; + padding: 10px 0 0; - li { - position: relative; - display: block; - border: 1px solid $border_light_grey; - border-radius: 2px; - background-color: $background_light_grey; - margin-bottom: 8px; + li { + position: relative; + display: block; + border: 1px solid $border_light_grey; + border-radius: 2px; + background-color: $background_light_grey; + margin-bottom: 8px; - a { - color: $attachment_text; - display: block; - text-decoration: none; - line-height: inherit; - padding: 4px 5px; + a { + color: $attachment_text; + display: block; + text-decoration: none; + line-height: inherit; + padding: 4px 5px; - &:hover, &:focus { - i.download-icon { - color: lighten($attachment_icon, 15); - } + &:hover, &:focus { + i.download-icon { + color: lighten($attachment_icon, 15); + } - color: $attachment_icon; - outline: none; - } + color: $attachment_icon; + outline: none; + } - i.download-icon { - position: absolute; - color: $attachment_icon; - right: 0; - padding: 7px 10px; - } + i.download-icon { + position: absolute; + color: $attachment_icon; + right: 0; + padding: 7px 10px; + } - i.remove-icon { - float: right; - padding-right: 5px; - padding-top: 7px; - color: $medium_light_grey; + i.remove-icon { + float: right; + padding-right: 5px; + padding-top: 7px; + color: $medium_light_grey; + } + } } - } } - } } #mail-actions { - text-align: right; - padding: 10px 0; - button { - display: inline-block; - display: inline; - line-height: 2em; - border: 1px solid $lighter_gray; - &#reply-button-top { - @include border-right-radius(0); - padding: 0 20px; - } - &#view-more-actions { - @include border-left-radius(0); - padding: 0 5px; - margin-left: -4px; - } - &:hover { - @include btn-transition; - background: darken($contrast, 5%) + text-align: right; + padding: 10px 0; + + button { + display: inline-block; + display: inline; + line-height: 2em; + border: 1px solid $lighter_gray; + + &#reply-button-top { + @include border-right-radius(0); + + padding: 0 20px; + } + + &#view-more-actions { + @include border-left-radius(0); + + padding: 0 5px; + margin-left: -4px; + } + + &:hover { + @include btn-transition; + + background: darken($contrast, 5%); + } } - } - ul#more-actions { - padding: 5px 0; - width: 170px; - text-align: left; - display: block; - position: absolute; - background: $white; - border: 1px solid $lighter_gray; - right: 0; - top: 40px; - z-index: 10; - li { - span, a { - padding: 5px 10px; + + ul#more-actions { + padding: 5px 0; + width: 170px; + text-align: left; display: block; - &:hover { - cursor: pointer; - background: $contrast; + position: absolute; + background: $white; + border: 1px solid $lighter_gray; + right: 0; + top: 40px; + z-index: 10; + + li { + span, a { + padding: 5px 10px; + display: block; + + &:hover { + cursor: pointer; + background: $contrast; + } + } } - } } - } } |