ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add styling for different highlight colors 

Also refactor the naming of the colors
This commit is contained in:
Ramon Wenger 2024-01-16 16:58:42 +01:00
parent 4f72c9564d
commit 2e61cfbed6
3 changed files with 49 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
client/src/components/content-blocks/ContentComponent.vue
View File

@ -219,31 +219,48 @@ onMounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="postcss">
@import 'styles/helpers'; .highlight {
background-color: Highlight;
color: HighlightText;
.content-component { &--alpha {
position: relative; background-color: var(--mark-alpha);
color: var(--color-charcoal-dark);
// &--bookmarked {
// }
&--subtitle {
margin-top: 2 * $medium-spacing;
margin-bottom: $medium-spacing;
} }
&--section_title { &--beta {
margin-top: $section-spacing; background-color: var(--mark-beta);
margin-bottom: $large-spacing; color: var(--color-charcoal-dark);
} }
&--text_block { &--gamma {
margin-bottom: $large-spacing; background-color: var(--mark-gamma);
} color: var(--color-charcoal-dark);
}
&--document_block { }
margin-bottom: $large-spacing; </style>
<style lang="postcss" scoped>
.content-component {
position: relative;
&--subtitle {
margin-top: 2 * var(--medium-spacing);
margin-bottom: var(--medium-spacing);
}
&--section_title {
margin-top: var(--section-spacing);
margin-bottom: var(--large-spacing);
}
&--text_block {
margin-bottom: var(--large-spacing);
}
&--document_block {
margin-bottom: var(--large-spacing);
} }
} }
</style> </style>

12
client/src/components/highlights/HighlightPopover.vue
View File

@ -3,15 +3,15 @@
<section class="highlight-popover__section"> <section class="highlight-popover__section">
<div <div
class="highlight-popover__color highlight-popover__color--yellow" class="highlight-popover__color highlight-popover__color--yellow"
@click="$emit('choose-color', 'yellow')" @click="$emit('choose-color', 'alpha')"
></div> ></div>
<div <div
class="highlight-popover__color highlight-popover__color--pink" class="highlight-popover__color highlight-popover__color--pink"
@click="$emit('choose-color', 'pink')" @click="$emit('choose-color', 'beta')"
></div> ></div>
<div <div
class="highlight-popover__color highlight-popover__color--blue" class="highlight-popover__color highlight-popover__color--blue"
@click="$emit('choose-color', 'blue')" @click="$emit('choose-color', 'gamma')"
></div> ></div>
</section> </section>
<section class="highlight-popover__section"> <section class="highlight-popover__section">
@ -62,13 +62,13 @@ defineProps<Props>();
border-radius: 50%; border-radius: 50%;
&--yellow { &--yellow {
background-color: var(--mark-yellow); background-color: var(--mark-alpha);
} }
&--pink { &--pink {
background-color: var(--mark-pink); background-color: var(--mark-beta);
} }
&--blue { &--blue {
background-color: var(--mark-blue); background-color: var(--mark-gamma);
} }
} }

9
client/src/styles/variables.css
View File

@ -1,12 +1,15 @@
:root { :root {
--default-border-radius: 13px; --default-border-radius: 13px;
--section-spacing: 60px;
--large-spacing: 30px;
--medium-spacing: 20px; --medium-spacing: 20px;
--small-spacing: 10px; --small-spacing: 10px;
--mark-yellow: #fbf44a; --mark-alpha: #fbf44a;
--mark-pink: #FF8BDE; --mark-beta: #FF8BDE;
--mark-blue: #6FDCFF; --mark-gamma: #6FDCFF;
--color-silver: #d0d0d0; --color-silver: #d0d0d0;
--color-charcoal-dark: #333333;
} }