Issue #620: Inline single-use mixin

2 files changed, 151 insertions, 153 deletions

diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 4583c55d..4e7b1fbb 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -162,151 +162,3 @@
   }
 }
 
-
-@mixin 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;
-  }
-}
-
-@include tt-hint;
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;
+    }
+}