54 lines
913 B
Vue
54 lines
913 B
Vue
|
<template>
|
|||
|
|
<div class="qsb flex flex-row flex-cross-center flex-center flex-nogrow"
|
|||
|
|
:class="{
|
|||
|
|
'id': selector.startsWith('#'),
|
|||
|
|
'class': selector.startsWith('.'),
|
|||
|
|
}">
|
|||
|
|
<div class="flex mt2px">{{selector}}</div> <span class="flex closeButton" @click="remove">×</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
selector: String,
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
remove() {
|
|||
|
|
this.$emit('remove');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.mt2px {
|
|||
|
|
margin-top: 7px;
|
|||
|
|
}
|
|||
|
|
.id {
|
|||
|
|
border: 1px solid #d00;
|
|||
|
|
background-color: rgba(216, 94, 24, 0.25)
|
|||
|
|
}
|
|||
|
|
.class {
|
|||
|
|
border: 1px solid #33d;
|
|||
|
|
background-color: rgba(69, 69, 255, 0.25)
|
|||
|
|
}
|
|||
|
|
.closeButton {
|
|||
|
|
margin-top: 2px;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
margin-right: 4px;
|
|||
|
|
font-size: 1.5em;
|
|||
|
|
color: #e00;
|
|||
|
|
}
|
|||
|
|
.closeButton:hover {
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: #fa6;
|
|||
|
|
}
|
|||
|
|
.qsb {
|
|||
|
|
cursor:default;
|
|||
|
|
margin-left: 3px;
|
|||
|
|
margin-right: 3px;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
</style>
|