Adjusted styling of chip list and editable label. Cleaned up CSS and simplified a few things.

editable-label.js

@@ -9,26 +9,25 @@ class EditableLabel extends IgniteElement {
 
     get styles() {
         return `
+            mt-editable-label.editing {
+                border: solid 0.15rem rgba(0,0,0,0.1);
+            }
+
             mt-editable-label {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-            }
-
-            mt-editable-label>div.focus {
-                border: solid 0.13rem #ced4da;
-                padding: 0.2rem;
                 border-radius: 0.3rem;
+                border: solid 0.15rem transparent;
+                padding: 0.4rem;
             }
 
             mt-editable-label:hover {
                 cursor: pointer;
             }
 
-            mt-editable-label>div {
-                outline: unset;
-                border: solid 0.13rem transparent;
-                padding: 0.2rem;
+            mt-editable-label>div:focus {
+                outline: none;
             }
 
             mt-editable-label>div:empty:before {
@@ -70,6 +69,7 @@ class EditableLabel extends IgniteElement {
     render() {
         return this.template
             .attribute("tabindex", "0")
+            .class(this.editing, value => value ? "editing" : null)
             .onFocus(e => this.onFocus())
             .child(
                 new div()