scope experiment styles

This commit is contained in:
Philipp Kühn 2021-03-18 11:13:25 +01:00
parent 9dd4e24b97
commit b44b635366
7 changed files with 150 additions and 136 deletions

View File

@ -135,15 +135,17 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
/* Basic editor styles */ ::v-deep {
.ProseMirror { /* Basic editor styles */
.ProseMirror {
> * + * { > * + * {
margin-top: 0.75em; margin-top: 0.75em;
} }
} }
.annotation { .annotation {
background: #9DEF8F; background: #9DEF8F;
}
} }
</style> </style>

View File

@ -130,17 +130,19 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ProseMirror { ::v-deep {
.ProseMirror {
> * + * { > * + * {
margin-top: 0.75em; margin-top: 0.75em;
} }
} }
.mention { .mention {
color: #A975FF; color: #A975FF;
background-color: rgba(#A975FF, 0.1); background-color: rgba(#A975FF, 0.1);
border-radius: 0.3rem; border-radius: 0.3rem;
padding: 0.1rem 0.3rem; padding: 0.1rem 0.3rem;
}
} }
</style> </style>

View File

@ -63,8 +63,9 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ProseMirror { ::v-deep {
.ProseMirror {
> * + * { > * + * {
margin-top: 0.75em; margin-top: 0.75em;
} }
@ -94,5 +95,6 @@ export default {
} }
} }
} }
}
} }
</style> </style>

View File

@ -53,11 +53,13 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ProseMirror { ::v-deep {
.ProseMirror {
> * + * { > * + * {
margin-top: 0.75em; margin-top: 0.75em;
} }
}
.iframe-wrapper { .iframe-wrapper {
position: relative; position: relative;

View File

@ -61,14 +61,15 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.problem { ::v-deep {
.problem {
background: #fdd; background: #fdd;
border-bottom: 1px solid #f22; border-bottom: 1px solid #f22;
margin-bottom: -1px; margin-bottom: -1px;
} }
.lint-icon { .lint-icon {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
right: 2px; right: 2px;
@ -84,13 +85,14 @@ export default {
text-align: center; text-align: center;
padding-left: .5px; padding-left: .5px;
line-height: 1.1em line-height: 1.1em
} }
.lint-icon:before { .lint-icon:before {
content: "!"; content: "!";
} }
.ProseMirror { .ProseMirror {
padding-right: 20px; padding-right: 20px;
}
} }
</style> </style>

View File

@ -143,8 +143,9 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ProseMirror { ::v-deep {
.ProseMirror {
> * + * { > * + * {
margin-top: 0.75em; margin-top: 0.75em;
} }
@ -163,17 +164,17 @@ export default {
} }
} }
} }
} }
.form__label { .form__label {
color: #868e96; color: #868e96;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 0.7rem; font-size: 0.7rem;
letter-spacing: 1px; letter-spacing: 1px;
} }
.form__item { .form__item {
margin: 0 0 1rem; margin: 0 0 1rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 5px; border-radius: 5px;
@ -193,9 +194,9 @@ export default {
color: #FFF; color: #FFF;
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
pre { pre {
font-family: 'JetBrainsMono', monospace; font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -205,5 +206,6 @@ pre {
background: none; background: none;
font-size: 0.8rem; font-size: 0.8rem;
} }
}
} }
</style> </style>

View File

@ -37,20 +37,22 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
/* Basic editor styles */ ::v-deep {
.ProseMirror { /* Basic editor styles */
.ProseMirror {
> * + * { > * + * {
margin-top: 0.75em; margin-top: 0.75em;
} }
} }
/* Placeholder */ /* Placeholder */
.ProseMirror p.is-editor-empty:first-child::before { .ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-empty-text); content: attr(data-empty-text);
float: left; float: left;
color: #ced4da; color: #ced4da;
pointer-events: none; pointer-events: none;
height: 0; height: 0;
}
} }
</style> </style>