ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: native color picker instead of verte

Browse Source 
Prepare for vue 3
This commit is contained in:
Dominik Pschenitschni
2021-08-19 16:20:40 +02:00
parent 0c678b6e44
commit 4ee7a8bac6
4 changed files with 82 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/styles/components/color-picker.scss
View File

@ -3,9 +3,46 @@
justify-content: center;
align-items: center;
.verte__guide {
border-radius: 100%;
border: 1px solid $grey-300;
box-shadow: $card-shadow;
}
// reset / see https://stackoverflow.com/a/11471224/15522256
input[type="color"] {
-webkit-appearance: none;
border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
$PICKER_SIZE: 24px;
$BORDER_WIDTH: 1px;
.picker {
display: grid;
width: $PICKER_SIZE;
height: $PICKER_SIZE;
overflow: hidden;
border-radius: 100%;
border: $BORDER_WIDTH solid $grey-300;
box-shadow: $card-shadow;
& > * {
grid-row: 1;
grid-column: 1;
}
}
input.picker__input {
padding: 0;
width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
}
.picker__input.is-empty {
opacity: 0;
}
.picker__pattern {
pointer-events: none;
}
}