From a9d308004e797510513a7dce00a016bd7679cb3f Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 4 Oct 2017 10:30:09 +0100
Subject: [PATCH] Factor out EditableItemList component from AliasSettings

---
 src/skins/vector/css/_components.scss         |  1 +
 .../views/elements/_EditableItemList.scss     | 62 +++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/_EditableItemList.scss

diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 9921aa7e06..7b7e73e8d8 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -29,6 +29,7 @@
 @import "./matrix-react-sdk/views/elements/_AddressTile.scss";
 @import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss";
 @import "./matrix-react-sdk/views/elements/_Dropdown.scss";
+@import "./matrix-react-sdk/views/elements/_EditableItemList.scss";
 @import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
 @import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
 @import "./matrix-react-sdk/views/elements/_RichText.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_EditableItemList.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_EditableItemList.scss
new file mode 100644
index 0000000000..9fbb39aa17
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_EditableItemList.scss
@@ -0,0 +1,62 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EditableItemList {
+    margin-top: 12px;
+    margin-bottom: 0px;
+}
+
+.mx_EditableItem {
+    display: flex;
+    margin-left: 56px;
+}
+
+.mx_EditableItem .mx_EditableItem_editable {
+    border: 0px;
+    border-bottom: 1px solid $strong-input-border-color;
+    padding: 0px;
+    min-width: 240px;
+    max-width: 400px;
+    margin-bottom: 16px;
+}
+
+.mx_EditableItem .mx_EditableItem_editable:focus {
+    border-bottom: 1px solid $accent-color;
+    outline: none;
+    box-shadow: none;
+}
+
+.mx_EditableItem .mx_EditableItem_editablePlaceholder {
+    color: $settings-grey-fg-color;
+}
+
+.mx_EditableItem .mx_EditableItem_addButton,
+.mx_EditableItem .mx_EditableItem_removeButton {
+    padding-left: 0.5em;
+    position: relative;
+    cursor: pointer;
+
+    visibility: hidden;
+}
+
+.mx_EditableItem:hover .mx_EditableItem_addButton,
+.mx_EditableItem:hover .mx_EditableItem_removeButton {
+    visibility: visible;
+}
+
+.mx_EditableItemList_label {
+    margin-bottom: 8px;
+}