ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix color picker in navigation

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2019-08-22 22:43:59 +02:00
parent f14e9758a0
commit 0b5c7fb56a
1 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/ColorPicker.vue
View File

@@ -69,47 +69,53 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
div.color-picker { $color-field-width: 27px;
// #app-navigation .app-navigation-entry-edit form, #app-navigation .app-navigation-entry-edit div
// has a to wide scope in the server styles so we need to force some width and display styles
.color-picker::v-deep {
display: block !important; display: block !important;
overflow: hidden; overflow: hidden;
border-radius: 3px; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
}
</style>
<style lang="scss">
$color-field-width: 27px;
#content .color-picker {
// this is required to overwrite
// #app-navigation .app-navigation-entry-edit form, #app-navigation .app-navigation-entry-edit div
// which has a to wide scope in the server styles
div {
width: auto;
display: block;
}
.color-picker-compact { .color-picker-compact {
display: flex; display: flex !important;
} }
.custom-color-button { .custom-color-button {
width: $color-field-width; width: $color-field-width !important;
height: $color-field-width; height: $color-field-width;
display: block; display: inline-flex !important;
flex-grow: 1; flex-grow: 1;
flex-basis: 44px;
} }
.vc-compact { .vc-compact {
flex-grow: 5;
width: initial;
max-width: calc(8 * #{$color-field-width});
display: block !important;
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
width: 90%
} }
.vc-chrome { .vc-chrome {
width: 100%;
border-radius: 0 3px; border-radius: 0 3px;
box-shadow: 0 0 2px var(--color-box-shadow); box-shadow: 0 0 2px var(--color-box-shadow);
.vc-saturation-pointer, .vc-saturation-circle {
width: 12px !important;
height: 12px !important;
}
} }
.vc-chrome-fields-wrap {
.vc-chrome-fields-wrap, .vc-chrome-body {
display: none !important; display: none !important;
} }
@@ -119,12 +125,13 @@ export default {
.vc-compact-color-item { .vc-compact-color-item {
display: inline-flex; display: inline-flex;
height: $color-field-width; height: $color-field-width;
width: 100%;
max-width: $color-field-width;
padding: 0; padding: 0;
margin: 0; margin: 0;
flex-grow: 1;
} }
.vc-compact-dot { .vc-compact-dot {
width: 10px; width: 10px !important;
height: 10px; height: 10px;
position: unset; position: unset;
border-radius: 50%; border-radius: 50%;