mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 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
Show Stats 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;
margin: 1rem 0;
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;
}
.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-top: 1.5rem;
padding: 1rem;
.content {
margin-top: 1.5rem;
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 () => {
return (
<NodeViewWrapper className="react-component">
<NodeViewWrapper className="react-component-with-content">
<span className="label">React Component</span>
<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-radius: 0.5rem;
margin: 1rem 0;
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;
}