Issue #620: Inline single-use mixin

1 files changed, 151 insertions, 5 deletions

diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss
index 6b172433..2ed305c8 100644
--- a/web-ui/app/scss/views/_compose-view.scss
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -8,9 +8,6 @@
         position: relative;
     }
 
-    margin: 5px 0 50px 30px;
-    padding: 0;
-
     .input-container {
         padding: 1px;
     }
@@ -169,6 +166,155 @@
         }
     }
 
-    @include recipients;
-}
+    .recipients-area {
+        -webkit-appearance: none;
+        background-color: white;
+        font-family: inherit;
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 0.898em;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        position: relative;
+
+        .compose-column-label {
+            width: 5%;
+            display: inline-block;
+        }
+
+        .compose-column-recipients {
+            width: 95%;
+            display: inline-block;
+        }
+
+        .recipients-label {
+            width: 100%;
+            height: 100%;
+        }
+
+        .recipients-navigation-handler {
+            z-index: -1;
+            position: absolute;
+            top: -200px;
+        }
+
+        .twitter-typeahead {
+            flex: 1 1 50px;
+        }
 
+        .invalid-format {
+            border-bottom: 1px dotted $error;
+        }
+
+        input[type=text] {
+            vertical-align: top;
+            height: 35px;
+            margin-left: 1px;
+            font-size: 0.9em;
+            width: 100%;
+        }
+
+        .fixed-recipient {
+            display: inline-block;
+            margin-right: -3px;
+            flex: none;
+            position: relative;
+
+            .recipient-value {
+                &.selected {
+                    border: 1px solid $medium_dark_grey;
+                }
+
+                &:before {
+                    font-family: FontAwesome;
+                    padding-right: 4px;
+                }
+
+                &.encrypted {
+                    border-bottom-color: $will_be_encrypted;
+
+                    &:before {
+                        color: $will_be_encrypted;
+                        content: "\f023 ";
+                    }
+                }
+
+                &.not-encrypted {
+                    border-bottom-color: $wont_be_encrypted;
+
+                    &:before {
+                        color: $wont_be_encrypted;
+                        content: "\f13e ";
+                    }
+                }
+
+                &.deleting span {
+                    text-decoration: line-through;
+                }
+
+                & span {
+                    margin: 0px;
+                    padding: 0px;
+                    cursor: pointer;
+                }
+
+                margin: 3px;
+                padding: 5px;
+                background-color: $background_light_grey;
+                border: 1px solid $border_light_grey;
+                border-radius: 2px;
+            }
+
+            .recipient-del {
+                position: relative;
+                color: $recipients_font_color;
+
+                &:hover, &:focus {
+                    color: $recipients_font_color;
+                }
+
+                &:before {
+                    margin-left: 0.4em;
+                    font-weight: bold;
+                    content: "x";
+                }
+
+                &.deleteTooltip:hover:after {
+                    position: absolute;
+                    content: "Click to remove";
+                    font-size: 0.5rem;
+
+                    @include tooltip(25px, 0px);
+                }
+            }
+        }
+
+        input.recipients-input:focus {
+            background-color: $dark_white !important;
+            border-color: $medium_light_grey;
+            outline: none;
+            width: 270px;
+        }
+    }
+
+    .collapse {
+        display: block;
+        position: absolute;
+        right: 10px;
+        padding-right: 15px;
+        padding-left: 15px;
+        font-family: 'FontAwesome';
+        font-weight: bolder;
+        font-size: larger;
+        cursor: pointer;
+    }
+
+    .collapse + input, .collapse + input + * {
+        display: none;
+    }
+
+    .collapse + input:checked + * {
+        display: block;
+    }
+}