MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added linear progress component. Fixed a z-index issues with the circular progress. Added better border support for editable labels and chip lists.

Browse Source
This commit is contained in:
Matt Mo
2020-12-01 11:49:01 -08:00
parent 0254076862
commit d24c50cacb
4 changed files with 118 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
chip-list.js
View File

@@ -15,11 +15,15 @@ class ChipList extends IgniteElement {
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
border: solid 0.15rem transparent;
border: solid 0.13rem #ced4da;
border-radius: 0.3rem;
padding: 0.4rem;
}
mt-chip-list.no-border {
border-color: transparent;
}
mt-chip-list:focus {
outline: none;
}
@@ -29,13 +33,14 @@ class ChipList extends IgniteElement {
}
mt-chip-list.editing {
border: solid 0.15rem rgba(0,0,0,0.1);
border: solid 0.13rem rgba(0,0,0,0.1);
border-radius: 0.3rem;
}
mt-chip-list.placeholder {
border: solid 0.13rem #ced4da;
border-radius: 0.3rem;
color: rgba(0,0,0,0.6);
}
mt-chip-list > .input-container {
@@ -79,13 +84,15 @@ class ChipList extends IgniteElement {
chipBackground: null,
chipColor: null,
changed: false,
border: false
};
}
render() {
return this.template
.style("position", "relative")
.class(this.editing, value => { return value ? "editing" : null })
.class(this.border, value => value ? null : "no-border")
.class(this.editing, value => value ? "editing" : null)
.attribute("tabindex", "0")
.onFocus((e) => this.onFocus())
.class([this.editing, this.items], (editing, items) => {