3db53a1934
* refactor(editor): N8N-4540 Main navigation layout rework (#4060) * ✨ Implemented new editor layout using css grid * ✨ Reworking main navigation layout, migrating some styling to css modules * ✨ Reworking main sidebar layout and responsiveness * 💄 Minor type update * ✨ Updated editor grid layout so empty cells are collapsed (`fit-content`), fixed updates menu items styling * ✨ Implemented new user area look & feel in main sidebar * 💄 Adjusting sidebar bottom padding when user area is not shown * 💄 CSS cleanup/refactor + minor vue refactoring * ✨ Fixing overscoll issue in chrome and scrolling behaviour of the content view * 👌 Addressing review feedback * ✨ Added collapsed and expanded versions of n8n logo * ✨ Updating infinite scrolling in templates view to work with the new layout * 💄 Updating main sidebar expanded width and templates view left margin * 💄 Updating main content height * 💄 Adding global styles for scrollable views with centered content, minor updates to user area * ✨ Updating zoomToFit logic, lasso select box position and new nodes positioning * ✨ Fixing new node drop position now that mouse detection has been adjusted * 👌 Updating templates view scroll to top logic and responsive padding, aligning menu items titles * 💄 Moving template layout style from global css class to component level * ✨ Moved 'Workflows' menu to node view header. Added new dropdown component for user area and the new WF menu * 💄 Updating disabled states in new WF menu * 💄 Initial stab at new sidebar styling * ✨ Finished main navigation restyling * ✨ Updating `zoomToFit` and centering logic * ✨ Adding updates menu item to settings sidebar * 💄 Adding updates item to the settings sidebar and final touches on main sidebar style * 💄 Removing old code & refactoring * 💄 Minor CSS tweaks * 💄 Opening credentials modal on sidebar menu item click. Minor CSS updates * 💄 Updating sidebar expand/collapse animation * 💄 Few more refinements of sidebar animation * 👌 Addressing code review comments * ✨ Moved ActionDropdown component to design system * 👌 Fixing bugs reported during code review and testing * 👌 Addressing design review comments for the new sidebar * ✔️ Updating `N8nActionDropdown` component tests * ✨ Remembering scroll position when going back to templates list * ✨ Updating zoomToFit logic to account for footer content * 👌 Addressing latest sidebar review comments * 👌 Addressing main sidebar product review comments * 💄 Updating css variable names after vite merge * ✔️ Fixing linting errors in the design system * ✔️ Fixing `element-ui` type import * 👌 Addressing the code review comments. * ✨ Adding link to new credentials view, removed old modal * 💄 Updating credentials view responsiveness and route highlight handling * 💄 Adding highlight to workflows submenu when on new workflow page * 💄 Updated active submenu text color
249 lines
2.6 KiB
SCSS
249 lines
2.6 KiB
SCSS
@use "mixins/function";
|
|
@use 'common/var';
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overscroll-behavior: none;
|
|
line-height: 1;
|
|
font-size: var(--font-size-m);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--color-text-dark);
|
|
background-color: var(--color-background-xlight);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body,
|
|
button,
|
|
input {
|
|
font-family: var(--font-family);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
input {
|
|
font-weight: var(--font-weight-regular);
|
|
}
|
|
|
|
button {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
div,
|
|
span,
|
|
object,
|
|
iframe,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p,
|
|
blockquote,
|
|
pre,
|
|
abbr,
|
|
address,
|
|
cite,
|
|
code,
|
|
del,
|
|
dfn,
|
|
em,
|
|
img,
|
|
ins,
|
|
kbd,
|
|
q,
|
|
samp,
|
|
small,
|
|
strong,
|
|
sub,
|
|
sup,
|
|
var,
|
|
b,
|
|
i,
|
|
dl,
|
|
dt,
|
|
dd,
|
|
ol,
|
|
ul,
|
|
li,
|
|
fieldset,
|
|
form,
|
|
label,
|
|
legend,
|
|
table,
|
|
caption,
|
|
tbody,
|
|
tfoot,
|
|
thead,
|
|
tr,
|
|
th,
|
|
td,
|
|
article,
|
|
aside,
|
|
canvas,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
menu,
|
|
nav,
|
|
section,
|
|
summary,
|
|
time,
|
|
mark,
|
|
audio,
|
|
video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
menu,
|
|
nav,
|
|
section {
|
|
display: block;
|
|
}
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
}
|
|
|
|
blockquote,
|
|
q {
|
|
quotes: none;
|
|
}
|
|
|
|
blockquote:before,
|
|
blockquote:after,
|
|
q:before,
|
|
q:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
|
|
a {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
font-size: 100%;
|
|
vertical-align: baseline;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: var(--color-primary);
|
|
|
|
&:active {
|
|
color: function.saturation(
|
|
--color-primary-h,
|
|
--color-primary-s,
|
|
--color-primary-l,
|
|
-(30%)
|
|
);
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: var(--color-text-dark);
|
|
font-weight: inherit;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
font-size: inherit;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.8;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
ins {
|
|
background-color: var(--color-success);
|
|
color: var(--color-text-dark);
|
|
text-decoration: none;
|
|
}
|
|
|
|
mark {
|
|
background-color: var(--color-warning);
|
|
color: var(--color-text-dark);
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
}
|
|
|
|
del {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
abbr[title],
|
|
dfn[title] {
|
|
border-bottom: 1px dotted;
|
|
cursor: help;
|
|
}
|
|
|
|
hr {
|
|
display: block;
|
|
height: 1px;
|
|
border: 0;
|
|
border-top: 1px solid var(--color-foreground-light);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
vertical-align: middle;
|
|
}
|