mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
4240e76253
* ⚡ Implemented new grid row - banners * ✨ Fixing node creator and executions sidebar position after layout update * 💄 Added configurable round corners to the Callout component * ⚡ Fixing mouse position detection and main tab bar position * ⚡ Implemented basic banner component structure * ⚡ Implemented banner state and dismiss logic * ⚡ Fixing grid layout. Updating banners height state dynamically * ⚡ Fix zoom to fit position, mouse position in demo mode and callout vertical alignment * ⚡ Implementing proper trial banners logic * 💄 Only showing execution usage data once the sidebar is fully expanded * ✨ Implemented permanent/temporary dismiss logic for v1 flag * ⚡ Minor refactoring of banner logic * ⚡ Updating permanent dismiss logic to work with all banners * 👕 Fixing linting errors * ✔️ Updating Callout component test snapshots * 💄 Tweaking zoom to fit position * ✔️ Updating testing endpoints to use new store data * ✅ Added banners unit tests * ✔️ Fixing failing banner tests * ✅ Added more banner tests * ⚡ Updating banners dimensions on resize, removing leftover code * ✔️ Removing store import from API file * 👕 Fixing lint errors * ⚡ Updating migration files * ⚡ Using query parameters in migrations * 👌 Addressing design review feedback * ⚡ Updating upgrade plan button click * ⚡ Updating the migrations syntax * 👌 Updating permanent banner dismiss endpoint and back-end logic * 👌 Refactoring trial banner component and ui store * 👌 Addressing more points from code review * 👌 Moving DOM logic from the store * ✔️ Updated callout component snapshots * 👌 Updating mysql migration file * ✔️ Updating e2e test canvas coordinates after setting it's position to absolute * 👌 Addressing back-end review feedback * 👌 Improving typing around banners * 👕 Fixing lint errors
112 lines
3.8 KiB
SCSS
112 lines
3.8 KiB
SCSS
// Primary Theme Color
|
|
$color-primary: var(--color-primary);
|
|
|
|
// Dialog
|
|
$custom-dialog-text-color: var(--color-text-dark);
|
|
$custom-dialog-background: var(--color-background-xlight);
|
|
|
|
$custom-font-black: var(--color-text-dark);
|
|
$custom-font-dark: var(--color-text-dark);
|
|
$custom-font-light: var(--color-text-light);
|
|
$custom-font-very-light: var(--color-text-light);
|
|
|
|
$custom-expression-text: var(--color-secondary);
|
|
$custom-expression-background: var(--color-background-lighter);
|
|
|
|
// Badge
|
|
$badge-danger-color: var(--color-danger);
|
|
$badge-danger-background-color: var(--color-primary-tint-3);
|
|
$badge-danger-border-color: var(--color-primary-tint-2);
|
|
$badge-warning-background-color: hsla(
|
|
var(--color-warning-h),
|
|
var(--color-warning-s),
|
|
var(--color-warning-l),
|
|
0.3
|
|
);
|
|
$badge-warning-color: hsla(
|
|
var(--color-warning-h),
|
|
var(--color-warning-s),
|
|
var(--color-warning-l),
|
|
0.3
|
|
);
|
|
$badge-warning-color: var(--color-text-dark);
|
|
|
|
// Warning tooltip
|
|
$warning-tooltip-color: var(--color-danger);
|
|
|
|
:root {
|
|
// Using native css variable enables us to use this value in JS
|
|
--header-height: 65;
|
|
}
|
|
// sass variable is used for scss files
|
|
$header-height: calc(var(--header-height) * 1px);
|
|
|
|
// sidebar
|
|
$sidebar-width: 65px;
|
|
$sidebar-expanded-width: 200px;
|
|
$sidebar-inactive-color: var(--color-foreground-xdark);
|
|
$sidebar-active-color: $color-primary;
|
|
|
|
// gifts notification
|
|
$gift-notification-active-color: $color-primary;
|
|
$gift-notification-inner-color: $color-primary;
|
|
$gift-notification-outer-color: var(--color-text-xlight);
|
|
|
|
// based on element.io breakpoints
|
|
$breakpoint-2xs: 600px;
|
|
$breakpoint-xs: 768px;
|
|
$breakpoint-sm: 992px;
|
|
$breakpoint-md: 1200px;
|
|
$breakpoint-lg: 1920px;
|
|
|
|
// tags
|
|
$tag-background-color: var(--color-foreground-base);
|
|
$tag-text-color: var(--color-text-dark);
|
|
$tag-close-background-color: var(--color-text-light);
|
|
$tag-close-background-hover-color: var(--color-text-dark);
|
|
|
|
// Node creator
|
|
$node-creator-width: 385px;
|
|
$node-creator-text-color: var(--color-text-dark);
|
|
$node-creator-select-background-color: var(--color-background-base);
|
|
$node-creator-background-color: var(--color-background-xlight);
|
|
$node-creator-search-background-color: var(--color-background-xlight);
|
|
$node-creator-border-color: var(--color-foreground-base);
|
|
$node-creator-item-hover-border-color: var(--color-text-light);
|
|
$node-creator-arrow-color: var(--color-text-light);
|
|
$node-creator-no-results-background-color: var(--color-background-xlight);
|
|
$node-creator-close-button-color: var(--color-text-xlight);
|
|
$node-creator-search-clear-color: var(--color-text-xlight);
|
|
$node-creator-search-clear-background-color: var(--color-text-light);
|
|
$node-creator-search-clear-background-color-hover: var(--color-text-base);
|
|
$node-creator-search-placeholder-color: var(--color-text-light);
|
|
$node-creator-subcategory-panel-header-bacground-color: var(--color-background-base);
|
|
$node-creator-description-color: var(--color-text-base);
|
|
|
|
// trigger icon
|
|
$trigger-icon-border-color: var(--color-text-lighter);
|
|
$trigger-icon-background-color: var(--color-background-xlight);
|
|
|
|
// drawer
|
|
$drawer-background-color: var(--color-background-xlight);
|
|
|
|
// updates-panel
|
|
$updates-panel-info-url-color: $color-primary;
|
|
$updates-panel-border: var(--border-base);
|
|
$updates-panel-dark-background-color: var(--color-background-lighter);
|
|
$updates-panel-description-text-color: var(--color-text-base);
|
|
$updates-panel-text-color: var(--color-text-dark);
|
|
|
|
// versions card
|
|
$version-card-name-text-color: var(--color-text-base);
|
|
$version-card-background-color: var(--color-background-xlight);
|
|
$version-card-border: var(--border-base);
|
|
$version-card-description-text-color: var(--color-text-base);
|
|
$version-card-release-date-text-color: var(--color-foreground-xdark);
|
|
$version-card-box-shadow-color: hsla(
|
|
var(--color-background-dark-h),
|
|
var(--color-background-dark-s),
|
|
var(--color-background-dark-l),
|
|
0.07
|
|
);
|