Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2025-12-25 08:09:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: updated margins and font styles for editor (#5978)

Browse Source 
* style: updated margins and font styles for editor

* fix: code block font size in small font

* fix: remove duplicate code
This commit is contained in:
Aaryan Khandelwal
2024-11-11 16:10:47 +05:30
committed by GitHub
parent 1217af1d5f
commit 97eb8d43d4
6 changed files with 50 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/src/core/extensions/core-without-props.ts
View File

@@ -46,7 +46,7 @@ export const CoreEditorExtensionsWithoutProps = [
CustomQuoteExtension,
CustomHorizontalRule.configure({
HTMLAttributes: {
class: "my-4 border-custom-border-400",
class: "py-4 border-custom-border-400",
},
}),
CustomLinkExtension.configure({

2
packages/editor/src/core/extensions/extensions.tsx
View File

@@ -78,7 +78,7 @@ export const CoreEditorExtensions = (args: TArguments) => {
DropHandlerExtension(),
CustomHorizontalRule.configure({
HTMLAttributes: {
class: "my-4 border-custom-border-400",
class: "py-4 border-custom-border-400",
},
}),
CustomKeymap,

2
packages/editor/src/core/extensions/read-only-extensions.tsx
View File

@@ -67,7 +67,7 @@ export const CoreReadOnlyEditorExtensions = (props: Props) => {
CustomQuoteExtension,
CustomHorizontalRule.configure({
HTMLAttributes: {
class: "my-4 border-custom-border-400",
class: "py-4 border-custom-border-400",
},
}),
CustomLinkExtension.configure({

70
packages/editor/src/styles/editor.css
View File

@@ -12,7 +12,7 @@
cursor: text;
font-family: var(--font-style);
font-size: var(--font-size-regular);
line-height: 1.2;
font-weight: 400;
color: inherit;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -248,11 +248,6 @@ div[data-type="horizontalRule"] {
}
}
/* image resizer */
.moveable-control-box {
z-index: 10 !important;
}
/* Cursor styles for the inline code blocks */
@keyframes blink {
49% {
@@ -314,13 +309,23 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
}
/* end numbered, bulleted and to-do lists spacing */
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0 !important;
}
/* tailwind typography */
.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
&:not(:first-child) {
margin-top: 2rem;
padding-top: 28px;
}
margin-bottom: 4px;
padding-bottom: 4px;
font-size: var(--font-size-h1);
line-height: var(--line-height-h1);
font-weight: 600;
@@ -328,10 +333,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
&:not(:first-child) {
margin-top: 1.4rem;
padding-top: 28px;
}
margin-bottom: 1px;
padding-bottom: 4px;
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
font-weight: 600;
@@ -339,10 +344,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
&:not(:first-child) {
margin-top: 1rem;
padding-top: 28px;
}
margin-bottom: 1px;
padding-bottom: 4px;
font-size: var(--font-size-h3);
line-height: var(--line-height-h3);
font-weight: 600;
@@ -350,10 +355,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
&:not(:first-child) {
margin-top: 1rem;
padding-top: 28px;
}
margin-bottom: 1px;
padding-bottom: 4px;
font-size: var(--font-size-h4);
line-height: var(--line-height-h4);
font-weight: 600;
@@ -361,10 +366,10 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
&:not(:first-child) {
margin-top: 1rem;
padding-top: 20px;
}
margin-bottom: 1px;
padding-bottom: 4px;
font-size: var(--font-size-h5);
line-height: var(--line-height-h5);
font-weight: 600;
@@ -372,30 +377,40 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
.prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
&:not(:first-child) {
margin-top: 1rem;
padding-top: 20px;
}
margin-bottom: 1px;
padding-bottom: 4px;
font-size: var(--font-size-h6);
line-height: var(--line-height-h6);
font-weight: 600;
}
.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
&:not(:first-child) {
margin-top: 0.25rem;
}
&:first-child {
margin-top: 0;
padding-top: 0;
}
&:not(:first-child) {
padding-top: 4px;
}
&:last-child {
padding-bottom: 4px;
}
&:not(:last-child) {
padding-bottom: 8px;
}
margin-bottom: 1px;
padding: 3px 0;
font-size: var(--font-size-regular);
line-height: var(--line-height-regular);
}
p + p {
padding-top: 8px !important;
}
.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p,
.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p {
font-size: var(--font-size-list);
@@ -432,11 +447,6 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
[data-text-color="purple"] {
color: var(--editor-colors-purple-text);
}
/* [data-text-color="pink-blue-gradient"] {
background-clip: text;
color: transparent;
background-image: linear-gradient(90deg, #a961cd 50%, #e75962 100%);
} */
/* end text colors */
/* background colors */

8
packages/editor/src/styles/variables.css
View File

@@ -46,8 +46,8 @@
--font-size-h5: 1.125rem;
--font-size-h6: 1rem;
--font-size-regular: 1rem;
--font-size-code: 0.85rem;
--font-size-list: var(--font-size-regular);
--font-size-code: var(--font-size-regular);
--line-height-h1: 2.25rem;
--line-height-h2: 2rem;
@@ -56,8 +56,8 @@
--line-height-h5: 1.5rem;
--line-height-h6: 1.5rem;
--line-height-regular: 1.5rem;
--line-height-code: 1.5rem;
--line-height-list: var(--line-height-regular);
--line-height-code: var(--line-height-regular);
}
&.small-font {
--font-size-h1: 1.4rem;
@@ -67,8 +67,8 @@
--font-size-h5: 0.9rem;
--font-size-h6: 0.8rem;
--font-size-regular: 0.8rem;
--font-size-code: 0.8rem;
--font-size-list: var(--font-size-regular);
--font-size-code: var(--font-size-regular);
--line-height-h1: 1.8rem;
--line-height-h2: 1.6rem;
@@ -77,8 +77,8 @@
--line-height-h5: 1.2rem;
--line-height-h6: 1.2rem;
--line-height-regular: 1.2rem;
--line-height-code: 1.2rem;
--line-height-list: var(--line-height-regular);
--line-height-code: var(--line-height-regular);
}
/* end font sizes and line heights */

6
web/core/components/pages/editor/title.tsx
View File

@@ -25,9 +25,9 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
// page filters
const { fontSize } = usePageFilters();
// ui
const titleClassName = cn("bg-transparent tracking-[-2%] font-semibold", {
"text-[1.6rem] leading-[1.8rem]": fontSize === "small-font",
"text-[2rem] leading-[2.25rem]": fontSize === "large-font",
const titleClassName = cn("bg-transparent tracking-[-2%] font-bold", {
"text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
"text-[2rem] leading-[2.375rem]": fontSize === "large-font",
});
return (