summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web-ui/app/scss/_read.scss291
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;
+ }
+ }
}
- }
}
- }
}