gamebrary/src/components/Panel.vue
2019-08-06 15:45:59 -07:00

48 lines
779 B
Vue

<template lang="html">
<div class="panel">
<slot />
</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "~styles/styles.scss";
.panel {
padding: $gp / 2;
border-radius: $border-radius;
p {
margin: $gp / 2 0;
}
a {
color: unset;
font-weight: bold;
}
&.warning {
background: $color-orange;
color: darken($color-orange, 40);
}
&.positive {
background: $color-green;
color: lighten($color-green, 50);
}
&.info {
background: $color-gray;
color: lighten($color-gray, 40);
}
&.error {
background: $color-red;
color: lighten($color-red, 40);
}
}
</style>