Styled ngTags but no hasFocus state

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -13,7 +13,7 @@
         <label class="PseudoField-label">
           <var:string label:value="From"/>
         </label>
-        <div class="pseudoInput-text">
+        <div class="PseudoField-inputLike">
           <select name="from"
                   data-ng-model="message.editable.from"
                   data-ng-options="identity for identity in identities"><!-- from --></select>
@@ -25,7 +25,7 @@
         <label class="PseudoField-label">
           <var:string label:value="To"/>
         </label>
-        <div class="pseudoInput-text">
+        <div class="PseudoField-inputLike">
           <tags-input type="text" name="to"
                       ng-model="message.editable.to"
                       label:placeholder="Add a recipient">
@@ -37,7 +37,7 @@
         <label class="PseudoField-label">
           <var:string label:value="Cc"/>
         </label>
-        <div class="pseudoInput-text">
+        <div class="PseudoField-inputLike">
           <tags-input type="text" name="cc"
                       ng-model="message.editable.cc"
                       label:placeholder="Add a recipient">

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -8,8 +8,8 @@
     title = "title"
     const:userDefaultsKeys = "SOGoMailMessageCheck,SOGoRefreshViewCheck,SOGoMailSortByThreads,SOGoMailListViewColumnsOrder,SOGoMailDisplayRemoteInlineImages,SOGoMailComposeMessageType,SOGoMailReplyPlacement"
     const:userSettingsKeys = "Mail"
-    const:jsFiles = "Common/resource.js, Common/user-model.js, Common/acl-model.js, Contacts/card-model.js, Contacts/addressbook-model.js, Mailer/message-model.js, Mailer/mailbox-model.js, Mailer/account-model.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/ng-tags-input.js, vendor/angular-file-upload.js"
-    const:cssFiles = "ng-tags-input.css">
+    const:jsFiles = "Common/resource.js, Common/user-model.js, Common/acl-model.js, Contacts/card-model.js, Contacts/addressbook-model.js, Mailer/message-model.js, Mailer/mailbox-model.js, Mailer/account-model.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/ng-tags-input.js, vendor/angular-file-upload.js">
+    <!--const:cssFiles = "ng-tags-input.css">-->
   <script type = "text/javascript">
     var mailAccounts =<var:string value = "mailAccounts" const:escapeHTML = "NO" />;
     var userNames =<var:string value = "userNames" const:escapeHTML = "NO" />;

UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss

@@ -0,0 +1,119 @@
+tags-input {
+  display: block;
+}
+tags-input *, tags-input *:before, tags-input *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+tags-input .host {
+  @extend .PseudoField-inputLike;
+  position: relative;
+}
+tags-input .host:active {
+  outline: none;
+}
+
+tags-input .tags {
+  word-wrap: break-word;
+  cursor: text;
+
+}
+tags-input .tags.focused {
+
+}
+tags-input .tags .tag-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+tags-input .tags .tag-item {
+  margin: 2px;
+  padding: 0 5px;
+  display: inline-block;
+  float: left;
+  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  height: 26px;
+  line-height: 25px;
+  border: 1px solid #acacac;
+  border-radius: 3px;
+  background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
+  background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
+}
+tags-input .tags .tag-item.selected {
+  background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+  background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+}
+tags-input .tags .tag-item .remove-button {
+  margin: 0 0 0 5px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  vertical-align: middle;
+  font: bold 16px Arial, sans-serif;
+  color: #585858;
+}
+tags-input .tags .tag-item .remove-button:active {
+  color: red;
+}
+tags-input .tags .input {
+  border: 0;
+  outline: none;
+  font: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+tags-input .tags .input.invalid-tag {
+  color: red;
+}
+tags-input .tags .input::-ms-clear {
+  display: none;
+}
+tags-input.ng-invalid .tags {
+  -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+  -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+  box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+}
+
+tags-input .autocomplete {
+  margin-top: 5px;
+  position: absolute;
+  padding: 5px 0;
+  z-index: 999;
+  width: 100%;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+tags-input .autocomplete .suggestion-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+tags-input .autocomplete .suggestion-item {
+  padding: 5px 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: black;
+  background-color: white;
+}
+tags-input .autocomplete .suggestion-item.selected {
+  color: white;
+  background-color: #0097cf;
+}
+tags-input .autocomplete .suggestion-item.selected em {
+  color: white;
+  background-color: #0097cf;
+}
+tags-input .autocomplete .suggestion-item em {
+  font: normal bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: black;
+  background-color: white;
+}

UI/WebServerResources/scss/styles.scss

@@ -88,6 +88,10 @@
 // todo : configure manual and glob imports
 @import 'views/view';
 
+// Ng-tags styles for re-skinning
+// ------------------------------------------------------------------------------
+@import 'components/ngTags/ng-tags-input.scss';
+
 // core styles - need to be after components till settings are correctly implemented
 // ------------------------------------------------------------------------------
 @import 'core/base_styles/base_style';