diff options
| author | Henry Jameson <me@hjkos.com> | 2018-10-10 00:07:28 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2018-10-10 00:07:28 +0300 |
| commit | 87e98772b09b9b317dee020d22115517635a29c8 (patch) | |
| tree | ff89ad2cbdea51a35f800d9865ace0aca3af38ae /src/components/contrast_ratio | |
| parent | 4d77b0c86bbd711e76e8ed23b6b227332bbea3cf (diff) | |
initial contrast display support
Diffstat (limited to 'src/components/contrast_ratio')
| -rw-r--r-- | src/components/contrast_ratio/contrast_ratio.vue | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue new file mode 100644 index 00000000..6c4a59b6 --- /dev/null +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -0,0 +1,64 @@ +<template> +<div class="contrast-ratio"> + <span class="label"> + Contrast: + </span> + <span> + <span> + {{contrast.text}} + </span> + <span class="rating"> + <span v-if="contrast.aaa"> + AAA + </span> + <span v-if="!contrast.aaa && contrast.aa"> + AA + </span> + <span v-if="!contrast.aaa && !contrast.aa"> + bad + </span> + </span> + </span> + <span v-if="large"> + <span> + 18pt+: + </span> + <span class="rating"> + <span v-if="contrast.aaa"> + AAA + </span> + <span v-if="!contrast.aaa && contrast.aa"> + AA + </span> + <span v-if="!contrast.aaa && !contrast.aa"> + bad + </span> + </span> + </span> +</div> +</template> + +<script> +export default { + props: [ + 'large', 'contrast' + ] +} +</script> + +<style lang="scss"> +.contrast-ratio { + display: flex; + justify-content: end; + + .label { + margin-right: 1em; + } + + .rating { + display: inline-block; + min-width: 3em; + text-align: center; + } +} +</style> |