Skip to content

Commit 9ce2e9d

Browse files
AntoLCAntoLC
committed
🐛(frontend) fix alignment of side menu
Recent refactoring moved the side menu position. This commit fixes its alignment.
1 parent 82a0c1a commit 9ce2e9d

File tree

1 file changed

+132
-136
lines changed
  • src/frontend/apps/impress/src/features/docs/doc-editor

1 file changed

+132
-136
lines changed

‎src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx‎

Lines changed: 132 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -7,153 +7,149 @@ export const cssEditor = css`
77
height: 100%;
88
}
99
10-
& .ProseMirror {
11-
/**
12-
* WCAG Accessibility contrast fixes for BlockNote editor
13-
*/
14-
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
15-
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
16-
color: #767676 !important;
17-
font-weight: 400;
18-
}
10+
/**
11+
* WCAG Accessibility contrast fixes for BlockNote editor
12+
*/
13+
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
14+
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
15+
color: #767676 !important;
16+
font-weight: 400;
17+
}
1918
20-
/**
21-
* Ensure long placeholder text is truncated with ellipsis
22-
*/
23-
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
24-
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
25-
text-overflow: ellipsis;
26-
white-space: nowrap;
27-
overflow: hidden;
28-
width: inherit;
29-
height: inherit;
30-
}
31-
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
32-
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child) {
33-
position: relative;
34-
}
19+
/**
20+
* Ensure long placeholder text is truncated with ellipsis
21+
*/
22+
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
23+
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
24+
text-overflow: ellipsis;
25+
white-space: nowrap;
26+
overflow: hidden;
27+
width: inherit;
28+
height: inherit;
29+
}
30+
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
31+
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child) {
32+
position: relative;
33+
}
3534
36-
/**
37-
* Ensure images with unsafe URLs are not interactive
38-
*/
39-
img.bn-visual-media[src*='-unsafe'] {
40-
pointer-events: none;
41-
}
35+
/**
36+
* Ensure images with unsafe URLs are not interactive
37+
*/
38+
img.bn-visual-media[src*='-unsafe'] {
39+
pointer-events: none;
40+
}
4241
43-
/**
44-
* Collaboration cursor styles
45-
*/
46-
.collaboration-cursor-custom__base {
47-
position: relative;
48-
}
49-
.collaboration-cursor-custom__caret {
50-
position: absolute;
51-
height: 100%;
52-
width: 2px;
53-
bottom: 4%;
54-
left: -1px;
55-
}
42+
/**
43+
* Collaboration cursor styles
44+
*/
45+
.collaboration-cursor-custom__base {
46+
position: relative;
47+
}
48+
.collaboration-cursor-custom__caret {
49+
position: absolute;
50+
height: 100%;
51+
width: 2px;
52+
bottom: 4%;
53+
left: -1px;
54+
}
55+
.collaboration-cursor-custom__label {
56+
color: #0d0d0d;
57+
font-size: 12px;
58+
font-weight: 600;
59+
-webkit-user-select: none;
60+
-moz-user-select: none;
61+
user-select: none;
62+
position: absolute;
63+
top: -17px;
64+
left: 0px;
65+
padding: 0px 6px;
66+
border-radius: 0px;
67+
white-space: nowrap;
68+
transition: clip-path 0.3s ease-in-out;
69+
border-radius: 4px 4px 4px 0;
70+
box-shadow: inset -2px 2px 6px #ffffff00;
71+
clip-path: polygon(0 85%, 4% 85%, 4% 100%, 0% 100%);
72+
}
73+
.collaboration-cursor-custom__base[data-active]
5674
.collaboration-cursor-custom__label {
57-
color: #0d0d0d;
58-
font-size: 12px;
59-
font-weight: 600;
60-
-webkit-user-select: none;
61-
-moz-user-select: none;
62-
user-select: none;
63-
position: absolute;
64-
top: -17px;
65-
left: 0px;
66-
padding: 0px 6px;
67-
border-radius: 0px;
68-
white-space: nowrap;
69-
transition: clip-path 0.3s ease-in-out;
70-
border-radius: 4px 4px 4px 0;
71-
box-shadow: inset -2px 2px 6px #ffffff00;
72-
clip-path: polygon(0 85%, 4% 85%, 4% 100%, 0% 100%);
73-
}
74-
.collaboration-cursor-custom__base[data-active]
75-
.collaboration-cursor-custom__label {
76-
pointer-events: none;
77-
box-shadow: inset -2px 2px 6px #ffffff88;
78-
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
79-
}
75+
pointer-events: none;
76+
box-shadow: inset -2px 2px 6px #ffffff88;
77+
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
78+
}
8079
81-
/**
82-
* Side menu
83-
*/
84-
.bn-side-menu[data-block-type='heading'][data-level='1'] {
85-
height: 50px;
86-
}
87-
.bn-side-menu[data-block-type='heading'][data-level='2'] {
88-
height: 43px;
89-
}
90-
.bn-side-menu[data-block-type='heading'][data-level='3'] {
91-
height: 35px;
92-
}
93-
.bn-side-menu[data-block-type='divider'] {
94-
height: 38px;
95-
}
96-
.bn-side-menu .mantine-UnstyledButton-root svg {
97-
color: #767676 !important;
98-
}
80+
/**
81+
* Side menu
82+
*/
83+
.bn-side-menu[data-block-type='heading'][data-level='1'] {
84+
height: 54px;
85+
}
86+
.bn-side-menu[data-block-type='heading'][data-level='2'] {
87+
height: 43px;
88+
}
89+
.bn-side-menu[data-block-type='heading'][data-level='3'] {
90+
height: 35px;
91+
}
92+
.bn-side-menu[data-block-type='divider'] {
93+
height: 38px;
94+
}
95+
.bn-side-menu .mantine-UnstyledButton-root svg {
96+
color: #767676 !important;
97+
}
9998
100-
/**
101-
* Callout, Paragraph and Heading blocks
102-
*/
103-
.bn-block {
104-
border-radius: var(--c--theme--spacings--3xs);
105-
}
106-
.bn-block-outer {
107-
border-radius: var(--c--theme--spacings--3xs);
108-
}
109-
.bn-block > .bn-block-content[data-background-color] {
110-
padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs);
111-
border-radius: var(--c--theme--spacings--3xs);
112-
}
113-
.bn-block-content[data-content-type='checkListItem'][data-checked='true']
114-
.bn-inline-content {
115-
text-decoration: none;
116-
}
117-
h1 {
118-
font-size: 1.875rem;
119-
}
120-
h2 {
121-
font-size: 1.5rem;
122-
}
123-
h3 {
124-
font-size: 1.25rem;
125-
}
126-
a {
127-
color: var(--c--theme--colors--greyscale-600);
128-
cursor: pointer;
129-
}
99+
/**
100+
* Callout, Paragraph and Heading blocks
101+
*/
102+
.bn-block {
103+
border-radius: var(--c--theme--spacings--3xs);
104+
}
105+
.bn-block-outer {
106+
border-radius: var(--c--theme--spacings--3xs);
107+
}
108+
.bn-block > .bn-block-content[data-background-color] {
109+
padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs);
110+
border-radius: var(--c--theme--spacings--3xs);
111+
}
112+
.bn-block-content[data-content-type='checkListItem'][data-checked='true']
113+
.bn-inline-content {
114+
text-decoration: none;
115+
}
116+
h1 {
117+
font-size: 1.875rem;
118+
}
119+
h2 {
120+
font-size: 1.5rem;
121+
}
122+
h3 {
123+
font-size: 1.25rem;
124+
}
125+
a {
126+
color: var(--c--theme--colors--greyscale-600);
127+
cursor: pointer;
128+
}
129+
.bn-block-group
130130
.bn-block-group
131-
.bn-block-group
132-
.bn-block-outer:not([data-prev-depth-changed]):before {
133-
border-left: none;
134-
}
131+
.bn-block-outer:not([data-prev-depth-changed]):before {
132+
border-left: none;
135133
}
136134
137-
& .bn-editor {
138-
color: var(--c--theme--colors--greyscale-700);
135+
color: var(--c--theme--colors--greyscale-700);
139136
140-
/**
141-
* Quotes
142-
*/
143-
blockquote {
144-
border-left: 4px solid var(--c--theme--colors--greyscale-300);
145-
font-style: italic;
146-
}
137+
/**
138+
* Quotes
139+
*/
140+
blockquote {
141+
border-left: 4px solid var(--c--theme--colors--greyscale-300);
142+
font-style: italic;
143+
}
147144
148-
/**
149-
* Divider
150-
*/
151-
[data-content-type='divider'] hr {
152-
background: #d3d2cf;
153-
margin: 1rem 0;
154-
width: 100%;
155-
border: 1px solid #d3d2cf;
156-
}
145+
/**
146+
* Divider
147+
*/
148+
[data-content-type='divider'] hr {
149+
background: #d3d2cf;
150+
margin: 1rem 0;
151+
width: 100%;
152+
border: 1px solid #d3d2cf;
157153
}
158154
159155
& .bn-block-outer:not(:first-child) {

0 commit comments

Comments
 (0)