Medplum

.navbar { padding: 0; transition-property: width; } .logoButton { max-width: 45px; padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs); border-radius: var(--mantine-radius-sm); transition: background-color 100ms ease; &:hover { background-color: var(--mantine-primary-color-light-hover); } } .menuTitle { margin: 20px 0 4px 6px; font-size: var(--mantine-font-size-xs); font-weight: 500; color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-6)); white-space: nowrap; } .menuTitle:empty, .menuTitle:blank { display: none; } .link { width: 100%; height: 38px; border-radius: var(--mantine-radius-md); display: flex; align-items: center; justify-content: start; padding: 0 var(--mantine-spacing-sm); color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0)); outline: none; overflow: hidden; text-overflow: ellipsis; &:hover { background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)); text-decoration: none; } & svg:global(.tabler-icon) { color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2)); stroke-width: 1.5; width: 18px; height: 18px; min-width: 18px; max-width: 18px; } & > span { margin-left: var(--mantine-spacing-sm); white-space: nowrap; } &[data-active] { &, &:hover { background-color: var(--mantine-color-blue-light); color: var(--mantine-color-blue-light-color); & svg:global(.tabler-icon) { color: var(--mantine-color-blue-light-color); } } } } .link:focus-visible { outline: none; } .toggleButton { max-width: 45px; height: 38px; padding: 0 var(--mantine-spacing-sm); border-radius: var(--mantine-radius-sm); transition: background-color 100ms ease; & svg:global(.tabler-icon) { color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2)); stroke-width: 1.5; width: 18px; height: 18px; } &:hover { background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)); } }