ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

try to scope react styles

Browse Source
This commit is contained in:
Philipp Kühn
2021-03-18 10:43:34 +01:00
parent 947318f18e
commit 56d00053db
3 changed files with 40 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss
View File

@@ -10,23 +10,23 @@
border-radius: 0.5rem; border-radius: 0.5rem;
margin: 1rem 0; margin: 1rem 0;
position: relative; position: relative;
}
.label { .label {
margin-left: 1rem; margin-left: 1rem;
background-color: #0D0D0D; background-color: #0D0D0D;
font-size: 0.6rem; font-size: 0.6rem;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
color: #fff; color: #fff;
position: absolute; position: absolute;
top: 0; top: 0;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem; border-radius: 0 0 0.5rem 0.5rem;
} }
.content { .content {
margin-top: 1.5rem; margin-top: 1.5rem;
padding: 1rem; padding: 1rem;
}
} }

2
docs/src/demos/Guide/NodeViews/ReactComponentContent/Component.jsx
View File

@@ -3,7 +3,7 @@ import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
export default () => { export default () => {
return ( return (
<NodeViewWrapper className="react-component"> <NodeViewWrapper className="react-component-with-content">
<span className="label">React Component</span> <span className="label">React Component</span>
<NodeViewContent className="content" /> <NodeViewContent className="content" />

43
docs/src/demos/Guide/NodeViews/ReactComponentContent/styles.scss
View File

@@ -5,30 +5,31 @@
} }
} }
.react-component { .react-component-with-content {
border: 3px solid #0D0D0D; border: 3px solid #0D0D0D;
border-radius: 0.5rem; border-radius: 0.5rem;
margin: 1rem 0; margin: 1rem 0;
position: relative; position: relative;
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.content {
margin: 2.5rem 1rem 1rem;
padding: 0.5rem;
border: 2px dashed #0D0D0D20;
border-radius: 0.5rem;
}
} }
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.content {
margin: 2.5rem 1rem 1rem;
padding: 0.5rem;
border: 2px dashed #0D0D0D20;
border-radius: 0.5rem;
}