diff options
Diffstat (limited to 'docs/.vuepress/components/colors/reds.vue')
-rw-r--r-- | docs/.vuepress/components/colors/reds.vue | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/docs/.vuepress/components/colors/reds.vue b/docs/.vuepress/components/colors/reds.vue new file mode 100644 index 00000000..4f78f128 --- /dev/null +++ b/docs/.vuepress/components/colors/reds.vue @@ -0,0 +1,44 @@ +<template> + <div> + <div class="color-tile-container"> + <div v-for="color in colors"> + <div + :style="{ backgroundColor: color.hex }" + :class="{ 'color-tile--border': color.border }" + class="color-tile" + ></div> + <dl class="color-tile-desc"> + <dt>Color variable:</dt> + <dd>${{ color.variable }}</dd> + </dl> + <dl class="color-tile-desc"> + <dt>Hex:</dt> + <dd>{{ color.hex }}</dd> + </dl> + </div> + </div> + </div> +</template> + +<script> +export default { + data() { + return { + colors: [ + { + variable: 'red-100', + hex: '#feeeed', + }, + { + variable: 'red-500', + hex: '#da1416' + } + ] + }; + } +}; +</script> + +<style lang="scss"> + @import "./colors.scss"; +</style> |