Files
zitadel/console/src/component-themes.scss
T
f963ea9f86 feat(console): rehauled navigation for instances including breadcrumb (#10283)
This PR significantly improves user navigation by introducing a new
instance-level navigation bar. This new bar, positioned above the
existing organization navigation, provides quick access to key sections:
Home, Organizations, Actions, and Settings.

Additionally, the breadcrumb component has been refined for more
consistent behavior, reintroducing intuitive breadcrumb buttons to
easily navigate up the hierarchy. These changes also include design
improvements for a cleaner and more streamlined appearance across the
interface.

<img width="423" height="138" alt="Screenshot 2025-07-17 at 14 55 46"
src="https://github.com/user-attachments/assets/ba9e40a1-1077-4cb6-8735-ac7ab637abe7"
/>
<img width="562" height="132" alt="Screenshot 2025-07-17 at 14 56 41"
src="https://github.com/user-attachments/assets/d85dc673-0df8-4677-9d2b-dc031dde42c3"
/>
<img width="545" height="254" alt="Screenshot 2025-07-17 at 14 56 10"
src="https://github.com/user-attachments/assets/eaf10117-079e-4181-8dbb-60c89b24556a"
/>
<img width="689" height="261" alt="Screenshot 2025-07-17 at 14 56 20"
src="https://github.com/user-attachments/assets/510ad550-1d9a-4c6a-8af1-66cb0b23619c"
/>

---------

Co-authored-by: conblem <[email protected]>
Co-authored-by: Stefan Benz <[email protected]>
Co-authored-by: Florian Forster <[email protected]>
2025-08-28 11:23:14 +02:00

173 lines
8.7 KiB
SCSS

@import 'src/app/modules/card/card';
@import './styles/table';
@import './styles/input.scss';
@import './styles/error.scss';
@import './styles/link.scss';
@import 'src/app/modules/avatar/avatar.component';
@import 'src/app/modules/app-radio/app-type-radio/app-type-radio.component';
@import 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
@import 'src/app/modules/changes/changes.component';
@import 'src/app/modules/info-section/info-section.component';
@import 'src/app/modules/detail-layout/detail-layout.component';
@import 'src/app/modules/app-card/app-card.component';
@import 'src/app/modules/contributors/contributors.component';
@import 'src/app/modules/nav/nav.component';
@import 'src/app/modules/nav-toggle/nav-toggle.component';
@import './styles/toast.scss';
@import 'src/app/modules/table-actions/table-actions.component';
@import 'src/app/modules/org-context/org-context.component.scss';
@import 'src/app/modules/action-keys/action-keys.component.scss';
@import 'src/app/modules/header/header.component';
@import 'src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component';
@import 'src/app/modules/footer/footer.component';
@import 'src/app/modules/theme-setting/theme-setting.component.scss';
@import 'src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component';
@import 'src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component';
@import 'src/app/pages/projects/apps/app-detail/app-detail.component';
@import 'src/app/pages/projects/apps/redirect-uris/redirect-uris.component';
@import 'src/app/modules/filter-events/filter-events.component';
@import 'src/app/modules/top-view/top-view.component';
@import 'src/app/pages/projects/projects.component';
@import 'src/app/pages/grants/grants.component';
@import 'src/app/modules/edit-text/edit-text.component.scss';
@import 'src/app/pages/projects/apps/integrate/integrate.component.scss';
@import 'src/app/modules/providers/providers.scss';
@import 'src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component';
@import 'src/app/pages/users/user-detail/user-detail/user-detail.component';
@import 'src/app/pages/users/user-list/user-table/user-table.component';
@import 'src/app/pages/users/user-detail/contact/contact.component';
@import 'src/app/pages/projects/project-grid/project-grid.component';
@import 'src/app/pages/org-actions/actions.component';
@import 'src/app/app.component.scss';
@import './styles/color.scss';
@import 'src/app/pages/instance/instance.component.scss';
@import 'src/app/modules/refresh-table/refresh-table.component.scss';
@import 'src/app/modules/form-field/field/form-field.component.scss';
@import 'src/app/modules/label/label.component.scss';
@import 'src/app/modules/string-list/string-list.component.scss';
@import 'src/app/components/quickstart/quickstart.component.scss';
@import 'src/app/components/framework-autocomplete/framework-autocomplete.component.scss';
@import 'src/app/components/framework-change/framework-change.component.scss';
@import 'src/app/modules/meta-layout/meta.scss';
@import 'src/app/pages/projects/owned-projects/project-grant-detail/project-grant-illustration/project-grant-illustration.component';
@import 'src/app/modules/accounts-card/accounts-card.component.scss';
@import 'src/app/modules/onboarding-card/onboarding-card.component.scss';
@import 'src/app/pages/app-create/app-create.component.scss';
@import 'src/app/modules/onboarding/onboarding.component.scss';
@import 'src/app/modules/filter/filter.component.scss';
@import 'src/app/modules/policies/message-texts/message-texts.component.scss';
@import 'src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss';
@import 'src/app/modules/info-row/info-row.component.scss';
@import 'src/app/modules/sidenav/sidenav.component';
@import 'src/app/modules/user-grants/user-grants.component.scss';
@import 'src/app/modules/shortcuts/shortcuts.component.scss';
@import 'src/app/modules/policies/idp-settings/idp-settings.component.scss';
@import 'src/app/modules/project-role-chip/project-role-chip.component';
@import 'src/app/modules/events/events.component';
@import 'src/app/pages/home/home.component.scss';
@import 'src/app/modules/policies/security-policy/security-policy.component.scss';
@import 'src/app/modules/idp-table/idp-table.component.scss';
@import 'src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss';
@import 'src/app/modules/policies/login-policy/factor-table/factor-table.component.scss';
@import 'src/app/modules/info-overlay/info-overlay.component.scss';
@import 'src/app/modules/create-layout/create-layout.component.scss';
@import 'src/app/modules/domains/domain-verification/domain-verification.component.scss';
@import 'src/app/modules/smtp-table/smtp-table.component.scss';
@import 'src/app/modules/smtp-provider/smtp-provider.scss';
@import 'src/app/modules/policies/notification-smtp-provider/notification-smtp-provider.component.scss';
@import './styles/codemirror.scss';
@import 'src/app/components/copy-row/copy-row.component.scss';
@import 'src/app/modules/providers/provider-next/provider-next.component.scss';
@import 'src/app/modules/new-header/organization-selector/organization-selector.component.scss';
@import 'src/app/modules/new-header/instance-selector/instance-selector.component.scss';
@import 'src/app/modules/new-header/header-dropdown/header-dropdown.component.scss';
@import 'src/app/modules/new-header/new-header.component.scss';
@import 'src/app/modules/new-header/header-button/header-button.component.scss';
@mixin component-themes($theme) {
@include cnsl-color-theme($theme);
@include main-theme($theme);
@include avatar-theme($theme);
@include nav-theme($theme);
@include nav-toggle-theme($theme);
@include header-theme($theme);
@include app-type-radio-theme($theme);
@include idp-table-theme($theme);
@include smtp-table-theme($theme);
@include smtp-provider-theme($theme);
@include events-theme($theme);
@include projects-theme($theme);
@include grants-theme($theme);
@include top-view-theme($theme);
@include info-overlay-theme($theme);
@include app-auth-method-radio-theme($theme);
@include security-policy-theme($theme);
@include framework-change-theme($theme);
@include search-user-autocomplete-theme($theme);
@include quickstart-theme($theme);
@include project-role-chips-theme($theme);
@include card-theme($theme);
@include idp-settings-theme($theme);
@include filter-events-theme($theme);
@include footer-theme($theme);
@include table-theme($theme);
@include detail-layout-theme($theme);
@include app-card-theme($theme);
@include identity-provider-theme($theme);
@include login-policy-mfas-theme($theme);
@include changes-theme($theme);
@include home-theme($theme);
@include owned-project-detail-theme($theme);
@include theme-setting($theme);
@include input-theme($theme);
@include cnsl-form-field-theme($theme);
@include contributors-theme($theme);
@include string-list-theme($theme);
@include shortcut-theme($theme);
@include message-texts-theme($theme);
@include app-detail-theme($theme);
@include user-table-theme($theme);
@include cnsl-label-theme($theme);
@include table-actions-theme($theme);
@include cnsl-error-theme($theme);
@include link-theme($theme);
@include org-context-theme($theme);
@include auth-user-detail-theme($theme);
@include edit-text-theme($theme);
@include user-detail-theme($theme);
@include instance-detail-theme($theme);
@include meta-theme($theme);
@include toast-theme($theme);
@include keyboard-shortcuts-theme($theme);
@include project-grant-illustration-theme($theme);
@include onboarding-card-theme($theme);
@include onboarding-theme($theme);
@include refresh-table-theme($theme);
@include accounts-card-theme($theme);
@include sidenav-theme($theme);
@include framework-autocomplete-theme($theme);
@include info-section-theme($theme);
@include actions-theme($theme);
@include filter-theme($theme);
@include private-label-theme($theme);
@include project-grid-theme($theme);
@include granted-project-detail-theme($theme);
@include user-grants-theme($theme);
@include app-create-theme($theme);
@include info-row-theme($theme);
@include redirect-uris-theme($theme);
@include action-keys-theme($theme);
@include codemirror-theme($theme);
@include contact-theme($theme);
@include app-integrate-theme($theme);
@include domain-verification-theme($theme);
@include copy-row-theme($theme);
@include provider-next-theme($theme);
@include smtp-settings-theme($theme);
@include organization-selector-theme($theme);
@include instance-selector-theme($theme);
@include header-dropdown-theme($theme);
@include new-header-theme($theme);
@include header-button-theme($theme);
}