KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Hover and click

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2020-01-22 12:45:08 +01:00
parent 84c7221974
commit bd1a626a96
2 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/GeneratePage.vue
View File

@@ -292,29 +292,60 @@ button {
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
} }
.green, .green,
.input-line label:hover input#greenCheckbox ~ .border .checkmark,
.input-line label input#greenCheckbox:checked ~ .border .checkmark { .input-line label input#greenCheckbox:checked ~ .border .checkmark {
background-color: #c8f9df; background-color: #c8f9df;
} }
.input-line label:hover input#greenCheckbox ~ .border .checkmark {
background-color: #10e783;
}
.input-line label:focus input#greenCheckbox ~ .border .checkmark,
.input-line label:active input#greenCheckbox ~ .border .checkmark {
background-color: #0ed277;
}
.red, .red,
.input-line label:hover input#redCheckbox ~ .border .checkmark,
.input-line label input#redCheckbox:checked ~ .border .checkmark { .input-line label input#redCheckbox:checked ~ .border .checkmark {
background-color: #fbd7de; background-color: #fbd7de;
} }
.input-line label:hover input#redCheckbox ~ .border .checkmark {
background-color: #ef5878;
}
.input-line label:focus input#redCheckbox ~ .border .checkmark,
.input-line label:active input#redCheckbox ~ .border .checkmark {
background-color: #ec3b61;
}
.yellow, .yellow,
.input-line label:hover input#yellowCheckbox ~ .border .checkmark,
.input-line label input#yellowCheckbox:checked ~ .border .checkmark { .input-line label input#yellowCheckbox:checked ~ .border .checkmark {
background-color: #fff6d6; background-color: #fff6d6;
} }
.input-line label:hover input#yellowCheckbox ~ .border .checkmark {
background-color: #ffde5d;
}
.input-line label:focus input#yellowCheckbox ~ .border .checkmark,
.input-line label:active input#yellowCheckbox ~ .border .checkmark {
background-color: #ecc31d;
}
.blue, .blue,
.input-line label:hover input#blueCheckbox ~ .border .checkmark,
.input-line label input#blueCheckbox:checked ~ .border .checkmark { .input-line label input#blueCheckbox:checked ~ .border .checkmark {
background-color: #d4f2fe; background-color: #d4f2fe;
} }
.input-line label:hover input#blueCheckbox ~ .border .checkmark {
background-color: #57d2fb;
}
.input-line label:focus input#blueCheckbox ~ .border .checkmark,
.input-line label:active input#blueCheckbox ~ .border .checkmark {
background-color: #24acda;
}
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
input, input,

11
src/ui/PurchaseGraph.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div> <div>
<canvas ref="purchase-chart" width="100" height="50"></canvas> <canvas ref="purchase-chart" width="100" height="50"></canvas>
<div ref="chartjsLegend" class="chartjsLegend"></div>
</div> </div>
</template> </template>
@@ -105,4 +106,12 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.chartjsLegend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
border-radius: 25px;
}
</style>