vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: merge color-picker.scss with component styles

This commit is contained in:
Dominik Pschenitschni 2021-10-18 14:51:57 +02:00
parent ce94594a75
commit 259275c5b5
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
3 changed files with 56 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/input/colorPicker.vue
View File

@ -99,4 +99,59 @@ export default {
},
},
}
</script>
</script>
<style lang="scss" scoped>
// FIXME: should be @use so that classes dont get imported twice
// needed for
// - $card-shadow
@import "bulma/sass/components/card.sass";
.color-picker-container {
display: flex;
justify-content: center;
align-items: center;
// 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;
}
}
</style>

1
src/styles/components/_index.scss
View File

@ -13,7 +13,6 @@
@import "table-view";
@import "kanban";
@import "list-backgrounds";
@import "color-picker";
@import "namespaces";
@import "legal";
@import "keyboard-shortcuts";

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

@ -1,48 +0,0 @@
.color-picker-container {
display: flex;
justify-content: center;
align-items: center;
// 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;
}
}