mirror of
https://github.com/pomerium/pomerium.git
synced 2025-05-04 12:56:02 +02:00
57 lines
890 B
Vue
57 lines
890 B
Vue
<script>
|
|
export default {
|
|
functional: true,
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: "tip"
|
|
},
|
|
text: String,
|
|
vertical: {
|
|
type: String,
|
|
default: "top"
|
|
}
|
|
},
|
|
render(h, { props, slots }) {
|
|
return h(
|
|
"span",
|
|
{
|
|
class: ["badge", props.type],
|
|
style: {
|
|
verticalAlign: props.vertical
|
|
}
|
|
},
|
|
props.text || slots().default
|
|
);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
border-radius: 3px;
|
|
padding: 0 6px;
|
|
color: white;
|
|
background-color: #42b983;
|
|
|
|
&.tip, &.green {
|
|
background-color: #42b983;
|
|
}
|
|
|
|
&.error {
|
|
background-color: #DA5961; // #f66
|
|
}
|
|
|
|
&.warning, &.warn, &.yellow {
|
|
background-color: darken(#ffe564, 35%);
|
|
}
|
|
|
|
& + & {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
</style>
|