mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-03 13:04:44 +00:00
improve chips theme
This commit is contained in:
parent
2c821cab0f
commit
ff9dbb6c18
3 changed files with 9 additions and 28 deletions
|
|
@ -2,7 +2,7 @@
|
|||
&.md-chip {
|
||||
background-color: #{'BACKGROUND-CONTRAST-0.12'};
|
||||
|
||||
&:not(.md-disabled) {
|
||||
&.md-deletable {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
|
@ -22,22 +22,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-chips.md-static {
|
||||
.md-chip:not(.md-disabled) {
|
||||
&:active {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #{'BACKGROUND-CONTRAST-0.12'};
|
||||
color: #{'BACKGROUND-CONTRAST-0.87'};
|
||||
|
||||
.md-delete {
|
||||
color: #{'BACKGROUND-CONTRAST-0.87'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
:id="inputId"
|
||||
:name="mdInputName"
|
||||
:disabled="disabled"
|
||||
@keyup.native.delete="deleteLastChip"
|
||||
@keyup.native.enter="selectChip"
|
||||
@keyup.native.186="selectChip"
|
||||
@keydown.native.delete="deleteLastChip"
|
||||
@keydown.native.enter="selectChip"
|
||||
@keydown.native.186="selectChip"
|
||||
tabindex="0"
|
||||
ref="input">
|
||||
</md-input>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,10 @@
|
|||
},
|
||||
methods: {
|
||||
removeElement() {
|
||||
this.rootElement.removeChild(this.snackbarElement);
|
||||
if (this.rootElement.contains(this.snackbarElement)) {
|
||||
this.snackbarElement.querySelector('.md-ripple').classList.remove('md-active');
|
||||
this.rootElement.removeChild(this.snackbarElement);
|
||||
}
|
||||
},
|
||||
open() {
|
||||
if (manager.current) {
|
||||
|
|
@ -86,11 +89,7 @@
|
|||
if (this.$refs.container) {
|
||||
const removeElement = () => {
|
||||
this.$refs.container.removeEventListener(transitionEndEventName, removeElement);
|
||||
|
||||
if (this.rootElement.contains(this.snackbarElement)) {
|
||||
this.snackbarElement.querySelector('.md-ripple').classList.remove('md-active');
|
||||
this.removeElement();
|
||||
}
|
||||
this.removeElement();
|
||||
};
|
||||
|
||||
manager.current = null;
|
||||
|
|
|
|||
Loading…
Reference in a new issue