Medplum

.inner { height: 80px; display: flex; justify-content: space-between; align-items: center; } .logoButton { padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm); border-radius: var(--mantine-radius-sm); transition: background-color 100ms ease; &:hover { background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5)); color: light-dark(var(--mantine-color-dark), var(--mantine-color-light)); } } .links { @mixin smaller-than $mantine-breakpoint-sm { display: none; } } .burger { @mixin larger-than $mantine-breakpoint-sm { display: none; } } .link { display: block; line-height: 1px; padding: 8px 12px; border-radius: var(--mantine-radius-sm); text-decoration: none; color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)); font-size: var(--mantine-font-size-lg); font-weight: 500; &:hover { background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6)); } } .linkLabel { margin-right: 5px; } .user { color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0)); padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm); border-radius: var(--mantine-radius-sm); transition: background-color 100ms ease; &:hover { background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8)); } @mixin smaller-than $mantine-breakpoint-xs { display: none; } } .userActive { background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8)); }