mirror of https://github.com/requarks/wiki
parent
134f057bb8
commit
85a5af6f06
@ -1,14 +1,10 @@
|
|||||||
<template lang='pug'>
|
<template lang='pug'>
|
||||||
div
|
div
|
||||||
v-divider.my-0
|
v-divider.my-0
|
||||||
v-card-actions(:class='dark ? "grey darken-4-l5" : "grey lighten-4"')
|
v-card-actions(:class='$vuetify.theme.dark ? "grey darken-4-l5" : "grey lighten-4"')
|
||||||
slot
|
slot
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default { }
|
||||||
computed: {
|
|
||||||
dark() { return this.$vuetify.theme.dark }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -0,0 +1,56 @@
|
|||||||
|
<template lang='pug'>
|
||||||
|
.v-card-info(:class='`is-` + color')
|
||||||
|
v-card-text(:class='colors.cls')
|
||||||
|
v-icon(:color='colors.icon', left) {{icon}}
|
||||||
|
slot
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: 'blue'
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: 'mdi-information-outline'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
colors () {
|
||||||
|
switch (this.color) {
|
||||||
|
case 'blue':
|
||||||
|
return {
|
||||||
|
cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'blue lighten-5 blue--text text--darken-3',
|
||||||
|
icon: 'blue lighten-3'
|
||||||
|
}
|
||||||
|
case 'red':
|
||||||
|
return {
|
||||||
|
cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'red lighten-5 red--text text--darken-2',
|
||||||
|
icon: 'red lighten-3'
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'grey lighten-4',
|
||||||
|
icon: 'grey darken-2'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.v-card-info {
|
||||||
|
border-bottom: 1px solid #EEE;
|
||||||
|
|
||||||
|
&.is-blue {
|
||||||
|
border-bottom-color: mc('blue', '100');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-red {
|
||||||
|
border-bottom-color: mc('red', '100');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue