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;
justify-content: space-around;
}
.green,
.input-line label:hover input#greenCheckbox ~ .border .checkmark,
.input-line label input#greenCheckbox:checked ~ .border .checkmark {
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,
.input-line label:hover input#redCheckbox ~ .border .checkmark,
.input-line label input#redCheckbox:checked ~ .border .checkmark {
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,
.input-line label:hover input#yellowCheckbox ~ .border .checkmark,
.input-line label input#yellowCheckbox:checked ~ .border .checkmark {
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,
.input-line label:hover input#blueCheckbox ~ .border .checkmark,
.input-line label input#blueCheckbox:checked ~ .border .checkmark {
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) {
input,

11
src/ui/PurchaseGraph.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<canvas ref="purchase-chart" width="100" height="50"></canvas>
<div ref="chartjsLegend" class="chartjsLegend"></div>
</div>
</template>
@@ -105,4 +106,12 @@ export default {
};
</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>