diff --git a/src/assets/fortanix/fortanix_logo_icon.svg b/src/assets/fortanix/fortanix_logo_icon.svg index 7cc84ee3..fd82f048 100644 --- a/src/assets/fortanix/fortanix_logo_icon.svg +++ b/src/assets/fortanix/fortanix_logo_icon.svg @@ -1,20 +1,9 @@ - - - - - - - - - - - - + + + + + + + + diff --git a/src/components/overlays/DropdownMenu/DropdownMenu.module.scss b/src/components/overlays/DropdownMenu/DropdownMenu.module.scss index 19c91689..636bc5c2 100644 --- a/src/components/overlays/DropdownMenu/DropdownMenu.module.scss +++ b/src/components/overlays/DropdownMenu/DropdownMenu.module.scss @@ -96,8 +96,12 @@ align-items: center; gap: bk.$spacing-3; - .bk-dropdown-menu__item__icon { font-size: 1.4em; } - .bk-dropdown-menu__item__label { --keep: ; } + .bk-dropdown-menu__item__icon { + font-size: 1.2em; + } + .bk-dropdown-menu__item__label { + user-select: none; + } @include bk.focus-inset; } diff --git a/src/layouts/AppLayout/AppLayout.module.scss b/src/layouts/AppLayout/AppLayout.module.scss index d0f2b92c..a08235ed 100644 --- a/src/layouts/AppLayout/AppLayout.module.scss +++ b/src/layouts/AppLayout/AppLayout.module.scss @@ -7,8 +7,9 @@ @layer baklava.base { :root { - /* Height of the header needs to be known at root level so we can use it for things like `scroll-padding-top` */ - --bk-app-layout-header-height: var(--bk-sizing-5); + // Height of the header needs to be known at root level so we can use it for things like `scroll-padding-top`. + // Calculate by: content height (spacing-9) + 2 times the block padding (padding-3). + --bk-app-layout-header-height: calc(#{bk.$spacing-9} + 2 * #{bk.$spacing-3}); } } @@ -19,7 +20,7 @@ --bk-app-layout-sidebar-width-open: 220px; --bk-app-layout-sidebar-width: var(--bk-app-layout-sidebar-width-open); - + /* Note: do not use vw/vh, because we may want to show the layout in a container (e.g. story) */ min-width: 100cqw; min-height: 100cqh; @@ -99,7 +100,7 @@ 'footer' max-content / 1fr; } - + //&:has([slot='sidebar']:hover) { --bk-app-layout-sidebar-width: 80px; } // TEST @media (prefers-reduced-motion: no-preference) { transition: grid 300ms; diff --git a/src/layouts/AppLayout/AppLayout.stories.tsx b/src/layouts/AppLayout/AppLayout.stories.tsx index 96bdbd87..5e37389c 100644 --- a/src/layouts/AppLayout/AppLayout.stories.tsx +++ b/src/layouts/AppLayout/AppLayout.stories.tsx @@ -58,8 +58,15 @@ export const Standard: Story = {
+
+ diff --git a/src/layouts/AppLayout/AppLayout.tsx b/src/layouts/AppLayout/AppLayout.tsx index 0eee35c2..bb0175d7 100644 --- a/src/layouts/AppLayout/AppLayout.tsx +++ b/src/layouts/AppLayout/AppLayout.tsx @@ -12,7 +12,6 @@ type AppLayoutProps = React.PropsWithChildren & { /** Whether this component should be unstyled. */ unstyled?: undefined | boolean, }>; - /** * AppLayout component. */ diff --git a/src/layouts/AppLayout/Header/AccountSelector.module.scss b/src/layouts/AppLayout/Header/AccountSelector.module.scss index 1b3cc573..aa184016 100644 --- a/src/layouts/AppLayout/Header/AccountSelector.module.scss +++ b/src/layouts/AppLayout/Header/AccountSelector.module.scss @@ -21,6 +21,10 @@ .bk-account-selector__icon { --bk-icon-accent-color: #{bk.$theme-header-icon-background-default}; + //font-size: 1.2em; // FIXME: need to make sure the overall size (with decoration) is not affected + } + .bk-account-selector__caret { + margin-inline-start: -0.2rem; // Compensate for visual gap in the icon itself } } } diff --git a/src/layouts/AppLayout/Header/AccountSelector.tsx b/src/layouts/AppLayout/Header/AccountSelector.tsx index 2f42d30d..2eca909c 100644 --- a/src/layouts/AppLayout/Header/AccountSelector.tsx +++ b/src/layouts/AppLayout/Header/AccountSelector.tsx @@ -27,9 +27,9 @@ export const AccountSelector = (props: AccountSelectorProps) => { placement="bottom-start" items={ <> - - - + + + } > @@ -40,11 +40,11 @@ export const AccountSelector = (props: AccountSelectorProps) => { className: cx('bk', { [cl['bk-account-selector']]: !unstyled }, propsRest.className), })} > - {state.selectedOption === null ? 'Accounts' : state.selectedOption} - + } diff --git a/src/layouts/AppLayout/Header/SolutionSelector.module.scss b/src/layouts/AppLayout/Header/SolutionSelector.module.scss index 7459fa75..e5894d3e 100644 --- a/src/layouts/AppLayout/Header/SolutionSelector.module.scss +++ b/src/layouts/AppLayout/Header/SolutionSelector.module.scss @@ -8,6 +8,8 @@ .bk-solution-selector { @include bk.component-base(bk-solution-selector); + user-select: none; + // Allow the element to shrink down to just the icon overflow: hidden; flex-shrink: 4; // Shrink relatively fast (since there is no important information besides the icon) @@ -20,5 +22,8 @@ .bk-solution-selector__icon { --bk-icon-accent-color: #{bk.$theme-header-icon-background-default}; } + .bk-solution-selector__caret { + margin-inline-start: -0.2rem; // Compensate for visual gap in the icon itself + } } } diff --git a/src/layouts/AppLayout/Header/SolutionSelector.tsx b/src/layouts/AppLayout/Header/SolutionSelector.tsx index b4cc707e..7cebf808 100644 --- a/src/layouts/AppLayout/Header/SolutionSelector.tsx +++ b/src/layouts/AppLayout/Header/SolutionSelector.tsx @@ -43,7 +43,7 @@ export const SolutionSelector = (props: SolutionSelectorProps) => { decoration={{ type: 'background-circle' }} /> Solutions - + } diff --git a/src/layouts/AppLayout/Header/UserMenu.module.scss b/src/layouts/AppLayout/Header/UserMenu.module.scss index 6535c173..ade7cb22 100644 --- a/src/layouts/AppLayout/Header/UserMenu.module.scss +++ b/src/layouts/AppLayout/Header/UserMenu.module.scss @@ -11,11 +11,11 @@ flex-shrink: 1; // Allow the user menu to shrink inside a parent flexbox min-width: 1rem; // Allow it to shrink down to just the icon on small screens max-width: 40ch; - margin-inline-start: bk.$spacing-3; + margin-inline-start: bk.$spacing-2; display: flex; flex-direction: row; - gap: bk.$spacing-3; + gap: bk.$spacing-2; align-items: center; > .bk-user-menu__user-icon { diff --git a/src/layouts/AppLayout/Header/UserMenu.tsx b/src/layouts/AppLayout/Header/UserMenu.tsx index c555c4a5..78786420 100644 --- a/src/layouts/AppLayout/Header/UserMenu.tsx +++ b/src/layouts/AppLayout/Header/UserMenu.tsx @@ -28,7 +28,7 @@ export const UserMenu = (props: UserMenuProps) => { if (userName) { return ( <> - + {userName} ); diff --git a/src/layouts/AppLayout/Logo/Logo.module.scss b/src/layouts/AppLayout/Logo/Logo.module.scss index 285b6ba5..84dac32e 100644 --- a/src/layouts/AppLayout/Logo/Logo.module.scss +++ b/src/layouts/AppLayout/Logo/Logo.module.scss @@ -10,15 +10,15 @@ .bk-app-logo { @include bk.component-base(bk-app-logo); container-type: inline-size; - width: 200px; + width: 200px; // FIXME aspect-ratio: 1 / 0.2; --icon-size: 0.16fr; place-self: center start; - // overflow: clip; - // user-select: none; + overflow: clip; + user-select: none; margin: 13px 10px; margin-bottom: 7px; diff --git a/src/layouts/AppLayout/Nav/Nav.module.scss b/src/layouts/AppLayout/Nav/Nav.module.scss index d904269b..5a7c5f09 100644 --- a/src/layouts/AppLayout/Nav/Nav.module.scss +++ b/src/layouts/AppLayout/Nav/Nav.module.scss @@ -4,68 +4,52 @@ @use '../../../styling/defs.scss' as bk; -// https://ryanmulligan.dev/blog/layout-breakouts/ -// https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/ -@mixin grid-breakout($inset-content: bk.$spacing-2) { - --gap-content: #{$inset-content}; - --size-content: calc(100% - var(--gap) * 2); - - display: grid; - grid-template-columns: - [full-start] var(--gap-content) - [content-start] var(--size-content) [content-end] - var(--gap-content) [full-end]; -} - @layer baklava.components { .bk-nav { @include bk.component-base(bk-nav); - --bk-nav-inset-content: #{bk.$spacing-3}; - //padding-block: var(--bk-nav-inset-content); - - @include grid-breakout($inset-content: var(--bk-nav-inset-content)); + --bk-nav-inset: var(--bk-app-layout-sidebar-inset, #{bk.$spacing-4}); menu { display: flex; flex-direction: column; - //row-gap: var(--bk-sizing-2); + row-gap: bk.$spacing-3; .bk-nav__item { - @include bk.font(bk.$font-family-display); + --bk-nav-item-border-size: #{bk.$spacing-1}; + + @include bk.font(bk.$font-family-body, $size: bk.$font-size-m); .bk-nav__item__link { cursor: pointer; - /* Focus outline */ - &:focus-visible { - outline: none !important; - box-shadow: inset 5px 0 var(--bk-focus-outline-color); - } + // Make space for the left border when in active state + border-left: var(--bk-nav-item-border-size) solid transparent; + // Break out of the sidebar padding to extend to the edges (for hover/active states) + margin-inline: calc(-1 * var(--bk-nav-inset)); + padding-inline: var(--bk-nav-inset); + padding-inline-start: calc(var(--bk-nav-inset) - var(--bk-nav-item-border-size)); padding-block: bk.$spacing-2; - &:hover { + @include bk.focus-inset; + &:hover, &:focus-visible { background: bk.$theme-side-nav-menu-background-hover; } - grid-column: full; - display: flex; flex-direction: row; gap: bk.$spacing-2; - .bk-nav__item__link__icon { - // ignore - } - .bk-nav__item__link__label { - // ignore - } + .bk-nav__item__link__icon { --keep: ; } + .bk-nav__item__link__label { --keep: ; } } - &[aria-current] { - border-left-width: 4px; - border-left-color: bk.$theme-side-nav-menu-tab-default; + .bk-nav__item__link { + background: bk.$theme-side-nav-menu-background-hover; + border-left-color: bk.$theme-side-nav-menu-tab-default; + font-weight: bk.$font-weight-semibold; + } } } } diff --git a/src/layouts/AppLayout/Sidebar/Sidebar.module.scss b/src/layouts/AppLayout/Sidebar/Sidebar.module.scss index 1ea55986..33abd331 100644 --- a/src/layouts/AppLayout/Sidebar/Sidebar.module.scss +++ b/src/layouts/AppLayout/Sidebar/Sidebar.module.scss @@ -9,7 +9,12 @@ @include bk.component-base(bk-app-layout-sidebar); container-type: inline-size; - align-self: start; /* https://ishadeed.com/article/position-sticky-css-grid */ + --bk-app-layout-sidebar-inset: #{bk.$spacing-4}; // Allow sidebar child components to know the inset + + align-self: start; // https://ishadeed.com/article/position-sticky-css-grid + + padding-block-start: bk.$spacing-6; + padding-inline: var(--bk-app-layout-sidebar-inset); display: flex; flex-direction: column; @@ -27,16 +32,18 @@ cursor: pointer; } - /* Customize some components */ + // Customize some components .bk-logo-with-text { margin: var(--bk-sizing-3); height: calc(var(--bk-sizing-4) + 18px); } } + + // Separators + hr { + margin-block: bk.$spacing-3; + border: none; + border-top: bk.rem-from-px(1) solid bk.$theme-side-nav-menu-divider-default; + } } } - -/* FIXME */ -.bk-theme--dark.bk-layout__sidebar { - /* background: bk.$color-brand-300; */ -}