local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: merge color-picker.scss with component styles

Browse source
This commit is contained in:
Dominik Pschenitschni 2021-10-18 14:51:57 +02:00
parent 08f84bf7e3
commit be35c73f6e
No known key found for this signature in database
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

55
src/components/input/colorPicker.vue
View file

@ -100,3 +100,58 @@ export default {
},
}
</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;
}
}