1 files changed, 183 insertions, 0 deletions
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 4e7b1fbb..13f90685 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -162,3 +162,186 @@
   }
 }
 
+@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;
+  }
+}
+
+@mixin logo {
+  @keyframes hideshow {
+    0% { fill: lighten($logo_color, 30); }
+    25% { opacity: 1; }
+    100% { opacity: 0; }
+  } 
+
+  .logo-part-animation-off {
+      animation: none;
+  }
+
+  .logo-part-animation-on {
+      animation: hideshow 0.6s ease infinite;
+      opacity: 1;
+
+      &:nth-child(2) {
+        opacity: 0;
+        animation-delay: 0.1s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.2s;
+      }
+      &:nth-child(4) {
+        animation-delay: 0.3s;
+      }
+      &:nth-child(5) {
+        animation-delay: 0.4s;
+      }
+      &:nth-child(6) {
+        animation-delay: 0.5s;
+      }
+  }
+}
+
+@include tt-hint;
+@include logo;